/* ==========================================================================
   ESPACE COMPTE — portage de mockup_refv2/compte.css + bibliotheque.css
   ==========================================================================
   Chargé uniquement sur /mon-compte/ (enqueue conditionnel sous
   `ag_is_compte_page()` dans functions.php), comme tunnel.css l'est sur le
   tunnel : le reste du site ne paie pas une feuille qu'il n'utilise pas.

   Jetons — la maquette définit les siens (--ink, --muted, --rule…) ; chaque
   référence est traduite vers son alias --ag-*. `--muted` et `--ink-soft`
   valent la même couleur dans la maquette (#4B5563, commentée « idem »), donc
   les deux deviennent --ag-ink-soft.

   Tailles — les valeurs fixes sont ramenées au cran le plus proche de
   l'échelle, égalité au cran inférieur. Écarts à contrôler en vérification
   visuelle : 9.5->10.5, 11->10.5, 13->12.5, 13.5->14, 14.5->14, 15->14,
   15.5->16, 21->20, 22->20. Les trois `clamp()` sont conservés tels quels :
   ce sont des courbes responsives sur mesure, pas des crans d'échelle, et les
   remplacer changerait le comportement au redimensionnement.

   Non porté, faute de balisage correspondant :
   - Ravelry (bandeau bibliothèque + carte profil) — aucune intégration décidée.
   - Versions et mises à jour de patrons (`.cpat-update*`, `.pat-update-badge`,
     `.pat-card-version-num`) — traitées dans un plan séparé.
   - Suivi d'expédition et facture (`.ord-tracking-line`, `.ord-invoice-link`,
     `.ord-body-invoice`) — aucune source de données.
   - Règles que la maquette définit sans jamais les rendre : `.woo-head*`
     (composant WooHead mort), `.compte-hero-stats`, `.compte-subnav-count`,
     `.cpat-head-stats`, `.woo-trust*`, `.ord-actions`, `.ord-col-label`,
     `.ord-col-sub`, `.pat-btn-r`, `.woo-pref-toggle`, et le bouton de sortie
     de démo `.biblio-connected-exit`.
   ========================================================================== */

/* ============================================================================
   En-tête + sous-navigation (compact)
   ============================================================================ */
.compte-header {
  padding-top: 28px;
  padding-bottom: 0;
}

.compte-hero {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 22px;
}

.compte-hero-greet {
  max-width: 62ch;
  margin: 0;

  font-family: var(--ag-font-display);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.35;
  color: var(--ag-ink);
}

/* La maquette pose la couleur du prénom en style inline sur le <em> ; elle
   devient une règle ici. C'est le seul accent de la vue, conformément à la
   règle « un élément accent par écran » du design system. */
.compte-hero-greet em { color: var(--ag-accent); }

.compte-subnav { border-top: 1px solid var(--ag-rule); }

.compte-subnav-list {
  display: flex; flex-wrap: wrap; gap: 32px;

 margin: 0; padding: 0;

  list-style: none;
}

.compte-subnav-list a { cursor: pointer;

  position: relative;

  display: inline-flex; gap: 8px; align-items: center;

  padding: 15px 0; border: none;

  font-family: var(--ag-font-body); font-size: var(--ag-text-sm); font-weight: 500;
  color: var(--ag-ink-soft);

  /* Les onglets sont des liens (une URL par onglet) là où la maquette posait
     des boutons : il faut donc neutraliser le soulignement que le thème
     applique aux liens de contenu, absent du rendu de la maquette. */
  text-decoration: none;

  background: none;
}

/* La maquette fait pousser ce trait en animant `width` de 0 à 100 %. Même
   geste ici — même durée, même courbe, même sens de gauche à droite — mais
   porté par `transform: scaleX()` : animer une largeur force un recalcul de
   mise en page à chaque image, là où une transformation n'en demande aucun. */
.compte-subnav-list a::after {
  content: "";

 position: absolute; bottom: 9px; left: 0;
  transform-origin: left;
  transform: scaleX(0);

 width: 100%;
  height: 1px;

 background: var(--ag-ink);

  transition: transform .25s ease;
}
.compte-subnav-list a:hover { color: var(--ag-ink); }
.compte-subnav-list a:hover::after { transform: scaleX(1); }
.compte-subnav-list a.active { font-weight: 600; color: var(--ag-ink); }
.compte-subnav-list a.active::after { transform: scaleX(1); background: var(--ag-accent); }

/* ============================================================================
   MES PATRONS — bibliothèque
   ============================================================================ */
.compte-patrons { padding: 40px 0 120px; }

.cpat-head {
  display: flex; flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 40px;
  padding: 32px 0 28px;
  border-bottom: 1px solid var(--ag-rule);
}
.cpat-head-left { display: flex; flex-direction: column; gap: 6px; }

.cpat-title {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1; letter-spacing: -0.015em;
}

.cpat-subtitle {
  margin: 0;

  font-family: var(--ag-font-display);
  font-size: var(--ag-text-base); font-style: italic; color: var(--ag-ink-soft);
}

.cpat-head-right {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
}

.cpat-search {
  display: flex; gap: 8px; align-items: center;

  padding: 9px 16px;
  border: 1px solid var(--ag-rule-strong);
  border-radius: 999px;

  color: var(--ag-ink-soft);
}

.cpat-search input { width: 200px;
  border: none;

  font-family: var(--ag-font-body); font-size: var(--ag-text-sm);
  color: var(--ag-ink);

 background: none; outline: none;
}
.cpat-search input::placeholder { color: var(--ag-ink-soft); }

.cpat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 28px;

 margin: 0; padding: 0;

  list-style: none;
}

@media (width <= 1100px) {
.cpat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (width <= 720px)  {
.cpat-grid { grid-template-columns: 1fr; gap: 28px; }
}

.pat-card { overflow: hidden;
  display: flex; flex-direction: column;

  border: 1px solid var(--ag-rule);
  border-radius: 4px;

  background: var(--ag-paper);

  transition: border-color .2s ease, transform .3s ease;
}
.pat-card:hover { transform: translateY(-2px); border-color: var(--ag-ink); }
.pat-card-media { position: relative; }

.pat-card-body {
  display: flex; flex: 1; flex-direction: column;
  gap: 4px;

  padding: 20px 20px 22px;
}

.pat-card-name {
  margin: 0 0 6px;

 font-size: var(--ag-text-lg); font-weight: 400; line-height: 1.1;
  letter-spacing: -0.005em;
}
.pat-btn-full { width: 100%; padding: 12px; }

.pat-btn { cursor: pointer;

  display: inline-flex;
  gap: 7px; align-items: center; justify-content: center;

 padding: 10px 8px;
  border: 1px solid var(--ag-rule-strong);
  border-radius: 4px;

  font-family: var(--ag-font-body);
  font-size: var(--ag-text-cap); font-weight: 500;
  color: var(--ag-ink);
  white-space: nowrap;

  background: var(--ag-paper);

  transition: all .18s ease;
}
.pat-btn:hover { border-color: var(--ag-ink); color: var(--ag-cream); background: var(--ag-ink); }
.pat-btn-primary { border-color: var(--ag-ink); color: var(--ag-cream); background: var(--ag-ink); }
.pat-btn-primary:hover { border-color: var(--ag-accent); color: var(--ag-paper); background: var(--ag-accent); }

.cpat-empty { padding: 80px 0; text-align: center; }

/* ============================================================================
   WOOCOMMERCE
   ============================================================================ */
.compte-woo { padding: 80px 0 120px; }
.compte-orders { padding: 40px 0 120px; }

/* ============================================================================
   COMMANDES — historique compact, détail dépliable
   ============================================================================ */
.ord-head { margin-bottom: 32px; }

.ord-list {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--ag-ink);
}
.ord-row { border-bottom: 1px solid var(--ag-rule); }
.ord-row.open { background: var(--ag-paper-deep); }

.ord-row-head {
  cursor: pointer;

  display: grid;
  grid-template-columns: 180px minmax(240px,1fr) minmax(240px,1fr) 130px 28px;
  column-gap: 40px; align-items: center;

  padding: 16px 6px;
}
.ord-row-head:hover { background: var(--ag-paper-deep); }

.ord-when {
  display: flex; flex-direction: column; gap: 3px;
}

.ord-date {
  font-family: var(--ag-font-display);
  font-size: var(--ag-text-md); font-weight: 400; color: var(--ag-ink); letter-spacing: -0.005em;
}

.ord-ref {
  font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs); color: var(--ag-ink-soft);
  letter-spacing: 0.04em;

 opacity: .75;
}

.ord-table-head {
  display: grid;
  grid-template-columns: 180px minmax(240px,1fr) minmax(240px,1fr) 130px 28px;
  column-gap: 40px;

  padding: 0 6px 12px;
  border-bottom: 1px solid var(--ag-ink);
}

.ord-table-head span {
  font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs); color: var(--ag-ink-soft); text-transform: uppercase;
  letter-spacing: 0.14em;
}
.ord-table-head-total { text-align: right; }

.ord-col {
  display: flex; flex-direction: column; gap: 5px;
}

.ord-col-status {
  font-family: var(--ag-font-body); font-size: var(--ag-text-sm); font-weight: 600;
  color: var(--ag-ink);
}
.ord-col-action { align-self: start; margin-top: 1px; }
.ord-col .ord-dlbtn { align-self: flex-start; }

.ord-tracking-line {
  font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs);
  color: var(--ag-ink-soft); letter-spacing: 0.02em;
}

a.ord-tracking-line {
  color: var(--ag-accent-deep); text-decoration: underline; text-underline-offset: 2px;
}

.ord-row-total {
  font-family: var(--ag-font-display); font-size: var(--ag-text-xl);
  font-variant-numeric: tabular-nums; color: var(--ag-ink); white-space: nowrap;
}
.ord-amount { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }

.ord-amount span {
  font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs); color: var(--ag-ink-soft); text-transform: uppercase;
  letter-spacing: 0.12em;
}

.ord-chevron { cursor: pointer;

  display: inline-flex; flex-shrink: 0; align-items: center; align-self: center; justify-content: center;

  width: 28px; height: 28px; border: none;

  color: var(--ag-ink);

  background: none;

 transition: transform .2s ease;
}
.ord-row.open .ord-chevron { transform: rotate(180deg); }

.ord-body {
  padding: 4px 4px 20px;
}

.ord-body-cols {
  display: grid;
  grid-template-columns: 180px minmax(240px,1fr) minmax(240px,1fr) 130px 28px;
  column-gap: 40px;

  padding-top: 16px; border-top: 1px solid var(--ag-rule);
}

.ord-body-products {
  display: flex; flex-direction: column; gap: 8px;

 margin: 0; padding: 0;

  list-style: none;
}

.ord-body-products li {
  font-family: var(--ag-font-body); font-size: var(--ag-text-sm); color: var(--ag-ink);
}
.ord-body-products li span { color: var(--ag-ink-soft); }

.ord-body-address {
  margin: 10px 0 0;

 font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs); line-height: 1.5; color: var(--ag-ink-soft);
  letter-spacing: 0.02em;
}

.ord-file-link { cursor: pointer;

  display: inline-flex; gap: 9px; align-items: center;

  padding: 0; border: none;

  font-family: var(--ag-font-body); font-size: var(--ag-text-sm); font-weight: 500; color: var(--ag-ink);
  text-align: left;

 background: none;
}
.ord-file-link span { display: inline-flex; font-size: var(--ag-text-cap); color: var(--ag-accent-deep); }
.ord-file-link:hover { color: var(--ag-accent-deep); }
.ord-file-link:hover span { color: var(--ag-accent-deep); }

.ord-dlbtn { cursor: pointer;

  padding: 6px 14px; border: 1px solid var(--ag-rule-strong); border-radius: 999px;

  font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs);
  color: var(--ag-ink); letter-spacing: 0.05em; white-space: nowrap;

 background: none;

  transition: all .18s ease;
}
.ord-dlbtn:hover { border-color: var(--ag-ink); color: var(--ag-cream); background: var(--ag-ink); }
.ord-downloads { position: relative; }

.ord-downloads-pop {
  position: absolute; z-index: 5; top: calc(100% + 8px); left: 0;

  display: flex; flex-direction: column; gap: 16px;

  width: 280px; max-width: calc(100vw - 32px); padding: 18px 20px; border: 1px solid var(--ag-rule-strong);

  /* La maquette pose 6px ici, seule valeur hors de l'échelle 2/4/pill du
     design system et seule divergence parmi les cinq panneaux du fichier —
     ramenée à 4px comme ses voisins. */
  border-radius: 4px;

  background: var(--ag-paper); box-shadow: 0 12px 32px rgb(20 20 20 / 12%);
}
.ord-downloads-group { display: flex; flex-direction: column; gap: 8px; }

.ord-downloads-group-name {
  font-family: var(--ag-font-display); font-size: var(--ag-text-sm); color: var(--ag-ink);
}

.woo-orders-foot {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;

  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--ag-rule);
}

/* Adresses */
.woo-addresses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.woo-address {
  display: flex; flex-direction: column; gap: 14px;

  padding: 32px 36px;
  border: 1px solid var(--ag-rule);
  border-radius: 4px;

  background: var(--ag-paper);
}

.woo-address-name {
  margin: 4px 0 0;
  font-size: var(--ag-text-xxxl);
  letter-spacing: -0.01em;
}

.woo-address address {
  font-size: var(--ag-text-base);
  font-style: normal;
  line-height: 1.7;
  color: var(--ag-ink);
}

.woo-address-phone {
  margin: 0;
  font-family: var(--ag-font-mono);
  font-size: var(--ag-text-cap);
  color: var(--ag-ink-soft);
}

.woo-address footer {
  display: flex; gap: 8px;

  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ag-rule);
}

.woo-profil {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.woo-card {
  display: flex; flex-direction: column; gap: 18px;

  padding: 28px 32px;
  border: 1px solid var(--ag-rule);
  border-radius: 4px;

  background: var(--ag-paper);
}

.woo-card header {
  display: flex;
  align-items: center; justify-content: space-between;

  padding-bottom: 16px;
  border-bottom: 1px solid var(--ag-rule);
}

.woo-card-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}

.woo-card-fields > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;

  padding: 12px 0;
  border-bottom: 1px solid var(--ag-rule);
}
.woo-card-fields > div:last-child { border-bottom: none; }

.woo-card-fields dt {
  padding-top: 3px;

  font-family: var(--ag-font-mono);
  font-size: var(--ag-text-xxs); color: var(--ag-ink-soft);
  text-transform: uppercase; letter-spacing: 0.18em;
}

.woo-card-fields dd {
  margin: 0; font-size: var(--ag-text-sm); color: var(--ag-ink);
}

.woo-card-fields dd a {
  margin-left: 6px;
  padding-bottom: 1px;
  border-bottom: 1px solid currentcolor;

  font-size: var(--ag-text-cap);
  color: var(--ag-accent-deep);
}

.woo-prefs {
  display: flex; flex-direction: column; gap: 0;

 margin: 0; padding: 0;

  list-style: none;
}

.woo-prefs li {
  display: flex; gap: 24px;
  align-items: center; justify-content: space-between;

  padding: 16px 0;
  border-bottom: 1px solid var(--ag-rule);
}
.woo-prefs li:last-child { border-bottom: none; }

.woo-prefs li > span:first-child {
  display: flex; flex-direction: column; gap: 4px;
}

.woo-prefs strong {
  font-family: var(--ag-font-display); font-size: var(--ag-text-md);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.woo-prefs em {
  font-family: var(--ag-font-body);
  font-size: var(--ag-text-cap);
  font-style: normal;
  color: var(--ag-ink-soft);
}

.woo-switch {
  cursor: pointer;

  position: relative;

  flex-shrink: 0;

  width: 46px; height: 26px;
  padding: 0;
  border: 1px solid var(--ag-rule-strong);
  border-radius: 999px;

  background: var(--ag-paper-deep);

  transition: background .2s ease, border-color .2s ease;
}

.woo-switch-knob {
  position: absolute;
  top: 2px; left: 2px;

  width: 20px; height: 20px;
  border-radius: 50%;

  background: var(--ag-ink);

  transition: transform .2s ease, background .2s ease;
}

.woo-switch.on {
  border-color: var(--ag-accent);
  background: var(--ag-accent);
}

.woo-switch.on .woo-switch-knob {
  transform: translateX(20px);
  background: var(--ag-paper);
}

/* Sous-sections de la page Profil & adresses */
.woo-subsection { margin-top: 56px; }

.woo-subsection-head {
  display: flex; flex-direction: column; gap: 8px;

 margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ag-rule);
}
.woo-subsection-head .muted { max-width: 64ch; margin: 0; font-size: var(--ag-text-sm); }

.woo-quiet {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: baseline;

  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--ag-rule);
}
.woo-quiet-links { display: flex; flex-wrap: wrap; gap: 20px; }

.woo-quiet-link { cursor: pointer;

 padding: 0; border: none;

  font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs);
  color: var(--ag-ink-soft); text-decoration: underline; text-underline-offset: 3px; letter-spacing: 0.06em;

  background: none;
}
.woo-quiet-link:hover { color: var(--ag-ink); }
.woo-quiet-link-danger:hover { color: var(--ag-accent-deep); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (width <= 1024px) {
.cpat-head { flex-direction: column; align-items: flex-start; }
  .cpat-head-right { justify-content: space-between; width: 100%; }
  .ord-row-head { position: relative; grid-template-columns: 1fr; row-gap: 14px; }
  .ord-body-cols { grid-template-columns: 1fr; row-gap: 16px; }
  .ord-table-head { display: none; }
  .ord-amount { align-items: flex-start; }
  .ord-chevron { position: absolute; top: 16px; right: 6px; }
  .woo-addresses { grid-template-columns: 1fr; }

  .woo-profil { grid-template-columns: 1fr; }
}

@media (width <= 720px) {
.compte-header { padding-top: 24px; }
  .compte-subnav-list { gap: 22px; }
  .compte-patrons, .compte-woo { padding: 32px 0 80px; }
  .cpat-head-right { flex-direction: column; gap: 14px; align-items: flex-start; }
  .cpat-search input { width: 100%; }
  .ord-row-head { row-gap: 12px; }
  .woo-card-fields > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================================
   PORTE D'ENTRÉE DU COMPTE — écrans 1 et 2, avant la connexion
   ============================================================================
   Portage de la proposition B (« la bibliothèque d'abord ») de
   mockup_refv2/Bibliotheque - 3 propositions.html. La maquette montre l'écran
   dans un cadre de démonstration ; ici il occupe la pleine largeur, entre le
   header et le footer du site.
   ============================================================================ */
.porte {
  display: flex; justify-content: center;
}

.porte-left {
  display: flex; flex-direction: column; justify-content: center;

  max-width: 640px;
  padding: 88px 72px;
}

/* La maquette pose `clamp(38px, 3.8vw, 54px)` ; la taille vient du palier
   `display-m` du thème, posé par la classe sur le titre — un clamp maison
   dériverait du reste des titres au premier ajustement du ramp. */
.porte-left h1 { margin: 14px 0; }

.porte-lede {
  max-width: 38ch; margin: 0 0 34px;

  font-size: var(--ag-text-base); line-height: 1.6; color: var(--ag-ink-soft);
}

.porte-error {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 2px solid var(--ag-accent);

  font-size: var(--ag-text-sm); line-height: 1.5; color: var(--ag-ink);

  background: var(--ag-paper-deep);
}

/* Le bloc `role="alert"` reçoit le focus au chargement, et le navigateur
   l'entoure de son anneau — autour d'un simple paragraphe, cela se lit comme un
   champ en erreur, et cela pose un second aplat accent à côté du bouton.
   Le supprimer ne retire aucune affordance : sans `tabindex`, le paragraphe
   n'est pas atteignable au clavier, donc l'anneau n'a jamais rien à signaler.
   Le rôle `alert` continue de l'annoncer au lecteur d'écran. */
.porte-error:focus,
.porte-error:focus-visible { outline: none; }

/* ---- champ mot de passe + bouton « œil » ---- */
.porte-password-field { margin-bottom: 14px; }

.porte-password-wrap {
  position: relative;
}

.porte-password-wrap .porte-form-input {
  padding-right: 44px;
}

.porte-password-toggle {
  cursor: pointer;

  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  border: 0;

  color: var(--ag-ink-soft);

  background: none;
}

.porte-password-toggle:hover,
.porte-password-toggle:focus-visible { color: var(--ag-ink); }

.porte-password-toggle svg { width: 20px; height: 20px; }

/* SVG doesn't reliably pick up the UA stylesheet's `[hidden] { display: none }`
   the way HTML elements do — spelled out explicitly rather than relying on it. */
.porte-password-toggle svg[hidden] { display: none; }

.porte-form-hint {
  margin: 6px 0 0;
  font-size: var(--ag-text-xs);
  color: var(--ag-ink-soft);
}

/* ---- champ + CTA, partagés par les deux écrans ---- */
.porte-form { display: flex; flex-direction: column; gap: 14px; }

.porte-form-label {
  display: block;

 margin-bottom: 10px;

  font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs); color: var(--ag-ink-soft); text-transform: uppercase;
  letter-spacing: 0.16em;
}

.porte-form-input {
  width: 100%;
  padding: 17px 18px;
  border: 1px solid var(--ag-rule-strong); border-radius: 4px;

  font-family: var(--ag-font-body); font-size: var(--ag-text-base); color: var(--ag-ink);

  background: var(--ag-paper);
}
.porte-form-input:focus { border-color: var(--ag-ink); outline: none; }

.porte-form-cta {
  cursor: pointer;

  display: inline-flex; gap: 10px; align-items: center; justify-content: center;

  width: 100%;
  padding: 16px 26px;
  border: none; border-radius: 999px;

  font-family: var(--ag-font-body); font-size: var(--ag-text-sm); font-weight: 600; color: var(--ag-paper);
  text-decoration: none;

  background: var(--ag-accent);

  transition: background var(--ag-dur-base) var(--ag-ease), transform var(--ag-dur-base) var(--ag-ease);
}
.porte-form-cta:hover { transform: translateY(-1px); color: var(--ag-paper); background: var(--ag-accent-deep); }
.porte-form-cta span { transition: transform var(--ag-dur-base) var(--ag-ease); }
.porte-form-cta:hover span { transform: translateX(4px); }
.porte-cta-wrap { margin: 0; }

/* Champ appât — hors flux visuel et hors parcours clavier, jamais masqué par
   `display: none` : les robots qui remplissent les formulaires ignorent souvent
   les champs ainsi retirés du rendu, et l'appât ne prendrait plus rien. */
.porte-form-hp {
  position: absolute; left: -9999px;

  overflow: hidden;

  width: 1px; height: 1px;
}

/* ---- écran 2 ---- */
.porte-recall {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;

  margin: 0 0 26px;

  font-size: var(--ag-text-sm); color: var(--ag-ink-soft);
}
.porte-recall a { font-size: var(--ag-text-cap); color: var(--ag-accent-deep); }

.porte-aside {
  margin: 22px 0 0;
  font-size: var(--ag-text-cap); line-height: 1.6; color: var(--ag-ink-soft);
}
.porte-aside a { color: var(--ag-accent-deep); }

.porte-aside--ruled {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--ag-rule);
}

/* ---- liste numérotée ---- */
.porte-list {
  display: flex; flex-direction: column; gap: 12px;

  margin: 30px 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--ag-rule);

  list-style: none;
}

.porte-list li {
  display: grid; grid-template-columns: 26px 1fr; gap: 6px;

  font-size: var(--ag-text-sm); line-height: 1.5; color: var(--ag-ink-soft);
}

.porte-list b {
  padding-top: 3px;

  font-family: var(--ag-font-mono); font-size: var(--ag-text-xxs); color: var(--ag-ink);
  letter-spacing: 0.14em;
}

.porte-foot {
  margin: 22px 0 0;
  font-size: var(--ag-text-cap); line-height: 1.6; color: var(--ag-ink-soft);
}

@media (width <= 1000px) {
  .porte-left { padding: 56px 32px; }
}

@media (width <= 720px) {
  .porte-left { padding: 44px 24px; }
}

/* ============================================================================
   Liste de fichiers d'une carte de bibliothèque
   ============================================================================
   La maquette ne prévoit rien ici : ses données de démo donnent un seul fichier
   par patron, donc le bouton « Télécharger » y suffit toujours. Le catalogue
   réel vend des produits à plusieurs fichiers (deux langues pour un châle, huit
   fiches pour le carnet de tricot), qu'il faut pouvoir prendre séparément.

   Le dépli se fait EN PLACE, pas en surcouche comme dans l'onglet Commandes :
   `.pat-card` porte `overflow: hidden`, qui rognerait un panneau positionné en
   absolu. Le style des liens reste celui des fichiers de commande.
   ============================================================================ */
.ord-files {
  display: flex; flex-direction: column; gap: 8px;

  margin: 0; padding: 0;

  list-style: none;
}

.pat-card-files {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ag-rule);
}

/* ============================================================================
   Panneaux repliés — l'attribut `hidden` doit gagner
   ============================================================================
   `hidden` ne pose qu'un `display: none` de feuille utilisateur-agent : toute
   règle d'auteur qui donne un `display` au même élément le bat, et le panneau
   reste peint alors que le DOM le dit fermé. Les trois sélecteurs ci-dessous
   portent justement un display (flex, grid), donc chacun a besoin de sa
   contrepartie — même convention que `.ag-tabpanel[hidden]` et
   `.ag-lightbox[hidden]` dans style.css.
   ============================================================================ */
.ord-downloads-pop[hidden],
.pat-card-files[hidden],
.cpat-grid[hidden] {
  display: none;
}