/* Pages publiques et liens client.
   Feuille de domaine du lot T3 (vague 1), créée et importée par assets/app.js au lot T0.
   Seul ce lot l'écrit ; app.css reste réservé aux jetons et composants (docs/DESIGN-SYSTEM.md §9.9).
   Pages vues par les clients du cabinet : sobres, rassurantes, lisibles au téléphone. */

/* ---------- Page publique : colonne, en-tête du cabinet, pied ---------- */

/* Carte blanche sur le fond nuit à halos de .auth (charte Horalio, 06/11). */
.public { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; padding: var(--e-7) var(--e-4); }
.public__carte { box-shadow: var(--ombre-coque); border-radius: var(--rayon-coque); }
/* min-width: 0 partout : un long libellé d'option (select) ne doit jamais élargir la page au téléphone. */
.public__colonne { width: 100%; max-width: 640px; min-width: 0; display: flex; flex-direction: column; gap: var(--e-4); }
.public__carte, .public__formulaire, .public .champ { min-width: 0; }
.public .champ select, .public .champ input { max-width: 100%; min-width: 0; }
.public .auth__carte { max-width: none; }
.public__carte { padding: var(--e-6); }
.public__carte > h1 { margin-bottom: var(--e-1); }

.public__marque { display: flex; align-items: center; gap: var(--e-3); margin: calc(var(--e-2) * -1) 0 var(--e-5); padding-bottom: var(--e-4); border-bottom: 1px solid var(--trait-2); }
/* Emplacement du logo du cabinet (décision en attente) : initiales sur tuile neutre, 40 px. */
.public__logo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--rayon-champ); background: var(--surface-4); border: 1px solid var(--trait-2); color: var(--encre); font: 600 var(--t-base)/1 var(--police); letter-spacing: .02em; overflow: hidden; }
.public__logo img { width: 100%; height: 100%; object-fit: contain; }
.public__identite { min-width: 0; }
.public__identite strong { display: block; font-weight: 600; font-size: var(--t-md); letter-spacing: -.01em; overflow-wrap: anywhere; }
.public__identite span { color: var(--encre-douce); font-size: var(--t-sm); }

.public__pied { margin: 0; text-align: center; font-size: var(--t-xs); color: rgba(255, 255, 255, .6); }

/* ---------- Texte d'introduction, sujet, blocs ---------- */

.public__sujet { margin: 0 0 var(--e-4); color: var(--encre-douce); font-size: var(--t-base); }
.public__intro { margin: 0 0 var(--e-5); font-size: var(--t-base); line-height: 1.6; color: var(--encre); }
.public__note { margin: var(--e-5) 0 0; }
.public__bloc { margin-top: var(--e-5); padding-top: var(--e-5); border-top: 1px solid var(--trait-2); }
.public__bloc:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.public__bloc h2 { font-size: var(--t-md); margin-bottom: var(--e-3); }
.public__bloc-entete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.public__bloc-entete h2 { margin-bottom: 0; }
.public__taux { font-weight: 600; font-size: var(--t-md); font-variant-numeric: tabular-nums; }

/* ---------- Formulaire public : envoi, confiance, mentions repliées ---------- */

.public__formulaire .champ textarea { min-height: 88px; }
.public__formulaire .champ input[type='file'] { height: auto; padding: 6px; }
.public__formulaire .champ input[type='file']::file-selector-button { margin-right: var(--e-3); height: 32px; padding: 0 12px; border: 1px solid var(--trait); border-radius: var(--rayon-champ); background: var(--surface); color: var(--encre); font: 500 var(--t-sm) var(--police); cursor: pointer; }
.public__formulaire .champ input[type='file']::file-selector-button:hover { background: var(--surface-4); }
.public__envoi { margin-top: var(--e-4); }
.public__envoi[hidden] { display: none; }
.public__confiance { display: flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-2); font-size: var(--t-sm); color: var(--encre-douce); }
.public__confiance::before { content: ''; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 11V8a6 6 0 0 1 12 0v3M5 11h14v10H5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 11V8a6 6 0 0 1 12 0v3M5 11h14v10H5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.public__actions { margin-top: 0; }
.public__actions + .aide { margin: var(--e-3) 0 0; }

.public__donnees { margin-top: var(--e-4); font-size: var(--t-xs); color: var(--encre-douce); }
.public__donnees summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; font-weight: 500; font-size: var(--t-sm); color: var(--primaire); list-style: none; }
.public__donnees summary::-webkit-details-marker { display: none; }
.public__donnees summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--duree, 160ms) var(--courbe, ease); }
.public__donnees[open] summary::before { transform: rotate(45deg); }
.public__donnees summary:hover { color: var(--primaire-survol); text-decoration: underline; }
.public__donnees summary:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; border-radius: var(--rayon-xs); }
.public__donnees p { margin: var(--e-2) 0 0; line-height: 1.6; }

/* ---------- Pages de message (merci, indisponible) ---------- */

.public__message { text-align: center; padding: var(--e-2) 0; }
.public__message p { margin: 0 auto var(--e-2); max-width: 46ch; }
.public__message h1 { margin-bottom: var(--e-3); }
.public__etat { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--e-4); border-radius: var(--rayon-pilule); background: var(--surface-4); color: var(--encre-douce); }
.public__etat--succes { background: var(--succes-fond); color: var(--succes-texte); }
.public__suite { margin-top: var(--e-4) !important; font-size: var(--t-sm); font-weight: 500; }

/* ---------- Formulaire par étapes (contrôleur etapes) ---------- */

.etapes-client__entete { margin: 0 0 var(--e-5); }
.etapes-client__entete[hidden] { display: none; }
.etapes-client__entete .etapes-client__progression { margin: 0 0 var(--e-2); font-size: var(--t-sm); font-weight: 500; color: var(--encre); }
.etapes-client__jauge { margin: 0 0 var(--e-3); }
.etapes-client__jauge .jauge__barre { width: 0; transition: width var(--duree, 160ms) var(--courbe, ease); }
.etapes-client__pastilles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.etapes-client__pastille { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--rayon-pilule); border: 1px solid var(--trait); background: var(--surface); color: var(--encre-douce); font: 500 var(--t-xs)/1 var(--police); font-variant-numeric: tabular-nums; transition: background var(--duree-rapide, 120ms) var(--courbe, ease), color var(--duree-rapide, 120ms) var(--courbe, ease); }
.etapes-client__pastille--faite { background: var(--succes-fond); border-color: var(--succes-trait); color: var(--succes-texte); }
.etapes-client__pastille--courante { background: var(--degrade-primaire); border-color: transparent; color: #fff; }

/* Étape : pas de cadre, la légende devient le titre de l'étape. */
.etape-client { border: 0; border-radius: 0; padding: 0; margin: 0 0 var(--e-5); min-width: 0; }
.etape-client:focus { outline: none; }
.etape-client > legend { padding: 0; margin-bottom: var(--e-4); font-size: var(--t-md); font-weight: 500; color: var(--encre); }
.etape-client__rang { color: var(--encre-douce); font-weight: 400; }
/* Avec le script, le rang est dans l'en-tête : la légende ne garde que le titre (rang lu par les lecteurs d'écran). */
.etapes-client--actif .etape-client__rang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Sans script, les étapes se suivent : plus d'air entre elles. */
.etapes-client:not(.etapes-client--actif) .etape-client + .etape-client { margin-top: var(--e-6); }
.etape-client--entree { animation: etape-entree var(--duree, 160ms) var(--courbe, ease) both; }
@keyframes etape-entree { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .etape-client--entree { animation: none; }
}
.etapes-client__navigation { justify-content: space-between; margin-top: 0; }
.etapes-client__navigation [data-etapes-target='suivant'],
.etapes-client__navigation button[type='submit'] { margin-left: auto; }
.etapes-client--actif ~ .public__envoi { margin-top: var(--e-3); }

/* Sociétés du formulaire de contact : une carte par société, « Retirer » en en-tête. */
.champ--societes [data-collection-target='liste'] { display: flex; flex-direction: column; gap: var(--e-3); margin-bottom: var(--e-3); }
.public .societe-contact { position: relative; margin: 0; padding: var(--e-4); border: 1px solid var(--trait-2); border-radius: var(--rayon-champ); background: var(--surface-3); min-width: 0; }
.public .societe-contact > legend { float: left; width: 100%; margin: 0 0 var(--e-3); padding: 0 96px 0 0; font-size: var(--t-base); font-weight: 500; }
.public .societe-contact > legend + * { clear: both; }
.public .societe-contact > [data-action='collection#retirer'] { position: absolute; top: var(--e-4); right: var(--e-4); }
.public .societe-contact .champ:last-of-type { margin-bottom: 0; }

/* ---------- Espace client : pièces attendues, fichiers reçus ---------- */

.liste-pieces { list-style: none; margin: 0 0 var(--e-3); padding: 0; border: 1px solid var(--trait-2); border-radius: var(--rayon-champ); font-size: var(--t-sm); }
.liste-pieces__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); padding: 10px var(--e-3); border-top: 1px solid var(--trait-2); }
.liste-pieces__ligne:first-child { border-top: 0; }
.liste-pieces__ligne--manquante { box-shadow: inset 3px 0 0 var(--attention-trait); }
.liste-pieces__ligne:first-child { border-radius: var(--rayon-champ) var(--rayon-champ) 0 0; }
.liste-pieces__ligne:last-child { border-radius: 0 0 var(--rayon-champ) var(--rayon-champ); }
.liste-pieces__libelle { min-width: 0; overflow-wrap: anywhere; }
.liste-pieces__rubrique { display: block; font-size: var(--t-xs); color: var(--encre-douce); }
.liste-pieces .etiquette { flex: none; margin: 0; }

.liste-fichiers { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); }
.liste-fichiers li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--e-3); padding: var(--e-2) 0; border-top: 1px solid var(--trait-2); }
.liste-fichiers li:first-child { border-top: 0; }
.liste-fichiers__nom { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Documents partagés : une ligne compacte par document ---------- */

.documents-partages { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait-2); }
.documents-partages .documents-partages__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); padding: var(--e-3) 0; border-bottom: 1px solid var(--trait-2); }
.documents-partages__texte { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--e-2); }
.documents-partages__texte strong { font-weight: 500; overflow-wrap: anywhere; }
.documents-partages__texte .texte-libre { flex-basis: 100%; }
.documents-partages__lien { flex: none; display: inline-flex; align-items: center; min-height: 36px; font-size: var(--t-sm); font-weight: 500; text-decoration: none; }
.documents-partages__lien:hover { text-decoration: underline; }

/* ---------- Liens client, côté cabinet (liste du dossier) ---------- */

.liens-client .tableau td { vertical-align: middle; white-space: nowrap; }
.liens-client .liens-client__action { text-align: right; }
.liens-client .tableau tr:has(+ .liens-client__reponses) td { border-bottom: 0; }
.liens-client .liens-client__reponses td { white-space: normal; padding-top: 0; background: var(--surface); }
.liens-client__creer .bouton { white-space: normal; text-align: center; padding-block: 6px; }
.liens-client .tableau tbody tr.liens-client__reponses:hover td { background: var(--surface); }
.reponses-client summary { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; cursor: pointer; font-size: var(--t-sm); font-weight: 500; color: var(--primaire); list-style: none; }
.reponses-client summary::-webkit-details-marker { display: none; }
.reponses-client summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--duree, 160ms) var(--courbe, ease); }
.reponses-client[open] summary::before { transform: rotate(45deg); }
.reponses-client summary .compteur { margin-left: 0; }
.reponses-client__liste { margin-top: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.lien-permanent__etat .etiquette { margin-right: 4px; }
.demandes-recues { gap: 0; }
.demande-recue { padding: var(--e-3) 0; border-top: 1px solid var(--trait-2); }
.demande-recue:first-child { border-top: 0; padding-top: 0; }
.demande-recue__entete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e-2); margin-bottom: 4px; }

/* ---------- Téléphone ---------- */

@media (max-width: 720px) {
    .public { padding: var(--e-3) var(--e-3) var(--e-5); }
    .public__carte { padding: var(--e-5) var(--e-4); }
    .public__marque { margin-top: 0; }
    /* 16 px dans les champs : pas de zoom automatique d'iOS au focus ; cibles de 44 px. */
    .public .champ input:not([type='checkbox']):not([type='radio']):not([type='file']),
    .public .champ select,
    .public .choix-recherche__saisie { height: 44px; font-size: 16px; }
    .public .champ textarea { font-size: 16px; }
    .public__actions .bouton { flex: 1 1 100%; min-height: 44px; }
    .etapes-client__navigation { flex-direction: column-reverse; align-items: stretch; }
    .etapes-client__navigation .bouton { width: 100%; min-height: 44px; }
    .etapes-client__navigation [data-etapes-target='suivant'],
    .etapes-client__navigation button[type='submit'] { margin-left: 0; }
    .documents-partages .documents-partages__ligne { flex-wrap: wrap; }
    .documents-partages__lien { min-height: 44px; }
    .liste-pieces__ligne { flex-wrap: wrap; }
}

/* Connexion, mot de passe oublié, réinitialisation : app.css (§5.1, lot DS-H). */

/* ---------- Pages d'erreur ---------- */

.erreur { max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); }
.erreur > h1, .erreur__message > p { margin: 0; }
.erreur__message { color: var(--encre-douce); font-size: var(--t-base); line-height: 1.6; }
.erreur .actions { margin-top: var(--e-2); }
.public__carte .erreur__message { margin-bottom: var(--e-4); }

/* ---------- Messages sortants (partiels envoi/, lot W2A) ---------- */

.message-sortant__envoi { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.message-sortant__a { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
.message-sortant__etiquette { font-weight: 600; color: var(--encre-douce); }
.message-sortant__envoi .fiche-transmission { margin: 0; }
.message-sortant__envoi .actions { margin-top: 0; }
.message-sortant--attente .message-sortant__titre { margin: 0 0 var(--e-3); }