/*
 * L'écran de maintenance, repris de platform3 (maquette « Écran de
 * maintenance platform3 », 10/11/2026) aux couleurs de la charte que
 * patrimoine partage : vert forêt #3A4642, jaune #FFFF69. Coins carrés,
 * comme platform3.
 *
 * En CSS plutôt qu'en classes Twind : le cadre « Focus » (huit dégradés) et
 * les animations n'ont pas d'équivalent utilitaire lisible.
 */

.maintenance-page {
  --maintenance-forest: #3a4642;
  --maintenance-yellow: #ffff69;
  --maintenance-grey-200: #e8e8e1;
  --maintenance-grey-500: #7a7a7a;
  --maintenance-grey-600: #575757;

  /* Par-dessus la page : les îlots le rendent au milieu de l'en-tête et du
     pied de page du parcours, qu'il doit couvrir. */
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: #fff;
  color: var(--maintenance-forest);
  font-family: "Outfit Regular", system-ui, Arial, sans-serif;
}

.maintenance-page h1 {
  margin: 0;
  font-family: "Outfit Bold", system-ui, Arial, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}

/* Le surlignage jaune de la charte : quelques mots, sur fond clair. */
.maintenance-page mark {
  padding: 0 .15em;
  background-color: var(--maintenance-yellow);
  color: var(--maintenance-forest);
}

.maintenance-header {
  display: flex;
  align-items: center;
  padding: 24px clamp(24px, 6vw, 80px);
  border-bottom: 1px solid var(--maintenance-grey-200);
}

.maintenance-body {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 40px clamp(24px, 6vw, 80px);
}

.maintenance-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 40rem;
}

/* Sur grand écran, l'heure de retour occupe la colonne de droite, à hauteur
   des éléments de gauche ; en dessous de 900 px, elle reste dans le flux,
   juste sous le message. */
@media (min-width: 901px) {
  .maintenance-content.has-expected-end {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 6vw, 80px);
    row-gap: 24px;
    align-content: center;
    max-width: 80rem;
  }

  .maintenance-content.has-expected-end > * {
    grid-column: 1;
  }

  .maintenance-content.has-expected-end > .maintenance-expected-end {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: center;
  }
}

.maintenance-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--maintenance-forest);
  font-family: "Outfit Medium", system-ui, Arial, sans-serif;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Le point qui bat : la maintenance est en cours, l'écran veille. */
.maintenance-pulse {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border: 1px solid var(--maintenance-forest);
  background-color: var(--maintenance-yellow);
  animation: maintenance-pulse 2s ease-out infinite;
}

@keyframes maintenance-pulse {
  0% { box-shadow: 0 0 0 0 rgb(255 255 105 / 70%); }
  70% { box-shadow: 0 0 0 10px rgb(255 255 105 / 0%); }
  100% { box-shadow: 0 0 0 0 rgb(255 255 105 / 0%); }
}

.maintenance-lead {
  max-width: 32rem;
  margin: 0;
  color: var(--maintenance-grey-600);
  font-family: "Outfit Light", system-ui, Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.65;
}

.maintenance-reassurances {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.maintenance-reassurances li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.4;
}

.maintenance-reassurances svg {
  flex-shrink: 0;
  stroke-width: 1.8;
  margin-top: 1px;
  stroke: var(--maintenance-forest);
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.maintenance-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding-top: 4px;
}

@media (max-width: 600px) {
  .maintenance-actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* Le bouton plein forêt de la charte (le `btn forest` de platform3). */
.maintenance-button {
  padding: 14px 28px;
  border: 0;
  background-color: var(--maintenance-forest);
  color: #fff;
  font-family: "Outfit Medium", system-ui, Arial, sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .2s ease-in-out;
}

.maintenance-button:hover,
.maintenance-button:focus-visible {
  background-color: #313a37;
}

.maintenance-button:disabled {
  opacity: .6;
  cursor: progress;
}

.maintenance-link {
  padding: 10px 0;
  color: var(--maintenance-forest);
  font-family: "Outfit Medium", system-ui, Arial, sans-serif;
  text-decoration: none;
}

.maintenance-link:hover,
.maintenance-link:focus-visible {
  text-decoration: underline;
}

.maintenance-caption {
  margin: 0;
  color: var(--maintenance-grey-500);
  font-size: .875rem;
}

/* Le cadre « Focus » de la charte : quatre coins jaunes, dessinés en fond. */
.maintenance-focus-frame {
  --frame-color: var(--maintenance-yellow);
  --frame-inset: 28px;
  --frame-size: 40px;
  --frame-width: 3px;

  background:
    linear-gradient(var(--frame-color), var(--frame-color)) left var(--frame-inset) top var(--frame-inset) / var(--frame-size) var(--frame-width) no-repeat,
    linear-gradient(var(--frame-color), var(--frame-color)) left var(--frame-inset) top var(--frame-inset) / var(--frame-width) var(--frame-size) no-repeat,
    linear-gradient(var(--frame-color), var(--frame-color)) right var(--frame-inset) top var(--frame-inset) / var(--frame-size) var(--frame-width) no-repeat,
    linear-gradient(var(--frame-color), var(--frame-color)) right var(--frame-inset) top var(--frame-inset) / var(--frame-width) var(--frame-size) no-repeat,
    linear-gradient(var(--frame-color), var(--frame-color)) left var(--frame-inset) bottom var(--frame-inset) / var(--frame-size) var(--frame-width) no-repeat,
    linear-gradient(var(--frame-color), var(--frame-color)) left var(--frame-inset) bottom var(--frame-inset) / var(--frame-width) var(--frame-size) no-repeat,
    linear-gradient(var(--frame-color), var(--frame-color)) right var(--frame-inset) bottom var(--frame-inset) / var(--frame-size) var(--frame-width) no-repeat,
    linear-gradient(var(--frame-color), var(--frame-color)) right var(--frame-inset) bottom var(--frame-inset) / var(--frame-width) var(--frame-size) no-repeat;
}

.maintenance-expected-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 320px;
  padding: 56px;
  background-color: var(--maintenance-forest);
  text-align: center;
}

.maintenance-expected-end .maintenance-eyebrow {
  color: var(--maintenance-yellow);
}

.maintenance-expected-end p {
  margin: 0;
}

@media (max-width: 900px) {
  .maintenance-expected-end {
    --frame-inset: 14px;
    --frame-size: 22px;
    --frame-width: 2px;

    min-height: 0;
    padding: 32px 24px;
  }
}

.maintenance-expected-time {
  color: #fff;
  font-family: "Outfit Bold", system-ui, Arial, sans-serif;
  font-size: clamp(3.25rem, 7vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}

.maintenance-expected-day {
  color: #fff;
  font-family: "Outfit Light", system-ui, Arial, sans-serif;
  font-size: clamp(1rem, 2vw, 1.375rem);
}

.maintenance-expected-end .maintenance-expected-note {
  max-width: 22rem;
  margin-top: 12px;
  color: rgb(255 255 255 / 80%);
  font-size: .875rem;
}

/* « C'est prêt » : la maintenance levée, l'écran repart vers la page quittée. */
.maintenance-reopened {
  background-color: var(--maintenance-forest);
  color: #fff;
}

.maintenance-reopened .maintenance-header {
  border-bottom-color: rgb(255 255 255 / 12%);
}

/* Le logo suit la couleur de remplissage posée par Twind ; sur le forêt, il
   passe en blanc. */
.maintenance-reopened .maintenance-header svg.maintenance-logo,
.maintenance-reopened .maintenance-header svg.maintenance-logo path {
  fill: #fff;
}

.maintenance-reopened h1 {
  color: #fff;
}

.maintenance-reopened .maintenance-eyebrow {
  justify-content: center;
  color: var(--maintenance-yellow);
}

.maintenance-reopened .maintenance-lead {
  color: rgb(255 255 255 / 80%);
}

.maintenance-reopened .maintenance-link {
  color: var(--maintenance-yellow);
}

.maintenance-reopened-body {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  padding: 40px 24px;
  box-sizing: border-box;
  text-align: center;
}

.maintenance-reopened-mark {
  --frame-inset: 0px;
  --frame-size: 28px;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
}

.maintenance-reopened-mark svg {
  stroke: var(--maintenance-yellow);
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.maintenance-progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  background-color: rgb(255 255 255 / 16%);
}

.maintenance-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--maintenance-yellow);
  animation: maintenance-progress 2.5s ease-out forwards;
}

@keyframes maintenance-progress {
  from { width: 0; }
  to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .maintenance-pulse,
  .maintenance-progress span {
    animation: none;
  }
}