/**
 * Urbizen — pages internes (Déclaration préalable, Permis de construire, …)
 *
 * Feuille dédiée aux gabarits de pages, chargée en complément de
 * urbizen-homepage.css. Chaque règle est scopée sous `.urbizen-page` :
 * la page d'accueil, qui ne porte pas cette classe, n'est jamais affectée.
 *
 * Composants : hero de page (bandeau encre), fil d'ariane, tableau des
 * seuils, frise de procédure, cartes d'information, liste d'erreurs,
 * encarts. Couleurs et typographies : uniquement les tokens --u-*.
 */

/* ===== Hero de page — bandeau encre, distinct de l'accueil ===== */
.urbizen-page .page-hero {
  position: relative;
  background: var(--u-ink);
  color: #fff;
  padding: clamp(48px, 7vw, 84px) 0 clamp(40px, 6vw, 68px);
  overflow: hidden;
}
.urbizen-page .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.urbizen-page .page-hero .wrap { position: relative; }
.urbizen-page .page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.urbizen-page .fil-ariane {
  font-family: var(--u-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--u-mint);
  margin-bottom: 18px;
}
.urbizen-page .fil-ariane a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
}
.urbizen-page .fil-ariane a:hover { color: #fff; }
.urbizen-page .fil-ariane .sep { margin: 0 8px; color: rgba(255, 255, 255, 0.35); }
.urbizen-page .page-hero h1 {
  font-family: var(--u-font-title);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.urbizen-page .page-hero .lead {
  font-size: clamp(15px, 1.6vw, 17.5px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 58ch;
  margin: 0 0 26px;
}
.urbizen-page .page-hero .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.urbizen-page .page-hero .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: transparent;
}
.urbizen-page .page-hero .btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.urbizen-page .page-hero-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.urbizen-page .page-hero-meta .m {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.urbizen-page .page-hero-meta .m b {
  font-family: var(--u-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--u-mint);
  font-weight: 500;
}
.urbizen-page .page-hero-plan {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--u-radius);
  padding: 14px;
}
.urbizen-page .page-hero-plan svg { display: block; width: 100%; height: auto; }
.urbizen-page .page-hero-plan .hero-plan-tag {
  position: absolute;
  top: -11px;
  left: 14px;
  font-family: var(--u-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--u-mint);
  background: var(--u-ink);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--u-radius-sm);
  padding: 3px 9px;
}
@media (max-width: 900px) {
  .urbizen-page .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page .page-hero-plan { max-width: 420px; }
}

/* ===== Rythme des sections ===== */
.urbizen-page main > section { padding: clamp(48px, 7vw, 76px) 0; }
.urbizen-page .sec-blanc { background: var(--u-surface); border-top: 1px solid var(--u-line); border-bottom: 1px solid var(--u-line); }
.urbizen-page .sec-head p { color: var(--u-ink-soft); }
.urbizen-page .note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--u-ink-faint);
  max-width: 82ch;
  margin-top: 16px;
}

/* ===== Tableau des seuils ===== */
.urbizen-page .seuils-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.urbizen-page .seuils {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--u-surface);
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius);
  overflow: hidden;
  font-size: 14.5px;
  box-shadow: var(--u-shadow-card);
}
.urbizen-page .seuils th {
  font-family: var(--u-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--u-ink-soft);
  text-align: left;
  padding: 13px 16px;
  background: var(--u-surface-2);
  border-bottom: 1px solid var(--u-line-strong);
}
.urbizen-page .seuils td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--u-line);
  vertical-align: top;
  color: var(--u-ink);
  line-height: 1.5;
}
.urbizen-page .seuils tr:last-child td { border-bottom: none; }
.urbizen-page .seuils td:first-child { font-weight: 600; }
.urbizen-page .seuils th.dp, .urbizen-page .seuils td.dp { background: var(--u-brand-sf); }
.urbizen-page .seuils th.dp { color: var(--u-brand-dk); }
.urbizen-page .seuils td.dp { font-weight: 600; color: var(--u-brand-dk); }
.urbizen-page .seuils .vide { color: var(--u-ink-faint); font-weight: 400; }
@media (max-width: 760px) {
  .urbizen-page .seuils thead { display: none; }
  .urbizen-page .seuils, .urbizen-page .seuils tbody, .urbizen-page .seuils tr, .urbizen-page .seuils td { display: block; }
  .urbizen-page .seuils tr { border-bottom: 1px solid var(--u-line-strong); }
  .urbizen-page .seuils tr:last-child { border-bottom: none; }
  .urbizen-page .seuils td { border-bottom: none; padding: 6px 16px; }
  .urbizen-page .seuils td:first-child { padding-top: 14px; font-size: 15px; }
  .urbizen-page .seuils td:last-child { padding-bottom: 14px; }
  .urbizen-page .seuils td[data-th]::before {
    content: attr(data-th);
    display: block;
    font-family: var(--u-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--u-ink-faint);
    margin-bottom: 2px;
  }
  .urbizen-page .seuils td.dp[data-th]::before { color: var(--u-brand-dk); }
}

/* ===== Frise de procédure ===== */
.urbizen-page .frise { list-style: none; margin: 0; padding: 0; position: relative; max-width: 760px; }
.urbizen-page .frise li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 48px;
  bottom: 0;
  width: 2px;
  background: var(--u-line-strong);
}
.urbizen-page .frise li { position: relative; padding: 0 0 30px 66px; }
.urbizen-page .frise li:last-child { padding-bottom: 0; }
.urbizen-page .frise .f-n {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--u-surface);
  border: 2px solid var(--u-brand);
  display: grid;
  place-items: center;
  font-family: var(--u-font-mono);
  font-size: 14px;
  color: var(--u-brand);
}
.urbizen-page .frise h3 {
  font-family: var(--u-font-title);
  font-weight: 600;
  font-size: 17.5px;
  color: var(--u-ink);
  margin: 8px 0 6px;
}
.urbizen-page .frise p { font-size: 15px; line-height: 1.65; color: var(--u-ink-soft); margin: 0; max-width: 66ch; }

/* ===== Cartes d'information ===== */
.urbizen-page .infos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.urbizen-page .info {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-top: 3px solid var(--u-mint);
  border-radius: var(--u-radius);
  padding: 20px 22px;
  box-shadow: var(--u-shadow-card);
}
.urbizen-page .info h3 {
  font-family: var(--u-font-title);
  font-weight: 600;
  font-size: 16px;
  color: var(--u-ink);
  margin: 0 0 8px;
}
.urbizen-page .info p { font-size: 14.5px; line-height: 1.6; color: var(--u-ink-soft); margin: 0; }
@media (max-width: 640px) { .urbizen-page .infos { grid-template-columns: minmax(0, 1fr); } }

/* ===== Liste des erreurs ===== */
.urbizen-page .erreurs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 820px; }
.urbizen-page .erreurs li {
  position: relative;
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  padding: 16px 20px 16px 54px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--u-ink-soft);
}
.urbizen-page .erreurs li b { color: var(--u-ink); }
.urbizen-page .erreurs li::before {
  content: "✕";
  position: absolute;
  left: 20px;
  top: 15px;
  font-family: var(--u-font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--u-error);
}

/* ===== Encart ===== */
.urbizen-page .encart {
  border: 1px solid var(--u-line-strong);
  border-left: 4px solid var(--u-brand);
  background: var(--u-brand-sf);
  border-radius: var(--u-radius);
  padding: 18px 22px;
  margin-top: 28px;
  max-width: 820px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--u-ink);
}
.urbizen-page .encart b { font-family: var(--u-font-title); }
.urbizen-page .encart .k {
  display: block;
  font-family: var(--u-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--u-brand-dk);
  margin-bottom: 6px;
}

/* ===== Définitions (surface de plancher / emprise) ===== */
.urbizen-page .defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.urbizen-page .def {
  background: var(--u-surface);
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius);
  padding: 18px 20px;
}
.urbizen-page .def .k {
  display: block;
  font-family: var(--u-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--u-brand);
  margin-bottom: 8px;
}
.urbizen-page .def p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--u-ink); }
@media (max-width: 640px) { .urbizen-page .defs { grid-template-columns: minmax(0, 1fr); } }

/* ===== Accessibilité / mouvement ===== */
@media (prefers-reduced-motion: reduce) {
  .urbizen-page * { transition: none !important; animation: none !important; }
}

/* ===== Formulaire Conception — page dédiée =====
   Le moteur du formulaire porte son propre cartouche et son quadrillage. La
   page WordPress ne lui ajoute aucun bloc commercial : seulement l'en-tête et
   le pied de page communs, comme les parcours DP et PC. */
.urbizen-page-formulaire-conception .cpx-form-page {
  min-height: 70vh;
  padding: clamp(18px, 3vw, 36px) 0 clamp(36px, 6vw, 72px);
  background: var(--u-paper);
}
.urbizen-page-formulaire-conception .cpx-form-page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.urbizen-page-formulaire-conception .cpx-form-host { width: 100%; }

/* ===== Planche : codes plus lisibles sur les pages internes ===== */
.urbizen-page .planche-item .code {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* ========================================================================== */
/* Déclaration préalable — guide de service                                   */
/* ========================================================================== */

/* Alternance de surfaces conforme à la charte de l'accueil : quadrillage
   éditorial, blanc pour les lectures denses, bleu nuit pour la conversion. */
.urbizen-page-dp .dp-understand,
.urbizen-page-dp .dp-special-cases,
.urbizen-page-dp .dp-errors,
.urbizen-page-dp .dp-pricing,
.urbizen-page-dp .dp-final { background: var(--u-grid-bg); }
.urbizen-page-dp #seuils,
.urbizen-page-dp .dp-procedure,
.urbizen-page-dp .dp-preparation,
.urbizen-page-dp .dp-dossier,
.urbizen-page-dp .dp-faq { background: var(--u-surface-2); }

/* Même échelle typographique et même respiration que la page d'accueil. */
.urbizen-page-dp main > section { padding: clamp(52px, 8vw, 88px) 0; }
.urbizen-page-dp .dp-hero h1 {
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.urbizen-page-dp .dp-hero .lead {
  font-size: clamp(16.5px, 1.45vw, 18px);
  line-height: 1.62;
}
.urbizen-page-dp .page-hero-meta .m { font-size: 14.5px; }
.urbizen-page-dp .seuils { font-size: 15.5px; }
.urbizen-page-dp .note { font-size: 14.5px; line-height: 1.65; }
.urbizen-page-dp .frise h3 { font-size: 18px; }
.urbizen-page-dp .frise p { font-size: 15.5px; line-height: 1.6; }
.urbizen-page-dp .erreurs li { font-size: 15.5px; line-height: 1.6; }
.urbizen-page-dp .encart { font-size: 15.5px; line-height: 1.65; }

/* Sur une page éditoriale, les titres et textes d'introduction suivent toute
   la largeur du .wrap. Les limites courtes de l'accueil ne s'appliquent pas. */
.urbizen-page-dp .sec-head,
.urbizen-page-dp .note,
.urbizen-page-dp .frise,
.urbizen-page-dp .frise p,
.urbizen-page-dp .erreurs,
.urbizen-page-dp .encart,
.urbizen-page-dp .dp-preparation h2,
.urbizen-page-dp .dp-preparation-lead,
.urbizen-page-dp .dp-price-note { max-width: none; }

/* Hero : une fiche de dossier concrète remplace l'illustration générique. */
.urbizen-page-dp .dp-hero .page-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(350px, 410px);
}
.urbizen-page-dp .dp-hero-dossier {
  position: relative;
  color: var(--u-ink);
  background: var(--u-surface);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--u-radius);
  padding: 24px;
  box-shadow: 12px 12px 0 rgba(84, 207, 153, 0.14), 0 28px 60px -42px rgba(0, 0, 0, 0.85);
}
.urbizen-page-dp .dp-hero-dossier::before {
  content: "DOSSIER · DP";
  position: absolute;
  top: -12px;
  right: 18px;
  padding: 4px 9px;
  color: var(--u-mint);
  background: var(--u-ink);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--u-radius-sm);
  font-family: var(--u-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
}
.urbizen-page-dp .dp-hero-dossier-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--u-line);
}
.urbizen-page-dp .dp-hero-dossier-head div > span {
  display: block;
  margin-bottom: 5px;
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.urbizen-page-dp .dp-hero-dossier-head strong {
  display: block;
  font-family: var(--u-font-title);
  font-size: 20px;
  font-weight: 600;
}
.urbizen-page-dp .dp-hero-status {
  padding: 5px 8px;
  color: var(--u-brand-dk);
  background: var(--u-brand-sf);
  border: 1px solid var(--u-mint-surface);
  border-radius: var(--u-radius-sm);
  font-family: var(--u-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.urbizen-page-dp .dp-hero-dossier ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.urbizen-page-dp .dp-hero-dossier li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 41px;
  border-bottom: 1px solid var(--u-line);
  color: var(--u-ink-soft);
  font-size: 15px;
  line-height: 1.5;
}
.urbizen-page-dp .dp-hero-dossier li::before {
  content: "✓";
  grid-column: 1;
  grid-row: 1;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--u-brand);
  border-radius: 50%;
  font-size: 10px;
}
.urbizen-page-dp .dp-hero-dossier li b {
  grid-column: 1;
  grid-row: 1;
  margin-left: 27px;
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.urbizen-page-dp .dp-hero-dossier li span { grid-column: 2; }
.urbizen-page-dp .dp-hero-dossier > p {
  margin: 13px 0 0;
  color: var(--u-ink-faint);
  font-size: 13.5px;
  line-height: 1.55;
}

.urbizen-page-dp .dp-sources { margin: 12px 0 0; color: var(--u-ink-faint); font-size: 13px; line-height: 1.55; }
.urbizen-page-dp .dp-sources a { color: var(--u-brand-dk); text-decoration: underline; text-underline-offset: 2px; }

/* Notions de surface et comparaison DP / PC. */
.urbizen-page-dp .dp-measures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.urbizen-page-dp .dp-measures article {
  position: relative;
  min-height: 210px;
  padding: 22px;
  background: var(--u-surface-2);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
}
.urbizen-page-dp .dp-measure-n {
  display: block;
  margin-bottom: 30px;
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.urbizen-page-dp .dp-measures h3,
.urbizen-page-dp .dp-compare h3 {
  margin: 0 0 9px;
  color: var(--u-ink);
  font-family: var(--u-font-title);
  font-size: 18px;
  font-weight: 600;
}
.urbizen-page-dp .dp-measures p,
.urbizen-page-dp .dp-compare p {
  margin: 0;
  color: var(--u-ink-soft);
  font-size: 15.5px;
  line-height: 1.6;
}
.urbizen-page-dp .dp-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.urbizen-page-dp .dp-compare-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  background: var(--u-surface);
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius);
}
.urbizen-page-dp .dp-compare-dp { border-color: var(--u-brand); box-shadow: inset 0 0 0 1px var(--u-brand-sf); }
.urbizen-page-dp .dp-compare-code {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  color: var(--u-brand-dk);
  background: var(--u-brand-sf);
  border-radius: 50%;
  font-family: var(--u-font-mono);
  font-weight: 600;
}
.urbizen-page-dp .dp-compare a {
  display: inline-block;
  margin-top: 12px;
  color: var(--u-brand-dk);
  font-family: var(--u-font-title);
  font-size: 14px;
  font-weight: 600;
}

/* Cas particuliers : icônes homogènes, lecture éditoriale en deux colonnes. */
.urbizen-page-dp .dp-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.urbizen-page-dp .dp-info-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 17px;
  padding: 22px;
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  box-shadow: 0 18px 38px -34px rgba(20, 35, 59, 0.7);
}
.urbizen-page-dp .dp-info-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--u-brand);
  background: var(--u-brand-sf);
  border-radius: 50%;
}
.urbizen-page-dp .dp-info-icon svg { width: 25px; height: 25px; }
.urbizen-page-dp .dp-info-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.urbizen-page-dp .dp-info-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.urbizen-page-dp .dp-info-card p { margin: 0; color: var(--u-ink-soft); font-size: 15.5px; line-height: 1.6; }
.urbizen-page-dp .dp-info-link { display: inline-block; margin-top: 11px; color: var(--u-brand-dk); font-family: var(--u-font-title); font-size: 14px; font-weight: 600; }

/* Bloc commercial intégré au guide. */
.urbizen-page-dp .dp-preparation { background: var(--u-surface-2); border-top: 1px solid var(--u-line); border-bottom: 1px solid var(--u-line); }
.urbizen-page-dp .dp-preparation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
}
.urbizen-page-dp .dp-preparation h2 {
  max-width: 680px;
  margin: 0 0 15px;
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 600;
}
.urbizen-page-dp .dp-preparation-lead { max-width: 68ch; margin: 0 0 24px; color: var(--u-ink-soft); font-size: 18px; line-height: 1.55; }
.urbizen-page-dp .dp-check-list,
.urbizen-page-dp .dp-service-panel ul { list-style: none; margin: 0; padding: 0; }
.urbizen-page-dp .dp-check-list { display: grid; gap: 10px; }
.urbizen-page-dp .dp-check-list li,
.urbizen-page-dp .dp-service-panel li { position: relative; padding-left: 29px; line-height: 1.55; }
.urbizen-page-dp .dp-check-list li { color: var(--u-ink); font-size: 15.5px; }
.urbizen-page-dp .dp-check-list li::before,
.urbizen-page-dp .dp-service-panel li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
.urbizen-page-dp .dp-check-list li::before { color: var(--u-brand); background: var(--u-brand-sf); }
.urbizen-page-dp .dp-service-panel {
  padding: 28px;
  color: #fff;
  background: var(--u-ink);
  border-radius: var(--u-radius);
  box-shadow: 12px 12px 0 var(--u-mint-surface);
}
.urbizen-page-dp .dp-service-panel-kicker {
  color: var(--u-mint);
  font-family: var(--u-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.urbizen-page-dp .dp-service-panel h3 { margin: 10px 0 20px; color: #fff; font-size: 24px; font-weight: 600; line-height: 1.25; }
.urbizen-page-dp .dp-service-panel ul { display: grid; gap: 11px; margin-bottom: 24px; }
.urbizen-page-dp .dp-service-panel li { color: rgba(255, 255, 255, 0.78); font-size: 15px; }
.urbizen-page-dp .dp-service-panel li::before { color: var(--u-brand); background: var(--u-brand-sf); }

/* Les pièces reprennent les vignettes illustrées de l'accueil. */
.urbizen-page-dp .dp-dossier-panel {
  padding: clamp(22px, 2.7vw, 34px);
  border: 1px solid rgba(18, 138, 90, 0.24);
  border-radius: var(--u-radius);
  background: var(--u-mint-surface);
  box-shadow: 0 24px 44px -38px rgba(20, 35, 59, 0.7);
}
.urbizen-page-dp .dp-dossier .planche {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.urbizen-page-dp .dp-dossier .planche-item {
  position: relative;
  min-height: 144px;
  overflow: hidden;
  padding: 16px;
  border-color: rgba(159, 173, 188, 0.72);
  background: rgba(251, 252, 253, 0.96);
  box-shadow: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.urbizen-page-dp .dp-dossier .planche-item:hover {
  border-color: var(--u-brand);
  box-shadow: 0 16px 30px -26px rgba(20, 35, 59, 0.7);
  transform: translateY(-2px);
}
.urbizen-page-dp .dp-dossier .planche-item .code {
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.urbizen-page-dp .dp-dossier .planche-t {
  position: relative;
  z-index: 1;
  max-width: 60%;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.35;
}
.urbizen-page-dp .dp-dossier .planche-fig {
  position: absolute;
  right: 10px;
  bottom: 9px;
  width: 82px;
  height: 58px;
  color: var(--u-ink);
  pointer-events: none;
}
.urbizen-page-dp .dp-dossier .planche-fig svg { display: block; width: 100%; height: 100%; }
.urbizen-page-dp .dp-dossier-panel .note { margin: 18px 0 0; color: var(--u-ink-soft); font-size: 14.5px; }

/* Tarifs et services associés. */
.urbizen-page-dp .dp-pricing { background: var(--u-grid-bg); }
.urbizen-page-dp .dp-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.urbizen-page-dp .dp-price-card {
  position: relative;
  display: flex;
  min-height: 320px;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--u-surface);
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius);
}
.urbizen-page-dp .dp-price-card.featured { border: 2px solid var(--u-brand); box-shadow: var(--u-shadow-card); }
.urbizen-page-dp .dp-price-type {
  margin-bottom: 18px;
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.urbizen-page-dp .dp-price-badge {
  position: absolute;
  top: -12px;
  right: 18px;
  padding: 5px 9px;
  color: #fff;
  background: var(--u-brand);
  border-radius: var(--u-radius-sm);
  font-family: var(--u-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.urbizen-page-dp .dp-price-card h3 { min-height: 50px; margin: 0 0 18px; font-size: 19px; font-weight: 600; }
.urbizen-page-dp .dp-price-card > p:not(.dp-price) { margin: 0 0 22px; color: var(--u-ink-soft); font-size: 15px; line-height: 1.55; }
.urbizen-page-dp .dp-price {
  margin: 0 0 18px;
  color: var(--u-ink);
  font-family: var(--u-font-title);
  font-size: 32px;
  font-weight: 600;
}
.urbizen-page-dp .dp-price span { display: block; margin-bottom: 2px; color: var(--u-ink-faint); font-family: var(--u-font-body); font-size: 12px; font-weight: 400; }
.urbizen-page-dp .dp-price-card .btn { align-self: flex-start; margin-top: auto; }
.urbizen-page-dp .dp-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
  background: var(--u-surface-2);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
}
.urbizen-page-dp .dp-options span { display: flex; align-items: baseline; gap: 7px; min-width: 0; padding: 15px 18px; color: var(--u-ink-soft); font-size: 15px; }
.urbizen-page-dp .dp-options span + span { border-left: 1px solid var(--u-line); }
.urbizen-page-dp .dp-options b { color: var(--u-brand-dk); font-family: var(--u-font-title); font-size: 16px; font-weight: 600; }
.urbizen-page-dp .dp-price-note { width: 100%; max-width: none; margin: 18px 0 36px; color: var(--u-ink-soft); font-size: 14.5px; line-height: 1.65; }
.urbizen-page-dp .dp-related-services { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-bottom: 0; }
.urbizen-page-dp .dp-related-services .service-route { height: 100%; }

/* Accordéons lisibles et compacts. */
.urbizen-page-dp .dp-faq .faq { display: grid; gap: 12px; width: 100%; max-width: none; margin: 0; }
.urbizen-page-dp .dp-faq .faq details { overflow: hidden; background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius); }
.urbizen-page-dp .dp-faq .faq summary {
  position: relative;
  padding: 18px 60px 18px 20px;
  cursor: pointer;
  list-style: none;
  color: var(--u-ink);
  font-family: var(--u-font-title);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.urbizen-page-dp .dp-faq .faq summary::-webkit-details-marker { display: none; }
.urbizen-page-dp .dp-faq .faq summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 18px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--u-brand-dk);
  background: var(--u-brand-sf);
  border-radius: 50%;
  font-family: var(--u-font-mono);
  font-size: 17px;
  font-weight: 400;
  transform: translateY(-50%);
}
.urbizen-page-dp .dp-faq .faq details[open] summary::after { content: "−"; }
.urbizen-page-dp .dp-faq .faq .a { padding: 0 60px 22px 20px; color: var(--u-ink-soft); font-size: 15.5px; line-height: 1.65; }

@media (max-width: 1040px) {
  .urbizen-page-dp .dp-dossier .planche { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .urbizen-page-dp .dp-hero .page-hero-grid,
  .urbizen-page-dp .dp-preparation-grid { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-dp .dp-hero-dossier { width: min(100%, 520px); }
  .urbizen-page-dp .dp-measures { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-dp .dp-measures article { min-height: 0; }
  .urbizen-page-dp .dp-measure-n { margin-bottom: 18px; }
}

@media (max-width: 760px) {
  .urbizen-page-dp .dp-info-grid,
  .urbizen-page-dp .dp-compare,
  .urbizen-page-dp .dp-price-grid,
  .urbizen-page-dp .dp-related-services { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-dp .dp-price-card { min-height: 0; }
  .urbizen-page-dp .dp-price-card h3 { min-height: 0; }
  .urbizen-page-dp .dp-options { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-dp .dp-options span + span { border-top: 1px solid var(--u-line); border-left: 0; }
}

@media (max-width: 620px) {
  .urbizen-page-dp .dp-info-card { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-dp .dp-compare-card { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-dp .dp-dossier .planche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .urbizen-page-dp .dp-service-panel { padding: 24px 20px; box-shadow: 7px 7px 0 var(--u-mint-surface); }
  .urbizen-page-dp .dp-preparation-lead { font-size: 16.5px; }
}

@media (max-width: 480px) {
  .urbizen-page-dp .dp-dossier .planche { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-dp .dp-dossier-panel { padding: 16px; }
}

/* ========================================================================== */
/* Permis de construire — guide réglementaire et commercial                   */
/* ========================================================================== */

/* Alternance stricte après le hero : grille / uni / grille / uni. */
.urbizen-page-pc .pc-thresholds,
.urbizen-page-pc .pc-architect,
.urbizen-page-pc .pc-special-cases,
.urbizen-page-pc .pc-errors,
.urbizen-page-pc .pc-pricing,
.urbizen-page-pc .pc-final { background: var(--u-grid-bg); }
.urbizen-page-pc .pc-understand,
.urbizen-page-pc .pc-procedure,
.urbizen-page-pc .pc-preparation,
.urbizen-page-pc .pc-dossier,
.urbizen-page-pc .pc-faq { background: var(--u-surface-2); }

.urbizen-page-pc main > section { padding: clamp(52px, 8vw, 88px) 0; }
.urbizen-page-pc .pc-hero h1 {
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.urbizen-page-pc .pc-hero .lead { font-size: clamp(16.5px, 1.45vw, 18px); line-height: 1.62; }
.urbizen-page-pc .page-hero-meta .m { font-size: 14.5px; }
.urbizen-page-pc .seuils { font-size: 15.5px; }
.urbizen-page-pc .note { font-size: 14.5px; line-height: 1.65; }
.urbizen-page-pc .frise h3 { font-size: 18px; }
.urbizen-page-pc .frise p { max-width: none; font-size: 15.5px; line-height: 1.6; }
.urbizen-page-pc .erreurs li { font-size: 15.5px; line-height: 1.6; }
.urbizen-page-pc .encart { font-size: 15.5px; line-height: 1.65; }
.urbizen-page-pc .sec-head,
.urbizen-page-pc .note,
.urbizen-page-pc .frise,
.urbizen-page-pc .erreurs,
.urbizen-page-pc .encart,
.urbizen-page-pc .pc-preparation h2,
.urbizen-page-pc .pc-preparation-lead,
.urbizen-page-pc .pc-price-note { width: 100%; max-width: none; }

/* Hero : aperçu fonctionnel du livrable, sans fausse vue de plan. */
.urbizen-page-pc .pc-hero .page-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); }
.urbizen-page-pc .pc-hero-dossier {
  position: relative;
  color: var(--u-ink);
  background: var(--u-surface);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--u-radius);
  padding: 24px;
  box-shadow: 12px 12px 0 rgba(84, 207, 153, 0.14), 0 28px 60px -42px rgba(0, 0, 0, 0.85);
}
.urbizen-page-pc .pc-hero-dossier::before {
  content: "DOSSIER · PCMI";
  position: absolute;
  top: -12px;
  right: 18px;
  padding: 4px 9px;
  color: var(--u-mint);
  background: var(--u-ink);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--u-radius-sm);
  font-family: var(--u-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
}
.urbizen-page-pc .pc-hero-dossier-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--u-line);
}
.urbizen-page-pc .pc-hero-dossier-head div > span {
  display: block;
  margin-bottom: 5px;
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.urbizen-page-pc .pc-hero-dossier-head strong { display: block; font-family: var(--u-font-title); font-size: 20px; font-weight: 600; }
.urbizen-page-pc .pc-hero-status {
  padding: 5px 8px;
  color: var(--u-brand-dk);
  background: var(--u-brand-sf);
  border: 1px solid var(--u-mint-surface);
  border-radius: var(--u-radius-sm);
  font-family: var(--u-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.urbizen-page-pc .pc-hero-dossier ul { list-style: none; margin: 12px 0 0; padding: 0; }
.urbizen-page-pc .pc-hero-dossier li {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 41px;
  border-bottom: 1px solid var(--u-line);
  color: var(--u-ink-soft);
  font-size: 15px;
  line-height: 1.5;
}
.urbizen-page-pc .pc-hero-dossier li::before {
  content: "✓";
  grid-column: 1;
  grid-row: 1;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  color: #fff;
  background: var(--u-brand);
  border-radius: 50%;
  font-size: 10px;
}
.urbizen-page-pc .pc-hero-dossier li b {
  grid-column: 1;
  grid-row: 1;
  margin-left: 27px;
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
}
.urbizen-page-pc .pc-hero-dossier li span { grid-column: 2; }
.urbizen-page-pc .pc-hero-dossier > p { margin: 13px 0 0; color: var(--u-ink-faint); font-size: 13.5px; line-height: 1.55; }
.urbizen-page-pc .pc-sources { margin: 12px 0 0; color: var(--u-ink-faint); font-size: 13px; line-height: 1.55; }
.urbizen-page-pc .pc-sources a { color: var(--u-brand-dk); text-decoration: underline; text-underline-offset: 2px; }

/* Mesures, différence DP / PC et bloc architecte. */
.urbizen-page-pc .pc-measures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.urbizen-page-pc .pc-measures article {
  min-height: 210px;
  padding: 22px;
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
}
.urbizen-page-pc .pc-measure-n { display: block; margin-bottom: 30px; color: var(--u-brand); font-family: var(--u-font-mono); font-size: 11px; letter-spacing: 0.08em; }
.urbizen-page-pc .pc-measures h3,
.urbizen-page-pc .pc-compare h3 { margin: 0 0 9px; color: var(--u-ink); font-family: var(--u-font-title); font-size: 18px; font-weight: 600; }
.urbizen-page-pc .pc-measures p,
.urbizen-page-pc .pc-compare p { margin: 0; color: var(--u-ink-soft); font-size: 15.5px; line-height: 1.6; }
.urbizen-page-pc .pc-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.urbizen-page-pc .pc-compare-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  background: var(--u-surface);
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius);
}
.urbizen-page-pc .pc-compare-pc { border-color: var(--u-brand); box-shadow: inset 0 0 0 1px var(--u-brand-sf); }
.urbizen-page-pc .pc-compare-code { display: grid; width: 50px; height: 50px; place-items: center; color: var(--u-brand-dk); background: var(--u-brand-sf); border-radius: 50%; font-family: var(--u-font-mono); font-weight: 600; }
.urbizen-page-pc .pc-compare a { display: inline-block; margin-top: 12px; color: var(--u-brand-dk); font-family: var(--u-font-title); font-size: 14px; font-weight: 600; }

.urbizen-page-pc .pc-architect-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 430px); gap: clamp(38px, 7vw, 90px); align-items: center; }
.urbizen-page-pc .pc-architect h2 { margin: 0 0 18px; font-size: clamp(28px, 3.8vw, 42px); font-weight: 600; }
.urbizen-page-pc .pc-architect-grid > div > p { margin: 0 0 13px; color: var(--u-ink-soft); font-size: 17px; line-height: 1.65; }
.urbizen-page-pc .pc-architect-example {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  padding: 28px;
  color: #fff;
  background: var(--u-ink);
  border-radius: var(--u-radius);
  box-shadow: 12px 12px 0 var(--u-mint-surface);
}
.urbizen-page-pc .pc-architect-example::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -55px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(84, 207, 153, 0.35);
  transform: rotate(28deg);
}
.urbizen-page-pc .pc-architect-number { display: block; color: var(--u-mint); font-family: var(--u-font-title); font-size: 74px; font-weight: 600; line-height: 1; letter-spacing: -0.06em; }
.urbizen-page-pc .pc-architect-number span { margin-left: 6px; font-family: var(--u-font-mono); font-size: 19px; font-weight: 500; letter-spacing: 0; }
.urbizen-page-pc .pc-architect-kicker { display: block; margin: 28px 0 8px; color: var(--u-mint); font-family: var(--u-font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.urbizen-page-pc .pc-architect-example p { position: relative; z-index: 1; margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 16px; line-height: 1.6; }
.urbizen-page-pc .pc-architect-example b { color: #fff; }

/* Conditions particulières. */
.urbizen-page-pc .pc-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.urbizen-page-pc .pc-info-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 17px;
  padding: 22px;
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  box-shadow: 0 18px 38px -34px rgba(20, 35, 59, 0.7);
}
.urbizen-page-pc .pc-info-icon { display: grid; width: 46px; height: 46px; place-items: center; color: var(--u-brand); background: var(--u-brand-sf); border-radius: 50%; }
.urbizen-page-pc .pc-info-icon svg { width: 25px; height: 25px; }
.urbizen-page-pc .pc-info-kicker { display: block; margin-bottom: 7px; color: var(--u-brand); font-family: var(--u-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.urbizen-page-pc .pc-info-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.urbizen-page-pc .pc-info-card p { margin: 0; color: var(--u-ink-soft); font-size: 15.5px; line-height: 1.6; }
.urbizen-page-pc .pc-info-link { display: inline-block; margin-top: 11px; color: var(--u-brand-dk); font-family: var(--u-font-title); font-size: 14px; font-weight: 600; }

/* Bloc de préparation et conversion. */
.urbizen-page-pc .pc-preparation { border-top: 1px solid var(--u-line); border-bottom: 1px solid var(--u-line); }
.urbizen-page-pc .pc-preparation-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); gap: clamp(34px, 6vw, 76px); align-items: center; }
.urbizen-page-pc .pc-preparation h2 { margin: 0 0 15px; font-size: clamp(26px, 3.6vw, 38px); font-weight: 600; }
.urbizen-page-pc .pc-preparation-lead { margin: 0 0 24px; color: var(--u-ink-soft); font-size: 18px; line-height: 1.55; }
.urbizen-page-pc .pc-check-list,
.urbizen-page-pc .pc-service-panel ul { list-style: none; margin: 0; padding: 0; }
.urbizen-page-pc .pc-check-list { display: grid; gap: 10px; }
.urbizen-page-pc .pc-check-list li,
.urbizen-page-pc .pc-service-panel li { position: relative; padding-left: 29px; line-height: 1.55; }
.urbizen-page-pc .pc-check-list li { color: var(--u-ink); font-size: 15.5px; }
.urbizen-page-pc .pc-check-list li::before,
.urbizen-page-pc .pc-service-panel li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
.urbizen-page-pc .pc-check-list li::before { color: var(--u-brand); background: var(--u-brand-sf); }
.urbizen-page-pc .pc-service-panel { padding: 28px; color: #fff; background: var(--u-ink); border-radius: var(--u-radius); box-shadow: 12px 12px 0 var(--u-mint-surface); }
.urbizen-page-pc .pc-service-panel-kicker { color: var(--u-mint); font-family: var(--u-font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.urbizen-page-pc .pc-service-panel h3 { margin: 10px 0 20px; color: #fff; font-size: 24px; font-weight: 600; line-height: 1.25; }
.urbizen-page-pc .pc-service-panel ul { display: grid; gap: 11px; margin-bottom: 24px; }
.urbizen-page-pc .pc-service-panel li { color: rgba(255, 255, 255, 0.78); font-size: 15px; }
.urbizen-page-pc .pc-service-panel li::before { color: var(--u-brand); background: var(--u-brand-sf); }

/* Planche PCMI illustrée. */
.urbizen-page-pc .pc-dossier-panel { padding: clamp(22px, 2.7vw, 34px); border: 1px solid rgba(18, 138, 90, 0.24); border-radius: var(--u-radius); background: var(--u-mint-surface); box-shadow: 0 24px 44px -38px rgba(20, 35, 59, 0.7); }
.urbizen-page-pc .pc-dossier .planche { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.urbizen-page-pc .pc-dossier .planche-item {
  position: relative;
  min-height: 144px;
  overflow: hidden;
  padding: 16px;
  border-color: rgba(159, 173, 188, 0.72);
  background: rgba(251, 252, 253, 0.96);
  box-shadow: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.urbizen-page-pc .pc-dossier .planche-item:hover { border-color: var(--u-brand); box-shadow: 0 16px 30px -26px rgba(20, 35, 59, 0.7); transform: translateY(-2px); }
.urbizen-page-pc .pc-dossier .planche-item .code { color: var(--u-brand); font-family: var(--u-font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.urbizen-page-pc .pc-dossier .planche-t { position: relative; z-index: 1; max-width: 60%; margin-top: 4px; font-size: 15px; line-height: 1.35; }
.urbizen-page-pc .pc-dossier .planche-fig { position: absolute; right: 10px; bottom: 9px; width: 82px; height: 58px; color: var(--u-ink); pointer-events: none; }
.urbizen-page-pc .pc-dossier .planche-fig svg { display: block; width: 100%; height: 100%; }
.urbizen-page-pc .pc-dossier-panel .note { margin: 18px 0 0; color: var(--u-ink-soft); }

/* Tarifs, services associés et FAQ. */
.urbizen-page-pc .pc-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.urbizen-page-pc .pc-price-card { position: relative; display: flex; min-height: 330px; flex-direction: column; padding: 26px 24px; background: var(--u-surface); border: 1px solid var(--u-line-strong); border-radius: var(--u-radius); }
.urbizen-page-pc .pc-price-card.featured { border: 2px solid var(--u-brand); box-shadow: var(--u-shadow-card); }
.urbizen-page-pc .pc-price-type { margin-bottom: 18px; color: var(--u-brand); font-family: var(--u-font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.urbizen-page-pc .pc-price-badge { position: absolute; top: -12px; right: 18px; padding: 5px 9px; color: #fff; background: var(--u-brand); border-radius: var(--u-radius-sm); font-family: var(--u-font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.urbizen-page-pc .pc-price-card h3 { min-height: 52px; margin: 0 0 18px; font-size: 19px; font-weight: 600; }
.urbizen-page-pc .pc-price-card > p:not(.pc-price) { margin: 0 0 22px; color: var(--u-ink-soft); font-size: 15px; line-height: 1.55; }
.urbizen-page-pc .pc-price { margin: 0 0 18px; color: var(--u-ink); font-family: var(--u-font-title); font-size: 32px; font-weight: 600; }
.urbizen-page-pc .pc-price span { display: block; margin-bottom: 2px; color: var(--u-ink-faint); font-family: var(--u-font-body); font-size: 12px; font-weight: 400; }
.urbizen-page-pc .pc-price-card .btn { align-self: flex-start; margin-top: auto; }
.urbizen-page-pc .pc-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; background: var(--u-surface-2); border: 1px solid var(--u-line); border-radius: var(--u-radius); }
.urbizen-page-pc .pc-options span { display: flex; align-items: baseline; gap: 7px; min-width: 0; padding: 15px 18px; color: var(--u-ink-soft); font-size: 15px; }
.urbizen-page-pc .pc-options span + span { border-left: 1px solid var(--u-line); }
.urbizen-page-pc .pc-options b { color: var(--u-brand-dk); font-family: var(--u-font-title); font-size: 16px; font-weight: 600; }
.urbizen-page-pc .pc-price-note { margin: 18px 0 36px; color: var(--u-ink-soft); font-size: 14.5px; line-height: 1.65; }
.urbizen-page-pc .pc-related-services { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-bottom: 0; }
.urbizen-page-pc .pc-related-services .service-route { height: 100%; }
.urbizen-page-pc .pc-faq .faq { display: grid; gap: 12px; width: 100%; max-width: none; margin: 0; }
.urbizen-page-pc .pc-faq .faq details { overflow: hidden; background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius); }
.urbizen-page-pc .pc-faq .faq summary { position: relative; padding: 18px 60px 18px 20px; cursor: pointer; list-style: none; color: var(--u-ink); font-family: var(--u-font-title); font-size: 16px; font-weight: 600; line-height: 1.4; }
.urbizen-page-pc .pc-faq .faq summary::-webkit-details-marker { display: none; }
.urbizen-page-pc .pc-faq .faq summary::after { content: "+"; position: absolute; top: 50%; right: 18px; display: grid; width: 28px; height: 28px; place-items: center; color: var(--u-brand-dk); background: var(--u-brand-sf); border-radius: 50%; font-family: var(--u-font-mono); font-size: 17px; font-weight: 400; transform: translateY(-50%); }
.urbizen-page-pc .pc-faq .faq details[open] summary::after { content: "−"; }
.urbizen-page-pc .pc-faq .faq .a { padding: 0 60px 22px 20px; color: var(--u-ink-soft); font-size: 15.5px; line-height: 1.65; }

@media (max-width: 1040px) {
  .urbizen-page-pc .pc-dossier .planche { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .urbizen-page-pc .pc-hero .page-hero-grid,
  .urbizen-page-pc .pc-architect-grid,
  .urbizen-page-pc .pc-preparation-grid { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-pc .pc-hero-dossier { width: min(100%, 540px); }
  .urbizen-page-pc .pc-measures { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-pc .pc-measures article { min-height: 0; }
  .urbizen-page-pc .pc-measure-n { margin-bottom: 18px; }
  .urbizen-page-pc .pc-architect-example { min-height: 0; }
}
@media (max-width: 760px) {
  .urbizen-page-pc .pc-info-grid,
  .urbizen-page-pc .pc-compare,
  .urbizen-page-pc .pc-price-grid,
  .urbizen-page-pc .pc-related-services { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-pc .pc-price-card { min-height: 0; }
  .urbizen-page-pc .pc-price-card h3 { min-height: 0; }
  .urbizen-page-pc .pc-options { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-pc .pc-options span + span { border-top: 1px solid var(--u-line); border-left: 0; }
}
@media (max-width: 620px) {
  .urbizen-page-pc .pc-info-card,
  .urbizen-page-pc .pc-compare-card { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-pc .pc-dossier .planche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .urbizen-page-pc .pc-service-panel { padding: 24px 20px; box-shadow: 7px 7px 0 var(--u-mint-surface); }
  .urbizen-page-pc .pc-preparation-lead { font-size: 16.5px; }
}
@media (max-width: 480px) {
  .urbizen-page-pc .pc-dossier .planche { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-pc .pc-dossier-panel { padding: 16px; }
}

/* ========================================================================== */
/* Tarifs — grille commerciale                                                */
/* ========================================================================== */

/*
 * Cette section ne redéfinit AUCUN composant. Les cartes tarifaires, le
 * cartouche ABF, les boutons, les surtitres et l'accordéon de FAQ sont ceux de
 * l'accueil et des pages internes ; on se contente d'en régler l'échelle et la
 * disposition pour une page qui leur consacre toute sa largeur, là où l'accueil
 * les serre dans une seule bande.
 *
 * Deux différences de fond avec l'accueil, et seulement deux :
 *
 *   1. les groupes s'empilent au lieu de se partager une ligne — trois offres
 *      dans un tiers de page ne laissent pas la place aux exemples, aux
 *      inclusions et au bouton que demande une page de tarifs ;
 *   2. l'échelle typographique monte d'un cran, comme `.urbizen-page-dp` le
 *      fait déjà pour les tableaux et les frises qu'elle emprunte à l'accueil.
 *
 * Aucun palier de rupture nouveau : 1040 / 900 / 760 / 620 / 480 px sont ceux
 * qu'emploient déjà les sections DP et PC de cette feuille.
 */

/* --- Alternance de surfaces, comme sur les parcours DP et PC -------------- */
.urbizen-page-tarifs .tar-grille,
.urbizen-page-tarifs .tar-orientation,
.urbizen-page-tarifs .tar-savoir,
.urbizen-page-tarifs .tar-final { background: var(--u-grid-bg); }
.urbizen-page-tarifs .tar-compris,
.urbizen-page-tarifs .tar-devis,
.urbizen-page-tarifs .tar-pourquoi,
.urbizen-page-tarifs .tar-faq { background: var(--u-surface-2); }
.urbizen-page-tarifs .tar-compris,
.urbizen-page-tarifs .tar-devis,
.urbizen-page-tarifs .tar-pourquoi,
.urbizen-page-tarifs .tar-faq { border-top: 1px solid var(--u-line); border-bottom: 1px solid var(--u-line); }

.urbizen-page-tarifs main > section { padding: clamp(52px, 8vw, 88px) 0; }
.urbizen-page-tarifs .sec-head { max-width: 760px; margin-bottom: 28px; }
.urbizen-page-tarifs .sec-head h2 { margin-top: 12px; font-size: clamp(26px, 3.6vw, 38px); font-weight: 600; }
.urbizen-page-tarifs .sec-head p { margin-top: 10px; color: var(--u-ink-soft); font-size: 16.5px; line-height: 1.6; }

/* --- Hero ---------------------------------------------------------------- */
.urbizen-page-tarifs .tar-hero h1 {
  font-size: clamp(34px, 4.2vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.urbizen-page-tarifs .tar-hero .lead { font-size: clamp(16.5px, 1.45vw, 18px); line-height: 1.62; }
.urbizen-page-tarifs .tar-hero .page-hero-meta .m { font-size: 14.5px; }
.urbizen-page-tarifs .tar-hero .page-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 390px); }

/* Repères tarifaires : même fiche que les héros DP et PC, sans en recopier le
   contenu — trois lignes, un socle par famille de prestation. */
.urbizen-page-tarifs .tar-hero-carte {
  position: relative;
  padding: 24px;
  color: var(--u-ink);
  background: var(--u-surface);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--u-radius);
  box-shadow: 12px 12px 0 rgba(84, 207, 153, 0.14), 0 28px 60px -42px rgba(0, 0, 0, 0.85);
}
.urbizen-page-tarifs .tar-hero-carte-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--u-line);
}
.urbizen-page-tarifs .tar-hero-carte-head div > span {
  display: block;
  margin-bottom: 5px;
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.urbizen-page-tarifs .tar-hero-carte-head strong { display: block; font-family: var(--u-font-title); font-size: 20px; font-weight: 600; }
.urbizen-page-tarifs .tar-hero-status {
  padding: 5px 8px;
  color: var(--u-brand-dk);
  background: var(--u-brand-sf);
  border: 1px solid var(--u-mint-surface);
  border-radius: var(--u-radius-sm);
  font-family: var(--u-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
}
.urbizen-page-tarifs .tar-hero-carte ul { list-style: none; margin: 12px 0 0; padding: 0; }
.urbizen-page-tarifs .tar-hero-carte li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 42px;
  border-bottom: 1px solid var(--u-line);
  color: var(--u-ink-soft);
  font-size: 15px;
}
.urbizen-page-tarifs .tar-hero-carte li b {
  flex: none;
  width: 30px;
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.urbizen-page-tarifs .tar-hero-carte li span { min-width: 0; }
.urbizen-page-tarifs .tar-hero-carte li em {
  margin-left: auto;
  flex: none;
  color: var(--u-ink);
  font-family: var(--u-font-title);
  font-size: 17px;
  font-weight: 600;
  font-style: normal;
}
.urbizen-page-tarifs .tar-hero-carte > p { margin: 13px 0 0; color: var(--u-ink-faint); font-size: 13.5px; line-height: 1.55; }

/* --- Grille tarifaire ---------------------------------------------------- */
/* Un groupe par ligne : les trois offres disposent alors chacune d'un tiers
   de la page, et non d'un tiers d'un tiers. */
.urbizen-page-tarifs .tarif-groups { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.urbizen-page-tarifs .tarif-group { padding: clamp(20px, 2.4vw, 28px); }
.urbizen-page-tarifs .tarif-group-solo { margin-top: 20px; }
.urbizen-page-tarifs .tarif-group-head { min-height: 0; margin-bottom: 22px; align-items: center; }
.urbizen-page-tarifs .tarif-group-ref { width: 42px; height: 42px; font-size: 12px; }
.urbizen-page-tarifs .tarif-group-head h3 {
  color: #fff;
  font-family: var(--u-font-title);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
.urbizen-page-tarifs .tarif-group-head p { margin-top: 5px; color: rgba(255, 255, 255, 0.68); font-size: 14px; line-height: 1.45; }
.urbizen-page-tarifs .tarif-offers { gap: 14px; }
.urbizen-page-tarifs .tarif-offers-1 { grid-template-columns: minmax(0, 1fr); }

.urbizen-page-tarifs .tarif-group .tarif { min-height: 0; padding: 22px; }
.urbizen-page-tarifs .tarif-type {
  display: block;
  margin-bottom: 9px;
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.urbizen-page-tarifs .tarif-group .tarif h4 { max-width: none; font-size: 18px; line-height: 1.25; }
.urbizen-page-tarifs .tarif-detail { margin-top: 7px; font-size: 13.5px; line-height: 1.45; }
/* Le prix ne descend plus en pied de carte : c'est le bouton qui y va, et le
   prix se lit juste après les exemples, là où l'œil le cherche. */
.urbizen-page-tarifs .tarif-group .tarif-price {
  margin-top: 16px;
  font-family: var(--u-font-title);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
}
.urbizen-page-tarifs .tarif-group .tarif-from { margin-bottom: 5px; font-size: 12px; }
.urbizen-page-tarifs .tarif-texte { margin-top: 12px; color: var(--u-ink-soft); font-size: 14.5px; line-height: 1.55; }
.urbizen-page-tarifs .tarif-inclus { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.urbizen-page-tarifs .tarif-inclus li {
  position: relative;
  padding-left: 26px;
  color: var(--u-ink-soft);
  font-size: 13.5px;
  line-height: 1.45;
}
.urbizen-page-tarifs .tarif-inclus li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--u-brand);
  background: var(--u-brand-sf);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}
/* Bouton compact et aligné en pied, jamais pleine largeur.
   `margin-top: auto` le pousse au bas de la carte : les cartes d'une même
   ligne ayant la même hauteur, leurs boutons se retrouvent alignés, quelle
   que soit la longueur des textes au-dessus. */
.urbizen-page-tarifs .tarif-inclus { margin-bottom: 18px; }
.urbizen-page-tarifs .tarif-cta { align-self: flex-start; margin-top: auto; }

/* Cibles tactiles : le `.btn` de la charte mesure 42,4 px de haut, sous les
   44 px que le projet s'impose. La charte elle-même corrige au cas par cas
   (`.nav-right .js-start`, `.qualif-choix .btn` portent déjà ce min-height) :
   on suit la même convention plutôt que de toucher au composant global, qui
   servirait alors tout le site. */
.urbizen-page-tarifs .btn { min-height: 44px; }

/* La pastille « le plus demandé » est SORTIE du flux. Dans le flux, elle
   décalait vers le bas tout le contenu de la carte mise en avant : son titre
   et son prix ne s'alignaient plus sur ceux de ses voisines. */
.urbizen-page-tarifs .tarif-popular {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
  padding: 4px 9px;
  font-size: 9.5px;
  background: var(--u-brand);
  color: #fff;
}
/* Hors du flux, la pastille ne pousse plus rien — mais elle peut recouvrir.
   On lui réserve donc sa place en marge droite du surtitre et du titre, sur
   la seule carte qui la porte. */
.urbizen-page-tarifs .tarif.featured .tarif-type,
.urbizen-page-tarifs .tarif.featured h4 { padding-right: 104px; }

/* Traitement premium de la carte haut de gamme. Le sélecteur inclut
   `.tarif-group` : sans lui, il perdait contre `.urbizen-accueil .tarif-group
   .tarif`, qui pose déjà `border-color`, et la carte restait indistincte. */
.urbizen-page-tarifs .tarif-group .tarif-premium {
  border-color: var(--u-mint);
  box-shadow: inset 0 3px 0 var(--u-mint);
}

/* Conception : une seule offre, donc une carte en largeur plutôt qu'une
   colonne isolée qui laisserait deux tiers de vide. */
.urbizen-page-tarifs .tarif-large {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
  gap: clamp(20px, 4vw, 46px);
  align-items: center;
}
.urbizen-page-tarifs .tarif-large-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.urbizen-page-tarifs .tarif-large .tarif-price { margin-top: 0; }
.urbizen-page-tarifs .tarif-large .tarif-cta { margin-top: 0; }

/* Cartouche ABF : information secondaire, et qui le reste. */
.urbizen-page-tarifs .tarif-supplement-global { margin-top: 20px; padding: 16px 18px; font-size: 14px; }
.urbizen-page-tarifs .tarif-supplement-global strong { font-size: 15.5px; }
.urbizen-page-tarifs .tarif-supplement-global b { font-size: 20px; }

/* --- Ce qui est compris -------------------------------------------------- */
.urbizen-page-tarifs .tar-compris-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.urbizen-page-tarifs .tar-compris-grid .info { padding: 22px; }
.urbizen-page-tarifs .tar-compris-grid .k {
  display: block;
  margin-bottom: 10px;
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.urbizen-page-tarifs .tar-compris-grid h3 { font-size: 17.5px; }
.urbizen-page-tarifs .tar-compris-grid p { font-size: 14.5px; line-height: 1.6; }

/* --- Orientation --------------------------------------------------------- */
.urbizen-page-tarifs .tar-orientation-panneau {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 60px);
  align-items: center;
  padding: clamp(26px, 3.4vw, 40px);
  color: #fff;
  background: var(--u-ink);
  border-radius: var(--u-radius);
  box-shadow: 12px 12px 0 var(--u-mint-surface);
}
.urbizen-page-tarifs .tar-orientation-panneau h2 {
  margin: 12px 0 12px;
  color: #fff;
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 600;
  line-height: 1.15;
}
.urbizen-page-tarifs .tar-orientation-panneau p { max-width: 62ch; color: rgba(255, 255, 255, 0.78); font-size: 16.5px; line-height: 1.6; }
.urbizen-page-tarifs .tar-orientation-panneau .eyebrow-highlight-text { background: rgba(84, 207, 153, 0.18); color: var(--u-mint); }
.urbizen-page-tarifs .tar-reassurance {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  color: var(--u-mint);
  font-family: var(--u-font-title);
  font-size: 15px;
  font-weight: 600;
}
.urbizen-page-tarifs .tar-orientation-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Projets particuliers ------------------------------------------------ */
.urbizen-page-tarifs .tar-devis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
}
.urbizen-page-tarifs .tar-devis-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.urbizen-page-tarifs .tar-devis-liste li {
  position: relative;
  padding: 13px 16px 13px 40px;
  color: var(--u-ink);
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  font-size: 15px;
  line-height: 1.4;
}
.urbizen-page-tarifs .tar-devis-liste li::before {
  content: "›";
  position: absolute;
  left: 17px;
  top: 12px;
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 16px;
  font-weight: 600;
}
.urbizen-page-tarifs .tar-devis-panneau {
  padding: 26px;
  background: var(--u-surface);
  border: 1px solid var(--u-line-strong);
  border-top: 3px solid var(--u-brand);
  border-radius: var(--u-radius);
  box-shadow: var(--u-shadow-card);
}
.urbizen-page-tarifs .tar-devis-panneau .k {
  display: block;
  margin-bottom: 8px;
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.urbizen-page-tarifs .tar-devis-panneau strong {
  display: block;
  margin-bottom: 12px;
  color: var(--u-ink);
  font-family: var(--u-font-title);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}
.urbizen-page-tarifs .tar-devis-panneau p { margin-bottom: 20px; color: var(--u-ink-soft); font-size: 14.5px; line-height: 1.6; }

/* --- Bon à savoir -------------------------------------------------------- */
.urbizen-page-tarifs .tar-savoir-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 900px;
}
.urbizen-page-tarifs .tar-savoir-liste li {
  position: relative;
  padding: 16px 20px 16px 50px;
  color: var(--u-ink-soft);
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-left: 3px solid var(--u-mint);
  border-radius: var(--u-radius);
  font-size: 15px;
  line-height: 1.6;
}
.urbizen-page-tarifs .tar-savoir-liste li::before {
  content: "i";
  position: absolute;
  left: 19px;
  top: 16px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  color: var(--u-brand-dk);
  background: var(--u-brand-sf);
  border-radius: 50%;
  font-family: var(--u-font-mono);
  font-size: 11px;
  font-weight: 700;
}

/* --- Réassurance --------------------------------------------------------- */
.urbizen-page-tarifs .tar-pourquoi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.urbizen-page-tarifs .tar-pourquoi-grid .info { padding: 22px; }
.urbizen-page-tarifs .tar-pourquoi-grid h3 { font-size: 17.5px; }
.urbizen-page-tarifs .tar-pourquoi-grid p { font-size: 14.5px; line-height: 1.6; }

/* --- FAQ ------------------------------------------------------------------
   Même accordéon que les parcours DP et PC, aux mêmes valeurs. On aurait pu
   ajouter `.urbizen-page-tarifs` aux groupes de sélecteurs de la section DP
   plutôt que de réécrire ces huit règles — mais les bancs de la page DP
   vérifient ses déclarations par correspondance littérale, et modifier ses
   lignes pour la commodité d'une autre page reviendrait à retoucher un test
   qui ne protège pas ce lot. Le dépôt duplique déjà cet accordéon entre DP et
   PC : on suit la convention en place plutôt que de l'entamer de biais. */
.urbizen-page-tarifs .tar-faq .faq { display: grid; gap: 12px; width: 100%; max-width: none; margin: 0; }
.urbizen-page-tarifs .tar-faq .faq details { overflow: hidden; background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius); }
.urbizen-page-tarifs .tar-faq .faq summary {
  position: relative;
  padding: 18px 60px 18px 20px;
  cursor: pointer;
  list-style: none;
  color: var(--u-ink);
  font-family: var(--u-font-title);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
}
.urbizen-page-tarifs .tar-faq .faq summary::-webkit-details-marker { display: none; }
.urbizen-page-tarifs .tar-faq .faq summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 18px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--u-brand-dk);
  background: var(--u-brand-sf);
  border-radius: 50%;
  font-family: var(--u-font-mono);
  font-size: 17px;
  font-weight: 400;
  transform: translateY(-50%);
}
.urbizen-page-tarifs .tar-faq .faq details[open] summary::after { content: "−"; }
.urbizen-page-tarifs .tar-faq .faq .a { padding: 0 60px 22px 20px; color: var(--u-ink-soft); font-size: 15.5px; line-height: 1.65; }

/* --- CTA final ------------------------------------------------------------ */
.urbizen-page-tarifs .tar-final { border-top: 1px solid var(--u-line); }

/* --- Paliers de rupture — ceux déjà employés par DP et PC ----------------- */
@media (max-width: 1040px) {
  .urbizen-page-tarifs .tar-compris-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .urbizen-page-tarifs .tar-hero .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-tarifs .tar-hero-carte { width: min(100%, 520px); }
  .urbizen-page-tarifs .tar-orientation-panneau { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-tarifs .tar-pourquoi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .urbizen-page-tarifs .tarif-offers-3 { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-tarifs .tar-devis-grid { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-tarifs .tar-devis-liste { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-tarifs .tarif-large { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .urbizen-page-tarifs .tarif-large-aside { flex-direction: row; align-items: center; gap: 18px; }
}

@media (max-width: 620px) {
  .urbizen-page-tarifs .tar-compris-grid,
  .urbizen-page-tarifs .tar-pourquoi-grid { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-tarifs .tar-orientation-panneau { box-shadow: 7px 7px 0 var(--u-mint-surface); }
  .urbizen-page-tarifs .tarif-supplement-global { align-items: flex-start; }
  .urbizen-page-tarifs .tarif-supplement-global b { margin-left: 0; }
}

@media (max-width: 480px) {
  .urbizen-page-tarifs .tarif-group { padding: 18px; }
  .urbizen-page-tarifs .tarif-group .tarif { padding: 18px; }
  .urbizen-page-tarifs .tar-hero-carte { padding: 18px; box-shadow: 7px 7px 0 rgba(84, 207, 153, 0.14); }
  .urbizen-page-tarifs .tarif-large-aside { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ========================================================================== */
/* Documents légaux — mentions, CGV, confidentialité                          */
/* ========================================================================== */

/*
 * Trois documents, une seule famille visuelle. `.urbizen-page-legal` porte tout
 * ce qui leur est commun ; les variantes `.urbizen-page-mentions`,
 * `.urbizen-page-cgv` et `.urbizen-page-confidentialite` n'existent que pour
 * pouvoir cibler l'une d'elles si le besoin apparaît — elles ne portent
 * volontairement aucune règle aujourd'hui.
 *
 * Ces pages sont éditoriales, pas commerciales : pas de hero marketing, pas de
 * bouton pleine largeur, pas d'aplat de couleur inutile. Le confort de lecture
 * prime, d'où une largeur de texte bornée à 68 caractères et un interlignage
 * plus généreux qu'ailleurs.
 *
 * Aucun composant nouveau n'est introduit : l'en-tête, le pied de page, le fil
 * d'ariane, les surtitres et les tokens sont ceux du reste du site.
 */

/* --- Cadre général -------------------------------------------------------- */
.urbizen-page-legal .legal-hero {
  padding: clamp(28px, 4vw, 52px) 0 clamp(20px, 3vw, 32px);
  background: var(--u-grid-bg);
  border-bottom: 1px solid var(--u-line);
}
.urbizen-page-legal .legal-hero h1 {
  margin-top: 12px;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.urbizen-page-legal .legal-lead {
  max-width: 62ch;
  margin-top: 12px;
  color: var(--u-ink-soft);
  font-size: 16.5px;
  line-height: 1.6;
}
.urbizen-page-legal .legal-maj {
  margin-top: 14px;
  color: var(--u-ink-faint);
  font-family: var(--u-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.urbizen-page-legal .legal-corps { padding: clamp(32px, 5vw, 60px) 0 clamp(40px, 6vw, 72px); }

/* Le fil d'ariane de `.urbizen-page` est composé pour le bandeau ENCRE des
   pages DP et PC : menthe et blanc translucide. Sur le hero clair des pages
   légales, il devenait illisible. On le repasse donc en encre — même
   composant, contraste rétabli. */
.urbizen-page-legal .legal-hero .fil-ariane { color: var(--u-ink-faint); }
.urbizen-page-legal .legal-hero .fil-ariane a { color: var(--u-ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.urbizen-page-legal .legal-hero .fil-ariane a:hover { color: var(--u-brand-dk); }
.urbizen-page-legal .legal-hero .fil-ariane .sep { color: var(--u-line-strong); }

/* --- Deux colonnes : sommaire à gauche, texte à droite -------------------- */
.urbizen-page-legal .legal-grille {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

/* Le sommaire suit la lecture sans la gêner : discret, collant sous l'en-tête
   collante du site — d'où le décalage de 96 px, hauteur de l'en-tête plus une
   respiration. */
.urbizen-page-legal .legal-sommaire {
  position: sticky;
  top: 96px;
  padding: 20px;
  background: var(--u-surface-2);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
}
.urbizen-page-legal .legal-sommaire h2 {
  margin: 0 0 12px;
  color: var(--u-ink-faint);
  font-family: var(--u-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.urbizen-page-legal .legal-sommaire ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sommaire;
  display: grid;
  gap: 7px;
}
.urbizen-page-legal .legal-sommaire li { counter-increment: sommaire; }
.urbizen-page-legal .legal-sommaire a {
  display: block;
  padding-left: 26px;
  position: relative;
  color: var(--u-ink-soft);
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
}
.urbizen-page-legal .legal-sommaire a::before {
  content: counter(sommaire);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--u-brand);
  font-family: var(--u-font-mono);
  font-size: 11px;
}
.urbizen-page-legal .legal-sommaire a:hover { color: var(--u-brand-dk); }

/* --- Le texte juridique --------------------------------------------------- */
/* 68 caractères : au-delà, l'œil perd la ligne suivante. C'est la seule raison
   de cette limite, et elle prime sur l'envie de remplir la largeur. */
.urbizen-page-legal .legal-texte { max-width: 68ch; }
.urbizen-page-legal .legal-texte h2 {
  margin: 40px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--u-line);
  color: var(--u-ink);
  font-family: var(--u-font-title);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  scroll-margin-top: 96px;
}
.urbizen-page-legal .legal-texte h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.urbizen-page-legal .legal-texte h3 {
  margin: 26px 0 10px;
  color: var(--u-ink);
  font-family: var(--u-font-title);
  font-size: 17px;
  font-weight: 600;
}
.urbizen-page-legal .legal-texte p {
  margin: 0 0 14px;
  color: var(--u-ink-soft);
  font-size: 16px;
  line-height: 1.75;
}
.urbizen-page-legal .legal-texte strong { color: var(--u-ink); }
.urbizen-page-legal .legal-texte a { color: var(--u-brand-dk); text-decoration: underline; text-underline-offset: 2px; }
.urbizen-page-legal .legal-texte a:hover { color: var(--u-brand); }
.urbizen-page-legal .legal-texte ul,
.urbizen-page-legal .legal-texte ol {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.urbizen-page-legal .legal-texte li {
  position: relative;
  padding-left: 22px;
  color: var(--u-ink-soft);
  font-size: 16px;
  line-height: 1.7;
}
.urbizen-page-legal .legal-texte li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--u-mint);
}

/* --- Fiche d'identité (pattern partagé) ----------------------------------- */
.urbizen-page-legal .legal-identite { margin: 0 0 20px; }
.urbizen-page-legal .legal-fiche {
  margin: 0;
  padding: 20px 22px;
  background: var(--u-surface);
  border: 1px solid var(--u-line-strong);
  border-left: 3px solid var(--u-brand);
  border-radius: var(--u-radius);
  display: grid;
  gap: 10px;
}
.urbizen-page-legal .legal-fiche-ligne {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 8px 16px;
  align-items: baseline;
}
.urbizen-page-legal .legal-fiche dt {
  color: var(--u-ink-faint);
  font-family: var(--u-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.urbizen-page-legal .legal-fiche dd {
  margin: 0;
  /* Le numéro de contrat d'assurance est une chaîne insécable de vingt
     caractères : sans cette règle il déborde de la colonne à 320 px, comme
     l'avaient fait les pointillés du formulaire de rétractation. */
  overflow-wrap: anywhere;
  color: var(--u-ink);
  font-size: 15.5px;
  line-height: 1.55;
}
.urbizen-page-legal .legal-fiche .legal-mono { font-family: var(--u-font-mono); font-size: 14px; }

/* --- Encadrés ------------------------------------------------------------- */
.urbizen-page-legal .legal-encart {
  margin: 0 0 18px;
  padding: 18px 20px;
  background: var(--u-surface-2);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
}
.urbizen-page-legal .legal-encart p:last-child { margin-bottom: 0; }
/* Signale à qui s'applique une section — la distinction consommateur /
   professionnel est la plus lourde de conséquences du document. */
.urbizen-page-legal .legal-encart-inline {
  padding: 12px 16px;
  background: var(--u-brand-sf);
  border-left: 3px solid var(--u-brand);
  border-radius: var(--u-radius-sm);
  color: var(--u-ink);
  font-size: 15px;
}

/* --- Tableaux ------------------------------------------------------------- */
.urbizen-page-legal .legal-tableau-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 18px; }
.urbizen-page-legal .legal-tableau {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--u-surface);
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius);
  overflow: hidden;
  font-size: 14.5px;
}
.urbizen-page-legal .legal-tableau th {
  padding: 12px 14px;
  background: var(--u-surface-2);
  border-bottom: 1px solid var(--u-line-strong);
  color: var(--u-ink-soft);
  font-family: var(--u-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}
.urbizen-page-legal .legal-tableau td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--u-line);
  color: var(--u-ink-soft);
  line-height: 1.55;
  vertical-align: top;
}
.urbizen-page-legal .legal-tableau tr:last-child td { border-bottom: 0; }

/* --- Formulaire type de rétractation -------------------------------------- */
.urbizen-page-legal .legal-formulaire {
  margin: 18px 0 0;
  padding: 22px;
  background: var(--u-surface-2);
  border: 1px dashed var(--u-line-strong);
  border-radius: var(--u-radius);
}
.urbizen-page-legal .legal-formulaire-note {
  color: var(--u-ink-faint);
  font-family: var(--u-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.urbizen-page-legal .legal-formulaire li::before { display: none; }
.urbizen-page-legal .legal-formulaire li { padding-left: 0; }
/* Les pointillés à remplir forment un mot insécable : sans cela, ils
   débordaient la fenêtre en dessous de 360 px. Mesuré à 320 px avant
   correction : 342 px de large pour 320 disponibles. */
.urbizen-page-legal .legal-formulaire { overflow-wrap: anywhere; }

/* --- Navigation entre documents ------------------------------------------- */
.urbizen-page-legal .legal-nav {
  padding: clamp(26px, 4vw, 40px) var(--u-pad);
  max-width: var(--u-maxw);
  margin: 0 auto;
  border-top: 1px solid var(--u-line);
}
.urbizen-page-legal .legal-nav-titre {
  display: block;
  margin-bottom: 12px;
  color: var(--u-ink-faint);
  font-family: var(--u-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.urbizen-page-legal .legal-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.urbizen-page-legal .legal-nav a,
.urbizen-page-legal .legal-nav .legal-nav-courant {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius);
  font-family: var(--u-font-title);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.urbizen-page-legal .legal-nav a { color: var(--u-ink); background: var(--u-surface); }
.urbizen-page-legal .legal-nav a:hover { border-color: var(--u-brand); color: var(--u-brand-dk); }
/* Le document courant n'est pas un lien : il est marqué, pas cliquable. */
.urbizen-page-legal .legal-nav .legal-nav-courant {
  color: var(--u-ink-faint);
  background: var(--u-surface-2);
  border-style: dashed;
}

/* --- Paliers de rupture — ceux déjà employés par le reste de la feuille ---- */
@media (max-width: 900px) {
  /* Le sommaire passe au-dessus du texte et cesse d'être collant : sur un
     écran étroit, une colonne fixe mangerait la hauteur utile. */
  .urbizen-page-legal .legal-grille { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-legal .legal-sommaire { position: static; top: auto; }
  .urbizen-page-legal .legal-sommaire ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .urbizen-page-legal .legal-texte { max-width: none; }
}

@media (max-width: 620px) {
  .urbizen-page-legal .legal-sommaire ol { grid-template-columns: minmax(0, 1fr); }
  .urbizen-page-legal .legal-fiche-ligne { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .urbizen-page-legal .legal-texte h2 { font-size: 19px; }
  .urbizen-page-legal .legal-texte p,
  .urbizen-page-legal .legal-texte li { font-size: 15.5px; }
}

@media (max-width: 480px) {
  .urbizen-page-legal .legal-sommaire { padding: 16px; }
  .urbizen-page-legal .legal-fiche { padding: 16px; }
  .urbizen-page-legal .legal-formulaire { padding: 16px; }
}
