/*
color: 
    black, white, ...
    #000000, #ffffff,...
    rgba(0,0,0,1), rgba(255,255,255,1), ...

*/

/*METHODE PARAISSEUSE, importation directe de chez google */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@300;400;600;700&display=swap');
/* ET RAJOUTER CA DANS BODY
font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300; // ici remplacer avec le bon weight le <weight>
    font-style: normal;
*/

/* Ca c'est la version sur notre serveur*/
@font-face {
    font-family: Clashdisplay;
    /*myFirstFont*/
    src: url(webfonts/ClashDisplay-Variable.woff2);
}


body {
    /*color: cornflowerblue;*/
    /*chez underscore theme ils ont mis aussi au cas ou on met pas*/
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    /* si on définit ici la font-size en px, c'est ça que les rem vont reprendre plus loin */
}

a,
a:visited {
    color: crimson;
    text-decoration: none;
}

a:hover {
    color: black;
    text-decoration: underline;
}


/* STUCTURE */
/* ne pas utiliser des headers mais plutot des classes*/
.site-header,
.site-main,
.site-footer {
    padding: 0.5rem 6rem
        /*0.5rem 1rem*/
    ;
}


/* CA C'ETAIT LA VERSION AVEC LE MENU SUR LE BAS DE LA LIGNE*/
.site-header {
    border-bottom: 1px solid black;
    padding-bottom: 0;
}

/*
.site-header {
    border-bottom: 1px solid black;
    padding-bottom: 0;
    /* ici on met le menu à la même hauteur que le logo
display: flex;
justify-content: space-between;
ou baseline pour être au milieu 
    align-items: flex-end;
    
}*/

.site-main {}

.site-footer {
    border-top: 1px solid black;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

/* TYPOGRAPHY */
h1,
h2,
h3 {
    font-weight: 600;
    font-family: Clashdisplay;
    letter-spacing: -0.05em;
    /*em = par rapport à lui-même*/
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

/* HEADER */
/* DONC CA C'EST SUPER POUR LE REFERENCEMENT PCQ C?EST DE LA TYPO ET DU COUP IL DECHIFFRE LES MOTS-CLES*/

/* ICI IL Y A JUSTE LE LOGO ET LE TEXTE EST CACHE
/*h1.site-title a,
p.site-title a {
    color: black;
    font-size: 4rem;
    /*technique pour remplacer typo
display: block;
/*comporte toi comme un bloc et non comme une typo
width: 240px;
height: 120px;
background: url(images/logo-25reamediadesign.svg.svg) no-repeat center center pink;
background-size: cover;
/*contain ou cover, etc...
/* comment l'objet recouvre la zone
text-indent: -50000px;
/* pour cacher le texte à gauche de l'écran mais garder le bon référencement !!!!!! (pour safari surtout max -50000 */

/*}*/

h1.site-title a,
p.site-title a {
    color: black;
    font-size: 4rem;
    /*technique pour remplacer typo*/
    display: block;
    /*comporte toi comme un bloc et non comme une typo*/
    padding-left: 150px;
    height: 120px;
    background: url(images/logo-25reamediadesign_2.svg.svg) no-repeat left center;
    background-size: contain;
    line-height: 1.8;
    font-weight: 700;
    /* ici on dit que la ligne ne repasse pas à la ligne*/
    /*white-space: nowrap;*/

}




h1.site-title,
p.site-title {
    margin: 0;
}


.site-title a:hover {
    color: black;
    text-decoration: none;
}

.site-description {
    display: none;
}

.main-navigation ul {
    justify-content: flex-end;
}

.main-navigation ul li {
    margin: 0;
}

/*LA ON FAKE UN BORDER CAR C?EST UN OBJET QU?ON RAJOUTE*/
/*
.main-navigation ul li:after {
    content: "";
    height: 1px;
    display: block;
    background-color: black;

}

.main-navigation ul li:first-of-type {
    content: "";
    height: 1px;
    display: block;
    background-color: black;
    width: 50%;
    transform: translateX(100%);
}

.main-navigation ul li:last-of-type {
    content: "";
    height: 1px;
    display: block;
    background-color: black;
    width: 50%;
    transform: translateX(100%);
}
*/

/*---*/


.main-navigation ul li a {
    color: black;
    font-weight: 600;
    font-size: 1.2rem;
    /*pour qu'il y ait des trucs autour, du padding */
    display: inline-block;
    padding: 0.5em 1em;
    border-radius: 20px 20px 0 0;
    border: 1px solid black;
    border-bottom: 0;
}

/*----ICI RONDS */
/*
.main-navigation ul li a:after {
    content: "";
    /*rajoute le mot vide à la fin des autres mots
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: transparent;
    display: block;
    position: absolute;
    /*pouvoir choisir dans la zone
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);

}*/

.main-navigation ul li.current-menu-item a:after {
    background-color: black;
}

.main-navigation ul li a:hover {
    background-color: grey;
    color: white;
    text-decoration: none;
    border: 1px solid grey;
}

/*  .main-navigation ul li.current_page_item a
celui-ci sens sur quel page on est*/
.main-navigation ul li.current-menu-item a

/*choisi quel partie exacte puisque chaque partie peut avoir differetn styles, merci WP */
    {
    background-color: black;
    color: white;
    text-decoration: none;

}


/* TRUC MACHIN PRIMARY MENU*/

.menu-toggle {
    width: 100px;
    height: 100px;
    background: url(images/logo-25reamediadesign.svg.svg) center center no-repeat;
    border: 0;
    /*il sort du flux avec absolute, autre option =*/
    position: fixed;
    top: 15px;
    right: 15px;
    /*pour faire disparaitre Primary menu*/
    text-indent: -5000px;
    z-index: 1000;
}

/*javascript se rajoute au-dessus de lui dans le code pour décrire l'état donc on le met avant*/
.toggled .menu-toggle {
    background-color: blue;
    background: url(images/logo-25reamediadesign_2.svg.svg) center center no-repeat;
}

.toggled .menu-menu-principal-container {
    background-color: red;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 500;
    height: 100vh;

}




.header-widget-area {
    background-color: bisque;
    display: flex;
    justify-content: flex-end;

}

.header-widget-area .header-widget {
    background-color: aquamarine;
    margin-left: 2rem;
}

.header-widget-area ul {
    margin: 0;
}

/*ICI CAS OU ON SELECTIONNE UNE CLASSE D?UNE CATEGORIE MAIS PAS L'AUTRE*/
.header-widget-area ul:not(.wp-block-social-links) {
    background-color: chartreuse;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-widget-area ul:not(.wp-block-social-links) li {
    margin: 0 1rem;
}






/* PAGES ------------------------------------ */

.home .entry-header {
    display: none;
}

/*LAISSER L'IMAGE EN PLEINE PAGE PASSER SOUS LE HEADER*/
/*HOME-PAGE*/
.home .site-header {
    background-color: transparent;
    position: absolute;
    width: 100%;
    z-index: 1000;
    /*COUCHES VERTICALES, dire que c'est très haut*/

}

/*Copié-collé depuis Coursvzaugg*/
.home .entry-content {
    margin-top: 0;
}

.home .site-main {
    padding-top: 0;
}

.entry-content .alignwide {
    margin-left: -80px;
    margin-right: -80px;
}

.entry-content .alignfull {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
}

.alignfull img {
    width: 100vw;
}

/*ICI c'EST LA VARIABLE QU?ON A DECLARE ET ON LUI DIT 100 de view-height donc = 100% */
/*
.home100 {
    height: 100vh;
}*/

.home100,
.home100 figure,
.home100 figure img {
    height: 100vh;
}

.home100 figure img {
    object-fit: cover;
}





/* ARCHIVES  (works-grid) */
.works-grid {
    /*background-color: pink;*/
    display: flex;
    justify-content: space-between;
    /*ici il devrait encore rien se passer pcq il faut definir la taille des colonnes*/
    flex-wrap: wrap;
    /* ici passe en retour à la ligne au lieu de rester horizontal*/
}

.works-grid article {
    width: 30%;
}

/* ARTICLE */
.nav-subtitle {
    font-size: 0.8em;
    text-transform: uppercase;
    font-weight: bold;
    /*display block va le faire revenir à la ligne PC IL VA PRENDRE TOUTE LA LARGEUR, au lieu d'être "en lign" qui est par défaut*/
    display: block;
}





.horizontal-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow: auto;
    /*scroller dans cette bande*/
    cursor: pointer;
    /*hiddem scroll bar*/
    scrollbar-width: none;
    /*Firefox*/
    -ms-overflow-style: none;
    /*IE and Edge*/
    /*background-color: pink;*/
    cursor: url(images/logo-25reamediadesign_2.svg.svg), auto;
}


.horizontal-scroll img {
    width: auto;
    max-width: none;
    height: 50vh;
    transition: all 0.3s ease-in-out;

}

.horizontal-scroll a,
.horizontal-scroll a:hover {
    color: black;
}


.horizontal-scroll a:hover {
    cursor: url(images/logo-25reamediadesign.svg.svg), auto;
}

/*au moment ou tu roll hover sur le link (qui est mtn la totalité du bloc, agit sur le h3*/
.horizontal-scroll a:hover h3 {
    opacity: 1;


}

.horizontal-scroll a:hover img {
    opacity: 0.25;
    /*animation sur la totalité des paramètres (la taille, la forme, gnagnagna,...)*/
}


.horizontal-scroll h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    /*background-color: greenyellow;*/
    /*mettre le texte au milieu de l'image de l'article*/
    transform: translate(-50%, -50%);
    /*justification dans le texte*/
    text-align: center;
    opacity: 0;
    /*animation sur la totalité des paramètres (la taille, la forme, gnagnagna,...)*/
    /*tjrs mettre l'animation sur l'état de base, et ensuite changer dans hover*/
    transition: all 0.3s ease-in-out;

}

.horizontal-scroll article {
    position: relative;

}







/* Add this to your theme's CSS file or Additional CSS => AU FINAL J?AJOUTE MOI-MEME un nouveau fichier CSS (avec ces infos) et l'appelle dans les functions.php*/
/*
canvas {
    border: 1px solid #000;
    background-color: pink;
}*/






@media screen and (max-width: 992px) {
    /*changer paddings dans tout les truc*/




}