:root {
  --body_font_family: "Barlow Semi Condensed", sans-serif;
  --body_couleur_bg:white;
  --body_width:100%;
  --body_font_size:16px;
  --couleur_bg:red;
  --font_size:16px;
  --scroll_height_desktop:47mm; /* hauteur de l'entête */
  --scroll_height_ipad:43mm;/* hauteur de l'entête */
  --scroll_height_iphone:30mm;/* hauteur de l'entête */
  --feed_div_max_desktop:25; /* nombre de caractères dans un bouton de feed */
  --feed_div_max_iphone:100; /* nombre de caractères dans un bouton de feed */
}
* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: var(--body_font_family);
      background: var(--body_couleur_bg); 
      font-size: var(--body_font_size); 
      min-height: 100vh; 
      display: flex; 
      flex-direction: column; 
      width: var(--body_width); 
    }
.container_big_bertha      {z-index: 1;}

@media screen {/* CYAN* HP Envy */ 
    .screen_media_class { background-color: cyan;color: black;}

  .header {position: sticky; top: 0;width: 100%; height:var(--scroll_height_desktop); z-index: 1000;}
  .header_row_1 {display: grid; grid-template-columns: 0.15fr 1fr 0.15fr; height: auto;background-color:white ;text-align: center;}
    .row_1_col_1 {grid-column: 1; margin-top: 25px;}
    .horloge {width: 110px; }
    .row_1_col_2 {grid-column: 2;} 
    .entete_image {width: 60%;filter: brightness(150%);}
    .entete_avion {height: 90px;}
    .entete_image:hover {filter: brightness(110%);cursor: pointer;} 
    .row_1_col_3 {grid-column: 3; margin-top: 25px;}
    .entete_message {position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      background-color:rgb(255, 149, 0); color: white;
      font-size: 24px;padding: 2px 4px; border: none;
      cursor: pointer;border-radius: 5px; text-align: center;
      display: none;}
  .header_row_2 {height: auto;background-color: #f0e1e1;display: flex;align-items: center;justify-content: flex-start;gap: 1em; 
    margin-top: 0px; margin-bottom: 2px} 
/* menu pour le hamburger */
.menu {display: flex;gap: 1em;}
.menu.hidden  {display: none;flex-direction: row;position: absolute;top: 100%;left: 0;width: 200px;;
                background-color: #ccc; box-shadow: rgba(0,0,0,0.1);}
.menu a {text-decoration: none;padding: 0.5em 1em;border: none;border-radius: 6px;background-color: orange;color: white;font-size: 1em;text-align: center;display: block;}
.menu a:hover {background-color: orangered;}

.hamburger {display: none;flex-direction: ROW;gap: 5px;cursor: pointer;}
.hamburger div {width: 25px;height: 3px;background-color: #333;}

.menu_wrapper {position: relative;}

.footer {width: 100%;padding: 0;background-color: #333;color: #fff;text-align: center;
  /* mettre les trois éléments suivants pour rendre le footer stick en fin de l'écran*/
  position: fixed;left: 0;bottom: 0;}

/*                                                =====================================================*/  
/*                                                LE PRINCIPAL AVEC LES COLONNES ARTICLE/LIENS/OUTILS  */
.container_principal          {display: grid; grid-template-columns: 1fr 200px 200px  ; gap: 15px;margin: 10px; z-index: 1;}
/*                                                ARTICLES */
  .principal_colonne_article  {display: flex; flex-direction: column; gap: 5px;}
    .article_href             {float: left; margin-top: 10px; color: white;cursor: pointer; }
    .article_wrapper          {float: left; width: 100%;border: solid cadetblue;border-radius: 5px;padding: 15px 10px 10px; 
                                margin-bottom: 20px; margin-top: 20px; background-color: rgb(203, 245, 203);}
    .article_wrapper .sur_div {position:absolute;margin-top:-25px;margin-left:50%;color:white;background:darkgreen;
                                border-radius:10px;padding:2px 10px;}
    .makale_texte   {display: grid; grid-template-columns: 1fr; grid-template-rows: auto;column-gap: 10px;
                     max-height: 200mm; overflow-y: auto; overflow-x: hidden;
                     }
      .texte_logo   {grid-column: 1;margin-bottom: 15px;width: 25%; cursor: pointer;} /* le logo 1/4 de la ligne */
      .texte_titre  {grid-column: 1;font-size: 20px; font-weight: bold;color: blueviolet; text-align: center;
                        margin-bottom: 15px; margin-top: 15px ;cursor: pointer;} /* le titre */
      .texte_gauche {grid-column: 1;word-wrap: break-word; text-align: left;}
      .texte_article {grid-column: 1; text-align: center;}
      .texte_footer {grid-column: 1; font-size: 10px;text-align: right; margin-right: 20px;}

      .texte_notam {width: 90%; text-align: left; margin: 0 auto;}
      .texte_non_notam {width: 75%; text-align: left; margin-left: 100px;}
      

    .makale_aip {display: grid; grid-template-columns:10% 1fr 10%; grid-template-rows: auto; max-height: 100mm; overflow-y: auto; overflow-x: hidden;}
      .aip_titre {grid-column: 1/3;font-size: 20px; font-weight: bold;color: blueviolet;margin-bottom: 10px;}
      .aip_titre:hover {cursor: pointer}
      .aip_texte {grid-column: 1/3; font-size: 14px; color: black;margin-top: 5px; margin-bottom: 10px;}
      .aip_no   {grid-column: 1;border: 1px solid black; text-align: center}
      .aip_aip  {grid-column: 2;border: 1px solid black;}
      .aip_aip:hover {cursor: pointer;color: darkgreen;background-color: white;}
      .aip_date   {grid-column: 3;border: 1px solid black;font-size: smaller; text-align: center;}
      .aip_footer {grid-column: 1/4; font-size: 10px;text-align: right; margin-right: 20px;margin-top:5px}
      .aip_date_du {color: black;}
      .aip_date_du_mod {color: red;font-weight: bold;}
      .aip_date_au {color: black;}
      .aip_date_au_mod {color: red; font-weight: bold;}


      .aip_liste {text-align: center; background-color: darkgreen;color: white;}
      .aip_no_liste   {grid-column: 1;border: 1px solid white; text-align: center}
      .aip_aip_liste  {grid-column: 2;border: 1px solid white;}
      .aip_date_liste {grid-column: 3;border: 1px solid white;font-size: smaller; text-align: center;}
/*                                                LIENS */
  .principal_colonne_lien {display: flex; flex-direction: column; gap: 5px;margin-top: 10px; }
    .entete_liens         { margin-left:5px;margin-bottom: 5px; font-size:  20px; font-weight: bold; cursor: pointer;}
    .entete_liens:target  {scroll-margin-top: var(--scroll_height_desktop);}
    .item_liste           {margin : 0 auto; margin-bottom: 2px;} /* entre chaque bouton empilé */
    .div_liste_liens      {background-color:rgb(246, 221, 221);border-radius:10px;padding-top:15px;padding-bottom:15px} /*englobe les liens */
    .div_liste_outils     {background-color:lightblue;border-radius:10px;padding-top:15px;padding-bottom:15px;
                            height:44vh;overflow-y: scroll; overflow-wrap: break-all; overflow-x: hidden; margin-right: -17px ;}
    .div_liste_feeds     {background-color:blue;border-radius:10px;padding-top:15px;padding-bottom:15px;
                            height:25vh;overflow-y: scroll; overflow-wrap: break-all; overflow-x: hidden; margin-right: -17px ;}
    .feed_list_font       {font-size: 14px;font-weight:normal;text-align: left;}
    .btn_feed             {text-align: left; margin-bottom: 2px;}
/*                                                OUTILS */
  .principal_colonne_outils   {display: flex; flex-direction: column; gap: 5px;margin-top: 10px; }
  .principal_colonne_feeds    {display: flex; flex-direction: column; gap: 5px;margin-top: 10px; }
  
/*                                                SECTION contenant un article quelque soit son type : texte ou aip */
section   {margin-bottom: var(--scroll_height_desktop); padding: 10cm;background-color: #f4f4f4;border: 1px solid #ddd;}
  :target {scroll-margin-top: var(--scroll_height_desktop);} /* Add scroll-margin for fallback */

.a_href       {background-color: green; color: white; text-decoration: none;border-radius: 5px; padding: 5px; font-size: 14px;cursor: pointer;}
.a_href:hover {background-color: lightgreen; color: darkgreen;}
.a_href_bis   {background-color: orange;color: white; text-decoration: none;border-radius: 5px; padding: 5px; font-size: 14px;cursor: pointer;}
.a_href_bis:hover {background-color: rgb(176, 131, 42); color: white;}
.a_href_ter   {background-color: green;color: white; text-decoration: none;border-radius: 5px; padding: 5px; font-size: 14px;cursor: pointer;}
.a_href_ter:hover {background-color: lightgreen; color: white;}

.blog_btn {background-color: blue; color: white; text-decoration: none;
            border-radius: 5px; padding: 5px 5px; font-size: 12px;cursor: pointer;
            width: 95%;margin: 2px 5px 2px 5px;
            transition: background-color 0.3s, color 0.3s;
          } 
.blog_btn:hover {background-color: rgb(31, 132, 165); color: white; font-weight: bold;} 
 

.entete_sujets           {margin-left:5px;margin-bottom: 5px; font-size:  20px; font-weight: bold; }
  .entete_sujets:target  {scroll-margin-top: var(--scroll_height_desktop);}
  .sujet_liste           {margin : 0 auto; margin-bottom: 2px;} /* entre chaque bouton empilé */
  .div_liste_sujets      {background-color:rgb(135, 228, 149);border-radius:10px;padding-top:15px;padding-bottom:15px} /*englobe les liens */

.cl_avertissement {font-size: 12px;color: red; font-weight: bold;}

/*    LISTAGE DES ARTICLES */

.container_lister_articles  {display:grid; grid-template-columns: 1fr;}
  .lister_articles_entete   {grid-column: 1;display: grid;grid-template-columns: 90% 10%; background-color: aquamarine;text-align: center; font-size: 26px; 
                              width: 99vw;border: 1px solid black; }
    .lister_articles_entete_libellé   {grid-column: 1; grid-row: 1; }
    .lister_articles_entete_retour    {grid-column: 2;grid-row: 1;}
    .lister_articles_entete_consigne  {grid-column: 1;grid-row: 2; text-align: center;font-size: 10px;}
  
  .lister_articles_colonnes {grid-column: 1; display: grid;grid-template-columns: 0.08fr 0.15fr 0.03fr 0.15fr 0.665fr; 
                              width: 98.5vw;column-gap:5px; background-color: blanchedalmond;}
    .lister_articles_no       {grid-column: 1; border: 1px solid black; padding-left: 8px; padding: 5px;}
    .lister_articles_cat      {grid-column: 2; border: 1px solid black; padding-left: 8px; padding: 5px;}
    .lister_articles_publier  {grid-column: 3; border: 1px solid black; padding-left: 8px; padding: 5px; text-align: center;}
    .lister_articles_date     {grid-column: 4; border: 1px solid black; padding-left: 8px; padding: 5px;}
    .lister_articles_titre    {grid-column: 5; border: 1px solid black; padding-left: 8px; padding: 5px;}
  
  .lister_articles_articles {grid-column: 1; display: grid;grid-template-columns: 1fr;cursor: pointer;
        height: 87vh; overflow-y: scroll; overflow-x: hidden;grid-auto-rows:30px}
    .this_article {grid-column: 1; display: grid;grid-template-columns: 0.08fr 0.15fr 0.03fr 0.15fr 0.65fr;column-gap:5px;}


    

.menu_overlay {
      position: fixed;
      top: 150px;
      left: 50px;
      width: 10%;
      margin-left: 10px;
      background-color: lightgreen;
      color: white;
      text-align: center;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      padding-top: 10px;
      padding-bottom: 10px;
      display: none;
      z-index: 10;
  }
  .menu_checkout {text-align: right;padding-right: 10px;color: darkgreen;font-size: 24px; cursor: pointer;}
  .menu_item {padding-left: 10%; text-align: left;margin-bottom:20px ;}
  .fonction_item {margin-left: 5px; float: left;}
  
.plus_haut {margin-bottom: 5px;}

}
@media (max-width : 900px) and (min-width:768px)  { /* RED iPhone  */
  .header {position: sticky; top: 0;width: 100%; height:var(--scroll_height_iphone); z-index: 1000;}
    .header_row_1 {display: grid; grid-template-columns: 0.5fr 1fr 0.5fr; height: auto;background-color: #f4f4f4;text-align: center;width: 100%;}
    .entete_image {height: 50px; width:75%; filter: brightness(110%)}
    .entete_avion {height: 20px; width:30px;margin-bottom: 10px;display: none; }
    .entete_liens {margin-top:5px ; margin-left:5px;margin-bottom: 5px; font-size:  20px; font-weight: bold;cursor: pointer;}
    .entete_liens:target {scroll-margin-top: var(--scroll_height_iphone);}
    .entete_message {position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -20%);
      -ms-transform: translate(-50%, -50%);
      background-color:blue; color: white;
      font-size: 12px;padding: 2px 4px; border: none;
      cursor: pointer;border-radius: 5px; text-align: center;
      display: none;}
    .row_1_col_1 {grid-column: 1;margin-top: 2px; }
    .row_1_col_2 {grid-column: 2;margin-top: 2px; }
    .row_1_col_3 {grid-column: 3;margin-top: 2px;} 

    .header_row_2 {justify-content: flex-start; background-color: #f0e1e1;}

  .container_principal {display: grid; grid-template-columns: 400px; gap: 15px;  margin: 20px;}
    .principal_colonne_article  {display: flex; flex-direction: column; gap: 5px;width: 100%;}

    .article_wrapper {float: left; border: solid cadetblue;border-radius: 5px;padding: 15px 10px 10px; 
                      margin-bottom: 10px; background-color: rgb(203, 245, 203);}
    .article_wrapper .sur_div {position:absolute;margin-top:-25px;margin-left:50%;color:white;
                              background:cadetblue;border-radius:10px;padding:2px 10px;}

    .makale_texte {display: grid; grid-template-columns: 1fr; grid-template-rows: auto;column-gap: 10px;max-height: 105mm; 
                    overflow-y: auto; overflow-x: hidden;}
      .texte_logo   {grid-column: 1;margin-bottom: 15px;width: 25%; cursor: pointer;} /* le logo 1/4 de la ligne */
      .texte_titre  {grid-column: 1;font-size: 20px; font-weight: bold;color: blueviolet; margin-bottom: 15px;}
      .texte_gauche {grid-column: 1; word-wrap: break-word;}
      .texte_article {grid-column: 1;}
      .texte_iframe {grid-column: 1;}
      .texte_footer {grid-column: 1; font-size: 10px;text-align: left; }

      .texte_notam {width: 90%; text-align: left; margin: 0 auto;}
      .texte_non_notam {width: 90%; text-align: left; margin-left: 5px;}
      



      .div_liste_outils  {background-color:lightblue;border-radius:10px;padding-top:15px;padding-bottom:15px;
                      height:25vh;overflow-y: scroll;overflow-wrap: break-all;}
      .div_liste_feeds  {background-color:blue;border-radius:10px;padding-top:15px;padding-bottom:15px;
                      height:25vh;overflow-y: scroll;overflow-wrap: break-all;}
  .item_liste           {margin : 0 auto; margin-bottom: 2px; } /* entre chaque bouton empilé */

  .makale_aip   {display: grid; grid-template-columns:1fr ; grid-template-rows: auto; max-height: 10cm; overflow-y: auto; overflow-x: hidden;}
    .aip_titre  {grid-column: 1;font-size: 16px; font-weight: bold;color: blueviolet;}
    .aip_titre:hover {cursor: pointer}
    .aip_no     {grid-column: 1;font-weight: bold;color: red;}
    .aip_aip    {grid-column: 1;border: 1px solid black;}
    .aip_aip:hover {cursor: pointer;color: darkgreen;background-color: white;}
    .aip_date   {grid-column: 1;border: 1px solid black;font-size: smaller;}
    .aip_footer {grid-column: 1; font-size: 10px;text-align: right; margin-right: 20px;margin-top:5px}
    .aip_date_du {color: black;}
    .aip_date_du_mod {color: red;}
    .aip_date_au {color: black;}
    .aip_date_au_mod {color: red;}

    .aip_liste {text-align: center; background-color: darkgreen;color: white;}
      .aip_no_liste   {grid-column: 1;border: 1px solid white; text-align: center}
      .aip_aip_liste  {grid-column: 1;border: 1px solid white;}
      .aip_date_liste {grid-column: 1;border: 1px solid white;font-size: smaller; text-align: center;}


  .entete_sujets         {margin-left:5px;margin-bottom: 5px; font-size:  20px; font-weight: bold; }
  .entete_sujets:target  {scroll-margin-top: var(--scroll_height_desktop);}
  .sujet_liste           {margin : 0 auto; margin-bottom: 2px;} /* entre chaque bouton empilé */
  .div_liste_sujets      {background-color:rgb(68, 255, 0);border-radius:10px;padding-top:15px;padding-bottom:15px;} /*englobe les liens */

  .footer {width: 90%;padding: 0;background-color: #333;color: #fff;text-align: center;}
  .principal_colonne_lien {display: flex; flex-direction: column; gap: 5px; }


  .menu_home {flex-shrink: 0;}
  .hamburger {display: flex;}
  .menu_wrapper.active .menu.hidden {
      display: flex;
      flex-direction: column;
      margin-top: 0.5em;
      width: 200px;
      margin-left: -100px;
  }

  .menu_overlay {
      position: fixed;
      top: 150px;
      left: 20px;
      width: 50%;
      margin-left: 10px;
      background-color: lightgreen;
      color: white;
      text-align: center;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      padding-top: 10px;
      padding-bottom: 10px;
      display: none;
      z-index: 10;
  }

/*    LISTAGE DES ARTICLES */

.container_lister_articles  {display:grid; grid-template-columns: 1fr;}
  .lister_articles_entete   {grid-column: 1;display: grid;grid-template-columns: 1fr; background-color: lightblue; border: 1px solid black;}
    .lister_articles_entete_libellé   {grid-column: 1; grid-row: 1; text-align: center; font-size: 26px; }
    .lister_articles_entete_consigne  {grid-column: 1; grid-row: 2; text-align: center;font-size: 10px;}
    .lister_articles_entete_retour    {grid-column: 1; grid-row: 3; text-align: center;}
  
  .lister_articles_colonnes {display: grid;grid-template-columns: 0.20fr 0.30fr 0.05fr 0.50fr;;grid-auto-rows:30px }
    .lister_articles_no       {grid-column: 1;grid-row : 1 ;  border: 1px solid black; padding-left: 8px; padding: 5px;}
    .lister_articles_cat      {grid-column: 2;grid-row : 1 ;  border: 1px solid black; padding-left: 8px; padding: 5px;}
    .lister_articles_publier  {grid-column: 3;grid-row : 1 ;  border: 1px solid black; padding-left: 8px; padding: 5px; text-align: center;}
    .lister_articles_date     {grid-column: 4;grid-row : 1 ;  border: 1px solid black; padding-left: 8px; padding: 5px;}
    .lister_articles_titre    {grid-column: 1/5;grid-row : 2 ;  border: 1px solid black; padding-left: 8px; padding: 5px; border-bottom: 3px solid blue;}
  
  .lister_articles_articles { display: grid;grid-template-columns: 1fr;grid-auto-rows:60px;font-size: 12px;}
    .this_article { display: grid;grid-template-columns:  0.20fr 0.30fr 0.05fr 0.50fr;grid-auto-rows:30px}


}
@media (min-width:1745px){/* DARKBLUE ECRAN 21" */
  .div_liste_outils     {background-color:lightblue;border-radius:10px;padding-top:15px;padding-bottom:15px;
    height:37vh;overflow-y: scroll; overflow-wrap: break-all; overflow-x: hidden; margin-right: -17px ;}

.div_liste_feeds     {background-color:lightblue;border-radius:10px;padding-top:15px;padding-bottom:15px;
    height:37vh;overflow-y: scroll; overflow-wrap: break-all; overflow-x: hidden; margin-right: -17px ;}

}
@media (max-width : 1180px) and (min-width:820px)  { /* YELLOW : iphone tourné en paysage */ /* >820 <=1180*/
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1022px) and (orientation: landscape) {/* BURLYWOOD mon ipad en paysage  checked 19/04/2025*/
}