*, *::before, *::after { box-sizing: border-box; }
  :root{
    --bg-header: #2e7bff;
    --text-on-header: #fff;
    --gap: 1rem;
    --radius: 12px;
    --card-bg: #fff;
    --muted: #666;
    --max-width-search: 500px;
    --header-height: 46px;
  }

  html,body{ margin:0; padding:0; width: 100%; height:100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#222; background-color: #f2f4f8; }

  
  .header{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-height);
    display:flex;
    align-items:center;
    gap: var(--gap);
    padding: 0 1rem;
    background: var(--bg-header);
    color: var(--text-on-header);
    z-index: 40;
  }

  img {
    width: 5em;
    height: 5em;
  }
  .full-screen {
    width: 80%;
    margin: 0 auto;
  }
    #tags-container {
    display: flex;
    flex-direction: row;
    padding-left: 2%;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5em;
    }
    #tags-container > p {
      width: 50px;
    }


  .tag {
  background-color: #2e7bff;
  color: #fff;
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 14px;
  width: fit-content;
  }

  .logo a{
    color: var(--text-on-header);
    text-decoration: none;
    font-weight:700;
    font-size: 1.1rem;
  }

  /* Search container (desktop: visible, mobile: hidden until .show) */
  .search{
    flex: 1;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .search input{
    width: 60%;
    max-width: var(--max-width-search);
    min-width: 160px;
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    border: none;
    outline: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  .search input::placeholder{ color: #999; }

  .search-icon{
    display: none; /* visible sur mobile via media query */
    background: none;
    border: none;
    color: var(--text-on-header);
    font-size: 1.2rem;
    cursor: pointer;
  }

  /* --- ARTICLE CARD --- */
  .article-card{
    display:flex;
    align-items:center;
    gap: 0.75rem;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 1rem;
    border: 1px solid #e6e6e6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: box-shadow .12s ease;
    text-decoration: none;
    color: inherit;
    width: 100%;
  }

  /* désactivé : plus d'effet au survol pour éviter "saut" */
  .article-card:hover{
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transform: none;
  }

  /* previews limitées à 80% et centrées */
  .home-list .article-card{
    max-width: 80%;
    margin: 0.75rem auto;
  }

  .article-icon{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:8px;
    flex-shrink:0;
  }

  .article-info{ flex:1; }
  .article-title{ margin:0; font-size:1.05rem; color:#222; }
  .article-meta{ margin:0.25rem 0 0; font-size:0.9rem; color:var(--muted); }
  .article-author{ font-weight:600; }

  /* Make sure page content isn't hidden under fixed header */
  main, #home, #article, #page-404 { padding-top: calc(var(--header-height )); box-sizing: border-box; }

  #home > h1{
    text-align: center;
  }

  #page-404 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  #page-404 > img {
    width: 30%;
    height: 30%;
  }
  #page-404 > button{
    border-radius: 10px;
    padding: 12px;
    background-color: #83adf5;
    cursor:pointer;
  }

  /* Empêche le contenu de l'article d'allonger la page au-delà de la fenêtre */
#article > :not(#header-article){
    padding-left: 1.25rem; 
    max-width: 80%;
    border-width: 0 2px 2px 2px;
    border-style: solid;
    border-color: #222;

    box-sizing: border-box;

    padding-right: 1rem;
    
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0 auto;
    border-radius: 0px 0px 20px 20px;
}

#article {
  padding-bottom: 3em;
  background-color: #f2f4f8;
  
}

  #icone {
    border-radius: 20px;
    border: 2px solid #222;
  }
  #data-article {
    width: 100%;
  }
#data-article p {
  margin: 0.1rem 0;
  line-height: 1.1;
}



  #header-article {
    
    padding-left: 2%;
    padding-right: 2%;
    width: 100%;
    background-color: #e5e9f0;
    text-indent: 2%;
    border-bottom: 2px solid black;
    display: flex;
  }
  #icone-header {
    
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* contenu markdown : s'adapte à la largeur de l'écran */
  #md-box{
    max-width: 100%;
    box-sizing: border-box;
    
    word-break: break-word;
    hyphens: auto;
    background-color: #e6e6e6;
    
  }
  #md-box > *:first-child {
    margin-top: 0;
}


  #md-box img,
  #md-box video,
  #md-box iframe{
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* blocs de code : permettre un scroll horizontal si nécessaire */
  #md-box pre{
    white-space: pre-wrap;
    overflow-x: auto;
  }

  #md-box code{
    word-break: break-word;
  }

  /* --- Responsive Mobile --- */
  @media (max-width: 768px){
    .header{ flex-wrap: wrap; justify-content: space-between; height: auto; padding: 0.6rem; }
    .logo{ order: 1; }
    .search{ order: 3; width:100%; display:none; margin-top:0.5rem; }
    .search.show{ display:flex; justify-content:center; }
    .search input{ width:90%; max-width: 680px; }
    .search-icon{ display:block; order:2; background:transparent; border:0; margin-left:auto; }
    /* Ensure header keeps clickable area for search icon */
    .search-icon:focus{ outline:2px solid rgba(255,255,255,0.15); border-radius:6px; }

    /* adapter previews sur mobile */
    .home-list .article-card{ max-width: 92%; }
    .article-icon{ width:56px; height:56px; }
    #article > :not(#header-article) {
    padding-left: 1.25rem; 
    max-width: 100%;
    border-width: 0 2px 2px 2px;
        border-width: 0 2px 2px 2px;
    border-style: hidden;
    border-color: #222;
    }
    #article {
    padding-bottom: 0em; 
    }
    #md-box {
      padding-bottom: 2em;
    }
    
  }

  /* Small screens tweaks */
  @media (max-width: 420px){
    .article-title{ font-size:1rem; }
  }