body {
   margin: 0;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   font-family: 'Poppins', sans-serif;
   background-color: #f6f6f6;
}

.main {
   flex: 1;
}

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

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

p {
   font-size: .85em;
}

.nowrap {
   white-space: nowrap;
}

.btn_link {
   margin: 2px;
   display: inline-block;
   text-decoration: none;
   background-color: #6ebbb7;
   text-transform: uppercase;
   font-weight: bold;
   padding: 6px 36px;
   color: #fff;
   transition: .2s;
}

.btn_blue         { background-color: #6ebbb7; border: 4px solid #6ebbb7; color: #ffffff; }
.btn_blue:hover   { background-color: #ffffff; border: 4px solid #6ebbb7; color: #6ebbb7; }
.btn_blue:active  { background-color: #ffffff; border: 4px solid #61a5a2; color: #61a5a2; }
.btn_orange       { background-color: #f26f1e; border: 4px solid #f26f1e; color: #ffffff; }
.btn_orange:hover { background-color: #ffffff; border: 4px solid #f26f1e; color: #f26f1e; }
.btn_orange:active{ background-color: #ffffff; border: 4px solid #d6631b; color: #d6631b; }
.btn_white        { background-color: #ffffff; border: 4px solid #ffffff; color: #000000; }
.btn_white:hover  { background-color: #f26f1e; border: 4px solid #ffffff; color: #ffffff; }
.btn_white:active { background-color: #d6631b; border: 4px solid #ffffff; color: #ffffff; }

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

.header_wrapper {
   padding: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

#menu_header {
   display: inline-block;
}

#menu-toggle {
   display: none;
   font-size: 24px;
   text-shadow: #6ebbb7 0px 0 5px;
   color: #fff;
   background: none;
   border: none;
   cursor: pointer;
}

#links_header {
   display: inline-block;
   font-size: 16px;
   font-weight: 600;
   text-transform: uppercase;
   text-shadow: #6ebbb7 0px 0 5px;
   color: #fff;
   transition: .2s;
}
#links_header a,
#links_header a:active,
#links_header a:visited {
   color: #fff;
   text-decoration: none;
   transition: .2s;
}
#links_header a:hover {
   color: #ff9a00;
   text-decoration: none;
   transition: .2s;
}

.link_header {
   display: inline-block;
}

.link_header:not(:last-child)::after {
   content: "•";
   margin: 0 8px;
   color: #fff;
}

/* Gestion footer */
.footer {
   background-image: url("../img/background_footer.jpg");
   background-color: rgba(110, 187, 183, .81);
   background-size: cover;
   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)); }

* {
   min-width: 0;
}


/* Pour smartphones */
@media (max-width: 1000px) {
   #links_header {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 250px;
      background-color: #6ebbb7f8;
      box-shadow: 2px 0 10px rgba(0,0,0,0.25);
      transform: translateX(-100%);
      transition: transform 0.2s ease-in-out;
   }
   .menu-open #links_header {
      transform: translateX(0);
   }
   #links_header a {
      display: block;
      width: 100%;
      padding: 5px 10px;
      border-bottom: 1px solid #fff8;
      box-sizing: border-box;
   }
   .link_header {
      display: block;
   }
   .link_header:not(:last-child)::after {
      content: none;
      margin: 0;
   }   
   #menu-toggle {
      display: block;
   }
   #menu_header {
      text-align: right;
   }
}