/*
Structure globale des pages
1. Header / Menu / btn <- La barre supérieure
2. div article-container <- Contenu de la note / Vide à l'accueil
3. section card-container <- Toutes les cartes de l’accueil / Deux aléatoire en fin d’article
*/

body {font-family:B612,Roboto,sans-serif;font-size:1em;
margin:0;padding:0 0 100px 0;
text-align:justify;}

h1{margin:25px 0;}

img {
display:block;
object-fit: contain;
max-width: 75%;
max-height: 400px;
margin:0 auto;
}

/********************* GLOBAL −  MEDIA QUERIES ***********************/

/* Microscopique */
@media screen and (max-width: 579px) {
  h1{text-align:center;}
}

/******************************* ARTICLES *********************************/

h2{margin:1em 0;}

ul {margin:0; padding-left:1em;}
li {list-style: none inside url('/images/li_arrow_2025.png');line-height:1.25em;margin:0.75em 0;}

.article-container img {
border: solid 1px rgba(0,0,0,0.6);
padding:0;
border-radius:10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
}

.article-container a {
  /*color:#009f60; vert */
  /*color:#ca8e00;*/
  color:#c90;
  text-decoration:none;
}

.article-container a:hover {border-bottom:1px solid;
}

.exter::after {content:  url(/images/external-link-ltr-icon.png);  margin-left: 1px;  vertical-align: super;}

pre {margin-block: 0;}

code {
font-family:B612Mono,mono;font-size:1em;
margin:0;
padding:0.5em;
border-radius:0.5em;
background-color:rgba(250,250,205,1);color:rgba(80,100,110,1);
max-width: fit-content;
display:block;
overflow:hidden;
text-overflow:ellipsis;
}

code.sortie {
/*background-color:rgba(230,255,245,1);*/
background-color:rgba(230,230,255,0.75);
}

.citation {
font-size:0.8333em;background-color:#eee;padding:10px;
border-radius:10px;
}

.rouge {color:rgba(195, 0, 58, 1);}
.vert {color:rgba(0, 121, 107, 1);}
.bleu {color:rgba(3, 155, 229, 1);}

/********************* ARTICLES −  MEDIA QUERIES ***********************/

/* Ordi & Tablets */
@media screen and (min-width: 800px) {
.article-container {margin-left:60px; margin-right:60px;margin-top:105px;}
        }
/* Mobile */
@media screen and (max-width: 799px) {
.article-container {margin-left:20px; margin-right:20px;margin-top:20px;}
}

/*************************** BARRE SUPÉRIEURE *****************************/

header {
  /*background-image: linear-gradient(to right, #2d1859, #341a60, #3a1c68, #421d6f, #491f76, #4c1f7c, #4e1f82, #511f88, #4f1e8f, #4d1e95, #491d9c, #451da3);*/
  /*background: linear-gradient(353deg, rgb(83 33 148 / 1) 17%, transparent 67%), linear-gradient(95deg, rgb(45 24 89 / 1) 40%, rgb(255 41 202 / 1) 107%);*/
  /*background: linear-gradient(350deg, rgb(83 33 148 / 1) 0%, transparent 50%), linear-gradient(7deg, rgb(45 24 89 / 1) 18%, rgb(230 41 202 / 1) 120%);*/
  /*background: linear-gradient(356deg, rgb(83 33 148 / 1) 5%, transparent 100%), linear-gradient(15deg, rgb(45 24 89 / 1) 18%, rgb(89 41 202 / 1) 90%);*/
  background:radial-gradient(farthest-corner at 60% 152%, rgb(89 41 222 / 0.9) 0%, transparent 61%), linear-gradient(30deg, rgb(45 24 89 / 1) 18%, rgb(83 33 148 / 1) 100%);
  z-index: 1000;
}

#menu {
  font-weight:bold;
  display:flex;
}

.btn {
  display: flex;           /* pour centrer le texte verticalement */
  align-items: center;      /*centrer verticalement */
  justify-content: center;  /*centrer horizontalement */
  text-decoration: none;
  color: white;
  cursor: pointer;
  transition: background-color 0.35s ease;
}

.btn:hover
{
  background-color:rgba(255,255,255,0.1);
}

/********************* BARRE SUPÉRIEURE −  MEDIA QUERIES ***********************/

/* Ordi & Tablets */
@media screen and (min-width: 800px) {
    header {position: fixed; left: 0; top: 0; width: 100%;}
    #menu {height: 80px; font-size: 1.25em;}
    .btn {padding: 0 12px; min-width: 100px;}
}
/* Mobile */
@media screen and (max-width: 799px) {
    header {position: fixed; left: 0; bottom: 0; width: 100%;}
    #menu {height:60px; font-size: 1.1em;}
    .btn {flex: 1; overflow:hidden;}
  }

/********************************* CARDS **********************************/

/* ---------- Container ---------- */
.card-container {
  display: grid;
  gap:40px;
}

.card-container.bulk {
  justify-content: center; /* centre les cartes si moins de colonnes */
}

.card-container.suggest {
/* Je laisse en cas de modif */
}

/* ---------- Carte Main ---------- */
.card {
  height:400px;
  position: relative;
  text-align: center;
  text-decoration: none;
  color: rgba(0, 0, 0, 1);
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transition: 0.35s ease;
/*  filter:grayscale(65%);*/

}

.card:hover {
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.28);
/*  filter:grayscale(0%);*/
}

/********************* CARDS − MEDIA QUERIES ***********************/

/* Ordi & Tablets */
@media screen and (min-width: 1560px) {
.card-container.bulk {grid-template-columns: repeat(4, minmax(260px, 280px)); margin:0 200px;}
        }
@media screen and (max-width: 1559px) {
.card-container.bulk {grid-template-columns: repeat(3, minmax(240px, 280px)); margin:0 160px;}
        }
@media screen and (max-width: 1119px) {
.card-container.bulk {grid-template-columns: repeat(2, minmax(220px, 280px)); margin:0 160px;}
}
/* Mobile */
@media screen and (max-width: 799px) {
.card-container.bulk {grid-template-columns: repeat(1, minmax(10px, 280px)); margin:0 20px;}
}

/* Ordi & Tablets */
@media screen and (min-width: 800px) {
  .card-container.suggest {margin:0 60px; justify-content: left;}
}
/* Mobile */
@media screen and (max-width: 799px) {
  .card-container.suggest {margin:0 20px; justify-content: center;}
  }

/* Ordi & Tablets */
@media screen and (min-width: 580px) {
  .card-container.suggest {grid-template-columns: repeat(2, minmax(250px, 280px));}
}
/* Mobile */
@media screen and (max-width: 579px) {
  .card-container.suggest {grid-template-columns: repeat(1, minmax(10px, 280px));}
  }



/********************* CARDS − CONTENU ***********************/

.card img {
  min-width: 100%;
  height: 43%;
  object-fit: cover;
}

.card img:hover {
}

.card h3 {
  margin: 20px;
  max-height: 90px; /* Trois lignes */
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.5rem;
}

.card p {
  margin: 15px;
  max-height: 73px; /* Quatre lignes */
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.66);
}

.card .date {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 2em auto;
  font-size: 0.666em;
  color: rgba(0, 0, 0, 0.66);
}

/**************************************************************************/
/************** LA SUITE NE CONCERNE QUE LES POLICES **********************/
/**************************************************************************/

@font-face {
  font-family:'B612';
  font-style:normal;
  font-weight:400;
  src:url('/fonts/B612-Regular.ttf') format('truetype');
}
@font-face {
  font-family:'B612';
  font-style:italic;
  font-weight:400;
  src:url('/fonts/B612-Italic.ttf') format('truetype');
}
@font-face {
  font-family:'B612';
  font-style:normal;
  font-weight:700;
  src:url('/fonts/B612-Bold.ttf') format('truetype');
}
@font-face {
  font-family:'B612';
  font-style:italic;
  font-weight:700;
  src:url('/fonts/B612-BoldItalic.ttf') format('truetype');
}
@font-face {
  font-family:'B612Mono';
  font-style:normal;
  font-weight:400;
  src:url('/fonts/B612Mono-Regular.ttf') format('truetype');
}
@font-face {
  font-family:'B612Mono';
  font-style:italic;
  font-weight:400;
  src:url('/fonts/B612Mono-Italic.ttf') format('truetype');
}
@font-face {
  font-family:'B612Mono';
  font-style:normal;
  font-weight:700;
  src:url('/fonts/B612Mono-Bold.ttf') format('truetype');
}
@font-face {
  font-family:'B612Mono';
  font-style:italic;
  font-weight:700;
  src:url('/fonts/B612Mono-BoldItalic.ttf') format('truetype');
}