@charset "UTF-8";
/* CSS Document */
/* 
La fonction var() peut être utilisée à la place d'une valeur pour n'importe quelle propriété d'un élément. voir les explications sur --> https://developer.mozilla.org/fr/docs/Web/CSS/var
Utilisé ici pour : 
définir la hauteur du menu (--hauteur-menu) dans la classe => nav.menu ul
définir la couleur de police noire (--police-noire) dans la classe => div.top-header, .accessibilite a, .admin

Charte graphique --> Couleurs :
blanc police (texte sur background gris foncé/noir) --> rgb(247 249 249) HEX(#F7F9F9) = police
gris foncé (= background noir) --> rgb(18 18 18) HEX(#121212) = entête et footer
gris moins foncé (= backgriund noir) --> rgb(38 47 48) HEX(#262F30) = main
Ecriture des couleurs en rgb : https://developer.mozilla.org/fr/docs/Web/CSS/color_value/rgb
*/
:root {
  /* Pseudo-classe :root --> https://developer.mozilla.org/fr/docs/Web/CSS/:root */
  /* Propriétés personnalisées --> https://developer.mozilla.org/fr/docs/Web/CSS/--* */
  --hauteur-menu: 4rem;
  --police-noire: rgb(
    18,
    18,
    18
  ); /* couleur gris foncé pour remplacer le noir rgb(0, 0, 0)  */
  --fond-color-footer: rgb(
    194,
    182,
    219
  ); /* couleur violet = #C2B6DB pour le footer */
  --fond-color-main: rgb(
    252,
    247,
    248
  ); /* couleur blanc cassé foncé = #FCF7F8 pour le fond de la partie main */
  --color-marquage: rgba(161, 100, 108, 1); /* couleur Rose Gold = #A1646A */
  /* -- Acesssibilité contraste : https://www.siegemedia.com/contrast-ratio */
  /* Background (#121212) Text color (#f7f9f9) = 17.72 (AAA) */
  /* Background (#262F30) Text color (#f7f9f9) = 12.97 (AAA) */
  /* Background (#121212) Text color (#A1646A) = 4.92 (AA) */
  /* --couleur rose: 
    https://www.rapidtables.org/fr/web/color/pink-color.html
    https://www.hexcolortool.com/B76E79#b76c77
    https://html-color.codes 
    Rose : si la couleur rose est souvent utilisée pour cibler une audience féminine, sa signification varie en fonction du ton utilisé et pourra même séduire la gent masculine (#realmenwearpink). Le rose a aussi un côté philanthropique puisque c’est la couleur de la lutte contre le cancer du sein. 
    Le rose exprime la féminité, le romantisme et la douceur.
    Bien que le rose soit une nuance de rouge, ses associations sont très spécifiques et différentes de celles du rouge. Le rose représente la sophistication, la sincérité, la romance et l’amour. Il n’a pas les connotations violentes et colériques du rouge et il peut être apaisant et doux. Le rose convient aux produits féminins ou aux sites dont le contenu est destiné aux femmes et aux jeunes filles. Le rose vif peut être criard et le rose pâle peut sembler trop sentimental ou trop doux pour certains sites.*/
  --fond-color-button: rgb(180, 219, 213); /* couleur Vert = #B6DBD5 */
  --fond-color-button-over: rgb(
    126,
    189,
    179
  ); /* couleur Bleu foncé = #7EBDB3 */

  /* ==== COULEURS v2 ==== */
  /* - rose foncé : #A1646A (183, 108, 119)
    - violet clair : #C2B6DB (194, 182, 219)
    - violet foncé :  #9E88CD (205, 136, 158)
    - bleu clair : #B6DBD5 (182, 219, 213)
    - bleu foncé : #7EBDB3 (179, 189, 126)
    - vert clair : #CFDBB6 (207, 219, 182)
    - vert foncé : #A9C078 (169, 192, 120)
    - background : #FCF7F8 (219, 182, 188) */

  --color-violet-clair: rgb(194, 182, 219); /* #C2B6DB */
  --color-violet-foncé: rgb(158, 136, 205); /* #9E88CD */
  --color-bleu-clair: rgb(182, 219, 213); /* #B6DBD5 */
  --color-bleu-foncé: rgb(126, 189, 179); /* #7EBDB3 */
  --color-vert-clair: rgb(207, 219, 182); /* #CFDBB6 */
  --color-vert-foncé: rgb(169, 192, 120); /* #A9C078 */
  --color-gris-inactif: rgb(218, 218, 218); /*#dadada */
  --color-gris: rgb(128, 128, 128); /* #808080 */
  --body-fonts: "Dyslexic", sans-serif;
  /* --> https://api.jquery.com/toggleclass/ */
  --line-height: 1.4rem;
  --police-titre-de-page: "Lilita One", system-ui;
  --angle-img-arrondi: 0.9rem;
}
* {
  /* margin: 0; --> enlevé car déjà dans normalize.css */
  padding: 0;
  font-family: "Manrope", sans-serif;
  /* -- Je choisi un taille de police de 14px -- */
  font-size: 14px; /* fallback pour les navigateurs qui ne supportent pas le "rem" comme IE7, IE8 et opera mini */
  /* --> je défini la taille de la police à 14px dans tout le site, voir : https://www.w3schools.com/tags/ref_pxtoemconversion.asp 
    Si on ne la défini pas, par défaut la taille est : 1em = 16px 
    Mais "em" est défini selon l'héritage à contrario de "rem", donc en responsive cela peut entraîner des comportements abberrants */
  font-size: 1.4rem; /* par cette déclaration, je défini à la taille à 14px = 1.4rem (font-size: 62.5% dans la balise html) --> voir page 20 et suivante du livre "Oh, my code" */
  /* color: var(--police-noire); */
  box-sizing: border-box;
  /* box-sizing = Les propriétés width et height incluent le contenu, le remplissage (padding), la bordure, mais pas la marge.
    Opposé à content-box = C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés width et height sont mesurées en incluant le contenu, mais pas le remplissage, la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (padding)). Ainsi, .box {width: 35rem; border:1rem solid black;} fournira une boîte dont la largeur vaut 37rem.
    --> https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing */
  background-color: var(--fond-color-main);
}
@font-face {
  font-family: "Satisfy";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/satisfy/v17/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
  /* #font-face = Charge la police Satisfy à partir de Google font */
}
@font-face {
  font-family: "Lilita One";
  font-weight: 400;
  font-style: normal;
  src: url("/font/LilitaOne-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Darumadrop One Regular";
  font-style: normal;
  font-weight: 400;
  src: url("/font/DarumadropOne-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  src: url("/font/Manrope-VariableFont_wght.ttf") format("truetype");
}
/* font-face --> https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/*/
@font-face {
  font-family: "Dyslexic";
  font-style: normal;
  font-weight: 400;
  src: url("/font/OpenDyslexic-Regular.otf") format("truetype");
}
@font-face {
  font-family: "Dyslexic";
  font-weight: 900;
  src: url("/font/OpenDyslexic-Regular.otf") format("truetype");
}
html {
  font-size: 62.5%; /* par cette déclaration, je défini à la taille de 1rem = 10px 
    --> https://connect.adfab.fr/dev/dev-front/unite-de-mesure-css-rem 
    --> voir aussi : https://raphaelgoetter.wordpress.com/2016/07/05/lastuce-du-font-size-62-5-oui-non-ou-ca-depend/ */
}
body {
  /* Voir --> https://genesis-technology.fr/un-footer-en-bas-de-page-grace-au-flex-et-au-grid/ */
  display: grid; /*Transforme la balise body en conteneur grid*/
  grid-template-rows: auto;
  /* auto = défini la hauteur que les lignes de la grille doivent occuper. Auto correspond à la hauteur par défaut de la ligne (donc en fonction de ce qu'il y a dedans) */
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 0 0.7rem;
  /* --> Défini des gouttières entre les colonnes de 0.7rem et pas de gouttière entre les lignes */
  grid-template-areas:
    "header header header header header header header header header header header header"
    "accueil-main accueil-main accueil-main accueil-main accueil-main accueil-main accueil-main accueil-main accueil-main accueil-main accueil-main accueil-main"
    "footer footer footer footer footer footer footer footer footer footer footer footer";
  /*--> défini une zone de grille de 12 zones de 2 colonnes = utilité de 12 colonnes, pourquoi pas 6 ? */
  width: 100vw;
  /* vw = permet de définir un pourcentage de la largeur du navigateur --> ne s'utilise donc que pour width. Ici = 100 % de la largeur de la fenêtre du navigateur */
  /*height: calc(100vh - 6rem);*/
  height: 100vh;
  /* Pour voir agir justify-content sur la verticale, il faut donner une hauteur au body. 
    vh (pour viewport height) permet de s'assurer que le body fera bien toute la hauteur de la surface d'affichage  du navigateur --> ici 100 % de la hauteur du navigateur */
  /* height: calc(100vh - 6rem); --> On déduit automatiquement les 3rem de marge top et bottom pour éviter d'avoir la barre de scroll si le contenu est faible */
}
/* Changer la police */
.dyslexia * {
  font-family: var(--body-fonts) !important;
}
/*------- ACCUEIL/INDEX -------*/
/*---- HEADER TOP HEADER ----*/
/*-----------------------------*/
header#accueil,
header#accueil-en {
  grid-area: header;
  /* Sous grille = */
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 4rem 9rem;
  grid-template-areas:
    "top-header top-header top-header top-header top-header top-header top-header top-header top-header"
    "logo logo logo logo logo menu menu menu menu";
  grid-gap: 0 0.7rem;
  /* On place les enfants */
  align-items: stretch;
  justify-content: center;
}
a {
  text-decoration: none;
  color: var(--police-noire);
}
a:hover {
  color: var(--color-marquage);
  border: 0.1rem solid var(--color-marquage); /* écriture --> /* largeur | style | couleur */
  border-width: 0 0 0.1rem 0;
  transition: color 350ms ease 0s;
}
div.top-header div a:hover svg path {
  fill: var(--color-marquage);
  transition: color 350ms ease 0s;
}

/*-------------- TOUTES LES PAGES --------------*/
/*------------ HEADER TOP HEADER -------------*/
/*---- Accessibilité, langue & espace admin ----*/
/*----------------------------------------------*/
div.top-header {
  grid-area: top-header;
  font-size: 1.1rem;
  color: var(--police-noire);
  /* Hauteur de ligne de : 1.1ex + 2.7rem en haut et + 1.4rem en bas*/
  line-height: calc(2.7rem + 1.1ex + 1.4rem);
  margin: 0;
  padding: 0 2.1rem 0 2.1rem; /* padding: ht dte bas gche */
  /* Pour aligner les boutons accessibilité, langue et admin = display:flex & flex-direction:row & justify-content:flex-end pour le mettre à droite*/
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  /* Espaces verticaux entre les blocs, pas de gouttière horizontale */
  gap: 2.1rem;
}
div.top-header div.accessibilite a {
  cursor: pointer;
}
.accessibilite a,
.admin,
#langue a {
  /* Pour aligner des logos avec les textes */
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--police-noire);
}
.accessibilite a:hover,
.admin input:hover,
#langue a:hover {
  color: var(--color-marquage);
  border: 0.1rem solid var(--color-marquage);
  border-width: 0 0 0.1rem 0;
}
div.top-header div#langue a:hover svg g path {
  fill: var(--color-marquage);
}
.imageSVG {
  /* Pour colorer les logos en blanc */
  filter: grayscale(1);
}
div.top-header a img {
  border-style: none;
  height: 3rem;
}
div.top-header form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.admin span {
  cursor: pointer;
  color: #fff;
}
.admin span:hover {
  color: #fff;
  border: none;
}
div.top-header form:hover {
  /* transition: color 350ms ease 0s;
  border-bottom: 0.1rem solid var(--color-marquage); */
  border: none;
}
div.top-header form:hover span {
  color: var(--color-marquage);
}
div.top-header form svg g path {
  transition: fill 350ms ease 0s;
}
div.top-header form:hover svg g path {
  fill: var(--color-marquage);
  padding: 0.3rem 0 0 0;
}
/*---------- TOUTES LES PAGES -----------*/
/*--- HEADER LOGO & MENU RESPONSIVE ---*/
/*---------- MONOGRAMME/MARQUE ----------*/
/*---------------------------------------*/
div.logo {
  grid-area: logo;
  margin: 0;
  padding: 0 0 0 2.1rem;
  display: grid;
  grid-auto-columns: min-content;
  grid-template-areas: "text monogramm";
}
h1.monogramme {
  grid-area: monogramm;
  width: 100%;
  font-size: 1.8rem;
  /* text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.34); */
  margin: 1.5rem 0 0 0;
  padding: 0.1rem;
}
div.logo div {
  grid-area: text;
  color: var(--police-noire);
  padding: 0;
}
div.logo div a img {
  height: 7rem;
}
div.logo div a.retour-accueil {
  text-decoration: none;
  border: none;
}
/*---------- TOUTES LES PAGES ----------*/
/*--- HEADER LOGO & MENU RESPONSIVE---*/
/*-----------MENU RESPONSIVE -----------*/
/*---------------------------------------*/

/* Menu de base sur les grands écrans */
div.menu {
  grid-area: menu;
  display: grid;
  justify-items: end;
}
div.menu nav {
  width: 70%;
  font-size: 2.7rem;
  margin: 0 1.7rem 0 0;
}
div.menu nav ul {
  display: flex;
  height: var(--hauteur-menu);
  list-style-type: none;
}
div.menu nav ul li {
  font-weight: 700;
  position: relative;
  flex: 1;
}
div.menu nav ul li a {
  text-decoration: none;
  color: var(--police-noire);
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
}
div.menu nav ul li a:hover {
  color: var(--color-marquage);
  font-weight: bold;
  top: 52%;
  border: 0.1rem solid var(--color-marquage);
  border-width: 0 0 0.2rem 0;
}
label {
  display: none;
}
#toggle {
  display: none;
}
div.menu label,
div.menu label span {
  cursor: pointer;
}

/*---- ACCUEIL/INDEX ----*/
/*-------- MAIN ---------*/
/*-----------------------*/

main#accueil-main,
main#accueil-en-main {
  grid-area: accueil-main;
  display: grid;
  /* 6 colonnes identiques de 1fr */
  grid-template-columns: 7rem 1fr 1fr 1fr 11rem;
  /* 2 lignes de 1fr */
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    ". presentation presentation hero ."
    ". realisations realisations realisations .";
  grid-gap: 0 0.7rem;
  /* On place les enfants */
  align-items: stretch;
  justify-content: center;
  margin: 11rem 0 2rem 0;
}

/* ================================================================= */
/* Première ligne contenant la présentation (grid-area=presentation) */
div.presentation {
  grid-area: presentation;
  align-items: stretch;
  align-self: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
div.text-presentation p {
  color: var(--police-noire);
  text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
  text-align: center;
}
div.text-presentation p.text-presentation {
  font-family: "Lilita One", system-ui;
  font-size: 5.5rem;
  justify-content: center;
  color: rgba(183, 108, 119, 1);
  margin: 0;
}
div.text-presentation p {
  font-size: 1.7rem;
  line-height: 2rem;
  padding: 2.1rem 0 0 0;
  justify-content: center;
  width: 100%;
}
div.text-presentation p:nth-child(3) {
  line-height: 2rem;
  padding: 0 7rem 0 7rem;
  margin: 0;
}
div.text-presentation p:nth-child(4) {
  line-height: 2rem;
  padding: 1.1rem 7rem 0 7rem;
  margin: 0;
}
div.text-presentation h2 {
  text-align: center;
  margin: 4rem;
}
div.text-presentation h2 a {
  background-color: var(--fond-color-button);
  border-radius: 0.9rem;
  border: none;
  margin: 0.5rem;
  padding: 0.6rem 2.1rem;
  width: 15.4rem;
  font-size: 1.4rem;
  color: var(--police-noire);
  text-align: center;
  transition: all 500ms;
  cursor: pointer;
  text-decoration: none;
  /*Trouvé sur --> https://fr.w3docs.com/snippets/css/comment-styler-les-boutons-avec-css.html*/
}
div.text-presentation h2 a:hover {
  /* Bouton : "vers mon portfolio" */
  background-color: var(--fond-color-button-over);
  color: var(--police-noire);
  border: none;
}

/* ======================================================= */
/* Première ligne contenant la photo hero (grid-area=hero) */
div.hero {
  grid-area: hero;
  align-items: stretch;
  align-self: center;
  margin: 0;
}
img.hero {
  width: 21em;
}

/* =================================================== */
/* Deuxième ligne contenant les dernières réalisations */
div.realisations {
  grid-area: realisations;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1.4rem;
  grid-template-areas:
    "titre-dernieres-realisations"
    "traces-dernieres-realisations";
}
div.titre-dernieres-realisations {
  grid-area: titre-dernieres-realisations;
  grid-template-columns: 1fr;
  align-items: stretch;
  align-self: initial;
}
div.titre-dernieres-realisations p {
  font-family: "Lilita One", system-ui;
  color: var(--color-marquage);
  font-size: 3rem;
}
div.traces-dernieres-realisations {
  grid-area: traces-dernieres-realisations;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1.4rem;
}
div.traces-dernieres-realisations div {
  justify-self: center;
  align-content: center;
  margin: 0;
  padding: 0;
  position: relative;
  width: 27rem;
  height: 27rem;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}
div.traces-dernieres-realisations div a div img.trace-img {
  width: 80%;
  border-radius: var(--angle-img-arrondi);
}

/*--- TOUTES LES PAGES ---*/
/*------- FOOTER ---------*/
/*------------------------*/
footer#footer {
  grid-area: footer;
  color: var(--police-noire);
  margin: 0;
  padding: 0;
}
div.top-footer {
  padding: 4ex 0 5ex 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.4rem;
  background-color: var(--fond-color-footer);
}
div.top-footer div {
  padding: 1rem;
  justify-self: stretch;
}
div.top-footer div:first-child {
  border: none;
  background-color: var(--fond-color-footer);
  background-color: var(--fond-color-footer);
}
div.top-footer div:nth-child(n + 1) {
  border-left: 0.1em solid var(--police-noire);
  background-color: var(--fond-color-footer);
  margin: 0;
  padding: 0;
}
div.top-footer div h5 {
  text-align: center;
  margin: 0;
  padding: 0 0 1rem 0;
  font-weight: 100;
  background-color: var(--fond-color-footer);
}
div.top-footer div h5 a {
  font-weight: 100;
  text-decoration: none;
  color: var(--police-noire);
  font-weight: bold;
  background-color: var(--fond-color-footer);
}
div.top-footer div h5 a:hover {
  color: var(--color-marquage);
  border: 0.1rem solid var(--color-marquage); /* écriture --> largeur | style | couleur */
  transition: color 350ms ease 0s;
  font-weight: bold;
  border-width: 0 0 0.2rem 0;
  background-color: var(--fond-color-footer);
}

div.top-footer div:nth-child(1) h5 {
  margin: 4.4rem 0 0 0;
}
div.top-footer div:nth-child(1) p {
  margin: 0.7rem;
}
div.top-footer div:nth-child(2) h5:nth-child(2) {
  margin: 0;
}
div.top-footer div:nth-child(2) h5:nth-child(1) {
  margin: 0;
}
div.top-footer div:nth-child(3) h5:nth-child(1) {
  margin: 4.1rem 0 0 0;
}
div.top-footer div p {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
  background-color: var(--fond-color-footer);
}
div.top-footer div hr {
  display: none;
  background-color: var(--fond-color-footer);
}
/* On défini des comportements différents pour chaque div du 'top-footer', en trois colonnes */
div.top-footer div:nth-child(2) h5 a.inactive {
  font-weight: bold;
  top: 52%;
  border: 0.1rem solid var(--color-marquage);
  border-width: 0 0 0.2rem 0;
}
div.top-footer div:nth-child(2) h5 a.inactive:hover {
  color: var(--police-noire);
  transition: none;
  top: 52%;
}
div.top-footer div:nth-child(2) div.logo-contact {
  display: flex;
  flex-flow: row nowrap;
  flex: 1 1 auto;
  justify-content: center;
  border: none;
  margin: 1rem 0 0 0;
}
div.top-footer div:nth-child(2) div.logo-contact svg {
  background-color: var(--fond-color-footer);
}
div.top-footer div:nth-child(2) div div.linked-icon {
  display: block;
  padding: 0 0.6rem 0 0.6rem;
  border: none;
}
div.top-footer div:nth-child(2) div div.linked-icon a:hover {
  border: none;
}
div.top-footer div:nth-child(2) div div.linked-icon a svg path {
  /* Transition de la couleur */
  transition: fill 500ms ease-in-out 100ms;
  /* transition-property |  transition-duration |  transition-timing-function | transition-delay */
}
div.top-footer div:nth-child(2) div div.linked-icon a svg:hover path {
  fill: var(--color-marquage);
}
div.top-footer div:nth-child(2) div div.contact-icon {
  display: block;
  padding: 0 0.6rem 0 0.6rem;
  border: none;
}
div.top-footer div:nth-child(2) div div.contact-icon a:hover {
  border: none;
}
div.top-footer div:nth-child(2) div div.contact-icon a svg #path2 {
  /* Transition de la couleur */
  transition: fill 500ms ease-in-out 100ms;
  /* transition-property |  transition-duration |  transition-timing-function | transition-delay */
}
div.top-footer div:nth-child(3) h5 a.inactive {
  font-weight: bold;
  top: 52%;
  border: 0.1rem solid var(--color-marquage);
  border-width: 0 0 0.2rem 0;
}
div.top-footer div:nth-child(3) h5 a.inactive:hover {
  color: var(--police-noire);
  transition: none;
  top: 52%;
}
div.top-footer div:nth-child(3) h5 {
  line-height: 2.3rem;
}
div.top-footer div:nth-child(2) div div.contact-icon a:hover svg #path2 {
  fill: var(--color-marquage);
}
div.top-footer div:nth-child(2) h5:nth-child(1) p {
  font-family: "Lilita One", system-ui;
  font-style: normal;
  color: var(--color-marquage);
  font-size: 3rem;
  margin: 0;
  padding: 0 0 0.4rem 0;
  font-weight: 700;
  background-color: var(--fond-color-footer);
}

.target {
  mask: url(#mask-1);
}
/* Footer rajouté seulement pour le responsive - donc display none ici */
div.medium-footer {
  display: none;
}
#footer hr.medium-footer {
  display: none;
}
/*---- PORTFOLIO, A PROPOS, CONTACT ----*/
/*--------- HEADER TOP HEADER --------*/
/*--------------------------------------*/
header#portfolio,
header#portfolio-en,
header#trace,
header#trace-en,
header#a-propos,
header#a-propos-en,
header#contact,
header#contact-en,
header#mentions-legales,
header#mentions-legales-en,
header#rgpd,
header#rgpd-en,
header#admin,
header#ajoutTrace,
header#modifTrace,
header#ajoutUtilisateur,
header#modifUtilisateur,
header#ajoutCommentaire,
header#deconnexion {
  grid-area: header;
  /* Sous grille = */
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 4rem 9rem;
  grid-template-areas:
    "top-header top-header top-header top-header top-header top-header top-header top-header top-header"
    "logo logo logo logo logo menu menu menu menu";
  grid-gap: 0 0.7rem;
  /* On place les enfants */
  align-items: stretch;
  justify-content: center;
}
/*------- PORTFOLIO -------*/
/*---------  MAIN ---------*/
/*-------------------------*/
main#portfolio-main,
main#portfolio-en-main {
  grid-area: accueil-main;
  /* Sous grille = */
  display: grid;
  grid-template-columns: 11rem 1fr 11rem;
  /* grid-template-rows: minmax(1fr, auto); */
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    ". bienvenue-evaluateur ."
    ". titrepage ."
    ". panneau .";
  grid-gap: 1.1rem 0.7rem;
  /* On place les enfants */
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2.1rem 0 5.4rem 0;
  width: 100vw; /* 100% de la largeur du viewport (la zone d'affichage) */
}
div.bienvenue-evaluateur {
  grid-area: bienvenue-evaluateur;
  justify-self: start;
  align-self: center;
  margin: 0;
  padding: 0 0 1rem 0;
}
h1.titrepage {
  grid-area: titrepage;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  font-family: "Lilita One", system-ui;
  font-style: normal;
  color: var(--color-marquage);
  /* text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.34); */
  font-size: 5rem;
  font-weight: 700;
}
p.bienvenu-evaluatuer {
  display: none;
  padding: 0 2rem;
  height: 100%;
}
div#panneau {
  grid-area: panneau;
  place-self: center;
  margin: 0;
  padding: 0;
  /* Sous grille = */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    "menu-tri"
    "resultats-tri"
    "vignettes";
  grid-gap: 1.1rem 0.7rem;
  /* On place les enfants */
  align-items: center;
  justify-content: center;
  /* width: 100%; --> A revoir */
}
.menu-tri {
  grid-area: menu-tri;
  align-self: center;
  justify-self: center;
  margin: 1.7rem 0 2.7rem 0;
}
#panneau h2.resultats-vignettes {
  grid-area: resultats-tri;
  align-self: center;
  justify-self: center;
}
/* Style de la grille de vignettes */
.vignettes {
  grid-area: vignettes;
  align-self: center;
  justify-self: center;
  /* Sous grille = */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas: "trace trace trace";
  grid-gap: 5rem 11rem;
  /* On place les enfants */
  align-items: center;
  justify-content: center;
}
div.vignettes a:hover {
  border: none;
}
#panneau div.vignettes a div img {
  width: 100%;
  height: 100%;
  border-radius: var(--angle-img-arrondi);
}
#panneau div.vignettes a div div {
  margin: 0;
  padding: 0 0 0.7rem 0.7rem;
  font-weight: 700;
}
/* Style des vignettes */
.trace {
  grid-area: trace;
  margin: 0;
  padding: 0;
  position: relative;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}
#panneau form {
  margin: 1.7rem 0 2.5rem 0;
}
#panneau form label {
  display: inline;
}
#tri {
  height: 3rem;
  width: 12rem;
  color: var(--police-noire);
}
button {
  /* Pour les bouton de tri */
  height: 3rem;
  width: 11rem;
  background-color: var(--color-vert-clair);
  border: none;
  border-radius: var(--angle-img-arrondi);
  color: var(--police-noire);
  font-size: 1.4rem;
  cursor: pointer;
  text-align: center;
  transition: all 500ms;
  cursor: pointer;
  text-decoration: none;
}
#panneau div.menu-tri button:nth-child(2) {
  width: 17rem;
}
button:hover {
  background-color: var(--color-vert-foncé);
  color: var(--police-noire);
  border: none;
}
div.menu-tri button:nth-child(1) {
  margin: 0 3rem 0 0;
}
div.menu-tri button:nth-child(2) {
  margin: 0 0 0 3rem;
}
#trace-main button {
  width: 12rem;
}
#modifTrace-main button,
#modifUtilisateur-main button,
#ajoutTrace-main button {
  width: 17rem;
}
.active {
  background: var(--police-noire);
  color: var(--color-marquage);
  border: 0.3rem solid var(--color-marquage);
  border-radius: 0.9rem;
}
.trace-img:hover {
  opacity: 0.3;
}
.trace:hover [data-title] {
  opacity: 1;
  color: #f7f9f9;
}
div.trace:hover:after {
  /* content: attr(data-title); */
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--police-noire);
  text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.34);
  font-weight: bold;
  font-size: 2.7rem;
  line-height: 3rem;
  text-align: center;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}
/*--------- TRACE --------*/
/*---------  MAIN ---------*/
/*-------------------------*/
/* Container = parent */
/* "place-items: center center;" ou "place-items: center;" ==>  <align-items> / <justify-items> */
/* "place-items: start center;" ==>  <align-items> ou ht/bas / <justify-items> ou dte/gche */
/* Items = enfant = sou-grid */
/* "place-self: center;" ==> <align-self> ou ht/bas / <justify-self> ou dte/gche */
/* gap: 1rem 1rem; = <grid-row-gap> <grid-column-gap>; --> Espacement entre les colonnes*/
main#trace-main,
main#trace-en-main {
  grid-area: accueil-main;
  display: grid;
  grid-template-columns: 7rem 1fr 1fr 7rem;
  grid-template-rows: minmax(auto, 1fr);
  place-items: start center;
  grid-template-areas:
    ". bienvenue-evaluateur . ."
    ". trace-photos trace-description .";
  gap: 1rem 3.4rem;
  place-self: start center;
  margin: 7rem 0 4rem 0;
  padding: 0;
  width: 100vw; /* 100% de la largeur du viewport (la zone d'affichage) */
}
main#trace-main div.bienvenue-evaluateur,
main#trace-en-main div.bienvenue-evaluateur {
  grid-area: bienvenue-evaluateur;
  place-self: start;
  margin: 0;
  padding: 0 0 1rem 0;
}
p.bienvenue-evaluateur {
  display: none;
  padding: 0 2rem;
  height: 100%;
}
main#trace-main div.trace-photos,
main#trace-en-main div.trace-photos {
  grid-area: trace-photos;
  place-self: start center;
  display: grid;
  grid-template-columns: minmax(auto, 1fr);
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    "bouton-trace ."
    "trace-photo-gde trace-photo-gde"
    "trace-photo-pte trace-photo-pte";
  gap: 1rem 1rem;
  place-items: start center;
  margin: 0;
  padding: 0;
}
main#trace-main div.trace-photos div.bouton-trace,
main#trace-en-main div.trace-photos div.bouton-tracee {
  grid-area: bouton-trace;
  place-self: center start;
  margin: 0;
  padding: 0.6rem 0 2.1rem 1.6rem;
}
#modifTrace-main div.bouton-trace,
#modifUtilisateur-main div.bouton-trace {
  grid-area: bouton-trace;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0 0 1rem 0;
}
#ajoutTrace-main div.bouton-trace {
  grid-area: bouton-trace;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0 0 1.5rem 0;
}
.btn-retour {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--color-vert-clair);
  border: none;
  border-radius: var(--angle-img-arrondi);
  width: 20rem;
  padding: 0 2.1rem;
  text-align: center;
  text-decoration: none;
  font-size: 1.4rem;
  color: var(--police-noire);
  text-align: center;
  transition: all 500ms;
  cursor: pointer;
}
.btn-retour:hover {
  background-color: var(--fond-color-button-over);
  color: var(--police-noire);
  border: none;
}
/* Afficher le texte "Retour" sur les écrans larges */
.text-retour {
  display: block;
  background-color: transparent;
}
/* Ajouter de l'espace à gauche du symbole "<" */
.icon-retour {
  margin-right: 0.5rem;
  background-color: transparent;
}
main#trace-main div.trace-photos div.trace-photo-gde,
main#trace-en-main div.trace-photos div.trace-photo-gde {
  grid-area: trace-photo-gde;
  place-self: center center;
  margin: 0;
  padding: 0;
}
main#trace-main div.trace-photos div.trace-photo-gde a,
main#trace-en-main div.trace-photos div.trace-photo-gde a {
  width: 70%;
}
main#trace-main .agrandir,
main#trace-en-main .agrandir {
  border: none;
}
main#trace-main div.trace-photos div.trace-photo-gde a img,
main#trace-en-main div.trace-photos div.trace-photo-gde a img {
  height: 100%;
  width: 100%;
  max-height: 45rem;
  max-width: 45rem;
  object-fit: cover;
  object-position: center;
  border-radius: var(--angle-img-arrondi);
}
/* Les filtres CSS3 appliqués sur des images --> https://paulund.developpez.com/tutoriels/css/images-filters/ */
main#trace-main a:hover img,
main#trace-en-main a:hover img {
  filter: contrast(0.6);
  -webkit-filter: contrast(0.6);
  -moz-filter: contrast(0.6);
  -o-filter: contrast(0.6);
  -ms-filter: contrast(0.6);
}
main#trace-main div.trace-photos div.trace-photo-pte,
main#trace-en-main div.trace-photos div.trace-photo-pte {
  grid-area: trace-photo-pte;
  place-self: center center;
  margin: 0;
  padding: 2.1rem 0 0 0;
}
main#trace-main div.trace-photos div.trace-photo-pte a img,
main#trace-en-main div.trace-photos div.trace-photo-pte a img {
  width: 100%;
  height: 100%;
  max-width: 21rem;
  max-height: 21rem;
  margin: 0 1.4rem;
  padding: 0;
  object-fit: cover;
  object-position: center;
  border-radius: var(--angle-img-arrondi);
}
main#trace-main div.trace-description,
main#tarce-en-main div.trace-description {
  grid-area: trace-description;
  place-items: start center;
  display: grid;
  grid-template-columns: minmax(auto, 1fr);
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    "references-trace"
    "titre-trace"
    "description-trace"
    "trace-commentaire";
  place-self: start center;
  margin: 0;
  padding: 0;
}
main#trace-main div.trace-description div.references-trace,
main#trace-en-main div.trace-description div.references-trace {
  grid-area: references-trace;
  place-self: center;
  margin: 0 0 0.4rem 0;
  padding: 1.4rem 0 2.3rem 0;
}
div.trace-description span.annee-BUT,
span.realisation {
  border: 0.3rem solid var(--color-vert-clair);
  border-radius: var(--angle-img-arrondi);
  margin: 0 3rem;
  padding: 0.3rem 2.1rem;
  font-size: 1.4rem;
}
main#trace-main div.trace-description h2.titre-trace,
main#trace-en-main div.trace-description h2.titre-trace {
  grid-area: titre-trace;
  place-self: center; /* <align-self> / <justify-self> */
  margin: 0 auto !important;
  padding: 0;
  font-family: "Lilita One", system-ui;
  font-style: normal;
  color: var(--color-marquage);
  font-size: 5rem;
  text-align: center;
}
main#trace-main div.trace-description div.description-trace,
main#trace-en-main div.trace-description div.description-trace {
  grid-area: description-trace;
  place-self: center;
  margin: 0;
  padding: 3.4rem 0 0 0;
}
#trace-main div.trace-description div.description-trace p {
  line-height: 2.1rem;
}
main#trace-main div.trace-description div.trace-commentaire,
main#trace-en-main div.trace-description div.trace-commentaire {
  grid-area: trace-commentaire;
  place-self: center;
  margin: 0;
  padding: 3rem 0 0 0;
}

/*---- A PROPOS -----*/
/*------ MAIN -------*/
/*-------------------*/
main#a-propos-main,
main#a-propos-en-main {
  grid-area: accueil-main;
  /* Sous grille = */
  display: grid;
  grid-template-columns: 7rem 2fr 1fr 7rem;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    ". titre-a-propos titre-a-propos ."
    ". texte1 photo1 ."
    ". texte2 photo2 .";
  grid-gap: 1.1rem 0.7rem;
  /* On place les enfants */
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2.1rem 0 5rem 0;
}
div.titre-a-propos {
  grid-area: titre-a-propos;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0 0 5.4rem 0;
}
div.titre-a-propos h1 {
  font-family: var(--police-titre-de-page);
  color: var(--color-marquage);
  font-size: 4.5rem !important;
  margin: 0;
  padding: 0;
}
div.texte1 {
  grid-area: texte1;
  justify-self: center;
  align-self: center;
  line-height: 0.4rem;
  margin: 0;
  padding: 0;
  font-size: 1.7rem !important;
}
div.texte1 h2,
div.texte2 h2 {
  font-family: var(--police-titre-de-page);
  font-weight: 100;
  font-size: 2.6rem;
  line-height: 3rem;
  margin: 0;
  padding: 0;
}
div.texte1 h2:nth-child(6) {
  padding: 2.1rem 0 0 0;
}
div.photo1 {
  grid-area: photo1;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.photo1 img {
  width: 279px !important;
  /* height: 365px;
  object-fit: cover;
  border-radius: 1rem;
  border: 1rem solid  var(--color-vert-clair);  /* border vs outline */ /* couleur violet clair */
  /* box-shadow: 6px 6px 0px var(--color-violet-clair); /* vert clair */
  /* filter: drop-shadow(6px 6px 0px var(--color-bleu-clair)); */
}
div.texte2 {
  grid-area: texte2;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
#a-propos-main div.texte2 p:nth-child(3),
#a-propos-main div.texte2 p:nth-child(4),
#a-propos-main div.texte2 p:nth-child(5),
#a-propos-en-main div.texte2 p:nth-child(3),
#a-propos-en-main div.texte2 p:nth-child(4),
#a-propos-en-main div.texte2 p:nth-child(5) {
  padding: 1rem 0 1rem 0;
}
div.photo2 {
  grid-area: photo2;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  max-width: 30rem;
  width: 100%;
  max-width: 30rem;
  height: 100%;
}
div.photo2 img {
  width: 309px !important;
  height: 206px;
  object-fit: cover;
  border-radius: 0.7rem;
  outline: 0.7rem solid var(--color-vert-clair);
}
#a-propos-main div.photo2 img:nth-child(2),
#a-propos-en-main div.photo2 img:nth-child(2) {
  outline: 0.5rem solid var(--color-violet-clair); /* violet clair */
  margin: 2rem 0 2rem 0;
}
#a-propos-main div.photo2 img:nth-child(3),
#a-propos-en-main div.photo2 img:nth-child(3) {
  outline: 0.7rem solid var(--color-bleu-clair);
}
div.photo1 img,
div.photo2 img {
  width: 100%;
}
#a-propos-main div.texte1,
#a-propos-main div.texte2,
#a-propos-en-main div.texte1,
#a-propos-en-main div.texte2 {
  font-size: 1.7rem;
  line-height: 2.1rem;
  margin: 0;
  padding: 0 1.4rem;
}
div.texte1 h3,
div.texte2 h3 {
  text-align: center;
  margin: 2.7rem 0 2.7rem 0;
}
div.texte1 h3 a,
div.texte2 h3 a {
  background-color: var(--fond-color-button);
  border-radius: 0.9rem;
  border: none;
  margin: 0.5rem;
  padding: 0.6rem 2.1rem;
  width: 15.4rem;
  font-size: 1.4rem;
  color: var(--police-noire);
  text-align: center;
  transition: all 500ms;
  cursor: pointer;
  text-decoration: none;
}
div.texte1 h3 a:hover,
div.texte2 h3 a:hover {
  background-color: var(--fond-color-button-over);
  color: var(--police-noire);
  border: none;
}
/*------- CONTACT --------*/
/*-------- MAIN ----------*/
/*------------------------*/
main#contact-main,
main#contact-en-main {
  grid-area: accueil-main;
  /* Sous grille = */
  display: grid;
  grid-template-columns: 7rem 30% 1fr 7rem;
  grid-template-rows: 60% 40%;
  grid-template-areas:
    ". txt-contact formulaire ."
    ". reseaux-sociaux formulaire .";
  grid-gap: 1.1rem 0.7rem;
  /* On place les enfants */
  margin: 0;
  padding: 2.1rem 0 5rem 0;
}
div.txt-contact {
  grid-area: txt-contact;
  place-self: end center;
  margin: 0;
  padding: 0;
}
div.txt-contact h2.form-title {
  text-align: center;
  font-family: var(--police-titre-de-page);
  color: var(--color-marquage);
  font-size: 4rem;
}
div.txt-contact h3 {
  font-weight: normal;
  text-align: center;
  margin: 0;
  padding: 0 0 3.4rem 0;
}
div.txt-contact p {
  text-align: center;
  font-weight: 700;
}
div.reseaux-sociaux {
  grid-area: reseaux-sociaux;
  place-self: start center;
  margin: 0;
  padding: 0;
}
div.reseaux-sociaux div.reseau-sociaux {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: space-between;
  gap: 1rem;
  width: 100%;
  margin: 1rem 0;
  padding: 0;
}
div.reseaux-sociaux div.reseau-sociaux div.logo-reseau-contact {
  padding: 0;
  margin: 0 auto;
}
div.reseaux-sociaux div.reseau-sociaux div.txt-reseau-contact {
  flex: 2 1 auto;
  align-self: center;
}
div.reseaux-sociaux div:nth-child(4) div.logo-reseau-contact a img {
  border: none;
  border-radius: 0.4rem;
}
div.reseaux-sociaux div div.logo-reseau-contact a:hover {
  transition: color 350ms ease 0s;
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
  border: none;
}
div.formulaire {
  grid-area: formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  max-width: 61.7rem; /* pour le rendre responsive */
  width: 100%; /* pour le rendre responsive */
}
div.formulaire form {
  width: 100%;
  /* border: 0.1rem solid var(--police-noire); */
  padding: 4rem 2.1rem 0.3rem 2.1rem;
  background-color: var(
    --color-vert-clair
  ); /* Couleur verte du fond du formulaire */
  border-radius: var(--angle-img-arrondi);
}
div.formulaire form h3 {
  display: inline-block;
  position: relative;
  top: -5.3rem;
  background-color: var(--main-noire);
  font-family: "Lilita One", system-ui;
  font-weight: 800;
  font-size: 3.4rem;
  color: var(--color-marquage);
  padding: 0 0.7rem;
  /* text-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.21); */
}
div.formulaire form div.identite {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding: 0 1rem 0 1rem;
  width: 100%;
  margin: 0;
  background-color: var(
    --color-vert-clair
  ); /* Couleur verte du fond du formulaire */
}
.identite-en {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
}
.change0rder {
  flex-flow: row-reverse nowrap;
}
div.formulaire form div.identite div.form-group {
  justify-items: end;
  background-color: var(--color-vert-clair);
  border: none;
}
div.formulaire form div.identite div.form-group input {
  color: var(--police-noire);
  padding: 0.7rem;
  margin: 0;
}
#contact-main div.formulaire form div,
#contact-en-main div.formulaire form div {
  margin: 0 0 2.1rem 0;
  padding: 0 1rem 0 1rem;
  background-color: var(
    --color-vert-clair
  ); /* Couleur verte du fond du formulaire */
}
div.formulaire form div div.form-group {
  color: var(--font-color) !important;
  margin: 0.7rem;
  padding: 0;
  border: none;
  background-color: var(--color-vert-clair);
}
div.formulaire form div div.form-group input {
  color: var(--police-noire);
  padding: 0.7rem;
  margin: 0;
  width: 100%; /* pour le rendre responsive */
}
div.formulaire form div div.form-group input:focus {
  transition: width 0.4s ease-in-out;
}
div.formulaire form div div.form-group textarea {
  color: var(--police-noire);
  padding: 0.7rem;
  margin: 0;
  width: 100%;
  resize: none;
}
#nom,
#prenom,
#email,
#objet,
#message {
  box-sizing: border-box;
  border-radius: 0.7rem;
  border: 0.2rem solid var(--color-vert-foncé);
  background-color: var(--fond-color-main);
  outline: none;
}
::placeholder {
  color: var(--color-gris);
}
.hidden {
  height: 0.1rem;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: -1000rem;
  width: 0.1rem;
}
#btn-send {
  display: block;
  margin: 2rem auto;
  padding: 0 2.1rem;
  background-color: var(--fond-color-button);
  border: none;
  border-radius: 0.9rem;
  width: 20rem;
  font-size: 1.4rem;
  color: var(--police-noire);
  text-align: center;
  transition: all 500ms;
  cursor: pointer;
  text-decoration: none;
}
#btn-send:hover {
  background-color: var(--fond-color-button-over);
  color: var(--police-noire);
  border: none;
}
div.formulaire p {
  text-align: center;
}
/*------- MENTIONS LEGALES --------*/
/*-------------- MAIN -------------*/
/*---------------------------------*/
main#mentions-legales-main,
main#mentions-legales-en-main {
  grid-area: accueil-main;
  /* Sous grille = */
  display: grid;
  grid-template-columns: 7rem 1fr 7rem;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    ". mentions-titre-page ."
    ". mentions-texte .";
  grid-gap: 1.1rem 0.7rem;
  /* On place les enfants */
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2.1rem 0 5rem 0;
}
div.mentions-titre-page {
  grid-area: mentions-titre-page;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  font-family: "Lilita One", system-ui;
  font-style: normal;
  color: var(--color-marquage);
  /* text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.34); */
  font-size: 5rem;
  font-weight: 700;
}
div.mentions-texte {
  grid-area: mentions-texte;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.mentions-texte h3 {
  font-family: var(--police-titre-de-page);
  font-size: 2.7rem;
  color: var(--color-marquage);
}
div.mentions-texte p {
  font-size: 1.5rem;
  line-height: 1.7rem;
}
div.mentions-texte a img {
  width: 11px;
  height: 11px;
}
/*-------------- RGPD -------------*/
/*-------------- MAIN -------------*/
/*---------------------------------*/
main#rgpd-main,
main#rgpd-en-main {
  grid-area: accueil-main;
  /* Sous grille = */
  display: grid;
  grid-template-columns: 7rem 1fr 7rem;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    ". rgpd-titre-page ."
    ". rgpd-texte .";
  grid-gap: 1.1rem 0.7rem;
  /* On place les enfants */
  place-items: center start;
  margin: 0;
  padding: 2.1rem 0 5rem 0;
}
div.rgpd-titre-page {
  grid-area: rgpd-titre-page;
  place-self: center;
  margin: 0;
  padding: 0;
  font-family: "Lilita One", system-ui;
  font-style: normal;
  color: var(--color-marquage);
  /* text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.34); */
  font-size: 5rem;
  font-weight: 700;
}
div.rgpd-titre-page.smartphone {
  display: none;
}
div.rgpd-texte {
  grid-area: rgpd-texte;
  place-self: center start;
  margin: 0;
  padding: 0;
}
div.rgpd-texte h3 {
  font-family: var(--police-titre-de-page);
  font-size: 2.7rem;
  color: var(--color-marquage);
}
div.rgpd-texte p {
  font-size: 1.5rem;
  line-height: 1.7rem;
}
#rgpd-main div.rgpd-texte ul,
#rgpd-en-main div.rgpd-texte ul {
  margin: 0;
  padding: 0 0 0 2.1rem;
}
/*---   ESPACE ADMINISTRATEUR  ----*/
/*-------------- MAIN -------------*/
/*---------------------------------*/
main#admin-main,
main#admin-en-main {
  grid-area: accueil-main;
  /* Sous grille = */
  display: grid;
  grid-template-columns: 7rem 1fr 7rem;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    ". espace-admin-titre ."
    ". espace-admin-onglets .";
  grid-gap: 1.1rem 0.7rem;
  /* On place les enfants */
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2.1rem 0 5rem 0;
}
div.espace-admin-titre {
  grid-area: espace-admin-titre;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  font-family: "Lilita One", system-ui;
  font-style: normal;
  color: var(--color-marquage);
  font-size: 5rem;
  font-weight: 700;
}
.espace-admin-onglets {
  grid-area: espace-admin-onglets;
  justify-self: center;
  align-self: center;
  margin: 3rem 0;
  padding: 0;
  font-family: "Lilita One", system-ui;
  font-weight: normal;
  color: var(--color-marquage);
  font-size: 5rem;
  font-weight: 700;
  width: 100%;
}
.onglets-titres {
  font-family: "Darumadrop One Regular";
  overflow: hidden;
  padding: 0.8rem;
}
.admin-onglets-liens {
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-bottom: 0.1rem solid var(--color-violet-foncé);
}
.onglets-liens {
  background-color: var(--color-violet-clair);
  color: var(--police-noire);
  font-weight: normal;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0.8rem 1.2rem;
  margin: 0 0.2rem;
  max-width: 23rem;
  width: 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.onglets-liens:hover,
.onglets-liens:visited {
  background-color: var(--color-violet-foncé);
  color: var(--police-noire);
  padding: 0 1.2rem;
}
.onglets-contenu {
  display: none;
  padding: 0.8rem;
}
#utilisateurs img {
  height: 1.4rem;
}
#utilisateurs img svg path {
  fill: var(--color-marquage) !important;
}
#traces,
#utilisateurs {
  display: block;
  border: none;
}
#traces h3,
#utilisateurs h3 {
  margin: 0;
  padding: 2rem 0 0 0;
  text-align: center;
  font-size: 3.4rem;
  font-family: "Darumadrop One Regular";
}
#traces h4,
#utilisateurs h4 {
  margin: 0;
  padding: 0 0 1rem 0;
  text-align: center;
  font-size: 3.4rem;
}
#traces .admin-tableau-traces,
#utilisateurs .admin-utilisateur {
  margin: 2rem 0;
  padding: 1.1rem 1.5rem;
  background-color: var(--color-vert-clair);
  border-radius: 0.5rem;
  font-weight: normal;
  box-shadow: 0 0 0.7rem #999999 inset;
}
#traces div,
#utilisateurs div {
  color: var(--color-vert-foncé);
  background-color: transparent;
}
#traces .admin-ss-titre-trace,
#utilisateurs .admin-ss-titre-utilisateur {
  color: var(--color-marquage);
  background-color: transparent;
  font-weight: bold;
  margin: 0;
  padding: 2rem 0 0.5rem 0;
}
#traces .admin-texte-trace,
#utilisateurs .admin-texte-utilisateur {
  padding: 1rem 0 0 2rem;
  background-color: transparent;
}
#traces span.admin-titre-trace,
#utilisateurs span.admin-titre-utilisateur {
  font-family: "Darumadrop One Regular";
  font-size: 3rem;
  color: var(--color-marquage);
  background-color: transparent;
  font-weight: 900;
  padding: 0 1.1rem 0.7rem 17rem;
  border-bottom: 0.1rem solid var(--color-marquage);
}
div.admin-titre-trace-complet > a {
  line-height: 4rem;
}
#traces span.texte-import,
#utilisateurs span.texte-import {
  color: var(--police-noire);
  background-color: var(--fond-color-main);
  border-radius: 0.3rem;
  padding: 0 0.7rem;
}
#traces .admin-titre-trace-complet {
  text-align: center;
}
/*----------   DECONNEXION  ----------*/
/*--------------- MAIN ---------------*/
/*------------------------------------*/
main#deconnexion-main {
  grid-area: accueil-main;
  /* Sous grille = */
  display: grid;
  grid-template-columns: 7rem 1fr 7rem;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas: ". success-message .";
  grid-gap: 1.1rem 0.7rem;
  /* On place les enfants */
  align-items: center;
  justify-content: center;
  background-color: var(--fond-color-main);
  margin: 0;
  padding: 2.1rem 0 5rem 0;
}
main#deconnexion-main .success-message {
  grid-area: success-message;
  justify-self: stretch;
  align-self: center;
  margin: 0;
  padding: 10px;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  margin-bottom: 10px;
  border-radius: var(--angle-img-arrondi);
}
#deconnexion-main div p {
  color: #3c763d;
  background-color: transparent;
}
main#deconnexion-main a {
  color: #3c763d;
  font-weight: 700;
  border: 0.1rem #3c763d solid;
  border-width: 0 0 0.1rem 0;
}
main#deconnexion-main a:hover {
  color: var(--color-marquage);
  font-weight: 700;
  border: 0.1rem var(--color-marquage) solid;
  border-width: 0 0 0.1rem 0;
}
/*---- ESPACE AJOUT/MODIF TRACE ----*/
/*-------------- MAIN --------------*/
/*----------------------------------*/
main#ajoutTrace-main,
main#modifTrace-main {
  grid-area: accueil-main;
  /* Sous grille = */
  display: grid;
  grid-template-columns: 7rem 1fr 7rem;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    " . message . "
    " . ajoutTrace-titre-page . "
    " . bouton-trace ."
    " . formulaire . "
    " . commentaires . ";
  grid-gap: 1.1rem 0.7rem;
  /* On place les enfants */
  align-items: center;
  justify-content: center;
  background-color: var(--fond-color-main);
  margin: 0;
  padding: 2.1rem 0 5rem 0;
}
div.ajoutTrace-titre-page,
div.modifTrace-titre-page {
  grid-area: ajoutTrace-titre-page;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0 0 1.7rem 0;
  font-family: "Lilita One", system-ui;
  font-style: normal;
  color: var(--color-marquage);
  text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.34);
  font-size: 5rem;
  font-weight: 700;
}
#formulaire {
  grid-area: formulaire;
  justify-self: center;
  align-self: center;
  margin-top: 0;
  width: 100%;
  background: var(--color-bleu-clair);
  padding: 0 1.7rem 0 1.7rem;
  border-radius: 0.6rem;
  /* Sous grille */
  grid-template-columns: 2rem 1fr 2rem;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas: " . ajoutTrace-formulaire . ";
  grid-gap: 1.1rem 0.7rem;
  /* On place les enfants */
  align-items: center;
  justify-content: center;
}
#ajoutTrace-formulaire {
  grid-area: ajoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin-top: 0;
  width: 100%;
  background: transparent;
  padding: 1rem 2rem 1rem 2rem;
  border-radius: 0.6rem;
  /* Sous grille */
  display: grid;
  grid-template-columns: 2rem 1fr 1fr 1fr 1fr 2rem;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    " . titre-ajoutTrace-formulaire titre-ajoutTrace-formulaire titre-ajoutTrace-formulaire titre-ajoutTrace-formulaire . " /* Titre */
    " . anneeBut-ajoutTrace-formulaire type-ajoutTrace-formulaire competence-ajoutTrace-formulaire dateAjout-ajoutTrace-formulaire . " /* Année, type, compétence, ajout le */
    " . description-AjoutTrace-formulaire description-AjoutTrace-formulaire description-AjoutTrace-formulaire dateModif-AjoutTrace-formulaire . " /* Description, pdf */
    " . description-AjoutTrace-formulaire description-AjoutTrace-formulaire description-AjoutTrace-formulaire pdf-AjoutTrace-formulaire . " /* Description, modifié le */
    " . reference1-AjoutTrace-formulaire reference2-AjoutTrace-formulaire reference3-AjoutTrace-formulaire reference4-AjoutTrace-formulaire . " /* Référence x 4 : en flex par columns */
    " . portfolioImg-AjoutTrace-formulaire gdeImage-AjoutTrace-formulaire pteImage1-AjoutTrace-formulaire pteImg2-AjoutTrace-formulaire . " /* Images trace/portfolio */
    " . statut-AjoutTrace-formulaire . . . . " /* Statut */
    " . champ-submit-AjoutTrace-formulaire champ-submit-AjoutTrace-formulaire champ-submit-AjoutTrace-formulaire champ-submit-AjoutTrace-formulaire ."; /* Bouton "ajouter" */
  grid-gap: 1.1rem 0.7rem;
  /* On place les enfants */
  align-items: center;
  justify-content: center;
}
#modifTrace-formulaire {
  grid-area: ajoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin-top: 0;
  width: 100%;
  background: #e9d3d6;
  padding: 1rem 2rem 1rem 2rem;
  border-radius: 0.6rem;
  /* Sous grille */
  display: grid;
  grid-template-columns: 2rem 1fr 1fr 1fr 1fr 2rem;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    " . titre-modifTrace-formulaire titre-modifTrace-formulaire titre-modifTrace-formulaire titre-modifTrace-formulaire . " /* Titre */
    " . anneeBut-modifTrace-formulaire type-modifTrace-formulaire competence-modifTrace-formulaire dateAjout-modifTrace-formulaire . " /* Année, type, compétence, ajout le */
    " . description-modifTrace-formulaire description-modifTrace-formulaire description-modifTrace-formulaire dateModif-modifTrace-formulaire . " /* Description, pdf */
    " . description-modifTrace-formulaire description-modifTrace-formulaire description-modifTrace-formulaire pdf-modifTrace-formulaire . " /* Description, modifié le */
    " . reference1-modifTrace-formulaire reference2-modifTrace-formulaire reference3-modifTrace-formulaire reference4-modifTrace-formulaire . " /* Référence x 4 : en flex par columns */
    " . portfolioImg-modifTrace-formulaire gdeImage-modifTrace-formulaire pteImage1-modifTrace-formulaire pteImg2-modifTrace-formulaire . " /* Images trace/portfolio */
    " . statut-modifTrace-formulaire . . . . " /* Statut */
    " . champ-submit-modifTrace-formulaire champ-submit-modifTrace-formulaire champ-submit-modifTrace-formulaire champ-submit-modifTrace-formulaire ."; /* Bouton "ajouter" */
  grid-gap: 1.1rem 0.7rem;
  /* On place les enfants */
  align-items: center;
  justify-content: center;
}
div.titre-ajoutTrace-formulaire {
  grid-area: titre-ajoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
div.titre-modifTrace-formulaire {
  grid-area: titre-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.anneeBut-ajoutTrace-formulaire {
  grid-area: anneeBut-ajoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
div.anneeBut-modifTrace-formulaire {
  grid-area: anneeBut-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.type-ajoutTrace-formulaire {
  grid-area: type-ajoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
div.type-modifTrace-formulaire {
  grid-area: type-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.competence-ajoutTrace-formulaire {
  grid-area: competence-ajoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
div.competence-modifTrace-formulaire {
  grid-area: competence-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.dateAjout-ajoutTrace-formulaire {
  grid-area: dateAjout-ajoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
div.dateAjout-modifTrace-formulaire {
  grid-area: dateAjout-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.description-AjoutTrace-formulaire {
  grid-area: description-AjoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  border-radius: var(--angle-img-arrondi);
}
div.description-modifTrace-formulaire {
  grid-area: description-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.dateModif-AjoutTrace-formulaire {
  grid-area: dateModif-AjoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
div.dateModif-modifTrace-formulaire {
  grid-area: dateModif-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.pdf-AjoutTrace-formulaire {
  grid-area: pdf-AjoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
div.pdf-modifTrace-formulaire {
  grid-area: pdf-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.reference1-AjoutTrace-formulaire {
  grid-area: reference1-AjoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
  /* Sous grille en flex */
  display: flex;
  flex-direction: column;
}
div.reference1-modifTrace-formulaire {
  grid-area: reference1-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  /* Sous grille en flex */
  display: flex;
  flex-direction: column;
}
div.reference2-AjoutTrace-formulaire {
  grid-area: reference2-AjoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  /* Sous grille en flex */
  display: flex;
  flex-direction: column;
  background-color: transparent;
}
div.reference2-modifTrace-formulaire {
  grid-area: reference2-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  /* Sous grille en flex */
  display: flex;
  flex-direction: column;
}
div.reference3-AjoutTrace-formulaire {
  grid-area: reference3-AjoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  /* Sous grille en flex */
  display: flex;
  flex-direction: column;
  background-color: transparent;
}
div.reference3-modifTrace-formulaire {
  grid-area: reference3-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  /* Sous grille en flex */
  display: flex;
  flex-direction: column;
}
div.reference4-AjoutTrace-formulaire {
  grid-area: reference4-AjoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  /* Sous grille en flex */
  display: flex;
  flex-direction: column;
  background-color: transparent;
}
div.reference1-AjoutTrace-formulaire > div.ref1,
div.reference1-AjoutTrace-formulaire > div.ac1,
div.reference2-AjoutTrace-formulaire > div.ref2,
div.reference2-AjoutTrace-formulaire > div.ac2,
div.reference3-AjoutTrace-formulaire > div.ref3,
div.reference3-AjoutTrace-formulaire > div.ac3,
div.reference4-AjoutTrace-formulaire > div.ref4,
div.reference4-AjoutTrace-formulaire > div.ac4 {
  background-color: transparent;
}
div.reference4-modifTrace-formulaire {
  grid-area: reference4-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  /* Sous grille en flex */
  display: flex;
  flex-direction: column;
}
div.portfolioImg-AjoutTrace-formulaire {
  grid-area: portfolioImg-AjoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
div.portfolioImg-modifTrace-formulaire {
  grid-area: portfolioImg-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.gdeImage-AjoutTrace-formulaire {
  grid-area: gdeImage-AjoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
div.gdeImage-modifTrace-formulaire {
  grid-area: gdeImage-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.pteImage1-AjoutTrace-formulaire {
  grid-area: pteImage1-AjoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
div.pteImage1-modifTrace-formulaire {
  grid-area: pteImage1-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.pteImg2-AjoutTrace-formulaire {
  grid-area: pteImg2-AjoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
div.pteImg2-modifTrace-formulaire {
  grid-area: pteImg2-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.statut-AjoutTrace-formulaire {
  grid-area: statut-AjoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
div.statut-modifTrace-formulaire {
  grid-area: statut-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
div.champ-submit-AjoutTrace-formulaire {
  grid-area: champ-submit-AjoutTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
div.champ-submit-modifTrace-formulaire {
  grid-area: champ-submit-modifTrace-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
#ajoutTrace-formulaire label.cache,
#modifTrace-formualire label.cache {
  display: none;
}
#formulaire input {
  background: #fff;
  border: 0.1rem solid #b76e79;
  border-radius: var(--angle-img-arrondi);
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  font-style: italic;
  color: #4d5592;
  display: inline-block;
  text-align: left;
  width: 27rem;
  padding: 0.5rem;
  position: relative;
  border: 0.1rem solid #4d5592;
}
#formulaire input::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: #4d5592;
}
#formulaire textarea {
  padding: 0.5rem;
}
#formulaire textarea::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: #4d5592;
}
#description-ajoutTrace,
#description-modifTrace {
  width: 83rem !important;
  height: 7.8rem;
  background-color: transparent;
}
#commentaires {
  grid-area: commentaires;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
}
.success-message {
  grid-area: message;
  justify-self: stretch;
  align-self: center;
  margin: 0;
  padding: 10px;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  color: #3c763d;
  margin-bottom: 10px;
}
.lien-admin-ajout-trace {
  color: #3c763d;
}
.lien-admin-ajout-trace:hover {
  color: var(--color-marquage);
  border: 0.1rem solid var(--color-marquage);
  border-width: 0 0 0.1rem 0;
  transition: color 350ms ease 0s;
}
.error-message {
  grid-area: message;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 10px;
  background-color: #b94a48;
  border: 1px solid #b83d3b;
  color: #c11b1b;
  margin-bottom: 10px;
}
/*---- ESPACE AJOUT/MODIF TRACE ----*/
/*-------------- MAIN --------------*/
/*----------------------------------*/
main#modifUtilisateur-main {
  grid-area: accueil-main;
  display: grid;
  grid-template-columns: 7rem 1fr 7rem;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    " . titre-page . "
    ". bouton-trace ."
    " . formulaire . ";
  grid-gap: 1.1rem 0.7rem;
  align-items: center;
  justify-content: center;
  background-color: var(--fond-color-main);
  margin: 0;
  padding: 2.1rem 0 5rem 0;
}
div.modifUtilisateur-titre-page {
  grid-area: titre-page;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0 0 1.7rem 0;
  font-family: "Lilita One", system-ui;
  font-style: normal;
  color: var(--color-marquage);
  text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.34);
  font-size: 5rem;
  font-weight: 700;
}
main#modifUtilisateur-main #formulaire {
  grid-area: formulaire;
  justify-self: center;
  align-self: center;
  margin-top: 0;
  max-width: 60rem;
  width: 100%;
  background: #e9d3d6;
  padding: 1.7rem 1.7rem;
  border-radius: 0.6rem;
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas: " .  modifUtilisateur-formulaire . ";
  grid-gap: 1.1rem 0.7rem;
  align-items: center;
  justify-content: center;
}
#modifUtilisateur-formulaire {
  grid-area: modifUtilisateur-formulaire;
  justify-self: center;
  align-self: center;
  margin-top: 0;
  max-width: 60rem;
  width: 100%;
  background: #e9d3d6;
  padding: 0 1.7rem 0 1.7rem;
  border-radius: 0.6rem;
  /* Sous-grille */
  display: grid;
  grid-template-columns: 1rem 3fr 1fr 1rem;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    " . nom-modifUtilisateur-formulaire statutCompte-modifUtilisateur-formulaire . "
    " . prenom-modifUtilisateur-formulaire statutProfil-modifUtilisateur-formulaire . "
    " . role-modifUtilisateur-formulaire createDay-modifUtilisateur-formulaire . "
    " . email-modifUtilisateur-formulaire modifiedDay-modifUtilisateur-formulaire . "
    " . champ-submit-modifUtilisateur-formulaire champ-submit-modifUtilisateur-formulaire .";
  grid-gap: 1.1rem 0.7rem;
  align-items: center;
  justify-content: center;
}
div.nom-modifUtilisateur-formulaire {
  grid-area: nom-modifUtilisateur-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
div.prenom-modifUtilisateur-formulaire {
  grid-area: prenom-modifUtilisateur-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
div.role-modifUtilisateur-formulaire {
  grid-area: role-modifUtilisateur-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
div.email-modifUtilisateur-formulaire {
  grid-area: email-modifUtilisateur-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
div.statutCompte-modifUtilisateur-formulaire {
  grid-area: statutCompte-modifUtilisateur-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
div.statutProfil-modifUtilisateur-formulaire {
  grid-area: statutProfil-modifUtilisateur-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
div.createDay-modifUtilisateur-formulaire {
  grid-area: createDay-modifUtilisateur-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
div.modifiedDay-modifUtilisateur-formulaire {
  grid-area: modifiedDay-modifUtilisateur-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
div.champ-submit-modifUtilisateur-formulaire {
  grid-area: champ-submit-modifUtilisateur-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  width: 100%;
  /* Flex */
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#modifUtilisateur-main #insert {
  margin: 0 1rem 0 0;
  padding: 0;
}
#modifUtilisateur-main #delete {
  margin: 0 0 0 1rem;
  padding: 0;
}
#nom-modifUtilisateur input {
  background: #fff;
  border: 0.1rem solid #b76e79;
  border-radius: 0.3rem;
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  font-style: italic;
  color: #4d5592;
  display: inline-block;
  padding: 0;
  text-align: left;
  width: 27rem;
  padding: 0.5rem;
  position: relative;
  border: 0.1rem solid #4d5592;
}
#description-modifTrace {
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  font-style: italic;
  color: #4d5592;
  white-space: pre-wrap;
}
#description-ajoutTrace {
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  font-style: italic;
  color: #4d5592;
  white-space: pre-wrap;
}
/*---- ESPACE AJOUT COMMENTAIRES ----*/
/*-------------- MAIN ---------------*/
/*-----------------------------------*/
main#ajoutCommentaire-main {
  grid-area: accueil-main;
  display: grid;
  grid-template-columns: 7rem 1fr 7rem;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    " . titre-page . "
    ". bouton-commentaire ."
    " . formulaire . ";
  grid-gap: 1.1rem 0.7rem;
  align-items: center;
  justify-content: center;
  background-color: var(--fond-color-main);
  margin: 0;
  padding: 2.1rem 0 5rem 0;
}
main#ajoutCommentaire-main div.ajoutCommentaire-titre-page {
  grid-area: titre-page;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0 0 1rem 0;
  font-family: "Lilita One", system-ui;
  font-style: normal;
  color: var(--color-marquage);
  text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.34);
  font-size: 5rem;
  font-weight: 700;
}
/* Ajout d'un bouton "retour <" */
main#ajoutCommentaire-main div.bouton-commentaire {
  grid-area: bouton-commentaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0 0 1rem 0;
}
main#ajoutCommentaire-main #formulaire {
  grid-area: formulaire;
  justify-self: center;
  align-self: center;
  margin-top: 0;
  max-width: 60rem;
  width: 100%;
  background: #e9d3d6;
  padding: 1.7rem 1.7rem;
  border-radius: 0.6rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas: " ajoutCommentaire-formulaire";
  grid-gap: 1.1rem 0.7rem;
  align-items: center;
  justify-content: center;
}
main#ajoutCommentaire-main #ajoutCommentaire-formulaire {
  grid-area: ajoutCommentaire-formulaire;
  justify-self: center;
  align-self: center;
  margin-top: 0;
  max-width: 60rem;
  width: 100%;
  background: #e9d3d6;
  border-radius: 0.6rem;
  /* Sous-grille */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(auto, 1fr);
  grid-template-areas:
    " ajoutCommentaire-commentaire "
    " submit-ajoutCommentaire-formulaire ";
  grid-gap: 1.1rem 0.7rem;
  align-items: center;
  justify-content: center;
}
main#ajoutCommentaire-main #formulaire input {
  background: #fff;
  border: 0.1rem solid #b76e79;
  border-radius: 0.3rem;
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  font-style: italic;
  color: #4d5592;
  display: inline-block;
  padding: 0;
  text-align: left;
  width: 56.5rem;
  padding: 0.5rem;
  position: relative;
  border: 0.1rem solid #4d5592;
}
main#ajoutCommentaire-main div.ajoutCommentaire-formulaire {
  grid-area: ajoutCommentaire-commentaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  width: 100%;
}
main#ajoutCommentaire-main div.submit-ajoutCommentaire-formulaire {
  grid-area: submit-ajoutCommentaire-formulaire;
  justify-self: center;
  align-self: center;
  margin: 0;
  padding: 0;
  width: 100%;
  /* Flex */
  display: flex;
  flex-direction: row;
  justify-content: center;
}
main#ajoutCommentaire-main #commentaire-ajoutCommentaire {
  width: 47rem;
  height: 11rem;
}
/* --------------------------------------*/
/*            Media Queries              */
/*---------------------------------------*/
/* -- Dans les media-queries, comme toutes les tailles sont en "rem" utiliser les "%" */
/* -- Les unités rem et em lorsqu'elles sont utilisées comme unités pour les media-queries conservent toujours la même valeur de 1rem = 1em = taille de police définie par le navigateur -- */
@media all and (min-width: 1200px) {
  /* écrans de bureau extra larges */
  .img.hero {
    /* On mets en place la photo 'hero' pour écran TV*/
    background-color: var(--fond-color-main);
    height: 72rem;
    /* background-image: url("../images/hero/hero.webp"); /* linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), => photo noircie */
  }
}
@media all and (min-width: 1024px) and (max-width: 1199.98px) {
  /* Ordinateurs portables */
  .img.hero {
    /* On mets en place la photo 'hero' pour ordinateur*/
    background-color: var(--fond-color-main);
    height: 72rem;
    /* background-image: /* linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), => photo noircie */ /* url("../images/hero/hero.webp"); */
  }
}
@media all and (max-width: 1023.98px) {
  /* Tablettes comme iPad Mini : 768x1024 */
  div.top-header {
    display: none;
  }
  .img.hero {
    /* On mets en place la photo 'hero' pour ordinateur et tablette paysage */
    background-color: var(--fond-color-main);
    height: 72rem;
    /* background-image: /* linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), => photo noircie */ /* url("../images/hero/hero.webp"); */
  }
}
@media all and (max-width: 990.98px) {
  /* SmartPhone en mode paysage */

  body {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "accueil-main"
      "footer";
    margin: 0;
    width: 100vw;
  }
  /*---------------------------*/
  /*--- HEADER TOP HEADER ---*/
  /*---------------------------*/
  header {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 4rem 6rem 1fr;
    grid-template-areas:
      "top top top"
      "logo menu .";
  }
  /*------------------------------------*/
  /*-------- HEADER TOP HEADER -------*/
  /*--- Accessibilité & espace admin ---*/
  /*------------------------------------*/
  div.top-header {
    display: none;
  }
  /*---------------------------------------*/
  /*--- HEADER LOGO & MENU RESPONSIVE ---*/
  /*-------------- LOGO ------------------*/
  /*---------------------------------------*/
  div.logo {
    padding: 0 0 0 2.1rem;
  }
  /*---------------------------------------*/
  /*--- HEADER LOGO & MENU RESPONSIVE ---*/
  /*--------- MONOGRAMME/MARQUE -----------*/
  /*---------------------------------------*/
  h1.monogramme {
    display: none;
  }
  div.logo div img {
    height: 4rem;
  }
  /*---------------------------------------*/
  /*--- HEADER LOGO & MENU RESPONSIVE ---*/
  /*----------- MENU RESPONSIVE -----------*/
  /*---------------------------------------*/

  div.menu {
    display: grid;
  }
  /* Afficher le label du hamburger */
  div.menu label {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    color: var(--police-noire);
    cursor: pointer;
    height: 3rem;
    padding: 0 3rem 0 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 11;
  }
  div.menu label:hover {
    opacity: 0.7;
  }
  /* Ajustement du span qui contient "Menu" */
  div.menu label #menu-text {
    margin: 0.9rem 1rem 0 0; /* Espace entre "Menu" et l'icône */
  }
  div.menu label #hamburger-icon {
    margin-left: 0.5rem; /* Ajustement de l'espace avant l'icône */
    font-size: 4rem;
  }
  #toggle {
    display: none; /* Cache l'input checkbox */
  }
  div.menu nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 70%;
    height: 100vh;
    opacity: 1;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease, visibility 0.3s ease;
    z-index: 10;
  }
  /* Affichage du menu en colonne */
  div.menu nav ul {
    display: flex;
    flex-direction: column;
    height: 11rem;
    list-style-type: none;
    visibility: hidden;
    opacity: 0;
    background-color: var(--color-violet-clair);
  }
  #toggle:checked ~ nav {
    transform: translateX(0);
    visibility: visible;
  }
  #toggle:checked ~ nav ul {
    visibility: visible;
    opacity: 1;
  }
  /* Overlay pour fermer le menu en cliquant en dehors */
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-overlay);
    visibility: hidden;
    opacity: 0;
    z-index: 5;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  #toggle:checked ~ .overlay {
    visibility: visible;
    opacity: 1;
  }
  .overlay:active {
    visibility: hidden;
    opacity: 0;
  }
  /* Empêcher le contenu d'être scrollé quand le menu est ouvert */
  #toggle:checked ~ .menu nav {
    overflow-y: auto;
  }

  /*-----------------------*/
  /*-- HEADER/MAIN HERO ---*/
  /*-----------------------*/

  main#accueil-main,
  main#accueil-en-main {
    grid-area: accueil-main;
    display: grid;
    /* 1 colonnes de 1fr et deux marges de 2.1rem */
    grid-template-columns: 3rem 1fr 3rem; /*ajout mediaqueries*/
    grid-template-areas:     /*ajout mediaqueries*/
      ". presentation ."
      ". hero ."
      ". realisations .";
    grid-auto-rows: auto;
    margin: 0;
    width: 100vw;
  }

  /* ================================================================= */
  /* Première ligne contenant la présentation (grid-area=presentation) */
  div.presentation {
    grid-area: presentation;
    align-items: stretch;
    align-self: center;
    margin: 0;
    padding: 0;
    width: 100vw;
  }
  div.text-presentation p {
    color: var(--police-noire);
    text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
    text-align: center;
  }
  div.text-presentation p.text-presentation {
    font-family: "Lilita One", system-ui;
    font-size: 4rem;
    justify-content: center;
    color: rgba(183, 108, 119, 1);
    margin: 0;
  }
  div.text-presentation p {
    font-size: 1.5rem; /*ajout mediaqueries*/
    line-height: 2rem;
    padding: 2.1rem 0 0 0;
    justify-content: center;
    width: 100%;
  }
  div.text-presentation h2 a {
    background-color: var(--color-vert-clair);
    border-radius: 0.9rem;
    border: none;
    margin: 0.5rem;
    padding: 0.6rem 2.1rem;
    width: 15.4rem;
    font-size: 1.4rem;
    color: var(--police-noire);
    text-align: center;
    transition: all 500ms;
    cursor: pointer;
    text-decoration: none;
    /*Trouvé sur --> https://fr.w3docs.com/snippets/css/comment-styler-les-boutons-avec-css.html*/
  }
  div.text-presentation h2 a:hover {
    /* Bouton : "vers mon portfolio" */
    background-color: var(--color-vert-foncé);
    color: var(--police-noire);
    border: none;
  }
  div.text-presentation p:nth-child(3),
  div.text-presentation p:nth-child(4) {
    padding: 0 2rem;
  }
  /* ======================================================= */
  /* Première ligne contenant la photo hero (grid-area=hero) */
  div.hero {
    width: 100vw;
    display: flex;
    justify-content: center;
  }
  img.hero {
    width: 70%;
  }
  /* =================================================== */
  /* Deuxième ligne contenant les dernières réalisations */
  div.realisations {
    grid-area: realisations;
    margin: 2rem 0;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1.4rem;
    row-gap: 3rem;
    grid-template-areas:
      "titre-dernieres-realisations"
      "traces-dernieres-realisations";
    width: auto;
  }
  div.titre-dernieres-realisations {
    text-align: center;
  }
  div.titre-dernieres-realisations p {
    font-size: 3rem;
  }
  div.traces-dernieres-realisations {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 2rem;
  }
  div.traces-dernieres-realisations div {
    justify-self: center;
    margin: 0;
    padding: 0;
    position: relative;
    width: 21rem;
    height: 21rem;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
  }
  div.traces-dernieres-realisations div a div img.trace-img {
    width: 100%;
  }
  /*------------------------*/
  /*---- MAIN/PORTFOLIO -----*/
  /*------------------------*/
  main#portfolio-main {
    grid-template-columns: 3.4rem 1fr 3.4rem;
    width: 100%;
  }
  main#portfolio-main h1 {
    text-align: center;
  }
  div#panneau {
    grid-template-columns: 1fr;
    grid-gap: 0.7rem 0.3rem;
    width: 100%;
  }
  .vignettes {
    grid-template-columns: 1fr;
    grid-template-areas: "trace";
  }
  div.vignettes a div div.type {
    all: unset;
    padding: 0 0 0.7rem 0.5rem;
    font-weight: bolder;
  }
  div.vignettes a div div.competence {
    all: unset;
    padding: 0 0 0.7rem 0.5rem;
    font-weight: bolder;
  }
  .trace.vignette-hover:after {
    font-size: 14px;
  }
  .menu-tri {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    gap: 0.7rem;
  }
  .menu-tri button {
    margin: 0;
  }
  div.menu-tri button:nth-child(1) {
    margin: 0;
  }
  div.menu-tri button:nth-child(2) {
    margin: 0;
  }
  /*------------------------*/
  /*---- MAIN/TRACE -----*/
  /*------------------------*/
  main#trace-main {
    grid-area: accueil-main;
    display: grid;
    grid-template-columns: 3.4rem 1fr 3.4rem;
    grid-auto-rows: auto;
    grid-template-areas:
      ". bienvenue-evaluateur ."
      ". trace-description ."
      ". trace-photos .";
    gap: 1rem;
    margin: 0 0 2.1rem 0;
    padding: 0;
  }
  main#trace-main .bouton-trace {
    margin: 0;
    padding: 0;
  }
  main#trace-main button {
    margin: 0.4rem 0;
    width: 5rem;
  }
  main#trace-main .btn-retour {
    align-content: center;
    justify-content: center;
  }
  main#trace-main .icon-retour {
    margin: 0;
  }
  main#trace-main .text-retour {
    display: none;
  }
  main#trace-main div.trace-description div.references-trace {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 1.7rem;
  }
  main#trace-main div.trace-description div.references-trace span.annee-BUT {
    padding: 1rem 2rem;
    margin: 0;
  }
  main#trace-main div.trace-description div.references-trace span.realisation {
    padding: 1rem 2rem;
    margin: 0;
  }
  #trace-main div.trace-photos div.bouton-trace {
    display: none;
  }
  main#trace-main div.trace-photo-gde {
    margin: 2rem 0;
  }
  main#trace-main div.trace-photo-pte {
    align-self: center;
    margin: 2rem 0;
  }
  main#trace-main div.trace-photo-pte img {
    display: block;
    margin: 0 auto;
    padding: 1rem 1.4rem;
    width: 100%;
    height: 100%;
    max-width: 17rem;
    max-height: 17rem;
  }
  /*------------------------*/
  /*---- MAIN/A PROPOS -----*/
  /*------------------------*/
  main#a-propos-main {
    grid-template-columns: 3.4rem 1fr 3.4rem;
    grid-template-areas:
      ". titre-a-propos ."
      ". texte1 ."
      ". photo1 ."
      ". texte2 ."
      ". photo2 .";
  }
  div.titre-a-propos {
    text-align: center;
    font-size: 80%;
  }
  div.photo1 {
    padding: 0 0 7rem 0;
  }
  div.milieu {
    display: none;
  }
  div.photo2 {
    margin: 5rem 0 0 0;
  }
  /*------------------------*/
  /*----- MAIN/CONTACT -----*/
  /*------------------------*/
  main#contact-main {
    grid-template-columns: 3.4rem 1fr 3.4rem;
    grid-template-rows: minmax(auto, 1fr);
    grid-template-areas:
      ". txt-contact ."
      ". formulaire ."
      ". reseaux-sociaux .";
  }
  #contact-main div.txt-contact h3 {
    padding: 0;
  }
  #contact-main div.txt-contact {
    place-self: start center;
  }
  div.formulaire {
    margin: 5rem 0 0 0;
  }
  #btn-send {
    padding: 0 1rem;
  }
  /*--------------------------------*/
  /*----- MAIN/MENTIONS LEGALES -----*/
  /*---------------------------------*/
  main#mentions-legales-main {
    grid-template-columns: 3.4rem 1fr 3.4rem;
    grid-template-areas:
      ". mentions-titre-page ."
      ". mentions-texte .";
  }
  #mentions-legales-main div.mentions-titre-page {
    text-align: center;
  }
  /*--------------------------------*/
  /*----- MAIN/RGPD -----*/
  /*---------------------------------*/
  main#rgpd-main {
    grid-template-columns: 3.4rem 1fr 3.4rem;
    grid-template-areas:
      ". rgpd-titre-page ."
      ". rgpd-texte .";
  }
  div.rgpd-titre-page.ordi {
    display: none;
  }
  div.rgpd-titre-page.smartphone {
    display: block;
  }
  /*------------------------*/
  /*------- FOOTER ---------*/
  /*------------------------*/
  div.top-footer {
    padding: 2ex 0 0 0;
    display: grid;
    grid-template-columns: 1fr; /*ajout mediaqueries*/
  }
  div.top-footer div:nth-child(1) {
    padding: 0 0 0.4rem 0;
  }
  div.top-footer div:nth-child(1) h5 {
    margin: 2.1rem 0 0 0;
  }
  div.top-footer div:nth-child(1) ul {
    padding: 0 0 0.4rem 0;
  }
  div.top-footer div:nth-child(n + 2) {
    border-left: none;
  }
  div.top-footer div:nth-child(2) {
    padding: 0 0 0.4rem 0;
  }
  div.top-footer div:nth-child(2) div {
    margin: 0;
  }
  div.top-footer div:nth-child(3) {
    padding: 0 0 0 0;
  }
  div.top-footer div:nth-child(3) h5:nth-child(1) {
    margin: 0.2rem 0 0 0;
  }
  div.top-footer div hr {
    display: block;
    color: var(--police-noire);
    overflow: visible;
    text-align: center;
    height: 0.1rem;
    width: 50%;
    background-color: var(--fond-color-footer); /*ajout mediaqueries*/
  }
  div.top-footer div hr:after {
    /* trouvé sur = https://developer.mozilla.org/fr/docs/Web/HTML/Element/hr */
    content: "•";
    background: var(--fond-color-footer);
    padding: 0 0.3rem;
    position: relative;
    top: -0.8rem;
  }
  div.medium-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0 0 1.7rem 0;
    background-color: var(--fond-color-footer); /*ajout mediaqueries*/
  }
  #footer div.medium-footer div.accessibilite a {
    fill: var(--color-marquage);
    transition: color 350ms ease 0s;
    border: none;
  }
  #footer div.medium-footer div.accessibilite a svg {
    cursor: pointer;
  }
  .langue a:hover {
    fill: var(--color-marquage);
    transition: color 350ms ease 0s;
    border: none;
  }
  #footer hr.medium-footer {
    display: block;
  }
  #footer hr {
    display: block;
    color: var(--police-noire);
    overflow: visible;
    text-align: center;
    height: 0.1rem;
    width: 50%;
  }
  #footer hr:after {
    content: "•";
    background: var(--fond-color-footer);
    padding: 0 0.3rem;
    position: relative;
    top: -0.8rem;
  }
  div.down-footer {
    padding: 1ex 0 3ex 0;
    background-color: var(--fond-color-footer); /*ajout mediaqueries*/
  }
  div.down-footer p:nth-child(1) {
    font-size: 2.1rem; /*ajout mediaqueries*/
  }
  div.down-footer p:nth-child(2) {
    padding: 0 1.1rem 0 1.1rem;
  }
}
/*----------------------------------------*/
/*---------ESPACE ADMINISTRATEUR ---------*/
/*----------------------------------------*/
#traces span.admin-titre-trace,
#utilisateurs span.admin-titre-utilisateur {
  padding: 0;
  border: none;
}
@media all and (max-width: 479px) {
  /* SmartPhone en mode paysage */
  .img.hero {
    /* On mets en place la photo 'hero' pour mobile paysage*/
    /* background-image: url("../images/hero/hero-smartphone.webp"); */
    background-color: var(--fond-color-main);
  }
}