@import url("https://fonts.googleapis.com/css?family=Nunito&display=swap");
/* ================== Reset CSS ================== */

  html {
    margin: 0;
    padding: 0;
    font-size: 10px;
    font-family: "Nunito", sans-serif;
  }

  body {
    margin: 0;
    padding: 0;
  }

 /* ================== For the DESKTOP VERSION ==================  */

  /* ================== For the index.html page ==================  */

  .content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(1rem, auto);
    grid-template-areas:
      "header nav nav "
      "hr hr hr"
      "aside section section "
      "hrFooter hrFooter hrFooter"
      "footer footer footer";
    grid-column-gap: 3rem;
    grid-row-gap: 4rem;
    font-size: 1.5rem;
    background-color: #f2594b;
  }

  /* ================== Style for the HEADER and the MENU ==================  */

  header {
    grid-area: header;
    justify-self: left;
  }

  nav {
    grid-area: nav;
  }

  .menu {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "accueil disciplines horaires contact propos urgence";
    text-align: center;
    padding-top: 8rem;
    color: #f2e1ac;
  }

  li {
    list-style: none;
  }

  li a {
    text-decoration: none;
    color: #f2e1ac;
  }

  .Accueil {
    grid-area: accueil;
  }

  .Disciplines {
    grid-area: disciplines;
  }

  .Horaires {
    grid-area: horaires;
  }

  .Contact {
    grid-area: contact;
  }

  .Propos {
    grid-area: propos;
  }

  .Urgence {
    grid-area: urgence;
  }

  /* ================== Style for a  horizontal demarcation between the HEADER / MENU and ASIDE and SECTION part ==================  */

  hr {
    grid-area: hr;
    width: 100%;
    border: .25rem solid #f2e1ac;
  }

  /* ================== Style for the ASIDE ==================  */

  aside {
    grid-area: aside;
    border: .5rem solid #f2836b;
    color: #f2e1ac;
  }

  .h2Aside,
  .texteAside {
    padding-left: 2rem;
  }

  /* ================== Style for the SECTION ==================  */

  section {
    grid-area: section;
    border: .5rem solid #f2836b;
    color: #f2e1ac;
  }

  .h2Section,
  .texteSection {
    padding-left: 2rem;
    text-align: center;
  }

  /* ================== Style for a  horizontal demarcation between the FOOTER and ASIDE and SECTION part ==================  */

  .hrBeforeFooter {
    grid-area: hrFooter;
    border: .25rem solid #f2e1ac;
  }

  /* ================== Style for the FOOTER ==================  */

  .footer {
    grid-area: footer;
    justify-self: center;
    padding-bottom: 4rem;
  }

  .footer a {
    text-decoration: none;
    color: #f2e1ac;
  }

  /* ================== For the nosDisciplines.html page ================== */

  .contentDisciplines {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(1rem, auto);
    grid-template-areas:
      "header nav nav nav "
      "hr hr hr hr"
      "sectionMG sectionMG asideMG asideMG"
      "sectionOphtalmo sectionOphtalmo asideOphtalmo asideOphtalmo"
      "hrFooter hrFooter hrFooter hrFooter"
      "footer footer footer footer";
    grid-column-gap: 3rem;
    grid-row-gap: 4rem;
    font-size: 1.5rem;
    background-color: #f2594b;
  }

  /* ================== Style for the SECTIONS ==================  */

  .sectionMGénérale {
    grid-area: sectionMG;
  }

  .sectionOphtalmo {
    grid-area: sectionOphtalmo;
  }

  .h2Section, .texteSection {
    padding-left: 2rem;
    text-align: center;
  }

  /* ================== Style for the ASIDES ==================  */

  .asideMGénérale {
    grid-area: asideMG;
  }

  .asideOphtalmo {
    grid-area: asideOphtalmo;
  }

  .h2Aside,
  .texteAside {
    padding-left: 2rem;
    text-align: center;
  }
  h2 a {
    text-decoration: none;
    color: #f2e1ac;
  }

  /* ================== For the horaires.html page ================== */

  .contentHoraires {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(1rem, auto);
    grid-template-areas:
      "header nav nav nav "
      "hr hr hr hr"
      "horaireMG horaireMG horaireOphtalmo horaireOphtalmo"
      "hrFooter hrFooter hrFooter hrFooter"
      "footer footer footer footer";
    grid-column-gap: 3rem;
    grid-row-gap: 4rem;
    font-size: 1.5rem;
    background-color: #f2594b;
  }

  /* ================== For each SECTION ================== */

  .horairesMG {
    grid-area: horaireMG;
  }

  .horairesOphtalmo {
    grid-area: horaireOphtalmo;
  }

  /* ================== For each H2 ================== */

  .titreHoraire {
    text-align: center;
    text-decoration: underline;
  }

  /* ================== For each FIGURE ================== */

  .imagesService {
    text-align: center;
  }

  /* ================== For the horairesMGénérale.html page ================== */

  .contentHorairesMGénérale {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(1rem, auto);
    grid-template-areas:
      "header nav nav "
      "hr hr hr"
      "sectionDeniger sectionDeniger sectionDeniger"
      "sectionDupuis sectionDupuis sectionDupuis"
      "sectionAuthier sectionAuthier sectionAuthier"
      "hrFooter hrFooter hrFooter"
      "footer footer footer";
    grid-column-gap: 3rem;
    grid-row-gap: 4rem;
    font-size: 1.5rem;
    background-color: #f2594b;
  }

  /* ================== Style for each SECTION ================== */

  .sectionDeniger {
    grid-area: sectionDeniger;
  }

  .sectionDupuis {
    grid-area: sectionDupuis;
  }

  .sectionAuthier {
    grid-area: sectionAuthier;
  }

  .sectionTitle {
    text-align: center;
  }

  h3 {
    text-align: center;
    text-decoration: underline;
  }

  section p {
    text-align: center;
    font-weight: bold;
  }

  /* ================== Style for each FIGURE ================== */

  .photoDr {
    text-align: center;
  }

  .icons {
    text-align: center;
  }

  /* ================== For the horairesOphtalmo.html page ================== */

  .contentHorairesOphtalmo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(1rem, auto);
    grid-template-areas:
      "header nav nav "
      "hr hr hr"
      "sectionBonneville sectionBonneville sectionBonneville"
      "sectionRoux sectionRoux sectionRoux"
      "sectionHoang sectionHoang sectionHoang"
      "hrFooter hrFooter hrFooter"
      "footer footer footer";
    grid-column-gap: 3rem;
    grid-row-gap: 4rem;
    font-size: 1.5rem;
    background-color: #f2594b;
  }

  /* ================== Style for each SECTION ================== */

  .sectionBonneville {
    grid-area: sectionBonneville;
  }

  .sectionRoux {
    grid-area: sectionRoux;
  }

  .sectionHoang {
    grid-area: sectionHoang;
  }

  /* ================== For the contact.html page ================== */

  .contentContact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(1rem, auto);
    grid-template-areas:
      "header nav nav "
      "hr hr hr"
      "Formulaire Formulaire Formulaire"
      "Map Map Map"
      "hrFooter hrFooter hrFooter"
      "footer footer footer";
    grid-column-gap: 3rem;
    grid-row-gap: 4rem;
    font-size: 1.5rem;
    background-color: #f2594b;
  }

  /* ================== Style for each SECTION ================== */
  .sectionFormulaire {
    grid-area: Formulaire;
  }

  .sectionMAP {
    grid-area: Map;
  }

  .map {
    width: 100%;
  }

  /* ================== For the FORM ================== */

  form {
    text-align: center;
    color: #f2e1ac;
  }

  /* ================== For the àpropos.html page ================== */

  .contentàpropos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(1rem, auto);
    grid-template-areas:
      "header nav nav "
      "hr hr hr"
      "sectionQui sectionQui sectionQui"
      "figureCMedical figureCMedical figureCMedical"
      "sectionQue sectionQue sectionQue"
      "hrFooter hrFooter hrFooter"
      "footer footer footer";
    grid-column-gap: 3rem;
    grid-row-gap: 4rem;
    font-size: 1.5rem;
    background-color: #f2594b;
  }

  /* ================== Style for each SECTION ================== */

  .sectionQuiSommes {
    grid-area: sectionQui;
  }

  .sectionQueFaisons {
    grid-area: sectionQue;
  }

  .paragraphàPropos {
    padding: 2rem;
    text-align: center;
  }

  /* ================== Style for FIGURE ================== */

  .figureCabinetMedical {
    grid-area: figureCMedical;
    text-align: center;
  }

  /* ================== For the urgence.html page ================== */

  .contentUrgence {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(1rem, auto);
    grid-template-areas:
      "header nav nav "
      "hr hr hr"
      "sectionPerm sectionPerm sectionPerm"
      "sectionNum sectionNum sectionNum"
      "hrFooter hrFooter hrFooter"
      "footer footer footer";
    grid-column-gap: 3rem;
    grid-row-gap: 4rem;
    font-size: 1.5rem;
    background-color: #f2594b;
  }

  /* ================== Style for each SECTION ================== */

  .sectionPermanence {
    grid-area: sectionPerm;
  }

  .sectionNumUtiles {
    grid-area: sectionNum;
  }

  /* ================== Style for each H2 ================== */

  .titlePermanence,
  .titleNumUtiles {
    text-align: center;
    text-decoration: underline;
  }

  /* ================== Style for each TABLE ================== */

  .tablePermanence,
  .tableNumUtiles {
    margin: auto;
    margin-bottom: 1.5rem;
    width: 50%;
    border: .35rem solid #f2e1ac;
  }

  td,
  tr {
    border: .25rem solid #f2e1ac;
    text-align: center;
  }

  .tdfooter {
    text-align: center;
  }

  .tdfooter a {
    text-decoration: none;
    color: #f2e1ac;
  }

/* ================== MEDIA QUERIES FOR SMARTPHONE IN PORTRAIT MODE ================== */

  @media screen and (max-width: 760px){

  /* ================== For the index.html page ==================  */
    
    .content {
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: minmax(1rem, auto);
      grid-template-areas:
      "header"
      "nav"
      "hr"
      "section"
      "aside"
      "hrFooter"
      "footer";
      grid-row-gap: 2rem;
      font-size: 1.25rem;
      background-color: #f2594b;
      }

  /* ================== For the nosDisciplines.html page ================== */

    .contentDisciplines {
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: minmax(1rem, auto);
      grid-template-areas:
        "header"
        "nav"
        "hr"
        "sectionMG"
        "asideMG"
        "sectionOphtalmo"
        "asideOphtalmo"
        "hrFooter"
        "footer";
      grid-row-gap: 2rem;
      font-size: 1.25rem;
      background-color: #f2594b;
    }

  /* ================== For the horaires.html page ================== */

    .contentHoraires {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: minmax(1rem, auto);
      grid-template-areas:
        "header header"
        "nav nav"
        "hr hr"
        "horaireMG horaireMG"
        "horaireOphtalmo horaireOphtalmo"
        "hrFooter hrFooter"
        "footer footer";
      grid-row-gap: 2rem;
      font-size: 1.25em;
      background-color: #f2594b;
    }

    /* ================== For the horairesMGénérale.html page ================== */

    .contentHorairesMGénérale {
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: minmax(1rem, auto);
      grid-template-areas:
        "header"
        "nav"
        "hr"
        "sectionDeniger"
        "sectionDupuis"
        "sectionAuthier"
        "hrFooter"
        "footer";
      grid-row-gap: 2rem;
      font-size: 1.25rem;
      background-color: #f2594b;
  }

    /* ================== For the horairesOphtalmo.html page ================== */

    .contentHorairesOphtalmo {
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: minmax(1rem, auto);
      grid-template-areas:
        "header"
        "nav"
        "hr"
        "sectionBonneville"
        "sectionRoux"
        "sectionHoang"
        "hrFooter"
        "footer";
      grid-row-gap: 2rem;
      font-size: 1.25rem;
      background-color: #f2594b;
  }

    /* ================== Style for each FIGURE of horairesMGénérale.html and horairesOphtalmo.html ================== */

    .photoDr {
      display: none;      
    }

  /* ================== For the contact.html page ================== */

    .contentContact {
      display: grid;
      grid-template-columns: fr;
      grid-auto-rows: minmax(1rem, auto);
      grid-template-areas:
        "header"
        "nav"
        "hr"
        "Formulaire"
        "Map"
        "hrFooter"
        "footer";
      grid-row-gap: 2rem;
      font-size: 1.25rem;
      background-color: #f2594b;
    }

   /* ================== For the àpropos.html page ================== */

    .contentàpropos {
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: minmax(1rem, auto);
      grid-template-areas:
        "header"
        "nav"
        "hr"
        "sectionQui"
        "sectionQue"
        "hrFooter"
        "footer";
      grid-row-gap: 2rem;
      font-size: 1.25rem;
      background-color: #f2594b;
  }

  .figureCabinetMedical{
    display: none;
  }

  /* ================== For the urgence.html page ================== */

    .contentUrgence {
      display: grid;
      grid-template-columns:  1fr;
      grid-auto-rows: minmax(1rem, auto);
      grid-template-areas:
        "header"
        "nav"
        "hr"
        "sectionPerm"
        "sectionNum"
        "hrFooter"
        "footer";
      grid-row-gap: 2rem;
      font-size: 1.25rem;
      background-color: #f2594b;
  }

  }
    
/* ================== MEDIA QUERIES FOR TABLET IN PORTRAIT MODE ================== */

@media screen and (min-width: 760px) and (max-width: 1050px){

  .figureCabinetMedical{
    display: none;
  }

}