/*height: hauteur width: largeur 350 px */
/* margin  (taille de la marge extérieure) padding  (taille de la marge intérieure 50px).*/
/* em {color: .. ; font-weight: taille de la police}  rgb(4, 133, 32)  darkcyan */
/* container (dnas div class) display:flex 
    flex-direction: row ou column 
    flew-wrap: wrap (si plus de place, aller à la ligne)
    justify-content: (flex-sart center ou space-around ou between) aligné sur l'axe principal
    align-items (axe secondaire) 
    align-content: comment les lignes se repartissent entre elles*/
/* */

body {background-color: darkcyan;}
footer {background-color: white;}
p {font-size: 1.1em; font-family: "Public Sans", sans-serif; color: #F9F8FF; margin-left: 200px; text-align: justify; width: 400px;}
h1 {font-size: 3.5em; color: white; font-style: oblique; text-align: center; padding: 100px;margin: auto;
    font-family: "Public Sans", sans-serif;
    background-attachment: fixed; background-size: over; border: 10px;}
h2 {font-size: 2em; color: black;
    text-align: center; font-family: "League Gothic", sans-serif;}
h3 {text-align: center; font-family: "League Gothic", sans-serif; font-size:x-large}
ul {font-size: 1em; font-family: "Public Sans", sans-serif; color: #F9F8FF; margin-left: 200px; text-align: justify; padding: auto;}
a {  color: #242424;  text-decoration: none; }
em {color: rgb(2, 2, 2); font-weight: 900;} /*choisir un mot, 1er page */
.contacter {text-align: left;} 

nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between; background-color: white;
}
nav a {  margin-left: 30px; font-size: 1.em;}

a:hover {color: rgb(43, 20, 255); text-decoration: underline;}
img:hover {opacity: 0.5;} 
a:active {text-decoration-color: rgb(255, 0, 0) ;}
a:focus {background-color: #242424; color: white; }
.degrade:hover {opacity: 0.5;}
.titre-portfolio {background-color:  darkcyan;}
.accueil-intro {background-color:  darkcyan;  text-justify: auto ; margin-right: 200px;margin-left: 200px; }
.lien-icone {background-color: white;color: #242424; flex-wrap: wrap;
    display: flex; flex-direction: row; justify-content: flex-end; gap: 20px; font-size: 1.2em;} /* logo insta */

.cta { background-color: rgba(17, 144, 68, 0.922); color: white; text-align: center; width: 18%;
         font-family: "Public Sans", sans-serif;
            border: solid 2px black; border-radius: 30px; margin:auto;
        font-size: 25px; display: flex; justify-content: center;  padding: 10px;}

.ligne-services {background-color:  darkcyan; margin-left: 400px; margin-right: 400px;
    border-bottom: 2.2px black solid; border-right: 2.2px black solid; }
.logoaccueil { display: flex; justify-content: flex-end;}
.portfolio {background-color: white; color: black;}
.accueil-photo {background-color: white;}

input {padding: 10px; border: 1px, solid, black; display: flex; flex-direction: row;}
textarea {width: 600px ;height:200px ;}

.container { display: grid;
  gap: 15px;
  justify-content: center;
justify-items: center;
margin-left: auto;
  margin-right: auto;
}

.ligne1 {  grid-template-columns: repeat(4, 200px); }

.ligne2 {  grid-template-columns: repeat(3, 200px); }

.ligne3 {  grid-template-columns: repeat(6, 200px); }



.photo {max-width: 200px;
    height: auto;
    display: block;  }

.photo img { 
    object-fit: cover; 
    justify-items: center;
  width: 100%;         
  height: auto;
  display: block; 
border: 2px solid black;
  border-radius: 5px;}


/* display: flex; flex-wrap: wrap; justify-content: space-between; }*/
/* pour mettre une image en fond:     background-image: url(../paysages/element-1.png);
photo : max-width: 250px;
    height: auto;
    display: block;  */


    /* --- VERSION MOBILE --- */
@media (max-width: 768px) {

  /* Texte */
  p, ul {
    margin-left: 0;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
  }

  /* Section d'accueil */
  .accueil-intro {
    margin-left: 0;
    margin-right: 0;
    padding: 15px;
  }

  /* Bouton CTA */
  .cta {
    width: 80%;
    font-size: 20px;
  }

  /* Galerie photos */
  .container {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .photo {
    max-width: 100%;
  }

  /* Formulaire */
  textarea,
  input {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  fieldset {
    padding: 10px;
  }

  /* Header */
  nav {
    flex-direction: column;
    gap: 10px;
  }

  nav a {
    margin-left: 0;
    font-size: 1.2em;
  }

  nav div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* Logo accueil */
  .logoaccueil {
    justify-content: center;
  }

  .logoaccueil img {
    max-width: 70%;
  }
}

/* --- RESPONSIVE PAGE A PROPOS --- */
@media (max-width: 768px) {

  /* Conteneur principal */
  .ligne-services {
    margin-left: 0;
    margin-right: 0;
    padding: 15px;
    box-sizing: border-box;
  }

  /* Titres */
  h1 {
    padding: 40px 10px;
    font-size: 2.2em;
  }

  /* Paragraphes */
  p {
    margin-left: 0;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
  }

  /* Listes */
  ul {
    margin-left: 0;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* Bouton CTA */
  .cta {
    width: 80%;
    font-size: 20px;
    padding: 12px;
    margin: 20px auto;
    display: block;
    text-align: center;
  }
}

/* --- RESPONSIVE GLOBAL --- */
@media (max-width: 768px) {

  /* Paragraphes */
  p {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 15px;
    box-sizing: border-box;
  }

  /* Listes */
  ul {
    margin-left: 0 !important;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* Section A propos */
  .ligne-services {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 15px;
    box-sizing: border-box;
  }

  /* Titre */
  h1 {
    padding: 40px 10px !important;
    font-size: 2.2em !important;
  }

  /* Bouton CTA */
  .cta {
    width: 80% !important;
    font-size: 20px !important;
    padding: 12px;
    margin: 20px auto;
    display: block;
    text-align: center;
  }

  /* Formulaire */
  textarea,
  input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Header */
  nav {
    flex-direction: column !important;
    gap: 10px;
  }

  nav div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  nav a {
    margin-left: 0 !important;
  }
}