/* ════════════════════════════════════════════════════════════════════
   prix-du-carburant.com — pages.css
   ════════════════════════════════════════════════════════════════════ */

body.inner-page {
  height: auto !important; overflow: auto !important;
  background: #0a0a0a; color: #f4f4f4;
  font-family: 'Inter', sans-serif; padding-top: 60px;
}
.page-hero {
  padding: 72px 24px 64px; text-align: center;
  background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(34,197,94,.1) 0%, transparent 65%), #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.page-hero-label { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#22c55e; margin-bottom:14px; }
.page-hero h1 { font-size:clamp(30px,5vw,50px); font-weight:800; letter-spacing:-.03em; color:#f4f4f4; margin-bottom:14px; line-height:1.15; }
.page-hero p  { font-size:16px; color:rgba(255,255,255,.6); max-width:560px; margin:0 auto; line-height:1.7; }
.page-wrap      { max-width:820px; margin:0 auto; padding:64px 24px 100px; }
.page-wrap-wide { max-width:1100px; margin:0 auto; padding:64px 24px 100px; }

/* Prose */
.prose h2 { font-size:20px; font-weight:800; color:#f4f4f4; margin:44px 0 12px; padding-top:44px; border-top:1px solid rgba(255,255,255,.07); }
.prose h2:first-child { margin-top:0; padding-top:0; border-top:none; }
.prose h3 { font-size:15px; font-weight:700; color:#d4d4d4; margin:22px 0 8px; }
.prose p  { font-size:14.5px; color:rgba(255,255,255,.55); line-height:1.8; margin-bottom:14px; }
.prose ul, .prose ol { padding-left:20px; margin-bottom:14px; }
.prose li { font-size:14.5px; color:rgba(255,255,255,.55); line-height:1.8; margin-bottom:6px; }
.prose a  { color:#22c55e; text-decoration:underline; text-decoration-color:rgba(34,197,94,.4); text-underline-offset:2px; }
.prose a:hover { text-decoration-color:rgba(34,197,94,.8); }
.prose strong { color:#f4f4f4; font-weight:600; }
.prose .ph { background:rgba(251,191,36,.1); border:1px dashed rgba(251,191,36,.4); color:#fbbf24; padding:2px 8px; border-radius:6px; font-size:13px; font-weight:600; }
.prose-meta { display:flex; gap:20px; flex-wrap:wrap; padding:16px 20px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:12px; margin-bottom:40px; }
.prose-meta span { font-size:12.5px; color:rgba(255,255,255,.55); }
.prose-meta strong { color:rgba(255,255,255,.55); }

/* FAQ */
.faq-section { margin-bottom:48px; }
.faq-section-title { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#22c55e; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid rgba(34,197,94,.2); }
.faq-item { border:1px solid rgba(255,255,255,.07); border-radius:12px; margin-bottom:8px; overflow:hidden; transition:border-color .2s; }
.faq-item.open { border-color:rgba(34,197,94,.25); }
.faq-q { width:100%; background:none; border:none; cursor:pointer; padding:18px 20px; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq-q-text { font-size:14.5px; font-weight:600; color:#f4f4f4; line-height:1.45; }
.faq-icon { width:24px; height:24px; flex-shrink:0; background:rgba(255,255,255,.07); border-radius:50%; display:grid; place-items:center; color:rgba(255,255,255,.6); transition:background .2s, transform .25s, color .2s; }
.faq-item.open .faq-icon { background:#22c55e; color:#000; transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .32s ease; padding:0 20px; }
.faq-a-inner { font-size:14px; color:rgba(255,255,255,.6); line-height:1.8; padding-bottom:18px; }
.faq-a-inner a { color:#22c55e; }
.faq-item.open .faq-a { max-height:600px; }
.faq-search-wrap { position:relative; margin-bottom:40px; }
.faq-search-wrap svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.55); pointer-events:none; }
.faq-search { width:100%; padding:13px 16px 13px 42px; background:#111; border:1px solid rgba(255,255,255,.1); color:#f4f4f4; font-family:'Inter',sans-serif; font-size:14px; border-radius:12px; outline:none; transition:border-color .2s; box-sizing:border-box; }
.faq-search:focus { border-color:rgba(34,197,94,.5); }
.faq-search::placeholder { color:rgba(255,255,255,.55); }
.faq-no-results { text-align:center; padding:48px 0; color:rgba(255,255,255,.55); font-size:14px; display:none; }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 360px; gap:48px; align-items:start; }
.contact-info-cards { display:flex; flex-direction:column; gap:16px; }
.info-card { padding:22px; border:1px solid rgba(255,255,255,.07); border-radius:14px; background:#111; display:flex; gap:16px; align-items:flex-start; }
.info-card-icon { width:40px; height:40px; flex-shrink:0; background:rgba(34,197,94,.1); border-radius:10px; display:grid; place-items:center; color:#22c55e; font-size:20px; }
.info-card h3 { font-size:14px; font-weight:700; color:#f4f4f4; margin-bottom:4px; }
.info-card p  { font-size:13px; color:rgba(255,255,255,.6); line-height:1.6; margin:0; }
.info-card a  { color:#22c55e; text-decoration:none; }
.contact-form-card { background:#111; border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:28px; }
.contact-form-card h2 { font-size:18px; font-weight:800; color:#f4f4f4; margin-bottom:22px; }
.form-field { margin-bottom:16px; }
.form-label { display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:7px; }
.form-input,.form-select,.form-textarea { width:100%; padding:11px 14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:#f4f4f4; font-family:'Inter',sans-serif; font-size:14px; border-radius:10px; outline:none; box-sizing:border-box; transition:border-color .2s; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:rgba(34,197,94,.5); }
.form-input::placeholder,.form-textarea::placeholder { color:rgba(255,255,255,.55); }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:38px; }
.form-select option { background:#1a1a1a; }
.form-textarea { resize:vertical; min-height:110px; }
.form-btn { width:100%; padding:13px; background:#22c55e; color:#000; font-family:'Inter',sans-serif; font-size:14px; font-weight:700; border:none; border-radius:10px; cursor:pointer; transition:background .15s, transform .1s; }
.form-btn:hover { background:#16a34a; transform:translateY(-1px); }
.form-success { display:none; text-align:center; padding:20px; color:#22c55e; font-size:14px; font-weight:600; }
.form-success.show { display:block; }
.form-note { font-size:11.5px; color:rgba(255,255,255,.55); text-align:center; margin-top:12px; line-height:1.6; }

/* Actualités */
.actu-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.actu-card { background:#111; border:1px solid rgba(255,255,255,.07); border-radius:16px; overflow:hidden; text-decoration:none; transition:border-color .2s, transform .2s; display:flex; flex-direction:column; }
.actu-card:hover { border-color:rgba(34,197,94,.3); transform:translateY(-3px); }
.actu-card-img { aspect-ratio:16/9; background:#1a1a1a; display:flex; align-items:center; justify-content:center; font-size:40px; overflow:hidden; }
.actu-card-img img { width:100%; height:100%; object-fit:cover; }
.actu-card-body { padding:20px; flex:1; display:flex; flex-direction:column; }
.actu-card-cat { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#22c55e; margin-bottom:10px; }
.actu-card-title { font-size:15px; font-weight:700; color:#f4f4f4; line-height:1.45; margin-bottom:10px; }
.actu-card-excerpt { font-size:13px; color:rgba(255,255,255,.6); line-height:1.65; flex:1; }
.actu-card-meta { display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.06); font-size:12px; color:rgba(255,255,255,.55); }
.actu-card-dot { width:3px; height:3px; background:rgba(255,255,255,.2); border-radius:50%; }
.actu-featured { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; }
.actu-featured .actu-card-img { aspect-ratio:auto; min-height:240px; }
.actu-featured .actu-card-title { font-size:20px; }
.actu-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px; }
.actu-filter-btn { padding:7px 16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.6); font-family:'Inter',sans-serif; font-size:13px; font-weight:500; border-radius:24px; cursor:pointer; transition:all .15s; }
.actu-filter-btn:hover,.actu-filter-btn.active { background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.35); color:#22c55e; }

/* Article */
.article-wrap { max-width:720px; margin:0 auto; padding:64px 24px 100px; }
.article-cat { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#22c55e; margin-bottom:14px; }
.article-title { font-size:clamp(26px,4vw,38px); font-weight:800; letter-spacing:-.025em; color:#f4f4f4; line-height:1.2; margin-bottom:14px; }
.article-meta { font-size:13px; color:rgba(255,255,255,.55); display:flex; gap:16px; flex-wrap:wrap; margin-bottom:36px; }
.article-cover { width:100%; aspect-ratio:16/9; background:#1a1a1a; border-radius:16px; overflow:hidden; margin-bottom:40px; display:flex; align-items:center; justify-content:center; font-size:64px; }
.article-cover img { width:100%; height:100%; object-fit:cover; }

/* About / Presse */
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:32px 0; }
.value-card { padding:24px; background:#111; border:1px solid rgba(255,255,255,.07); border-radius:14px; }
.value-card .vi { font-size:28px; margin-bottom:12px; }
.value-card h3 { font-size:14px; font-weight:700; color:#f4f4f4; margin-bottom:8px; }
.value-card p  { font-size:13px; color:rgba(255,255,255,.6); line-height:1.65; }
.stats-highlight { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:32px 0; padding:28px; background:rgba(34,197,94,.05); border:1px solid rgba(34,197,94,.15); border-radius:16px; }
.sh-item { text-align:center; }
.sh-num { display:block; font-size:28px; font-weight:800; color:#22c55e; }
.sh-lbl { display:block; font-size:12px; color:rgba(255,255,255,.6); margin-top:4px; }
.press-kit-card { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; background:#111; border:1px solid rgba(255,255,255,.1); border-radius:14px; margin-bottom:12px; }
.press-kit-info h3 { font-size:14px; font-weight:700; color:#f4f4f4; margin-bottom:4px; }
.press-kit-info p  { font-size:13px; color:rgba(255,255,255,.6); margin:0; }
.btn-download { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); color:#22c55e; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; border-radius:9px; text-decoration:none; white-space:nowrap; transition:background .15s; }
.btn-download:hover { background:rgba(34,197,94,.2); }

/* Nav active state */
.nav-link.active { color:#fff !important; }

/* Responsive */
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .actu-grid{grid-template-columns:1fr 1fr}
  .actu-featured{grid-template-columns:1fr}
  .actu-featured .actu-card-img{min-height:180px}
  .value-grid{grid-template-columns:1fr 1fr}
  .stats-highlight{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .actu-grid{grid-template-columns:1fr}
  .actu-featured{grid-column:auto}
  .value-grid{grid-template-columns:1fr}
  .stats-highlight{grid-template-columns:1fr 1fr}
  .press-kit-card{flex-direction:column;align-items:flex-start}
  .page-wrap,.article-wrap{padding:40px 18px 80px}
}

/* ══ INTRO ARTICLE ═══════════════════════════════════════════════ */
.article-body > .intro {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,.65);
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ══ EN BREF (articles) ════════════════════════════════════════════ */
.en-bref {
  background: rgba(34,197,94,.06);
  border: 1px solid rgba(34,197,94,.2);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 32px;
  list-style: none;
}
.en-bref > strong:first-child {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #22c55e;
  margin-bottom: 12px;
  letter-spacing: .02em;
}
.en-bref ul {
  padding-left: 18px;
  margin: 0;
  list-style: disc;
}
.en-bref li {
  font-size: 13.5px;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  margin-bottom: 4px;
}
.en-bref li strong { color: #f4f4f4; }

/* ══ SOMMAIRE (articles) — flottant à gauche sur desktop ══════════ */
.table-of-contents {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 36px;
}
.table-of-contents > strong:first-child {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
}
.table-of-contents ul {
  padding-left: 18px;
  margin: 0;
  list-style: none;
}
.table-of-contents li {
  font-size: 13.5px;
  margin-bottom: 8px;
  position: relative;
  padding-left: 12px;
}
.table-of-contents li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(255,255,255,.55);
}
.table-of-contents a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .15s;
}
.table-of-contents a:hover { color: #22c55e; }

/* Desktop : sommaire flottant à gauche */
@media(min-width:1100px) {
  .article-body { position: relative; }
  .article-body > .table-of-contents {
    position: sticky;
    top: 90px;
    float: left;
    width: 200px;
    margin-left: -240px;
    margin-right: 40px;
    margin-bottom: 24px;
    z-index: 10;
  }
  .article-wrap { overflow: visible; }
}

/* ══ TABLEAUX ARTICLES ═══════════════════════════════════════════════ */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 32px;
  font-size: 14px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.article-body table thead tr {
  background: rgba(34,197,94,.08);
  border-bottom: 1px solid rgba(34,197,94,.2);
}
.article-body table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #22c55e;
  white-space: nowrap;
}
.article-body table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .12s;
}
.article-body table tbody tr:last-child { border-bottom: none; }
.article-body table tbody tr:hover { background: rgba(255,255,255,.03); }
.article-body table tbody td {
  padding: 11px 16px;
  color: rgba(255,255,255,.7);
  line-height: 1.5;
}
.article-body table tbody td strong { color: #f4f4f4; }
@media(max-width:600px) {
  .article-body table { font-size: 13px; }
  .article-body table thead th,
  .article-body table tbody td { padding: 9px 10px; }
}
/* Wrapper scroll automatique — injecté via JS uniquement si le tableau déborde */
.article-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.article-body table { width: 100%; }

/* ══ ARTICLES RELATIFS ═══════════════════════════════════════════════ */
.article-related-wrapper {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.article-related-title {
  font-size: 18px;
  font-weight: 800;
  color: #f4f4f4;
  margin-bottom: 20px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.related-card {
  background: #111;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.related-card:hover {
  border-color: rgba(34,197,94,.3);
  transform: translateY(-2px);
}
.related-card-img {
  aspect-ratio: 16/9;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  overflow: hidden;
}
.related-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.related-card-body {
  padding: 16px;
}
.related-card-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #22c55e;
  margin-bottom: 8px;
}
.related-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #f4f4f4;
  line-height: 1.4;
}
.related-card-date {
  font-size: 12px;
  color: rgba(255,255,255,.3);
  margin-top: 10px;
}

/* ══ NAVIGATION BAS D'ARTICLE ════════════════════════════════════════ */
.article-nav {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.article-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  font-size: 13px;
  transition: color .15s;
}
.article-nav-back:hover { color: #f4f4f4; }
.article-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #22c55e;
  color: #000;
  padding: 10px 20px;
  border-radius: 9px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: background .15s;
}
.article-nav-cta:hover { background: #16a34a; }

@media(max-width: 600px) {
  .related-grid { grid-template-columns: 1fr; }
  .article-nav { flex-direction: column; align-items: flex-start; }
}