@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* Global */
html, body {
    height: 100%;
    width:100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
}

/* La zone principale doit occuper le maximum d'espace disponible */
.layout-content {
    flex: 1;
}

body, .page-content, h1, h2, p {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
}

h1,h2,h3,h4{
  font-weight: 300;
}

p{
  line-height: 1.3;
}

article{
  margin-bottom:30px;
  font-size: 1.1rem;
}

article h2{
  margin-top:10px;
  margin-bottom:10px;
  color:#3F51B5;
}

article h3{
  margin-top:10px;
  margin-bottom:5px;
  font-size:1.3em;
  color:#3F51B5;
}

article h4{
  margin-top:10px;
  margin-bottom:5px;
  font-size:1.2em;
  color:#3F51B5;
}
article p{
  font-size:1.3em;
  padding-top:4px;
  padding-bottom:4px;
  font-weight: 200;
}

article p strong{
  font-weight: 500;
}

article ul{
 font-size:1.0em;
}

article ul li {
  padding-top:2px;
  padding-bottom:5px;
  font-size:1.3rem;
  font-weight: 200;
  line-height: 1.3;
}

article table {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;       /* empêche l’expansion au‑delà du conteneur */
    table-layout: fixed;   /* colonnes basées sur la largeur dispo, pas le contenu */
    margin-bottom: 1em;
    word-break: break-word;/* coupe les mots trop longs */
}

table th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    font-weight: 200;
    font-size:1.3em;
    box-sizing: border-box;
}

table th{
  font-weight: 400;
}

th {
    background-color: #f2f2f2;
}

article .signature {
    margin-top: 2em;
    font-style: italic;
}



/* Conteneur principal */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* En-tête */
.layout-header {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  background: #3F51B5;
}
.header-container {
  width: 100%;
  height: 64px;
}

/* Logo */
.logo-container {
  display: inline-flex;
  align-items: center;
  font-family: "Consolas", "Courier New", monospace;
  height: 100%;            /* récupère la hauteur de .logo-container si besoin */

}
.logo-part {
  font-size: 2rem;
  font-weight: bold;
  margin-right: 2px;
  letter-spacing: -8px !important;
}
.curly { color: #388E3C; }
.slash, .zero { color: #1976D2; }
.site-name {
  margin-left: 5px;
  font-size: 1.5rem;
  color: white;
}

/* 2) Optionnel : si vous voulez forcer un line-height uniforme */
.logo-container a span {
  line-height: 1;          /* évite les décalages dus à la hauteur de ligne */
}

/* Navigation */
.navigation{
  display: flex;
  align-items: center;
  margin-right:5px !important;
}

.navigation_link{
  padding: 8px 16px;
  color: white;
  position: relative;
  border-radius: 4px; /* Vous pouvez mettre 0 si vous voulez aucun arrondi sur le menu */
  transition: background-color 0.3s;
  text-decoration: none;
  font-family: "Consolas", "Courier New", monospace;
  font-size:1.3em;
  margin-left:10px;
}
.navigation_link:hover{
  background-color: rgba(255, 255, 255, 0.2);
}

/* Hero (facultatif) */
.hero{
  padding: 20px 20px;
  background: #1976D2;
  margin-bottom:10px;
}
.hero h1{
  font-size: 2em;
  color:white;
  margin-bottom: 10px;
}

/* ----------- LISTE D'ARTICLES ----------- */
.articles-section{
  margin:20px 0;
}

.articles-section h2{
  width:100%;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:5px;
  background-color:#1976D2;
  color:white;
}


/* On enlève la grosse bordure arrondie, la box-shadow importante, etc. */
.article-card {
  border: none;
  border-bottom: 1px solid #e0e0e0; /* simple séparation entre articles */
  border-radius: 0;               /* pas d’arrondi */
  padding: 1rem 0;               /* padding vertical réduit */
  margin: 0;                     /* pas de marge autour */
  transition: background-color 0.2s;
}

/* Au survol, on colore légèrement le fond, style Stack Overflow */
.article-card:hover {
  background-color: #fafafa;
}

/* Titres plus petits et colorés */
.article-card h2 {
  margin: 0 0 0.25rem 0; /* un peu de marge en bas du titre */
  font-size: 1rem;       /* plus petit qu’auparavant */
  font-weight: 500;      /* un peu moins gras */
  color: #0077CC;        /* ton bleuté discret (vous pouvez ajuster) */
}

/* Résumé plus discret */
.article-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
}

.article-card.compact {
    display: block;           /* Pour que l'élément <a> agisse comme un bloc */
    position: relative;       /* Pour appliquer d'éventuels effets de survol */
    text-decoration: none;    /* Suppression de la décoration de lien */
    color: inherit;           /* Pour conserver la couleur du texte */
    
    /* Style sobre et minimaliste */
    border: none;
    border-bottom: 1px solid #e0e0e0; /* Séparateur discret */
    border-radius: 0;         /* Aucun arrondi */
    padding: 0.75rem 0;       /* Espacement vertical réduit */
    margin: 0;                /* Pas d'espacement externe */
    background: transparent;
    
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card.compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.article-card.compact h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;    /* Taille de police réduite pour le titre */
    font-weight: 500;
    color: black;     /* Couleur discrète pour le titre */
}

.article-card.compact p {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.3;
}

/* Lien 'Lire la suite' masqué car .stretched-link + .visually-hidden, 
   ou alors vous pouvez en faire un petit lien textuel */
.stretched-link {
  position: relative;
  text-decoration: none;
}

/* S’il y a un .read-more-link, on peut le styler finement 
   (pas forcément nécessaire si on garde le lien masqué) */
.read-more-link {
  font-size: 0.85rem;
  color: #0077CC;
  text-decoration: none;
}

/* Aucune carte trouvée */
.no-articles-message {
  border: 1px solid #eee; 
  background: #fcfcfc;
  padding: 10px;
  font-size: 0.95rem;
  margin-top: 1rem;
  text-align: center;
}

/* ----------- SIDEBAR (NEWSLETTER) ----------- */

.newsletter-form-container {
  background: transparent;     /* ou #fff si vous souhaitez un fond blanc */
  border: none;                /* pas de bordure ou un simple trait si voulu */
  border-radius: 0;           /* pas d’arrondi */
  padding: 0;                 /* pas de padding, c’est très minimaliste */
  margin-bottom: 1rem;
}

.newsletter-form-container h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;  
  font-weight: 600; 
}
.newsletter-form-container p {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: #555;
}

/* ----------- FORMULAIRE ----------- */
/* Si vous voulez minimiser le style du formulaire,
   supprimez la box-shadow, la bordure, etc. */

form {
  max-width: 100%; 
  margin: 0; 
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

form div {
  margin-bottom: 10px;
}

form label {
  display: block;
  margin-bottom: 4px;
  font-size: 1.1rem;
  color: #333;
  font-weight: 500;
}

form input{
  font-size:1.1rem;
  padding:5px !important;
  width:100%;
  border:1px thin lightgrey;
}

/* Dans styles.css, en bas du fichier */
form button[type="submit"] {
  /* tes styles existants */
  background: #0077CC;
  color: #fff;
  padding: 6px 12px;
  border: none;
  border-radius: 0;
  font-size: 1.1rem;
  cursor: pointer;
  margin-top:10px;
  float:right;
}

form button[type="submit"]:hover {
  background: #005fa3;
}

/* Ombre + effet “pression” sur tous les boutons */
button {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s ease, transform 0.1s ease;
  font-size:1.1em;
}
button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

/* ----------- BOUTONS GLOBAUX (facultatif) ----------- */
/* Si vous utilisez .button ailleurs */
.button {
  background: #0077CC;
  border: none;
  border-radius: 0;
  font-size: 0.9rem;
  height: auto;
  line-height: normal;
  padding: 6px 12px;
  cursor: pointer;
  color: #fff;
  transition: background-color 0.2s;
}
.button:hover {
  background: #005fa3;
}
.button:active {
  background: #004885;
}
/* ----------- BOUTONS COPIER DANS LE CODE PRESENTE ----------- */

pre {
  position: relative;
  background-color: #2d2d2d; /* ou la couleur de votre choix */
  color: #ccc;
  padding: 16px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 1em 0;
}

.copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  
  display: flex;
  align-items: center;
  gap: 4px;
  
  background-color: #3F51B5;
  color: #fff;
  border: none;
  border-radius: 4px; /* facultatif si vous n’aimez pas les arrondis, mettez 0 */
  cursor: pointer;
  padding: 4px 8px;
  
  font-size: 14px;
  opacity: 0.8;
  transition: opacity 0.2s, transform 0.1s;
}
.copy-button:hover {
  opacity: 1;
}
.copy-button:active {
  transform: translateY(1px);
}

/* ----------- PIED DE PAGE (facultatif) ----------- */
.mini-footer {
  padding: 20px;
  background: #3F51B5;
  color: white;
  text-align: center;
}

/* ------------ Ajustements pour mobile ------------ */
@media (max-width: 576px) {
  /* Réduire un peu les titres */
  article h2 {
    font-size: 1.2rem;   /* avant 1.3rem */
  }
  article h3 {
    font-size: 1.1rem;   /* avant 1.3rem */
  }
  article h4 {
    font-size: 1rem;     /* avant 1.2rem */
  }

  /* Corps de texte et listes */
  article p,
  article ul li {
    font-size: 1rem;     /* avant 1.3em */
    line-height: 1.4;    /* un peu plus compact */
  }
  
  article table th, article table td{
    font-size:1rem;
  }

.logo-container{ padding-left:10px !important; }
  
.logo-container span.logo-part,.logo-container span.site-name{
    font-size:0.9em;
  }
  
  .logo-container span.logo-part{
    padding:0px;
    margin:0px;
    font-size:0.9em;
    letter-spacing: -8px !important;
  }

  /* Hero (titre principal de la page) */
  .hero h1 {
    font-size: 1.2rem;   /* avant 2em */
  }

  /* Réduire un peu le padding horizontal global */
  .container {
    padding: 0 0px;     /* avant 0 20px */
  }

  /* Si besoin : réduire le header mobile */
  .navigation_link {
    padding: 0px 0px;   /* avant 8px 16px */
    font-size: 0.9rem;
  }
}

/* ----------- Menu Déroulant ----------- */

/* Conteneur pour le lien de navigation qui a un menu déroulant */
.navigation .dropdown {
  position: relative; /* Essentiel pour positionner le menu enfant */
  cursor: pointer;
}

/* Le menu déroulant lui-même, masqué par défaut */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* S'affiche juste en dessous du parent */
  left: 0;
  background-color: #ffffff;
  min-width: 200px; /* Largeur minimale du menu */
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  border-radius: 4px;
  padding: 8px 0;
  list-style: none;
  z-index: 1000;
  padding-top: 18px; /* Crée l'espace à l'intérieur du menu */
}

/* Style des liens dans le menu déroulant */
.dropdown-menu li a {
  color: #333333;
  padding: 12px 16px;
  text-decoration: none;
  display: block; /* Pour que le lien occupe toute la largeur de l'item */
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  transition: background-color 0.2s;
}

/* Changement de couleur au survol d'un item */
.dropdown-menu li a:hover {
  background-color: #f5f5f5;
}

/* ----------- Menu Déroulant JS ----------- */

/* Ajout de la flèche via CSS pour la propreté */
#tools-dropdown-toggle::after {
  content: ' ▼';
  font-size: 0.8em;
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.2s ease-in-out;
}

/* Fait tourner la flèche quand le menu est ouvert */
.dropdown.is-active #tools-dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Nouvelle classe pour afficher le menu via JS */
.dropdown-menu.is-open {
  display: block;
}