/*
  Page publique de dépôt d'un projet de collecte.

  Marque blanche: tous les accents passent par --client-button-background-color et
  --client-button-text-color, les variables que BaseWhiteLabelingMaster injecte quand la
  page est servie sur le sous-domaine d'une organisation. Repli sur l'orange Secure
  Exchanges partout ailleurs, exactement comme FileBox.css du SDK.

  Le patron visuel des étapes d'authentification reprend celui du code d'ouverture des
  enveloppes (OpeningCode.css): carte centrée, encadré de confirmation, champ de code
  espacé, bouton pleine largeur. Coins carrés et police du site partout, comme le reste
  de l'interface (jetons --radius-* et --font-body du design system).
*/

.se-collect {
  /* Couleurs raccrochées aux jetons du design system (design-system.css),
     avec repli littéral: la marque blanche passe d'abord, puis les jetons. */
  --collect-accent: var(--client-button-background-color, var(--se-orange, #EE6525));
  --collect-accent-text: var(--client-button-text-color, #ffffff);
  /* Rappel de la couleur de bordure de la marque sur les zones de dépôt.
     Repli sur l'accent (couleur de bouton), puis sur l'orange. */
  --collect-border: var(--client-border-color, var(--collect-accent));
  --collect-ink: var(--se-navy, #1D2A39);
  --collect-ink-soft: var(--se-gray-blue, #3F4A57);
  --collect-line: rgba(29, 42, 57, 0.12);
  --collect-ok: var(--se-success, #28A745);

  /* Police du site: le body de ce gabarit porte la classe .stretched, la
     typographie de design-system.css ne s'y applique donc pas; on la pose ici. */
  font-family: var(--font-body);
  color: var(--collect-ink);

  /* Taille de base de la page. Le thème pose 20px sur .container (style.css),
     règle GLOBALE aux ~48 pages du site: on ne la touche pas, on la surcharge
     ici, une seule fois, pour toute la page. !important: notre élément EST le
     .container, la règle du thème a la même cible. */
  font-size: 16px !important;
}

.se-collect {
  padding-top: 34px;
  padding-bottom: 90px;
  max-width: 880px;

  /* Le .container du thème pose margin: 0 5%, il ne centre pas. Avec une largeur
     plafonnée à 880px, le bloc restait collé à gauche: on force le centrage. */
  margin-left: auto !important;
  margin-right: auto !important;
  float: none;
  width: 100%;
}

/* En marque blanche, View.Master pose en style INLINE
   `#content .content-wrap .container { font-size: 18px !important }`
   (spécificité id + 2 classes). On la dépasse d'une classe, scopé à notre
   page uniquement — le gabarit, partagé par toutes les pages marque blanche,
   n'est pas touché. */
#content .content-wrap .container.se-collect {
  font-size: 16px !important;
}

/* Les contrôles de formulaire n'héritent pas de la police du corps par
   défaut dans les navigateurs. On force la police du site partout, comme
   .form-input du design system, pour que la page reste homogène. */
.se-collect input,
.se-collect textarea,
.se-collect button,
.se-collect select {
  font-family: var(--font-body);
}

/* Titres: même typographie que les pages publiques v2. design-system.css les
   pose sur body:not(.stretched); ce gabarit a un body .stretched, on reprend
   donc les mêmes règles, scopées à la page. */
.se-collect h1,
.se-collect h2,
.se-collect h3 {
  font-family: var(--font-heading);
  font-weight: normal;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
}

.se-collect h1 {
  font-size: 2.5rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

/* Sélecteur de langue (marque blanche seulement) --------------------- */

/* Le style du sélecteur lui-même (globe, liste à coches) vient de
   header-footer.css via les classes header-actions et lang-selector-wrapper,
   les mêmes que l'entête du site. Ici, seulement son ancrage dans la page. */
.se-collect .collect-lang {
  display: flex;
  justify-content: flex-end;
  min-height: 26px;
  margin-bottom: 2px;
}

/* Neutralise le mode mobile "menu" du sélecteur d'entête: sur cette page,
   il reste un petit contrôle aligné à droite, peu importe la taille d'écran. */
@media (max-width: 992px) {
  .se-collect .collect-lang .lang-selector-wrapper {
    width: auto;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    flex-wrap: nowrap;
  }

  .se-collect .collect-lang .lang-globe-icon {
    margin-top: 0;
    margin-right: 0;
    font-size: 15px;
  }

  .se-collect .collect-lang .switchLanguage > a {
    padding: 0 !important;
    font-size: 13px !important;
    width: auto;
  }

  .se-collect .collect-lang .switchLanguage .lang-full {
    display: none !important;
  }

  /* Le mode mobile de l'entête transforme la liste en menu accordéon piloté par le
     script du MainHeader, absent en marque blanche. On restaure ici le déroulant
     flottant du bureau, ouvert au survol ou au toucher. */
  .se-collect .collect-lang .switchLanguage ul {
    position: absolute !important;
    width: auto !important;
    min-width: 140px !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    padding: 4px 0 !important;
    margin-top: 0 !important;
    background-color: #fff;
    z-index: 199;
  }

  .se-collect .collect-lang .switchLanguage:hover > ul,
  .se-collect .collect-lang .lang-selector-wrapper:hover .switchLanguage > ul {
    display: block !important;
  }
}

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

.se-collect .collect-head {
  text-align: center;
  margin-bottom: 28px;
}

.se-collect .collect-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--collect-accent);
  margin-bottom: 8px;
}

.se-collect .collect-head h1 {
  color: var(--collect-ink);
  margin: 0 0 6px 0;
}

.se-collect .collect-sub {
  color: var(--collect-ink-soft);
  margin: 0 auto;
  max-width: 560px;
}

/* Cartes ------------------------------------------------------------- */

.se-collect .collect-card {
  background: #fff;
  border: 1px solid var(--collect-line);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 24px rgba(29, 42, 57, 0.07);
  padding: 28px;
  margin-bottom: 16px;
}

.se-collect .collect-card-title {
  color: var(--collect-ink);
  font-size: 1.5rem;
  margin: 0 0 6px 0;
}

.se-collect .collect-card-centered {
  text-align: center;
  padding: 44px 28px;
}

.se-collect .collect-muted {
  color: var(--collect-ink-soft);
}

/* Étapes d'authentification: carte centrée façon code d'ouverture ---- */

.se-collect .collect-auth-wrap {
  display: flex;
  justify-content: center;
}

.se-collect .collect-auth-card {
  width: 100%;
  max-width: 520px;
  text-align: center;
}

.se-collect .collect-step-icon,
.se-collect .collect-lock-badge,
.se-collect .collect-success-badge {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: 24px;
  background: color-mix(in srgb, var(--collect-accent) 12%, #ffffff);
  color: var(--collect-accent);
}

.se-collect .collect-success-badge {
  background: rgba(40, 167, 69, 0.12);
  color: var(--collect-ok);
}

.se-collect .collect-label {
  display: block;
  text-align: left;
  font-weight: 600;
  color: var(--collect-ink);
  margin: 18px 0 6px 0;
}

/* Captcha du site dans la carte d'identification --------------------- */

.se-collect .collect-captcha-holder {
  margin-top: 6px;
}

/* Widget Turnstile centré comme le reste de la carte. */
.se-collect .collect-turnstile {
  display: flex;
  justify-content: center;
  margin: 4px 0;
}

.se-collect .collect-captcha-holder .captchacontainer {
  max-width: 320px;
}

.se-collect .collect-captcha-holder .txtCaptCha {
  border: 2px solid #dee2e6;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 16px;
}

.se-collect .collect-captcha-holder .txtCaptCha:focus {
  outline: none;
  border-color: var(--collect-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--collect-accent) 12%, transparent);
}

/* Champs, patron code-input-wrapper d'OpeningCode -------------------- */

.se-collect .collect-input-wrapper {
  position: relative;
}

.se-collect .collect-input-wrapper > i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--collect-ink-soft);
  font-size: 17px;
  pointer-events: none;
}

.se-collect .collect-input-wrapper input {
  width: 100%;
  padding: 15px 18px 15px 46px;
  border: 2px solid #dee2e6;
  border-radius: var(--radius-md);
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: #fff;
  color: var(--collect-ink);
}

.se-collect .collect-input-wrapper input:focus {
  outline: none;
  border-color: var(--collect-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--collect-accent) 12%, transparent);
}

.se-collect .collect-code-wrapper input {
  font-family: var(--font-body);
  font-size: 22px;
  letter-spacing: 10px;
  text-align: center;
  padding-left: 46px;
  padding-right: 18px;
  font-weight: 600;
}

.se-collect .collect-code-wrapper input::placeholder {
  letter-spacing: 6px;
  color: #ced4da;
}

/* Encadré "code envoyé", patron notification-alert-box --------------- */

.se-collect .collect-sent-box {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: linear-gradient(135deg, #e7f5ff 0%, #d0ebff 100%);
  border: 1px solid #74c0fc;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 16px;
  color: #495057;
  /* Information secondaire: plus discrète que le corps de la carte.
     !important requis: le thème pose font-size: 20px sur .container et
     plusieurs de ses règles gagnent sur les tailles posées ici. */
  font-size: 13px !important;
  line-height: 1.5;
}

.se-collect .collect-sent-box strong {
  display: block;
  color: #295cbb;
  font-size: 14px !important;
}

/* Le corps du message (adresse et validité) suit le titre de l'encadré. */
.se-collect .collect-sent-box span {
  font-size: 14px !important;
}

.se-collect .collect-sent-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  background: #fff;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #1971c2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Boutons, aux couleurs du client ------------------------------------ */

.se-collect .collect-btn-primary {
  width: 100%;
  margin-top: 18px;
  padding: 15px 24px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--collect-accent);
  color: var(--collect-accent-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.se-collect .collect-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(0.95);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--collect-accent) 35%, transparent);
}

.se-collect .collect-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.se-collect .collect-btn-send {
  max-width: 420px;
}

.se-collect .collect-help-links {
  margin-top: 14px;
}

.se-collect .collect-link {
  border: 0;
  background: transparent;
  color: var(--collect-ink-soft);
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
}

.se-collect .collect-link:hover {
  color: var(--collect-ink);
}

/* Notices ------------------------------------------------------------ */

.se-collect .collect-notice {
  display: block;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  text-align: left;
  background: color-mix(in srgb, var(--collect-accent) 9%, #ffffff);
  border-left: 3px solid var(--collect-accent);
  color: var(--collect-ink);
}

.se-collect .collect-notice-error {
  background: rgba(220, 53, 69, 0.07);
  border-left-color: var(--se-danger, #DC3545);
}

.se-collect .collect-notice-warning {
  background: rgba(255, 165, 0, 0.09);
  border-left-color: var(--se-warning, #FFA500);
}

/* Consignes ---------------------------------------------------------- */

.se-collect .collect-instructions {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: color-mix(in srgb, var(--collect-accent) 5%, #ffffff);
}

.se-collect .collect-instructions > i {
  color: var(--collect-accent);
  font-size: 20px;
  margin-top: 2px;
}

/* Boîtes de dépôt ---------------------------------------------------- */

.se-collect .collect-slots {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.se-collect .collect-slot {
  margin-bottom: 0;
  padding: 22px 24px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.se-collect .collect-slot.has-files {
  border-color: rgba(40, 167, 69, 0.45);
}

.se-collect .collect-slot.is-uploading {
  opacity: 0.65;
  pointer-events: none;
}

.se-collect .collect-slot-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.se-collect .collect-slot-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: 19px;
  background: color-mix(in srgb, var(--collect-accent) 10%, #ffffff);
  color: var(--collect-accent);
}

.se-collect .collect-slot.has-files .collect-slot-icon {
  background: rgba(40, 167, 69, 0.12);
  color: var(--collect-ok);
}

.se-collect .collect-slot-titles {
  flex: 1 1 auto;
  min-width: 0;
}

.se-collect .collect-slot-head h3 {
  color: var(--collect-ink);
  margin: 0;
  font-size: 1.15rem;
}

.se-collect .collect-slot-desc {
  color: var(--collect-ink-soft);
  margin: 2px 0 0 0;
  font-size: 14px;
}

.se-collect .collect-slot-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.se-collect .collect-slot-badge.is-required {
  background: color-mix(in srgb, var(--collect-accent) 12%, #ffffff);
  color: var(--collect-accent);
}

.se-collect .collect-slot-badge.is-optional {
  background: #f1f3f5;
  color: var(--collect-ink-soft);
}

.se-collect .collect-slot.has-files .collect-slot-badge.is-required {
  background: rgba(40, 167, 69, 0.12);
  color: var(--collect-ok);
}

/* Zone de dépôt: cachée quand la boîte est pleine -------------------- */

.se-collect .collect-drop {
  margin-top: 16px;
  padding: 26px 20px;
  border: 2px dashed color-mix(in srgb, var(--collect-border) 55%, #ffffff);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--collect-border) 4%, #ffffff);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  /* Flex colonne centrée: l'icône reste alignée avec le texte quelle que soit la
     règle d'affichage que le site impose aux <i> (FontAwesome, styles globaux). */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.se-collect .collect-drop:hover,
.se-collect .collect-drop:focus,
.se-collect .collect-drop.is-over {
  border-color: var(--collect-border);
  background: color-mix(in srgb, var(--collect-border) 9%, #ffffff);
  outline: none;
}

.se-collect .collect-slot.is-full .collect-drop {
  display: none;
}

.se-collect .collect-drop i {
  display: block;
  font-size: 26px;
  color: var(--collect-border);
  margin-bottom: 8px;
}

.se-collect .collect-drop span {
  display: block;
  font-weight: 600;
  color: var(--collect-ink);
}

.se-collect .collect-drop small {
  display: block;
  margin-top: 3px;
  color: var(--collect-ink-soft);
}

.se-collect .collect-slot-input {
  display: none;
}

/* Fichiers déposés --------------------------------------------------- */

.se-collect .collect-slot-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Les boîtes du designer héritent de la couleur du client pour la progression. */
.se-collect .filebox .filebox_progress div {
  background-color: var(--collect-accent);
}

.se-collect .collect-file-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(40, 167, 69, 0.07);
  border: 1px solid rgba(40, 167, 69, 0.25);
  border-radius: var(--radius-md);
}

.se-collect .collect-file-chip > i {
  color: var(--collect-ok);
  font-size: 16px;
  flex: 0 0 auto;
}

.se-collect .collect-file-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--collect-ink);
  text-align: left;
}

.se-collect .collect-file-remove {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--collect-ink-soft);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  line-height: 1;
}

.se-collect .collect-file-remove:hover {
  color: var(--se-danger, #DC3545);
  background: rgba(220, 53, 69, 0.08);
}

/* Message du client -------------------------------------------------- */

.se-collect .collect-message textarea {
  width: 100%;
  border: 2px solid #dee2e6;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 15px;
  color: var(--collect-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
}

.se-collect .collect-message textarea:focus {
  outline: none;
  border-color: var(--collect-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--collect-accent) 12%, transparent);
}

/* Actions ------------------------------------------------------------ */

.se-collect .collect-actions {
  text-align: center;
  margin-top: 8px;
}

.se-collect .collect-privacy {
  margin-top: 14px;
  font-size: 13px;
}

.se-collect .collect-privacy i {
  margin-right: 4px;
}

/* Zone technique du SDK, jamais visible ------------------------------ */

.se-collect .collect-sdk-zone {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.se-collect .hidden {
  display: none !important;
}

/* Repli pour les navigateurs sans color-mix -------------------------- */

@supports not (background: color-mix(in srgb, red 10%, white)) {
  .se-collect .collect-step-icon,
  .se-collect .collect-lock-badge,
  .se-collect .collect-slot-icon,
  .se-collect .collect-slot-badge.is-required,
  .se-collect .collect-notice,
  .se-collect .collect-instructions,
  .se-collect .collect-drop {
    background: rgba(238, 101, 37, 0.08);
  }
}

@media (max-width: 640px) {
  .se-collect .collect-card { padding: 20px; }

  .se-collect .collect-slot-head {
    flex-wrap: wrap;
  }
}

/* Types acceptés d'une boîte, affichés sous la description ----------- */

.se-collect .collect-slot-ext {
  font-size: 12px;
  opacity: 0.75;
}

/* Boîtes du designer: pas de signature côté dépôt -------------------- */

/* Le déposant ne peut pas demander de signature sur ses propres fichiers:
   l'option du filebox est retirée au montage dans le JS, cette règle sert
   de ceinture si le gabarit du designer évolue. */
.se-collect .filebox .filebox_sign_wrapper {
  display: none !important;
}