/* ==========================================================================
   KAGERER ANHÄNGER — PAGES CORPORATE (Phase 9)
   ==========================================================================
   Über uns, Kontakt, Versand & Lieferung, Rückgabe & Erstattung.
   S'appuie exclusivement sur les tokens de design-system.css et les
   composants de components.css (.container, .section, .btn, .form-*).
   Aucune nouvelle couleur hex. Chargé uniquement sur ces 4 pages (voir
   inc/enqueue.php).
   ========================================================================== */

/* Phase 16D (audit conversion-expert) : le panneau inset gauche est
   remplacé par une bordure basse pleine largeur, registre institutionnel
   sobre (fond clair conservé — jamais de panneau sombre ici, contrairement
   au hero homepage). */
.page-hero {
  background-color: var(--color-bg-alt);
  border-bottom: 3px solid var(--color-primary);
  padding-block: var(--space-12);
}

@media (min-width: 768px) {
  .page-hero {
    padding-block: var(--space-16);
  }
}

.page-hero__lead {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  margin-top: var(--space-3);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Eyebrow + fil d'Ariane du hero (pages légales — Phase 16D). Réutilisés
   via template-parts/legal-breadcrumb.php, inclus dans les 8 pages
   légales uniquement.
   -------------------------------------------------------------------------- */

.legal-hero__eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.legal-breadcrumb {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.legal-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.legal-breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.legal-breadcrumb__sep {
  margin: 0 var(--space-2);
}

.legal-breadcrumb__current {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

/* --------------------------------------------------------------------------
   Mise en page "longue" (sommaire + colonne de lecture) — Phase 16D.
   Desktop ≥1024px : sommaire latéral sticky. <1024px : sommaire replié en
   <details>/accordéon (.legal-toc-accordion, réutilise .accordion-item).
   -------------------------------------------------------------------------- */

.legal-layout {
  display: block;
}

.legal-toc-sidebar {
  display: none;
}

.legal-toc-sidebar__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.legal-toc-sidebar__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-left: 2px solid var(--color-border);
}

.legal-toc-sidebar__list a {
  display: block;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  line-height: var(--leading-snug);
}

.legal-toc-sidebar__list a:hover,
.legal-toc-sidebar__list a:focus-visible {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}

.legal-body {
  min-width: 0;
}

.legal-toc-accordion {
  margin-bottom: var(--space-8);
}

.legal-toc-accordion__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.legal-toc-accordion__list a {
  color: var(--color-primary);
}

@media (min-width: 1024px) {
  .legal-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-12);
    align-items: start;
  }

  .legal-toc-sidebar {
    display: block;
    position: sticky;
    /* 66px = hauteur mesurée en direct (Chrome DevTools) de
       .site-header__main. Note vérifiée en direct : la barre sticky du
       thème (.site-header__main, header-footer.css, non modifiée par
       Phase 16D) ne reste collée que tant que son parent .site-header
       (topbar + main, ~135px) n'a pas totalement défilé, soit environ
       69px de scroll — au-delà elle défile avec le reste, comportement
       préexistant du header, hors périmètre de cette phase. Cet offset
       reste correct pour la fenêtre où le header est visible et
       n'entraîne qu'un espace vide raisonnable au-delà. */
    top: calc(66px + var(--space-6));
  }

  .legal-toc-accordion {
    display: none;
  }
}

/* Les composés allemands des pages légales doivent pouvoir se couper sur
   les écrans étroits sans provoquer de débordement horizontal dans Chrome. */
@media (max-width: 479px) {
  .page-hero h1,
  .legal-content h2 {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* --------------------------------------------------------------------------
   Contenu corporate générique (Über uns, Versand & Lieferung,
   Rückgabe & Erstattung)
   -------------------------------------------------------------------------- */

.corporate-content h2 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
}

.corporate-content h2:first-child {
  margin-top: 0;
}

.corporate-content p {
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

.corporate-address {
  font-style: normal;
  line-height: var(--leading-relaxed);
  margin-block: var(--space-4);
}

.corporate-address a {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Kontakt — mise en page 2 colonnes desktop (infos + formulaire)
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  gap: var(--space-10);
}

.contact-info,
.contact-form-wrap {
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Phase 16D : colonne de lecture resserrée (680px, au lieu de 860px) —
   meilleure longueur de ligne pour un texte juridique dense. */
.legal-content { max-width: 680px; }
.legal-content h2 { padding-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); }

@media (min-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr 1.4fr;
    align-items: start;
  }
}

.contact-info h2,
.contact-form-wrap h2 {
  margin-top: 0;
}

.contact-form .form-group:last-of-type {
  margin-bottom: var(--space-6);
}

/* Honeypot anti-spam : masqué visuellement mais présent dans le DOM,
   jamais display:none seul (certains lecteurs d'écran ignorent mieux
   un positionnement hors écran + aria-hidden combinés). */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Phase 16D : .legal-review-notice (bandeau "revue juridique en cours")
   retiré — inutilisé dans les 8 pages légales (le contenu légal a été
   confirmé par le juriste du client, aucune page n'affichait plus ce
   bandeau). Aucune clause juridique modifiée par ce nettoyage. */

.legal-content h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-3);
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.legal-content ul,
.legal-content ol {
  padding-left: var(--space-6);
}

/* --------------------------------------------------------------------------
   Cartes "à retenir" (callouts) — Phase 16D. Uniquement sur les pages où
   les chiffres affichés existent déjà, mot pour mot, plus loin dans le
   texte de la même page (voir vérification par fichier dans le rapport).
   -------------------------------------------------------------------------- */

.legal-callouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.legal-callout {
  border-left: 3px solid var(--color-primary);
}

.legal-callout__value {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
}

.legal-callout__label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.legal-form-sample {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
}

.legal-form-sample__line {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--space-6);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.legal-form-sample__inline-line {
  display: inline-block;
  width: 12rem;
  max-width: 100%;
  min-width: 0;
  height: 1em;
  margin-left: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: bottom;
}

/* --------------------------------------------------------------------------
   Über uns — restructuration éditoriale (Phase 16G). Motifs visuels
   identiques à ceux de la homepage (kicker, grille 2 colonnes, carte à
   bordure gauche, CTA sombre) mais redéclarés ici sous un préfixe
   `about-` distinct : home.css n'est jamais chargé sur cette page (voir
   inc/enqueue.php, is_front_page() vs is_page()), donc aucun conflit,
   mais des classes séparées évitent toute ambiguïté de maintenance.
   -------------------------------------------------------------------------- */

.about-kicker {
  margin: 0 0 var(--space-2);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-kicker--center {
  text-align: center;
}

.about-hero__facts {
  margin: var(--space-4) 0 0;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.about-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-10);
}

.about-grid__text p {
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

.about-grid__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 240px;
}

.about-grid__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.about-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--space-10);
  padding: 0;
  list-style: none;
}

.about-categories-grid a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-bottom: var(--border-width) solid var(--color-border);
}

.about-categories-grid a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

@media (min-width: 640px) {
  .about-categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.about-grid--contact {
  margin-top: var(--space-6);
  align-items: start;
}

.about-fact-card {
  border-left: 3px solid var(--color-primary);
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-bg-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.about-fact-card__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.about-fact-card__list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
}

.about-fact-card__list dt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.about-fact-card__list dd {
  margin: 0;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.about-cta {
  background: linear-gradient(120deg, var(--color-secondary-dark), var(--color-primary-dark));
  color: var(--color-text-inverse);
}

.about-cta__kicker {
  color: var(--color-accent);
}

.about-cta__title {
  color: var(--color-text-inverse);
  margin-bottom: var(--space-6);
}

.about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.about-cta .btn--secondary {
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
}

.about-cta .btn--secondary:hover:not(:disabled),
.about-cta .btn--secondary:focus-visible {
  background-color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
  color: var(--color-secondary-dark);
}

.about-cta a:focus-visible {
  outline-color: var(--color-text-inverse);
}

.withdrawal-flow form { margin-block: var(--space-6); }
.withdrawal-flow .form-group { margin-bottom: var(--space-5); }
.withdrawal-flow label { display: block; font-weight: 700; margin-bottom: var(--space-2); }
.withdrawal-flow input { width: 100%; min-height: 48px; }
.withdrawal-review { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; gap: var(--space-3) var(--space-6); padding: var(--space-5); background: var(--color-bg-alt); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.withdrawal-review dt { font-weight: 700; }
.withdrawal-review dd { margin: 0; overflow-wrap: anywhere; }
.form-notice { padding: var(--space-5); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-alt); }
.form-notice--success { border-left: 4px solid var(--color-primary); }
.form-notice--error { border-left: 4px solid var(--color-warning); }
@media (max-width: 479px) { .withdrawal-review { grid-template-columns: 1fr; } .withdrawal-review dd { margin-bottom: var(--space-3); } }