/* Chaine regex de sélection des commentaires CSS   \/*.*?\*\/\n    */
html{
   background: url(gris_moire.jpg) no-repeat center fixed;
   background-size: cover;
 }
/* Le html est tapissé d'une image d'arrière-plan fixe permanente devant laquelle se déroulera le main, plus étroit et donc laissant voir en permanence les bords latéraux de l'image de fond (sur un grand écran le visiteur fatiguerait à lire sur toute la largeur de l'écran.) Si le positionnement de l'image est sans importance (non figurative) ses dimensions peuvent excéder celles de l'écran sans problème. Si l'on désire voir la totalité d'une image de fond sur écran 16 x 9 (figurative) elle devrait être inférieure à 1920 x 1080 (exemple 1900 x 850) pour laisser de la marge à l'habillage du navigateur. Soit un rapport de 2,25. Les largeurs s'expriment ascenseur vertical à souris inclus (20px). La largeur maximale est ainsi réduite de 20px pour s'éviter un curseur horizontal en bas . En cas de modif des dimensions du navigateur qui annule le rapport de 2,25, l'image est tronquée de façon qu'aucune bande noire disgracieuse n'apparaît. Rappels sur les techniques d'image d'arrière-plan : */
/* Image de fond (dans le même dossier) préalablement flouttée: ça donne de la profondeur (Possibilité de floutage par le navigateur avec filter) */
/* background-repeat: no-repeat;  Une image de fond se répète par défaut si elle est plus petite que la page  */
/* background-attachment: fixed;  L'image d'arrière-plan ne scrollera pas. Elle est toujours positionnée dans la fenêtre pas dans le body */
/*	background-position: top left;			/* position forcée de l'image de fond (incompatible avec fixed) */
/* background-size: 100%; Largeur de l'arrière-plan (ici de l'image) restant proportionnée en réduction de fenêtre. (en l'absence de background-color le bandeau restant sera blanc) avec cover l'image couvrira l'intégralité de la fenêtre mais sera tronquée. Il est possible de superposer plusieurs images de fond séparées par une virgule pour donner un effet de profondeur en jouant sur les transparences et la propriété Transformation. Rappel: une image d'arrière-plan n'est pas un contenu. Une boîte qui a seulement une image d'arrière-plan aura pour toute hauteur seulement la hauteur de ses remplissages bordures et marges. a contrario une image EST un contenu.  */

/* Le max-width du body est adapté de façon à contenir la largeur physique des photos de la galerie (sans trop dépasser pour éviter une perte de qualité) (en tenant compte des marges et remplissages des div intermédiaires). Grosso merdo c'est surtout le padding de la section (6% à gauche et à droite) qui compte. Donc ici la largeur physique des photos 1365 px est préservée. */
body{
   font-family: Verdana, Geneva, sans-serif;
   max-width: 1600px;
}

/* ===========================================  MENU  ================================================= */
/* Menu horizontal permanent complètement géré par le display: flex; qui n'occupe pas systématiquement toute la largeur: simplicité du coding. Sur smartphone (sous 720px) le menu horizontal est remplacé par un menu vertical exactement en haut à gauche. Noter que en l'état ce menu css est complètemenent transposable sur un autre site et pourrait figurer dans un CSS commun, puisqu'il ne contient en dur aucune donnée textuelle ni nombre d'items. */

/* La  div menu doit rester collée et visible en haut de l'écran au scroll. Esthétiquement le menu a la même largeur que le titre et le main . On a vérifié que le menu reste lisible à cette largeur: cette condition détermine le choix de la largeur. */
#menu{
   position: sticky;
   top: 0;
   z-index: 99;
}

/* Masquage permanent de la checkbox. Icône Burger invisible sur grand écran */
#menu_checkbox, #icone_burger{
   display: none;
}

/* La liste des items est un flex-conteneur. Le display: flex; impose l'alignement des items. Dans le nav il n'y a aucune définition en dur des largeurs et hauteurs d'items, c'est le display: flex; qui fait les ajustements */
nav ul{
   list-style: none;
   display: flex;
}

/* Présentation des items */
nav li{
   height: 65px;
   font-size: 16px;
   border: 1px solid black;
}

/* Présentation du 1er item (N° de téléphone) */
nav li:first-of-type{
   background-color: red;
   padding: 5px;
   font-weight: bold;
}

/* Présentation commune à tous les items y compris le n° de téléphone */
nav li:first-of-type, nav a{
   color: white;
   text-shadow: -1px -1px 2px black;
   /* Effet d'estampe de caractères */
   text-align: center;

   /* Chaque élément est un flex-conteneur pour le centrage horizontal et vertical du texte contenu qui se comporte comme un paragraphe enfant = flex-item, de l'item. Le display: flex; sur les liens du menu, assure le centrage des textes dans les 2 directions car le a est flex-conteneur et son texte le flex-item. Il faut ajouter un height: 100%; pour étendre la zone cliquable sur toute la hauteur de l'item. Un width: 100%; est inutile car de par le texte la zone cliquable est déjà étendue sur toute la largeur de l'item. */
   display: flex;
   justify-content: center;
   align-items: center;
}

/* Présentation typique des liens dans les items */
nav a{
   text-decoration: none;
   height: 100%;
   box-shadow: 2px 2px 5px white inset;
   /* Effet de boutons en relief avec éclairage depuis l'angle supérieur-gauche . */
   background: rgb(90, 90, 90);
}

.bouton_vert{
   background-color: limegreen;
   color: yellow;
   font-weight: bold;
}

/* Effet d'enfoncement au clic du bouton par ombrage depuis l'angle supérieur-gauche. Déplacement du texte pour accompagner l'effet d'enfoncement. */
nav a:active, #envoyer:active{
   box-shadow: 3px 3px 10px black inset;
   transform: translate(2px, 2px);
}

/* =======================================================  BANNIERE  ======================================= */
#banniere_chat{
   width: 70%;
   display: block;
   margin: 0 auto;
}

/* La carte de visite est empilée en avant-plan de la bannière. */
/* Calques en CSS: on "empile" les objets en leur appliquant un position: absolute; et en jouant avec le z-index pour la visibilité. Rappel: le position: absolute; libère l'emplacement d'origine alors que le position: relative; le maintient. Le bloc  étant en position: relative; il faut déplacer d'autant le main pour combler l'emplacement réservé de #version. */

#groupe_carte_de_visite{
   position: absolute;
   z-index: 3;
   top: 8%;
   max-width: 400px;
   left: 10%;
   font-size: 16px;
   color: yellow;
}

/* La carte de visite est réglée sur la largeur de son conteneur sinon elle dépassera du fait de sa largeur physique, or on ne peut pas modifier cette dernière car la carte de visite du dossier leprof39.fr est utilisée hors du site. Noter que la carte de visite apparaît 2 fois dans le site donc son id est mentionnée 2 fois: ce n'est pas un problème car c'est le même objet. */
#carte_de_visite{
   width: 100%;
}
#prise_en_main{
   width: 100%;
   text-align: center;
   background: rgb(90, 90, 90);
}
#compteur{
   filter: blur(2px);
}
#occasion span{
   background-color: blue;
   font-weight: bold;
   color: white;
}

/***************************************  TYPES  BALISES  ********************************************************************/

/* Sur survol de souris, les liens-images paraissent éclairés avec masquage de leur liseré bleu */
a:hover, video:hover{
   filter: brightness(1.5);
   /* En cas de survol les liens sont éclairés : < 1 = assombrissement / > 1 = Eclaircissement. Le problème : si hors hover un filter est déjà actif (pour créer une ombre autour de l'élément comme ci-dessus, il sera remplacé par le filter du hover, donc en l'ocurrence l'ombre disparaîtra lors du survol). Hover est inopérant sur smartphone.  */
}

/* Le h1 est renseigné pour les moteurs de recherches mais masqué car les titres de sections sont des h2, car le site est un site mono-page. */
h1{
   display: none;
}

h2{
   font-size: xx-large;
   text-align: center;
   color: darkred;
   padding: 40px 0;
}
h3{
   font-size: 20px;
   text-align: center;
   padding: 30px 0;
}
h4{
   padding: 20px 0 0 0;
}

/* Ombrage noir des images qui ne sont pas des liens ("sauf les images contenues dans les éléments "a" de classe liens bleus"). Ne pas confondre avec la syntaxe img._lbl qui signifierait "les images de classe _lbl". Or ce sont les liens "a" qui sont de cette classe. */
img:not(._lbl img){
   filter: drop-shadow(3px 3px 2px black);
}

/* Présentation du formulaire de contact */
input, textarea{
   font-size: large;
   /* float: right; */
}

label{
   font-style: italic;
   /* float: left; */
}

main{
   margin: 0 auto;
}
main p, main strong, main img {
   padding: 10px;
}

section{
   width: 100%;
   padding: 5% 10%;
   border: 1px solid black;
   box-shadow: 3px 0 3px black;
   background-size: cover;

   /* Fond normal des sections chiadé : le fond blanc en début de section s'assombrit peu à peu en fond papier gris vers le bas */
   /* $$$$$$$$$$ */
   /* background: linear-gradient(0deg, rgba(206, 206, 206, .2), rgba(255, 255, 255, 0.931)), url(papier_peint_2000px.jpg) no-repeat center fixed; */
 /*  background: url(papier_peint_2000px.jpg) no-repeat center fixed;  /* sans variation */
   /* $$$$$$$$$$ */
   /* linear-gradient(angle, 1ère couleur, 2de couleur) Avec un angle de zéro, la 1ère couleur est le bas (moins opaque), et la seconde le haut (plus opaque) */
   /* rgba: la dernière valeur est l'opacité de 0 (transparent) à 1 (opaque). Se règle sur le schéma dynamique en glissant le curseur */
   /* Ici utiliser background strictement et non background-color ce ne sont pas les mêmes propriétés. Background est un exemple de propriété contenant des "sous-propriétés" (linear-gradient et url) qui présentent chacunes leurs valeurs */

   /* Fond temporaire blanc à activer seulement en local pour passer des captures */
   /* $$$$$$$$$$ */
   /* background-color: white; */
   /* $$$$$$$$$$ */
   /* En même temps commenter le background: linear-gradient (ce ne sont pas des propriétés identiques donc ne s'applique pas la formule ("le dernier a raison") */
}

/* Remplissage des listes sauf la liste dans le menu. A gauche on donne de la place aux puces, à droite remplissage nul pour éviter un débordement disgracieux des flottants. */
ul:not(#menu ul){
   padding: 10px 0 10px 30px;
}

/***********************************************   CLASSES  *********************************************************/

/* 1-ère ligne "titre" des listes: le text-align: left; est précisé car dans le CSS commun toutes les "li" sont justifiées donc pour contredire cette justification disgracieuse sur le titre en gras. */
.li_titre{
   list-style: none;
   font-weight: bold;
   text-align: left;
   padding-top: 10px;
}

.sous_titre{
   font-size: x-large;
   padding: 20px 0;
   text-align: center;
}

.tarifs{
   background-color: chartreuse;
}

/*********************************************************  ID  ***************************************************/

/* Pour utiliser :first-of-type, first-child, etc... utiliser le connecteur d'enfants > pour ne pointer que la 1ère occurrence.*/
#abonnement > img:first-of-type{
   /* Rappel: le sélecteur d'enfant est prioritaire sur le sélecteur descendant: donc nav >ul > li:first-of-type est prioritaire sur nav li:first-of-type.   */
   width: 100%;
}

/* Bouton Envoyer du formulaire: par son id: */
/* (Une autre désignation possible du bouton Envoyer aurait été possible: input[type=submit] ) */
#envoyer{
   width: 100px;
   padding: 20px;
   margin: 10px;
   font-size: 15px;
   font-weight: bold;
   background-color: red;
   color: white;
   box-shadow: 2px 2px 5px white inset;
   text-shadow: -1px -1px 2px black;
}
#envoyer:hover{
   cursor: pointer;
   filter: brightness(1.5);
}
#formulaire{
   max-width: 800px;
}

/* Note: l'ID est prioritaire sur la classe quel que soit l'emplacement */
#mentions p{
   text-align: left;
   font-size: small;
}
#no_cookie{
   filter: none;
}

/* Exemple d'image qui doit occuper toute la largeur de son conteneur jusqu'à concurrence de sa largeur physique */
#ordi_ancien{
   max-width: 900px;
   width: 100%;
}
#plein_tarif{
   background-color: coral;
}
#tarif_reduit{
   background-color: gold;
}
#sauvegardes{
   width: 200px;
}

/* =============================================  GALERIE PHOTOS   ============================================== */

/* Le principe est de cliquer une vignette pour afficher la même photo en grand dans une "visionneuse". Il vaut mieux que les vignettes et la visionneuse soient visibles en même temps pour éviter un aller-retour pénible. Dans la technique ici utilisée (leprof39.fr et menuiseriebouhans.fr) les images de la galerie peuvent avoir des proportions, orientations, et dimensions différentes (pas trop).On copiera les images sous forme de vignettes de dimension réduite (ex 100px sur un coté). Principe: 1 seule image est affichée à la fois dans la visionneuse. Il y aura une réduction automatique des images trop grandes et une augmentation automatique des images trop petites de façon qu'elles s'affichent exactement dans la largeur fixe de la visionneuse. Attention au flou en cas de réduction trop importante. Toutes les N images sont alignées (donc flottantes) dans une Pellicule dont la largeur totale est N x 100% du conteneur visionneuse avec overflow: hidden; Dans la pellicule chaque image doit avoir une largeur de 100% du conteneur pellicule / N images.  Ex 6 images donc 100% / 6 = 16,6%. Chaque image de la pellicule est une destination de chaque vignette comme si l'on glissait une diapo correspondant à la vignette dans la visionneuse. L'ensemble des vignettes est en display: flex; justify-content: center; align-items: center; et surtout flex-wrap: wrap; pour une parfaite gestion toutes largeurs d'écran. Il me manque la technique pour associer à chaque photos sa légende: comment afficher la légende de l'image qui passe dans la visionneuse. S'il existe plusieurs galeries la visionneuse utilisée est toujours la même, mais chaque galerie est stockée dans une pellicule à part (ex pellicule_pros). */

/* On peut laisser la div visionneuse par défaut à width: 100%; car elle sera toujours inférieure à la largeur physique des photos (1365px). En effet le body est de 1400px et en soustrayant le padding de la section on descend à plus de 1200px maxi pour la visionneuse. */
/* Rappel: par défaut une div est width: 100%; de son conteneur (rappel: le remplissage du conteneur est extérieur au width du contenu: donc ici la div visionneuse tient à l'intérieur du padding de la section (6% à gauche et à droite)). */
#visionneuse{
   overflow: hidden;
   filter: drop-shadow(3px 3px 2px black);
   margin: 0 auto;
}

/* La pellicule est l'ensemble des images alignées par un float: left; donc la largeur de la pellicule est le produit de la largeur de la visionneuse par le nombre d'images */
/* Les images de la pellicule peuvent être de dimensions et proportions différentes. La hauteur finale de la pellicule sera celle de l'image la plus haute donc il apparaîtra pour les autres images une marge inférieure. Le position: relative; s'avère inutile. */
#pellicule{
   width: 600%;
}

/* =================================================================== */
/* Astuce TARTOUILLE pour contourner le bogue de sélection des images : ajout d'une bordure transparente, et chaque image de la pellicule est insérée dans une div. */
#pellicule *{
   border: 1px solid rgba(255, 0, 0, 0);
}
/* =================================================================== */

/* La largeur d'une image est le quotient de la largeur totale de la pellicule par le nombre d'images. Ne pas hésiter à préciser à 2 décimales pour éviter des effets de bordures désagréables. Padding-top de l'épaisseur du menu pour afficher la photo par-dessous. */
#pellicule img{
   width: 16.66%;
   float: left;
   padding-top: 70px;
}

/* Groupe des vignettes cliquables de galerie: alignées, centrées, et automatiquement "wrapées" (vont à la ligne) en réduction de largeur pour rester entièrement visibles. */
.vignettes{
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

.vignettes img{
   width: 150px;
   padding: 0;
}

/* Ci-dessous: pour obtenir un effet de désordre (pêle-mêle) des vignettes comme dans l'exemple en lien, on leur attribue individuellement un z-index, une rotation (le degré n'est pas l'amplitude mais la position finale), et un padding avec couleur de fond wheat (un peu jauni, passé). Chaque vignette cliquée est passée au 1er plan à l'horizontale. C'est un peu tartouille, comme pour la rotation sous le clic qui est attribuée individuellement. (à vérifier le rotate ne fonctionnerait pas sur une classe ? */
/* https://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery */
/* Aspect Polaroïd (le wheat fait un peu jauni, passé :) */
   /* #une_vignette{ */
   /* /* z-index: 1; */
	/* transform: rotate(-10deg); */
   /* padding: 5px 5px 20px 5px; */
   /* background-color: wheat; */
/* } */
/* #une_vignette:active{ */
   /* z-index: 10; */
	/* transform: rotate(0); */
/* }  */

/* ======================================  MEDIAQUERY  ====================================================================================== */

@media (max-width: 850px){

   h2{
      font-size: xx-large;
   }
   section{
      padding: 1%;
   }

   /* ============================================   BANNIERE  ================================================ */

   #banniere_chat{
      display: none;
   }
   #groupe_carte_de_visite{
      position: inherit;
      margin: 40px auto 0 auto;
   }
   #version{
      font-size: small;
   }

   /* =============================  Menu sur smartphone  ================================================ */

   /* En format smartphone le menu n'est pas permanent pour ne pas réduire la visibilité donc un flip/flop affichage/masquage est provoqué. L'affichage du menu sera commandé par une icône Burger: affichage si clic, effacement si reclic .L'état de l'interrupteur est indiqué par une case à cocher masquée (input type="checkbox") dont le label est l'icône. L'input doit comporter une id qui sera reprise comme for dans le label pour faire le lien entre la checkbox et l'icône burger. Toucher l'icône reviendra à cocher la checkbox. L'id de l'input sera ensuite utilisée pour tester l'état de la checkbox. Dans le html bien saisir le nav correspondant juste en-dessous pour le bon fonctionnement en css. */

   #menu{
      width: 290px;
   }

   /* Affichage de l'icône Burger */
   #icone_burger{
      display: block;
      position: fixed;
      top: 0;
      z-index: 98;
   }
   #image_burger{
      filter: drop-shadow(3px 3px 3px blue);
   }
   #image_burger:hover{
      cursor: pointer;
      filter: brightness(1.5);
   }
   #menu_checkbox:checked ~ nav{
      position: absolute;
      z-index: 97;
   }
   #menu_checkbox:checked ~ nav li:not(:first-of-type){
   display: block;
   }

   /*  Au toucher d'un item le menu est masqué par appel d'une fonction javascript commune. La classe menuOff est la classe par défaut de l'ul du menu donc l'ul est masqué. Le JS bascule la classe en menuOn puis inversement. */
   .menuOff{
      display: none;
   }
   .menuOn{
      display: block;
      /* Force l'organisation verticale des items */
   }

   nav li{
      height: 53px;
      font-size: 19px;
   }
   nav li:first-of-type{
      justify-content: right;
   }
   #ordi_qui_rame{
      width: 100%;
      max-width: 640px;
   }
   #fleuve{
      width: 100%;
      max-width: 400px;
   }

}

/* Sur smartphone ou tablette en orientation paysage on réduit la hauteur du menu vertical pour qu'il ne soit pas tronqué */
@media (max-width: 850px) and (orientation: landscape){
   
   nav li{
      height: 34px;
      font-size: 18px;
   }
}