@media screen and (max-width:768px){
  div.container{ display:grid;grid-template-rows:auto;grid-template-columns:0.5vw 1fr 3fr 0.5vw;
  grid-template-areas:". zero zero . " ". un trois . " ". deux trois . " ". quatre quatre . ";
  grid-gap:0.4em 0.3em;}
  body{ background-color:lightgray;color:blue;font-size:2.20vw;}
  header{grid-area:zero; background-color:lavender;color:blue;text-align:center;font-family:"Times New Roman";font-size:1.2em;border:4px double red;padding:0.5em;}
  div.gros{grid-area:trois; background-color:lavender;color:blue;font-size:1.0em;text-align:justify;border:2px solid blue;height:auto;padding:1%;font-family:"Times New Roman";margin-top:0%;}
  aside.prem{grid-area:un;background-color:lavender;text-align:center;font-size:1.0em;line-height:1.25em;border:2px solid blue;padding:5px;color:blue;font-family:"Times New Roman";}
  nav.bas{grid-area:deux;background-color:lavender;height:auto;font-size:1.20em;display:block;border:2px solid blue;padding:2px;text-align:left;color:blue;font-family:"Times New Roman"; }
  footer.enbas{grid-area:quatre;padding:3px;text-align:center;height:auto;background-color:lavender;color:blue;border:4px double red;width:99.0%;font-size:1.2em;font-family:"Times New Roman";}
  div.arch1{ background-color:#E0FFFF;color:blue;width:60%;font-size:20px;text-align:justify;border:2px solid blue;
  margin-top:0%;height:auto;padding:20px;float:left;}
  aside.page{background-color:#E0FFFF;width:32%;display:block;height:auto;float:right;text-align:left;font-size:20px;
  border:2px solid blue;padding:5px;color:blue;margin-top:100px;margin-left:0%}
  h1{padding:10px;border:5px double red;font-size:1em;font-family:"Times New Roman"; }
  h2{ text-align:center;width:50%;border:3px double red;margin-left:25%;background-color:yellow;color:#00008B;border-radius:1em;font-size:1.0em;}
  h2.dist{text-align:center;width:40%;border:3px double red;margin-left:19%;background-color:yellow;color:#00008B;border-radius:1em;margin-top:10%;}
  h2.mamy{ text-align:center;width:80%;border:3px double red;margin-left:12%;background-color:yellow;color:#00008B;border-radius:1em;}
  h2.mom{text-align:center;width:80%;border:3px double red;margin-left:12%;background-color:yellow;color:#00008B;font-size:1.0em;}
  h2.tuto{text-align:center;width:38%;border:3px double red;margin-left:25%;background-color:yellow;color:#00008B;border-radius:1em;margin-top:5%;font-size:1.2em;}
  h2.papy{text-align:center;width:84%;border:2px solid red;margin-left:9%;background-color:yellow;color:#00008B;border-radius:1em;  }
  h3{text-align:center;width:50%;border:3px double red;margin-left:20%;background-color:yellow;color:#00008B;border-radius:1em;margin-top:4%;}
  p{padding:8px;font-size:1.2em;color:darkblue;margin-left:20%;text-align:justify;line-height:1.0em;}
  p.bref{padding:8px;font-size:1.0em;color:darkblue;margin-left:5%;text-align:justify;margin-bottom:1%;line-height:1.8em;font-family:"Times New Roman";}
  p.page{padding:8px;font-size:1.0em;color:darkblue;margin-left:5%;text-align:justify;line-height:1.8em;font-family:"Times New Roman";margin-top:3%; }
  p.bord{font-size:1.0em;color:darkblue;text-align:left;margin-left:1%;padding:8px;margin-top:0%;}
  footer{ padding:3px;text-align:center;margin:auto;background-color:#E0FFFF;border:2px double red;font-size:1.2em;width:95%;height:auto;}
  img{float:left;max-width:100%;margin-right:1%;height:44px;width:71px;}
  img.logo2{border:0;width:100px;height:25px;float:none;max-width:100%;margin:auto;}
  img.draw{ float:right;margin-left:0%;border-radius:1em;margin-bottom:15px;}
  nav.arch1{background-color:#FAFAD2;width:50%;height:60%;margin-top:30px;margin-left:12%;display:block;float:left;font-size:20px;
  border:2px solid blue;padding:2px;text-align:left;color:darkblue }
  nav.arch2{background-color:#FAFAD2;width:25%;height:60%;margin-left:3%;display:block;font-size:20px;margin-top:30px;
  border:2px solid blue;padding:2px;text-align:left;color:darkblue;float:left; }
  a:link{color:blue;}
  a:visited{color:green}
  a{text-decoration:none}
  a.papa{margin-left:16%;color:#00008B;background-color:yellow;font-size:1em;font-family:"Times New Roman";}
  a.papy{margin-left:7%;color:#00008B;background-color:rgba(255,255,0,0.8);font-size:1.0em;}
  a.mamy{margin-left:0%;color:#00008B;background-color:rgba(255,255,0,0.8);font-size:1.0em;}
  a.juju{color:#00008B;background-color:rgba(255,255,0,0.8);font-size:1.0em;}
  a.julot{color:#00008B;background-color:rgba(255,255,0,0.8);font-size:1.0em;margin-left:30%;}
  nav.page{background-color:#E0FFFF;width:70%;height:auto;margin-top:5%;margin-left:15%;display:block;float:left;font-size:1.0em;
  border:2px solid blue;padding:5px;text-align:left;color:#00008B;line-height:2em;border-radius:1em; }
  a:hover{background-color:#00008B;color:yellow;}
  a.secu:hover{background-color:white;color:green;}
  h2:hover{background-color:#00008B;color:yellow; }
  h3:hover{background-color:#00008B;color:yellow;}
  img:hover{transform:scale(2,2);}
  li{line-height:5em;color:darkblue;margin-left:1%;font-size:1.3em;font-family:"Times New Roman";}
  li.vid{margin-left:32%;line-height:2em;text-align:left;font-size:1.0em;color:#00008B;}
  li.moi{line-height:3.5em;color:darkblue;margin-left:1%;font-size:1.0em;font-family:"Times New Roman";}
  mark.choix{background-color:rgba(255,255,0,0.8);}
  audio{margin-left:36% }
  hr{text-align:center;color:red;height:1px;}
  header:hover{animation:mon-animation 4s linear 0.3s;animation-iteration-count:1;}
  @keyframes mon-animation{ from {font-size:2em;}  to {font-size:3em; } }
  }
  @media screen and (min-width:768px){
  div.container{ display:grid;grid-template-rows:auto;grid-template-columns:0.5vw 1fr 3fr 0.5vw;
  grid-template-areas:". zero zero . " ". un trois . " ". deux trois . " ". quatre quatre . ";
  grid-gap:0.4em 0.3em;}
  body{ background-color:lightgray;color:blue;font-size:2.20vw;}
  header{grid-area:zero; background-color:lavender;color:blue;text-align:center;font-family:"Times New Roman";font-size:1.2em;border:4px double red;padding:0.5em;}
  div.gros{grid-area:trois; background-color:lavender;color:blue;font-size:1.0em;text-align:justify;border:2px solid blue;height:auto;padding:1%;font-family:"Times New Roman";margin-top:0%;}
  aside.prem{grid-area:un;background-color:lavender;text-align:center;font-size:1.0em;line-height:1.25em;border:2px solid blue;padding:5px;color:blue;font-family:"Times New Roman";}
  nav.bas{grid-area:deux;background-color:lavender;height:auto;font-size:1.0em;display:block;border:2px solid blue;padding:2px;text-align:left;color:blue;font-family:"Times New Roman"; }
  footer.enbas{grid-area:quatre;padding:3px;text-align:center;height:auto;background-color:lavender;color:blue;border:4px double red;width:99.0%;font-size:1.2em;font-family:"Times New Roman";}
  div.arch1{ background-color:#E0FFFF;color:blue;width:60%;font-size:20px;text-align:justify;border:2px solid blue;
  margin-top:0%;height:auto;padding:20px;float:left;}
  aside.page{background-color:#E0FFFF;width:32%;display:block;height:auto;float:right;text-align:left;font-size:20px;
  border:2px solid blue;padding:5px;color:blue;margin-top:100px;margin-left:0%}
  h1{padding:10px;border:5px double red;font-size:1em;font-family:"Times New Roman"; }
  h2{ text-align:center;width:50%;border:3px double red;margin-left:25%;background-color:yellow;color:#00008B;border-radius:1em;font-size:1.0em;}
  h2.dist{text-align:center;width:40%;border:3px double red;margin-left:19%;background-color:yellow;color:#00008B;border-radius:1em;margin-top:10%;}
  h2.mamy{ text-align:center;width:80%;border:3px double red;margin-left:12%;background-color:yellow;color:#00008B;border-radius:1em;}
  h2.mom{text-align:center;width:80%;border:3px double red;margin-left:12%;background-color:yellow;color:#00008B;font-size:1.0em;}
  h2.tuto{text-align:center;width:38%;border:3px double red;margin-left:25%;background-color:yellow;color:#00008B;border-radius:1em;margin-top:5%;font-size:1.2em;}
  h2.papy{text-align:center;width:83%;border:2px solid red;margin-left:9%;background-color:yellow;color:#00008B;border-radius:1em;  }
  h3{text-align:center;width:50%;border:3px double red;margin-left:20%;background-color:yellow;color:#00008B;border-radius:1em;margin-top:4%;}
  p{padding:8px;font-size:1.2em;color:darkblue;margin-left:20%;text-align:justify;line-height:1.0em;}
  p.bref{padding:8px;font-size:1.0em;color:darkblue;margin-left:5%;text-align:justify;margin-bottom:1%;line-height:1.8em;font-family:"Times New Roman";}
  p.page{padding:8px;font-size:1.0em;color:darkblue;margin-left:5%;text-align:justify;line-height:1.8em;font-family:"Times New Roman"; }
  p.bord{font-size:1.0em;color:darkblue;text-align:left;margin-left:1%;padding:8px;}
  footer{ padding:3px;text-align:center;margin:auto;background-color:#E0FFFF;border:2px double red;font-size:1.2em;width:95%;height:auto;}
  img{float:left;max-width:100%;margin-right:1%;height:67px; width:107px;}
  img.logo2{border:0;width:100px;height:25px;float:none;max-width:100%;margin:auto;}
  img.draw{ float:right;margin-left:0%;border-radius:1em;margin-bottom:15px;}
  nav.arch1{background-color:#FAFAD2;width:50%;height:60%;margin-top:30px;margin-left:12%;display:block;float:left;font-size:20px;
  border:2px solid blue;padding:2px;text-align:left;color:darkblue }
  nav.arch2{background-color:#FAFAD2;width:25%;height:60%;margin-left:3%;display:block;font-size:20px;margin-top:30px;
  border:2px solid blue;padding:2px;text-align:left;color:darkblue;float:left; }
  a:link{color:blue;}
  a:visited{color:green}
  a{text-decoration:none}
  a.papa{margin-left:16%;color:#00008B;background-color:yellow;font-size:1em;font-family:"Times New Roman";}
  a.papy{margin-left:7%;color:#00008B;background-color:rgba(255,255,0,0.8);font-size:1.0em;}
  a.mamy{margin-left:0%;color:#00008B;background-color:rgba(255,255,0,0.8);font-size:1.0em;}
  a.juju{color:#00008B;background-color:rgba(255,255,0,0.8);font-size:1.0em;}
  a.julot{color:#00008B;background-color:rgba(255,255,0,0.8);font-size:1.0em;margin-left:30%;}
  nav.page{background-color:#E0FFFF;width:70%;height:auto;margin-top:5%;margin-left:15%;display:block;float:left;font-size:1.0em;
  border:2px solid blue;padding:5px;text-align:left;color:#00008B;line-height:2em;border-radius:1em; }
  a:hover{background-color:#00008B;color:yellow;}
  a.secu:hover{background-color:white;color:green;}
  h2:hover{background-color:#00008B;color:yellow; }
  h3:hover{background-color:#00008B;color:yellow;}
  img:hover{transform:scale(2,2);}
  li{line-height:1em;color:darkblue;margin-left:1%;font-size:1.3em;font-family:"Times New Roman";}
  li.vid{margin-left:32%;line-height:2em;text-align:left;font-size:1.0em;color:#00008B;}
  li.moi{line-height:3.5em;color:darkblue;margin-left:5%;font-size:1.0em;font-family:"Times New Roman";}
  mark.choix{background-color:rgba(0,255,0,0.7);}
  audio{margin-left:36% }
  hr{text-align:center;color:red;height:1px;}
  header:hover{animation:mon-animation 4s linear 0.3s;animation-iteration-count:1;}
  @keyframes mon-animation{ from {font-size:2em;} to {font-size:3em; } }
  }
  @media only screen and (min-width:1024px){
  div.container{ display:grid;grid-template-rows:auto;grid-template-columns:0.5vw 1fr 3fr 0.5vw;
  grid-template-areas:". zero zero . " ". un trois . "  ". deux trois . " ". quatre quatre . ";
  grid-gap:0.4em 0.3em;}
  body{ background-color:lightgray;color:blue;font-size:1.25vw;font-family:"Times New Roman";}
  header{grid-area:zero; background-color:lightyellow;color:blue;text-align:center;font-family:"Times New Roman";font-size:1.2em;border:4px double red;padding:0.5em;}
  div.gros{grid-area:trois; background-color:wheat;color:blue;font-size:1.0em;text-align:justify;border:2px solid blue;height:auto;padding:1%;font-family:"Times New Roman";margin-top:0%;}
  aside.prem{grid-area:un;background-color:wheat;text-align:center;font-size:1.0em;line-height:1.25em;border:2px solid blue;padding:5px;color:blue;font-family:"Times New Roman";}
  nav.bas{grid-area:deux;background-color:wheat;height:auto;font-size:1.0em;display:block;border:2px solid blue;padding:2px;text-align:left;color:blue;font-family:"Times New Roman"; }
  footer.enbas{grid-area:quatre;padding:3px;text-align:center;height:auto;background-color:lightyellow;color:blue;border:4px double red;width:99.0%;font-size:1.2em;font-family:"Times New Roman";}
  div.arch1{ background-color:#E0FFFF;color:blue;width:60%;font-size:20px;text-align:justify;border:2px solid blue;
  margin-top:0%;height:auto;padding:20px;float:left;}
  aside.page{background-color:#E0FFFF;width:32%;display:block;height:auto;float:right;text-align:left;font-size:20px;
  border:2px solid blue;padding:5px;color:blue;margin-top:100px;margin-left:0%}
  h1{padding:10px;border:5px double red;font-size:1em;font-family:"Times New Roman"; }
  h2{ text-align:center;width:50%;border:3px double red;margin-left:25%;background-color:yellow;color:#00008B;border-radius:1em;font-size:1.0em;}
  h2.dist{text-align:center;width:40%;border:3px double red;margin-left:19%;background-color:yellow;color:#00008B;border-radius:1em;margin-top:10%;}
  h2.mamy{ text-align:center;width:80%;border:3px double red;margin-left:12%;background-color:yellow;color:#00008B;border-radius:1em;}
  h2.papy{text-align:center;width:80%;border:3px double red;margin-left:9%;background-color:yellow;color:#00008B;border-radius:1em;  }
  h2.mom{text-align:center;width:80%;border:3px double red;margin-left:12%;background-color:yellow;color:#00008B;font-size:1.0em;}
  h2.tuto{text-align:center;width:38%;border:3px double red;margin-left:25%;background-color:yellow;color:#00008B;border-radius:1em;margin-top:5%;font-size:1.2em;}
  h3{text-align:center;width:50%;border:3px double red;margin-left:20%;background-color:yellow;color:#00008B;border-radius:1em;margin-top:4%;}
  p{padding:8px;font-size:1.2em;color:darkblue;margin-left:20%;text-align:justify;line-height:1.0em;}
  p.bref{padding:8px;font-size:1.0em;color:darkblue;margin-left:5%;text-align:justify;margin-bottom:1%;line-height:1.8em;font-family:"Times New Roman";}
  p.page{padding:1em;font-size:1.0em;color:darkblue;margin-left:3em;text-align:justify;line-height:1.8em;font-family:"Times New Roman"; }
  p.bord{font-size:1.0em;color:darkblue;text-align:left;margin-left:1%;padding:8px;}
  footer{ padding:3px;text-align:center;margin:auto;background-color:#E0FFFF;border:2px double red;font-size:1.2em;width:95%;height:auto;}
  img{float:left;max-width:100%;margin-right:1%;height:100px; width:160px;}
  img.logo2{border:0;width:100px;height:25px;float:right;max-width:100%;margin:auto;}
  img.draw{ float:left;border-radius:1em;margin:auto;}
  nav.arch1{background-color:#FAFAD2;width:50%;height:60%;margin-top:30px;margin-left:12%;display:block;float:left;font-size:20px;
  border:2px solid blue;padding:2px;text-align:left;color:darkblue }
  nav.arch2{background-color:#FAFAD2;width:25%;height:60%;margin-left:3%;display:block;font-size:20px;margin-top:30px;
  border:2px solid blue;padding:2px;text-align:left;color:darkblue;float:left; }
  a:link{color:blue;}
  a:visited{color:green}
  a{text-decoration:none}
  a.papa{margin-left:16%;color:#00008B;background-color:yellow;font-size:1em;font-family:"Times New Roman";}
  a.papy{margin-left:7%;color:#00008B;background-color:rgba(255,255,0,0.8);font-size:1.0em;}
  a.mamy{margin-left:0%;color:#00008B;background-color:rgba(255,255,0,0.8);font-size:1.0em;}
  a.juju{color:#00008B;background-color:rgba(255,255,0,0.8);font-size:1.0em;}
  a.julot{color:#00008B;background-color:rgba(255,255,0,0.8);font-size:1.0em;margin-left:30%;}
  nav.page{background-color:#E0FFFF;width:70%;height:auto;margin-top:5%;margin-left:15%;display:block;float:left;font-size:1.0em;
  border:2px solid blue;padding:5px;text-align:left;color:#00008B;line-height:2em;border-radius:1em; }
  a:hover{background-color:#00008B;color:yellow;}
  a.secu:hover{background-color:white;color:green;}
  h2:hover{background-color:#00008B;color:yellow; }
  h3:hover{background-color:#00008B;color:yellow;}
  img:hover{transform:scale(2,2);}
  li{line-height:1em;color:darkblue;margin-left:1%;font-size:1.3em;font-family:"Times New Roman";}
  li.vid{margin-left:32%;line-height:2em;text-align:left;font-size:1.0em;color:#00008B;}
  li.moi{line-height:3.5em;color:darkblue;margin-left:5%;font-size:1.0em;font-family:"Times New Roman";}
  mark.choix{background-color:rgba(150,255,150,0.8);}
  audio{margin-left:36% }
  hr{text-align:center;color:red;height:1px;}
  header:hover{animation:mon-animation 4s linear 0.3s;animation-iteration-count:1;}
  @keyframes mon-animation { from {font-size:2em;} to {font-size:3em; } }
  }