/* ============================================================
   THÈME DOTCLEAR — BTS SIO SISR
   Style professionnel & technique
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --primary:       #1a5fa8;
  --primary-light: #2e7dd4;
  --primary-dark:  #0f3d6e;
  --accent:        #00b4d8;
  --accent-light:  #90e0ef;
  --bg:            #f4f6f9;
  --surface:       #ffffff;
  --surface-alt:   #eef1f6;
  --border:        #d0d8e4;
  --text:          #1c2333;
  --text-muted:    #5a6a84;
  --text-light:    #8a9ab8;
  --tag-bg:        #e3ecf7;
  --tag-text:      #1a5fa8;
  --code-bg:       #1e2a3a;
  --code-text:     #cdd9ec;
  --radius:        6px;
  --radius-lg:     10px;
  --shadow-sm:     0 1px 4px rgba(0,0,0,.07);
  --shadow:        0 2px 10px rgba(0,0,0,.09);
  --font-body:     'Source Serif 4', Georgia, serif;
  --font-ui:       'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --max-width:     900px;
  --sidebar-w:     260px;
}

/* ── Reset & base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family:      var(--font-body);
  background-color: var(--bg);
  color:            var(--text);
  line-height:      1.75;
  -webkit-font-smoothing: antialiased;
}

/* ── Google Fonts import ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Wrapper global ─────────────────────────────────────────── */
#wrapper {
  max-width: calc(var(--max-width) + var(--sidebar-w) + 40px);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ─────────────────────────────────────────────────── */
#header {
  background: var(--primary-dark);
  border-bottom: 3px solid var(--accent);
  padding: 0;
}

#header .inner {
  max-width: calc(var(--max-width) + var(--sidebar-w) + 40px);
  margin: 0 auto;
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Logo / titre du blog */
#header h1,
#site-name {
  font-family:  var(--font-ui);
  font-size:    1.6rem;
  font-weight:  600;
  color:        #ffffff;
  letter-spacing: -.5px;
}

#header h1 a,
#site-name a {
  color: inherit;
  text-decoration: none;
}

#header h1 a:hover,
#site-name a:hover {
  color: var(--accent-light);
}

/* Description du blog */
#header p,
#blog-description {
  font-family:  var(--font-ui);
  font-size:    .85rem;
  color:        var(--accent-light);
  letter-spacing: .3px;
  margin-top:   2px;
}

/* Badge BTS SIO SISR affiché à côté du titre */
#header h1::after,
#site-name::after {
  content:       'BTS SIO · SISR';
  display:       inline-block;
  margin-left:   12px;
  font-family:   var(--font-ui);
  font-size:     .65rem;
  font-weight:   600;
  letter-spacing:.8px;
  text-transform: uppercase;
  color:         var(--primary-dark);
  background:    var(--accent);
  padding:       2px 8px;
  border-radius: var(--radius);
  vertical-align: middle;
}

/* ── Navigation principale ──────────────────────────────────── */
#nav,
#main-menu {
  background: var(--primary);
}

#nav ul,
#main-menu ul {
  max-width: calc(var(--max-width) + var(--sidebar-w) + 40px);
  margin: 0 auto;
  padding: 0 20px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

#nav li a,
#main-menu li a {
  display:      block;
  font-family:  var(--font-ui);
  font-size:    .85rem;
  font-weight:  500;
  color:        rgba(255,255,255,.85);
  padding:      12px 16px;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition:   color .2s, border-color .2s;
}

#nav li a:hover,
#main-menu li a:hover,
#nav li.selected a,
#main-menu li.selected a {
  color:         #ffffff;
  border-bottom-color: var(--accent);
}

/* ── Layout principal : contenu + sidebar ───────────────────── */
#content-wrapper,
#content {
  display:   flex;
  gap:       32px;
  max-width: calc(var(--max-width) + var(--sidebar-w) + 40px);
  margin:    32px auto;
  padding:   0 20px;
  align-items: flex-start;
}

/* Zone des articles */
#main-content,
#entries {
  flex: 1 1 0;
  min-width: 0;
}

/* Sidebar */
#sidebar,
#sidebar-one,
.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
}

/* ── Articles ───────────────────────────────────────────────── */
.post,
.entry {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       28px 32px;
  margin-bottom: 24px;
  box-shadow:    var(--shadow-sm);
  transition:    box-shadow .2s;
}

.post:hover,
.entry:hover {
  box-shadow: var(--shadow);
}

/* En-tête de l'article */
.post-header,
.entry-header {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* Titre de l'article */
.post-title,
.entry-title {
  font-family:  var(--font-ui);
  font-size:    1.3rem;
  font-weight:  600;
  line-height:  1.3;
  margin-bottom: 8px;
}

.post-title a,
.entry-title a {
  color:           var(--primary);
  text-decoration: none;
  transition:      color .2s;
}

.post-title a:hover,
.entry-title a:hover {
  color: var(--primary-light);
}

/* Métadonnées (date, auteur, catégorie) */
.post-info,
.entry-info,
.post-meta {
  font-family: var(--font-ui);
  font-size:   .8rem;
  color:       var(--text-muted);
  display:     flex;
  flex-wrap:   wrap;
  gap:         12px;
  align-items: center;
}

.post-info a,
.entry-info a,
.post-meta a {
  color:           var(--primary);
  text-decoration: none;
}

.post-info a:hover,
.entry-info a:hover,
.post-meta a:hover {
  text-decoration: underline;
}

/* Icônes texte pour les métadonnées */
.post-info .date::before   { content: '📅 '; }
.post-info .author::before { content: '👤 '; }
.post-info .cat::before    { content: '📂 '; }

/* Corps de l'article */
.post-content,
.entry-content {
  font-size:   1rem;
  color:       var(--text);
  line-height: 1.8;
}

.post-content p,
.entry-content p { margin-bottom: 1.1em; }

/* Titres dans l'article */
.post-content h2,
.entry-content h2 {
  font-family: var(--font-ui);
  font-size:   1.2rem;
  font-weight: 600;
  color:       var(--primary-dark);
  margin:      1.8em 0 .6em;
  padding-left: 12px;
  border-left:  3px solid var(--accent);
}

.post-content h3,
.entry-content h3 {
  font-family: var(--font-ui);
  font-size:   1.05rem;
  font-weight: 600;
  color:       var(--text);
  margin:      1.4em 0 .5em;
}

/* Liens dans le contenu */
.post-content a,
.entry-content a {
  color:           var(--primary-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-content a:hover,
.entry-content a:hover { color: var(--primary-dark); }

/* Blocs de code */
.post-content pre,
.entry-content pre,
pre {
  background:    var(--code-bg);
  color:         var(--code-text);
  font-family:   var(--font-mono);
  font-size:     .85rem;
  line-height:   1.65;
  border-radius: var(--radius);
  padding:       16px 20px;
  overflow-x:    auto;
  margin:        1.4em 0;
  border-left:   4px solid var(--accent);
}

.post-content code,
.entry-content code,
code {
  font-family:  var(--font-mono);
  font-size:    .88em;
  background:   var(--surface-alt);
  color:        var(--primary);
  padding:      1px 6px;
  border-radius: 4px;
  border:        1px solid var(--border);
}

pre code {
  background: transparent;
  color:      inherit;
  padding:    0;
  border:     none;
  border-radius: 0;
  font-size:  1em;
}

/* Tableaux */
.post-content table,
.entry-content table {
  width:          100%;
  border-collapse: collapse;
  font-family:    var(--font-ui);
  font-size:      .9rem;
  margin:         1.4em 0;
}

.post-content th,
.entry-content th {
  background:  var(--primary);
  color:       #fff;
  font-weight: 600;
  padding:     10px 14px;
  text-align:  left;
}

.post-content td,
.entry-content td {
  padding:     9px 14px;
  border-bottom: 1px solid var(--border);
}

.post-content tr:nth-child(even) td,
.entry-content tr:nth-child(even) td {
  background: var(--surface-alt);
}

/* Citations */
.post-content blockquote,
.entry-content blockquote {
  border-left:  4px solid var(--primary-light);
  background:   var(--surface-alt);
  padding:      14px 20px;
  margin:       1.4em 0;
  color:        var(--text-muted);
  font-style:   italic;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Images */
.post-content img,
.entry-content img {
  max-width:    100%;
  height:       auto;
  border-radius: var(--radius);
  display:      block;
  margin:       1.2em auto;
  border:       1px solid var(--border);
}

/* Listes */
.post-content ul,
.post-content ol,
.entry-content ul,
.entry-content ol {
  padding-left: 1.5em;
  margin-bottom: 1em;
}

.post-content li,
.entry-content li { margin-bottom: .35em; }

/* ── Tags / catégories de l'article ────────────────────────── */
.post-tags,
.entry-tags,
.tags {
  display:     flex;
  flex-wrap:   wrap;
  gap:         8px;
  margin-top:  18px;
  padding-top: 16px;
  border-top:  1px solid var(--border);
}

.post-tags a,
.entry-tags a,
.tags a {
  font-family:  var(--font-ui);
  font-size:    .75rem;
  font-weight:  500;
  color:        var(--tag-text);
  background:   var(--tag-bg);
  padding:      3px 10px;
  border-radius: 20px;
  text-decoration: none;
  border:        1px solid #c5d9f0;
  transition:   background .2s, color .2s;
}

.post-tags a:hover,
.entry-tags a:hover,
.tags a:hover {
  background: var(--primary);
  color:      #ffffff;
  border-color: var(--primary);
}

/* ── Pied de l'article : commentaires & actions ────────────── */
.post-footer,
.entry-footer {
  display:     flex;
  justify-content: space-between;
  align-items: center;
  margin-top:  16px;
  padding-top: 14px;
  border-top:  1px solid var(--border);
  font-family: var(--font-ui);
  font-size:   .8rem;
  color:       var(--text-muted);
}

.post-footer a,
.entry-footer a {
  color:           var(--primary);
  text-decoration: none;
  font-weight:     500;
}

.post-footer a:hover,
.entry-footer a:hover { text-decoration: underline; }

/* Lien "Lire la suite" */
.post-content .more,
.entry-content .more,
a.more-link,
.read-more {
  display:       inline-block;
  font-family:   var(--font-ui);
  font-size:     .85rem;
  font-weight:   500;
  color:         var(--primary);
  background:    var(--surface-alt);
  border:        1px solid var(--primary-light);
  border-radius: var(--radius);
  padding:       7px 16px;
  margin-top:    12px;
  text-decoration: none;
  transition:    background .2s, color .2s;
}

.post-content .more:hover,
a.more-link:hover,
.read-more:hover {
  background: var(--primary);
  color:      #ffffff;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
#sidebar .widget,
.sidebar .widget,
#sidebar-one .widget {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       20px;
  margin-bottom: 20px;
  box-shadow:    var(--shadow-sm);
}

/* Titre de widget */
#sidebar .widget-title,
.sidebar .widget-title,
#sidebar-one .widget-title,
#sidebar h2,
#sidebar-one h2,
.sidebar h2 {
  font-family:   var(--font-ui);
  font-size:     .8rem;
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color:         var(--primary);
  padding-bottom: 10px;
  margin-bottom:  12px;
  border-bottom:  2px solid var(--accent);
}

/* Listes dans les widgets */
#sidebar ul,
.sidebar ul,
#sidebar-one ul {
  list-style: none;
  padding:    0;
}

#sidebar ul li,
.sidebar ul li,
#sidebar-one ul li {
  padding:      6px 0;
  border-bottom: 1px solid var(--surface-alt);
  font-family:  var(--font-ui);
  font-size:    .88rem;
  color:        var(--text-muted);
}

#sidebar ul li:last-child,
.sidebar ul li:last-child,
#sidebar-one ul li:last-child {
  border-bottom: none;
}

#sidebar ul li a,
.sidebar ul li a,
#sidebar-one ul li a {
  color:           var(--text);
  text-decoration: none;
  transition:      color .2s;
}

#sidebar ul li a:hover,
.sidebar ul li a:hover,
#sidebar-one ul li a:hover {
  color: var(--primary-light);
}

/* Formulaire de recherche */
#sidebar .search-form,
.sidebar .search-form,
#search-form {
  display: flex;
  gap:     6px;
}

#sidebar .search-form input[type="text"],
.sidebar .search-form input[type="text"],
#search-form input[type="text"] {
  flex:         1;
  font-family:  var(--font-ui);
  font-size:    .85rem;
  color:        var(--text);
  background:   var(--bg);
  border:       1px solid var(--border);
  border-radius: var(--radius);
  padding:      7px 12px;
  outline:      none;
  transition:   border-color .2s;
}

#sidebar .search-form input[type="text"]:focus,
.sidebar .search-form input[type="text"]:focus,
#search-form input[type="text"]:focus {
  border-color: var(--primary-light);
}

#sidebar .search-form button,
.sidebar .search-form button,
#search-form button,
#sidebar .search-form input[type="submit"],
#search-form input[type="submit"] {
  font-family:   var(--font-ui);
  font-size:     .82rem;
  font-weight:   500;
  color:         #ffffff;
  background:    var(--primary);
  border:        none;
  border-radius: var(--radius);
  padding:       7px 14px;
  cursor:        pointer;
  transition:    background .2s;
}

#sidebar .search-form button:hover,
#search-form button:hover,
#search-form input[type="submit"]:hover {
  background: var(--primary-light);
}

/* ── Commentaires ───────────────────────────────────────────── */
#comments {
  margin-top: 32px;
}

#comments h2 {
  font-family:   var(--font-ui);
  font-size:     1.1rem;
  font-weight:   600;
  color:         var(--primary-dark);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom:  2px solid var(--border);
}

.comment {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       20px 24px;
  margin-bottom: 14px;
  box-shadow:    var(--shadow-sm);
}

.comment-title {
  font-family:  var(--font-ui);
  font-size:    .85rem;
  font-weight:  600;
  color:        var(--primary);
  margin-bottom: 6px;
}

.comment-content {
  font-size:   .95rem;
  line-height: 1.7;
  color:       var(--text);
}

/* Formulaire de commentaire */
#comment-form {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       24px 28px;
  margin-top:    24px;
  box-shadow:    var(--shadow-sm);
}

#comment-form h3 {
  font-family:   var(--font-ui);
  font-size:     1rem;
  font-weight:   600;
  color:         var(--primary-dark);
  margin-bottom: 16px;
}

#comment-form label {
  font-family:  var(--font-ui);
  font-size:    .82rem;
  font-weight:  500;
  color:        var(--text-muted);
  display:      block;
  margin-bottom: 4px;
}

#comment-form input,
#comment-form textarea {
  width:         100%;
  font-family:   var(--font-body);
  font-size:     .95rem;
  color:         var(--text);
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       9px 12px;
  margin-bottom: 14px;
  outline:       none;
  transition:    border-color .2s;
}

#comment-form input:focus,
#comment-form textarea:focus {
  border-color: var(--primary-light);
}

#comment-form textarea { min-height: 120px; resize: vertical; }

#comment-form input[type="submit"] {
  width:       auto;
  font-family: var(--font-ui);
  font-size:   .88rem;
  font-weight: 500;
  color:       #ffffff;
  background:  var(--primary);
  border:      none;
  cursor:      pointer;
  padding:     10px 24px;
  border-radius: var(--radius);
  transition:  background .2s;
}

#comment-form input[type="submit"]:hover {
  background: var(--primary-light);
}

/* ── Pagination ─────────────────────────────────────────────── */
#pager,
.post-nav,
.pagination {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             8px;
  margin:          32px 0;
  font-family:     var(--font-ui);
  font-size:       .88rem;
}

#pager a,
.pagination a,
.post-nav a {
  color:           var(--primary);
  background:      var(--surface);
  border:          1px solid var(--border);
  border-radius:   var(--radius);
  padding:         7px 14px;
  text-decoration: none;
  transition:      background .2s, color .2s;
}

#pager a:hover,
.pagination a:hover,
.post-nav a:hover {
  background: var(--primary);
  color:      #ffffff;
  border-color: var(--primary);
}

#pager span.current,
.pagination .current {
  color:        var(--primary);
  font-weight:  600;
  padding:      7px 14px;
}

/* ── Footer ─────────────────────────────────────────────────── */
#footer {
  background:    var(--primary-dark);
  border-top:    3px solid var(--accent);
  color:         rgba(255,255,255,.6);
  font-family:   var(--font-ui);
  font-size:     .8rem;
  text-align:    center;
  padding:       20px;
  margin-top:    40px;
}

#footer a {
  color:           var(--accent-light);
  text-decoration: none;
}

#footer a:hover { text-decoration: underline; }

#footer p { margin: 4px 0; }

/* ── Messages flash / alertes ──────────────────────────────── */
.success,
p.success {
  background:    #e6f4ea;
  color:         #1a5c2a;
  border:        1px solid #a8d5b5;
  border-left:   4px solid #2e7d46;
  border-radius: var(--radius);
  padding:       12px 16px;
  font-family:   var(--font-ui);
  font-size:     .9rem;
  margin:        1em 0;
}

.error,
p.error {
  background:    #fde8e8;
  color:         #7a1919;
  border:        1px solid #f5b8b8;
  border-left:   4px solid #c0392b;
  border-radius: var(--radius);
  padding:       12px 16px;
  font-family:   var(--font-ui);
  font-size:     .9rem;
  margin:        1em 0;
}

.notice,
p.notice {
  background:    #e8f2fd;
  color:         #0f3d6e;
  border:        1px solid #b5d0f0;
  border-left:   4px solid var(--primary);
  border-radius: var(--radius);
  padding:       12px 16px;
  font-family:   var(--font-ui);
  font-size:     .9rem;
  margin:        1em 0;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  #content-wrapper,
  #content {
    flex-direction: column;
    gap:            24px;
    padding:        0 12px;
    margin-top:     20px;
  }

  #sidebar,
  #sidebar-one,
  .sidebar {
    width: 100%;
    flex:  none;
  }

  .post,
  .entry {
    padding: 18px 16px;
  }

  #nav ul,
  #main-menu ul {
    padding: 0 12px;
  }

  #nav li a,
  #main-menu li a {
    padding: 10px 10px;
    font-size: .8rem;
  }

  #header .inner {
    padding: 16px 12px 0;
  }

  #header h1::after,
  #site-name::after {
    display: none;
  }
}