/* Habillage de webdesign-inspiration.com pour le blog /article (fab, 2026-11-11) :
   même barre du haut, même pied de page, même police, couleurs et cartes plus proches du site.
   Chargée après styles.min.css et style.css (functions.php), qu'elle surcharge.
   Les sections « Barre du haut » et « Pied de page » sont copiées de
   app/website/public/assets/css/wdi.css : garder les deux en accord. */

:root {
  --wdi-green: #57cfb0;
  --wdi-blue: #2ab5d3;
  --wdi-footer: #596668;
  --wdi-ink: #1f2427;
  --wdi-muted: #6b7478;
  --wdi-link: #17809a;          /* bleu de WDI assombri : lisible en texte courant */
  --wdi-line: #e5eaec;
  --wdi-page: #f5f7f8;
}

/* Conteneurs aux largeurs de WDI (Bootstrap par défaut) : nav, contenu et pied alignés
   comme sur le site, alors que le thème s'arrête à 1240 px. */
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ===== Barre du haut (copie de wdi.css) ================================= */

/* Remises à zéro : le thème grossit le texte (18 px / 32 px) et les h3 (30 px). */
.c-header {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  padding: 0 !important;        /* le thème force 10 px sur mobile */
}
.c-header ul { margin-bottom: 0; }
.c-header .navbar-nav { padding-left: 0; }
.c-navbar-expand h3 { line-height: 1.2; font-family: inherit; }
.c-navbar-expand ul li { margin-bottom: 0; }
.c-header .c-nav-btn.white { background: transparent; } /* le thème donne un fond blanc à .white */
/* Lien « Blog » de la nav : on y est. */
.c-header .c-nav-btn > a[href^="/article/"] { background: rgba(255, 255, 255, 0.15); }

.c-header {
  background: var(--wdi-blue);
  background: linear-gradient(-45deg, var(--wdi-green), var(--wdi-blue));
}
.c-header .navbar { padding: 0; }
.c-header .navbar-brand { padding: 0; margin: 0; }
.c-header .navbar-logo {
  display: block;
  width: 236px;
  height: 25px;
  text-indent: -20000px;
  overflow: hidden;
  background: url(/assets/images/web-design-inspiration.png) no-repeat;
  margin: 20px 80px 20px 0;
}
@media (max-width: 450px) {
  .c-header .navbar-logo {
    width: 150px;
    height: 16px;
    background-size: 150px 16px;
    margin: 25px 10px 24px 0;
  }
}
.c-header .navbar-toggler { border-color: rgba(255, 255, 255, 0.5); }

.c-header .c-nav-btn > a,
.c-header .c-nav-btn > button {
  display: inline-block;
  font-size: 18px;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 10px 30px 8px;
  margin-top: 4px;
  border-radius: 2px;
  text-decoration: none;
}
.c-header .c-nav-btn > a:hover,
.c-header .c-nav-btn > button:hover { background: rgba(255, 255, 255, 0.15); }
.c-header .c-nav-btn i { font-size: 12px; }
.c-header .c-nav-btn.white > a,
.c-header .c-nav-btn.white > button {
  background: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.c-header .c-nav-btn.white > button:hover { background: rgba(255, 255, 255, 0.4); }
.c-header .c-nav-btn.login > button { padding-left: 12px; padding-right: 15px; }
.c-header .c-nav-btn.signup > button {
  margin-left: 8px;
  padding-left: 18px;
  padding-right: 18px;
  background: #fff;
  color: var(--wdi-blue);
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.c-header .c-nav-btn.signup > button:hover { background: #f1fbfd; }
@media (max-width: 991.98px) {
  .c-header .c-nav-btn.signup > button { margin: 8px 0 0; }
}
@media (min-width: 992px) {
  .c-header .c-nav-btn.login { margin-left: 30px; }
  /* Jamais sur deux lignes : le libellé reste d'un bloc, l'espacement se resserre
     selon la largeur (calé sur les libellés français, les plus longs). */
  .c-header .c-nav-btn > a,
  .c-header .c-nav-btn > button { white-space: nowrap; padding-left: 22px; padding-right: 22px; }
  .c-header .navbar-logo { margin-right: 48px; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .c-header .navbar-logo { margin-right: 24px; }
  .c-header .c-nav-btn > a,
  .c-header .c-nav-btn > button { font-size: 16px; padding-left: 14px; padding-right: 14px; }
  .c-header .c-nav-btn.login { margin-left: 12px; }
  .c-header .c-nav-btn.login > button { padding-left: 12px; padding-right: 14px; }
  .c-header .c-nav-btn.signup > button { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .c-header .navbar-logo {
    width: 180px;
    height: 19px;
    background-size: 180px 19px;
    margin: 23px 12px 23px 0;
  }
  .c-header .c-nav-btn > a,
  .c-header .c-nav-btn > button { font-size: 15px; padding-left: 9px; padding-right: 9px; }
  .c-header .c-nav-btn.login { margin-left: 4px; }
  .c-header .c-nav-btn.login > button { padding-left: 9px; padding-right: 10px; }
  .c-header .c-nav-btn.signup > button { margin-left: 4px; padding-left: 12px; padding-right: 12px; }
}

/* Menu « Inspirations » déplié par wdi.js */
.c-navbar-expand {
  height: 0;
  overflow: hidden;
  transition: height 200ms ease;
}
.c-navbar-expand.on { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.c-navbar-expand-categories { padding: 30px 0; }
.c-navbar-expand h3 {
  color: #fff;
  font-size: 16px;
  font-weight: 100;
  margin-bottom: 20px;
}
.c-navbar-expand h3 strong { font-weight: 400; }
/* Écart fixé par gap : certaines listes sont générées sans espace entre les <li> (bulles collées). */
.c-navbar-expand ul { display: flex; flex-wrap: wrap; gap: 0 6px; padding: 0; margin: 0; }
.c-navbar-expand ul li { list-style-type: none; }
.c-navbar-expand ul li a,
.c-navbar-expand ul li .lc {
  padding: 5px 20px;
  background: #fff;
  margin: 0 0 6px;
  display: inline-block;
  border-radius: 100px;
  color: #222;
  text-decoration: none;
  cursor: pointer;
}
.c-navbar-expand ul li a:hover,
.c-navbar-expand ul li .lc:hover { color: var(--wdi-blue); }
.c-navbar-expand p { color: #eee; }
.c-navbar-expand p a { color: #fff; text-decoration: underline; }
.c-filter-promo {
  font-size: 18px;
  margin-top: 45px;
}

.color-pastille {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #bbb;
  margin-right: 5px;
  vertical-align: -3px;
  border-radius: 10px;
}
.color-pastille-red { background-color: #ff0000; }
.color-pastille-orange { background-color: #ffa500; }
.color-pastille-purple { background-color: #7f007f; }
.color-pastille-magenta { background-color: #ff00ff; }
.color-pastille-yellow { background-color: #ffff00; }
.color-pastille-green { background-color: #008000; }
.color-pastille-blue { background-color: #0000ff; }
.color-pastille-grey { background-color: #808080; }
.color-pastille-white { background-color: #ffffff; }
.color-pastille-black { background-color: #000000; }
.color-pastille-cyan { background-color: #00ffff; }
.color-pastille-pink { background-color: #ec4899; } /* 2026-10-27, même teinte que wi_color.code */

/* ===== Pied de page (copie de wdi.css) ================================== */

/* Pied de page */
footer {
  margin-top: 50px;
  padding: 100px 0;
  background: var(--wdi-footer);
  color: #eee;
}
footer a { color: #e8eff0; text-decoration: none; }
footer a:hover { color: #fff; }
.horlinks { padding-left: 0; }
.horlinks li { list-style-type: none; display: inline; margin: 0 20px 0 0; }
.social { padding-left: 0; }
.social li { display: inline-block; margin-left: 10px; font-size: 20px; }
.language-widget a { text-decoration: underline; }
footer { font-family: "Inter", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; }
footer h4 { color: #fff; font-size: 1.5rem; line-height: 1.2; margin-bottom: .5rem; font-family: inherit; font-weight: 500; }
footer p { font-size: 14px; line-height: 25px; }
footer .horlinks li, footer .social li { margin-bottom: 0; }

/* ===== Restylage léger du blog ========================================= */

body {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  background: var(--wdi-page);
  color: var(--wdi-ink);
  font-size: 17px;
  line-height: 1.75;
}
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a,
.h1, .h2, .h3, .h4, .h5 {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  color: var(--wdi-ink);
  letter-spacing: -0.01em;
}
h1, h1 a, .h1 { font-weight: 800; letter-spacing: -0.02em; }
a { color: var(--wdi-link); }
a:hover { color: var(--wdi-blue); }
.text-muted { color: var(--wdi-muted) !important; }

/* Cartes : coins arrondis et filet fin, comme les encarts de WDI, plutôt que des ombres. */
.c-main,
.c-secondary,
.c-article-list,
#sidebar > .wp-block-group {
  background: #fff;
  border: 1px solid var(--wdi-line);
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
}
.c-secondary .c-secondary-body { background: transparent; }
.c-secondary > h1,
.c-secondary > h4,
#sidebar > .wp-block-group > h3 {
  background: #fff;
  box-shadow: none;
  border-bottom: 1px solid var(--wdi-line);
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  padding: 16px 24px;
  margin: 0;
}
#sidebar > .wp-block-group { background: #fff; }
#sidebar > .wp-block-group > .wp-block-group { padding: 20px 24px; }
#sidebar .wp-block-latest-posts li { border-bottom-color: var(--wdi-line); }
#sidebar a { text-decoration: none; }

/* Liste des articles : titre de page et cartes posés sur le fond, comme les galeries de WDI
   (le thème encadrait la liste dans une seconde carte). */
.c-archive {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.c-archive > h1 {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 20px;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 800;
}
.c-archive .c-secondary-body { padding: 0; }
.c-archive .archive-meta:empty { display: none; }
.c-archive .container { padding: 0; }
.c-article-list {
  margin-bottom: 20px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.c-article-list:hover { border-color: #cfe9ef; box-shadow: 0 6px 24px rgba(31, 36, 39, 0.06); }
.c-article-list .left img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 992px) {
  /* Colonne d'image de largeur fixe : les vignettes n'ont pas toutes le même format. */
  /* Image hors du flux : c'est le texte qui donne sa hauteur à la carte. En flux, une vignette
     en portrait étirait la carte à sa hauteur naturelle (grand vide autour du texte). */
  .c-article-list .left { flex: 0 0 260px !important; align-self: stretch; position: relative; min-height: 175px; }
  .c-article-list .left img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .c-article-list .right { flex: 1 1 auto !important; }
}
.c-article-list h2.entry-title,
.c-article-list h2.entry-title a {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  text-decoration: none;
}
.c-article-list h2.entry-title { margin: 8px 0 16px; }
.c-article-list h2.entry-title a:hover { color: var(--wdi-link); }
.c-article-list .entry-date { font-size: 14px; }

/* Catégories : pastilles arrondies, comme les puces de WDI. */
.entry-category { line-height: 2; }
/* En tête d'article, the_category( ', ' ) sépare par des virgules : masquées (font-size 0). */
.c-main .c-main-header .c-main-header-cat { font-size: 0; line-height: 0; }
.entry-category a,
.c-main .c-main-header .c-main-header-cat a {
  display: inline-block;
  padding: 2px 12px;
  margin: 0 4px 4px 0;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: #1d6b58;
  background: #e9f8f3;
}
.entry-category a:hover,
.c-main .c-main-header .c-main-header-cat a:hover { background: var(--wdi-green); color: #fff; }

/* Article */
.c-main { margin-top: 40px; }
.c-main .c-main-header { padding: 40px 30px 24px; }
.c-main .c-main-header h1 { font-size: 40px; line-height: 1.15; margin: 8px 10px 16px; }
@media (max-width: 767.98px) { .c-main .c-main-header h1 { font-size: 28px; } }
.c-main .c-main-picture img { width: 100%; }
.c-main .c-main-body h2 { font-size: 28px; line-height: 1.3; font-weight: 700; }
.c-main .c-main-body h3 { font-size: 22px; line-height: 1.35; font-weight: 700; margin: 40px 0 16px; }
.c-main .c-main-body a { color: var(--wdi-link); text-underline-offset: 3px; }
#toc_container { border-color: var(--wdi-line); border-radius: 12px; box-shadow: none; }

/* « You may also like » */
.c-related .card { border-radius: 12px; overflow: hidden; }
.c-related .card-img-overlay { background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.25)); }

/* Boutons et pagination aux couleurs de WDI */
.btn-primary,
.wp-block-button__link,
.wp-block-search__button {
  background: linear-gradient(-45deg, var(--wdi-green), var(--wdi-blue));
  border: 0;
  border-radius: 100px;
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover,
.wp-block-button__link:hover,
.wp-block-search__button:hover { background: var(--wdi-green); color: #fff; }
.pagination .page-numbers,
.nav-links .page-numbers {
  display: inline-block;
  min-width: 40px;
  padding: 6px 12px;
  margin: 0 2px;
  border-radius: 100px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
}
.nav-links .page-numbers.current { background: linear-gradient(-45deg, var(--wdi-green), var(--wdi-blue)); color: #fff; }

@media (max-width: 767.98px) {
  body { font-size: 16px; line-height: 1.7; }
  .c-article-list h2.entry-title,
  .c-article-list h2.entry-title a { font-size: 20px; }
  .c-main { border-radius: 0; border-left: 0; border-right: 0; }
}