/* ==========================================================================
   Itera Patrimoine · app.css
   Styles propres à index.html (entretien, accueil, Mes entretiens, Mon compte), chargés APRÈS
   assets/design.css. Tout le reste vient de design.css (charte commune : docs/DESIGN.md).

   1. Compléments des composants de la charte pour les écrans d'index.html
   2. Préconisations (rendu dans la page, édition sur place, anciennes préconisations en HTML)
   3. Compatibilité pendant la migration (radar.js, auth.js et leurs tests d'avant la refonte) :
      variables --navy…, boutons .btn, champs du Radar, sélecteur .view-switch, conteneurs
      .main-layout, #currentDossierBar, #dossierLayout, #sec15. À retirer quand les lots
      « connexion » et « Radar » auront fusionné (DESIGN.md § 17.1, lot 9).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Compléments pour les écrans d'index.html
   -------------------------------------------------------------------------- */

/* Bandeau d'enregistrement + en-tête du dossier : regroupés dans #currentDossierBar sans créer de boîte
   (le bandeau reste collant sous l'en-tête de la page). */
.zone-dossier { display: contents; }

/* Emplacement du message persistant (#alerteDossier) : ne crée ni boîte ni espace tant qu'il est vide */
.emplacement-alerte { display: contents; }

/* Grilles de l'accueil (DESIGN.md § 10) */
.grille-liens { --it-grille-min: 300px; }
.grille-a-traiter { --it-grille-min: 420px; }
.lien-pied { margin-top: var(--it-e-2); }

/* En-tête de carte dans une pile : l'écart vient de la pile */
.it-pile > .it-carte__tete { margin-bottom: 0; }
.texte-normal { font-weight: 400; }
.groupe-centre { justify-content: center; }
.groupe-serre { --it-groupe: var(--it-e-2); }
.legende-carte { float: left; width: 100%; margin-bottom: var(--it-e-2); }

/* Titre d'écran qui reçoit le focus : jamais d'anneau */
.it-app h1[tabindex="-1"]:focus { outline: none; }

/* Le minuteur ne bouge pas la mise en page quand les chiffres changent */
[data-minuteur] { font-variant-numeric: tabular-nums; }

/* Barre d'action : bouton sans libellé court sur ordinateur */
.it-barre__etat .it-roue { width: 20px; height: 20px; }
.it-barre__etat a.it-lien { color: inherit; }

/* Carte d'action de l'accueil : le texte secondaire reste lisible sur le rouge (6,57:1) */
.it-action-accueil--rec .it-texte-2, .it-action-accueil--rec p { color: var(--it-blanc); }
.it-action-accueil__icone .it-point-rec { width: 18px; height: 18px; background: var(--it-rec); }

/* Messages : un bouton à droite (aide de l'accueil) */
.it-message--avec-action { align-items: center; flex-wrap: wrap; }
.it-message--avec-action > .it-bouton { margin-left: auto; }

/* États « Chargement… » dans une carte */
.etat-chargement { display: flex; align-items: center; gap: var(--it-e-3); color: var(--it-texte-2); min-height: 48px; }

/* Lien d'évitement : vise le contenu de l'écran courant (géré en JavaScript) */
.it-evitement { z-index: 200; }

/* En-tête du dossier : le nom long se coupe proprement */
.it-dossier__nom { overflow-wrap: anywhere; }
@media (max-height: 700px) and (min-width: 1024px) {
  /* iPad paysage avec clavier : l'en-tête du dossier défile (il n'est jamais collant) */
  .it-dossier { position: static; }
}

/* Étape « sautée » (dossier rempli à la main) : rond en pointillés, numéro gris */
.it-etape--sautee .it-etape__rond { background: var(--it-blanc); color: var(--it-texte-2); }

/* Liste « Sujets à aborder » de l'étape 2 */
.liste-sujets .it-ligne { padding: 10px 0; }
.liste-sujets .it-ligne__texte { flex-basis: 200px; }

/* Enregistreur : barres de niveau pilotées par le micro (--h), sobres */
.it-niveau span { transition: height .12s linear; }
.it-enregistreur .consigne { max-width: 46ch; }

/* Rubriques du dossier */
.it-rubrique > summary:focus-visible { outline: 3px solid var(--it-marine); outline-offset: 2px; }
.it-rubrique__entete { min-width: 0; }
.it-rubrique__aide { margin-bottom: var(--it-e-4); color: var(--it-texte-2); font-size: var(--it-taille-s); }
.it-rubrique__pied { margin-top: var(--it-e-5); display: flex; flex-wrap: wrap; gap: var(--it-e-3); }
.it-champ__vide { display: none; }
.it-champ.est-vide .it-champ__vide { display: block; }
.it-champ.est-vide .it-saisie { border-style: dashed; background: var(--it-creme); }
/* Groupes de cases (origine, transmission) : tuiles sur deux colonnes dès 700 px */
.groupe-cases { display: grid; gap: var(--it-e-2); grid-template-columns: 1fr; }
@media (min-width: 700px) { .groupe-cases { grid-template-columns: 1fr 1fr; } }
.groupe-cases .it-case { min-height: 52px; padding: 11px 14px; align-items: center; }
.groupe-cases .it-case:has(input:checked), .groupe-cases .it-case.est-coche { padding: 10.5px 13.5px; }
/* Sujet de la rubrique 11 : titre + exemples au-dessus de la zone de texte */
.it-champ__exemples { font-size: var(--it-taille-s); color: var(--it-texte-2); }
/* Champs en lecture seule (dossier terminé) : on peut sélectionner le texte */
.it-saisie[readonly] { user-select: text; -webkit-user-select: text; }

/* Bilan du dossier : liens vers les rubriques incomplètes */
.bilan-manquants a { white-space: nowrap; }

/* Valeurs proposées par l'analyse */
.propositions-liste { list-style: none; display: grid; gap: var(--it-e-3); margin-top: var(--it-e-2); }
.propositions-liste li { display: grid; gap: 4px; padding-top: var(--it-e-3); border-top: 1px solid var(--it-info-trait); }
.propositions-liste .prop-val { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--it-texte); }
.propositions-liste .prop-actions, .prop-pied { display: flex; flex-wrap: wrap; gap: var(--it-e-2); margin-top: 4px; }

/* Liste d'avancement : étape en erreur */
.it-avancement .est-erreur { color: var(--it-rouge); font-weight: 700; }
.it-avancement .est-erreur .it-avancement__marque { border-color: var(--it-rouge); background: var(--it-rouge-fond); color: var(--it-rouge); }

/* Mes entretiens */
.liste-dossiers { list-style: none; display: grid; gap: var(--it-e-3); }
.liste-dossiers .it-ligne__titre { font-size: var(--it-taille-l); overflow-wrap: anywhere; }
.recherche-ligne { align-items: flex-end; --it-groupe: var(--it-e-4); }
.recherche-ligne .it-champ { flex: 1 1 380px; }
.filtres-entretiens legend { margin-bottom: var(--it-e-2); }

/* Mon compte */
.compte-identite { --it-groupe: var(--it-e-4); flex-wrap: wrap; }
.compte-identite > .compte-sortie { margin-left: auto; }
.compte-identite > div { min-width: 0; overflow-wrap: anywhere; }

/* Tiroirs (menu du téléphone, Mes notes) */
.it-tiroir__corps { padding: var(--it-e-4); display: grid; gap: var(--it-e-3); overflow: auto; }
.it-tiroir__titre { font-family: var(--it-police-titre); font-weight: 600; font-size: 23px; color: var(--it-marine); }
.it-tiroir__corps textarea { min-height: 50vh; }

/* Fenêtres : texte de la conversation, aperçu du rapport, guide */
.texte-conversation { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--it-taille-m); line-height: 1.65; }
/* overflow: clip (et non hidden) : découpe les coins sans ramener la hauteur minimale à 0 dans la grille bornée de la fenêtre */
.apercu-section { border: 1px solid var(--it-trait); border-radius: var(--it-rayon-bouton); overflow: clip; background: var(--it-blanc); }
.apercu-section__titre { margin: 0; border-radius: calc(var(--it-rayon-bouton) - 1px) calc(var(--it-rayon-bouton) - 1px) 0 0; padding: 10px 16px; background: var(--it-creme-2); border-bottom: 2px solid var(--it-or); font-size: var(--it-taille-m); font-weight: 700; color: var(--it-marine); }
.apercu-ligne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; padding: 10px 16px; border-top: 1px solid var(--it-trait); }
.apercu-section__titre + .apercu-ligne { border-top: 0; }
@media (min-width: 600px) { .apercu-ligne { grid-template-columns: 220px minmax(0, 1fr); } }
.apercu-cle { font-size: var(--it-taille-s); color: var(--it-texte-2); }
.apercu-valeur { white-space: pre-wrap; overflow-wrap: anywhere; }
.apercu-valeur.est-vide { color: var(--it-texte-2); font-style: normal; }
.guide-page { border: 0; padding: var(--it-e-6) 0; }
.guide-page .it-intro { max-width: 52ch; }

/* En-tête commun (entretiens, Prospection, Mon compte) sur écran tactile : le survol « collé » après un
   toucher (iPad) ne laisse pas croire qu'un deuxième lien est sélectionné ; seul l'écran courant est surligné. */
@media (hover: none) {
  .it-nav__lien:not([aria-current="page"]):hover { background: none; }
}
/* Très petit téléphone (moins de 360 px) : « Accueil » et « Menu » restent sur une ligne, sans leurs icônes */
@media (max-width: 359.98px) {
  .it-entete__contenu { gap: var(--it-e-2); }
  .it-nav__lien { padding: 0 10px; }
  .it-nav__lien .it-icone { display: none; }
}


/* --------------------------------------------------------------------------
   2. Préconisations (#recosContainer) : rendu dans la page
   Le rendu n'emploie que des balises gardées par assainirHtml() (div, p, span, strong, ul, li, h2 à h4,
   section, article) : après « Modifier le texte », la mise en forme est conservée. Les icônes sont
   dessinées en CSS (classe reco-icone), un <svg> n'y survivrait pas.
   -------------------------------------------------------------------------- */
#recosContainer { display: grid; gap: var(--it-e-6); }
#recosContainer:empty { display: none; }
.reco-groupe { display: grid; gap: var(--it-e-3); }
.reco-groupe + .reco-groupe { margin-top: var(--it-e-3); }
.reco-resume { font-family: var(--it-police-titre); font-size: var(--it-taille-l); line-height: 1.6; }
.reco-icone { width: 44px; height: 44px; flex: none; border-radius: var(--it-rayon-bouton); display: inline-grid; place-content: center; }
.reco-icone::before {
  content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--reco-icone) center / contain no-repeat; mask: var(--reco-icone) center / contain no-repeat;
}
.reco-icone--alerte { background: var(--it-rouge-fond); color: var(--it-rouge);
  --reco-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4 2.7 17.4a2 2 0 0 0 1.7 3h15.2a2 2 0 0 0 1.7-3L13.7 4a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E"); }
.reco-icone--ok { background: var(--it-vert-fond); color: var(--it-vert);
  --reco-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.9 2.9L16.2 9.6'/%3E%3C/svg%3E"); }
.reco-sujet .it-citation--simple { margin: 0; }
/* Édition sur place : cadre en pointillés marine, fond blanc */
#recosContainer.est-edition { outline: none; }
#recosContainer.est-edition :is(.reco-resume, .it-puces, .reco-sujet, h4, p) { outline: 2px dashed var(--it-marine); outline-offset: 4px; background: var(--it-blanc); border-radius: 6px; }
#recosContainer.est-edition:focus-visible { outline: 3px solid var(--it-marine); outline-offset: 6px; border-radius: var(--it-rayon-carte); }

/* Anciennes préconisations enregistrées en HTML (avant la refonte) : lisibles avec les jetons de la charte */
#recosContainer .reco-item { border-left: 4px solid var(--it-or); padding: var(--it-e-3) var(--it-e-4); background: var(--it-blanc); border-radius: 0 var(--it-rayon-bouton) var(--it-rayon-bouton) 0; line-height: 1.6; }
#recosContainer .reco-item strong { display: block; color: var(--it-marine); margin-bottom: 4px; }
#recosContainer .tag { display: block; padding: 8px 12px; border-radius: var(--it-rayon-s); margin: 0 0 6px; font-size: var(--it-taille-m); line-height: 1.45; }
#recosContainer .tag-alert { background: var(--it-rouge-fond); color: var(--it-rouge); border: 1px solid var(--it-rouge-trait); }
#recosContainer .tag-ok { background: var(--it-vert-fond); color: var(--it-vert); border: 1px solid var(--it-vert-trait); }


/* --------------------------------------------------------------------------
   3. Compatibilité pendant la migration (radar.js et auth.js d'avant la refonte)
   -------------------------------------------------------------------------- */
:root {
  /* Variables lues par radar.css et auth.css : alignées sur les jetons de la charte */
  --navy: var(--it-marine); --navy-light: var(--it-marine-2);
  --gold: var(--it-or); --gold-light: #ECDC7A; --gold-dark: #8a7a0f;
  --cream: var(--it-creme); --cream-dark: var(--it-creme-2);
  --text: var(--it-texte); --text-muted: var(--it-texte-2);
  --border: #ddd8cc; --success: var(--it-vert); --danger: var(--it-rouge);
  --white: #ffffff; --radius: 8px;
}
/* Ancienne remise à zéro des marges, sans spécificité : les règles de radar.css et auth.css l'emportent */
:where(#radar, #loginOverlay, #pwdOverlay) :where(*) { margin: 0; padding: 0; }
:where(#radar, #pwdOverlay) :where(input[type="text"], input[type="number"], input[type="search"], input[type="date"], textarea, select) {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fcfbf8;
  font-family: var(--it-police); font-size: 16px; color: var(--it-texte); resize: none;
}
:where(#radar, #pwdOverlay) :where(input, textarea, select):focus { outline: none; border-color: var(--it-marine); box-shadow: 0 0 0 3px rgba(30, 37, 79, .15); background: #fff; }

/* Boutons .btn de radar.js et auth.js */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; min-height: 44px;
  border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  font-family: var(--it-police); font-size: 0.95rem; font-weight: 600; line-height: 1.25;
  transition: background-color .15s, border-color .15s; touch-action: manipulation;
}
.btn-primary { background: var(--it-marine); color: #fff; border-color: var(--it-marine); }
.btn-primary:hover { background: var(--it-marine-2); }
.btn-gold { background: var(--it-or); color: var(--it-marine); border-color: var(--it-or); }
.btn-gold:hover { background: var(--it-or-2); }
.btn-outline { background: #fff; color: var(--it-marine); border-color: var(--it-marine); }
.btn-outline:hover { background: var(--it-marine-fond); }
.btn-danger { background: var(--it-rouge); color: #fff; border-color: var(--it-rouge); }
.btn-danger:hover { background: #7F160F; }
.btn:disabled { opacity: .55; cursor: progress; }
.btn:focus-visible { outline: 3px solid var(--it-marine); outline-offset: 2px; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--it-marine-trait); border-top-color: var(--it-marine); border-radius: 50%; animation: it-tourne .8s linear infinite; margin-right: 6px; display: inline-block; vertical-align: middle; }
.visuellement-masque { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Sélecteur de vue d'avant la refonte (.view-switch, visé par radar.js et ses tests) : il n'existe plus
   que sur la carte « Prospection » de l'accueil, qui garde l'apparence d'une carte-lien. */
.it-app .view-switch { display: contents; }
.it-app .view-switch button.it-carte-lien {
  display: flex; align-items: center; gap: var(--it-e-4); width: 100%; min-height: 0; margin: 0;
  padding: var(--it-e-5); background: var(--it-blanc); color: var(--it-texte); text-align: left;
  border: 1px solid var(--it-trait); border-radius: var(--it-rayon-carte); box-shadow: var(--it-ombre-1);
  font: inherit; font-weight: 400; letter-spacing: normal; flex: initial; order: initial; white-space: normal;
}
@media (min-width: 600px) { .it-app .view-switch button.it-carte-lien { padding: var(--it-e-6); } }
.it-app .view-switch button.it-carte-lien:hover { border-color: var(--it-marine); box-shadow: var(--it-ombre-2); }
.it-app .view-switch button.it-carte-lien:focus-visible { outline: 3px solid var(--it-marine); outline-offset: 3px; }

/* Prospection : le module garde sa marge haute sous l'en-tête et le bandeau */
#radar[data-visible="1"] { scroll-margin-top: var(--it-h-entete); }

/* Barre d'action : écart resserré entre le point, le minuteur et la phrase (« 18:42 Enregistrement en cours » sur une ligne à 820 px) */
.it-barre__etat { column-gap: 6px; }
/* Annonce brève : largeur de son texte (sinon, avec left: 50 %, elle se limitait à la moitié de l'écran du téléphone) */
.it-annonce { width: max-content; }
/* Rubrique ouverte par un lien : son titre ne passe jamais sous l'en-tête ni sous le bandeau d'enregistrement
   (--haut-bandeau : hauteur réelle du bandeau, mesurée par index.html ; il passe sur deux lignes sur téléphone) */
body:has(#bandeauRec:not([hidden])) .it-rubrique { scroll-margin-top: calc(var(--it-h-entete) + var(--haut-bandeau, 64px) + var(--it-e-4)); }


/* --------------------------------------------------------------------------
   4. Épuration (une information à un seul endroit, une phrase d'aide par écran : DESIGN.md § 2)
   -------------------------------------------------------------------------- */
/* L'état de sauvegarde ou d'enregistrement est dit par la barre du bas (ou le bandeau) : dans l'en-tête du dossier,
   il n'est plus affiché (gardé pour les lecteurs d'écran et les tests). */
.it-dossier__etat { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0; }
/* Champ vide après le remplissage : bord en pointillés seulement (la mention est lue par les lecteurs d'écran) */
.it-champ.est-vide .it-champ__vide { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
/* Lignes : titre et état sur la même ligne, puis une seule ligne de détail */
.it-ligne__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--it-e-3); }
/* « À traiter » de l'accueil : une seule carte, les dossiers puis les rappels, sans titre de carte */
.a-traiter > div:empty { display: none; }
.a-traiter > div + div:not(:empty) { border-top: 1px solid var(--it-trait); }
.a-traiter #accueilEntretiens:empty + #accueilRappels { border-top: 0; }
/* Bilan du dossier : une phrase, sans cadre dans la carte */
.bilan-manquants { display: flex; gap: var(--it-e-3); align-items: flex-start; color: var(--it-ambre); font-weight: 600; }
.bilan-manquants > .it-icone { flex: none; margin-top: 2px; }
.bilan-manquants a { white-space: normal; }
/* Mes entretiens : texte | boutons (l'avancement en pourcentage n'est plus répété sur la ligne) */
@media (min-width: 600px) { .it-ligne-dossier { grid-template-columns: minmax(0, 1fr) auto; } }
/* Préconisations : « Ce que vous pouvez proposer » souligné d'un filet or, sans encadré dans la carte */
.reco-sujet .it-citation--simple { background: none; padding: 0 0 0 var(--it-e-4); border-radius: 0; }
/* Annonce brève : juste au-dessus de la barre du bas (hauteur réelle mesurée par showToast), jamais sur un bouton ;
   la page gagne une marge le temps de l'annonce, pour que la fin du contenu reste lisible au-dessus. */
.it-annonce { bottom: calc(var(--it-annonce-bas, 16px) + env(safe-area-inset-bottom, 0px)); }
body.annonce-visible main.it-page::after, body.annonce-visible #radar::after { content: ""; display: block; height: 88px; }
/* Message avec seulement « Fermer » : le bouton à droite de la phrase */
.it-message--avec-action > .it-bouton--discret { margin-left: auto; }
/* Téléphone : l'état n'étant plus dans l'en-tête du dossier, le nom et « Notes » tiennent sur la même ligne */
@media (max-width: 599.98px) {
  .it-dossier__ligne { flex-wrap: nowrap; }
  .it-dossier__nom { flex: 1 1 auto; min-width: 0; }
}