/* --- Espace client : habillage « poste de commandement » -------------------
   Reprend le langage visuel de la landing Allemax (chrome marine, accent
   orange, halos radiaux, cartes surélevées) sans jamais figer les couleurs :
   tout passe par --color-navy / --color-primary, que le layout du portail
   surcharge selon la marque du tenant. Un tenant blanc-marque garde donc son
   bleu ou son vert — seule la mise en scène est commune. */

/* Canvas de page : fond clair réchauffé par deux halos (accent en haut à
   droite, bleu radar en haut à gauche). En mode sombre, le même dispositif
   sur le marine. Les halos sont fixes : ils habillent le haut de page sans
   suivre le défilement. */
.portail-canvas {
  background-color: var(--color-background-light);
  background-image:
    radial-gradient(58% 46% at 88% -6%, color-mix(in srgb, var(--color-primary) 13%, transparent), transparent 70%),
    radial-gradient(46% 40% at 4% -4%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.dark .portail-canvas {
  background-color: var(--color-navy);
  background-image:
    radial-gradient(58% 46% at 88% -6%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 70%),
    radial-gradient(46% 40% at 4% -4%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%);
}

/* Chrome marine translucide — même barre que la nav de la landing. */
.portail-chrome {
  background-color: color-mix(in srgb, var(--color-navy) 92%, transparent);
  border-bottom: 1px solid var(--color-navy-border);
  backdrop-filter: blur(14px);
}

@layer components {
  /* --- Surfaces ---------------------------------------------------------- */

  /* Carte : blanche et surélevée en clair, marine en sombre. L'anneau très
     dilué remplace la bordure grise — c'est ce qui fait la profondeur. */
  .portail-card {
    @apply rounded-2xl bg-white p-5 ring-1 ring-navy/8 dark:bg-navy-surface dark:ring-navy-border;
    box-shadow: 0 1px 2px rgb(7 26 47 / 0.04), 0 10px 30px -18px rgb(7 26 47 / 0.28);
  }

  .dark .portail-card {
    box-shadow: 0 18px 44px -28px rgb(0 0 0 / 0.8);
  }

  /* Variante cliquable : se soulève et s'accroche à la couleur d'accent. */
  .portail-card-link {
    @apply block transition duration-150 hover:-translate-y-0.5 hover:ring-primary/40;
  }

  /* Corps de la fenêtre de connexion. */
  .portail-window-body {
    @apply p-6 sm:p-7;
  }

  /* Carte vide (aucune donnée) — pointillés plutôt qu'un aplat. */
  .portail-empty {
    @apply rounded-2xl border border-dashed border-navy/15 bg-white/60 p-10 text-center dark:border-navy-border dark:bg-navy-surface/40;
  }

  /* Filet de couleur à gauche d'une carte — se compose avec .portail-card.
     La teinte vient d'une classe d'accompagnement (portail-accent-*). */
  .portail-notice {
    @apply relative overflow-hidden pl-6;
  }

  .portail-notice::before {
    content: "";
    @apply absolute inset-y-0 left-0 w-1.5;
    background: var(--portail-accent, var(--color-primary));
  }

  .portail-accent-primary { --portail-accent: var(--color-primary); }
  .portail-accent-info    { --portail-accent: var(--color-accent); }
  .portail-accent-warning { --portail-accent: #F59E0B; }
  .portail-accent-success { --portail-accent: #10B981; }
  .portail-accent-neutral { --portail-accent: var(--color-navy-border); }

  /* --- Typographie ------------------------------------------------------- */

  .portail-title {
    @apply text-2xl font-extrabold text-navy dark:text-content-dark;
    letter-spacing: -0.03em;
  }

  .portail-eyebrow {
    @apply text-[11px] font-bold uppercase text-subtle-light dark:text-subtle-dark;
    letter-spacing: 0.09em;
  }

  /* --- Boutons ----------------------------------------------------------- */

  /* Action principale : aplat d'accent, texte marine profond (comme les CTA
     de la landing) et halo coloré sous le bouton. */
  .portail-btn-primary {
    @apply inline-flex cursor-pointer items-center justify-center gap-2 px-5 py-2.5 text-sm font-bold transition duration-150 hover:-translate-y-px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 75%, transparent);
  }

  .portail-btn-primary:hover {
    background: var(--accent-600);
    color: #fff;
  }

  .portail-btn-primary:active {
    background: var(--accent-800);
    color: #fff;
  }

  .portail-btn-primary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* Action secondaire : contour discret qui s'allume à l'accent au survol. */
  .portail-btn-ghost {
    @apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-navy/12 bg-white px-5 py-2.5 text-sm font-semibold text-navy transition duration-150 hover:-translate-y-px hover:border-primary/45 hover:text-primary dark:border-navy-border dark:bg-navy-surface dark:text-content-dark dark:hover:text-primary;
  }

  /* Action secondaire posée sur le marine (hero, page de connexion) : le
     contour clair du ghost ordinaire y perdrait toute lisibilité. */
  .portail-btn-ghost-marine {
    @apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-navy-border bg-white/5 px-5 py-2.5 text-sm font-semibold text-content-dark transition duration-150 hover:-translate-y-px hover:border-primary/55 hover:bg-white/10;
  }

  /* Retour arrière en tête de page. */
  .portail-back {
    @apply inline-flex items-center gap-1.5 text-sm font-medium text-subtle-light transition-colors hover:text-primary dark:text-subtle-dark;
  }

  /* --- Pastilles --------------------------------------------------------- */

  .portail-badge {
    @apply inline-flex shrink-0 items-center gap-1.5 rounded-full px-3 py-1 text-[11px] font-bold uppercase ring-1 ring-inset;
    letter-spacing: 0.05em;
  }

  /* --- Panneaux ------------------------------------------------------------
     Une carte à en-tête : le titre de section vit DANS la surface plutôt qu'au
     dessus. C'est ce qui fait tenir l'accueil comme un tableau de bord et non
     comme une pile de cartes indépendantes. Pas de padding sur le panneau : ce
     sont les rangs qui portent le leur, pour que les séparateurs aillent d'un
     bord à l'autre. */
  .portail-panneau {
    @apply overflow-hidden rounded-2xl bg-white ring-1 ring-navy/8 dark:bg-navy-surface dark:ring-navy-border;
    box-shadow: 0 1px 2px rgb(7 26 47 / 0.04), 0 10px 30px -18px rgb(7 26 47 / 0.28);
  }

  .dark .portail-panneau {
    box-shadow: 0 18px 44px -28px rgb(0 0 0 / 0.8);
  }

  .portail-panneau-tete {
    @apply flex items-center justify-between gap-3 border-b border-navy/8 px-5 py-3.5 dark:border-navy-border;
  }

  /* Rang : la ligne d'un panneau. Séparateur entre rangs seulement — jamais au
     dessus du premier, qui touche déjà l'en-tête. */
  .portail-rang {
    @apply flex items-start gap-3.5 px-5 py-4 no-underline transition-colors;
  }

  .portail-rang + .portail-rang {
    @apply border-t border-navy/6 dark:border-navy-border/70;
  }

  a.portail-rang:hover,
  a.portail-rang:focus-visible {
    @apply bg-navy/4 dark:bg-white/4;
  }

  /* Tuile d'icône d'un rang. La teinte arrive par des classes utilitaires
     (`bg-…/12 text-…`) : les tons d'alerte demandent des valeurs plus sombres
     que la variable d'accent pour rester lisibles sur blanc. */
  .portail-icone {
    @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-xl;
  }

  /* Lien de fin de panneau (« Tout voir »). */
  .portail-lien-suite {
    @apply inline-flex items-center gap-1.5 text-[13px] font-semibold text-subtle-light no-underline transition-colors hover:text-primary dark:text-subtle-dark;
  }

  /* --- Jauge ---------------------------------------------------------------
     Barre d'avancement des jalons. `> span` porte la largeur en style inline. */
  .portail-jauge {
    @apply h-1.5 overflow-hidden rounded-full bg-navy/8 dark:bg-white/10;
  }

  .portail-jauge > span {
    @apply block h-full rounded-full;
    background: var(--color-primary);
  }

  /* --- Identité ------------------------------------------------------------
     Médaillon du client dans le chrome : initiales sur un aplat d'accent très
     dilué. Remplace l'adresse courriel posée en clair — l'identité se lit, elle
     ne s'épelle pas. */
  .portail-medaillon {
    @apply flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-[12px] font-extrabold text-content-dark;
    background: color-mix(in srgb, var(--color-primary) 24%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 48%, transparent);
  }
}

/* --- Console d'accueil ------------------------------------------------------
   Le « poste de commandement » du client : dégradé marine, halo d'accent, et
   le relevé en filigrane posé par la vue (SVG inline). La barre d'état est
   encastrée dans son bas — d'où le `overflow: hidden` et l'absence de padding
   sur le bloc lui-même. */
.portail-console {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--color-navy-border);
  background:
    linear-gradient(135deg,
      var(--color-navy) 0%,
      color-mix(in srgb, var(--color-navy) 96%, white) 58%,
      var(--color-navy-deep) 100%);
  box-shadow:
    0 30px 66px -34px rgb(7 26 47 / 0.6),
    inset 0 1px 0 0 rgb(255 255 255 / 0.07);
}

/* Halo d'accent. Reste sous le contenu : c'est le `relative z-10` des blocs,
   dans la vue, qui assure l'empilement — une règle `.portail-console > *` ici
   écraserait le `absolute` du filigrane (CSS hors couche > utilitaires). */
.portail-console::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(48% 62% at 78% 22%,
    color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 68%);
}

/* --- Barre d'état -----------------------------------------------------------
   L'élément signature de l'accueil : quatre cellules encastrées dans le bas de
   la console, séparées par des filets d'un pixel. Pas des cartes de chiffres —
   chacune se lit comme une phrase (« 2 à décider », « Tous à jour »), et seule
   celle qui attend une action porte la pastille d'accent. Les onglets disent
   OÙ aller ; la barre dit CE QU'IL Y A.

   Filets obtenus par `gap` sur un fond coloré : une bordure par cellule
   décalerait la grille d'un pixel à chaque colonne. */
.portail-etats {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-navy-border);
  border-top: 1px solid var(--color-navy-border);
}

@media (min-width: 640px) {
  .portail-etats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.portail-etat {
  position: relative;
  display: block;
  padding: 0.9rem 1.15rem 1rem;
  text-decoration: none;
  background: var(--color-navy-deep);
  transition: background-color 0.15s ease;
}

.portail-etat:hover,
.portail-etat:focus-visible {
  background: color-mix(in srgb, var(--color-navy-deep) 78%, var(--color-navy-surface));
}

.portail-etat-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-subtle-dark);
}

.portail-etat-valeur {
  display: block;
  margin-top: 0.3rem;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-content-dark);
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Cellule qui attend une action : valeur en accent + pastille au coin. */
.portail-etat-actif .portail-etat-valeur { color: var(--color-primary); }

.portail-etat-puce {
  position: absolute;
  top: 0.95rem;
  right: 1.15rem;
  height: 0.4rem;
  width: 0.4rem;
  border-radius: 9999px;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

/* Boutons submit en mode sombre. `dark_mode.css` impose
   `.dark input/select/textarea { background-color: … !important }`, ce qui
   effacerait l'aplat d'accent des `submit_tag` / `button_to` du portail. Même
   contre-règle que celle déjà en place pour `.btn-primary` dans components.css :
   plus spécifique, donc elle reprend la main. */
.dark input[type="submit"].portail-btn-primary,
.dark button[type="submit"].portail-btn-primary {
  background-color: var(--accent) !important;
  color: var(--on-accent) !important;
}

.dark input[type="submit"].portail-btn-primary:hover,
.dark button[type="submit"].portail-btn-primary:hover {
  background-color: var(--accent-600) !important;
  color: #fff !important;
}

/* --- Fenêtre de connexion ---------------------------------------------------
   La page d'entrée n'a rien derrière elle : c'est le voile (`.portail-scrim`)
   qui repousse le fond marine au second plan, et la barre de titre qui fait
   lire la carte comme une fenêtre. Purement visuel — aucune ouverture ni
   fermeture, la page reste une page.

   Le voile reste volontairement léger : c'est de voir le relevé et le halo
   subsister derrière que vient l'impression d'une fenêtre posée sur quelque
   chose, plutôt que d'un panneau sur du noir.

   Corps sur `navy-surface` (comme les cartes du portail), barre entre cette
   surface et le marine — l'en-tête du mockup de la landing. */
.portail-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--color-navy-deep) 42%, transparent);
  backdrop-filter: blur(1.5px);
}

.portail-window {
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--color-navy-border);
  background: var(--color-navy-surface);
  box-shadow:
    0 40px 90px -28px rgb(0 0 0 / 0.8),
    inset 0 1px 0 0 rgb(255 255 255 / 0.06);
}

.portail-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--color-navy-border);
  background: color-mix(in srgb, var(--color-navy-surface) 55%, var(--color-navy));
}

/* Champs de la fenêtre : elle est marine dans les deux modes, un `.form-input`
   blanc (son fond en mode clair) y ferait tache. On garde LA classe du projet
   et on la reteinte dans ce contexte — surface enfoncée, comme un champ creusé
   dans le panneau. En mode sombre, dark_mode.css arrive au même résultat. */
.portail-window .form-input {
  background-color: var(--color-navy-deep);
  border-color: var(--color-navy-border);
  color: var(--color-content-dark);
}

.portail-window .form-input::placeholder {
  color: var(--color-subtle-dark);
  opacity: 0.75;
}

/* --- Écusson du tenant ------------------------------------------------------
   L'icône qui dit à qui appartient cet espace. Trois remplissages, une seule
   forme — c'est ce qui garde le chrome constant d'un tenant à l'autre. */
.portail-ecusson {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Logo téléversé : plaque blanche. Un logo dessiné pour fond clair resterait
   illisible posé directement sur le marine. */
.portail-ecusson-plaque {
  background: #fff;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.28);
}

/* Tenant blanc-marque sans logo : monogramme sur son propre accent. */
.portail-ecusson-mono {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--color-primary) 88%, white),
    var(--color-primary));
  color: var(--color-navy-deep);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--color-primary) 80%, transparent);
}

/* Maison (aucune personnalisation) : l'étoile sur une surface marine creusée. */
.portail-ecusson-maison {
  background: color-mix(in srgb, var(--color-navy-surface) 85%, transparent);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-navy-border);
}

/* Chiffres alignés en colonne — les compteurs du portail se lisent comme des
   relevés d'instrument, pas comme du texte courant. */
.portail-nums {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Onglet du chrome : le soulignement porte l'état actif, le fond très dilué
   n'apparaît qu'au survol. */
.portail-onglet {
  display: inline-block;
  white-space: nowrap;
  padding: 0.6rem 0.85rem;
  border-bottom: 2px solid transparent;
  border-radius: 0.5rem 0.5rem 0 0;
  color: var(--color-subtle-dark);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.portail-onglet:hover {
  background: rgb(255 255 255 / 0.05);
  color: var(--color-content-dark);
}

.portail-onglet-actif {
  border-bottom-color: var(--color-primary);
  color: var(--color-content-dark);
}

/* --- Entrée en scène --------------------------------------------------------
   Une seule séquence, au chargement de l'accueil : les blocs montent dans
   l'ordre de lecture. Le délai est posé en style inline par la vue. */
@keyframes portail-monte {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.portail-monte {
  animation: portail-monte 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .portail-monte { animation: none; }
  .portail-card-link:hover,
  .portail-btn-primary:hover,
  .portail-btn-ghost:hover,
  .portail-btn-ghost-marine:hover { transform: none; }
}