body { width:auto; max-width: 1400px; /*overflow: scroll;*/ margin: auto; /* Pour centrer notre page */ padding:0; background-color: white; /*blanc*/ font-size: 12px; font-family: "Arial Unicode MS", "Arial", "Arial Black", "Times New Roman", "Times", "serif"; /*overflow-x: hidden; /* ne sait si cela marche*/ } @media all and (max-width: 1024px) /*pourquoi 1024? **** mais j'ai peur de changer ***/ { box-sizing: border-box; } @media all and (max-width: 1023px) { body { width: 99%; /*overflow: hidden; /* ne sait si cela marche*/ } } /* les liens en general et les liens sur une image*/ a {text-decoration:none; color: black} /* le texte ne sera pas surligné*/ a {border-color:#dbd8d6;} /* les photos ont un léger cadre bois clair important pour les dessins */ form.input_avec_cadre { /*background-color: red;/**/ } label.input_avec_cadre {font-size: 1em;} option.input_avec_cadre, select.input_avec_cadre, value.input_avec_cadre, input.input_avec_cadre {font-size: 1em;color: black; background-color: white; border: 1px solid #8c8b8a; /**/} @media all and (max-width: 600px) { label.input_avec_cadre {font-size: 1em; color: black;} option.input_avec_cadre, select.input_avec_cadre, value.input_avec_cadre, input.input_avec_cadre {font-size: 1em;color: black; background-color: white; border: 1px solid #8c8b8a; /**/} } /*--------------------------------------------------*/ /*------------------ EN TETE -----------------------*/ /*------------------ EN TETE -----------------------*/ /*------------------ EN TETE -----------------------*/ /*--------------------------------------------------*/ #en_tete_debut_commun_tous { display: flex; flex-direction: row; width: 100%; margin: 10px 0px 10px 0px; padding: 0px 7px 0px 7px; font-size: 2.7em; color: black; font-weight: bold; /*background-color: #d62542; /* rouge*/ } @media all and (max-width: 1399px) { #en_tete_debut_commun_tous { margin: 10px 0px 10px 0px; padding: 0px 7px 0px 7px; font-size: 2.3em; } } @media all and (max-width: 1023px) { #en_tete_debut_commun_tous { width: 98%; margin: 5px 0px 5px 0px; padding: 0px 7px 0px 7px; font-size: 2.3em; /*background-color: #d62542; /* rouge*/ } } .un_en_tete_nom { } /*****************************************/ @media all and (max-width: 1023px) { #zero_entete_etmenu_mobile_ouvert { width: 99%; position: absolute; left: 0px; top: 0px; z-index: 2; text-align:left; background-color: rgba(212, 210, 210, 1); /* gris */ /**background-color: #d4d2d2; /* idem */ } #zero_entete_etmenu_mobile_ferme { width: 100%; position: absolute; left: 0px; top: 0px; z-index: 3; text-align:left; background-color: white; /**/ } #un_en_tete_mobile_ouvert { display: flex; flex-direction: row; justify-content: space-between; width: 98%; margin: 5px 0px 5px 0px; padding: 0px 7px 0px 7px; font-size: 2.3em; color: black; font-weight: bold; text-align:left; background-color: rgba(212, 210, 210, 1); /* gris*/ /*background-color: yellow; */ } #un_en_tete_et_archives_ouvert { display: flex; flex-direction: row; width: 95%; /* background-color: yellow; /* */ } #un_en_tete_mobile_ferme { display: flex; flex-direction: row; width: 98%; margin: 5px 0px 5px 0px; padding: 0px 7px 0px 7px; font-size: 2.3em; color: black; font-weight: bold; text-align:left; /*background-color: yellow; /* jaune*/ } } @media all and (max-width: 1023px) { .resultat_menu_burger { display: block; float:left; padding: 0px 0px 0px 5px; font-size: 1.2em; } .burger { display: block; float:right; margin: 0px 3px 0px 0px; } .mosaique_liste { display: block; float:left; margin: 0px 3px 0px 0px; } .textes_et_autres { margin: 0px 0px 0px 3px; } .croix { display: block; /*float:right;/**/ margin: 0px 0px 0px 0px;; /*background-color: green; /**/ } } /**************** FIN EN TETE ************************************/ /*--------------------------------------------------*/ /******** ******** SPECIAL *****/ /******** ******** SPECIAL *****/ /******** ******** SPECIAL *****/ /*--------------------------------------------------*/ /* special autres que mobile ****************** */ .paragraphe_special_pour_les_big_mobilenone { display: block; } @media all and (max-width: 1023px) { .paragraphe_special_pour_les_big_mobilenone { display: none; } } /* special autres que mobile ***************** */ /* special autres que big ****************** */ .paragraphe_special_pour_les_mobile_bignone { display: none; } @media all and (max-width: 1023px) { .paragraphe_special_pour_les_mobile_bignone { display: inline; } } /* special autres que big ****************** */ /* special autres que mobile ****************** */ .paragraphe_special_pour_les_big_mobilenone_cv { display: block; text-align:right; font-style: italic; font-weight:thin; } @media all and (max-width: 1023px) { .paragraphe_special_pour_les_big_mobilenone_cv { display: none; } } /* special autres que mobile ***************** */ /*--------------------------------------------------*/ /******** ******** PAGE INDEX *****/ /******** ******** PAGE INDEX *****/ /******** ******** PAGE INDEX *****/ /*--------------------------------------------------*/ #grand_corps_index_bigmenuvertical_et_mobile { display: flex; flex-direction: row; /*justify-content: space-between; /* repartit*/ width: 100%; margin: auto; /*background-color: grey;/**/ } @media all and (max-width: 1399px) { #grand_corps_index_bigmenuvertical_et_mobile { width: 97%; } } @media all and (max-width: 1023px) { #grand_corps_index_bigmenuvertical_et_mobile { flex-direction: column; } } /* ================= MENU INDEX ============================ */ /* ================= MENU INDEX============================ */ #menu_index_bigmenuvertical_et_mobile /*pour le moment idem que menu autre à part le flex */ { display: flex; flex-direction: column; /*justify-content: space-between; /* repartit*/ width: 20%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size: 1em; color: black; /* noir */ /*background-color: yellow; /**/ /*font-weight: bold;*/ } .menu_index_ligne_bigmenuvertical_et_mobile { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap;/* va a la ligne*/ width: 95%; margin: 0px 0px 0px 0px; padding: 0px 0px 3em 0em; /*background-color: green; /*vert*/ } @media all and (max-width: 1023px) { #menu_index_bigmenuvertical_et_mobile { display: flex; flex-direction: column; /*justify-content: space-between;*/ width: 100%; padding: 0px 0px 0px 0em; } .menu_index_ligne_bigmenuvertical_et_mobile { width: 100%; padding: 0px 0px 0.5em 0px; /*background-color: green; /*vert*/ } } .menu_index_ligne_infomail_mobile { /* dans special mobile */ display: flex; flex-direction: row; justify-content: flex-end; /*none à droite*/ flex-wrap: wrap; width: 100%; margin: 0px 0px 0px 0px; padding:0; /*background-color: red; /*vert*/ } .menu_index_case_bigmenuvertical_et_mobile { /*margin-top: 20px;*/ margin: 0px 0px 0px 0px; padding: 4px 7px 4px 7px; /*border: 1px solid white;*/ /*background-color: #696c6b; /*gris foncé*/ } .menu_index_element_bigmenuvertical_et_mobile {font-size: 1.1em;} .menu_index_element_bigmenuvertical_et_mobile a {text-decoration:none; color: black; /*background-color: #e1e6e5;*/} /* le texte ne sera pas surligné*/ .menu_index_element_bigmenuvertical_et_mobile a:visited {text-decoration:none;color: black;/*background-color: #e1e6e5;*/} .menu_index_element_bigmenuvertical_et_mobile a:hover {color: #494644;font-weight: bold;} .menu_index_element_bigmenuvertical_et_mobile a:active {color: #494644;font-weight: bold;} @media all and (max-width: 1023px) { .menu_index_element_bigmenuvertical_et_mobile { font-size: 1.2em; } } /**************** FIN MENU INDEX ************************************/ /* ================= CORPS INDEX ============================ */ /* ================= CORPS INDEX ============================ */ #corps_index_bigmenuvertical_mobilenone { width: 80%; margin: auto; /*margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;*/ text-align: center; /*background-color: black; /*bleu*/ } @media all and (max-width: 1023px) { #corps_index_bigmenuvertical_mobilenone { display: none; } } /*--------------------------------------------------*/ /******** ******** GRAND CORPS ******** DIAPORAMA ******* AUTRES *****/ /******** ******** GRAND CORPS ******** DIAPORAMA ******* AUTRES *****/ /******** ******** GRAND CORPS ******** DIAPORAMA ******* AUTRES *****/ /*--------------------------------------------------*/ #grand_corps_bigmenuvertical_diapo_et_autres_mobilenone { display: flex; flex-direction: row; justify-content: space-between; /* repartit*/ width: 100%; margin: auto; /*background-color: grey;/**/ } @media all and (max-width: 1399px) { #grand_corps_bigmenuvertical_diapo_et_autres_mobilenone { width: 97%; } } /*tout ce qui suit ne vaut que si la largeur est >1204*/ @media all and (max-width: 1023px) { #grand_corps_bigmenuvertical_diapo_et_autres_mobilenone { display:none; } } /**************** FIN GRAND CORPS ************************************/ /* ================= MENU GENERAL VERTICAL ================= */ /* ================= MENU GENERAL VERTICAL ======== */ .menu_bigmenuvertical_diapo_et_autres { display: flex; flex-direction: column; /* pour les lignes */ width: 15%; margin: 0px 0px 0px 0px; font-size: 1em; color: black; /* noir */ /*background-color: yellow; */ /* dans diapo il est bloqueé avant pour les mobiles*/ } /*pour mobile c'est horizontal voir plus bas */ .deux_bloc_element_menu_vertical {margin: 0px 0px 0px 5%;} .deux_case_element_choixmenu_vertical {margin: 0px 0px 0px 0px;} .deux_case_element_menu_vertical {margin: 0px 0px 0px 0px;} .deux_bloc_element_sousmenu_vertical {margin: 0px 0px 0px 12%;/* background-color: red;/**/} .deux_case_element_choixsousmenu_vertical {margin: 0px 0px 0px 0px;/*background-color: blue;/**/} .deux_case_element_sousmenu_vertical {margin: 0px 0px 0px 0px;} .deux_bloc_element_soussousmenu_vertical { margin: 2% 0px 2% 16%;/*background-color: yellow;/**/} .deux_case_element_choixsoussousmenu_vertical {margin: 0px 0px 0px 0px;/*background-color: green;/**/} .deux_case_element_soussousmenu_vertical {margin: 0px 0px 0px 0px;} .deux_bloc_element_sousmenu_vertical_titre {margin: 0px 0px 0px 5%;/* background-color: red;/**/} .deux_bloc_element_soussousmenu_vertical_atex { margin: 2% 0px 2% 8%;/*background-color: yellow;/**/} .element_menu_vertical {font-size: 1.1em;} .element_menu_vertical a {text-decoration:none; color: black;/*background-color: #e1e6e5;*/} /* le texte ne sera pas surligné*/ .element_menu_vertical a:visited {text-decoration:none;color: black;/*background-color: #e1e6e5;*/} .element_menu_vertical a:hover {color: #494644;font-weight: bold;} .element_menu_vertical a:active {color: #494644;font-weight: bold;} .choixmenu_vertical {font-size: 1.1em;color: black; font-weight: bold;/*background-color: white;/**/} .element_sousmenu_vertical {font-size: 1em; } .element_sousmenu_vertical a {text-decoration:none; color: black;/* background-color: #e1e6e5;*/} /* le texte ne sera pas surligné*/ .element_sousmenu_vertical a:visited {text-decoration:none;color: black;/*background-color: #e1e6e5;*/} .element_sousmenu_vertical a:hover {color: #494644;font-weight: bold;/*background-color: #979b9a;*/} .element_sousmenu_vertical a:active {color: #494644;font-weight: bold;/*background-color: #979b9a;*/} .choixsousmenu_vertical {font-size: 1em;color: black; font-weight: bold;/*background-color: white;/**/} .element_soussousmenu_vertical {font-size: 0.9em;} .element_soussousmenu_vertical a {text-decoration:none; color: black;/* background-color: #e1e6e5;*/} /* le texte ne sera pas surligné*/ .element_soussousmenu_vertical a:visited {text-decoration:none;color: black;/*background-color: #e1e6e5;*/} .element_soussousmenu_vertical a:hover {color: #494644;font-weight: bold;/*background-color: #979b9a;*/} .element_soussousmenu_vertical a:active {color: #494644;font-weight: bold;/*background-color: #979b9a;*/} .choixsoussousmenu_vertical {font-size: 0.9em;color: black; font-weight: bold;/**/} .survol a img { width: 0; border: 0;} .survol a:hover img {position: absolute; top: 480px; left: 260px; width: 120px; border: 1px solid #d5d3d2; } @media all and (max-width: 1660px) { .survol a:hover img { top: 450px; left: 100px; } } @media all and (max-width: 1399px) { .survol a:hover img { top: 420px; left: 20px; } } @media all and (max-width: 1023px) { .survol { /*float: right;*/ } @media all and (max-height: 1024px) { .survol img { /*height:520px;*/ max-height:100px; } } @media all and (max-height: 800px) { .survol img { /*height:520px;*/ max-height:80px; } } @media all and (max-height: 667px) { .survol img { /*height:450px; */ max-height:65px; } } @media all and (max-height: 568px) { .survol img { /*height:380px; */ max-height:50px; } } } /**************** FIN MENU VERTICAL ************************************/ /* ================= CORPS BIGMENUVERTICAL DIAPORAMA ============================ */ /* ================= CORPS BIGMENUVERTICAL DIAPORAMA ============================ */ #corps_bigmenuvertical_diaporama_mobilenone { display: flex; flex-direction: column; justify-content: flex-start; /* se regroupe au debut inutile*/ width: 80%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: center; /*background-color: #3d2eda; /*bleu*/ } @media all and (max-width: 1023px) { #corps_bigmenuvertical_diaporama_mobilenone { /* ne se produit pas none par grand corps*/ display: none; } } /*--------------------------------------------------*/ /* ******** LA PHOTO CENTRALE et la LEGENDE *** INDEX ** DIAPORAMA ****/ /* ******** LA PHOTO CENTRALE et la LEGENDE *** INDEX ** DIAPORAMA **/ /* ******** LA PHOTO CENTRALE et la LEGENDE *** INDEX ** DIAPORAMA **/ /*--------------------------------------------------*/ .photo_centrale_bigmenuvertical_index_et_diaporama { margin: 0px 0px 0px 0px; padding: 23px 0px 0px 0px; width: 100%; height: 760px; /*65%*/ /*avant 756*/ /* background-color: blue; */ } .photo_centrale_bigmenuvertical_index_et_diaporama img { max-width: 100%; height:auto; max-height:695px; /*background-color: blue; /**/ } /* pour le diaporama on envisage les HAUTEURS ECRAN */ @media all and (max-height: 800px) { .photo_centrale_bigmenuvertical_index_et_diaporama { height: 647px; padding: 15px 0px 0px 0px; } .photo_centrale_bigmenuvertical_index_et_diaporama img { max-height:470px; } } @media all and (max-height: 768px) { .photo_centrale_bigmenuvertical_index_et_diaporama { height: 571px; /*68%*/ } .photo_centrale_bigmenuvertical_index_et_diaporama img { max-height:448px; } } @media all and (max-height: 720px) { .photo_centrale_bigmenuvertical_index_et_diaporama { height: 538px; } .photo_centrale_bigmenuvertical_index_et_diaporama img { max-height:425px; } } /* pour les mobiles */ /* n'a pas l'air utilise */ @media all and (max-width: 1023px) { .photo_centrale_bigmenuvertical_index_et_diaporama { padding: 5px 0px 1em 0px; } } .legende_photo_centrale_bigmenuvertical_index_et_diaporama { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /*background-color: green;*/ } /* ******** la COLONNE de VIGNETTES DIAPORAMA *******/ /* ******** la COLONNE de VIGNETTES DIAPORAMA *******/ /* le choix hauteur ce fait dans infod generale Ernesto, il ne marche pas donne toujpurs la petite, la seconde en realite */ /* il n'ecrit rien mais il affecte qd mm la variable? */ .choix_hauteur_colonne_vignettes_grande { display:block; } @media all and (max-height: 1050px) { .choix_hauteur_colonne_vignettes_grande { display: none; } } .choix_hauteur_colonne_vignettes_petite { display: none; } @media all and (max-height: 1050px) { .choix_hauteur_colonne_vignettes_petite { display:block; } } #bloc_vignettesw45_bigmenuvertical_diaporama { display: flex; flex-direction: row; justify-content: flex-end; /*none à droite*/ width: 5%; margin: 0px 0px 0px 0px; padding: 30px 7px 0px 0px; text-align: center; /*background-color: orange; /**/ } @media all and (max-width: 1399px) { #bloc_vignettesw45_bigmenuvertical_diaporama { padding: 5px 7px 0px 0px; } } .colonne_vignettesw45_bigmenuvertical_diaporama { display: flex; flex-direction: column; justify-content: flex-start; width: 50px; /*height: 270px; /*background-color: grey;/*orange*/ } /*--------------------------------------------------*/ /******** ******** LE PIED de PAGE pour les FLECHES INDEX (les 2) et DIAPORAMA BIGmenuvertical *****/ /******** ******** LE PIED de PAGE pour les FLECHES INDEX (les 2) et DIAPORAMA BIGmenuvertical *****/ /******** ******** LE PIED de PAGE pour les FLECHES INDEX (les 2) et DIAPORAMA BIGmenuvertical *****/ /*--------------------------------------------------*/ /*pour page index*/ .pied_de_page_credits_archives_index_bigmenuvertical { width: 100%; display: block; font-size: 0.8em; text-align: center; } .pied_de_page_credits_index_mobilenone { width: 80%; margin: 0px 0px 0px 20%; } .pied_de_page_archives_index { width: 80%; margin: 0px 0px 0px 20%; } @media all and (max-width: 1023px) { .pied_de_page_credits_index_mobilenone { display:none; } .pied_de_page_archives_index { width: 100%; margin: 0px 0px 0px 0px; } } .message_alerte { width: 100%; margin: auto; /*margin: 5px 5px 5px 5px;*/ /*background-color: #fee0e0; border: 2px solid #f15353;/*font-style: italic;*/ font-weight: bold; /*text-decoration: blink;*/ font-size: 1em; } /* pour diaporama */ #pied_de_page_bigmenuvertical_diaporama_mobilenone { display: flex; flex-direction: row; justify-content: space-between; /* repartit*/ width: 100%; margin: auto; /*background-color: grey;*/ } @media all and (max-width: 1399px) { #pied_de_page_bigmenuvertical_diaporama_mobilenone { width: 97%; } } /*tout ce qui suit ne vaut que si la largeur est >=1204*/ @media all and (max-width: 1023px) { #pied_de_page_bigmenuvertical_diaporama_mobilenone { display:none; } } #pied_de_page_sous_corps_bigmenuvertical_diaporama { display: flex; flex-direction: row; justify-content: flex-end; /*none à droite*/ width: 80%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /*background-color: #7f9f9b;/*bois clair*/ } .casefleches_gauchedroitenombre_bigmenuvertical_diaporama { display: flex; flex-direction: row; margin: 0px 20px 0px 0px; /*background-color: blue; /*vert*/ } .casefleches_gauchedroite_bigmenuvertical_diaporama { width: 40px; text-align: center; margin: 0px 0px 0px 0px; /*background-color: orange; /*vert*/} .casefleches_gauchedroite_vide_bigmenuvertical_diaporama { width: 40px; text-align: center; height:10px; margin: 0px 0px 0px 0px; /*background-color: red; /*vert*/} .casefleches_gauchedroite_nombrephoto_bigmenuvertical_diaporama { width: 40px; text-align: center; margin: 0px 0px 0px 0px; padding-top:2px; /*background-color: orange; /*vert*/} .nombrephoto {color: #514f4f; /*gris clair*/} #pied_de_page_sous_vignettes_bigmenuvertical_diaporama { display: flex; flex-direction: row; justify-content: flex-end; /*none à droite*/ width: 5%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /*background-color: green; /*vert*/ } #casefleches_hautbas_bigmenuvertical_diaporama { display: flex; flex-direction: row; justify-content: flex-start; width: 50px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /*background-color: red; /*vert*/ } .casefleches_haut_bigmenuvertical_diaporama { order: 1; width: 25px; text-align: center; margin: 0px 0px 0px 0px; /*background-color: yellow; /*vert*/} .casefleches_bas_bigmenuvertical_diaporama { order: 2; width: 25px; text-align: center; margin: 0px 0px 0px 0px; /*background-color: yellow; /*vert*/} /*********************************************************************/ /*********************************************************************/ /**************** PROPRE AUX MOBILE <1024 ***************************************************************/ /**************** PROPRE AUX MOBILE <1024 ***************************************************************/ /**************** PROPRE AUX MOBILE <1024 ***************************************************************/ /*********************************************************************/ /*********************************************************************/ /*--------------------------------------------------*/ /******** ******** GRAND CORPS ******** DIAPORAMA ******* AUTRES *****/ /******** ******** GRAND CORPS ******** DIAPORAMA ******* AUTRES *****/ /******** ******** GRAND CORPS ******** DIAPORAMA ******* AUTRES *****/ /*--------------------------------------------------*/ #grand_corps_mobile_menuhorizontal_vignettesliste_et_autres_bignone { display: none; } @media all and (max-width: 1023px) { #grand_corps_mobile_menuhorizontal_vignettesliste_et_autres_bignone { display: block; /*flex-direction: column; /*justify-content: flex-start; */ width: 100%; margin: auto; margin-top: 5em; padding-top: 1em; height:900px; /* c'est sans doute pour h=1280 et w=720 */ overflow: auto; text-align: center; /*background-color: orange;/**/ } @media all and (max-height: 1024px) { #grand_corps_mobile_menuhorizontal_vignettesliste_et_autres_bignone { height:800px; } } @media all and (max-height: 800px) { #grand_corps_mobile_menuhorizontal_vignettesliste_et_autres_bignone { height:560px; } } @media all and (max-height: 667px) { #grand_corps_mobile_menuhorizontal_vignettesliste_et_autres_bignone { height:500px; } } @media all and (max-height: 568px) { #grand_corps_mobile_menuhorizontal_vignettesliste_et_autres_bignone { height:420px; } } } /* ================= MENU GENERAL MOBILE======HORIZONTAL =========== */ /* ================= MENU GENERAL MOBILE======HORIZONTAL============ */ @media all and (max-width: 1023px) { .menu_mobile_horizontal /*idem plus haut en plus auto*/ { width: 100%; margin:auto; padding: 0px 0px 0px 0px; background-color: rgba(212, 210, 210, 1); /*background-color: #d4d2d2; /**/ } } .menu_ligne_mobile_horizontal { margin: 0px 0px 0px 0px; display: flex; flex-direction: row; flex-wrap: wrap; /* va à la ligne quand cela ne rentre pas */ width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /*background-color: green; /*vert*/ } @media all and (max-width: 1023px) { .menu_ligne_mobile_horizontal { margin: 0px 0px 0px 0px; padding: 12px 0px 12px 0px; border: 1px solid white; /*background-color: green; /*vert*/ } } .menu_case_element_choixmenu_mobile_horizontal { margin: 0px 0px 0px 0px; padding: 4px 7px 4px 7px; /*border: 1px solid white;*/ /*background-color: orange ; /*gris foncé*/ } .menu_case_element_menu_mobile_horizontal { /*margin-top: 20px;*/ margin: 0px 0px 0px 0px; padding: 4px 7px 4px 7px; /*border: 1px solid white;*/ /*background-color: #696c6b; /*gris foncé*/ } /* napparait qu'en mobile*/ .element_menu {font-size: 1em;} .element_menu a {text-decoration:none; color: black; /*background-color: #e1e6e5;*/} /* le texte ne sera pas surligné*/ .element_menu a:visited {text-decoration:none;color: black;/*background-color: #e1e6e5;*/} .element_menu a:hover {color: #494644;font-weight: bold;} .element_menu a:active {color: #494644;font-weight: bold;} .choixmenu {color: black; font-weight: bold; background-color: white;/**/} @media all and (max-width: 1023px) { .element_menu { font-size: 1.2em; } .choixmenu { padding: 0px 5px 0px 5px; font-size: 1.2em; } } /* napparait qu'en mobile*/ .element_sousmenu {font-size: 0.9em;} .element_sousmenu a {text-decoration:none; color: black;/* background-color: #e1e6e5;*/} /* le texte ne sera pas surligné*/ .element_sousmenu a:visited {text-decoration:none;color: black;/*background-color: #e1e6e5;*/} .element_sousmenu a:hover {color: #494644;font-weight: bold;/*background-color: #979b9a;*/} .element_sousmenu a:active {color: #494644;font-weight: bold;/*background-color: #979b9a;*/} .choixsousmenu {color: black; font-weight: bold;background-color: white;/**/} @media all and (max-width: 1023px) { .element_sousmenu { font-size: 1.1em; } .choixsousmenu { padding: 0px 5px 0px 5px; font-size: 1.1em; } } /**************** FIN Du MENU HORIZONTAL MOBILE *************************************/ /* ============CORPS ===== GRANDES VIGNETTES MOBILE ================== */ /* ============CORPS ===== GRANDES VIGNETTES MOBILE ================== */ #corps_mobile_menuhorizontal_vignettes_bignone { display: none; } @media all and (max-width: 1023px) { #corps_mobile_menuhorizontal_vignettes_bignone { display: flex; flex-direction: row; justify-content: center; width: 100%; margin: auto; text-align: center; /*background-color: grey;/**/ } /* les grandes vignettes*/ .colonne_mobile_menuhorizontal_vignettes { display: flex; flex-direction: column; justify-content: flex-start; width: 32%; padding: 0px 1px 0px 1px; /*background-color: white;/**/ } .case_vignette_mobile_menuhorizontal_vignettes { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 2px solid white; text-align: center; } .case_vignette_mobile_menuhorizontal_vignettes img { max-width: 100%; height:auto; } } /* ============CORPS ===== LISTE PHOTOS ================== */ /* ============CORPS ===== LISTE PHOTOS ================== */ #corps_mobile_menuhorizontal_liste_bignone { display: none; } @media all and (max-width: 1023px) { #corps_mobile_menuhorizontal_liste_bignone { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /*border: 2px solid white;*/ text-align: center; /*background-color: grey;/**/ } /*oeuvre et légendes */ .oeuvre_et_legende_mobile_menuhorizontal_liste { width: 90%; height:900px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 2px solid white; text-align: center; /*background-color: blue;/**/ } @media all and (max-height: 1024px) { .oeuvre_et_legende_mobile_menuhorizontal_liste { height:800px; } } @media all and (max-height: 800px) { .oeuvre_et_legende_mobile_menuhorizontal_liste { height:520px; } } @media all and (max-height: 667px) { .oeuvre_et_legende_mobile_menuhorizontal_liste { height:450px; } } @media all and (max-height: 568px) { .oeuvre_et_legende_mobile_menuhorizontal_liste { height:380px; } } .legende_mobile_menuhorizontal_liste { margin: 1.8em 0px 6em 0px; padding: 0px 0px 0px 0px; font-size:1.2em; /*background-color: green;*/ } @media all and (max-height: 667px) { .legende_mobile_menuhorizontal_liste { margin: 1em 0px 6.8em 0px; font-size:0.9em; } } /* les carnets les pages sont concues un peu comme les listes*/ .trois_mobile_liste_a_oeuvre_popup_carnet { width: 90%; height:810px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 2px solid white; text-align: center; /*background-color: blue;/**/ } @media all and (max-height: 1024px) { .trois_mobile_liste_a_oeuvre_popup_carnet { height:720px; } } @media all and (max-height: 800px) { .trois_mobile_liste_a_oeuvre_popup_carnet { height:468px; } } @media all and (max-height: 667px) { .trois_mobile_liste_a_oeuvre_popup_carnet { height:405px; } } @media all and (max-height: 568px) { .trois_mobile_liste_a_oeuvre_popup_carnet { height:340px; } } .trois_mobile_legende_popup_carnet { margin: 1.8em 0px 1em 0px; padding: 0px 0px 0px 0px; font-size:1.2em; /*background-color: green;/**/ } @media all and (max-height: 667px) { .trois_mobile_legende_popup_carnet { margin: 1em 0px 1em 0px; font-size:0.9em; } } } .oeuvre_et_legende_mobile_menuhorizontal_liste img { max-width: 100%; height:auto; /*height:900px; */ max-height:630px; /*background-color: blue;/**/ } .trois_mobile_liste_a_oeuvre_popup_carnet img { max-width: 100%; height:auto; /*height:900px; */ max-height:567px; /*background-color: blue;/**/ } @media all and (max-height: 1024px) { .oeuvre_et_legende_mobile_menuhorizontal_liste img { /*height:800px; */ max-height:560px; } } @media all and (max-height: 800px) { .oeuvre_et_legende_mobile_menuhorizontal_liste img { /*height:520px;*/ max-height:364px; } } @media all and (max-height: 667px) { .oeuvre_et_legende_mobile_menuhorizontal_liste img { /*height:450px; */ max-height:315px; } } @media all and (max-height: 568px) { .oeuvre_et_legende_mobile_menuhorizontal_liste img { /*height:380px; */ max-height:266px; } } @media all and (max-height: 1024px) { .trois_mobile_liste_a_oeuvre_popup_carnet img { /*height:800px; */ max-height:504px; } } @media all and (max-height: 800px) { .trois_mobile_liste_a_oeuvre_popup_carnet img { /*height:520px;*/ max-height:328px; } } @media all and (max-height: 667px) { .trois_mobile_liste_a_oeuvre_popup_carnet img { /*height:450px; */ max-height:284px; } } @media all and (max-height: 568px) { .trois_mobile_liste_a_oeuvre_popup_carnet img { /*height:380px; */ max-height:240px; } } /* pour popup carnet*/ a.lienpopup, a:visited .lienpopup { color: black; font-size: 11px; font-style: italic;} a:hover.lienpopup, a:active.lienpopup { color: #494644; font-size: 12px; font-weight: bold; font-style: italic;} .fermerfenetrepopup { margin: 1em 0px 0px 0px; text-align: center; } /*--------------------------------------------------*/ /******** ******** EN GENERAL *****/ /******** ******** EN GENERAL *****/ /******** ******** EN GENERAL *****/ /*--------------------------------------------------*/ img { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; max-width: 100%; /*height:auto; /* à mettre pour les petits ecrans*/ } /* pour mobile les images sont retravaillées plus bas */ a.cadrelienphotos img , a:visited.cadrelienphotos img {border: 1px solid #d9d6d6;} a:hover.cadrelienphotos img , a:active.cadrelienphotos img {border: 1px solid #b5b2b1;} table { margin: auto; text-align: center; border-collapse: collapse;} tr,td { border: 1px solid white;} td { width:40px;} table a {color: white;/*background-color: green;*/} a img {border-color:white;/*blanc*/;} /* les photos des fleches ont cadre blanc */ table a:visited {color: white;} table a:hover {color: #dbd8d6;}