/*****************************************************************
**                   STYLES métiers 2025                         **
******************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap');

html
{
 margin:0;
 padding:0;
}

body
{
 background-color: White;
 font-family: 'Roboto', sans-serif;
 margin: 0;
 padding: 0;
}

/*****************************************************************
                    HEADER
*****************************************************************/

.header-pleine-largeur
{
  width: 100%;
  height: 70px;
  background-color: white;
  position: relative;
}

.header
{
 max-width: 1440px;
 height: 100%;
 margin: 0 auto;
 position: relative; /* pour positionner le menu par rapport au header */
 display: flex;
 align-items: center;
}

.header img
{
 height: 45px;
}


.header a.texte
{
 margin:0 30px 0 0;
 color: black;
 font-size: 1.3rem;
 text-decoration: none;
}

.header a.button
{
 margin: 0 50px 0 auto;
 color: white;
 background-color: #004069;
 font-size: 1rem;
 text-decoration: none;
 padding: 3px 5px;
 border-radius: 5px;
}

#imga
{
 margin:0 30px 0 100px;
 height: 30px;
}

.header-container
{
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
}

.banniere
{
 max-width: 100%;
 height: 200px;
 display: flex;
 background-image: url("picts/banniere.jpg");
 background-position: left;
 position: relative;
 align-items: center;
}

.banniere-container
{
 width: 1440px;
 margin: 0 auto;
 height: 200px;
 display: flex;
 position: relative;
 align-items: center;
}

div.banniere img
{
 height: 70px;
 display: block;   /* supprime les petits espaces sous l’image */
}




















#imagelongue
{
 display: block;
}

#imagecourte
{
 display: none;
}

@media (max-width: 630px)
{
 #imagelongue
 {
  display: none;
 }

 #imagecourte
 {
  display: block;
 }
}

/*****************************************************************
                          MENU
*****************************************************************/

.menu
{
 position: absolute;
 bottom: 9%;
 right: 20px;
 display: flex;
 align-items: center;
 gap: 10px; /* espace entre icônes */
}

.menu img
{
 height: 35px;
 cursor: pointer;
}

@media (max-width: 980px)
{
 .menu
 {
  right: 10px;      /* un peu moins de marge à droite */
 }

 .menu img
 {
  height: 28px;     /* icônes un peu plus petites */
 }
}

@media (max-width: 630px)
{
 .menu img
 {
  height: 38px;     /* icônes un peu plus petites */
 }
 
 .menu a.imga
 {
  display: none;
 }
}

@media (max-width: 480px)
{
 .menu img 
 {
  height: 25px;     /* encore un peu plus petites sur très petit écran */
 }
}

#menu_details
{
 position: absolute;
 right: 0;
 top: 60px;
 display: none;
 background-color: white;
 box-shadow: 0 2px 8px rgba(0,0,0,0.2);
 min-width: 280px;
 z-index: 1000;
}

#menu_details form
{
 margin: 0;
}

#menu_details input[type=submit]
{
 /*margin: 2px;*/
 margin: 0;
 text-align: center;
 padding: 12px 25px;
 background-color: black;
 color: white;
 font-size: 16px;
 cursor: pointer;
 border: none;
 width: 100%;
}

#menu_details a
{
 /*margin: 0;
 text-align: center;
 padding: 12px 25px;
 background-color: black;
 color: white;
 font-size: 16px;
 cursor: pointer;
 border: none;
 width: 100%;*/
 text-decoration: none;
}

#menu_details p
{
 margin: 0;
 text-align: center;
 padding: 12px 25px;
 background-color: black;
 color: white;
 font-size: 16px;
 cursor: pointer;
 border: none;
 /*width: 100%;*/
}

#menu_details p:hover
{
 background-color: #333;
}




#menu_details input[type=submit]:hover
{
 background-color: #333;
}



/*****************************************************************
                             MAIN
*****************************************************************/

div.main
{
 max-width: 1200px;
 margin: auto;
}

div.main h1
 {
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
 }
 
div.main p
{
 margin: 10px;
}	
 
/*****************************************************************
                        PAGE D'ACCUEIL INTRO
*****************************************************************/

.intro
 {
  max-width: 1200px;
  margin: 20px auto 10px;
  padding: 0 15px;
 }

.intro h1
 {
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
 }

.intro p
 {
  color: #555;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 800px;
  padding-left: 0.4em;
 }

/*div.main h1
{
 font-size: 30px;
 font-weight: 300;
 letter-spacing: 3px;
 margin: 10px 0 5px 5px;
}*/

/*div.main p.chapo
{
 margin: 0 10px 0 10px;
 font-style: italic;
 text-align: justify;
}

@media (max-width: 980px)
{
 div.main p.chapo
 {
  margin: 0 10px;
  text-align: left;
 }
}*/

div.main p.intro
{
 margin: 0px;
 margin-top: 10px;
 padding-left: 15px;
 text-align: justify;
 color: #555;
 line-height: 130%;
 font-size: 20px;
 font-weight: 300;
 font-style: italic;
}

/*****************************************************************
                    GRILLE D'ACCUEIL
*****************************************************************/

div.grille
{
 display: grid;
 grid-template-columns: repeat(3, minmax(0,1fr));
 grid-gap: 5px;
 /*grid-auto-rows: minmax(100px, auto);*/
}

/* 2 pavés par ligne sur tablette */
@media (max-width: 1200px)
{
 div.grille
 {
  grid-template-columns: repeat(2, minmax(0,1fr));
 }
}

/* 1 pavé par ligne sur smartphone */
@media (max-width: 780px)
{
 div.grille
 {
  grid-template-columns: minmax(0,1fr);
 }
}

a.pave
{
 display: block;
 text-decoration: none;
 color: inherit;
}

div.domaine
{
 margin: 10px 10px;
 padding: 5px 20px;
 border: thin black solid;
 border-radius: 30px;
 height: 220px;
 text-align: center;
 cursor: pointer;
 /*box-sizing: border-box;  /* pour que padding + bordures soient inclus dans la largeur */
 box-shadow: 0 2px 6px rgba(0,0,0,0.06);
 transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s;
}

div.domaine img
{
 height: 150px;
 max-width: 100%;
 margin-bottom: 10px;
}

div.domaine h2
{
 text-align: center;
 /*font-size: 18px;*/
 font-size: 1rem;
 font-weight: 400;
 letter-spacing: 0px;
}

/* Hover desktop */
@media (hover: hover) and (pointer: fine)
{
 div.domaine:hover
 {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  border-color: #7C9DCD;
 }
}

/*****************************************************************
                  FIN GRILLE D'ACCUEIL
*****************************************************************/

/*****************************************************************
                    PAGE PORTRAIT
*****************************************************************/

/********************* Intro et mise en page globable ***********/
div.main img.illustrations
{
 margin-bottom: 20px;
 /*width: 1200px;*/
 width: 100%;
}

div.thematique
{
 display: grid;
 grid-template-columns: 1fr 260px;
 gap: 10px;
}

@media (max-width: 980px) 
{
 div.thematique
 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
 }
}

div.bloc_temoignage
{
}

div.intro_thematique
{
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 10px;
 align-items: center;
}

div.intro_thematique img
{
 height: 100px;
 padding-right: 10px;
}

div.intro_thematique h1
{
 margin: 0;
 font-weight:400;
 margin-bottom: 10px;
}

div.intro_thematique div.chapo p
{
 margin: 0 10px 0 10px;
 font-style: italic;
 text-align: justify;
}

@media (max-width: 700px)
{
 div.intro_thematique
 {
  grid-template-columns: 1fr;
  text-align: center;
 }

 div.intro_thematique img
 {
  margin: 0 auto;
 }
 
 div.intro_thematique div.chapo p
 {
  /*margin: 0 20px 0 10px;*/
  text-align: left;
 }
}

/***************************** portrait *************************/

div.entete_portrait
{
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 10px;
 margin: 50px 10px 0 0;
}

div.entete_portrait img
{
 height: 200px;
 margin-right: 10px;
}

div.intro_portrait h2
{
 margin: 0;
 padding: 10px 0px 0px 0px;
}

div.intro_portrait p.pied1
{
 margin: 0;
 padding: 20px 0px 0px 10px;
 font-family: 'Inconsolata', monospace;
 font-style: normal;
 text-align: left;
}

div.intro_portrait p.pied
{
 margin: 0;
 padding: 10px 0px 0px 10px;
 font-family: 'Inconsolata', monospace;
 font-style: normal;
 text-align: left;
}

@media (max-width: 700px)
{
 div.entete_portrait
 {
  grid-template-columns: 1fr;
 }

 div.entete_portrait img
 {
  height: 200px;
  margin: auto;
 }
 
 div.intro_portrait h2
 {
  text-align: center;
  padding: 10px 0px 0px 10px;
 }

 div.intro_portrait p.pied1
 {
  text-align: center;
 }

 div.intro_portrait p.pied
 {
  text-align: center;
 }
}

div.bloc_temoignage p
{
 margin: 10px 20px 10px 30px;
 text-align: justify;
 font-style: italic;
}

@media (max-width: 700px)
{
 div.bloc_temoignage p
 {
  margin: 10px;
  text-align: left;
 }
}

/************************* liste à droite ***********************/

div.liste
{
 /*float: right;*/
 border-left: thin solid  #c0deff;
 padding-left: 10px;
 /*width: 250px;*/
 color: #555;
}

div.liste p
{
 margin: 0;
 padding: 3px 0 3px 5px;
}

div.liste p.encours
{
 margin: 0;
 padding: 3px 0 3px 5px;
 background-color: #c0deff;
}

div.liste p.titre
{
 font-weight: 900;
 font-size: 18px;
 letter-spacing: 1px;
 padding: 15px 0 10px 0;
}

div.liste form p
{
 cursor: pointer;
}

div.liste form p:hover
{
 font-weight:600;
 color: #777;
}

/*on masque quand ça devient un peu étroit*/
@media (max-width: 980px) 
{
 div.liste
 {
  display: none;
 }
}

/************************** liste en bas ************************/
div.post_liste
{
 display: none;
 margin: 20px 10px;
 padding: 0 15px 15px 15px;
 border-top: 1px solid #ddd;
 background-color: #f9f9f9;
 border-radius: 12px;
}

/*on affiche quand ça devient un peu étroit*/
@media (max-width: 980px) 
{
 div.post_liste
 {
  display: block;
 }
}

div.post_liste h3
{
 font-weight:400;
 font-size: 1.5em;
 margin-bottom: 0.1em;
}

div.post_liste p
{
 margin: 0;
 padding: 3px 0 3px 5px;
 font-style: normal;
}

div.post_liste form p
{
 cursor: pointer;
}

div.post_liste form p:hover
{
 font-weight:600;
 color: #777;
}

/******************* style commun pour les liens ****************/
/* éléments cliquables dans les listes */
div.liste p a,
div.post_liste p a
{
 color: #555;
 /*display: block;
 margin: 2px 0;
 padding: 6px 8px;
 text-decoration: none;
 background-color: #e8f2ff;
 color: #004a80;
 border-radius: 6px;*/
 /* margin: 0;
 padding: 3px 0 3px 5px;*/
 /*font-weight: 500;*/
}

/* petit chevron pour indiquer "c'est cliquable" */
div.liste a::before,
div.post_liste a::before
{
 content: "› ";
 opacity: 0.7;
}

/* hover (desktop seulement) */
@media (hover: hover) and (pointer: fine) 
{
 div.liste a:hover,
 div.post_liste a:hover
 {
  /*background-color: #d5e6ff;*/
  /*color: #003766;*/
  font-weight: 500;
 }
}


/*****************************************************************
                 FIN PAGE PORTRAIT
*****************************************************************/

div.comites
{
 margin: 10px 10px;
 padding: 5px 20px;
 border: thin black solid;
 background-color: white;
 border-radius: 30px;
 width: 335px;
 height: 400px;
}

div.comites h2
{
 text-align: center;
 font-size: 24px;
 font-weight: 400;
 letter-spacing: 2px;
}


div.main a
{
 color: black;
 text-decoration: none;
}











div.admin p.saisie
{
 font-size: 16px;
}

div.admin input[type=text]
{
 font-size: 16px;
 background-color: #d5b6ff;
 width: 800px;
}

div.admin input[type=submit]
{
 margin: 10px;
 padding: 5x 10px;
 background-color: #d5b6ff;
 width: 200px;
 border-radius: 10px;
 font-size: 16px;
}

div.admin select
{
 background-color: #d5b6ff;
 font-size: 16px;
}

div.admin select.modif
{
 background-color: #91cbfd;
 font-size: 16px;
 padding: 5px 10px;
 border-radius: 10px;
}

div.admin div.choix
{
 margin: 10px;
}

div.admin div.choix input[type=submit]
{
 margin: 10px;
 padding: 5x 10px;
 background-color: #91cbfd;
 width: 200px;
 text-align: center;
 border-radius: 10px;
 font-size: 16px;
}

div.liste_modifs input[type=image]
{
 height: 16px;
}

p.checkbox
{
 background-color: #d5b6ff;
 width: 400px;
 margin: 2px;
 padding: 3px;
}

p.checkbox input[type=checkbox]
{
 background-color: #d5b6ff;
}




div.lien
{
 float: left;
 margin: 0px;
 padding: 0px;
 width: 324px;
 height: 150px;
}

div.lien img
{
 margin: 10px 10px;
 max-width: 300px;
 max-height: 130px;
}

div.lien img:hover
{
 transform: scale(1.15);
 transition-duration: 0.5s
}

div.cols /*dans admetiers*/
{
 display: grid;
 grid-template-columns: 1fr 200px;
}

div.listeg
{
 
}

div.listeg input[type=image]
{
 height: 16px;
}

div.menul
{
 padding: 10px;
}

div.main p.depot_video
{
 text-align: center;
 margin: 30px;
}

div.main p.depot_video a
{
 background-color: #7C9DCD;
 color: white;
 padding: 10px 20px;
 border-radius: 10px;
 font-size: 20px;
 font-weight: 500;
}