/* Ordi */
@media screen and (min-width: 960px) {}
/* Tablets */
@media screen and (min-width: 560px) and (max-width: 959px) {}
/* Mobile */
@media screen and (min-width: 150px) and (max-width: 559px) {}

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

h2{margin:1em 0;}

ul {margin:0; padding-left:1em;}

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

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

pre {
margin-block: 0;
}

code {
font-family:B612Mono,mono;font-size:1em;
margin:0;padding:3px 5px;
background-color:rgba(250,250,205,1);color:rgba(80,100,110,1);
min-width: fit-content;
max-width: 40cap;/* 40 lettres majuscules ! */
display:block;
text-wrap: auto;
}

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

header {
  background-image: linear-gradient(24deg,#ed4264 17%,#ffedbc 120%);
  margin: 0 0 60px 0;
  header {min-height: 60px;}

}
header h1 {
  display: inline-block;
  padding: 0 1.333em;
}

header a {
  text-decoration: none;
  color: white;
}

.btn {
  position: relative; /* dans le flux, mais pas décalé */
  cursor: pointer;
  text-align: center;
  color: white;
  min-width:100px;
}

/* Ordi & Tablets */
@media screen and (min-width: 560px) {
    .btn {
           display: inline-block; 
           padding: 29px 12px;
      }
  }
/* Mobile */
@media screen and (min-width: 150px) and (max-width: 559px) {
    .btn {
           display: block; 
           padding: 15px 12px;
      }
  }

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






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

.article {
    justify-content: left;
    padding: 10px 0;
}

.article-container {
    margin:0 60px; /* identique à card-container */
}

#menu {
  font-size: 1.25em;
  font-weight:bold;
}

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

.card-container {
    margin:0 60px; /* identique à article-container */
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

.card {
    text-decoration: none;
    transition: 0.9s ease;
    color:rgba(0,0,0,1);
    position:relative;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
}
.card:hover {
    background-color:rgba(128,128,128,0.03);
    transition: 0.9s ease;
}

/* Ordi & tablets */
@media screen and (min-width: 762px) {
  .card {
    width: 301px;
    height: 487px;
  }
}
@media screen and (min-width: 720px) and (max-width: 761px)  { /* transition pour atteindre une margeur de car te 301 px en conservant margin et gap */
  .card {
    width: calc(50% - 20px); /* 20 px = demi gap */
    height: 487px;
  }
}
/* Mobile */
@media screen and (min-width: 150px) and (max-width: 719px) {
  .card {
    width: 100vw;
    height: 26vw; /* Toutefois, le rapport 100 sur 26 n'est pas conservé */
  }
}

.card img {
    max-width:100%;
    object-fit: cover;
}

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

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

@media screen and (min-width: 720px) {
  .card img {
    width: 100%;
    height: 186px;
  }
  .card h3 {
  }
}
@media screen and (min-width: 150px) and (max-width: 719px) {
  .card img {
    width: 50%;
    height: 100%;
    position: absolute;
    right:0;
  }
  .card h3 {
    width: 50%;
    position: absolute;
    top:0;
    bottom:0;
    margin:auto 0;
    height:fit-content;
  }
  .card p {
    display: none;
  }
}

.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');
}