/* =============================================================
   Page pilier « Publier une annonce légale » — /annonces-legales/accueil

   Portage du kit Design System « ui_kits/marketing/annonce-legale-publier.html ».

   RÈGLE ABSOLUE : tout est scopé sous .al-pilier.
   Le header, le footer et la navigation du site 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 ou une classe
   Bootstrap nue.

   Les variables --lgdf-* viennent de bootstrap-lgdf.css, déjà chargé
   globalement par le site v2 : on ne les redéfinit pas.
   ============================================================= */

.al-pilier {
  background: var(--lgdf-paper-100);
  padding-bottom: 0;
}

/* -------- Typographie éditoriale -------- */
.al-pilier .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-pilier .display-mega em { font-style: normal; position: relative; display: inline-block; white-space: nowrap; }
.al-pilier .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-pilier .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-pilier .kicker .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--lgdf-red-500); }

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

/* -------- Section head numérotée -------- */
.al-pilier .section-head { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: baseline; margin-bottom: 32px; }
@media (min-width: 768px) { .al-pilier .section-head { grid-template-columns: 160px 1fr; gap: 28px; } }
.al-pilier .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-pilier .section-head .num::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--lgdf-red-500); flex: none; }
.al-pilier .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-pilier .section-head p { margin: 0; color: var(--lgdf-stone-600); font-size: .98rem; line-height: 1.55; max-width: 64ch; }

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

/* -------- Sélecteur d'acte (le hero) -------- */
.al-pilier .picker {
  background: var(--lgdf-paper-0); border: 1px solid var(--lgdf-stone-200);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 28px 64px -30px rgba(2, 19, 61, .28);
}
.al-pilier .picker .strip {
  height: 6px;
  background: linear-gradient(to right, var(--lgdf-ink-700) 0 33%, #ffffff 33% 66%, var(--lgdf-red-500) 66% 100%);
}
.al-pilier .picker .body { padding: 24px 24px 20px; }
.al-pilier .picker .lab {
  font-family: var(--lgdf-font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lgdf-stone-500); margin-bottom: 14px;
}
.al-pilier .acte-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 576px) { .al-pilier .acte-grid { grid-template-columns: 1fr 1fr; } }
.al-pilier .acte {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  background: var(--lgdf-paper-50); border: 1px solid var(--lgdf-stone-200);
  border-radius: 12px; padding: 13px 14px;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
  color: var(--lgdf-ink-900);
}
.al-pilier .acte:hover { border-color: var(--lgdf-ink-500); background: var(--lgdf-paper-0); transform: translateY(-1px); color: var(--lgdf-ink-900); }
.al-pilier .acte:focus-visible { outline: 2px solid var(--lgdf-ink-700); outline-offset: 2px; }
.al-pilier .acte .ico { width: 20px; height: 20px; color: var(--lgdf-ink-500); flex: none; }
.al-pilier .acte .t { display: block; font-weight: 600; font-size: .92rem; letter-spacing: -.005em; line-height: 1.25; }
.al-pilier .acte .p { display: block; font-family: var(--lgdf-font-mono); font-size: .74rem; color: var(--lgdf-stone-500); margin-top: 3px; font-feature-settings: 'tnum'; }
.al-pilier .picker .more {
  border-top: 1px solid var(--lgdf-stone-200); padding: 16px 24px 20px; background: var(--lgdf-paper-50);
  font-size: .86rem; color: var(--lgdf-stone-600);
}
.al-pilier .picker .more a { color: var(--lgdf-ink-700); font-weight: 500; }

/* -------- Pastilles de réassurance -------- */
.al-pilier .trust-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.al-pilier .trust-inline .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-pilier .trust-inline .chip .ico { width: 15px; height: 15px; color: var(--lgdf-stone-500); }
.al-pilier .trust-inline .chip.up { background: var(--lgdf-ink-900); border-color: var(--lgdf-ink-900); color: #fff; }
.al-pilier .trust-inline .chip.up .ico { color: #fff; }

/* -------- Bandeau de preuve -------- */
.al-pilier .proof {
  background: var(--lgdf-paper-0);
  border-top: 1px solid var(--lgdf-stone-200); border-bottom: 1px solid var(--lgdf-stone-200);
  padding: 28px 0;
}
.al-pilier .proof .cell { text-align: center; padding: 10px 8px; }
.al-pilier .proof .v {
  font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.95rem); color: var(--lgdf-ink-900);
  letter-spacing: -.02em; line-height: 1.05; font-feature-settings: 'tnum';
}
.al-pilier .proof .v .u { color: var(--lgdf-red-500); }
.al-pilier .proof .k { font-size: .83rem; color: var(--lgdf-stone-600); margin-top: 7px; line-height: 1.4; }
@media (min-width: 768px) { .al-pilier .proof .cell + .cell { border-left: 1px solid var(--lgdf-stone-200); } }

/* -------- Parcours en étapes --------
   Grille 54px/1fr : le numéro est généré en ::before et occupe la
   première cellule. Le contenu DOIT être enveloppé dans un <div>,
   sinon le paragraphe retombe dans la colonne du numéro. */
.al-pilier .steps { counter-reset: s; display: grid; gap: 2px; }
.al-pilier .step {
  display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start;
  background: var(--lgdf-paper-0); border: 1px solid var(--lgdf-stone-200);
  padding: 20px 22px;
}
.al-pilier .step:first-child { border-radius: 14px 14px 0 0; }
.al-pilier .step:last-child { border-radius: 0 0 14px 14px; }
.al-pilier .step + .step { border-top: 0; }
.al-pilier .step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--lgdf-font-mono); font-size: .82rem; color: var(--lgdf-stone-400);
  border: 1px solid var(--lgdf-stone-200); border-radius: 999px;
  width: 38px; height: 38px; display: grid; place-items: center;
}
.al-pilier .step h3 { font-size: 1rem; font-weight: 600; color: var(--lgdf-ink-900); margin: 8px 0 5px; }
.al-pilier .step p { margin: 0; color: var(--lgdf-stone-600); font-size: .92rem; line-height: 1.55; }
.al-pilier .step .hl { color: var(--lgdf-ink-900); font-weight: 600; }

/* -------- Checklist numérotée (dans une carte) --------
   Composant distinct de .steps : pastille en absolu, texte pleine
   largeur. Ne pas détourner .steps pour ça. */
.al-pilier .checks { list-style: none; counter-reset: c; padding: 0; margin: 0; display: grid; gap: 16px; }
.al-pilier .checks li { position: relative; padding-left: 46px; }
.al-pilier .checks li::before {
  counter-increment: c; content: counter(c, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--lgdf-font-mono); font-size: .74rem; color: var(--lgdf-stone-400);
  border: 1px solid var(--lgdf-stone-200); border-radius: 999px;
  width: 32px; height: 32px; display: grid; place-items: center;
}
.al-pilier .checks li h4 { font-size: .95rem; font-weight: 600; color: var(--lgdf-ink-900); margin: 6px 0 5px; }
.al-pilier .checks li p { margin: 0; color: var(--lgdf-stone-600); font-size: .9rem; line-height: 1.55; }

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

.al-pilier .principles { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .al-pilier .principles--2 { grid-template-columns: 1fr 1fr; gap: 14px 32px; } }
.al-pilier .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-pilier .principles li .ico { width: 18px; height: 18px; color: var(--lgdf-ink-500); margin-top: 2px; }
.al-pilier .principles li b { color: var(--lgdf-ink-900); font-weight: 600; }

/* -------- Encadrés d'alerte (indépendants des .alert Bootstrap) -------- */
.al-pilier .box { border-radius: 12px; padding: 16px 18px; font-size: .93rem; line-height: 1.6; }
.al-pilier .box b, .al-pilier .box strong { font-weight: 600; }
.al-pilier .box--warn { background: #FFF8E6; border: 1px solid #F2DFAF; color: #5B4708; }
.al-pilier .box--danger { background: #FDF0F1; border: 1px solid #F3C6CB; color: #8A1219; }

/* -------- Encart guichet unique -------- */
.al-pilier .gu-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-pilier .gu-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-pilier .gu-anchor .inner { padding: 26px 28px 24px; }
.al-pilier .gu-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: 16px;
}
.al-pilier .gu-anchor h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 12px; color: #fff; }
.al-pilier .gu-anchor p { color: rgba(255,255,255,.72); font-size: .92rem; line-height: 1.6; margin: 0 0 12px; }
.al-pilier .gu-anchor p:last-child { margin-bottom: 0; }
.al-pilier .gu-flow { display: grid; gap: 10px; margin: 16px 0 0; }
.al-pilier .gu-flow .s {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  font-size: .89rem; color: rgba(255,255,255,.82);
}
.al-pilier .gu-flow .s .ico { width: 18px; height: 18px; color: #fff; margin-top: 2px; }
.al-pilier .gu-flow .s.ko .ico { color: var(--lgdf-red-500); }
.al-pilier .gu-anchor b { color: #fff; font-weight: 600; }

/* -------- Motifs de rejet -------- */
.al-pilier .reject { display: grid; gap: 12px; }
.al-pilier .reject .item {
  background: var(--lgdf-paper-0); border: 1px solid var(--lgdf-stone-200);
  border-left: 3px solid var(--lgdf-red-500); border-radius: 12px; padding: 18px 20px;
}
.al-pilier .reject .item h3 { font-size: .98rem; font-weight: 600; color: var(--lgdf-ink-900); margin: 0 0 7px; }
.al-pilier .reject .item p { margin: 0; color: var(--lgdf-stone-600); font-size: .91rem; line-height: 1.55; }
.al-pilier .reject .item .fix { display: block; margin-top: 9px; font-size: .86rem; color: var(--lgdf-ink-700); }
.al-pilier .reject .item .fix b { font-weight: 600; }

.al-pilier .mentions {
  list-style: none; padding: 0; margin: 0; counter-reset: m;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px;
}
.al-pilier .mentions li {
  background: var(--lgdf-paper-0); border: 1px solid var(--lgdf-stone-200); border-radius: 9px;
  padding: 11px 13px; font-size: .88rem; color: var(--lgdf-ink-900);
  display: flex; gap: 9px; align-items: baseline;
}
.al-pilier .mentions li::before {
  counter-increment: m; content: counter(m);
  font-family: var(--lgdf-font-mono); font-size: .72rem; color: var(--lgdf-stone-400); flex: none;
}

/* -------- Coût : renvoi vers la page tarifs -------- */
.al-pilier .cost-card {
  background: var(--lgdf-paper-0); border: 1px solid var(--lgdf-stone-200); border-radius: 16px;
  padding: 24px 26px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
}
.al-pilier .cost-card .range {
  font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--lgdf-ink-900);
  letter-spacing: -.02em; font-feature-settings: 'tnum';
}
.al-pilier .cost-card .range .cur { font-size: .55em; font-weight: 600; color: var(--lgdf-stone-500); }
.al-pilier .cost-card .range .ht { font-size: .42em; font-weight: 600; color: var(--lgdf-stone-500); }
.al-pilier .cost-card .sub { color: var(--lgdf-stone-600); font-size: .92rem; margin-top: 6px; max-width: 52ch; line-height: 1.5; }

/* -------- Rappel d'action intermédiaire -------- */
.al-pilier .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-pilier .cta-mid .t { font-weight: 600; color: var(--lgdf-ink-900); font-size: 1.02rem; }
.al-pilier .cta-mid .s { color: var(--lgdf-stone-600); font-size: .9rem; margin-top: 4px; max-width: 62ch; }

/* -------- FAQ -------- */
.al-pilier .faq-item {
  background: var(--lgdf-paper-0); border: 1px solid var(--lgdf-stone-200);
  border-radius: 12px; margin-bottom: 8px; overflow: hidden;
}
.al-pilier .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-pilier .faq-item > summary::-webkit-details-marker { display: none; }
.al-pilier .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-pilier .faq-item[open] > summary { background: var(--lgdf-paper-50); }
.al-pilier .faq-item[open] > summary::after { content: "–"; }
.al-pilier .faq-item .a { color: var(--lgdf-stone-600); font-size: .93rem; line-height: 1.6; padding: 2px 20px 18px; margin: 0; }

/* -------- Sources -------- */
.al-pilier .sources { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.al-pilier .sources li {
  display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start;
  font-size: .9rem; color: var(--lgdf-stone-600); line-height: 1.5;
}
.al-pilier .sources li .ico { width: 16px; height: 16px; color: var(--lgdf-stone-400); margin-top: 3px; }
.al-pilier .sources li a { color: var(--lgdf-ink-800); }

/* -------- Appel à l'action final -------- */
.al-pilier .cta-final { background: var(--lgdf-ink-900); color: #fff; padding: 56px 0 0; overflow: hidden; }
.al-pilier .cta-final .display-mega { color: #fff; }
.al-pilier .cta-final .lede { color: rgba(255,255,255,.8); }
.al-pilier .cta-final .lede b { color: #fff; }
.al-pilier .cta-final .kicker { color: rgba(255,255,255,.7); }
.al-pilier .cta-final .kicker .dot { background: #fff; }
.al-pilier .cta-final .meta { font-family: var(--lgdf-font-mono); font-size: .82rem; color: rgba(255,255,255,.7); }
.al-pilier .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%);
}
.al-pilier .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-pilier .btn-al:hover { background: var(--lgdf-ink-700); color: #fff; transform: translateY(-1px); }
.al-pilier .btn-al--light { background: #fff; color: var(--lgdf-ink-900); border-color: #fff; }
.al-pilier .btn-al--light:hover { background: #f0f2f7; color: var(--lgdf-ink-900); }
.al-pilier .btn-al--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.al-pilier .btn-al--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.al-pilier .btn-al .ico { width: 17px; height: 17px; }

/* -------- Sommaire -------- */
.al-pilier .toc { margin: 28px 0 0; padding: 18px 20px; background: var(--lgdf-paper-0); border: 1px solid var(--lgdf-stone-200); border-radius: 14px; }
.al-pilier .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-pilier .toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
@media (min-width: 768px) { .al-pilier .toc ul { grid-template-columns: 1fr 1fr; gap: 7px 28px; } }
.al-pilier .toc a { color: var(--lgdf-ink-800); font-size: .9rem; text-decoration: none; }
.al-pilier .toc a:hover { text-decoration: underline; }