@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');

:root {
  --container-padding: 1.2rem;
  --couleur-primaire: #1090a0;
  --couleur-primaire-fonce: #0b6f7a;
  --couleur-texte: #20252a;
  --couleur-bordure: #d9e0e4;
  --hauteur-nav: 60px; /* une seule valeur de référence pour la nav fixe */
}

* {
  box-sizing: border-box;
}

/* Fusion des 2 blocs html */
html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(14px, 0.9rem + 0.5vw, 20px);
  line-height: normal;
  -webkit-text-size-adjust: 100%;
  background: repeating-conic-gradient(#eee 0 25%, #ddd 0 50%) 0 / 20px 20px;
  margin: 0;
  padding: 0;
}

/* Fusion des 3 blocs body - une seule valeur de padding-top */
body {
  font-family: "Source Sans Pro", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
/*  padding-top: 38px; */
  /* padding-top supprimé : c'est <main> qui compense la nav fixe */
}

button {
  padding: 6px 10px;
  margin: 5px;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  background: navy;
  font-size: 1.1rem;
}

/* TITRES */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Marcellus', serif; /* serif + system-ui en fallback n'a pas de sens */
}

h1, h2, h3 {
  text-align: center;
}

h1 { font-size: clamp(1.5rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.3rem, 3.2vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 2.6vw, 1.8rem); }
h4 { font-size: clamp(1rem, 2.2vw, 1.5rem); }
h5 { font-size: clamp(.9rem, 1.8vw, 1.2rem); }
h6 { font-size: clamp(.8rem, 1.4vw, 1rem); }

/* Doublon avec la règle h1/h2/h3 ci-dessus : redondant, on garde juste la marge */
main > h1:first-of-type,
main > h2:first-of-type {
  margin: 0;
  padding: 0;
}

/* .site-container : une seule définition cohérente */
.site-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;   /* centrage réactivé (était commenté) */
  padding: 0;
}

.site-header {
  background: #ffffff;
  border-bottom: 1px solid var(--couleur-bordure);
}

.site-name {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--couleur-primaire);
  text-decoration: none;
}

.site-navigation {
  margin-top: .75rem;
}

.navigation-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation-tree .navigation-tree {
  margin-left: 1.25rem;
}

.navigation-folder {
  margin: .15rem 0;
}

.navigation-folder details {
  margin: 0;
}

.navigation-folder summary {
  cursor: pointer;
  padding: .25rem .5rem;
  color: var(--couleur-texte);
  font-weight: 600;
  border-radius: .25rem;
}

.navigation-folder summary:hover {
  background: #eef5f6;
  color: var(--couleur-primaire);
}

.navigation-page {
  margin: .1rem 0;
}

.navigation-page a {
  display: block;
  padding: .25rem .5rem;
  color: var(--couleur-texte);
  text-decoration: none;
  border-radius: .25rem;
}

.navigation-page a:hover {
  background: #eef5f6;
  color: var(--couleur-primaire);
}

/* .site-main : fusion des 4 déclarations éparpillées */
.site-main {
  background: linen;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  /*padding-top: 0;*/
  padding-bottom: 4rem;
  	  /*padding-top: var(--hauteur-nav);*/
  padding-top: 40px !important;
}

.site-main img {
  max-width: 100%;
  height: auto;
}

.site-main pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 1rem;
  background: #eef2f4;
}

.site-main code {
  background: #eef2f4;
  padding: .1rem .3rem;
}

.site-main blockquote {
  margin-left: 0;
  padding-left: 1rem;
  border-left: 4px solid var(--couleur-primaire);
}

.site-footer {
  text-align: center;
  color: #68737a;
  background: #dbd5d1;
}

.site-footer a {
  text-decoration: none;
  font-size: 0.85rem;
}

/* HERO
   Note : le "full-bleed" avec 100vw + marges négatives ne fonctionne pas
   de manière fiable quand un parent a du padding. On utilise une approche
   plus robuste basée sur la largeur du conteneur. */
.site-main img.hero {
  width: calc(100% + 2 * var(--container-padding));
  max-width: none;
  margin-left: calc(-1 * var(--container-padding));
  margin-right: calc(-1 * var(--container-padding));
  display: block;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.logo {
  position: absolute;
  top: 0.6rem;
  left: -0.6rem;
  width: 80px;
  z-index: 10;
}

/* nav : suppression du doublon "nav { margin: 0 !important }" */
nav.navigation-pages {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 6px;
  z-index: 9999;
  background: rgba(230, 240, 230, 0.9);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  transform: translateY(0);
}

/* Une seule compensation de la nav fixe (body n'en a plus) */


main {

}



.bouton-navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-family: inherit; /* était "Segoe UI", Arial... : incohérent avec le reste */
  font-size: 14px;
}

.bouton-navigation img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.bouton-navigation:hover {
  color: var(--couleur-primaire-fonce); /* était #0056a6, hors palette */
}

.bouton-navigation:hover img {
  opacity: 0.8;
}

.lien-navigation {
  display: inline-block;
  margin: 0 0.8rem;
  padding: 0.4rem 0.3rem;
  color: var(--couleur-primaire);
  font: inherit;
  line-height: 1;
  text-decoration: none;
  /* background: red;  <-- supprimé : oubli de debug */
}

.lien-navigation:hover {
  text-decoration: underline;
}

.icone-navigation {
  margin-right: 0.25rem;
}

/* SOURCE HTML */
#htmlSource {
  font-size: 1rem;
  padding: 30px 30px 10rem 30px; /* évite le double padding-bottom contradictoire */
  margin: 1rem;
  border: 2px solid #ccc;
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  background: #f5f5f5;
  border-radius: 8px;
}

@media (max-width: 480px) {
  /* Commentaire fermé correctement */
  .bouton-navigation {
    /* min-width: 6rem; */
    /* padding: 0.3rem 0.6rem; */
  }
}

@media (max-width: 700px) {
  /* Règles vides ou redondantes supprimées */
}

/* MENU ADMIN */
.menuAdmin {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
}

.menuAdmin a {
  display: inline-block;
  padding: 8px 14px;
  background: var(--couleur-primaire);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 15px;
  transition: background .2s;
}

.menuAdmin a:hover {
  background: var(--couleur-primaire-fonce);
}

.menuAdmin p {
  margin: 0;
}

/* COLONNES */
.colonnes2 {
  column-count: 2;
  column-gap: 1rem;
  column-fill: balance;
  width: calc(100% - 4px);
  margin: 0 auto;
  padding: 0;
  list-style-position: inside;
  overflow-wrap: break-word;
  word-break: break-word;
}

.colonnes2 ul {
  font-size: 0.9rem;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: fit-content;
}

.colonnes2 ul summary {
  cursor: pointer;
  font-size: 1rem;
  color: darkred;
  margin-top: 1.5rem;
  padding: 1px 8px;
  border-radius: 5px;
  display: inline-block;
  border: 2px solid white;
  background: #d3dedf;
}

.colonnes2 details {
  margin: 0;
  padding: 0;
}

.colonnes2 details summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  margin: 0;
  padding: 0;
  line-height: 1.1rem;
}

.footerColonnes {
  columns: 2;
  column-gap: 0.5rem;
  column-fill: balance;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

.saut-colonne {
  break-before: column;
  -webkit-column-break-before: always;
  column-break-before: always;
}

/* Mise en forme du texte */
.b  { font-weight: bold; }
.i  { font-style: italic; }
.u  { text-decoration: underline; }
.s  { text-decoration: line-through; }
.h  { background: yellow; padding: 2px 6px; }

.c      { text-align: center; }
.center { text-align: center; display: block; }
.l      { text-align: left; }
.r      { text-align: right; }
.j      { text-align: justify; }

/* Tailles */
.xs  { font-size: 0.8em; }
.sm  { font-size: 0.9em; }
.lg  { font-size: 1.2em; }
.xl  { font-size: 1.5em; }
.xxl { font-size: 2em; }
.big { font-size: 1.4em; }

/* Couleurs */
.red    { color: red; }
.green  { color: green; }
.blue   { color: blue; }
.orange { color: orange; }
.purple { color: purple; }
.black  { color: black; }
.white  { color: white; }

/* Fonds */
.bg-red    { background: red;    padding: 2px 6px; }
.bg-green  { background: green;  padding: 2px 6px; }
.bg-blue   { background: blue;   padding: 2px 6px; }
.bg-yellow { background: yellow; padding: 2px 6px; }
.bg-cyan   { background: cyan;   padding: 2px 6px; }

/* Espacement */
.m1  { margin: 0.5rem; }
.m2  { margin: 1rem; }
.p0  { padding: 0 6px; }   /* était "0px 6px" : simplifié */
.p1  { padding: 0.5rem; }
.p2  { padding: 1rem; }
.p24 { padding: 2px 4px; }

/* Bordures */
.br { border: 1px solid #ccc; }
.rd { border-radius: 8px; }
.sh { box-shadow: 0 2px 5px rgba(0,0,0,.2); }

.rounded    { border-radius: 8px; }
.height30vh { height: 30vh; }

.grad1 { height: 150px; width: 200px; background-image: radial-gradient(red, green, blue); }
.grad2 { background: radial-gradient(circle, lch(79 33 356) 20%, lch(82 28 253) 100%); }
.grad3 { background: radial-gradient(red, orange, yellow, green, blue, purple); }
.grad4 {
  background:
    linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}

/* div[box] : fusion des 2 déclarations (la 2e écrasait partiellement la 1re) */
div[box] {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  border-left: 8px solid #ccc;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.1);
  margin: 14px auto;
  width: 90%;
}

div[box]::before {
  font-size: 2rem;
  margin-right: 20px;
  flex-shrink: 0;
}

div[defaultBox]          { background: #f0f0f0; border-color: #757575; color: #212121; }
div[defaultBox]::before  { display: none; }
div[info]                { background: #e3f2fd; border-color: #2196f3; color: #0d47a1; }
div[info]::before        { content: "ℹ"; }
div[warning]             { background: #fff3e0; border-color: #ff9800; color: #e65100; }
div[warning]::before     { content: "⚠️"; }
div[error]               { background: #ffebee; border-color: #f44336; color: #b71c1c; }
div[error]::before       { content: "🛑"; }
div[success]             { background: #e8f5e9; border-color: #4caf50; color: #1b5e20; }
div[success]::before     { content: "✅"; }

div[box] .box-contenu    { flex-grow: 1; }
div[box] h3              { margin: 0 0 10px 0; font-size: 1.2rem; color: inherit; font-weight: bold; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 5px; }
div[box] p               { margin: 0 0 10px 0; }
div[box] p:last-child    { margin-bottom: 0; }

div[question]     { background: var(--msg-bg, #f3e5f5); border-color: var(--msg-color, #9c27b0); color: var(--msg-color, #9c27b0); }
div[question]::before { content: "❓"; }
div[update]       { background: var(--msg-bg, #e0f7fa); border-color: var(--msg-color, #00bcd4); color: var(--msg-color, #00bcd4); }
div[update]::before { content: "🔄"; }
div[security]     { background: var(--msg-bg, #e8eaf6); border-color: var(--msg-color, #3f51b5); color: var(--msg-color, #3f51b5); }
div[security]::before { content: "🛡️"; }
div[calendar]     { background: var(--msg-bg, #f9fbe7); border-color: var(--msg-color, #afb42b); color: var(--msg-color, #afb42b); }
div[calendar]::before { content: "📅"; }
div[money]        { background: var(--msg-bg, #e8f5e9); border-color: var(--msg-color, #2e7d32); color: var(--msg-color, #2e7d32); }
div[money]::before { content: "💶"; }
div[time]         { background: var(--msg-bg, #eceff1); border-color: var(--msg-color, #607d8b); color: var(--msg-color, #607d8b); }
div[time]::before { content: "🕒"; }
div[danger]       { background: var(--msg-bg, #ffebee); border-color: var(--msg-color, #d32f2f); color: var(--msg-color, #d32f2f); }
div[danger]::before { content: "🛑"; }
div[primary]      { background: var(--msg-bg, #f5f5f5); border-color: var(--msg-color, #616161); color: var(--msg-color, #616161); }
div[primary]::before { content: "📌"; }
div[idea]         { background: var(--msg-bg, #fffde7); border-color: var(--msg-color, #fbc02d); color: var(--msg-color, #fbc02d); }
div[idea]::before { content: "💡"; }
div[todo]         { background: var(--msg-bg, #fff9c4); border-color: var(--msg-color, #f57f17); color: var(--msg-color, #f57f17); }
div[todo]::before { content: "📝"; }
div[note]         { background: var(--msg-bg, #fafafa); border-color: var(--msg-color, #757575); color: var(--msg-color, #757575); }
div[note]::before { content: "📝"; }
div[tip]          { background: var(--msg-bg, #e8f8f5); border-color: var(--msg-color, #117a65); color: var(--msg-color, #117a65); }
div[tip]::before  { content: "✨"; }
div[important]    { background: var(--msg-bg, #fdf2e9); border-color: var(--msg-color, #e67e22); color: var(--msg-color, #e67e22); }
div[important]::before { content: "✨"; }
div[help]         { background: var(--msg-bg, #f4ecf7); border-color: var(--msg-color, #8e44ad); color: var(--msg-color, #8e44ad); }
div[help]::before { content: "🙋"; }
div[lock]         { background: var(--msg-bg, #f2f4f4); border-color: var(--msg-color, #34495e); color: var(--msg-color, #34495e); }
div[lock]::before { content: "🔒"; }
div[link]         { background: var(--msg-bg, #eaf2f8); border-color: var(--msg-color, #2980b9); color: var(--msg-color, #2980b9); }
div[link]::before { content: "🔗"; }
div[download]     { background: var(--msg-bg, #ebf5fb); border-color: var(--msg-color, #2471a3); color: var(--msg-color, #2471a3); }
div[download]::before { content: "📥"; }
div[upload]       { background: var(--msg-bg, #fef9e7); border-color: var(--msg-color, #b7950b); color: var(--msg-color, #b7950b); }
div[upload]::before { content: "📤"; }
div[construction] { background: var(--msg-bg, #fef5e7); border-color: var(--msg-color, #d35400); color: var(--msg-color, #d35400); }
div[construction]::before { content: "🚧"; }
div[archive]      { background: var(--msg-bg, #f4f6f7); border-color: var(--msg-color, #7f8c8d); color: var(--msg-color, #7f8c8d); }
div[archive]::before { content: "📦"; }
div[trash]        { background: var(--msg-bg, #fdedec); border-color: var(--msg-color, #c0392b); color: var(--msg-color, #c0392b); }
div[trash]::before { content: "🗑️"; }
div[pin]          { background: var(--msg-bg, #fcf3cf); border-color: var(--msg-color, #f1c40f); color: var(--msg-color, #f1c40f); }
div[pin]::before  { content: "📌"; }
div[quote]        { background: var(--msg-bg, #f5eef8); border-color: var(--msg-color, #9b59b6); color: var(--msg-color, #9b59b6); }
div[quote]::before { content: "💬"; }
div[bug]          { background: var(--msg-bg, #fce4d6); border-color: var(--msg-color, #e65100); color: var(--msg-color, #e65100); }
div[bug]::before  { content: "🪲"; }
div[analytics]    { background: var(--msg-bg, #eaf2f8); border-color: var(--msg-color, #1f618d); color: var(--msg-color, #1f618d); }
div[analytics]::before { content: "📊"; }
div[user]         { background: var(--msg-bg, #ebf5fb); border-color: var(--msg-color, #2e4053); color: var(--msg-color, #2e4053); }
div[user]::before { content: "👤"; }
div[email]        { background: var(--msg-bg, #eaf2f8); border-color: var(--msg-color, #1a5276); color: var(--msg-color, #1a5276); }
div[email]::before { content: "✉️"; }
div[phone]        { background: var(--msg-bg, #eafaf1); border-color: var(--msg-color, #196f3d); color: var(--msg-color, #196f3d); }
div[phone]::before { content: "📞"; }
div[map]          { background: var(--msg-bg, #f4f6f7); border-color: var(--msg-color, #626567); color: var(--msg-color, #626567); }
div[map]::before  { content: "🗺️"; }

/* span[…] */
span[b]            { font-weight: bold; }
span[i]            { font-style: italic; }
span[u]            { text-decoration: underline; }
span[s]            { text-decoration: line-through; }
span[xs]           { font-size: 0.75rem; }
span[sm]           { font-size: 0.85rem; }
span[lg]           { font-size: 1.3rem; }
span[xl]           { font-size: 1.5rem; }
span[xxl]          { font-size: 1.8rem; }
span[red]          { color: red !important; }
span[green]        { color: green; }
span[blue]         { color: blue; }
span[white]        { color: white; }
span[bg-yellow]    { background-color: #ffd; padding: 4px 10px; color: #640; }
span[bg-green]     { background-color: #dfd; padding: 4px 10px; color: #060; }
span[gras]         { font-weight: bold; }
span[big]          { font-size: 1.5rem !important; }
span[center]       { text-align: center; display: block; }
span[highlight]    { background: yellow; padding: 4px; }
span[shadow]       { text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
span[gray]         { color: #888; }
span[orange]       { color: orange; }
span[purple]       { color: purple; }
span[bg-gray]      { background-color: #eee; padding: 2px 6px; }
span[bg-red]       { background-color: #fdd; padding: 4px 10px; color: #900; }
span[bg-blue]      { background-color: #d1ecf1; padding: 4px 10px; color: #006; }
span[bold]         { font-weight: bold; }
span[italic]       { font-style: italic; }
span[upper]        { text-transform: uppercase; }
span[mono]         { font-family: monospace; }
span[big2]         { font-size: 2rem !important; }
span[big3]         { font-size: 3rem !important; }
span[small]        { font-size: 0.85rem; }
span[right]        { text-align: right; }
span[left]         { text-align: left; }
span[border1]      { border: 1px solid LightGray !important; padding: 2px 6px; }
span[border2]      { border: 2px solid #999; padding: 2px 6px; }
span[border-red]   { border: 2px solid red; padding: 2px 16px; }
span[border-green] { border: 2px solid green; padding: 2px 6px; }
span[border-blue]  { border: 1px solid blue !important; }
span[rounded]      { border-radius: 0.6rem !important; }
span[height30vh]   { height: 30vh; }
span[mark]         { background-color: beige; padding-left: 5px; padding-right: 5px; border-radius: 2px; }
span[grad1]        { height: 150px; width: 200px; background-image: radial-gradient(red, green, blue); }
span[grad2]        { background: radial-gradient(circle, lch(79 33 356) 20%, lch(82 28 253) 100%); }
span[grad3]        { background: radial-gradient(red, orange, yellow, green, blue, purple); }
span[grad4]        {
  background:
    linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}

hr.spacer {
  border: none;
  background: none;
  margin: 0;
  height: 4vh;
}