/* blog.css — Neo brutal : article, listing, page comparatif + sidebar.
   Dépend de tokens.css + base.css + components.css.
   Le quiz et les fiches restaurant ont leur propre fichier (quiz.css, restaurant.css).
*/


.b-hero-content-blog{
    text-align: center;
    margin: 50px;
}


/* ===== Typographie blog ===== */

body.blog-page{
  font-family: var(--font-sans);
}

.blog-page .b-article{
  font-family: var(--font-sans);
}

.blog-page .b-article p,
.blog-page .b-article li{
  font-size: 16px;
  line-height: 1.7;
}

/* ===== Layout ===== */
.b-wrap{
  width: min(1180px, calc(100% - 32px));
  max-width: 1180px;
  margin: 18px auto 0;
  box-sizing: border-box;
}

.t-article{
  padding: var(--sp-12);
}

.b-article{
  border: var(--b-mid);
  background: var(--c-white);
  box-shadow: var(--sh-xl);
  padding: var(--sp-16);
}

.t-article h2{
  font-weight: var(--fw-bold);
  padding: var(--sp-6);
}

.b-article header{
  border-bottom: var(--b-light);
  padding-bottom: var(--sp-12);
  margin-bottom: var(--sp-12);
}


main img 
{
    width: 80%;
    height: auto;
    border: var(--b-mid);
    box-shadow: var(--sh-xl);
    background: var(--c-white);
    margin: var(--sp-16) 0;
}

/* ===== Classement comparatif ===== */
.alt-ranking{
  display:grid;
  gap:var(--sp-16);
  margin:var(--sp-18) 0;
}

.alt-card{
  border:var(--b-mid);
  box-shadow:var(--sh-m);
  padding:var(--sp-16);
  background:var(--c-white);
}

.alt-card h3{
  margin-top:0;
}

.alt-rank{
  display:inline-block;
  border:var(--b-mid);
  padding:var(--sp-5) var(--sp-10);
  font-weight:900;
  background:var(--c-accent);
  margin-bottom:var(--sp-10);
}

.alt-card--featured{
  background:var(--c-cyan);
}

.alt-proscons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-14);
  margin-top:var(--sp-14);
}

.alt-proscons > div{
  border:2px solid var(--c-black);
  padding:var(--sp-12);
  background:var(--c-white);
}

.source-note{
  font-size:var(--fs-12);
  opacity:.8;
}




.b-article h1{
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-26);
  line-height: 1.15;
}

.b-meta{
  margin: 0;
  font-size: var(--fs-13);
  opacity: .85;
}

/* ===== Typo content ===== */
.b-article p{
  font-size: var(--fs-14);
  line-height: 1.65;
  margin: var(--sp-12) 0;
}

.b-article h2{
  margin: var(--sp-20) 0 var(--sp-10);
  font-size: var(--fs-18);
  line-height: 1.2;
  display:inline-block;
  border: var(--b-mid);
  box-shadow: var(--sh-s);
  padding: var(--sp-8) var(--sp-10);
}

.b-article ul{
  margin: var(--sp-10) 0 var(--sp-12);
  padding-left: 22px;
}

.b-article li{
  margin: var(--sp-6) 0;
  font-size: var(--fs-14);
}

.b-article hr{
  border: 0;
  border-top: var(--b-light);
  margin: var(--sp-16) 0;
}

/* CTA section */
.b-article section[aria-label]{
  padding: var(--sp-12);
}

.b-article section a{
  font-weight: 900;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: var(--b-mid);
  width: 50%;
  margin-bottom: var(--sp-12);
}

.b-article section a:hover{
  background: var(--c-accent);
}

/* ===== Listing (page blog) ===== */
.b-blogItem{
  padding:12px 0;
  border-bottom:var(--b-light);
}

.b-blogItem:last-child{
  border-bottom:none;
}

.b-cardTitle{
  margin:0 0 8px;
}

.b-cardTitle a{
  color:var(--c-ink);
  text-decoration:none;
  font-weight:800;
}

.b-cardTitle a:hover{
  background:var(--c-accent);
}

.b-cardText{
  margin:0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.blog-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.blog-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.blog-card-content {
  padding: 18px;
}

.blog-category {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.blog-card h2 {
  font-size: 1.2rem;
  margin: 0 0 10px;
}

.blog-card h2 a {
  color: inherit;
  text-decoration: none;
}

.blog-card p {
  margin: 0 0 12px;
}

/* ===== Tableaux génériques ===== */
.b-tableWrap{
  overflow-x:auto;
  border: var(--b-mid);
  box-shadow: var(--sh-s);
  background: var(--c-white);
  margin: var(--sp-12) 0;
}

.b-table{
  width:100%;
  border-collapse: collapse;
}

.b-table th,
.b-table td{
  border: var(--b-mid);
  padding: var(--sp-10);
  text-align:left;
  vertical-align: top;
  font-size: var(--fs-13);
}

.b-table th{
  background: var(--c-accent);
  text-transform: uppercase;
}

.b-sidebar{
  border: var(--b-mid);
  background: var(--c-white);
  box-shadow: var(--sh-xl);
  padding: var(--sp-12);
}

.b-sidebar ul{
  list-style:none;
  padding:0;
  margin:0;
}

.b-sidebar li + li{
  margin-top: var(--sp-10);
}

/* ===== Article comparatif / hero / sidebar ===== */
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--sp-16);
  align-items:start;
  margin-bottom: var(--sp-16);
}

.hero-card{
  border: var(--b-mid);
  background: var(--c-accent);
  box-shadow: var(--sh-xl);
  padding: var(--sp-16);
}

.hero-top{
  display:flex;
  gap: var(--sp-10);
  flex-wrap: wrap;
  margin-bottom: var(--sp-12);
}

.hero-card h1{
  margin: 0 0 var(--sp-12);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.02;
  text-transform: uppercase;
}

.hero-lead{
  margin: 0;
  font-size: var(--fs-17);
  line-height: 1.55;
}

/* ===== Sidebar ===== */
.side-stack{
  display:grid;
  gap: var(--sp-16);
}

.side-card{
  border: var(--b-mid);
  background: var(--c-white);
  box-shadow: var(--sh-xl);
  padding: var(--sp-12);
}

.side-card h2,
.side-card h3{
  margin: 0 0 var(--sp-10);
  font-size: var(--fs-17);
  line-height: 1.2;
  display:inline-block;
  border: var(--b-mid);
  box-shadow: var(--sh-s);
  background: var(--c-accent);
  padding: var(--sp-8) var(--sp-10);
}

.side-card ul{
  list-style:none;
  padding:0;
  margin:0;
}

.side-card li + li{
  margin-top: var(--sp-10);
}

.side-card li a{
  display:block;
  text-decoration:none;
  border: var(--b-mid);
  box-shadow: var(--sh-s);
  background: var(--c-white);
  padding: var(--sp-8) var(--sp-10);
  font-size: var(--fs-13);
  font-weight: 700;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.side-card li a:hover{
  transform: translateX(4px);
  box-shadow: var(--sh-m);
  background: var(--c-accent);
}

/* ===== Petits blocs / kicker ===== */
.b-kicker{
  display:inline-block;
  margin: 0 0 var(--sp-10);
  font-size: var(--fs-12);
  font-weight: 800;
  text-transform: uppercase;
  border: var(--b-mid);
  background: var(--c-cyan); 
  box-shadow: var(--sh-s);
  padding: var(--sp-6) var(--sp-10);
}

/* ===== Tableau comparatif ===== */
.b-tableWrap table{
  width:100%;
  min-width:760px;
  border-collapse: collapse;
}

.b-tableWrap th,
.b-tableWrap td{
  border: var(--b-mid);
  padding: var(--sp-10);
  text-align:left;
  vertical-align: top;
  font-size: var(--fs-13);
  line-height: 1.5;
}

.b-tableWrap th{
  background: var(--c-accent);
  text-transform: uppercase;
}

/* ===== Grille de cartes comparatif ===== */
.compare-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-12);
  margin-top: var(--sp-12);
}

.b-miniCard{
  border: var(--b-mid);
  box-shadow: var(--sh-xl);
  padding: var(--sp-12);
  background: var(--c-white);
}

.compare-grid .b-miniCard:nth-child(1){ background: var(--c-cyan); }
.compare-grid .b-miniCard:nth-child(2){ background: var(--c-aqua); }
.compare-grid .b-miniCard:nth-child(3){ background: var(--c-accent); }

.b-miniCard h3{
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-17);
  line-height: 1.2;
  text-transform: uppercase;
}
/* A retenir (keypoints)  */
.b-keypoints{
    margin:48px 0;
    padding:24px;
    border:2px solid var(--c-black);
    border-radius:16px;
    background: var(--c-paper);
}

.b-keypoints h2{
    margin:0 0 24px;
    text-align:center;
}

.b-keypoints__grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
}

.b-keypoint{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:18px;
    border:2px solid var(--c-black);
    border-radius:12px;
    background:var(--c-white);
}

.b-keypoint__icon{
    font-size:1.8rem;
    flex-shrink:0;
}

.b-keypoint strong{
    display:block;
    margin-bottom:8px;
}

.b-keypoint p{
    margin:0;
    line-height:1.6;
}


















/* ===== CTA / FAQ / actions ===== */
.b-cta{
  border: var(--b-mid);
  box-shadow: var(--sh-xl);
  background: var(--c-danger);
  padding: var(--sp-16);
  margin-top: var(--sp-20);
}

.b-faq{
  border: var(--b-mid);
  box-shadow: var(--sh-xl);
  background: var(--c-aqua);
  padding: var(--sp-16);
  margin-top: var(--sp-20);
}

.b-cta p,
.b-faq p{
  margin-top: 0;
}

.actions{
  display:flex;
  gap: var(--sp-10);
  flex-wrap: wrap;
  margin-top: var(--sp-12);
}

.b-hr{
  border: 0;
  border-top: var(--b-light);
  margin: var(--sp-20) 0;
}

.public-room__title{
  border: 3px solid #000;
  padding: 16px;
  margin: 24px 0;
  background: var(--c-warn);
  box-shadow: 6px 6px 0 #000;
}

/* ===== Tableau SEO (utilisé dans les articles) =====
   NB: n'a jamais eu de style desktop dans le fichier d'origine,
   uniquement ces règles mobile. Base rules à ajouter si besoin. */
@media (max-width:480px){
  .seo-table{
    display:block;
    min-width:0;
  }

  .seo-table thead{
    display:none;
  }

  .seo-table tr{
    display:block;
    margin-bottom:16px;
    border:4px solid #000;
  }

  .seo-table td{
    display:block;
    border:none;
    border-bottom:2px solid #000;
  }

  .seo-table td:last-child{
    border-bottom:none;
  }
}

/* ===== Responsive enrichi ===== */
@media (max-width: 900px){
  .hero-grid{
    grid-template-columns: 1fr;
  }

  .side-stack{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compare-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px){
  .side-stack{
    grid-template-columns: 1fr;
  }


  .alt-proscons{
  grid-template-columns:1fr;
}

  .hero-card,
  .side-card,
  .b-cta,
  .b-faq,
  .b-miniCard{
    padding: var(--sp-12);
  }

  .actions .b-link{
    width: 100%;
    text-align: center;
  }

  .hero-card h1{
    font-size: 30px;
  }

  .hero-lead{
    font-size: var(--fs-14);
  }
/* ===== Keypoints ===== */
.b-keypoints{
    padding:18px;
}

.b-keypoint{
    padding:16px;
}


}