/* ============================================================================
   portail.css — page d'accueil (gate) du portail documentaire.
   Charge APRÈS jetons.css.

   ── STYLE : NEUMORPHISME CORRIGÉ ─────────────────────────────────────────
   Choisi par Mehdi le 2026-09-09 sur maquette comparative (douze styles).
   Le relief habille les SURFACES — cartes, champs, panneaux ; les éléments
   ACTIONNABLES gardent un aplat contrasté.

   ⚠️ CETTE MOITIÉ N'EST PAS DÉCORATIVE. Le neumorphisme pur donne au bouton,
   au champ et à la carte la MÊME couleur — mesuré rgb(224,229,236) pour les
   trois sur la maquette. Plus rien n'indique où cliquer, et c'est ce qui l'a
   tué en un an. Un conseiller bancaire ouvre ce portail une fois, sur un poste
   qu'il n'a pas choisi : ses boutons doivent se voir.

   ⚠️ DEUX DÉRIVÉS HORS CANON, et seulement deux : les couleurs d'ombre. Le
   relief exige un fond MI-TON — sur le `--sol` (#FBFAF5) l'ombre claire serait
   invisible. On prend donc `--surface` (#F6F3EA), qui EST du canon, comme fond
   de page ET de carte : l'extrusion suppose que les deux se confondent. Aucune
   couleur de marque n'est inventée.
   ============================================================================ */

:root{
  /* Dérivés d'ombre, propres à ce portail — jamais dans jetons.css, qui est le
     canon partagé de la flotte. */
  --relief-clair:  #FFFFFF;
  --relief-sombre: #D9D3C2;
  --creux: inset 4px 4px 9px var(--relief-sombre), inset -4px -4px 9px var(--relief-clair);
  --bosse: 7px 7px 15px var(--relief-sombre), -7px -7px 15px var(--relief-clair);
  --bosse-douce: 4px 4px 9px var(--relief-sombre), -4px -4px 9px var(--relief-clair);
}

/* ----------------------------------------------------------------------------

   Cette page est le SEUL contact avant identification. Sa fonction n'est pas
   d'être belle, elle est de rendre le lien crédible : un partenaire qui reçoit
   par mail une invitation à s'identifier doit reconnaître qui l'envoie et
   pourquoi, sinon il ne clique pas — ou son filtre le bloque pour lui.
   ============================================================================ */

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0; min-height:100vh;
  display:grid; place-items:center;
  padding:var(--marge);
  background:var(--surface);
  color:var(--ink);
  font-family:var(--texte);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.carte{
  width:100%; max-width:460px;
  background:var(--surface);
  border:0;
  border-radius:24px;
  padding:2.5rem 2.25rem 2rem;
  position:relative; overflow:hidden;
  box-shadow:var(--bosse);
}

/* Aplat corail : le canon interdit le corail comme TEXTE sur fond clair,
   il l'autorise comme aplat porteur de sens. C'est le seul usage ici. */
.carte::before{
  content:''; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--corail),var(--corail-deep));
}

/* Lockup TYPOGRAPHIQUE, pas un logo emprunté. La page s'adresse à des gens qui
   instruisent un crédit : la marque affichée doit être celle de l'emprunteur.
   Y mettre le lockup EtikPharma serait le défaut reproché à phomni.fr — afficher
   une entité qui n'est pas celle qui emprunte. */
.marque{
  display:flex; align-items:center; gap:.5rem;
  margin:0 0 1.5rem; padding-bottom:1.25rem;
  border-bottom:1px solid var(--relief-sombre);
  font-family:var(--display); font-weight:600;
  font-size:1.0625rem; letter-spacing:-.01em; color:var(--ink);
}
.pastille{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--corail);           /* aplat, jamais du texte : canon */
}

.kicker{
  font-family:var(--tech); font-size:.6875rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal-deep);            /* 7,71:1 — le corail échouerait ici */
  margin:0 0 .5rem;
}

h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem,4vw,1.875rem); line-height:1.25;
  margin:0 0 .875rem; color:var(--ink);
}

.intro{ margin:0 0 1.75rem; color:var(--muted); font-size:.9375rem }

label{
  display:block; font-size:.8125rem; font-weight:600;
  color:var(--ink); margin-bottom:.4375rem;
}

/* Un CREUX invite à déposer, une BOSSE invite à appuyer : c'est la seule
   grammaire du neumorphisme, et elle vaut d'être respectée à la lettre. */
input[type=email]{
  width:100%; padding:.8125rem 1rem;
  font:inherit; font-size:.9375rem; color:var(--ink);
  background:var(--surface);
  border:0; border-radius:14px;
  box-shadow:var(--creux);
  transition:box-shadow .15s var(--ease-enter);
}
input[type=email]::placeholder{ color:var(--muted); opacity:.75 }
/* Le focus ne se signale PAS par un creux plus profond — invisible pour qui
   navigue au clavier. Anneau franc, comme partout ailleurs. */
input[type=email]:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px;
}

button{
  width:100%; margin-top:.875rem; padding:.8125rem 1rem;
  font:inherit; font-size:.9375rem; font-weight:600;
  color:#fff; background:var(--teal-deep);
  border:0; border-radius:14px; cursor:pointer;
  box-shadow:5px 5px 12px rgb(30 88 95 / .28);
  transition:background .15s var(--ease-enter), transform .15s var(--ease-enter),
             box-shadow .15s var(--ease-enter);
}
button:hover{ background:var(--teal); box-shadow:6px 6px 16px rgb(30 88 95 / .34) }
/* Enfoncer, pas décaler : le geste doit se lire dans la matière. */
button:active{ transform:translateY(1px); box-shadow:2px 2px 6px rgb(30 88 95 / .3) }
button:focus-visible{ outline:2px solid var(--teal); outline-offset:2px }

/* Réponse UNIFORME : le même texte que l'adresse soit connue ou non.
   Révéler la différence rendrait la liste des conseils du dossier énumérable. */
.reponse{
  margin:1.25rem 0 0; padding:.9375rem 1.0625rem;
  background:var(--surface); border-radius:14px;
  box-shadow:var(--creux);
  font-size:.875rem; color:var(--teal-deep);
}

.pied{
  margin:1.75rem 0 0; padding-top:1.25rem;
  border-top:1px solid var(--relief-sombre);
  font-size:.75rem; line-height:1.55; color:var(--muted);
}
.pied a{ color:var(--teal-deep); text-decoration:underline; text-underline-offset:2px }

@media (prefers-reduced-motion:reduce){ *{transition:none !important} }

/* ══════════════════════════════════════════════════════════════════════════
   APRÈS IDENTIFICATION — la liste des documents.
   Registre volontairement sobre : le lecteur est un banquier ou un notaire qui
   cherche une pièce, pas un visiteur qu'on veut retenir. Rien ne clignote.
   ══════════════════════════════════════════════════════════════════════════ */

.page{
  width:100%; max-width:var(--large);
  margin:0 auto; padding:2rem var(--marge) 3rem;
  align-self:start;
}

.entete{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:baseline; justify-content:space-between;
  padding-bottom:1.25rem; margin-bottom:2rem;
  border-bottom:1px solid var(--relief-sombre);
}
.entete .marque{ margin:0; padding:0; border:0 }
.entete-droite{ display:flex; align-items:baseline; gap:1rem; font-size:.875rem }
.bonjour{ color:var(--muted) }
/* ⚠️ RÈGLE DE GARDE — un bouton SANS FOND ne doit porter AUCUNE ombre.
   La règle d'élément `button{}` ci-dessus donne une ombre teal à tout bouton de
   la page ; sur un bouton transparent elle produit un halo flottant, une ombre
   sans objet qui la projette. Mesuré le 2026-09-09 sur cinq boutons — le fil
   d'Ariane, les noms de dossier et ce lien-ci. C'est le jumeau du `width:100%`
   de la même règle, qui avait étiré le fil d'Ariane sur mille pixels le matin
   même : une règle d'ÉLÉMENT frappe des boutons qui n'en veulent pas. Tout
   bouton nu ajouté plus tard doit rejoindre ce sélecteur. */
.lien-quitter, .fil-etape, .dossier-nom{ box-shadow:none }
.lien-quitter:hover, .fil-etape:hover, .dossier-nom:hover,
.lien-quitter:active, .fil-etape:active, .dossier-nom:active{ box-shadow:none }

.lien-quitter{
  width:auto; margin:0; padding:0;
  background:none; border:0; color:var(--teal-deep);
  font:inherit; font-size:.875rem; font-weight:500;
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.lien-quitter:hover{ background:none; color:var(--ink) }

.groupe{ margin-bottom:2.5rem }
.groupe h2{
  font-family:var(--display); font-weight:600; font-size:1.125rem;
  margin:0 0 .875rem; color:var(--ink);
}

.docs{ list-style:none; margin:0; padding:0 }
.doc{
  display:flex; flex-wrap:wrap; gap:.75rem 1rem;
  align-items:center; justify-content:space-between;
  padding:1rem 1.25rem;
  background:var(--surface);
  border:0; border-radius:18px;
  box-shadow:var(--bosse-douce);
  margin-bottom:.75rem;
  transition:box-shadow .15s var(--ease-enter);
}
.doc:hover{ box-shadow:var(--bosse) }
.doc-bloc{ display:flex; flex-direction:column; gap:.125rem; flex:1 1 16rem; min-width:0 }
.doc-nom{ font-size:.9375rem; color:var(--ink) }
.doc-date{ font-size:.75rem; color:var(--muted) }
.doc-message{ margin:.25rem 0 0; font-size:.8125rem; line-height:1.4 }
.doc-message--erreur{ color:var(--err-encre) }
.doc-message--ok{ color:var(--ok-encre) }

.doc-btn{
  width:auto; margin:0; padding:.5rem .9375rem;
  font-size:.8125rem; font-weight:600;
  color:#fff; background:var(--teal-deep);
  border:0; border-radius:12px; cursor:pointer; flex:none;
  box-shadow:4px 4px 10px rgb(30 88 95 / .26);
  transition:background .15s var(--ease-enter), box-shadow .15s var(--ease-enter);
}
.doc-btn:hover:not(:disabled){ background:var(--teal); box-shadow:5px 5px 13px rgb(30 88 95 / .32) }
.doc-btn:active:not(:disabled){ box-shadow:2px 2px 5px rgb(30 88 95 / .28) }
.doc-btn:disabled{ opacity:.6; cursor:default; box-shadow:none }

/* Demander une pièce n'est pas la recevoir : le bouton ne doit pas peser autant
   que « Télécharger », sinon les deux se lisent comme la même promesse. */
.doc-btn--second{
  color:var(--teal-deep); background:var(--surface); border:0;
  box-shadow:var(--bosse-douce);
}
.doc-btn--second:hover:not(:disabled){ background:var(--surface); box-shadow:var(--bosse) }
.doc-btn--second:active:not(:disabled){ box-shadow:var(--creux) }

.vide, .erreur{
  padding:1.125rem 1.25rem; border-radius:18px;
  font-size:.9375rem; margin:0;
}
.vide{ background:var(--surface); color:var(--muted); box-shadow:var(--creux) }
.erreur{ background:var(--err-surface); color:var(--err-encre) }

.pied-large{ max-width:var(--mesure) }