.contenu
{
    display: flex;
    align-items: center;
    height: 100dvh;
    width : auto;
}

.secteur-couleur
{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.secteur-couleur:hover
{
  opacity: 0.8;
}
.secteur-couleur:active
{
  opacity: 0.9;
}

.active .secteur
{
  transform: translateX(0) translateY(0);
}

.hamburger path
{
  transition: transform 300ms;
}
.hamburger path:nth-child(1)
{
  transform-origin: 25% 29%;
}
.hamburger path:nth-child(2)
{
  transform-origin: 50% 50%;
}
.hamburger path:nth-child(3)
{
  transform-origin: 75% 72%;
}
.hamburger path:nth-child(4)
{
  transform-origin: 75% 29%;
}
.hamburger path:nth-child(5)
{
  transform-origin: 25% 72%;
}

.active .hamburger path:nth-child(1)
{
  transform: rotate(45deg);
}
.active .hamburger path:nth-child(2)
{
  transform: scaleX(0);
}
.active .hamburger path:nth-child(3)
{
  transform: rotate(45deg);
}
.active .hamburger path:nth-child(4)
{
  transform: rotate(-45deg);
}
.active .hamburger path:nth-child(5)
{
  transform: rotate(-45deg);
}

.support
{
    display: flex;
    height: auto;
    width : auto;
/*    background: #fff;
    opacity:1 ;*/
    z-index:4;
  flex-wrap: wrap;
}
.support-img
{
  padding:20px;
 /* background: #fff;*/
  opacity:1 ; 
  z-index:4;    
}

@media (min-resolution:  128dpi)
{	/* téléphone */

  .image
  {
      height : 150dvh;                  /* 100 sur ordi  150% sur les mobiles ! dvh lvh svh voir appHeight() window.height()*/
      width : auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-70%, -50%);       /* 50 50 sur ordi*/
      opacity: 0.4;
      z-index:1;
  }

  #titre
  {
      position: absolute;
      height: 70px;
      top: 10%;
      left: 60%;
      transform: translateX(-50%);
      text-align : center;
      font-family: 'Calibri';
      font-size: 90px;
      color: rgb(71, 22, 206);
      font-weight: 600;
      opacity: 1;
  }
  #pages
  {
      position: absolute; 
      top: 30%;
      left: 10%;
      width:65dvh;
      border-radius: 20px;
      background-color :rgba(230, 230, 230, 0.5);
      font-family: 'Arial';
      font-size: 70px;
      color: rgb(71, 22, 206); /*rgb(19, 25, 88);*/
      font-weight: 400;
  }

  .secteur
  { /* le quart de cercle où s'affichent les items */
  /* -webkit-tap-highlight-couleur: transparent;
    background: #000;*/
    top: -800px;      /*-200 et 400*/
    left: -800px;  
    height: 1600px;  
    width: 1600px;  
    border-radius: 50%;
    box-shadow: 0 0 5px 6px rgba(183 225 63 0,5);
    cursor: pointer;
    position: absolute;
    transform: translateX(-800px) translateY(-800px);
    transition: transform 300ms;

    z-index:3;
    opacity: 0.7;
  }

  .menu
  {
    height: 600px;    /* 200 taille menu*/
    width: 600px;  
    left: -300px; /* -100*/
    top: -300px;
    position: absolute;  
  /* -webkit-tap-highlight-couleur: transparent;*/
    background: #aaf;
  /*opacity: 0.8;   / * les secteurs partent du centre !*/
    border-radius: 50%;
    box-shadow: 0 0 4px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index:3;
  }

  .hamburger
  {
    cursor: pointer;
    height: 46px;
    left: 58%;
    position: relative;
    top: 58%;
    width: 46px;
  }

  .item
  {
    font-family: 'Arial';
    font-size: 80px;
    color:#171ace;
  }

/*
 on dessine en 1600,1600 est c'est ramené en 0,0
  OA = Op1 / cos(9°) -> = 800 / 0,9877 = 810
  A = 800,810
  B = 800 + 810 *cos(252), 800 + 810  * sin(252)  770 250      360 - 90 - 18 = 252
*/
  .secteur1
  {
    clip-path: polygon(800px 800px,  1610px 800px,  1570px 1050px);
    transition-delay: 30ms;
  }
  .secteur1-couleur
  {
    background: linear-gradient(135deg, #eee, #b7e13f);
    clip-path: polygon(800px 800px,  1610px 800px,  1570px 1050px);
  }
  .item1
  { /* approche */
    position: absolute;
    left: 1150px;
    top: 789px;
    width: 46px;
    transform: rotate(16deg);
  }
/*
  C = 800 + 810 *cos(234), 800 + 810 * sin(234)  638 498       252 - 18 = 234
*/
  .secteur2
  {
    clip-path: polygon(800px 800px,  1570px 1050px, 1438px 1298px);
    transition-delay: 60ms;
  }
  .secteur2-couleur
  {
    background: linear-gradient(135deg, #444, #7e84f9);
    clip-path: polygon(800px 800px,  1570px 1050px, 1438px 1298px);
  }
  .item2
  { /* barêmes */
    position: absolute;
    left: 1100px;
    top: 900px;
    width: 46px;  
    transform: rotate(26deg);
  }
/*
  D = 800 + 810 *cos(216), 800 + 810 * sin(216) 476 656   234 - 18 = 216
*/
  .secteur3
  {
    clip-path: polygon(800px 800px, 1438px 1298px, 1276px 1456px);
    transition-delay: 90ms;
  }
  .secteur3-couleur
  {
    background: linear-gradient(135deg, #eee, #b7e13f);
    clip-path: polygon(800px 800px, 1438px 1298px, 1276px 1456px);
  }
  .item3
  { /* zone */
    left: 1030px;
    top: 990px;  
    position: absolute;
    width: 46px;
    transform: rotate(45deg);
  }
/*
  E = 800 + 810 *cos(198), 800 + 810 * sin(198)   250  770         216 - 18 = 198
*/
  .secteur4
  {
    clip-path: polygon(800px 800px, 1276px 1456px, 1050px 1570px);
    transition-delay: 90ms;
  }
  .secteur4-couleur
  {
    background: linear-gradient(135deg, #444, #7e84f9);
    clip-path: polygon(800px 800px, 1276px 1456px, 1050px 1570px);
  }
  .item4
  { /* contact */
    left: 950px;
    top: 1070px;  
    position: absolute;
    width: 46px;
    transform: rotate(61deg);
  }
 /*
  F =  800 + 810 *cos(180),  800 + 810 * sin(180)    198 - 18 = 180
*/ 
  .secteur5
  {
    clip-path: polygon(800px 800px, 1050px 1570px, 800px 1610px);
    transition-delay: 90ms;
  }
  .secteur5-couleur
  {
    background: linear-gradient(135deg, #eee, #b7e13f);
    clip-path: polygon(800px 800px, 1050px 1570px, 800px 1610px);
  }
  .item5
  { /*supports */
    left: 840px;
    top: 1110px;  
    position: absolute;
    width: 46px;
    transform: rotate(74deg);
  }
}

@media (max-resolution:  127dpi)
{	/* ordinateur */

  .image
  {
      height : 100dvh;                  /* 100 sur ordi  150% sur les mobiles ! dvh lvh svh voir appHeight() window.height()*/
      width : auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-54%, -50%);       /* 50 50 sur ordi*/
      opacity: 0.4;
      z-index:1;
  }
  #titre
  {
    position: absolute;
    height: 70px;
    top: 10%;
    left: 40%;
   /* transform: translateX(-50%);*/
    text-align : center;
    font-family: 'Calibri';
    font-size: 60px;
    color: rgb(71, 22, 206);
    font-weight: 500;
    opacity: 1;
  }
  #pages
  {
    position: absolute; 
    top: 30%;
    left: 20%;
    width:80dvh;

    border-radius: 20px;
    background-color :rgba(230, 230, 230, 0.5);

    font-family: 'Arial';
    font-size: 30px;
    color: rgb(71, 22, 206); /*rgb(19, 25, 88);*/
    font-weight: 300;
  }

  .menu
  {
    height: 300px;
    width: 300px;  
    left: -150px;
    top: -150px;
    position: absolute;  
  /* -webkit-tap-highlight-couleur: transparent;*/
    background: #aaf;
  /*opacity: 0.8;   / * les secteurs partent du centre !*/
    border-radius: 50%;
    box-shadow: 0 0 4px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index:3;
  }

  .hamburger
  {
    cursor: pointer;
    height: 46px;
    left: 58%;
    position: relative;
    top: 58%;
    width: 46px;
  }

  .secteur
  { /* le quart de cercle où s'affichent le menu et les items */
  /* -webkit-tap-highlight-couleur: transparent;
    background: #000;*/
    top: -400px;
    left: -400px;  
    height: 800px; 
    width: 800px;  
    border-radius: 50%;
    box-shadow: 0 0 5px 6px rgba(183 225 63 0,5);
    cursor: pointer;
    position: absolute;
    transform: translateX(-400px) translateY(-400px);  /* cache le quart de cercle */
    transition: transform 300ms;
    z-index:3;
    opacity: 0.7;
  }

  .item
  {
    font-family: 'Arial';
    font-size: 50px;
    color:#171ace;
  /*  z-index:4;
    opacity: 1;*/
  }

/*
 on dessine en 400,400 est c'est ramené en 0,0
  OA = Op1 / cos(9°) -> = 400 / 98,77 = 405
  A = 400,405
  B = 400 + 405 *cos(252), 400 + 405 * sin(252)  125 385 (inverse !) 360 - 90 - 18 = 252
*/
  .secteur1
  {
    clip-path: polygon(400px 400px,  805px 400px,  785px 525px);
    transition-delay: 30ms;
  }
  .secteur1-couleur
  {
    background: linear-gradient(135deg, #eee, #b7e13f);
    clip-path: polygon(400px 400px,  805px 400px,  785px 525px);
  }
  .item1
  { /* approche */
    position: absolute;
    left: 580px;
    top: 395px;
    width: 46px;
    transform: rotate(14deg);
  }
/*
  C = 400 + 405 *cos(234), 400 + 405 * sin(234)  249 319 (inverse !) 252 - 18 = 234
*/
  .secteur2
  {
    clip-path: polygon(400px 400px,  785px 525px, 719px 649px);
    transition-delay: 60ms;
  }
  .secteur2-couleur
  {
    background: linear-gradient(135deg, #444, #7e84f9);
    clip-path: polygon(400px 400px,  785px 525px, 719px 649px);
  }
  .item2
  { /* barêmes */
    position: absolute;
    left: 555px;
    top: 463px;
    width: 46px;
    transform: rotate(31deg);
  }
/*
  D = 400 + 405 *cos(216), 400 + 405 * sin(216)  328 238 (inverse !)  234 - 18 = 216
*/
  .secteur3
  {
    clip-path: polygon(400px 400px, 719px 649px, 638px 728px);
    transition-delay: 90ms;
  }
  .secteur3-couleur
  {
    background: linear-gradient(135deg, #eee, #b7e13f);
    clip-path: polygon(400px 400px, 719px 649px, 638px 728px);
  }
  .item3
  { /* zone */
    position: absolute;
    left: 550px;
    top: 550px;
    width: 46px;
    transform: rotate(45deg);
  }
/*
  E = 400 + 405 *cos(198), 400 + 405 * sin(198)  385 125 (inverse !)  216 - 18 = 198
*/
  .secteur4
  {
    clip-path: polygon(400px 400px, 638px 728px, 525px 785px);
    transition-delay: 90ms;
  }
  .secteur4-couleur
  {
    background: linear-gradient(135deg, #444, #7e84f9);
    clip-path: polygon(400px 400px, 638px 728px, 525px 785px);
  }
  .item4
  { /* contact */
    position: absolute;
    left: 480px;
    top: 560px;  
    width: 46px;
    transform: rotate(65deg);
  }
 /*
  F = 400 + 405 *cos(180), 400 + 405 * sin(180)  198 - 18 = 180
*/ 
  .secteur5
  {
    clip-path: polygon(400px 400px, 525px 785px, 400px 805px);
    transition-delay: 90ms;
  }
  .secteur5-couleur
  {
    background: linear-gradient(135deg, #eee, #b7e13f);
    clip-path: polygon(400px 400px, 525px 785px, 400px 805px);
  }
  .item5
  { /*supports */
    position: absolute;
    left: 410px;
    top: 580px;
    width: 46px;
    transform: rotate(81deg);
  }

}