/* RESET */
*, *::before, *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
    padding: 0;
  }

  img, picture, video, canvas, svg {
    display: block;
    width: 100%;
    height:auto;
  }
  html {
    scroll-behavior: smooth;
  }

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* PAGINATION NAV ------------------------------------------- */
#pagination-nav {
  color: var(--bleu);
  border-top: 1px solid var(--bleu);
}
.pagination {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-content: center;
}
  .pagination a {
  border-bottom: none;
  margin: auto 0;
  color: var(--bleu);
  border: 1px solid;
  border-color: var(--bleu);
  background-color: var(--blanc);
  }
  .pagination > p {
      font-size: var(--fs-l);
      margin: auto 1rem !important;
  }

/* IMAGES REPRIS DE STARTERKIT ----------------------------- */
a.img {
  border: none;
}

.video,
.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background: var(--vert);
  /* border-radius: 4px; */
}

.img img,
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

iframe {
display: flex;
width: 100%;
height: auto;
aspect-ratio: 16/9;
object-fit: cover;
border: 0;
margin-bottom: .5rem;
}
.img[data-contain] img {
  object-fit: contain;
}

.img-caption,
.video-caption {
  padding-top: .75rem;
  line-height: 1.5em;
}

figcaption {
  border-left: 1px dotted;
  padding-inline-start: .5rem;
}
/* PODCAST / AUDIO */

.audio-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--padding);
  background: var(--currentColor);
  color: var(--lightColor);
  padding: 1rem;
  margin: var(--padding) 0;
}

  .audio-poster,
    .audio-poster img {
    display: none;
  }
  audio {
    width: 100%;
  }
  .audio-info > * {
    padding: 0;
  }

    .audio-title {
      font-size: var(--t3);
      font-weight: var(--fw-gras);
      margin-bottom: 0;
    }
    .audio-subtitle {
      font-size: var(--fs-l);
      font-weight: var(--fw-normal);
    }
    .audio-element {
      margin-top: 1rem;
      height: 2rem;
      background: var(--lightColor);
      /* border-radius: 1rem; */
      width: 100%;
    }

input, button, textarea, select {
  font: inherit;
}

/* Variables */
:root {
  /*Couleurs web de la charte graphique*/
  --vert: #1e6b1e ; /*oklch(46.45% 0.134 143.04)   */
  --vertclair: #EBF7CC /* oklch(95.62% 0.058 120.17) */ ;
  --rouge: /* oklch(53.1% 0.098 36.08) */ #9c5643;
  --bleu: /* oklch(51.44% 0.123 259.54) */ #3A66AD;
  --violet: /* oklch(48.68% 0.095 318.35) */ #764D82;
  --blanc: white;
  --noir: #323232;
  --lightColor: var(--vertclair);
  --currentColor: var(--vert);

  /* Mise en page */
  --padding: calc(16px + 1.5625vw);
  --hauteurMenu: 48px; /* 50px */
  --hauteurSubMenu: var(--hauteurMenu);
  --bordermenu: 4px;
  --borderlr: none;/* 4px solid var(--vertclair); */
  --border: 1px solid;

  --hauteur-section: calc(100vh - var(--hauteurMenu) - var(--padding));
  --hauteur-section-submenu: calc(100vh - var(--hauteurMenu)*2 - 1px - var(--padding));

  /* Typographie Mobile */
  font-size: clamp(1rem, 0.179vw + 0.964rem, 1.125rem);
  line-height: clamp(1.3rem, 0.272vw + 1.249rem, 1.575rem);/* clamp(1.463rem, -0.054vw + 1.511rem, 1.5rem) */
  --fs-xs: .75rem; /* 12px*/
  --fs-s: .875rem; /* 14px */
  --fs-m: 1rem; /* 16px */
  --fs-ssmenu: 14px; /* 14px */
  --fs-l: var(--fs-m); /*1.125rem;  18px */
  --fs-xl: 1.125rem;/*var(--t3);1.25rem; /* 20px */
  /* Titres Fluid Desktop- mobile*/
  --t1: clamp(1.75rem, 2.716vw + 1.241rem, 4.5rem);/* Entre 28 (vw300) et 72px (vw1920)/* clamp(2.5rem, 2.143vw + 2.071rem, 4rem); */
  --t2: clamp(1.5rem, 1.358vw + 1.245rem, 2.875rem);/* Entre 24px et 46px /*2.5rem; /* 40 */
  --t3: clamp(1.375rem, 0.617vw + 1.259rem, 2rem); /* Entre 22px (vw300) et 32px (vw1920) 1.675rem; /* 26,8px */
  --t4: 1.23rem; /* 20px */
  --t5: 1rem; /* 16,25px */
  /* Graisse */
  --fw-normal: 300;
  --fw-gras: 800;
}

/* TAILLES DE TEXTES */
.xl, h4 { font-size: var(--fs-xl);
      margin: var(--fs-xl) 0; }
.l  { font-size: var(--fs-l); }
.m  { font-size: var(--fs-m); }
.s  { font-size: var(--fs-s); }
.xs { font-size: var(--fs-xs);}

/* FONDS COULEURS CLAIRES */
.vertclair { background-color: var(--vertclair); } 
.blanc     { background-color: var(--blanc); } 

/* FONDS COULEURS FONCÉES */
.vert   { --currentColor: var(--vert);   }
.rouge  { --currentColor: var(--rouge);  }
.bleu   { --currentColor: var(--bleu);   }
.violet { --currentColor: var(--violet); }
.noir   { --currentColor: var(--noir);   }
.vert, .rouge, .bleu, .violet, .noir     { 
  color: var(--lightColor);
  background-color: var(--currentColor);
}

/* BALISES STANDARDS ---------------------- */
body {
  font-family: "Geologica", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: var(--fw-normal);
  font-style: normal;
  line-height: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility !important;
  color: var(--currentColor);
  background-color: var(--lightColor);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-gras);
  line-height: 1.2;
  /* overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;  Chrome, Opéra, Edge*/
}
h1, h2, h3 {
  margin-bottom: 1rem /* calc(var(--padding)/2) */;
}

h1 {
  font-size: var(--t1);
  padding-bottom: calc(var(--padding));
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}

h2 {
  font-size: var(--t2);
  font-weight: var(--fw-normal);
  padding-bottom: calc(var(--padding)*1.25);
}

h3 {
  font-size: var(--t3);    
}
  .blocks h3:not(:first-child), 
  #article > h3:not(:first-child){
    margin-top: var(--padding);
  }
  h4:first-child { margin-top: 0; }
h5, h6 {
  font-size: var(--t4);    
  margin-bottom: .5rem;
}

p {
  margin: 1rem 0;
}
  p:first-of-type { margin: 0 0 1rem 0; }
  p:last-child    { margin: 0 0 0 0;    }

a {
  font-weight: var(--fw-gras);
  color: inherit;
}
  .bouton {
    display: inline-block;
    width: 100%;
    border-radius: 1.25rem;
    font-size: var(--fs-m);
    font-weight: var(--fw-normal);
    line-height: 2.5rem;
    height: 2.5rem;
    text-align: center;
    padding: 0 .75rem;
    margin: 0 0 1rem 0;
    color: var(--currentColor);
    background-color: var(--lightColor);
    border: 1px transparent;
  }

strong, b {
  font-weight: var(--fw-gras);
}

i, em, blockquote { 
  font-variation-settings: 'CRSV' 1; /* Utiliser les variantes de lettres cursives */ 
}  

u {
  text-decoration: none;
  border-bottom: 1px solid;
}

sup, sub {
  padding: 0 .1rem ;
}

ul {
  list-style-position: inside;
}
  li {
    margin-bottom: .5rem;
  }

address {
  font-style: normal;
  overflow-wrap: break-word;
  word-break: break-all;
}

blockquote {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
  padding-left: 1rem;
  border-left: 2px solid;
  margin: var(--padding) 0;
}
  blockquote > footer { 
    background-color: transparent;
  }
    blockquote > footer:before { 
      content:"— ";
      white-space: pre;
    }

hr {
  color: inherit;
  border: none;
  border-top: 1px dashed;
  width: 100%;
  margin: var(--padding) auto;
}

/* Éléments cachés mais présents */
.invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip-path: rect(1px 1px 1px 1px);
}

/* TABLEAUX */
table {
  overflow-x: scroll;
}

/* ACCORDEONS */

/* Bloc de details */
.bloc-details {
  margin-bottom: 1rem;
}
  .bloc-details h3 {
    font-size: var(--fs-l) !important;
    margin-bottom: .5rem;
  }
    .bloc-details h3 + details summary {
        border-top: var(--border);
    }

/* Details */
details summary {
  padding: .75rem 0 .75rem .5rem;
  border-bottom: var(--border);
  cursor: pointer;
  font-size: var(--fs-m);
  list-style: none;
  width: 100%;
  display: flex;
  justify-content:start;
  align-content: center;
} 
details summary > p:first-child {
  margin: 0;
}

summary::-webkit-details-marker {
  display: none
}
details[open] summary {
  font-weight: var(--fw-gras);
  border-bottom: 1px dashed;
} 

details[open] + details summary {
  border-top: var(--border);
} 
  details summary span {
    align-self: start;
    margin-left: auto;
  }
    details summary span:after {
      content: "+";
      margin-left: .5rem;
      padding-right: .5rem;
      /* font-size: var(--fs-l); */
      font-weight: var(--fw-normal);
      line-height: 1;
      align-self: end;
    }   
    details[open] summary span:after {
      content: "↑";
      font-size: var(--fs-m);
    }

    /* DIV */
    details[open] summary,
    details div {
      color: var(--currentColor);
      background-color: var(--lightColor);
    }
    .vertclair details[open] summary,
    .vertclair details div {
      background-color: var(--blanc);
    }

    details div {
      padding: 1rem;
    }

      details p:first-child {
        margin: 1rem 0;
      }
      details div p:first-of-type {
        margin-top: 0;
      }

      details div a, 
      details div p a {
        /* display: inline-block;
        width: fit-content; */
        padding: 0;
      }
        details div a:before {
          content:"→ ";
          white-space: pre;
        }
    
/* SCROLL SNAP --------------------------------------------------------- */
.scroller {
  height: 100%;
  scroll-snap-type: y proximity;
  scroll-padding: var(--hauteurMenu);
  overflow-y: hidden;
}

  .scroller .scrollchild {
    scroll-snap-align: start;
  }
    .mandatory {
      scroll-snap-type: y mandatory;
    }

/* MAIN ----------------------------------------------------------------- */
main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--hauteurMenu));
  height: fit-content;
  background-color: var(--vertclair);
}
  main a {
    text-decoration: none;
    border-bottom: 1px solid;
  }

/* SECTION BASE --------------------------------------------------------- */ 
section, 
#contenu_principal,
#article {
  border-top: var(--border);
  min-height: var(--hauteur-section-submenu);
  padding: var(--padding) var(--padding) calc(var(--padding)*3) var(--padding);
}
section:first-of-type {
  border-top:none;
}
/* GRILLE BASE --------------------------------------------------------- */
.grid {
  --columns: 12;
  display: grid;
  gap: 0 var(--padding);
  grid-template-columns: 1fr;
}
  .grid > .column {
    margin-bottom: 0;
  }
    .grid .column:not(:first-of-type) {
      padding-top: var(--padding);
    }

.autogrid {
  --gutter: var(--padding);
  --min: 200px;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}
/* INTRO -------------------------------------------------------------- */   
#intro {
  display: flex;
  flex-direction: column;
  padding: var(--padding);
}
  /* BLOC Éléments clefs ET Résumé */
  #intro > #elts {
    margin-top: auto; /* Aligne l'élément en bas*/
    border-top: none;
  }

    #intro .enchiffres {
      margin: 0;
      flex-direction: column;
      grid-column: 1/-1;
      grid-row: 2 / 3;
    }
    #intro .resume {
      grid-column: 1/-1;
      grid-row: 1 / 2;
    }

        #intro .resume p,
        .enchiffres li  {
          font-size: var(--fs-l);
        }
        .enchiffres li {
            list-style: none;
            line-height: 1rem;
            min-height: 1rem;
            border-bottom: var(--border);
            padding: .5rem 0;
            margin-bottom: 0;
        }
            .enchiffres li:first-of-type {
                border-top: var(--border);
            }
            .enchiffres li:last-of-type {
                border-bottom: none;
            }

            .enchiffres li strong {
                line-height: normal;
                display: inline-block;
                vertical-align: middle;
            }
            .resume  p {
                margin: 0 0 1rem 0;
            }
            .resume  p:last-of-type {
              margin-bottom: 1rem;
          }  

/* SECTION CONTACT ----------------------------------------------- */
#contact {
  min-height: 3rem;
  border-top: var(--border);
  height: fit-content;
  align-items: center;
  padding: var(--padding);

}
  #contact h2, 
  #contact > div.contactlinks {
    grid-column: span 1;
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: var(--fs-xl);
  }
  #contact h2 {
    font-weight: var(--fw-normal);

  }
    #contact div a {
      height: fit-content;
      width: fit-content;
      font-size: var(--fs-l);
    }
      #contact div a:before {
        content: "→  ";
        white-space: pre;
      }
          

/* BLOCKS -------------------------------------------------------------- */
.blocks > :first-child {
  margin-top: 0;
}
.blocks h3{
  font-size: var(--t3);
}  

.blocks div ul, 
.blocks div ol {
  list-style-position: outside;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.blocks li:first-letter {
  text-transform: uppercase;
}

.blocks hr {
  margin: 1rem 0;
}

/* GALLERY*/
.block-type-gallery figure ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: row;
  gap: var(--padding);
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-color: var(--lightColor) transparent ;
  scrollbar-width: auto;
  padding-bottom: var(--padding);
  border-bottom: 1px dashed var(--lightColor);
}
  /* Scrollbar Pour Chrome */
  .block-type-gallery figure ul::-webkit-scrollbar {
    height: 12px;
    background-color: transparent; /* or add it to the track */
  }
  /* Scrollbar thumb Pour Chrome */
  .block-type-gallery figure ul::-webkit-scrollbar-thumb {
    background: var(--lightColor) ;
    border-radius: 6px;
  }

  .block-type-gallery figure ul li {
    flex: 1 0 calc((100%/1.15) );
    scroll-snap-align: center;
    max-width: fit-content;
  }
    .block-type-gallery figure ul li:first-of-type {
      padding-left: var(--padding);
    }
    .block-type-gallery figure ul li:last-of-type {
      padding-right: var(--padding);
    }

      .block-type-gallery figure ul li figure img {
        max-height: 25rem;
      }
        .img-caption {
          font-size: var(--fs-xs);
        }

  /* BLOCKQUOTE */
  .blocks blockquote:first-of-type {
    margin: var(--padding) 0;
  }
    .blocks blockquote p,
      .blocks blockquote footer {
        display: inline;
        align-self: start;
      }
      .blocks blockquote > p {
        font-size: var(--fs-xl);
      }
      .blocks blockquote > footer {
          font-size: var(--fs-m);
      }

  /* BLOCKQUOTE dans une colonne de 12 */
  div.column[style="--columns:12"] .blocks blockquote:only-child {
    padding-left: 0;
    border-left: none;
  }        
    div.column[style="--columns:12"] .blocks blockquote:only-child > p {
      font-size: var(--t2);
      text-align: center;
      align-self: center;
    }  
    div.column[style="--columns:12"] .blocks blockquote:only-child > footer {
      align-self: center;
    }    


/* LAYOUTS -------------------------------------------------------------- */
.layout {
  border-top: var(--border);
}

  h2.column {
    padding: 0 0 var(--padding) 0;
  }
  .h100, .h50 {
    padding-bottom: calc(var(--padding)*2);
  }
  /* hauteur de la section */
  .h100 {
    min-height: calc(100vh - var(--hauteurMenu)*2 - var(--padding));
    align-content: start;
  }
  .h50 {
      min-height: 50vh;

  }
  .fit {
      min-height: fit-content;
      padding-bottom: var(--padding);
  }

/* SECTION GALERIE ---------------------------------------------- */                
#galerie {
  color: var(--lightColor);
  background-color: var(--currentColor);
  padding: var(--padding) 0 ;
  min-height: fit-content;
  border-top: 1px solid;
}

  #galerie h2 {
      margin: 0 var(--padding) var(--padding) var(--padding);
      padding-bottom: 0;
  }
    #galerie .block-type-gallery figure figcaption:first-child {
      margin: 0 var(--padding) 1rem var(--padding) ;
    }
    #galerie .block-type-gallery figure figcaption:first-child:before {
      content:" ← →";
      white-space: pre;
    }

/* FOOTER -------------------------------------------------------------- */
#footer {
  display: grid;
  grid-template-columns: repeat(autofit, 1fr);
  padding: 0;
  color: var(--lightColor);
  background-color: var(--currentColor);
}
#footer h2 {
  font-size: var(--t2);
  font-weight: var(--fw-gras);
}
#footer a {
  font-weight: inherit;
  text-decoration: inherit;
}
#footer > section {
  padding: var(--padding);
}
#footer #contact-address > div{
  margin-bottom: 1rem;
}
  #footer #contact-address .web {
    border-left: var(--border);
    padding: 0 0 0 .5rem;
  }
  .web * {
    font-size: var(--var-s) !important;
    margin:0
  }
    .web a {
      text-decoration: none;
    }
    .web > .divers a {
      font-weight: var(--fw-gras) !important;
    }
    .web > ul {
      margin-bottom: 1rem;
      list-style: none;
    }
    .web > ul li {
      margin-bottom: .5rem;
    }
    .web > ul h3 {
      font-weight: var(--fw-normal);
    }
  /* Partenaires */
  #footer .partenaires {
    border-top: none;
    padding-top: 0;
  }
  #footer .partenaires > * {
    font-size: var(--fs-s);
    padding: 0;
  }
    #footer .partenaires h2 {
      width: 100%;
      padding-top: 1rem;
      border-top: 1px dotted;
      margin-bottom: .5rem;
    }
    #footer .partenaires span {
      display: inline-block;
      margin-right: 1rem;
      margin-bottom: .25rem;
    }
    #footer .partenaires span a:before {
      content:"→ ";
      white-space: pre;
    }
      #footer .partenaires span a {
        text-decoration: none;

      }
      #footer address {
        font-size: var(--t3);
      }
      #footer address span {
        display:inline-block;
        /* word-break: keep-all; */
      }
 
  /* Légales */
  footer > #legal {
    color: var(--currentColor);
    background-color: var(--lightColor);
    padding: 1rem var(--padding);
  }
    #legal * {
      font-size: var(--fs-s);
      display: inline;
    }
    #legal nav li {
      margin-right: 1rem;
      white-space: pre;
    }
    #legal h2 {
      font-size: var(--fs-s);
      margin-right: 1rem;
    }
    #legal p {
      
      white-space: break-spaces;
    }

@media screen and (min-width: 1024px) {

:root {
   /* Typographie Desktop 1rem = 18px */
  /*--fs-xs: .888rem; /* 14px*/
  /*--fs-s: 1rem; /* 18px */
  /*--fs-m: 1.167rem; /* 21px */
  /*--fs-l: 1.333rem; /* 24px */
  --fs-l: 1.2rem;
  --fs-xl: 1.56rem; /* 30px ÷ 18 */
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: normal;
  hyphens:none;
}

/* ACCORDEONS */
details:hover summary {
  color: var(--currentColor);
  background-color: var(--lightColor);
} 
.vertclair details:hover summary {
  background-color: var(--blanc);
}
  details div a {
    text-align: left;
  }
  details div a:hover {
    border-bottom: var(--border);
  }
    details div a:before {
      content:"";
    }
    details div a:hover:before {
      content:"→ ";
      white-space: pre;
    }


/* GRILLE BASE --------------------------------------------------------- */
.grid {
  grid-template-columns: repeat(12, 1fr);
  gap: var(--padding)
}
  .grid > .column {
    grid-column: span var(--columns);
  }
  .grid .column:not(:first-of-type) {
    padding-top: 0;
  }

/* INTRO --------------------------------------------------------------- */ 
#intro a:hover, 
#titre a:hover {
  background-color: var(--blanc);
} 
  /* BLOC Éléments clefs ET Résumé */
  #intro > #elts {
    border-top: var(--border);
  }
    /* UL Éléments clefs */
    #intro .enchiffres {
        grid-column: span 6;
        grid-row: 1 / 2;
    }
      .enchiffres li:first-of-type {
          border-top: none;
      }

    /* DIV Résumé */
    #intro .resume {
        grid-column: span 6;
        grid-row: 1 / 2;
    }
      .resume p {
          margin: .6rem 0 0 0;
      }
          
/* LINKS HOVER ----------------------------------------------------------------- */ 
main a:hover {
  color: var(--bleu);
  text-decoration: none;
  border-color: transparent;
  background-color: var(--blanc);
}

.vert a:hover, 
.vertclair a:hover, 
.rouge a:hover, 
.bleu a:hover,
.violet a:hover,
.noir a:hover {
  background-color: var(--blanc);
  border-bottom: none;
}

#retour a:hover {
  font-weight: var(--fw-gras);
}
.bouton {
  width: fit-content;
}
  .bouton:hover {
    font-weight: var(--fw-gras);
    color: var(--blanc);
    background-color: var(--bleu);
  }

/* BLOCKS -------------------------------------------------------------- */ 
.blocks > :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.blocks figure {
  height: fit-content;
  margin: auto 0 var(--padding) 0
}
.blocks hr {
  margin: calc(var(--padding)/2) 0;
  border-top: 1px dashed;
}

.block-type-gallery figure ul li {
  flex: 1 0 calc(100%/2.15);
  scroll-snap-align: center;
}

/* PODCAST / AUDIO */

.audio-wrapper {
  grid-template-columns:  1fr 200px;
  gap: 0 var(--padding);
  /* border-radius: 1rem calc(100px + 2rem) calc(100px + 2rem) 1rem  */;
}
.audio-wrapper audio {
  grid-column: 1/-1;
  grid-row: 2/3;
}
.audio-info {
  grid-column: 1/2;
  grid-row: 1/2;
}
.audio-poster {
  grid-column: 2/3;
  grid-row: 1/2;
  display: block;
  aspect-ratio: 1/1;
  object-fit: cover;
  max-width: 200px;
}

.audio-poster img {
  display: block;
  width: 200px;
  height: 200px;
}

/* SECTION CONTENU PRINCIPAL Layouts ---------------------------------------- */ 
#contenu_principal div.layout > h2 {
  grid-column: span var(--columns);
}
  .layout .column[style="--columns:12"] .blocks p:first-child {
      padding-top: 0rem;
  }


/* SECTION CONTACT ------------------------------------------------------------- */
section.grid h2,
#contact h2, 
#contact > div.contactlinks {
  grid-column: span 6;
}

#contact div a:before {
  content: "";
  white-space: pre;
}
  #contact div a:hover:before {
    content: "→  ";
    white-space: pre;
  }

/* FOOTER ------------------------------------------------------------- */
  #footer a:hover {
    color: var(--bleu);
    background-color: var(--blanc);
  }
  #footer #legal {
    justify-content: space-between;
  }

}

@media screen and (max-width: 260px) {

  h1, h2, h3, h4, h5, h6, blockquote p  {
    /* overflow-wrap: break-word; */
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;  /* Chrome, Opéra, Edge */
  }
}