/* Composants de l'identité 2026 — Parcours Informatique, FST / UMNG.
   Transposition du kit d'interface : chaque composant du kit devient ici un jeu de classes.
   Les valeurs sont celles du kit ; les adaptations de palier, exprimées en JSX dans le
   prototype, sont ici des media queries (1280 / 768 / 390). */

/* ============================================================================
   NOYAU
   ========================================================================== */

/* --- Sur-titre -------------------------------------------------------------- */

.pi-eyebrow {
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--meta-xs);
  line-height: 1.3;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--rouge-600);
  margin: 0;
}

.pi-eyebrow--sm { font-size: var(--meta-sm); }
.pi-eyebrow--inverse { color: var(--creme-200); }
.pi-eyebrow--quiet { color: var(--encre-500); }
.pi-eyebrow--secondary { color: var(--bleu-800); }

/* --- Filet d'accentuation --------------------------------------------------- */

.pi-rule {
  width: var(--rule-w);
  height: var(--rule-h);
  background: var(--accent-rule);
  margin: var(--rule-my) 0 calc(var(--rule-my) - 4px);
}

.pi-rule--sm {
  width: 64px;
  height: var(--stroke-accent);
  margin: 18px 0 16px;
}

/* --- Action ----------------------------------------------------------------- */

.pi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--ui-md);
  line-height: 1.2;
  padding: 14px 22px;
  border-radius: var(--radius-action);
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  transition:
    background var(--duration-hover) var(--ease-standard),
    color var(--duration-hover) var(--ease-standard),
    border-color var(--duration-hover) var(--ease-standard);
}

.pi-btn:hover,
.pi-btn:focus {
  color: var(--action-primary-fg);
}

.pi-btn--md { font-size: var(--ui-sm); padding: 13px 20px; }
.pi-btn--sm { font-size: var(--ui-sm); padding: 12px 18px; }

.pi-btn--solid {
  background: var(--action-secondary-bg);
  color: var(--action-secondary-fg);
}

.pi-btn--solid:hover,
.pi-btn--solid:focus { color: var(--action-secondary-fg); }

.pi-btn--ghost {
  background: transparent;
  color: var(--action-ghost-fg);
  border: var(--stroke-ghost) solid var(--action-ghost-border);
  padding: 13.5px 22px;
}

.pi-btn--ghost:hover,
.pi-btn--ghost:focus { color: var(--action-ghost-fg); }

.pi-btn--ghost.pi-btn--md { padding: 11.5px 20px; }
.pi-btn--ghost.pi-btn--sm { padding: 10.5px 18px; }

.pi-btn--ghost-inverse {
  background: transparent;
  color: var(--action-ghost-inverse-fg);
  border: var(--stroke-ghost) solid var(--action-ghost-inverse-border);
  padding: 13.5px 22px;
}

.pi-btn--ghost-inverse:hover,
.pi-btn--ghost-inverse:focus { color: var(--action-ghost-inverse-fg); }

.pi-btn--ghost-inverse.pi-btn--md { padding: 11.5px 20px; }
.pi-btn--ghost-inverse.pi-btn--sm { padding: 10.5px 18px; }

.pi-btn--block { width: 100%; }

.pi-btn:disabled,
.pi-btn[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
}

/* --- Étiquette de métadonnée ----------------------------------------------- */

.pi-badge {
  display: inline-block;
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--meta-sm);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: var(--radius-action);
  background: var(--bleu-800);
  color: var(--blanc);
  border: none;
}

.pi-badge--sm { font-size: var(--meta-xs); padding: 6px 8px; }

.pi-badge--accent { background: var(--creme-200); color: var(--violet-800); }
.pi-badge--action { background: var(--rouge-600); color: var(--blanc); }

.pi-badge--outline,
.pi-badge--outline-inverse,
.pi-badge--pending {
  background: transparent;
  padding: 6px 10px;
}

.pi-badge--outline.pi-badge--sm,
.pi-badge--outline-inverse.pi-badge--sm,
.pi-badge--pending.pi-badge--sm { padding: 5px 8px; }

.pi-badge--outline {
  color: var(--violet-800);
  border: var(--stroke-hairline) solid var(--violet-a30);
}

.pi-badge--outline-inverse {
  color: var(--blanc);
  border: var(--stroke-hairline) solid var(--creme-a55);
}

.pi-badge--pending {
  color: var(--encre-900);
  border: var(--stroke-hairline) dashed var(--violet-a40);
}

/* --- Filtre de liste ------------------------------------------------------- */

.pi-chip {
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--meta-sm);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
  border-radius: var(--radius-action);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  background: transparent;
  color: var(--violet-800);
  border: var(--stroke-hairline) solid var(--violet-a30);
  padding: 8px 12px;
  transition:
    background var(--duration-hover) var(--ease-standard),
    color var(--duration-hover) var(--ease-standard);
}

.pi-chip.is-active,
.pi-chip[aria-pressed="true"] {
  background: var(--violet-800);
  color: var(--blanc);
  border-color: transparent;
  padding: 9px 12px;
}

.pi-chip--inverse {
  color: var(--creme-200);
  border-color: var(--creme-a55);
}

.pi-chip--inverse.is-active,
.pi-chip--inverse[aria-pressed="true"] {
  background: var(--creme-200);
  color: var(--violet-800);
}

/* --- Lien de lecture ------------------------------------------------------- */

.pi-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--ui-sm);
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--stroke-ghost) solid var(--rouge-600);
  padding-bottom: 3px;
  color: var(--text-link);
}

.pi-link:hover { color: var(--rouge-600); }

.pi-link--inverse { color: var(--creme-200); }
.pi-link--inverse:hover { color: var(--blanc); }

.pi-link--quiet {
  color: var(--text-title);
  border-bottom-color: var(--violet-a30);
}

/* Lien fléché en capitales monospace : « Voir le profil → ». */
.pi-arrow-link {
  display: inline-block;
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--meta-sm);
  line-height: 1.3;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-link);
  text-decoration: none;
}

.pi-arrow-link:hover { color: var(--rouge-600); }

/* ============================================================================
   CONTENU
   ========================================================================== */

/* --- Conteneur de base ----------------------------------------------------- */

.pi-card {
  border-radius: var(--radius-none);
  background: var(--surface-card);
  border: var(--stroke-hairline) solid var(--border-hairline);
  color: var(--text-body);
}

.pi-card--accent {
  background: var(--surface-accent);
  border: none;
  color: var(--text-title);
}

.pi-card--inverse {
  background: var(--surface-inverse);
  border: none;
  color: var(--text-on-inverse);
}

.pi-card--dashed {
  background: var(--surface-card);
  border: var(--stroke-hairline) dashed var(--border-dashed);
}

.pi-card--plain {
  background: var(--surface-card);
  border: none;
}

.pi-card__header {
  background: var(--surface-accent);
  color: var(--text-title);
  padding: 13px 20px;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--title-7);
  line-height: var(--title-7-lh);
}

.pi-card__header--inverse {
  background: var(--surface-inverse);
  color: var(--blanc);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--body-2xs);
  line-height: 1.3;
}

.pi-card__body { padding: 24px; }
.pi-card__body--tight { padding: 20px; }
.pi-card__body--loose { padding: 26px; }

/* --- Avertissement --------------------------------------------------------- */

.pi-callout {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--body-xs);
  line-height: 1.5;
  background: var(--rouge-a06);
  border-left: var(--stroke-accent) solid var(--rouge-600);
  color: var(--text-danger);
}

.pi-callout--neutral {
  background: var(--sable-50);
  border-left-color: var(--violet-800);
  color: var(--text-title);
}

/* --- Liste filetée --------------------------------------------------------- */

.pi-datalist {
  display: flex;
  flex-direction: column;
}

/* « split » : libellé à gauche, valeur monospace à droite. */
.pi-datalist__item {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
}

.pi-datalist__item:not(:last-child) {
  border-bottom: var(--stroke-hairline) solid var(--violet-a10);
}

.pi-datalist__label {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  line-height: 1.4;
  color: var(--text-body);
}

.pi-datalist__value {
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--ui-2xs);
  line-height: 1.4;
  color: var(--text-link);
  flex: none;
}

/* « numbered » : pièces d'un dossier, numérotées en bleu. */
.pi-datalist--numbered .pi-datalist__item {
  justify-content: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  border-bottom: none;
}

.pi-datalist--numbered .pi-datalist__item:last-child {
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
}

.pi-datalist--numbered .pi-datalist__num {
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--meta-sm);
  line-height: 1.6;
  color: var(--text-link);
  flex: none;
  width: 22px;
}

.pi-datalist--numbered .pi-datalist__label {
  font-size: var(--body-xs);
  line-height: 1.6;
  color: var(--text-title);
}

/* « head » : liste en colonnes, filet fort sur la première rangée. */
.pi-datalist--head {
  display: grid;
  gap: 0 32px;
  grid-template-columns: minmax(0, 1fr);
}

.pi-datalist--head.pi-datalist--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pi-datalist--head.pi-datalist--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pi-datalist--head .pi-datalist__item {
  display: block;
  border-top: var(--stroke-hairline) solid var(--border-rule);
  border-bottom: none;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: var(--body-xs);
  line-height: 1.5;
  color: var(--text-title);
}

/* Filet fort sur la tête de chaque colonne. */
.pi-datalist--head.pi-datalist--cols-1 .pi-datalist__item:nth-child(-n + 1),
.pi-datalist--head.pi-datalist--cols-2 .pi-datalist__item:nth-child(-n + 2),
.pi-datalist--head.pi-datalist--cols-3 .pi-datalist__item:nth-child(-n + 3) {
  border-top: var(--stroke-rule) solid var(--border-strong);
}

@media (max-width: 767.98px) {
  .pi-datalist--head.pi-datalist--cols-2,
  .pi-datalist--head.pi-datalist--cols-3 { grid-template-columns: minmax(0, 1fr); }

  .pi-datalist--head.pi-datalist--cols-2 .pi-datalist__item:nth-child(-n + 2),
  .pi-datalist--head.pi-datalist--cols-3 .pi-datalist__item:nth-child(-n + 3) {
    border-top: var(--stroke-hairline) solid var(--border-rule);
  }

  .pi-datalist--head .pi-datalist__item:first-child {
    border-top: var(--stroke-rule) solid var(--border-strong);
  }
}

/* --- Emplacement d'image --------------------------------------------------- */

.pi-imgph {
  background: repeating-linear-gradient(135deg, var(--lilas-100) 0 8px, var(--lilas-50) 8px 16px);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 10px;
}

.pi-imgph--creme {
  background: repeating-linear-gradient(135deg, var(--creme-400) 0 6px, var(--creme-300) 6px 12px);
}

.pi-imgph--center {
  align-items: center;
  justify-content: center;
}

.pi-imgph--portrait { aspect-ratio: 4 / 5; }

.pi-imgph__label {
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--meta-xs);
  line-height: 1.3;
  color: var(--lilas-400);
  background: var(--blanc);
  padding: 5px 7px;
}

/* --- Carte d'actualité ----------------------------------------------------- */

.pi-newscard {
  display: block;
  background: var(--surface-card);
  border: var(--stroke-hairline) solid var(--border-hairline);
  color: inherit;
  text-decoration: none;
}

.pi-newscard:hover { color: inherit; }

.pi-newscard:hover .pi-newscard__title { color: var(--rouge-600); }

.pi-newscard__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.pi-newscard__body { padding: 20px; }

.pi-newscard__date {
  font-family: var(--font-meta);
  font-size: var(--meta-sm);
  line-height: 1.3;
  color: var(--text-accent);
}

.pi-newscard__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--title-6);
  line-height: 1.3;
  color: var(--text-title);
  margin-top: 10px;
  transition: color var(--duration-hover) var(--ease-standard);
}

.pi-newscard__excerpt {
  font-family: var(--font-body);
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: var(--text-body);
  margin: 10px 0 0;
}

/* --- Pagination ------------------------------------------------------------ */

.pi-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pi-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--meta-sm);
  line-height: 1.3;
  min-width: 44px;
  min-height: 40px;
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--radius-action);
  background: transparent;
  color: var(--text-title);
  border: var(--stroke-hairline) solid var(--violet-a30);
}

.pi-pagination__page:hover {
  color: var(--rouge-600);
  border-color: var(--rouge-600);
}

.pi-pagination__page.is-current {
  background: var(--violet-800);
  color: var(--blanc);
  border-color: transparent;
}

.pi-pagination__page.is-disabled {
  opacity: .4;
  pointer-events: none;
}

.pi-pagination__next {
  margin-left: 6px;
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--meta-sm);
  line-height: 1.3;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-link);
  text-decoration: none;
}

.pi-pagination__next:hover { color: var(--rouge-600); }

/* --- Fiche de personne ---------------------------------------------------- */

.pi-person {
  background: var(--surface-card);
  border: var(--stroke-hairline) solid var(--border-hairline);
  display: block;
  text-decoration: none;
  color: inherit;
}

.pi-person__portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.pi-person__body { padding: 18px 20px 20px; }

.pi-person__name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--title-4);
  line-height: var(--title-4-lh);
  color: var(--text-title);
  margin: 0;
}

.pi-person__qualification {
  font-family: var(--font-body);
  font-size: var(--body-xs);
  line-height: 1.5;
  color: var(--text-body);
  margin-top: 6px;
}

.pi-person__grade {
  font-family: var(--font-meta);
  font-size: var(--meta-sm);
  line-height: 1.4;
  color: var(--text-meta);
  margin-top: 4px;
}

.pi-person__bio {
  font-family: var(--font-body);
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: var(--text-muted);
  margin: 14px 0 0;
}

.pi-person__courses {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}

.pi-person__course {
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: var(--body-2xs);
  line-height: 1.4;
  color: var(--text-title);
}

.pi-person__link { margin-top: 16px; }

/* --- Colonne de l'offre de formation -------------------------------------- */

.pi-program {
  display: flex;
  flex-direction: column;
  border-right: var(--stroke-hairline) solid var(--border-rule);
  padding: 30px 26px;
}

.pi-program--last { border-right: none; }
.pi-program--first { padding-left: 0; }

.pi-program__badges {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.pi-program__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--title-1);
  line-height: var(--title-1-lh);
  color: var(--text-title);
  margin: 0;
}

.pi-program__summary {
  font-family: var(--font-body);
  font-size: var(--body-xs);
  line-height: var(--body-xs-lh);
  color: var(--text-body);
  margin: 12px 0 18px;
}

.pi-program--pending .pi-program__summary { color: var(--text-muted); }

.pi-program__meta {
  font-family: var(--font-meta);
  font-size: var(--meta-sm);
  line-height: 1.3;
  color: var(--text-meta);
  margin-bottom: 18px;
}

.pi-program__link { margin-top: auto; }

/* En tablette, les colonnes deviennent des cartes blanches à filet. */
@media (max-width: 1279.98px) {
  .pi-program {
    background: var(--surface-card);
    border: var(--stroke-hairline) solid var(--border-hairline);
    padding: 24px;
  }

  .pi-program--first { padding-left: 24px; }

  .pi-program--pending {
    background: var(--lilas-50);
    border: var(--stroke-hairline) dashed var(--border-dashed);
  }

  .pi-program--pending .pi-program__title { color: var(--lilas-400); }
}

/* En mobile, un bloc nu à filet rouge de 3 px en tête. */
@media (max-width: 767.98px) {
  .pi-program {
    background: none;
    border: none;
    border-top: var(--stroke-accent) solid var(--accent-rule);
    padding: 16px 0 0;
  }

  .pi-program--first { padding-left: 0; }

  .pi-program--pending {
    background: none;
    border: none;
    border-top: var(--stroke-hairline) dashed var(--border-dashed);
  }

  .pi-program--pending .pi-program__title { color: var(--text-title); }

  .pi-program__badges { margin-bottom: 12px; }
  .pi-program__summary { margin: 8px 0 0; }
  .pi-program__meta,
  .pi-program__link { display: none; }
}

/* --- Bloc de semestre ----------------------------------------------------- */

.pi-semester {
  background: var(--surface-card);
  border: var(--stroke-hairline) solid var(--border-hairline);
}

.pi-semester__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--surface-accent);
  padding: 14px 20px;
}

.pi-semester__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--title-5);
  line-height: 1.3;
  color: var(--text-title);
  margin: 0;
}

.pi-semester__meta {
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--meta-sm);
  line-height: 1.3;
  color: var(--text-title);
}

.pi-semester--empty {
  background: var(--surface-card);
  border: var(--stroke-hairline) dashed var(--border-dashed);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}

/* --- Chiffre-clé ---------------------------------------------------------- */

.pi-stat {
  border-left: var(--stroke-accent) solid var(--accent-rule);
  padding: 0 26px;
}

.pi-stat__value {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--stat);
  line-height: var(--stat-lh);
  letter-spacing: var(--stat-ls);
  color: var(--text-on-inverse);
}

.pi-stat__label {
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--ui-2xs);
  line-height: 1.4;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--creme-200);
  margin-top: 12px;
}

.pi-stat--light .pi-stat__value { color: var(--text-title); }
.pi-stat--light .pi-stat__label { color: var(--text-meta); }

@media (max-width: 1279.98px) {
  .pi-stat { padding: 0 0 0 16px; }
  .pi-stat__label { font-size: var(--meta-xs); margin-top: 8px; }
}

@media (max-width: 767.98px) {
  .pi-stat { padding: 0 0 0 14px; }
}

/* --- Témoignage ---------------------------------------------------------- */

.pi-testimonial__quote {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--quote);
  line-height: var(--quote-lh);
  color: var(--text-title);
  margin: 0;
}

.pi-testimonial--inverse .pi-testimonial__quote { color: var(--text-on-inverse); }

.pi-testimonial__person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.pi-testimonial__portrait {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-round);
  object-fit: cover;
  flex: none;
}

.pi-testimonial__portrait--empty {
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--creme-400) 0 6px, var(--creme-300) 6px 12px);
}

.pi-testimonial__name {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--body-sm);
  line-height: 1.3;
  color: var(--text-title);
}

.pi-testimonial--inverse .pi-testimonial__name { color: var(--blanc); }

.pi-testimonial__role {
  font-family: var(--font-meta);
  font-size: var(--meta-md);
  line-height: 1.4;
  color: var(--text-meta);
}

.pi-testimonial--inverse .pi-testimonial__role { color: var(--creme-200); }

.pi-testimonial__promo {
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--meta-xs);
  line-height: 1.4;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-top: 4px;
}

/* --- Panneau récapitulatif ----------------------------------------------- */

.pi-infopanel {
  background: var(--surface-inverse);
  padding: 26px;
}

.pi-infopanel--accent { background: var(--surface-accent); }

.pi-infopanel__rows {
  display: flex;
  flex-direction: column;
  margin-top: 18px;
}

.pi-infopanel__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
}

.pi-infopanel__row:not(:last-child) {
  border-bottom: var(--stroke-hairline) solid var(--border-on-inverse);
}

.pi-infopanel--accent .pi-infopanel__row:not(:last-child) {
  border-bottom-color: var(--violet-a20);
}

.pi-infopanel__label {
  font-family: var(--font-body);
  font-size: var(--ui-xs);
  line-height: 1.4;
  color: var(--creme-200);
}

.pi-infopanel--accent .pi-infopanel__label { color: var(--text-muted); }

.pi-infopanel__value {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--ui-xs);
  line-height: 1.4;
  color: var(--blanc);
  text-align: right;
}

.pi-infopanel--accent .pi-infopanel__value { color: var(--text-title); }

.pi-infopanel__footer { margin-top: 20px; }

/* ============================================================================
   FORMULAIRES
   ========================================================================== */

.pi-label {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--ui-2xs);
  line-height: 1.3;
  color: var(--text-title);
  margin-bottom: 7px;
}

.pi-label__required { color: var(--rouge-600); }

.pi-label__optional {
  font-family: var(--font-meta);
  font-weight: var(--weight-regular);
  font-size: var(--meta-sm);
  color: var(--text-meta);
}

.pi-control {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--body-sm);
  line-height: 1.4;
  color: var(--text-title);
  background: var(--surface-field);
  border: var(--stroke-hairline) solid var(--border-field);
  border-radius: var(--radius-action);
  padding: 11px 12px;
}

.pi-control[type="date"] { padding: 10px 12px; }

textarea.pi-control {
  resize: vertical;
  line-height: 1.6;
}

.pi-control:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-color: var(--border-field);
}

.pi-hint {
  font-family: var(--font-meta);
  font-size: var(--meta-sm);
  line-height: 1.5;
  color: var(--text-meta);
  margin: 10px 0 0;
}

/* Aperçu hachuré d'un téléversement. */
.pi-filepreview {
  background: var(--surface-dropzone);
  border: var(--stroke-hairline) dashed var(--border-dashed);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-meta);
  font-size: var(--meta-md);
  line-height: 1.5;
  color: var(--text-meta);
  text-align: center;
  padding: 0 14px;
  margin-bottom: 18px;
  overflow: hidden;
}

.pi-filepreview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.pi-filefield input[type="file"] {
  font-family: var(--font-body);
  font-size: var(--meta-md);
  line-height: 1.4;
  color: var(--text-body);
  width: 100%;
}

/* --- Progression du tunnel ---------------------------------------------- */

.pi-stepper {
  background: var(--surface-inverse);
  padding: 20px var(--gutter-desktop) 22px;
}

.pi-stepper__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 16px;
}

.pi-stepper__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--title-2);
  line-height: 1.15;
  color: var(--blanc);
  margin: 0;
}

.pi-stepper__count {
  font-family: var(--font-meta);
  font-size: var(--meta-md);
  line-height: 1.3;
  color: var(--creme-200);
  flex: none;
}

.pi-stepper__steps {
  display: grid;
  gap: 14px;
}

.pi-stepper__step {
  border-top: var(--stroke-accent) solid rgba(246, 233, 189, .45);
  padding-top: 10px;
}

.pi-stepper__step.is-done,
.pi-stepper__step.is-current {
  border-top-color: var(--creme-200);
}

.pi-stepper__num {
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--meta-xs);
  line-height: 1.3;
  color: rgba(246, 233, 189, .75);
}

.pi-stepper__step.is-current .pi-stepper__num { color: var(--creme-200); }

.pi-stepper__label {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--body-2xs);
  line-height: 1.3;
  color: rgba(255, 255, 255, .75);
  margin-top: 5px;
}

.pi-stepper__step.is-current .pi-stepper__label {
  font-weight: var(--weight-medium);
  color: var(--blanc);
}

@media (max-width: 767.98px) {
  .pi-stepper { padding: 16px var(--gutter-desktop) 18px; }
  .pi-stepper__head { margin-bottom: 12px; }
  .pi-stepper__steps { gap: 6px; }
  .pi-stepper__step { padding-top: 8px; }
  /* Seule l'étape courante est nommée. */
  .pi-stepper__step:not(.is-current) .pi-stepper__num,
  .pi-stepper__step:not(.is-current) .pi-stepper__label { display: none; }
}

/* ============================================================================
   STRUCTURE
   ========================================================================== */

/* --- Fil d'Ariane ------------------------------------------------------- */

.pi-breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-meta);
  font-size: var(--meta-md);
  line-height: 1.3;
  color: var(--creme-200);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pi-breadcrumb a { color: var(--creme-200); text-decoration: none; }
.pi-breadcrumb a:hover { color: var(--blanc); }
.pi-breadcrumb__current { color: var(--blanc); }

/* --- Titre de section -------------------------------------------------- */

.pi-heading__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-title);
  font-size: var(--display-4);
  line-height: var(--display-4-lh);
  letter-spacing: var(--display-4-ls);
  margin: 0;
}

.pi-eyebrow + .pi-heading__title { margin-top: 16px; }

.pi-heading--xl .pi-heading__title {
  font-size: var(--display-3);
  line-height: var(--display-3-lh);
  letter-spacing: var(--display-3-ls);
}

.pi-heading--md .pi-heading__title {
  font-size: var(--display-5);
  line-height: var(--display-5-lh);
  letter-spacing: var(--display-5-ls);
}

.pi-heading--sm .pi-heading__title {
  font-size: var(--display-6);
  line-height: var(--display-6-lh);
  letter-spacing: 0;
}

.pi-heading--inverse .pi-heading__title { color: var(--text-on-inverse); }

/* Variante « rule » : un filet horizontal au lieu d'un gros titre. */
.pi-heading__ruled {
  border-top: var(--stroke-hairline) solid var(--border-rule);
  margin-top: 14px;
  padding-top: 20px;
}

/* --- Héros -------------------------------------------------------------- */

.pi-hero {
  position: relative;
  overflow: hidden;
  background: var(--surface-inverse);
  padding: 26px var(--gutter-desktop) 54px;
}

.pi-hero--lg { padding: 72px var(--gutter-desktop) 64px; }

/* Photographie de bannière, téléversée depuis les réglages du site.

   Le voile violet n'est pas un effet : c'est lui qui rend le contraste indépendant de
   l'image choisie. Il est dégradé — dense sous la colonne de texte, puis s'ouvre vers
   la droite pour laisser voir la photographie.

   Les paliers du dégradé sont calés sur la colonne de texte, qui s'arrête à la moitié
   de la largeur du héros (--measure-hero dans une grille bornée à --content-max). Dans
   le pire cas — une photo entièrement blanche — le voile laisse 11,4:1 au titre blanc
   et 9,4:1 au chapeau crème à cette limite, soit largement AAA. Déplacer les paliers
   vers la gauche rapprocherait le texte de la zone claire : refaire le calcul avant. */
.pi-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pi-hero__veil {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(
    90deg,
    rgba(47, 15, 85, .94) 0%,
    rgba(47, 15, 85, .88) 50%,
    rgba(47, 15, 85, .66) 74%,
    rgba(47, 15, 85, .50) 100%
  );
}

/* Sous 1280 px, la colonne de texte occupe toute la largeur : le dégradé horizontal
   laisserait la fin des lignes sur la zone claire. Le voile redevient uniforme. */
@media (max-width: 1279.98px) {
  .pi-hero__veil {
    background: rgba(47, 15, 85, .86);
  }
}

/* Le motif reste posé par-dessus, mais s'efface pour ne pas encombrer la photo. */
.pi-hero--photo .pi-hero__motif {
  opacity: .5;
}

.pi-hero__motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Le motif s'efface sous la colonne de texte. */
  mask-image: linear-gradient(90deg, transparent 0 58%, rgba(0, 0, 0, .5) 69%, #000 80%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 58%, rgba(0, 0, 0, .5) 69%, #000 80%);
  pointer-events: none;
}

.pi-hero__inner {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
}

.pi-hero__breadcrumb { margin-bottom: 34px; }

.pi-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--col-gap);
  align-items: end;
}

.pi-hero--has-aside .pi-hero__grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

.pi-hero__main { max-width: var(--measure-hero); }

.pi-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-on-inverse);
  font-size: var(--display-2);
  line-height: var(--display-2-lh);
  letter-spacing: var(--display-1-ls);
  margin: 0;
}

.pi-hero--lg .pi-hero__title {
  font-size: var(--display-1);
  line-height: var(--display-1-lh);
}

.pi-eyebrow + .pi-hero__title { margin-top: 20px; }

.pi-hero__lead {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  color: var(--text-on-inverse-soft);
  margin: 0;
}

.pi-hero__actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* Slider : une diapositive à la fois, sous une barre de puces et de flèches.
   Sert au panneau « À la une » du héros (--hero) et à la bande des témoignages
   (--quote) ; seul l'habillage change d'un cas à l'autre. */
.pi-slider__slide { display: block; }

/* Panneau blanc du héros : le visuel déborde jusqu'aux bords, le texte garde
   la gouttière. */
.pi-slider--hero {
  background: var(--surface-card);
  border-radius: var(--radius-action);
}

/* Le fondu accompagne le changement, il ne le porte pas : la diapositive sortante
   est retirée du flux par [hidden], seule l'entrante s'anime. */
.pi-slider__slide.is-active { animation: pi-slider-in var(--duration-reveal) var(--ease-standard) both; }

@keyframes pi-slider-in {
  from { opacity: 0; transform: translateY(var(--reveal-offset)); }
  to { opacity: 1; transform: none; }
}

.pi-slider__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.pi-slider--hero .pi-slider__body { padding: 26px; }

.pi-slider__title {
  font: var(--weight-semibold) var(--title-3) / var(--title-3-lh) var(--font-display);
  color: var(--text-title);
  margin: 14px 0 12px;
}

/* Barre de contrôle : puces à gauche, compteur et flèches à droite. */
.pi-slider__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* Dans le panneau du héros, la barre est dedans : elle reprend la gouttière de la
   carte plutôt que de s'en détacher. */
.pi-slider--hero .pi-slider__controls {
  margin-top: 0;
  padding: 0 26px 22px;
}

/* Bande des témoignages : pas de carte, la citation pose directement sur l'aplat
   crème. Le plancher de hauteur évite que la barre de contrôle ne saute d'une
   citation courte à une citation longue. */
.pi-slider--quote .pi-slider__viewport { min-height: 210px; }

.pi-slider--quote .pi-slider__controls {
  border-top: var(--stroke-hairline) solid var(--violet-a20);
  padding-top: 18px;
}

.pi-slider__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* La puce visible est un filet de 6px ; c'est le bouton qui l'entoure qui porte la
   zone de frappe, et qui s'étire au doigt sous la règle de cible tactile. */
.pi-slider__dot {
  display: inline-flex;
  align-items: center;
  width: 22px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.pi-slider__dot::before {
  content: "";
  display: block;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-action);
  background: var(--violet-a20);
  transition: background var(--duration-hover) var(--ease-standard);
}

.pi-slider__dot:hover::before { background: var(--violet-a40); }

.pi-slider__dot.is-current::before { background: var(--rouge-600); }

.pi-slider__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pi-slider__counter {
  font-family: var(--font-meta);
  font-size: var(--meta-sm);
  line-height: 1.3;
  letter-spacing: var(--track-caps);
  color: var(--text-meta);
  margin: 0 4px 0 0;
}

.pi-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: var(--ui-sm);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-action);
  background: transparent;
  color: var(--text-title);
  border: var(--stroke-hairline) solid var(--violet-a30);
  transition: color var(--duration-hover) var(--ease-standard),
              border-color var(--duration-hover) var(--ease-standard);
}

.pi-slider__arrow:hover {
  color: var(--rouge-600);
  border-color: var(--rouge-600);
}

@media (max-width: 1279.98px) {
  .pi-hero { padding: 22px var(--gutter-desktop) 38px; }
  .pi-hero--lg { padding: 46px var(--gutter-desktop) 42px; }
  .pi-hero__breadcrumb { margin-bottom: 26px; }

  .pi-hero--has-aside .pi-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    align-items: stretch;
  }

  .pi-hero__main { max-width: 600px; }

  /* La colonne latérale empilée : le motif se replie sur le bord. */
  .pi-hero__motif {
    mask-image: linear-gradient(90deg, transparent 0 70%, rgba(0, 0, 0, .5) 82%, #000 92%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0 70%, rgba(0, 0, 0, .5) 82%, #000 92%);
  }

  /* Le panneau prend toute la largeur : à 16/10 le visuel chasserait le texte
     sous la ligne de flottaison, on lui impose donc une hauteur fixe. */
  .pi-slider__media {
    aspect-ratio: auto;
    height: 260px;
  }
}

@media (max-width: 767.98px) {
  .pi-hero { padding: 20px var(--gutter-desktop) 30px; }
  .pi-hero--lg { padding: 36px var(--gutter-desktop) 34px; }
  .pi-hero__breadcrumb { margin-bottom: 20px; }
  .pi-hero__main { max-width: 100%; }
  .pi-eyebrow + .pi-hero__title { margin-top: 14px; }

  /* Au doigt, les deux appels à l'action se rangent l'un sous l'autre, de même
     largeur et sur toute la largeur : deux cibles franches plutôt que deux
     boutons de longueurs inégales dictées par leur libellé. */
  .pi-hero__actions {
    margin-top: 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .pi-slider__media { height: 200px; }
  .pi-slider--hero .pi-slider__body { padding: 20px; }
  .pi-slider--hero .pi-slider__controls { padding: 0 20px 18px; }
}

/* --- Barre utilitaire -------------------------------------------------- */

.pi-topbar {
  background: var(--surface-inverse-deep);
  color: var(--blanc);
  min-height: 38px;
  padding: 0 var(--gutter-desktop);
}

.pi-topbar__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pi-topbar__institution {
  font-family: var(--font-meta);
  font-size: var(--meta-md);
  line-height: 1.3;
  color: var(--creme-200);
}

.pi-topbar__links {
  display: flex;
  gap: 22px;
  align-items: center;
  font-family: var(--font-meta);
  font-size: var(--meta-md);
  line-height: 1.3;
}

.pi-topbar__links a { color: var(--blanc); text-decoration: none; }
.pi-topbar__links a:hover { color: var(--creme-200); }

.pi-topbar__short { display: none; }

/* Recherche : un filet crème translucide, jamais un aplat clair. */
.pi-topbar__search {
  display: flex;
  align-items: center;
  border: var(--stroke-hairline) solid var(--creme-a25);
  border-radius: var(--radius-action);
}

.pi-topbar__search input {
  background: transparent;
  border: none;
  color: var(--blanc);
  font-family: var(--font-meta);
  font-size: var(--meta-md);
  line-height: 1.3;
  padding: 6px 8px;
  width: 132px;
  min-width: 0;
}

.pi-topbar__search input::placeholder { color: var(--creme-a55); }

.pi-topbar__search input:focus {
  outline: none;
}

.pi-topbar__search:focus-within {
  border-color: var(--creme-200);
}

.pi-topbar__search button {
  background: transparent;
  border: none;
  color: var(--creme-200);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 6px 8px 6px 0;
}

.pi-topbar__search button:hover { color: var(--blanc); }

@media (max-width: 1279.98px) {
  .pi-topbar { padding: 9px var(--gutter-desktop); min-height: 0; }
  .pi-topbar__inner { min-height: 0; }
  .pi-topbar__links { gap: 16px; }
}

@media (max-width: 767.98px) {
  .pi-topbar { padding: 10px var(--gutter-desktop); }
  .pi-topbar__full { display: none; }
  .pi-topbar__short { display: inline; }

  /* La recherche reste en place jusqu'au plus petit écran : c'est la seule entrée
     de recherche du site, et la masquer la rendait introuvable en tablette et au
     téléphone. C'est le rattachement qui cède, en s'élidant. */
  .pi-topbar__links {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
    gap: 12px;
  }

  .pi-topbar__institution {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pi-topbar__search {
    flex: 1 1 auto;
    max-width: 240px;
    min-height: 36px;
  }

  .pi-topbar__search input { width: 100%; }
}

/* --- En-tête ----------------------------------------------------------- */

/* L'en-tête sert de référence au tiroir, qu'il porte en surimpression : il faut
   donc qu'il passe au-dessus de la page, héros compris. Le palier 1020 est celui
   des barres fixes de Bootstrap, sous les fenêtres modales et le lien d'évitement. */
.pi-header {
  position: relative;
  z-index: 1020;
  background: var(--surface-card);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
}

.pi-header__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
}

.pi-header,
.pi-header__drawer { padding-inline: var(--gutter-desktop); }

.pi-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
}

.pi-header__logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
  flex: none;
}

.pi-header__marks {
  border-left: var(--stroke-hairline) solid var(--violet-a20);
  padding-left: 14px;
  min-width: 0;
}

.pi-header__name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--title-5);
  line-height: var(--title-5-lh);
  color: var(--text-title);
  letter-spacing: -.01em;
  white-space: nowrap;
}

.pi-header__sub {
  display: block;
  font-family: var(--font-meta);
  font-size: var(--meta-xs);
  line-height: 1.3;
  color: var(--text-meta);
  letter-spacing: var(--track-brand);
  text-transform: uppercase;
  margin-top: 3px;
}

.pi-header__end {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: none;
}

/* Le <nav> n'est qu'un repère de région : il ne doit rien changer à la mise en page. */
.pi-header__nav-wrap {
  display: contents;
}

.pi-header__nav {
  display: flex;
  gap: 22px;
  align-items: center;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--ui-sm);
  line-height: 1.3;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pi-header__nav-link {
  color: var(--text-title);
  text-decoration: none;
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: var(--stroke-rule) solid transparent;
}

.pi-header__nav-link:hover { color: var(--rouge-600); }

.pi-header__nav-link.is-active {
  border-bottom-color: var(--rouge-600);
}

.pi-header__action { min-height: var(--tap-min); }

/* Bouton de tiroir, masqué en desktop. */
.pi-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  background: transparent;
  border: var(--stroke-hairline) solid var(--violet-a20);
  border-radius: var(--radius-action);
  cursor: pointer;
  padding: 0;
  flex: none;
}

.pi-header__burger-bars,
.pi-header__burger-bars::before,
.pi-header__burger-bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--violet-800);
  content: '';
}

.pi-header__burger-bars { position: relative; }
.pi-header__burger-bars::before { position: absolute; top: -6px; }
.pi-header__burger-bars::after { position: absolute; top: 6px; }

/* Tiroir de navigation : déployé, il descend par-dessus le début de la page au
   lieu de la pousser vers le bas. Sur un écran court, il défile en lui-même
   plutôt que de sortir de la fenêtre. */
.pi-header__drawer {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  max-height: 80vh;
  max-height: 80dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-card);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
  box-shadow: var(--shadow-card);
  padding-top: 6px;
  padding-bottom: 14px;
}

.pi-header__drawer-inner {
  max-width: var(--content-max);
  margin-inline: auto;
}

.pi-header__drawer-link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--ui-xs);
  color: var(--text-title);
  text-decoration: none;
}

.pi-header__drawer-link.is-active { color: var(--rouge-600); }

.pi-header__drawer .pi-btn { margin-top: 14px; min-height: var(--tap-min); }

@media (max-width: 1279.98px) {
  .pi-header__inner { padding: 14px 0; gap: 20px; }
  .pi-header__logo { width: 40px; height: 40px; }
  .pi-header__marks { border-left: none; padding-left: 0; }
  /* Sous 1280 px la navigation serre l'en-tête : le rattachement, déjà porté par la
     barre utilitaire juste au-dessus, passerait sur deux lignes et buterait contre elle. */
  .pi-header__sub { display: none; }
  .pi-header__end { gap: 16px; }
  .pi-header__nav { gap: 16px; }
  .pi-header__burger { display: inline-flex; }
  /* En tablette, la navigation se réduit à quatre entrées. */
  .pi-header__nav > li:nth-child(n + 5) { display: none; }
}

/* Sous 1024 px, même quatre entrées ne tiennent plus à côté de la marque et de
   l'action : la navigation passe entièrement dans le tiroir. Le seuil vient de la
   place réellement occupée à la taille de texte retenue, pas d'un palier du kit. */
@media (max-width: 1023.98px) {
  .pi-header__nav { display: none; }
}

@media (max-width: 767.98px) {
  .pi-header__inner { gap: 12px; }
  .pi-header__brand { gap: 10px; }
  .pi-header__logo { width: 34px; height: 34px; }
  .pi-header__nav { display: none; }
  .pi-header__action { display: none; }
}

/* --- Onglets de sections internes ------------------------------------- */

.pi-tabs {
  background: var(--surface-card);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
  padding: 0 var(--gutter-desktop);
}

.pi-tabs__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  gap: 30px;
  list-style: none;
  margin-block: 0;
  padding: 0;
}

.pi-tabs__tab {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--ui-xs);
  line-height: 1.3;
  color: var(--text-muted);
  padding: 18px 0;
  white-space: nowrap;
  flex: none;
  text-decoration: none;
  display: inline-block;
  border-bottom: var(--stroke-rule) solid transparent;
  background: none;
  border-top: none;
  border-inline: none;
  cursor: pointer;
}

.pi-tabs__tab:hover { color: var(--text-title); }

.pi-tabs__tab.is-active,
.pi-tabs__tab[aria-selected="true"] {
  color: var(--text-title);
  border-bottom-color: var(--rouge-600);
}

@media (max-width: 1279.98px) {
  .pi-tabs__inner {
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pi-tabs__inner::-webkit-scrollbar { display: none; }
  .pi-tabs__tab { padding: 15px 0; }
}

/* --- Bande de raccourcis ---------------------------------------------- */

.pi-actionbar {
  background: var(--surface-accent);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
  padding: 0 var(--gutter-desktop);
}

.pi-actionbar__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pi-actionbar__item {
  display: block;
  padding: 24px 26px;
  color: var(--text-title);
  text-decoration: none;
  border-right: var(--stroke-hairline) solid var(--border-rule);
}

.pi-actionbar__item:first-child { padding-left: 0; }
.pi-actionbar__item:last-child { border-right: none; padding-right: 0; }
.pi-actionbar__item:hover { color: var(--rouge-600); }

.pi-actionbar__num {
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--meta-xs);
  line-height: 1.3;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: .75;
}

.pi-actionbar__label {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--title-6);
  line-height: 1.2;
  margin-top: 10px;
}

.pi-actionbar__short { display: none; }

@media (max-width: 1279.98px) {
  .pi-actionbar { padding: 0; }

  .pi-actionbar__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pi-actionbar__item {
    padding: 20px var(--gutter-desktop);
    min-height: var(--tap-min);
    border-right: var(--stroke-hairline) solid var(--border-rule);
  }

  .pi-actionbar__item:first-child,
  .pi-actionbar__item:last-child {
    padding-inline: var(--gutter-desktop);
  }

  .pi-actionbar__item:nth-child(2n) { border-right: none; }

  .pi-actionbar__item:nth-last-child(n + 3) {
    border-bottom: var(--stroke-hairline) solid var(--border-rule);
  }

  .pi-actionbar__num { display: none; }
  .pi-actionbar__label { font-size: var(--title-7); margin-top: 0; }
  .pi-actionbar__full { display: none; }
  .pi-actionbar__short { display: inline; }
}

@media (max-width: 767.98px) {
  .pi-actionbar__item,
  .pi-actionbar__item:first-child,
  .pi-actionbar__item:last-child { padding: 18px; }

  .pi-actionbar__label { font-size: var(--body-md); }
}

/* --- Pied de page ----------------------------------------------------- */

.pi-footer {
  background: var(--surface-inverse-deep);
  padding: var(--band-y) var(--gutter-desktop) 0;
}

.pi-footer__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}

.pi-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.3fr);
  gap: 44px;
}

.pi-footer__marks {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.pi-footer__marks img {
  height: 56px;
  width: auto;
  display: block;
}

.pi-footer__brand {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--title-7);
  line-height: var(--title-7-lh);
  color: var(--blanc);
}

.pi-footer__brand-sub {
  font-family: var(--font-meta);
  font-size: var(--meta-md);
  line-height: 1.6;
  color: var(--creme-200);
  margin-top: 6px;
}

.pi-footer__col-title {
  font-family: var(--font-meta);
  font-weight: var(--weight-medium);
  font-size: var(--meta-xs);
  line-height: 1.3;
  letter-spacing: var(--track-label);
  color: var(--creme-200);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.pi-footer__list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-family: var(--font-body);
  font-size: var(--body-xs);
  line-height: 1.3;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pi-footer__list--addresses { line-height: 1.5; }

.pi-footer__list a,
.pi-footer__list li {
  color: var(--blanc);
  text-decoration: none;
}

.pi-footer__list a:hover { color: var(--creme-200); }

.pi-footer__newsletter-text {
  font-family: var(--font-body);
  font-size: var(--body-2xs);
  line-height: var(--body-2xs-lh);
  color: var(--blanc);
  margin: 0 0 16px;
}

.pi-footer__newsletter-form {
  display: flex;
  gap: 8px;
}

.pi-footer__newsletter-form input {
  flex: 1;
  min-width: 0;
  background: var(--blanc);
  border: none;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: var(--body-2xs);
  line-height: 1.3;
  color: var(--text-body);
}

.pi-footer__newsletter-form button {
  background: var(--action-primary-bg);
  color: var(--blanc);
  border: none;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--ui-sm);
  line-height: 1.3;
  padding: 13px 18px;
  cursor: pointer;
  min-height: var(--tap-min);
}

.pi-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 52px;
  padding: 20px 0;
  border-top: var(--stroke-hairline) solid var(--creme-a22);
  font-family: var(--font-meta);
  font-size: var(--meta-md);
  line-height: 1.3;
  color: var(--creme-200);
}

.pi-footer__socials {
  display: flex;
  gap: 16px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--body-xs);
}

.pi-footer__socials a { color: var(--creme-200); text-decoration: none; }
.pi-footer__socials a:hover { color: var(--blanc); }

.pi-footer__legal {
  display: flex;
  gap: 18px;
}

.pi-footer__legal a { color: var(--creme-200); text-decoration: none; }
.pi-footer__legal a:hover { color: var(--blanc); }

/* Liens de service repliés en mobile. */
.pi-footer__drawer { display: none; }

@media (max-width: 1279.98px) {
  .pi-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .pi-footer__bottom { margin-top: 36px; }
}

@media (max-width: 767.98px) {
  .pi-footer { padding: var(--band-y) var(--gutter-desktop); }

  /* La source réduit le pied aux deux marques et à un bloc de coordonnées. */
  .pi-footer__grid { display: block; }
  .pi-footer__marks img { height: 44px; }
  .pi-footer__marks { gap: 12px; margin-bottom: 16px; }
  .pi-footer__brand,
  .pi-footer__brand-sub,
  .pi-footer__col--links,
  .pi-footer__col--newsletter,
  .pi-footer__bottom { display: none; }

  .pi-footer__col--addresses .pi-footer__col-title { display: none; }

  .pi-footer__list--addresses {
    font-family: var(--font-meta);
    font-size: var(--meta-sm);
    line-height: 1.7;
    gap: 0;
    color: var(--creme-200);
  }

  .pi-footer__list--addresses a,
  .pi-footer__list--addresses li { color: var(--creme-200); }

  .pi-footer__copyright-mobile {
    font-family: var(--font-meta);
    font-size: var(--meta-sm);
    line-height: 1.7;
    color: var(--creme-200);
    margin-top: 10px;
  }

  .pi-footer__drawer {
    display: block;
    margin-top: 20px;
    border-top: var(--stroke-hairline) solid var(--creme-a22);
  }

  .pi-footer__drawer a {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    border-bottom: var(--stroke-hairline) solid var(--creme-a22);
    font-family: var(--font-body);
    font-size: var(--ui-sm);
    color: var(--blanc);
    text-decoration: none;
  }
}

/* Le bloc de copyright mobile n'apparaît qu'en mobile. */
@media (min-width: 768px) {
  .pi-footer__copyright-mobile { display: none; }
}