/* Shared category layout, extracted from the 12 identical inline blocks. */
/* ===== Ajustements page catégorie (liste + hero) ===== */

    /* Fil d'ariane (haut et bas) */
    .breadcrumb-bar{
      max-width:var(--max);
      margin:0 auto;
      padding:14px 18px 0 18px;
    }
    .breadcrumb-bar--bottom{
      padding:0 18px 14px 18px;
    }
    .breadcrumbs{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:8px;
      font-size:13px;
      color:var(--muted-2);
    }
    .breadcrumbs a{
      color:inherit;
      text-decoration:none;
    }
    .breadcrumbs a:hover{
      text-decoration:underline;
    }
    .breadcrumbs .sep{
      opacity:.75;
    }
    .breadcrumbs .current{
      color:var(--muted);
    }

    /* HERO : image catégorie vraiment plus grande */
    .home-hero .home-hero-inner{
      align-items:stretch;
    }
    .hero-right-card .hero-right-inner{
      height:100%;
      display:flex;
      flex-direction:column;
    }
    .hero-right-card .hero-right-figure{
      margin:0;
      border-radius:18px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      box-shadow:0 18px 50px rgba(0,0,0,.35);
      min-height:440px;
      flex:1;
    }
    .hero-right-card .hero-right-figure img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    /* Badge gris pour "Page relue et enrichie..." */
    .hero-meta-box{
      margin:12px 0 0 0;
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius:14px;
      background:rgba(2,6,23,.035);
      color:var(--muted);
      font-size:13px;
      line-height:1.45;
    }
    .hero-meta-box strong{
      color:var(--text);
    }

    /* Grille fiches */
    .dossier-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:18px;
      align-items:stretch;
    }

    /* 1 mise en avant pleine largeur (image moins large + plus haute) */
    .dossier-card--featured{
      grid-column:1 / -1;
      display:grid;
      grid-template-columns: .78fr 1.72fr;
      gap:18px;
      padding:18px;
      border-radius:22px;
      overflow:hidden;
      align-items:start;
    }
    .dossier-card--featured .dossier-media{
      border-radius:18px;
      overflow:hidden;
      background:#0b1220;
      border:1px solid var(--border);
      height:238px;
      min-height:238px;
      max-height:238px;
    }
    .dossier-card--featured .dossier-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .dossier-card--featured .dossier-title{
      font-size:22px;
      line-height:1.15;
      margin:6px 0 10px 0;
    }
    .dossier-card--featured .dossier-desc{
      font-size:15px;
      line-height:1.6;
      margin:0 0 12px 0;
    }
    .dossier-card--featured .dossier-points{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:8px;
    }
    .dossier-card--featured .dossier-points li{
      position:relative;
      padding-left:14px;
      color:var(--muted);
      line-height:1.45;
    }
    .dossier-card--featured .dossier-points li::before{
      content:"";
      position:absolute;
      left:0;
      top:.62em;
      width:6px;
      height:6px;
      border-radius:999px;
      background:var(--accent);
      opacity:.95;
    }

    /* 2 fiches dessous : plus hautes */
    .dossier-card--wide{
      grid-column:span 2;
      min-height:285px;
      padding:18px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .dossier-card--wide .dossier-title{
      font-size:18px;
      line-height:1.2;
      margin:8px 0 10px 0;
    }
    .dossier-card--wide .dossier-desc{
      font-size:14px;
      line-height:1.65;
      margin:0 0 12px 0;
    }
    .dossier-card--wide .dossier-mini{
      margin-top:auto;
      padding-top:10px;
      border-top:1px solid var(--border);
      color:var(--muted-2);
      font-size:13px;
      line-height:1.5;
    }

    /* ===== Bloc "Pourquoi cette rubrique est utile" (style distinct) ===== */
    .why-society{
      grid-column:1 / -1;
      padding:18px 18px;
      border-radius:22px;
      border:1px solid rgba(2,6,23,.08);
      background:linear-gradient(180deg, rgba(239,68,68,.08), rgba(2,6,23,.02));
      position:relative;
      overflow:hidden;
      box-shadow:0 10px 26px rgba(2,6,23,.06);
    }
    .why-society::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(650px 180px at 15% 0%, rgba(239,68,68,.18), transparent 60%),
        radial-gradient(520px 220px at 85% 10%, rgba(14,165,233,.10), transparent 62%);
      pointer-events:none;
    }
    .why-society-inner{
      position:relative;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:16px;
      align-items:start;
    }
    .why-society h3{
      margin:0 0 8px 0;
      font-size:18px;
      line-height:1.25;
      letter-spacing:-.01em;
    }
    .why-society p{
      margin:0;
      color:var(--muted);
      font-size:14px;
      line-height:1.75;
    }

    /* Ici: les 3 items l'un en dessous de l'autre */
    .why-society .why-pills{
      display:flex;
      flex-direction:column;
      gap:10px;
      align-items:flex-start;
      justify-content:flex-start;
    }
    .why-society .why-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(2,6,23,.10);
      background:rgba(255,255,255,.65);
      color:var(--text);
      font-size:13px;
      line-height:1.2;
      box-shadow:0 8px 18px rgba(2,6,23,.05);
      white-space:nowrap;
    }
    .why-society .why-pill .dot{
      width:8px;
      height:8px;
      border-radius:999px;
      background:var(--accent);
      opacity:.95;
    }
    @media (max-width: 980px){
      .why-society-inner{ grid-template-columns:1fr; }
    }

    /* Placeholder invisible (pour garder la dernière ligne en 4 colonnes, sans 4e carte visible) */
    .dossier-card--ghost{
      visibility:hidden;
      pointer-events:none;
    }

    /* Cartes "Envie de changer de thème ?" avec images */
    .strip-card.strip-card--withimg{
      overflow:hidden;
      padding:0;
    }
    .strip-card--withimg .strip-media{
      height:120px;
      background:#0b1220;
      overflow:hidden;
      border-bottom:1px solid var(--border);
    }
    .strip-card--withimg .strip-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .strip-card--withimg .strip-body{
      padding:16px;
    }

    /* Parcours éditoriaux des pages de rubrique */
    .category-guide-intro{
      max-width:900px;
      margin:-6px 0 22px;
      color:var(--muted);
      font-size:15px;
      line-height:1.7;
    }
    .category-guide .strip-card{
      display:flex;
      flex-direction:column;
      min-height:100%;
    }
    .category-guide .strip-card h3{
      margin:0 0 8px;
    }
    .category-guide .strip-card > p{
      color:var(--muted);
      line-height:1.6;
    }
    .category-guide .dossier-points{
      margin:auto 0 0;
      padding:14px 0 0;
      list-style:none;
      border-top:1px solid var(--border);
      display:grid;
      gap:8px;
    }
    .category-guide .dossier-points a{
      font-weight:650;
      text-decoration:none;
    }
    .category-guide .dossier-points a:hover{
      text-decoration:underline;
    }
    .category-method-card{
      margin-top:18px;
    }
    .category-method-card h3{
      margin-top:0;
    }

    /* Responsive */
    @media (max-width: 980px){
      .dossier-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .dossier-card--featured{ grid-template-columns:1fr; }
      .dossier-card--featured .dossier-media{
        height:260px;
        min-height:260px;
        max-height:260px;
      }
      .dossier-card--wide{ grid-column:span 2; }
      .dossier-card--ghost{ display:none; }
      .hero-right-card .hero-right-figure{ min-height:340px; }
    }
    @media (max-width: 560px){
      .dossier-grid{ grid-template-columns:1fr; }
      .dossier-card--wide{ grid-column:auto; }
      .hero-right-card .hero-right-figure{ min-height:280px; }
    }