/* ----------------------------- */
/* RESET
/* ----------------------------- */

@charset "UTF-8";
html {
  /* on s'arrange pour que 1rem soit égal à 10px */
  font-size: 62.5%;
  /* IE9-IE11 */
  font-size: calc(1em * 0.625);
}

/* la suite du reset permet d'enlever les marges par défaut créées par les navigateurs */
/* et de donner un comportement plus intuitif aux principaux éléments */

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
ol, ul, menu {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img{
  max-width: 100%;
  height: auto;
}
a{
  color: inherit;
  text-decoration: none;
}
h1, h2, h3, h4, h5{
  font-weight: normal;
}
*[role='button']{
	cursor: pointer;
	user-select: none;
}


/* ----------------------------- */
/* TYPOS
/* ----------------------------- */

@font-face {
    font-family: 'AUTHENTIC Sans';
    src: url('../fonts/AUTHENTICSans-60.woff2') format('woff2'),
        url('../fonts/AUTHENTICSans-60.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AUTHENTIC Sans';
    src: url('../fonts/AUTHENTICSans-90.woff2') format('woff2'),
        url('../fonts/AUTHENTICSans-90.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/* ----------------------------- */
/* DESIGN GENERAL
/* ----------------------------- */

body{
	font-family: 'AUTHENTIC Sans', 'Helvetica', Arial, sans-serif;
	font-size: 1.4rem; /* 1.4rem = 14px dans notre cas */
	line-height: 1.4;
  letter-spacing: 0.025em;
  font-weight: normal;
  background-color: #f1f1f1;
}

header{
  padding-top: 1.6rem;
}

header menu{
  display: flex;
  justify-content: center;
}

header menu a{
  display: block;
  font-size: 1.7rem;
  padding: 0.5em 1em 0.3em 1em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: #d6d6d6;
  margin: 0 0.15em;
  border-radius: 2em;
  transition: all 0.3s ease;
}

header menu a:hover{
  background-color: #fff;
  color: #711bff;
  padding: 0.5em 1.6em 0.3em 1.6em;
}

.projets-enavant figure{
  margin: 10rem ;
  max-width: 120rem;
  text-align: center;
}

.projets-enavant video{
  width: 100%;
  border-radius: 1.5rem;
  box-shadow: 0 0 18px -3px rgba(0, 0, 0, 0.42);
  margin-bottom: 2.5rem;
}

.projets-enavant figcaption{
  margin-left: 27.75rem;
  max-width: 55rem;
}

/* j'ai essayé de faire un justify-content: center pour la figcaption 
de "projet-enavant" mais ça ne centrait pas le texte c'était moche
donc j'ai fait à l'oeil avec un margin-left.*/ 

.details-projet{
  margin-bottom: 0.7em;
}

.date-projet,
.credits-projet{
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}

a.lien-projet{
  color: #711bff;
}
a.lien-projet:hover{
  text-decoration: underline;
}

.projets-enavant .texte-projet{
  font-size: 1.7rem;
}

.credits-projet{
  margin-top: 1em;
}

.projets-grille{
  display: flex;
  flex-wrap: wrap; 
  padding: 1.5rem 0.75rem;  
  aspect-ratio: 1 / 1;
}

.projets-grille figure{
  width: calc(100% / 3);
  max-width: 30em;
  margin: 0.45em;
}

img{
  aspect-ratio: 4.8/2.8;
}

.archive {
  display: block;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.7rem;  
  padding: 0.5em 1em 0.3em 1em; 
  letter-spacing: 0.04em;  
  background-color: #d6d6d6;  
  margin: 0 32.60em;  
  border-radius: 2em;
}

/*J'ai essayé de créer un hover comme dans le menu mais
je n'ai pas réussi je ne comprends pas d'où vient le problème.
Je le met en commentaire au cas ou ça fasse bugger le reste

.archive a: hover{
  background-color: #fff;
  color: #711bff;
  padding: 0.5em 1.6em 0.3em 1.6em;
}
*/

footer{
  display: grid;
  justify-content: center;
  margin: 5em 0;
}

footer a{
  border: 1px solid transparent;
  text-transform: uppercase;
  background: #d6d6d6;
  padding: 0.4em 0.8em 0.2em; 
  letter-spacing: 0.04em;
  margin: 0 0.1em;
  border-radius: 10em;
}

footer p{
  display: block;
  text-align: center;
  margin: 1.5rem;
  font-size: 0.7em;
}

/* Je n'ai pas réussi non plus à changer l'aspect du lien dans les copyrights
il copie le style des autres <a> du footer ce qui est logique, j'ai voulu
lui donner une class pour qu'il soit différent mais 
je n'ai pas réussi à lui donner une class et à utiliser cette
class en CSS pour faire les modifications. */