body {
   margin: 0;
   font-family: 'Poppins', sans-serif;
}

h1 {
   color: #333;
   font-size: 1.8em;
   font-weight: 700;
}

h2 {
   font-size: 1.2em;
   font-family: 'Lora', serif;
   font-style: italic;
   font-weight: 400;
}

p {
   font-size: .95em;
}

.nowrap {
   white-space: nowrap;
}

.btn_link {
   display: inline-block;
   text-decoration: none;
   background-color: #6ebbb7;
   text-transform: uppercase;
   font-weight: bold;
   padding: 10px 40px;
   color: #fff;
}

/* Gestion header */
.header {
   background-image: url("../img/background_header.png");
   background-color: rgba(110, 187, 183, .81);
   position: sticky;
   width: 100%;
   padding: 20px;
   top: 0;
   box-shadow: 0px 0px 10px #555;
}

#links_header {
   display: inline-block;
   font-size: 14px;
   font-weight: 600;
   text-transform: uppercase;
   text-shadow: #6ebbb7 0px 0 5px;
   color: #fff;
}

#links_header a,
#links_header a:hover,
#links_header a:active,
#links_header a:visited {
   color: #fff;
   text-decoration: none;
}

/* Gestion footer */
.footer {
   background-image: url("../img/background_footer.jpg");
   background-color: rgba(110, 187, 183, .81);
   box-shadow: 0px 0px 10px #555;
   padding: 20px;
   text-align: right;
}

/* Systeme de grille */
:root {
   --cols: 12;
   --gap: 1rem;
   --max: 1200px;
}
 
.container { 
   max-width: var(--max); 
   margin-inline: auto; 
   padding-inline: 1rem; 
}
 
.row {
   display: grid;
   grid-template-columns: repeat(var(--cols), 1fr);
   gap: var(--gap);
}
 
 .col { padding: 1rem; border-radius: .5rem; }
 
/* Utilitaires de span (1 à 12) */
[class*="span-"] { grid-column: span 12; }  /* par défaut: full width */
@media (min-width: 768px) {
   .span-1 { grid-column: span 1; }
   .span-2 { grid-column: span 2; }
   .span-3 { grid-column: span 3; }
   .span-4 { grid-column: span 4; }
   .span-5 { grid-column: span 5; }
   .span-6 { grid-column: span 6; }
   .span-7 { grid-column: span 7; }
   .span-8 { grid-column: span 8; }
   .span-9 { grid-column: span 9; }
   .span-10 { grid-column: span 10; }
   .span-11 { grid-column: span 11; }
   .span-12 { grid-column: span 12; }
}
 
.offset-1 { margin-left: calc((100% / var(--cols)) * 1 + var(--gap) * 1/var(--cols)); }