/* =====================================================
   Surface Brute — BLOG CSS (indépendant & nettoyé)
   - Conserve ton style : GhostWhite, Maroon, SteelBlue, initiales, etc.
   - Ajoute un gutter à gauche/droite (pas de texte collé au bord)
   - Range par sections pour évoluer facilement
   ===================================================== */

/* 1) Variables & thèmes */
:root{
  --bg: GhostWhite;      /* ton fond */
  --ink: Black;
  --muted: DarkSlateGray;
  --accent: SteelBlue;   /* couleur des liens */
  --heading: Maroon;     /* h1–h3 */
  --border: #d0d0d0;
  --gutter: clamp(12px, 2.5vw, 24px); /* marge interne L/R */
  --max: 72ch;
  --font-body: serif;    /* tu voulais serif partout */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111213; --ink:#ededed; --muted:#bdbdbd;
    --accent:#9ac2e2; --heading:#ffb3b3; --border:#2a2a2a;
  }
}

/* 2) Base / reset léger */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font:16px/1.6 var(--font-body);
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--accent); text-decoration:none; text-underline-offset:2px }
a:hover{ text-decoration:underline }
:focus{ outline:1px dotted gray }           /* ton accessibilité */
:focus-visible{ outline:2px solid #c4b59a; outline-offset:2px }

/* 3) En-tête du blog (Variante A) */
.blog-header{
  position:sticky; top:0; z-index:10;
  background:var(--bg); border-bottom:1px solid var(--border);
}
.blog-header .wrap{
  max-width:1100px; margin:0 auto;
  padding-left:var(--gutter); padding-right:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:nowrap;
}
.blog-brand{ font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap }
.blog-header nav{ display:flex; gap:12px; flex-wrap:nowrap }
.blog-header nav a{ white-space:nowrap }

/* 4) Conteneurs & marges latérales (gutter) */
.main{ max-width:var(--max); margin:24px auto;
  padding-left:var(--gutter); padding-right:var(--gutter); }
.container{ max-width:800px; margin:0 auto; padding:20px; } /* si tu l’utilises encore */

/* 5) Typographie & initiales */
h1,h2,h3,h6{ margin:0 }
h1,h2{ font-size:1.5em; color:var(--heading) }
h3{ font-size:1.2em; color:var(--heading); margin-top:1em }  /* + espace au-dessus comme tu voulais */
h5{ font-size:1.2em; margin:0; color:orange }
h6 a{ color:gray; text-decoration:none; font-size:1.9em }
p{
  line-height:1.3; color:var(--muted);
  width:100%; max-width:1400px; word-wrap:break-word;
}
p::first-letter{
  color:var(--heading);
  font-size:1.2em;
  margin-left:10px;
}
cite{ font-style:italic; font-size:1.2em }

/* 6) Séparateurs */
hr.large{ color:gray; width:28% }
hr.min{ color:gray; width:18% }

/* 7) Navigation simple (si utilisée dans le corps) */
nav{ margin-top:10px }
nav a{ margin-right:10px }

/* 8) Listes — retrait propre (puces visibles, pas collées au bord) */
.main ul, .main ol{
  list-style-position: outside;
  padding-inline-start: 1.25rem;
  margin: .7rem 0;
}
@supports (margin-inline-start: 1rem){
  .main ul, .main ol{ padding-inline-start: 0; margin-inline-start: 1.25rem }
}
/* Si tu utilises des <li> isolés avec padding, on garde : */
li{ list-style-type: disc; padding-left:20px }

/* 9) Galerie d’images (conserve ton approche) */
.image-gallery{
  display:flex; flex-wrap:wrap; gap:10px;
  /* justify-content:center; */ /* décommente si besoin de centrage */
}
.image-gallery img{
  max-width:300px; height:auto;
  border:1px solid #ccc; box-shadow:2px 2px 5px rgba(0,0,0,.1);
}
.image-gallery figure{ margin:0 /* text-align:center; */ }
.image-gallery figcaption{ font-size:small; font-style:italic }

/* 10) Images responsives génériques */
.responsive-image{ max-width:100%; height:auto; display:block; margin:0 auto }
figure{ margin:0 auto }
@supports not (image-set: url(x)){
  .responsive-image{ width:auto } /* fallback si pas de srcset (rare) */
}

/* 11) Blocs “image à gauche/droite” (tes grilles) */
/* conteneur plus large que le texte (pour les grilles image+texte) */
.wide{
  max-width: clamp(900px, 95vw, 1200px);   /* élargit par rapport à --max (72ch) */
  margin: 24px auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* grille image + texte (à droite) */
.align_image_droite_container{
  display: grid;
  gap: 24px;
  align-items: start;
}
@media (min-width: 900px){
  .align_image_droite_container{
    grid-template-columns: 1.3fr 1fr;     /* texte un peu plus large que l’image */
  }
}

/* grille image + texte (à gauche) */
.align_image_gauche_container{
  display: grid;
  gap: 24px;
  align-items: start;
}
@media (min-width: 900px){
  .align_image_gauche_container{
    grid-template-columns: 1fr 1.3fr;     /* image un peu plus large que le texte */
  }
}

/* nettoie les marges internes trop grandes qui rétrécissaient la grille */
.align_image_droite_container div,
.align_image_gauche_container div{
  margin: 0;        /* avant : 3em ; on retire pour ne pas rogner la grille */
}
.align_image_droite_container img,
.align_image_gauche_container img{
  margin: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* mobile : on empile proprement */
@media (max-width: 899px){
  .align_image_droite_container,
  .align_image_gauche_container{
    grid-template-columns: 1fr;
  }
}

/* 12) Conteneur d’images via :target (ton système d’ancre) */
.image-container{ margin-top:20px; text-align:center }
.image-container:target{ display:block } /* s’affiche quand l’ancre est ciblée */

/* 13) Cartes d’index (si tu listes des billets) */
.list{ list-style:none; padding:0; margin:1rem 0 }
.card{ border:1px solid var(--border); border-radius:12px; padding:14px; transition:transform .08s ease }
.card:hover{ transform:translateY(-1px) }
.card a{ color:inherit; text-decoration:none }
.card .meta{ color:#777; font-size:.92rem }

/* 14) Article : images/figures/citations/code */
.article{ max-width:var(--max); margin:24px auto }  /* si tu ajoutes class="article" */
.article figure{ margin:1.2rem 0 }
.article figcaption{ color:#777; font-size:.92rem; margin-top:.4rem }
.article img{ display:block; max-width:100%; height:auto }
code, pre{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
pre{ background:rgba(0,0,0,.03); border:1px solid var(--border); padding:10px; border-radius:8px; overflow:auto }

/* 15) Utilitaires */
.to-top{ display:inline-block; margin-top:12px; text-decoration:none }
.to-top:hover{ text-decoration:underline }

/* 16) Media queries (tu les avais) */
@media (max-width:768px){
  body{ font-size:14px }
}
@media (max-width:480px){
  body{ font-size:12px }
}
/* Très petits écrans : on autorise le retour à la ligne dans le header */
@media (max-width:380px){
  .blog-header .wrap{ flex-wrap:wrap }
  .blog-header nav{ margin-top:6px }
}
/* --- PATCH largeur contenu / grilles --- */

/* 1) On libère .main : plus de max-width global */
.main{
  max-width: none;          /* au lieu de var(--max) */
  width: 100%;
}

/* 2) Les pages purement textuelles peuvent limiter la largeur via .article */
.article{
  max-width: var(--max);    /* 72ch */
  margin: 24px auto;
}

/* 3) Les blocs image+texte ont une vraie largeur utile */
.wide{
  max-width: clamp(1000px, 95vw, 1400px);  /* un peu plus large qu'avant */
  margin: 24px auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* 4) Grilles : colonnes plus généreuses pour le texte et l'image */
@media (min-width: 900px){
  .align_image_droite_container{ grid-template-columns: 1.5fr 1fr; }
  .align_image_gauche_container{ grid-template-columns: 1fr 1.5fr; }
}
@media (min-width: 1200px){
  .align_image_droite_container{ grid-template-columns: 1.6fr 1fr; }
  .align_image_gauche_container{ grid-template-columns: 1fr 1.6fr; }
}

/* 5) L’image occupe bien toute sa colonne */
.align_image_droite_container figure,
.align_image_gauche_container figure{ width: 100%; }
.align_image_droite_container img,
.align_image_gauche_container img{
  width: 100%;
  height: auto;
  display: block;
}

/* 6) Lisibilité du texte : un peu plus d’air */
p{ line-height: 1.45; }     /* au lieu de 1.3, plus confortable */