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) /*ne marche pas sur Tel? */ { 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; /**/} } #zero_entete_etmenu_mobile { } @media all and (max-width: 1023px) { #zero_entete_etmenu_mobile { width: 100%; position: absolute; left: 0px; top: 0px; z-index: 1; /*background-color: grey; /**/ } #zero_entete_etmenu_mobile_ouvert { width: 100%; position: absolute; left: 0px; top: 0px; z-index: 2; background-color: #d4d2d2; /**/ } } #un_en_tete, #un_en_tete_mobile_ouvert { 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) { #un_en_tete { margin: 10px 0px 10px 0px; padding: 0px 7px 0px 7px; font-size: 2.3em; } } @media all and (max-width: 1023px) { #un_en_tete { width: 100%; margin: 5px 0px 5px 0px; padding: 0px 7px 0px 7px; font-size: 2.3em; } #un_en_tete_mobile_ouvert { width: 100%; margin: 5px 0px 5px 0px; padding: 0px 7px 0px 7px; font-size: 2.3em; } } /*--------------------------------------------------*/ /******** ******** SPECIAL cient d'ERnesto aout 2021 *****/ /******** ******** 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: block; } } /* special autres que big ****************** */ .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 ***************** */ /* ================= MENU INDEX ============================ */ /* ================= MENU INDEX============================ */ /* ================= MENU INDEX============================ */ /* special infos mail et burger ******************** */ /* special infos mail et burger ******************** */ .apartirdew1024_rien { display: none; } @media all and (max-width: 1023px) { .apartirdew1024_rien { display: inline; } .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 7px 0px 0px; } } /* fin special infos mail et burger ******************** */ /* fin special infos mail et burger ******************** */ #deuxindex_menu /*pour le moment idem que menu autre à part le flex */ { display: flex; flex-direction: row; justify-content: space-between; /* repartit*/ width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size: 1em; color: black; /* noir */ /*background-color: yellow; /**/ /*font-weight: bold;*/ } .deuxindex_a_demi_ligne_langues { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap;/* va a la ligne*/ width: 25%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /*background-color: green; /*vert*/ } @media all and (max-width: 1023px) { #deuxindex_menu { display: flex; flex-direction: column; /*justify-content: space-between;*/ width: 100%; padding: 0px 0px 0px 0px; } .deuxindex_a_demi_ligne_langues { width: 100%; padding: 10px 0px 0px 0px; /*background-color: green; /*vert*/ } } /* special infos mail******************** */ @media all and (max-width: 1023px) { .jusquaw1023_rien { display: none; } } /* special infos mail******************** */ .deuxindex_b_bloc_demi_ligne_infos { /*float: right;*/ display: flex; flex-direction: column; justify-content: flex-end; flex-wrap: nowrap; /*width: 75%; avec 75 cla ne marche pas , je sais pas pourquoi*/ margin: 0px 0px 0px 0px; padding: 0px 10px 0px 0px; /*background-color: orange; /*vert*/ } .deuxindex_bc_demi_ligne_infos { display: flex; flex-direction: row; justify-content: flex-end; /*bloque à droite*/ flex-wrap: wrap; width: 100%; margin: 0px 0px 0px 0px; padding:0; /*background-color: red; /*vert*/ } /* ================= MENU GENERAL AUTRE que INDEX ============================ */ /* ================= MENU GENERAL AUTRE que INDEX============================ */ /* ================= MENU GENERAL AUTRE que INDEX============================ */ .deux_menu { display: flex; flex-direction: column; /* pour les lignes */ width: 100%; margin: 0px 0px 0px 0px; font-size: 1em; color: black; /* noir */ /*background-color: white; */ } .deux_a_ligne_element_menu { 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) { #deux_menu { width: 100%; padding: 0px 0px 0px 0px; background-color: #d4d2d2; /**/ } .deux_a_ligne_element_menu { margin: 0px 0px 0px 0px; padding: 12px 0px 12px 0px; border: 1px solid white; /*background-color: green; /*vert*/ } } .deux_ab_case_element_choixmenu { margin: 0px 0px 0px 0px; padding: 4px 7px 4px 7px; /*border: 1px solid white;*/ /*background-color: orange ; /*gris foncé*/ } .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; } } /****************** COMMUN AUX DEUX : INDEX et AUTRE **********/ /****************** COMMUN AUX DEUX : INDEX et AUTRE **********/ .deuxmixte_aa_case_element_menu { /*margin-top: 20px;*/ margin: 0px 0px 0px 0px; padding: 4px 7px 4px 7px; /*border: 1px solid white;*/ /*background-color: #696c6b; /*gris foncé*/ } .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; } } /**************** FIN DES MENUS **********************************************************************************/ /**************** FIN DES MENUS **********************************************************************************/ /**************** FIN DES MENUS **********************************************************************************/ /**************** FIN DES MENUS **********************************************************************************/ /**************** FIN DES MENUS **********************************************************************************/ /******************************** ***************************************************************/ /**********************************************************************************************/ /****************PROPRE AUX DIAPORAMAS et INDEX ***************************************************************/ /****************PROPRE AUX DIAPORAMAS et INDEX ***************************************************************/ /**********************************************************************************************/ /***********************************************************************************************/ /******** LE GRAND CORPS ******** INDEX *****/ /********** LE GRAND CORPS ****** INDEX **********/ #trois_grand_corps_index { width: 80%; margin: auto; /*background-color: grey;/**/ } #trois_corps_index { width: 80%; margin: auto; /*margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;*/ text-align: center; /*background-color: #3d2eda; /*bleu*/ } /******** LE GRAND CORPS ******** DIAPORAMA *****/ /********** LE GRAND CORPS ****** DIAPORAMA **********/ #trois_grand_corps { display: flex; flex-direction: row; justify-content: space-between; /* repartit*/ width: 80%; margin: auto; /*background-color: grey;/**/ } @media all and (max-width: 1399px) { #trois_grand_corps { width: 90%; } } /*tout ce qui suit ne vaut que si la largeur est >1204*/ @media all and (max-width: 1023px) { #trois_grand_corps { display:none; } } #trois_corps { 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*/ } /* ******** LA PHOTO et la LEGENDE ** INDEX ** DIAPORAMA ****/ /* ******** LA PHOTO et la LEGENDE *** INDEX ** DIAPORAMA **/ .trois_corps_tous_a_photo_centrale { margin: 0px 0px 0px 0px; padding: 23px 0px 0px 0px; width: 100%; height: 675px; /*65%*/ /*background-color: blue; /**/ } .trois_corps_tous_a_photo_centrale img { max-width: 100%; height:auto; max-height:570px; /*background-color: blue; /**/ } /* pour le diaporama*/ @media all and (max-height: 800px) { .trois_corps_tous_a_photo_centrale { height: 530px; padding: 15px 0px 0px 0px; } .trois_corps_tous_a_photo_centrale img { max-height:420px; } } @media all and (max-height: 768px) { .trois_corps_tous_a_photo_centrale { height: 510px; /*68%*/ } .trois_corps_tous_a_photo_centrale img { max-height:400px; } } @media all and (max-height: 720px) { .trois_corps_tous_a_photo_centrale { height: 480px; } .trois_corps_tous_a_photo_centrale img { max-height:380px; } } /* pour les mobiles */ @media all and (max-width: 1023px) { .trois_corps_tous_a_photo_centrale { padding: 5px 0px 1em 0px; } } .trois_corps_tous_b_legende { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /*background-color: green;/**/ } /* ICI A VOIR ----------TAILLE ---------------------------------------------------------*/ /* ICI A VOIR --------------------------------------------------------------------------*/ /* ICI A VOIR --------------------------------------------------------------------------*/ /* ******** LE BLOC pour les COLONNES de VIGNETTES *******/ /* ******** LE BLOC pour les COLONNES de VIGNETTES *******/ #trois_vignettes_moins270 { display: flex; flex-direction: row; justify-content: flex-end; /*bloque à droite*/ width: 20%; margin: 0px 0px 0px 0px; padding: 200px 0px 0px 0px; text-align: center; /*background-color: orange; /**/ } @media all and (max-width: 1399px) { #trois_vignettes_moins270 { padding: 120px 0px 0px 0px; } } #trois_vignettes_plus270 { display: flex; flex-direction: row; justify-content: flex-end; /*bloque à droite*/ width: 20%; margin: 0px 0px 0px 0px; padding: 50px 0px 0px 0px; text-align: center; /*background-color: orange; /**/ } @media all and (max-width: 1399px) { #trois_vignettes_plus270 { padding: 10px 0px 0px 0px; } } #trois_vignettes_a_bloc_moins270_et_DEUXTROIS { display: flex; flex-direction: row; width: 150px; height: 270px; /*background-color: green; /**/ } #trois_vignettes_a_bloc_plus270_et_DEUXTROIS { display: flex; flex-direction: row; width: 150px; height: 550px; /*background-color: green; /**/ } #trois_vignettes_a_bloc_plus270_et_UN { display: flex; flex-direction: row; width: 50px; height: 550px; /*background-color: green; /**/ } .trois_vignettes_ab_colonne_plus270 { display: flex; flex-direction: column; justify-content: flex-start; width: 50px; height: 550px; /*background-color: grey;/*orange*/ } .trois_vignettes_ab_colonne_moins270 { display: flex; flex-direction: column; justify-content: flex-start; width: 50px; height: 270px; /*background-color: grey;/*orange*/ } /* ******** LE PIED de PAGE pour les FLECHES*******/ /* ******** LE PIED de PAGE pour les FLECHES*******/ /* ******** LE PIED de PAGE pour les FLECHES*******/ /* ******** LE PIED de PAGE pour les FLECHES*******/ #quatre_pied { display: flex; flex-direction: row; justify-content: space-between; /* repartit*/ width: 80%; margin: auto; /*background-color: grey;/**/ } @media all and (max-width: 1399px) { #quatre_pied { width: 90%; } } /*tout ce qui suit ne vaut que si la largeur est >=1204*/ @media all and (max-width: 1023px) { #quatre_pied { display:none; } } #quatre_pied_a_sous_corps { display: flex; flex-direction: row; justify-content: flex-end; /*bloque à droite*/ width: 80%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /*background-color: #7f9f9b;/*vert clair*/ } .quatre_pied_ab_caseflechegauchedroitenombre { display: flex; flex-direction: row; margin: 0px 20px 0px 0px; /*background-color: blue; /*vert*/ } .caseflechesdroitegauche { width: 40px; text-align: center; margin: 0px 0px 0px 0px; /*background-color: orange; /*vert*/} .caseflechesdroitegauchevide { width: 40px; text-align: center; height:10px; margin: 0px 0px 0px 0px; /*background-color: red; /*vert*/} .caseflechesdroitegauchenombrephoto { width: 40px; text-align: center; margin: 0px 0px 0px 0px; padding-top:2px; /*background-color: orange; /*vert*/} .nombrephoto {color: #514f4f; /*gris clair*/} #quatre_pied_b_sous_vignettesUN { display: flex; flex-direction: row; justify-content: flex-end; /*bloque à droite*/ width: 20%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /*background-color: green; /*vert*/ } #quatre_pied_b_sous_vignettesDEUXTROIS { display: flex; flex-direction: row; justify-content: flex-end; /*bloque à droite*/ width: 20%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /*background-color: green; /*vert*/ } #quatre_pied_bc_caseflecheshautbasUN { 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*/ } #quatre_pied_bc_caseflecheshautbasDEUXTROIS { display: flex; flex-direction: row; justify-content: flex-start; width: 150px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /*background-color: red; /*vert*/ } .caseflecheshaut3 { order: 1; width: 75px; text-align: center; margin: 0px 0px 0px 0px; /*background-color: yellow; /*vert*/} .caseflechesbas3 { order: 2; width: 75px; text-align: center; margin: 0px 0px 0px 0px; /*background-color: yellow; /*vert*/} 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;} /*********************************************************************/ /*********************************************************************/ /*********************************************************************/ /**************** PROPRE AUX MOBILE <1024 ***************************************************************/ /**************** PROPRE AUX MOBILE <1024 ***************************************************************/ /**************** PROPRE AUX MOBILE <1024 ***************************************************************/ /*********************************************************************/ /*********************************************************************/ /*********************************************************************/ /* ============avannt il y a un apartirdew=768===============_rienn*/ /* cette partie est bonne pour ceux qui ont moins de 768 de largeur */ #trois_mobile_grand_corps_apartirdew1024_rien { display: none; } @media all and (max-width: 1023px) { #trois_mobile_grand_corps_apartirdew1024_rien { display: block; /*flex-direction: column; /*justify-content: flex-start; */ width: 100%; margin: auto; margin-top: 5em; padding-top: 2em; 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) { #trois_mobile_grand_corps_apartirdew1024_rien { height:800px; } } @media all and (max-height: 800px) { #trois_mobile_grand_corps_apartirdew1024_rien { height:560px; } } @media all and (max-height: 667px) { #trois_mobile_grand_corps_apartirdew1024_rien { height:500px; } } @media all and (max-height: 568px) { #trois_mobile_grand_corps_apartirdew1024_rien { height:420px; } } /*-------------------------------- vignettes ---------------*/ #trois_mobile_vignettes { display: flex; flex-direction: row; justify-content: center; width: 100%; margin: auto; text-align: center; /*background-color: grey;/**/ } .trois_mobile_vignettes_a_colonne { display: flex; flex-direction: column; justify-content: flex-start; width: 32%; padding: 0px 1px 0px 1px; /*background-color: white;/**/ } .trois_mobile_vignettes_ab_vignette { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 2px solid white; text-align: center; } /*-------------------------------- liste ---------------*/ #trois_mobile_liste { 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;/**/ } .trois_mobile_liste_a_oeuvre { 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) { .trois_mobile_liste_a_oeuvre { height:800px; } } @media all and (max-height: 800px) { .trois_mobile_liste_a_oeuvre { height:520px; } } @media all and (max-height: 667px) { .trois_mobile_liste_a_oeuvre { height:450px; } } @media all and (max-height: 568px) { .trois_mobile_liste_a_oeuvre { height:380px; } } .trois_mobile_legende { margin: 1.8em 0px 6em 0px; padding: 0px 0px 0px 0px; font-size:1.2em; /*background-color: green;*/ } @media all and (max-height: 667px) { .trois_mobile_legende { margin: 1em 0px 6.8em 0px; font-size:0.9em; } } .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; } } } /******************IMG et FRAME *************************/ /******************IMG et FRAME *************************/ /******************IMG et FRAME *************************/ /******************IMG et FRAME *************************/ /* les max-height en pourcentages ne marchent pas pour tous les navigateurs */ .trois_mobile_vignettes_ab_vignette img { max-width: 100%; height:auto; } .trois_mobile_liste_a_oeuvre 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) { .trois_mobile_liste_a_oeuvre img { /*height:800px; */ max-height:560px; } } @media all and (max-height: 800px) { .trois_mobile_liste_a_oeuvre img { /*height:520px;*/ max-height:364px; } } @media all and (max-height: 667px) { .trois_mobile_liste_a_oeuvre img { /*height:450px; */ max-height:315px; } } @media all and (max-height: 568px) { .trois_mobile_liste_a_oeuvre 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; } 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;}