/* MOBILE FIRST */

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}


body{
	font-family: var(--fontFamily);
	font-size: var(--textSize);
	overflow-x: hidden;
	line-height: 1.3;
}

a{
	text-decoration: none;
	color: #000;
}

a:hover, 
.active a{font-style:italic}
main p a{color: var(--blue);}
main p a:after{
	content: "↗";
	margin-left: 5px;
}

main p .footnote-ref a {
  color: inherit;
}

main p .footnote-ref a::after {
  content: none;
}



h2, h3, h4{
	font-weight: normal;
}

p{ margin-bottom: 1rem;}
img{ width: 100%;}

main{ 
	margin-bottom: 150px; 
	padding: var(--betweenLines) var(--padding);
}

p, h2, h3, li, a{
	font-size: var(--textSize);
}

blockquote{
	padding-left: var(--padding);
	position: relative;
}

blockquote:before{
	content: "> ";
	position: absolute;
	left: 5px;
}

/* fade entre les pages */
#fade{
  opacity: 0;
  transition: opacity 1s ease-out;
}

#fade.loaded{
  opacity: 1;
}

/* ================= CLASSES UTILES ==================*/

.show-for-small-only{
	display: block;
}

.hide-for-small-only{
	display: none;
}

.blue{ color: var(--blue);}
.green{ color: var(--green); }
.orange{ color: var(--orange); }

.border-top{
	border-top: 1px solid #000;
	padding-top: var(--padding);
}

.border-bottom{
	border-bottom: 1px solid #000;
	padding-bottom: var(--padding);
}

.invisible{
	display: none;
}

.text-indent{
	text-indent: 40px;
}

.page__wrapper{
	padding-left: 0;
	padding-right: 0;
	margin:0;
}

/* ================= GLIGHTBOX CUSTOM ==================*/

.glightbox-clean .gslide-title{
	font-family: var(--fontFamily);
	font-weight: 600;
	line-height: 1.2;
}

.glightbox-clean .gslide-description{
	background: transparent;
}

.glightbox-clean .gdesc-inner {
  padding: 22px 0px;
}

.glightbox-clean .gslide-title,
.glightbox-clean .gslide-title a{
	color: #FFF;
}

/* ================= H E A D E R ==================*/
header{
	width: calc(100% - var(--padding));
	padding: var(--padding) var(--padding);
/*	position: fixed;
	width: 100%;
	top:0;
	left:0;
	right: 0;
	padding: 15px;
	z-index: 1000;
	background: #FFF;*/
}

.header__title .orange{
	display: block;
}

header.row{
	margin: 0;
}

header .site__logo,
header nav {
	border-bottom: 1px solid #000;
	padding-bottom: 0.7rem;
}

header nav{
  padding-top: 0.7rem;
}

header nav li{
	margin-right: 1rem;
	position: relative;
}

.placeHold{
	display: block;
	position: absolute;
	top: 0;
	font-style: italic;
	pointer-events: none;
	opacity: 0;
	left: 0;
}

header nav li:hover a{
	opacity: 0;
	font-style: normal;
}

header nav li:hover .placeHold{
	opacity: 1;
}

.active a{
	font-style : italic !important;
}

header .languages{
	position: absolute;
	right: calc(var(--padding) * 2);
	top: var(--padding);
}

/* HOME */
.projet{
	padding: 10px 0px 5px;
	border-top: 1px solid #000;
	margin-left: 0px;
	margin-right: 0px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.projet-tags{
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ' […]';
	color: var(--orange);
}

.projet:hover .projet-tags{
    white-space: normal;
    overflow: visible;
}

.projet__content__infos__group{
	margin-bottom: 2em;
}

.projet__section{
	margin-top: 3em;
	margin-bottom: 3em;
}

.projet__content__infos__group p,
.projet__content__infos__group li{
	margin:0;
}

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid #000;
}

th, td {
  padding: 10px;
  text-align: left;
}

.intro__wrapper{
	padding-bottom: 1rem;
}



.level-1 .projet-title{
	/*color: var(--orange) !important;*/
}

.level-2 .projet-title{
	margin-left: 2rem; 
}

/* ------ PAGE ------- */
.page__wrapper{
	padding-left: 0;
	padding-right: 0;
	margin:0;
}

.default__page__inner{
	padding: 0;
}

/*.footnote-ref{
	margin-left: -3px;
}*/

.footnote-ref a{
	font-size: var(--smallSize);
}

.footnotes-section{
	margin-top: 4rem;
	margin-bottom: 1rem;
	padding-left: 0;
	padding-right: 0;
}

.footnotes-section li{
	font-size: var(--smallSize);
	text-indent: 0px;
	padding-left: 2rem;
}

.footnotes-section li a,
.footnotes-section li p{
	font-size: var(--smallSize);
}

.footnotes-list{
	margin-left: 0.8rem;
}

/* ================= PROJETS ==================*/

.currentPage a{
	color: var(--orange) !important;
}

.projet-arbre{
	display: block;
	padding: 10px 0 5px 0;
	border-bottom: 1px solid black;
}

.projet-arbre:first-of-type{
	border-top: 1px solid black;
}

/* ============================================
   PANNEAU DE FILTRES
   ============================================ */

  .projets-filters{
   	border-top: 1px solid var(--orange);
   	border-bottom: 1px solid var(--orange);
   	margin-bottom: 4rem;
  }


 

	.projets-filters[data-state="collapsed"] .filters-content {
	  display: none;
	}

	.projets-filters .filters-content {
	  transition: opacity 0.3s ease;
	}

  .filters-header{
  	padding: 10px 0px 5px;
	  cursor: pointer;
	  user-select: none;
	}

	.filters-header-inner{
		display: flex;
	  justify-content: space-between;
	  align-items: center;
	}

	.filters-header h2{
		color: var(--orange);
		display: flex;
	  align-items: center;
	  gap: 8px;
	}

	.filters-controls {
	  display: flex;
	  gap: 8px;
	}

	.filters-controls .btn-toggle{
		color: var(--orange);
	}

	.projets-filters[data-state="expanded"] .btn-toggle .icon-chevron {
  	transform: rotate(180deg);
	}

	.filters-content{
		color: var(--orange);
		margin: 1rem 0;
	}

	.filters-content {
	  column-width: 240px;
	  column-gap: var(--padding);
	}

	/* Empêche la coupure des blocs */
	.filter-group {
	  break-inside: avoid;
	  margin-bottom: 1.5rem;
	}

	.filter-group-title{
		padding-bottom: .75rem;

	}

	/* faire 2 colonnes pour les tools (colonne plus longue que les autres) */
	.filter-group.tools .filter-tags{
		column-count: 3;
	}

	.filters-content a{
		color: var(--orange);
	}

	.filter-tag:hover{
		font-style: normal;
	}

	.filter-tag:before{
		content: "◻";
		font-size: calc(var(--textSize) + 3px);
	}

	.filter-tag.active:before{
		content: "⊠";
		font-size: calc(var(--textSize) - 2px);
	}

/*	.filter-tag.active{
		background: var(--orange);
  	color: #FFF;
  	text-decoration: none;
  	padding: 6px 10px 0px;
  	border-radius: 10px;
	}*/

	.btn-clear-filters{
		color: #000;
		opacity: 0.5;
	}

	.btn-clear-filters:hover{
		font-style: normal;
		opacity: 1;
	}



/* ============================================
   TAGS
   ============================================ */

  .projet-tag{
  	color: var(--orange);
  	display: inline-block;
  	margin-right: 15px;
  }

  .projet-tag.active{
  	background: var(--orange);
  	color: #FFF;
  	text-decoration: none;
  	padding: 6px 10px 0px;
  	border-radius: 10px;
  }

/* ================= PROJET ==================*/
.projet__wrapper{
	padding-top: calc(var(--padding) / 2);
}

.projet__header h1{
	font-style: italic;
	margin-bottom: 2em;
}

.projet__content h3{
	font-style: italic;
	padding-left: 2rem;
}

.projet__gallery li{
	margin-bottom: var(--padding);
}

.projet__diagram{
	width: 100%;
	margin:auto;
	padding-bottom: 4rem;
}

/* ============================================
   TERMES DANS LE TEXTE
   ============================================ */
.term{
	position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.term.active {
  color: #FFF;
  text-decoration: none;
  padding: 6px 10px 0px;
  border-radius: 10px;
}

.glossaire-term {
  color: var(--green);
}

.glossaire-term.active {
  background-color: var(--green);
}

.outil-term {
  color: var(--blue);
}

.outil-term.active {
  background-color: var(--blue);
}

/* Tooltip au survol */
.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  width: max-content;
  max-width: 300px;
  z-index: 1000;
  /*box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);*/
  pointer-events: none;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease forwards;
}

@keyframes tooltipFadeIn {
  to {
    opacity: 1;
  }
}

.glossaire-term .tooltip{
	background: var(--green);
}

.outil-term .tooltip{
	background: var(--blue);
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  
}

.glossaire-term .tooltip::after{
	border-top-color: var(--green);
}

.outil-term .tooltip::after{
	border-top-color: var(--blue);
}

.tooltip-hint {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
  opacity: 0.8;
}

/* ============================================
   PANNEAU DE DÉFINITIONS
   ============================================ */

#glossaire-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 2px solid #000;
  z-index: 999;
  transition: transform 0.3s ease;
  max-height: 50vh;
  display: flex;
  flex-direction: column;
}

#glossaire-panel[data-state="collapsed"] {
  transform: translateY(calc(100% - 60px));
}

#glossaire-panel[data-state="expanded"] {
  transform: translateY(0);
}

#glossaire-panel[data-state="hidden"] {
  transform: translateY(100%);
}

/* Header du panneau */
.glossaire-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px var(--padding);
  cursor: pointer;
  user-select: none;
}

.glossaire-panel-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--smallSize);
}

.panel-icon {
  font-size: 20px;
}

.panel-count {
  display: inline-block;
  background: rgba(255, 255, 255, 0.25);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 14px;
  margin-left: 8px;
}

.panel-controls {
  display: flex;
  gap: 8px;
}

.btn-toggle,
.btn-clear {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-toggle:hover,
.btn-clear:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.btn-toggle .icon-chevron {
  transition: transform 0.3s ease;
}

.glossaire-panel[data-state="expanded"] .btn-toggle .icon-chevron {
  transform: rotate(180deg);
}

/* Contenu du panneau */
.glossaire-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px var(--padding);
  background: #FFF;
}

.empty-state {
  text-align: center;
  color: #6c757d;
  padding: 40px 20px;
  font-style: italic;
}

/* Carte de définition */
.definition-card {
  animation: slideIn 0.3s ease;
  position: relative;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.definition-card.removing {
  animation: slideOut 0.3s ease forwards;
}

@keyframes slideOut {
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

.definition-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.definition-term {
  font-size: var(--smallSize);
  font-weight: normal;
  color: var(--green);
  margin: 0;
}

.definition-tools .definition-term{
	color: var(--blue);
}

.btn-remove {
  background: transparent;
  border: none;
  color: var(--green);
  padding: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.definition-tools .btn-remove{
	color: var(--blue);
}

.definition-text {
  font-size: var(--smallSize);
}

.definition-text a{
  font-size: var(--smallSize);
  color: var(--blue);
}

.definition-text a:after{
	content: "↗";
	margin-left: 5px;
}

/* ============================================
   TABLEAU
   ============================================ */

.tableau {
  display: flex;
  flex-direction: column;
}

.tableau__header,
.tableau__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0rem;
}

.tableau__header {
  display: none;
  border-top: 1px solid var(--blue);
}

.tableau__header > div{
	padding: 0.75rem;
	font-style: italic;
}

.tableau__row{
	border-top: 1px solid var(--blue);
}

.tableau__row:last-child{
	border-bottom: 1px solid var(--blue);
}

.tableau__cell {
  padding: 0.75rem;
}

.tableau__cell--label{
	font-style: italic;
}

.tableau__bloc {
  border-top: 1px solid var(--blue);
  padding: 0.75rem 0;
}

.tableau__bloc h3 {
  margin-bottom: 4rem;
}

.tableau__bloc .tableau__heading{
	font-style: italic;
}

.tableau__bloc .row{
	margin-bottom: 0.75rem;
}

.tableau--desktop {
  display: none;
}

.tableau--mobile {
  display: block;
}


/* ================= PAGE GLOSSAIRE ==================*/
/* ================= PAGE OUTILS ==================*/

.glossaire-entree,
.outils-entree {
	border-top: 1px solid var(--green);
	padding-top: 1em;
}

.outils-entree{
	border-color: var(--blue);
}

.outils-list{
	padding-bottom: 4rem;
}

.entree-titre {
	color: var(--green);
  margin: 0 0 12px 0;
}

.outils__page .entree-titre {
	color: var(--blue);
}

.entree-infos-link{
	color: var(--blue);
}

.entree-infos-link:after{
	content: "↗";
	margin-left: 8px;
}

.entree-related{
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.entree-related > li > a:before{
	content: "→ ";
}