* {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      height: 100%;
      font-family: Arial, sans-serif;
      background: #f2f2f2;
    }
    
    a {
      color: inherit;
      text-decoration: none;
    }
    
    .hide{
		display:none!important;
    }

	/* Logo */
	.logo{font-size:2.5em;font-weight:900;}
	.logo>span{color:red;}
	.logo>span+span{color:#29a723;}

.center{text-align:center;}
.right-align{text-align:right;}
.bold{font-weight:bold;}


		
		/* Beamer like */
.block-title{
	background-color:#46648C;/*#262686;*/
	color:white;
	padding:0.25em;
	border:0.1em solid black;
	border-bottom:0;
	margin-top:0.5em;
}
.block{
	/*background-color:#eaeaf3;*/
	border:0.1em solid black;
	border-top:0;
	padding:0.25em;
	margin-bottom:0.5em;
}

.block-color{
	padding:0.5em;
	margin:0.5em 0;
	border:0.05em solid #CCCCCC;
	border-left-width:0.25em; 
}
.block-color.green{border-color:green;background:#C9F3C9;color:black;}
.block-color.blue{border-color:#1c1cff;background-color:#DDDDFF;color:black;}
.block-color.yellow{border-color:gray;background-color:#FFFFAA;color:black;}
.block-color.red{border-color:red;background-color:#fbb;color:black;}


.smallskip{margin-bottom:0.25em;}
.medskip{margin-bottom:0.5em;}
.bigskip{margin-bottom:1em;}


	/* Application */
    .app {
	  position:relative;
      width: 100%;
      max-width: 400px;
      height: 100dvh;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      background: white;
      overflow: hidden;
    }

    header {
      flex: 0 0 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 8px;
      background: lightgray;
      color: white;
    }

    #content {
      flex: 1;
      min-height: 0;
      overflow-x:hidden;
      overflow-y: auto;
      padding: 8px;
    }


    
.btn-mobile {
    /* Élimine les styles par défaut des navigateurs */
    -webkit-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    
    /* Dimensions adaptées au toucher (Hauteur min de 44px recommandée par Apple/Google) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    
    /* Design & Typographie */
    background-color: #007aff; /* Bleu iOS standard */
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px; /* Bords arrondis modernes style App */
    
    /* Améliorations spécifiques au Mobile */
    cursor: pointer;
    user-select: none; /* Empêche la sélection de texte bleue en restant appuyé */
    -webkit-tap-highlight-color: transparent; /* Supprime le carré gris moche au clic sur iOS */
    
    /* Transition pour l'effet de retour tactile */
    transition: transform 0.1s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.btn-mobile:hover {
	background-color: #0056b3; 
}

/* effet pression */
.btn-mobile:active {
    transform: scale(0.96); 
    opacity: 0.9;
}

.btn-mobile:disabled {
    background-color: #d1d1d6;
    color: #8e8e93;
    cursor: not-allowed;
    transform: none;
    opacity: 1;
}
 

 /* =====================================================
       BOUTON HAMBURGER
    ===================================================== */

    #menu-button {
      width: 44px;
      height: 44px;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      gap: 5px;

      border: 0;
      border-radius: 8px;

      background: transparent;

      cursor: pointer;

      -webkit-tap-highlight-color: transparent;
    }

    #menu-button:hover {
      background: #f3f4f6;
    }

    #menu-button:focus-visible {
      outline: 3px solid #2563eb;
      outline-offset: 2px;
    }

    #menu-button span {
      width: 24px;
      height: 2px;

      background: #111827;

      border-radius: 999px;

      transition:
        transform 0.25s ease,
        opacity 0.2s ease;
    }


    /* =====================================================
       HAMBURGER → X
    ===================================================== */

    #menu-button.expanded
    span:nth-child(1) {

      transform:
        translateY(7px)
        rotate(45deg);
    }

    #menu-button.expanded
    span:nth-child(2) {
      opacity: 0;
    }

    #menu-button.expanded
    span:nth-child(3) {

      transform:
        translateY(-7px)
        rotate(-45deg);
    }   
    
    
    
    
    
     /* =====================================================
       MENU
    ===================================================== */

    #menu {
      position: absolute;

      top: 60px;
      left: 0;

      width: 100%;
      height: calc(100vh - 60px);

      z-index: 900;

      padding: 24px 20px;

      background: #ffffff;

      overflow-y: auto;
      overflow-x: hidden;

      /*
        Le menu est complètement hors écran
        lorsqu'il est fermé.
      */

      transform: translateX(100%);

      visibility: hidden;

      transition:
        transform 0.3s ease,
        visibility 0s linear 0.3s;
    }




    #menu.is-open {

      transform: translateX(0);

      visibility: visible;

      transition:
        transform 0.3s ease,
        visibility 0s linear 0s;
    }


 

    .menu-list {
      list-style: none;

      display: flex;
      flex-direction: column;
    }


 

    .menu-link {
      display: block;

      padding: 17px 8px;

      font-size: 1.05rem;

      font-weight: 600;
      
      cursor:pointer;

      border-bottom:
        1px solid #e5e7eb;

      transition:
        color 0.2s ease,
        background 0.2s ease;
    }

    .menu-link:hover {
      color: #2563eb;

      background: #f8fafc;
    }

    .menu-link:focus-visible {
      outline: 3px solid #2563eb;

      outline-offset: -3px;
    }