/* reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
}
/* clean de bootstrap */
    p{
        margin-bottom: 0;
    }    


/* root */
:root{
    --main-color: black;  
    --background-color: white;
    --second-color:#d6d6d6;  

    --saumon: #FDD8DF;
    --mauvemellow :#E2E0FF ;
    --airbleu :#CAEFF0;
    --superrose :#FFD3F8;
    --pistache  :#CEF5C2 ;
    
    --hyperlink-color: #a5ffff;  
    font-size: 22px;
    line-height: 26px;
} 

html {
	scroll-behavior: smooth; /* safari not supported */
}

body{
    font-family: "Absans";
    color:var(--main-color);
    background-color: var(--background-color);
    width: 100%;

    /* Adoucir le rendu des fontes*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 100;
}


/*--------------------------/
/*  Hiérachies de typo     */

h1, h2, h3, p, .chapo{
    position: relative;
    line-height: 1.3em;
    font-weight: 100;
}

.intro{
    width: 100vw;
    margin: 0 -12vw;
    height: 100vh;
    padding: 20vh 0;
}

h3{
    text-decoration-thickness: 3px;
}
.intro h1{
    font-size: 19vw; /* Rempli toute la largeur */
    line-height: 19vw;
    text-align: center;

    color: var(--main-color);
    -webkit-text-stroke: 0.65vw  var(--main-color);
   /* -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 6px #CAEFF0v;
    text-shadow: #CAEFF0 10px 10px 10px,#CAEFF0 8px 8px 0px;*/
    letter-spacing: 0.02em;
}


.intro {
    animation: moveRight .7s ease-in-out;
    animation-play-state: paused ;
	animation-delay:  calc(var(--scroll) * -1s);
}

 @keyframes moveRight {
        0% {
            transform: translateX(0px) rotate(0);
        }
        50%{
            transform: translateY(50vh) ;
        }
    }

/* Sous titre - Art et culture en milieu rural */
    .soustitre {
        font-family: "Fibel Nord";
        font-size: 4vw;
        text-align: center;
        margin: auto;
        width: 100%;
    /*    display: block;  */
        color: var(--main-color);
        position: relative;
    }

h1{
    font-family: "Affigere";
}

h2{
    font-family: "Fibel Nord Kontour";
    font-size: 2.8em;
    line-height: 0.82em; /* Vérifier si ok */
}

h3{
    font-family: "Affigere";
    font-size: 2em;
    line-height: 1em;
     padding: 0.3em 0; /* Espace entre les sauts de paragraphes */

        width: 80%; /* Drapeau */
  min-width: 600px;
  max-width: 800px;
}

p{
    padding: 1em 0;    /* Espace entre les sauts de paragraphes */
        width: 60%;      /* Drapeau */
    min-width: 500px;
    max-width: 600px;
}

/* reset */
    em, strong{
        font-weight: 100;
        font-style: normal;
    }


/* Hyperliens généraux <main> */


footer a, main a{
    color: var(--main-color);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}
footer a:hover, main a:hover,footer a:focus, main a:focus {
    color: var(--hyperlink-color);
}



/*---------------------------/
/*  Structure   */

main{ /* Contenu principal de la page */
    position: relative; 
 /*  top: -2.5em; */
      margin: -2.5em 0 0 0; /* La hauteur de <nav> */
}

article{ /* Bloc de texte courant */
    min-width: 440px;
    width: 60vw;
}

/*---------------------------/
/*  Sections - navigation   */

nav {
    font-family: "Fibel Nord";

	height: 2.5em;
	position: sticky;
	top: 0;
    z-index: 998;
    color:var(--main-color);


	display: flex;
    justify-content: left;
    align-items: center;

    padding: 0 2em; /* Marge à gauche */
}
    nav { /* Ajustement accessiblité sur le menu */
        & ul, & li {
        list-style: none;
        display: inherit;
        }
    }
        .ouverture{	background-color: transparent;	}
        .scrolling{ background-color: var(--background-color);}

.link {
    font-size: 1.15em;

    color:var(--main-color);
    text-decoration: none;
    display:flex;
    align-items: center;
    height:2em;
    width:auto;
    padding: 0 1em;

    transition: all 0.5s;
}
    .link:first-of-type { padding-left: 0;} /* Correction pour marge à gauche */

    .link:hover,  .link:focus {
        paint-order: stroke fill;
        -webkit-text-stroke: 6px var(--hyperlink-color);
        text-decoration: none;
    }

    .active {   /* Menu actif = section active */
        paint-order: stroke fill;
        -webkit-text-stroke: 6px var(--hyperlink-color);
    }

/* <nav> toggle responsive du menu burger */

.menu-toggle{ /* <button> */
    display: none;
}
nav#menu{ /* <nav> */
    
}

/*-----------------------------------*/
/* Header titrage #logotype  <nav>   */

#logotype {
  position: absolute;
  right: 0;
  padding: 0 1em;
  font-family: Affigere;
  font-size: 1.5em;
}
  #logotype span{}

    #logotype {
        & span:nth-of-type(1),  & span:nth-of-type(9) {
            color: var(--mauvemellow);
        }
        & span:nth-of-type(2), & span:nth-of-type(10) {
            color: var(--saumon);
        }
        & span:nth-of-type(3), & span:nth-of-type(11) {
            color: var(--superrose);
        }
        & span:nth-of-type(4), & span:nth-of-type(12) {
            color: var(--pistache);
        }
        & span:nth-of-type(5), & span:nth-of-type(13) {
            color: var(--mauvemellow);
        }
        & span:nth-of-type(6), & span:nth-of-type(14) {
            color: var(--saumon);
        }
        & span:nth-of-type(7) {
            color: var(--superrose);
        }
        & span:nth-of-type(8) {
            color: var(--pistache);
        }
    }

#logotype a{
    text-decoration: none;
    display: flex;
}

#logotype a:hover > span, #logotype a:focus > span {
    color: var(--main-color);
    text-decoration: none;
}
    #logotype a:hover > .logo-illu, #logotype a:focus > .logo-illu {
        filter: none;
    }

/* Header <nav> illsutration graphique */
.logo-illu {
  height: 30px;
  padding: 0 0.5em 0 0;
  margin: auto;
  filter: invert(87%) sepia(6%) saturate(930%) hue-rotate(301deg) brightness(101%) contrast(98%);
}



/*-----------------------------------*/
/* <section>                           */

section {
	min-height: 100vh;
    height: fit-content;
	background-color: var(--second-color);
    scroll-margin: 50px; /*scroll margin cause height navBar*/

    overflow: clip;

    display: block;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 2em 12vw; /* Marge à gauche */
}

    section:nth-child(odd) { /* Pour distinguer les sections temporairement */
        background-color: var(--background-color);
    }

/*-------------------------/
/*  Switch de langue        */

.switchbox {
  display: flex;
  padding: 0 0 0 1.5em;
}

.l1017{ /* 1017 - français */
    padding: 0 0 0 1em;
}
.l1019{ /* 1017 -  anglais */
    padding: 0 0 0 0.8em;
}

.langue-inactive{
    color : var(--second-color) !important;
}

.switch:hover{
    color: var(--main-color);
}

.langue-active{
    color: var(--main-color);
}
.langue-inactive{
    color: var(--second-color);
}

/*-------------------------/
/*  IMAGES                */
/*

/*  1
/*  Filtre de couverture     */

.rose{ /* .ROSE = div de fond colorée à renommer */
    background-color: #dfcace;
    position:absolute;
    width: 100%;
   /* min-height: 100vh; */
    height:100%;
    margin: -2em -12vw;
      overflow: clip;
}
    .couverture {
        display: block;
        width: 100%;
        height: 100%;
        filter: hue-rotate(120deg) saturate(350%) invert(1) opacity(30%) invert(100%) brightness(2) blur(1px);
        mix-blend-mode: color;
    }

    /* correction de l'intro */
    .bloc-intro-association {
        background-color: white;
        position: relative;
        margin: -2em -12vw;
        padding: 4vw 12vw;
    } 

/*  2
/*  Filtre grille de projet   */

img.image-grille, img.img_projet {
    transition: opacity .4s ease, filter 0.5s ease;
    /* filtre - nature humaine */
    filter: brightness(1) contrast(0.25) saturate(2) hue-rotate(150deg) brightness(1.1) contrast(3);
}

img.image-grille.img_projet:hover{
    filter:none;
}


/*  3
/*  Doubles bordures ombres portées       */
img.bordure {

  box-shadow: 5px 5px 0 #fff, 10px 10px var(--border-color1);
  margin: 0 0.2em;
  width: 92%;
  height: auto;
}


/*---------------------/
/* PAGE PROJET
/**/


/* Entête */
.couverture-projet{ /* div qui contient l'image de couverture sur l'entête projet */
    position: relative;
    width: 100vw;
    max-height: 100vh;
    margin: -2.5em -12vw 0 -12vw; /* -2.5em : hauteur de la barre <nav> -12vw marges latérales */
      overflow: clip;
    /* Permet de centrée l'image */
    display: flex;
    justify-content: center;

    
}
    .couverture-projet img{
        width: 100%;
        height: fit-content;
    }   

.projet{
    position: relative;
    padding: 2em 0;
}

h1.titre-projet{
  width: 100%;
  font-size: 14vw;
  line-height: 11vw;
  text-align: center;
  text-transform: uppercase;

  /* Soulignement */
  text-decoration: underline solid var(--main-color);
  text-underline-offset: 4px;
  text-decoration-thickness: 4px;
} 

.dropcaps{
    font-family: "Affigere";
   /* float: left;
    max-width: 40%;
    min-width: min-content;*/
    font-size: 2em;
    line-height: 0.9em;
    padding-right: 0.1em;
    margin: -0.55em 0 0 0;
}

.projet > p:first-of-type{
   padding: 2em 0 1em 0;  
}

/* Grille d'images */

.grille-3{ /* La mosaïque de 3 images */
    display: flex;
    flex-wrap: wrap;
    width: 115%;
    justify-content: space-between;
    align-content: center;
    align-items: flex-start;
    padding: 0 0 1em 0;
    margin: 0 -4em;
}
.picture-3{ /* Le bloc <img>  + légende <p> */
    display: block;
    width: 31%;
}

p.img_description {
    padding: 0.5em 0;
    width: 100%;
    min-width: auto;
    max-width: 100%;
    font-size: 0.65em;
    line-height: 1.3em;
}

/* Images en pleine page */ 
.grandes-images{ /* */
   display: flex;
  flex-wrap: wrap;
  margin: 0 -4em;
}

.picture-1{ /* Le bloc <img> + légende  <p>*/
    padding: 0 0 1em 0;
}

.picture-1 img {
  width: 75vw;
}
    .picture-1:nth-child(even){
    text-align: right;
    }




/*---------------------*/
/* PIED */
footer{
    display: flex;
    justify-content: center;
    background-color: var(--second-color);
    width: 100%;
}
footer > p{
    padding: 0 2em; /* Marge à gauche */
    font-size: 0.8em;
}