/* =============================================================
   Page tarifs des annonces légales — /annonces-legales/tarifs-annonces-legales

   Portage du kit Design System « ui_kits/marketing/tarifs-annonces-legales-2026.html ».

   RÈGLE ABSOLUE : tout est scopé sous .al-tarifs.
   Le header, le footer et la navigation sont rendus par base.html.twig et ne
   doivent recevoir AUCUNE règle d'ici. Aucun sélecteur ne cible body, :root,
   nav, header, footer ni une classe Bootstrap nue.

   Les variables --lgdf-* viennent de bootstrap-lgdf.css, chargé globalement.

   Note : quelques classes de base (display-mega, kicker, section-head, band…)
   sont volontairement redéfinies ici plutôt que partagées avec al-pilier.css.
   Les deux feuilles restent ainsi indépendantes : modifier l'une ne peut pas
   casser l'autre page. C'est un choix assumé au prix d'une duplication limitée.
   ============================================================= */

.al-tarifs { background: var(--lgdf-paper-100); }

/* -------- Typographie éditoriale -------- */
.al-tarifs .display-mega {
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.0;
  color: var(--lgdf-ink-900); font-size: clamp(2rem, 4.4vw, 3.6rem);
  text-wrap: balance; margin: 0;
}
.al-tarifs .display-mega em { font-style: normal; position: relative; display: inline-block; white-space: nowrap; }
.al-tarifs .display-mega em .slash {
  position: absolute; inset: auto -2px -8%; height: 9px;
  background: linear-gradient(to right, var(--lgdf-ink-700) 0 33%, #ffffff 33% 66%, var(--lgdf-red-500) 66% 100%);
  border-radius: 999px; z-index: -1; transform: skewY(-1.5deg);
}

.al-tarifs .kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--lgdf-font-mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lgdf-stone-600); font-weight: 500;
}
.al-tarifs .kicker .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--lgdf-red-500); }

.al-tarifs .tricolor-rule {
  height: 3px; width: 96px; border-radius: 999px;
  background: linear-gradient(to right, var(--lgdf-ink-700) 0 33%, #d8dde8 33% 66%, var(--lgdf-red-500) 66% 100%);
}

.al-tarifs .lede { color: var(--lgdf-stone-700); font-size: 1.02rem; line-height: 1.68; max-width: 68ch; }
.al-tarifs .lede b, .al-tarifs .lede strong { color: var(--lgdf-ink-900); font-weight: 600; }
.al-tarifs .txt-mut { color: var(--lgdf-stone-500); }

/* -------- Bandes -------- */
.al-tarifs .band { padding: 42px 0; }
.al-tarifs .band--alt {
  background: var(--lgdf-paper-0);
  border-top: 1px solid var(--lgdf-stone-200);
  border-bottom: 1px solid var(--lgdf-stone-200);
}

/* -------- Section head numérotée -------- */
.al-tarifs .section-head { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: baseline; margin-bottom: 32px; }
@media (min-width: 768px) { .al-tarifs .section-head { grid-template-columns: 160px 1fr; gap: 28px; } }
.al-tarifs .section-head .num {
  font-family: var(--lgdf-font-mono); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lgdf-stone-500); padding-top: 6px; display: inline-flex; align-items: center; gap: 10px;
}
.al-tarifs .section-head .num::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--lgdf-red-500); flex: none; }
.al-tarifs .section-head h2 {
  margin: 0 0 10px; font-weight: 700; letter-spacing: -.022em;
  color: var(--lgdf-ink-900); font-size: clamp(1.45rem, 2.6vw, 2rem);
}
.al-tarifs .section-head p { margin: 0; color: var(--lgdf-stone-600); font-size: .98rem; line-height: 1.55; max-width: 64ch; }

/* -------- Hero : pastilles + ancrage légal -------- */
.al-tarifs .hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.al-tarifs .hero-meta .chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lgdf-paper-0); border: 1px solid var(--lgdf-stone-200);
  border-radius: 999px; padding: 7px 14px;
  font-family: var(--lgdf-font-mono); font-size: .76rem; color: var(--lgdf-ink-800);
  font-feature-settings: 'tnum';
}
.al-tarifs .hero-meta .chip .ico { width: 15px; height: 15px; color: var(--lgdf-stone-500); }
.al-tarifs .hero-meta .chip.up { background: var(--lgdf-ink-900); border-color: var(--lgdf-ink-900); color: #fff; }
.al-tarifs .hero-meta .chip.up .ico { color: #fff; }

.al-tarifs .legal-anchor {
  background: var(--lgdf-ink-900); color: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(2, 19, 61, .5);
}
.al-tarifs .legal-anchor .strip {
  height: 6px;
  background: linear-gradient(to right, var(--lgdf-ink-700) 0 33%, #ffffff 33% 66%, var(--lgdf-red-500) 66% 100%);
}
.al-tarifs .legal-anchor .inner { padding: 26px 28px 0; }
.al-tarifs .legal-anchor .lab {
  font-family: var(--lgdf-font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 14px;
}
.al-tarifs .legal-anchor .ref { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; margin: 0; color: #fff; }
.al-tarifs .legal-anchor .ref small { display: block; font-weight: 400; color: rgba(255,255,255,.62); font-size: .86rem; margin-top: 8px; line-height: 1.45; }
.al-tarifs .legal-anchor .vig {
  margin: 20px 28px 24px; padding: 14px 16px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13);
  display: flex; align-items: center; gap: 12px;
}
.al-tarifs .legal-anchor .vig .ico { width: 22px; height: 22px; color: #fff; flex: none; }
.al-tarifs .legal-anchor .vig b { display: block; font-family: var(--lgdf-font-mono); font-size: .96rem; color: #fff; }
.al-tarifs .legal-anchor .vig span { font-size: .82rem; color: rgba(255,255,255,.7); }

/* -------- Principes -------- */
.al-tarifs .principles { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .al-tarifs .principles--2 { grid-template-columns: 1fr 1fr; gap: 14px 32px; } }
.al-tarifs .principles li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  color: var(--lgdf-stone-700); font-size: .94rem; line-height: 1.5;
}
.al-tarifs .principles li .ico { width: 18px; height: 18px; color: var(--lgdf-ink-500); margin-top: 2px; }
.al-tarifs .principles li b { color: var(--lgdf-ink-900); font-weight: 600; }

/* -------- Cartes -------- */
.al-tarifs .note-card {
  background: var(--lgdf-paper-0); border: 1px solid var(--lgdf-stone-200); border-radius: 14px;
  padding: 22px 24px;
}
.al-tarifs .note-card .hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.al-tarifs .note-card .hd .ico { width: 18px; height: 18px; color: var(--lgdf-ink-500); flex: none; }
.al-tarifs .note-card .hd h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--lgdf-ink-900); }
.al-tarifs .note-card p { color: var(--lgdf-stone-600); font-size: .92rem; line-height: 1.55; margin: 0 0 12px; }
.al-tarifs .note-card p:last-child { margin-bottom: 0; }

.al-tarifs .taglist { display: flex; flex-wrap: wrap; gap: 7px; }
.al-tarifs .taglist span {
  font-size: .78rem; color: var(--lgdf-ink-800); background: var(--lgdf-paper-100);
  border: 1px solid var(--lgdf-stone-200); border-radius: 7px; padding: 5px 9px;
}

/* -------- Tableaux tarifaires --------
   Les tableaux sont repris À L'IDENTIQUE du contenu existant (montants
   inchangés) : seule la classe de présentation change. Les colonnes de prix
   sont donc ciblées par position, pas par classe. */
.al-tarifs .tcard {
  background: var(--lgdf-paper-0); border: 1px solid var(--lgdf-stone-200);
  border-radius: 16px; overflow: hidden; box-shadow: 0 18px 44px -34px rgba(2, 19, 61, .4);
}
.al-tarifs .t-legend {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  padding: 15px 22px; border-bottom: 1px solid var(--lgdf-stone-200);
  background: var(--lgdf-paper-50);
  font-family: var(--lgdf-font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--lgdf-stone-600);
}
.al-tarifs .t-legend .key { display: inline-flex; align-items: center; gap: 7px; }
.al-tarifs .t-legend .key i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.al-tarifs .t-legend .key i.a16 { background: var(--lgdf-ink-700); }
.al-tarifs .t-legend .key i.a7 { background: var(--lgdf-red-500); }

.al-tarifs .tgrid { width: 100%; border-collapse: collapse; margin: 0; }
.al-tarifs .tgrid thead th {
  font-family: var(--lgdf-font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lgdf-stone-500); font-weight: 500; text-align: left;
  padding: 14px 22px; border-bottom: 1px solid var(--lgdf-stone-200); background: var(--lgdf-paper-0);
  line-height: 1.4;
}
.al-tarifs .tgrid thead th:not(:first-child) { text-align: right; white-space: nowrap; width: 1%; }
/* ⚠️ Le libellé de chaque ligne est un <th scope="row">, pas un <td> — c'est la
   structure du contenu d'origine, conservée telle quelle. Toute règle de
   cellule doit donc viser `td, th`, sinon les libellés perdent leur padding. */
.al-tarifs .tgrid tbody td,
.al-tarifs .tgrid tbody th { padding: 15px 22px; border-bottom: 1px solid var(--lgdf-stone-100); vertical-align: middle; }
.al-tarifs .tgrid tbody tr:last-child td,
.al-tarifs .tgrid tbody tr:last-child th { border-bottom: 0; }
.al-tarifs .tgrid tbody tr:hover td,
.al-tarifs .tgrid tbody tr:hover th { background: var(--lgdf-paper-50); }
.al-tarifs .tgrid tbody th {
  font-weight: 600; color: var(--lgdf-ink-900); font-size: .96rem;
  letter-spacing: -.005em; text-align: left;
}
.al-tarifs .tgrid tbody th a { color: var(--lgdf-ink-900); text-decoration: none; border-bottom: 1px solid var(--lgdf-stone-200); }
.al-tarifs .tgrid tbody th a:hover { color: var(--lgdf-ink-500); border-color: var(--lgdf-ink-500); }
.al-tarifs .tgrid tbody td:nth-child(2) {
  text-align: right; white-space: nowrap; font-feature-settings: 'tnum';
  font-weight: 700; font-size: 1.12rem; color: var(--lgdf-ink-900); letter-spacing: -.01em;
}
.al-tarifs .tgrid tbody td:nth-child(3) {
  text-align: right; white-space: nowrap; font-feature-settings: 'tnum';
  font-weight: 600; font-size: .98rem; color: var(--lgdf-stone-600); font-family: var(--lgdf-font-mono);
}

/* Tableau départements : 1re colonne = annexe, 2e = liste, 3e = tarif */
.al-tarifs .tgrid--dep tbody td:nth-child(2) {
  text-align: left; white-space: normal; font-weight: 400; font-size: .86rem;
  color: var(--lgdf-stone-600); line-height: 1.6; letter-spacing: 0;
}
.al-tarifs .tgrid--dep tbody td:nth-child(3) {
  font-family: var(--lgdf-font-mono); font-weight: 600; color: var(--lgdf-red-600); font-size: .92rem;
}
.al-tarifs .tgrid--dep tbody td:first-child { white-space: nowrap; }
.al-tarifs .tgrid--dep thead th:nth-child(2) { text-align: left; white-space: normal; width: auto; }

/* Bascule en cartes sur petit écran : sans ça les colonnes de prix
   s'écrasent et le tableau déborde horizontalement. */
@media (max-width: 720px) {
  .al-tarifs .tgrid thead { display: none; }
  .al-tarifs .tgrid tbody tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--lgdf-stone-100); }
  .al-tarifs .tgrid tbody tr:last-child { border-bottom: 0; }
  .al-tarifs .tgrid tbody td,
  .al-tarifs .tgrid tbody th { display: block; padding: 3px 18px; border: 0; }
  .al-tarifs .tgrid tbody tr:hover td,
  .al-tarifs .tgrid tbody tr:hover th { background: transparent; }
  .al-tarifs .tgrid tbody td:nth-child(2),
  .al-tarifs .tgrid tbody td:nth-child(3) { text-align: left; display: inline-block; margin-top: 6px; margin-right: 26px; }
  .al-tarifs .tgrid tbody td:nth-child(2)::before {
    content: "France "; font-family: var(--lgdf-font-mono); font-size: .64rem; font-weight: 500;
    color: var(--lgdf-stone-400); text-transform: uppercase; letter-spacing: .08em;
  }
  .al-tarifs .tgrid tbody td:nth-child(3)::before {
    content: "974 / 976 "; font-family: var(--lgdf-font-mono); font-size: .64rem; font-weight: 500;
    color: var(--lgdf-stone-400); text-transform: uppercase; letter-spacing: .08em;
  }
  .al-tarifs .tgrid--dep tbody td:nth-child(2),
  .al-tarifs .tgrid--dep tbody td:nth-child(3) { display: block; margin-right: 0; }
  .al-tarifs .tgrid--dep tbody td:nth-child(2)::before,
  .al-tarifs .tgrid--dep tbody td:nth-child(3)::before { content: none; }
}

.al-tarifs .cap {
  font-family: var(--lgdf-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lgdf-stone-500); margin: 0 0 14px;
}

/* -------- Encadrés -------- */
.al-tarifs .box { border-radius: 12px; padding: 16px 18px; font-size: .93rem; line-height: 1.6; }
.al-tarifs .box b, .al-tarifs .box strong { font-weight: 600; }
.al-tarifs .box--info { background: var(--lgdf-paper-0); border: 1px solid var(--lgdf-stone-200); color: var(--lgdf-stone-700); }
.al-tarifs .box--warn { background: #FFF8E6; border: 1px solid #F2DFAF; color: #5B4708; }

/* -------- Rappel d'action -------- */
.al-tarifs .cta-mid {
  background: var(--lgdf-paper-0); border: 1px solid var(--lgdf-stone-200); border-radius: 16px;
  padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.al-tarifs .cta-mid .t { font-weight: 600; color: var(--lgdf-ink-900); font-size: 1.02rem; }
.al-tarifs .cta-mid .s { color: var(--lgdf-stone-600); font-size: .9rem; margin-top: 4px; max-width: 62ch; }
.al-tarifs .cta-mid .s a { color: var(--lgdf-ink-700); }

.al-tarifs .btn-al {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--lgdf-ink-900); color: #fff; border: 1px solid var(--lgdf-ink-900);
  border-radius: 10px; padding: 12px 22px; font-weight: 600; font-size: .96rem; text-decoration: none;
  transition: background .14s ease, transform .14s ease;
}
.al-tarifs .btn-al:hover { background: var(--lgdf-ink-700); color: #fff; transform: translateY(-1px); }
.al-tarifs .btn-al--light { background: #fff; color: var(--lgdf-ink-900); border-color: #fff; }
.al-tarifs .btn-al--light:hover { background: #f0f2f7; color: var(--lgdf-ink-900); }
.al-tarifs .btn-al--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.al-tarifs .btn-al--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.al-tarifs .btn-al .ico { width: 17px; height: 17px; }

/* -------- FAQ -------- */
.al-tarifs .faq-item {
  background: var(--lgdf-paper-0); border: 1px solid var(--lgdf-stone-200);
  border-radius: 12px; margin-bottom: 8px; overflow: hidden;
}
.al-tarifs .faq-item > summary {
  font-weight: 600; color: var(--lgdf-ink-900); font-size: .98rem;
  padding: 16px 20px; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.al-tarifs .faq-item > summary::-webkit-details-marker { display: none; }
.al-tarifs .faq-item > summary::after {
  content: "+"; font-family: var(--lgdf-font-mono); font-size: 1.15rem;
  color: var(--lgdf-stone-400); flex: none; line-height: 1;
}
.al-tarifs .faq-item[open] > summary { background: var(--lgdf-paper-50); }
.al-tarifs .faq-item[open] > summary::after { content: "–"; }
.al-tarifs .faq-item .a { color: var(--lgdf-stone-600); font-size: .93rem; line-height: 1.6; padding: 2px 20px 18px; margin: 0; }

/* -------- Sommaire -------- */
.al-tarifs .toc { margin: 26px 0 0; padding: 18px 20px; background: var(--lgdf-paper-0); border: 1px solid var(--lgdf-stone-200); border-radius: 14px; }
.al-tarifs .toc .lab { font-family: var(--lgdf-font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lgdf-stone-500); margin-bottom: 10px; }
.al-tarifs .toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
@media (min-width: 768px) { .al-tarifs .toc ul { grid-template-columns: 1fr 1fr; gap: 7px 28px; } }
.al-tarifs .toc a { color: var(--lgdf-ink-800); font-size: .9rem; text-decoration: none; }
.al-tarifs .toc a:hover { text-decoration: underline; }

/* -------- Appel à l'action final -------- */
.al-tarifs .cta-final { background: var(--lgdf-ink-900); color: #fff; padding: 54px 0 0; overflow: hidden; }
.al-tarifs .cta-final .display-mega { color: #fff; }
.al-tarifs .cta-final .lede { color: rgba(255,255,255,.8); }
.al-tarifs .cta-final .lede b { color: #fff; }
.al-tarifs .cta-final .kicker { color: rgba(255,255,255,.7); }
.al-tarifs .cta-final .kicker .dot { background: #fff; }
.al-tarifs .cta-final .meta { font-family: var(--lgdf-font-mono); font-size: .82rem; color: rgba(255,255,255,.7); }
.al-tarifs .cta-final .tricolor-strip-thick {
  height: 8px; width: 100%;
  background: linear-gradient(to right, var(--lgdf-ink-700) 0 33%, #ffffff 33% 66%, var(--lgdf-red-500) 66% 100%);
}