/** * Styles front de « Mes documents ». Alignés sur la UX de Mon espace : on * réutilise les tokens du thème (préfixe --wp--preset--*), avec repli si absents. * * @package elito-mes-documents */ /* La popup est rendue hors du conteneur .mesdoc (ajoutée sur ) : on redéclare donc les variables aussi sur .mesdoc-modal, sinon le panneau est transparent et les textes de l'en-tête deviennent illisibles. */ .mesdoc, .mesdoc-modal { --mesdoc-paper: var( --wp--preset--color--lpo-paper, #fff ); --mesdoc-ink: var( --wp--preset--color--lpo-ink, #1a1a1a ); --mesdoc-blue: var( --wp--preset--color--lpo-blue, #1d6fb8 ); --mesdoc-orange: var( --wp--preset--color--lpo-orange, #e8722a ); --mesdoc-line: var( --wp--preset--color--lpo-warm-300, #e2ddd4 ); --mesdoc-soft: var( --wp--preset--color--lpo-warm-50, #faf8f4 ); --mesdoc-muted: var( --wp--preset--color--lpo-warm-700, #6b6358 ); --mesdoc-radius: 14px; font-family: var( --wp--preset--font-family--lpo, inherit ); color: var( --mesdoc-ink ); } /* --- Formulaire de dépôt --- */ .mesdoc-form { background: var( --mesdoc-paper ); border: 1px solid var( --mesdoc-line ); border-radius: var( --mesdoc-radius ); box-shadow: var( --wp--preset--shadow--card, 0 1px 3px rgba( 0, 0, 0, .06 ) ); padding: clamp( 16px, 3vw, 28px ); } .mesdoc-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; } .mesdoc-field label { font-weight: 600; } .mesdoc-field input[type="text"], .mesdoc-field input[type="file"] { width: 100%; max-width: 480px; padding: 10px 12px; border: 1px solid var( --mesdoc-line ); border-radius: 8px; background: var( --mesdoc-soft ); } .mesdoc-hint { font-size: var( --wp--preset--font-size--small, .85em ); color: var( --mesdoc-muted ); } .mesdoc-actions { margin: 8px 0 0; } /* Formulaire de dépôt « inline » (montant membre) : champs sur une ligne. */ .mesdoc-form--inline .mesdoc-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; } .mesdoc-form--inline .mesdoc-field { margin: 0; flex: 1 1 220px; } .mesdoc-form--inline .mesdoc-field--submit { flex: 0 0 auto; } .mesdoc-form--inline .mesdoc-field--submit .wp-element-button { white-space: nowrap; } .mesdoc-form--inline .mesdoc-hint { display: block; margin-top: 8px; } @media ( max-width: 600px ) { .mesdoc-form--inline .mesdoc-field { flex-basis: 100%; } .mesdoc-form--inline .mesdoc-field--submit .wp-element-button { width: 100%; } } /* Bouton d'envoi des formulaires (dépôt / upload) : pill conforme au thème. */ .mesdoc-form .wp-element-button { display: inline-block; border: 0; border-radius: 999px; padding: 13px 26px; background: var( --mesdoc-blue ); color: var( --mesdoc-paper ); font-family: var( --wp--preset--font-family--sora, inherit ); font-weight: 700; font-size: var( --wp--preset--font-size--normal, 1rem ); line-height: 1; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease; } .mesdoc-form .wp-element-button:hover { background: var( --mesdoc-ink ); box-shadow: var( --wp--preset--shadow--md, 0 4px 12px rgba( 0, 0, 0, .15 ) ); } .mesdoc-form .wp-element-button:active { transform: translateY( 1px ); } /* Le formulaire de dépôt est dans une colonne de largeur variable (Mon espace) : on observe sa LARGEUR RÉELLE via une container query (et pas le viewport). */ .mesdoc-depot { container-type: inline-size; } /* Formulaire en deux colonnes (label 25% / contrôle 75%). */ .mesdoc-form--cols .mesdoc-field--row { display: grid; grid-template-columns: 25% 1fr; align-items: start; column-gap: 18px; row-gap: 4px; margin: 0 0 18px; } .mesdoc-form--cols .mesdoc-field--row > label { padding-top: 10px; } .mesdoc-control { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .mesdoc-control input[type="text"], .mesdoc-control input[type="file"], .mesdoc-control select { width: 100%; max-width: 480px; } /* Normalise le