/* Feuille de style du runtime — **une seule**, pour tous les thèmes.
 *
 * Tout ce qui varie d'une marque à l'autre passe par les jetons `--f6-*`, servis par
 * `GET /api/v1/themes/{id}/theme.css`. C'est ce qui remplace les 27 feuilles de thème de
 * form6, dont plusieurs étaient des copies divergentes les unes des autres
 * (`theme_concerto`, `_2`, `_ia`, `_ia_v2`, `_ia_v2.old`, `_v2_a`, `_v2_b`).
 *
 * Les valeurs de repli ci-dessous ne sont pas un thème : elles rendent le runtime
 * présentable si aucun thème n'est chargé, ce qui arrive en développement et dans les
 * tests. */

/* `border-box` partout dans le runtime. Sans lui, la marge intérieure s'ajoute à la
 * largeur : un élément à 100 % dépassait de sa colonne, et l'étape gagnait une barre de
 * défilement horizontale de quelques pixels — assez pour qu'on ne comprenne pas d'où elle
 * vient, jamais assez pour qu'on la cherche.
 *
 * Portée à l'hôte et à ses descendants, pas à la page : le runtime s'insère dans le site
 * d'un intégrateur, et n'a pas à lui imposer son modèle de boîte. */
f6-chatbot, f6-chatbot *, f6-chatbot *::before, f6-chatbot *::after,
.f6-preview, .f6-preview * {
  box-sizing: border-box;
}

/* `.f6-preview` reçoit les mêmes jetons que le runtime.
 *
 * C'est ce qui permet à l'aperçu de l'éditeur de montrer **ce que l'assuré verra**, en
 * lisant cette feuille-ci plutôt qu'une copie. L'éditeur affichait des boutons verts là
 * où le parcours rend des tuiles grises à icône : l'auteur réglait donc une apparence
 * qu'il n'a jamais vue, et découvrait la vraie à l'aperçu — quand il y pensait. */
f6-chatbot, .f6-preview {
  --f6-color-primary: #009e89;
  --f6-color-primary-strong: #007e6e;
  --f6-color-primary-subtle: #d7f2ee;
  --f6-color-text: #283c50;
  --f6-color-text-strong: #434550;
  --f6-color-text-muted: #707070;
  --f6-color-surface: #ffffff;
  --f6-color-surface-sunken: #f5f7f9;
  --f6-color-surface-muted: #cccccc;
  --f6-color-border: #e6ebf0;
  --f6-color-error: #ff4d4f;
  --f6-color-on-primary: #ffffff;
  --f6-font-title: system-ui, sans-serif;
  --f6-font-body: system-ui, sans-serif;
  --f6-font-size-h1: 24px;
  --f6-font-size-body: 16px;
  --f6-font-size-h2: 20px;
  --f6-font-size-small: 14px;
  --f6-space-1: 4px;
  --f6-space-2: 8px;
  --f6-space-4: 16px;
  --f6-space-6: 24px;
  --f6-space-8: 32px;
  --f6-radius-default: 5px;
  --f6-radius-pill: 999px;
  --f6-layout-max-width: 480px;

  display: block;
  font-family: var(--f6-font-body);
  font-size: var(--f6-font-size-body);
  color: var(--f6-color-text);
  background: var(--f6-color-surface);
}

/* La coquille occupe **exactement** la hauteur disponible, et c'est ce qui garde les
 * actions au bas de l'écran. En `min-height`, un contenu plus long que l'écran poussait
 * la barre d'action vers le bas et laissait des champs *sous* elle : sur un écran de
 * téléphone, les dernières questions d'une étape devenaient invisibles, et le bouton
 * « Suivant » paraissait être la fin de l'étape alors qu'il en restait la moitié. */
.f6-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: var(--f6-layout-max-width);
  margin: 0 auto;
  overflow: hidden;
}

/* Le contenu défile, la barre d'action ne bouge pas. `min-height: 0` est obligatoire :
 * sans lui, un élément flex refuse de rétrécir sous la taille de son contenu, et le
 * défilement n'a jamais lieu. */
.f6-step {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--f6-space-4);
}

.f6-transcript { flex: 0 1 auto; min-height: 0; }
.f6-actions { flex: 0 0 auto; }

/* En mode formulaire, le conteneur de défilement est **transparent** : `display:
 * contents` rend ses enfants directement enfants de la coquille, et la disposition est
 * exactement celle d'avant — une étape entière s'affiche d'un coup, il n'y a rien à
 * suivre. */
.f6-scroll { display: contents; }

/* En conversation, il devient le **seul** conteneur qui défile. Il y en avait deux,
 * empilés — la transcription et l'étape — chacun défilant dans son coin : amener une
 * bulle au bord de la transcription ne déplaçait donc pas la vue, et la question qui
 * venait d'apparaître restait sous la barre d'action. */
.f6-mode-chat .f6-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* `flex: 0 0 auto` pour la transcription, `1 0 auto` pour l'étape : la conversation
 * garde sa hauteur, et c'est la zone de réponse qui absorbe la place restante. Les
 * pastilles se posent ainsi contre la barre d'action quand l'échange est court, sans
 * cesser de descendre quand il s'allonge. */
.f6-mode-chat .f6-scroll > .f6-transcript { flex: 0 0 auto; overflow: visible; }
.f6-mode-chat .f6-scroll > .f6-step { flex: 1 0 auto; overflow: visible; }

.f6-step__title {
  margin: 0 0 var(--f6-space-6);
  font-family: var(--f6-font-title);
  font-size: var(--f6-font-size-h1);
}

.f6-step__errors {
  margin-top: var(--f6-space-4);
  padding: var(--f6-space-2) var(--f6-space-4);
  border-left: 3px solid var(--f6-color-error);
  background: color-mix(in srgb, var(--f6-color-error) 8%, transparent);
  color: var(--f6-color-error);
}

.f6-errors { margin: 0; padding-left: var(--f6-space-4); }

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

.f6-actions {
  display: flex;
  gap: var(--f6-space-2);
  align-items: center;
  padding: var(--f6-space-4);
  border-top: 1px solid var(--f6-color-border);
  position: sticky;
  bottom: 0;
  background: var(--f6-color-surface);
}

.f6-button {
  flex: 1;
  min-height: 44px; /* cible tactile : la déclaration se remplit au téléphone */
  padding: 0 var(--f6-space-4);
  border-radius: var(--f6-radius-default);
  border: 1px solid var(--f6-color-primary);
  background: var(--f6-color-surface);
  color: var(--f6-color-primary);
  font: inherit;
  cursor: pointer;
}

.f6-button--primary {
  background: var(--f6-color-primary);
  color: var(--f6-color-on-primary);
}

.f6-button--ghost { border-color: var(--f6-color-border); color: var(--f6-color-text-muted); }
.f6-button--icon { flex: 0 0 auto; min-width: 44px; }
.f6-button:disabled { opacity: .45; cursor: not-allowed; }

/* --- Mode conversationnel ---------------------------------------------- */

.f6-transcript {
  display: flex;
  flex-direction: column;
  gap: var(--f6-space-2);
  padding: var(--f6-space-4);
  overflow-y: auto;
}

/* Les bulles, relevées au composant sur les maquettes.
 *
 * Le coin **carré du côté de l'interlocuteur** est ce qui donne à l'échange son sens de
 * lecture : Julia parle depuis la gauche, l'assuré répond depuis la droite. Quatre coins
 * arrondis rendraient les deux bulles interchangeables. */
.f6-chat__bubble {
  max-width: 88%;
  padding: 10px 15px;
  font-size: var(--f6-font-size-body);
  line-height: 1.3;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, .15));
}

.f6-chat__bubble--question {
  align-self: stretch;
  max-width: 100%;
  background: var(--f6-color-primary);
  color: var(--f6-color-on-primary);
  border-radius: 0 8px 8px 8px;
}

.f6-chat__bubble--answer {
  align-self: flex-end;
  background: var(--f6-color-surface-sunken);
  color: var(--f6-color-text-strong, var(--f6-color-text));
  border-radius: 8px 0 8px 8px;
}

/* La seconde ligne d'une question — la `description` du composant. La maquette s'en sert
 * pour cadrer la réponse attendue (« Répondez simplement “oui” ou “non” »), et c'est bien
 * une précision, pas une seconde question : elle se lit plus petite. */
.f6-chat__bubble-detail {
  display: block;
  margin-top: var(--f6-space-1);
  font-size: var(--f6-font-size-small);
  opacity: .9;
}

/* L'avatar et son aura — l'aura tourne doucement, ce qui signale « Julia écoute » sans
 * qu'aucun texte n'ait à le dire. Immobile si l'utilisateur a demandé moins d'animation. */
/* Le voile clair derrière l'en-tête et l'avatar : il décolle la conversation du haut de
 * l'écran sans y poser de trait. La maquette l'appelle « FondgrisBackgroundBlur ». */
.f6-chat-active .f6-transcript {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--f6-color-border) 37%, transparent) 0,
    transparent 148px
  );
}

.f6-chat__avatar {
  align-self: center;
  display: grid;
  place-items: center;
  width: 85px;
  height: 85px;
  margin-bottom: var(--f6-space-2);
}
.f6-chat__avatar::before {
  content: '';
  grid-area: 1 / 1;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle,
      color-mix(in srgb, var(--f6-color-primary) 55%, transparent) 0 1px,
      transparent 1px 4px
    );
  animation: f6-aura 12s linear infinite;
}
/* La photo est **au-dessus** de l'aura, et le `z-index` est explicite : les deux occupent
 * la même cellule de grille, si bien que leur ordre de peinture dépendrait sinon de leur
 * ordre dans le DOM — et un `::before` est engendré *avant* le contenu. Une règle de
 * thème qui poserait une position sur l'aura suffirait à la faire passer devant, et le
 * portrait disparaîtrait sans qu'aucune erreur ne le signale. */
.f6-chat__avatar::before { z-index: 0; }
.f6-chat__avatar img {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: 53px;
  height: 53px;
  border-radius: 50%;
  object-fit: cover;
}
@keyframes f6-aura { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .f6-chat__avatar::before { animation: none; }
}

/* --- Le bandeau de marque et de dossier ----------------------------------
 *
 * Structure ici, habillage dans le thème. Il apparaît sur **tous** les écrans et dans
 * les deux modes : c'est ce que montre la maquette, et c'est aussi ce qui permet à
 * l'assuré de vérifier d'un coup d'œil que le dossier ouvert est bien le sien. */
.f6-brand-header { flex: 0 0 auto; }
.f6-brand-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--f6-space-4);
  padding: var(--f6-space-2) var(--f6-space-4);
}
.f6-brand-header__logo { display: block; height: 28px; width: auto; }
.f6-brand-header__help { color: var(--f6-color-primary); font-size: var(--f6-font-size-small); }
.f6-contract-banner__field { display: block; }
.f6-contract-banner__label::after { content: " : "; }

/* L'en-tête de l'entretien : marque à gauche, nom de l'assistante au centre, menu à
 * droite. Il reste en place pendant que la conversation défile. */
.f6-chat-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--f6-space-4);
  padding: 10px 20px;
  background: var(--f6-color-surface);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.f6-chat-header__name {
  margin: 0;
  font-family: var(--f6-font-title);
  font-weight: var(--f6-font-weight-title, 700);
  font-size: var(--f6-font-size-h2, 20px);
  color: var(--f6-color-primary);
}
.f6-chat-header__brand { height: 25px; }
.f6-chat-header__menu { display: inline-flex; color: var(--f6-color-primary); }

/* Le menu de l'en-tête — le `⋮` qui existait et ne faisait rien.
 *
 * Il porte le guide des autorisations, atteignable **de partout** : `autorisations` est
 * douze étapes en arrière, et revenir en arrière dépile le journal. Consulter un état du
 * navigateur n'a pas à passer par le parcours. */
.f6-header-menu { position: relative; margin-left: auto; }
.f6-header-menu__button {
  width: 24px; height: 24px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: inherit;
}
.f6-header-menu__list {
  position: absolute; right: 0; top: 100%; z-index: 30;
  min-width: 12rem;
  padding: var(--f6-space-1);
  background: var(--f6-color-surface);
  border: 1px solid var(--f6-color-border);
  border-radius: var(--f6-radius-default);
  box-shadow: 0 8px 24px rgba(40, 60, 80, .25);
}
.f6-header-menu__list button {
  display: block; width: 100%;
  padding: var(--f6-space-2);
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.f6-header-menu__list button:hover { background: var(--f6-color-surface-sunken); }

/* En mode conversationnel, seule la question courante est affichée : le reste de l'étape
 * est déjà dans la transcription. */
.f6-mode-chat .f6-step { padding-top: 0; }
.f6-mode-bottom .f6-step__body {
  position: sticky;
  bottom: 60px;
  background: var(--f6-color-surface);
}

/* --- Récapitulatif ------------------------------------------------------ */

.f6-recap__group { margin-bottom: var(--f6-space-6); }
.f6-recap__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--f6-font-size-body);
  border-bottom: 1px solid var(--f6-color-border);
  padding-bottom: var(--f6-space-1);
}
.f6-recap__list { margin: 0; }
/* Le libellé et la valeur se **partagent** la ligne, et passent l'un sous l'autre quand
   ils n'y tiennent pas. Sans le retour à la ligne, une adresse ou un texte libre poussait
   le récapitulatif hors de l'écran ; sans les bases souples, c'est le mot lui-même qui se
   coupait — « oui » s'affichait « o / ui ». */
.f6-recap__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--f6-space-4);
  padding: var(--f6-space-1) 0;
}
.f6-recap__label { flex: 1 1 55%; color: var(--f6-color-text-muted); min-width: 0; }
.f6-recap__value {
  flex: 1 1 35%;
  margin: 0; font-weight: 600; text-align: right;
  min-width: 0; overflow-wrap: break-word;
}
.f6-recap__edit {
  border: 0; background: none; color: var(--f6-color-primary);
  cursor: pointer; font: inherit;
}
.f6-recap__pending {
  padding: var(--f6-space-2) var(--f6-space-4);
  background: var(--f6-color-primary-subtle);
  border-radius: var(--f6-radius-default);
}

/* --- Emplacements d'extension ------------------------------------------ */

.f6-slot { display: flex; align-items: center; gap: var(--f6-space-2); }

.f6-status {
  padding: var(--f6-space-2) var(--f6-space-4);
  font-size: var(--f6-font-size-small);
  color: var(--f6-color-text-muted);
  text-align: center;
}

.f6-done { padding: var(--f6-space-8) 0; text-align: center; }

/* --- Ajustements de form.io -------------------------------------------- *
 * form.io produit du balisage Bootstrap. On n'en reprend que ce qu'il faut pour que ses
 * champs adoptent les jetons du thème — sans quoi le formulaire aurait l'air d'un autre
 * produit que le reste de la page. */

f6-chatbot .formio-component { margin-bottom: var(--f6-space-4); }
f6-chatbot .form-control,
f6-chatbot input[type="text"],
f6-chatbot input[type="email"],
f6-chatbot input[type="tel"],
f6-chatbot input[type="number"],
f6-chatbot textarea,
f6-chatbot select {
  width: 100%;
  min-height: 44px;
  padding: var(--f6-space-2) var(--f6-space-4);
  border: 1px solid var(--f6-color-border);
  border-radius: var(--f6-radius-default);
  font: inherit;
  color: inherit;
  background: var(--f6-color-surface);
}

f6-chatbot .form-control:focus-visible,
f6-chatbot .f6-radio-cards__option:focus-visible {
  outline: 2px solid var(--f6-color-primary);
  outline-offset: 2px;
}

f6-chatbot .col-form-label,
f6-chatbot label { display: block; margin-bottom: var(--f6-space-1); font-weight: 600; }
/* form.io ajoute des précisions **destinées aux lecteurs d'écran** dans un `sr-only` —
 * une classe de Bootstrap, que le runtime ne charge pas. Elles s'affichaient donc en
 * clair : « Montant estimé des dommages (€) , numeric only, » sous les yeux d'un assuré,
 * en anglais et en jargon.
 *
 * On les masque à l'œil sans les retirer de l'arbre d'accessibilité : elles sont utiles
 * là où elles étaient prévues. `display: none` les supprimerait pour tout le monde.
 * (Bootstrap 5 a renommé la classe : on couvre les deux.) */
f6-chatbot .sr-only,
f6-chatbot .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Choix natifs (radio, cases à cocher) : form.io les rend au balisage Bootstrap, dont le
 * runtime n'a que les classes. Sans ces règles, l'option se colle à sa case, la cible
 * tactile fait la taille du petit rond, et l'écran mélange deux vocabulaires visuels —
 * des tuiles généreuses ici, des radios minuscules trois lignes plus bas. */
f6-chatbot .form-check,
f6-chatbot .form-radio .form-check { position: relative; }
f6-chatbot .form-check-label {
  display: flex;
  align-items: center;
  gap: var(--f6-space-2);
  min-height: 40px;         /* cible tactile : la déclaration se remplit au téléphone */
  font-weight: 400;
  cursor: pointer;
}
f6-chatbot .form-check-input {
  width: 20px; height: 20px;
  margin: 0;
  accent-color: var(--f6-color-primary);
  flex: 0 0 auto;
}

f6-chatbot .formio-errors { color: var(--f6-color-error); font-size: var(--f6-font-size-small); }
f6-chatbot .field-required::after { content: " *"; color: var(--f6-color-error); }
/* Un libellé masqué n'a pas d'astérisque à porter : form.io rend malgré tout son
 * `<label class="field-required control-label--hidden">`, et le marqueur flottait seul
 * au-dessus du champ — à côté d'un libellé que personne ne voit. */
f6-chatbot .control-label--hidden::after { content: none; }

/* Le bouton d'envoi de form.io ferait doublon avec la barre d'actions du runtime. */
f6-chatbot .formio-component-submit { display: none; }

/* Repli des tuiles quand aucun thème n'est chargé (développement, tests). */
.f6-radio-cards {
  display: grid;
  grid-template-columns: repeat(var(--f6-cards-columns, 1), 1fr);
  gap: var(--f6-space-2);
}
.f6-radio-cards__option {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--f6-space-2); min-height: 84px; padding: var(--f6-space-4);
  background: var(--f6-color-surface-sunken); border: 1px solid transparent;
  border-radius: var(--f6-radius-default); cursor: pointer; font: inherit; color: inherit;
}
.f6-radio-cards__option[aria-checked="true"] {
  background: var(--f6-color-primary-subtle);
  border-color: var(--f6-color-primary);
}
.f6-radio-cards__icon { width: 28px; height: 28px; color: var(--f6-color-primary); }

/* La **structure** des variantes vit ici, leur habillage dans le thème : une autre
 * marque doit pouvoir redessiner la carte sans réapprendre où sont les morceaux.
 *
 * Ce qu'une option ne porte pas ne s'affiche pas — le rendu ne pose ni portrait, ni
 * étiquette, ni invite qu'on ne lui a pas donnés. Les tuiles ordinaires, qui n'en portent
 * aucun, sont donc exactement ce qu'elles étaient. */
.f6-radio-cards__option[data-variant="card"] { position: relative; }
.f6-radio-cards__badge {
  position: absolute; top: var(--f6-space-2); right: var(--f6-space-2);
  font-size: var(--f6-font-size-small);
}
.f6-radio-cards__portrait {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
}
.f6-radio-cards__heading { font-weight: 700; }
.f6-radio-cards__body { font-size: var(--f6-font-size-small); }
.f6-radio-cards__hint { display: inline-flex; align-items: center; gap: 4px; }
.f6-radio-cards__note { font-style: italic; font-weight: 700; }

/* L'échappatoire a le poids d'un lien — mais reste un `role="radio"` : un `<a>` sans
 * cible serait un lien qui ne mène nulle part, et un lecteur d'écran l'annoncerait
 * comme tel. */
.f6-radio-cards__option[data-variant="link"] {
  min-height: 0; padding: var(--f6-space-2); background: none; border: none;
  text-decoration: underline;
}

/* Le séparateur n'est pas une option : il est hors de la grille et sans surface. */
.f6-radio-cards__separator { text-align: center; }

.f6-progress-steps {
  display: flex; align-items: center; gap: var(--f6-space-2);
  padding: var(--f6-space-2) 0;
}
.f6-progress-steps__dot {
  width: 8px; height: 8px; border-radius: var(--f6-radius-pill);
  background: var(--f6-color-surface); border: 1px solid var(--f6-color-primary);
}
.f6-progress-steps__dot--done,
.f6-progress-steps__dot--current { background: var(--f6-color-primary); }
.f6-progress-steps__label {
  margin-left: auto; font-size: var(--f6-font-size-small);
  color: var(--f6-color-primary-strong);
}

/* --- Images d'étape ------------------------------------------------------
 *
 * Le rapport d'aspect est réservé avant chargement : sans lui, l'arrivée de l'image
 * pousse la question vers le bas au moment précis où l'on s'apprête à y répondre. */
.f6-image { margin: 0 0 var(--f6-space-4); }
.f6-image__img {
  display: block; width: 100%; height: auto;
  border-radius: var(--f6-radius-default);
  object-fit: cover; background: var(--f6-color-surface-sunken);
}
.f6-image__caption {
  margin-top: var(--f6-space-1);
  font-size: var(--f6-font-size-small);
  color: var(--f6-color-text-muted);
}
.f6-image--banner { margin-inline: calc(-1 * var(--f6-space-4)); }
.f6-image--banner .f6-image__img { border-radius: 0; }
.f6-image--background {
  position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none;
}
.f6-image--background .f6-image__img { height: 100%; border-radius: 0; }

/* --- Contenu rédigé ------------------------------------------------------
 *
 * Les quelques classes que les blocs `content` d'un parcours peuvent employer. Elles sont
 * ici et non dans le thème parce qu'elles sont **structurelles** : une puce reste une
 * puce d'une marque à l'autre. Ce qui change — la couleur de la pastille, l'icône —
 * descend dans `theme.css`. */
.f6-bullets, .f6-checklist, .f6-contact { margin: 0 0 var(--f6-space-4); padding-left: var(--f6-space-6); }
.f6-bullets li, .f6-checklist li, .f6-contact li { margin-bottom: var(--f6-space-2); }
.f6-checklist { list-style: none; padding-left: 0; }
.f6-note { color: var(--f6-color-text-muted); }
.f6-note--clock { text-align: center; }
.f6-address {
  text-align: center;
  font-size: var(--f6-font-size-h2);
  font-weight: 600;
}

/* --- Consentement --------------------------------------------------------
 *
 * Structure ici, habillage de marque dans le thème — panneau vert pâle et case ronde,
 * qui n'appartiennent qu'à IMH.
 *
 * Le texte engagé est **toujours dans le DOM**, replié ou non : `<details>` reste lisible
 * par un lecteur d'écran et se retrouve par la recherche de la page, ce qu'un texte
 * inséré au clic ne permet pas. */
.f6-consent { display: flex; flex-direction: column; gap: var(--f6-space-2); }
.f6-consent__head {
  display: flex; align-items: center; gap: var(--f6-space-2);
  margin: 0; font-weight: 600; cursor: pointer;
}
.f6-consent__box { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--f6-color-primary); }
.f6-consent__title { font-size: var(--f6-font-size-small); }
.f6-consent__statement { margin: 0; }
.f6-consent__panel { font-style: italic; font-size: var(--f6-font-size-small); }
.f6-consent__why > summary {
  cursor: pointer; color: var(--f6-color-primary);
  font-size: var(--f6-font-size-small);
}
.f6-consent__why-text { margin-top: var(--f6-space-2); font-size: var(--f6-font-size-small); }
.f6-consent__link { display: block; margin-top: var(--f6-space-2); color: var(--f6-color-primary); }

/* --- Autorisations -------------------------------------------------------
 *
 * Un refus est un état dont on sort, pas une impasse : le bloc d'explication a donc le
 * même poids visuel que la demande elle-même, et non celui d'un message d'erreur. */
.f6-permissions {
  padding: var(--f6-space-4);
  background: var(--f6-color-surface);
  border: 1px solid var(--f6-color-border);
  border-radius: var(--f6-radius-default);
}
.f6-permissions__title {
  margin: 0 0 var(--f6-space-4);
  font-family: var(--f6-font-title);
  font-size: var(--f6-font-size-h1);
  color: var(--f6-color-primary-strong);
}
.f6-permissions__list { list-style: none; margin: 0 0 var(--f6-space-4); padding: 0; }
.f6-permissions__item {
  display: flex; align-items: center; gap: var(--f6-space-2);
  padding: var(--f6-space-2) 0;
  border-bottom: 1px solid var(--f6-color-border);
}
.f6-permissions__item:last-child { border-bottom: 0; }
.f6-permissions__icon { font-size: 20px; }
.f6-permissions__label { flex: 1; }
.f6-permissions__label small {
  display: block; color: var(--f6-color-text-muted);
  font-size: var(--f6-font-size-small);
}
/* --- L'état de chaque ligne, tracé plutôt qu'écrit -------------------------
 *
 * Un mot d'état en bout de ligne — « accordée », « refusée » — ne se lit pas d'un coup
 * d'œil, et c'est pourtant tout ce qu'on regarde sur cet écran. La **structure** et les
 * **états** vivent ici ; leurs couleurs sont du thème.
 *
 * L'anneau d'attente et la coche tracée ne sont pas de l'ornement : ils distinguent
 * « la demande est partie » de « rien ne se passe », et « ça vient d'être accordé » de
 * « c'était déjà accordé ». C'était le seul retour immédiat qu'apportait le widget
 * d'origine. */
.f6-permissions__mark { display: inline-flex; }
.f6-permissions__item--unsupported { opacity: .55; }
.f6-permissions__why {
  display: block; margin-top: var(--f6-space-1); padding: 0;
  background: none; border: 0; font: inherit; font-size: var(--f6-font-size-small);
  color: inherit; text-decoration: underline; cursor: pointer;
}
.f6-permissions__ask { flex: none; }

.f6-permissions__spinner { animation: f6-permissions-spin 900ms linear infinite; }
@keyframes f6-permissions-spin { to { transform: rotate(360deg); } }

.f6-permissions__check path {
  stroke-dasharray: 32; stroke-dashoffset: 0;
  animation: f6-permissions-draw 320ms ease-out;
}
@keyframes f6-permissions-draw { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }

/* Comme l'aura de Julia : ce qui bouge s'arrête quand on l'a demandé. */
@media (prefers-reduced-motion: reduce) {
  .f6-permissions__spinner { animation: none; }
  .f6-permissions__check path { animation: none; }
}

/* L'aide est une **surcouche sur sa ligne**, fermable : elle remplaçait tout le panneau,
 * si bien qu'on perdait de vue ce qui avait déjà été accordé. */
.f6-permissions__item { position: relative; }
.f6-permissions__help-overlay {
  position: absolute; inset: auto 0 auto 0; top: 100%; z-index: 2;
  padding-top: var(--f6-space-2);
}
.f6-permissions__help {
  padding: var(--f6-space-4);
  background: var(--f6-color-surface);
  border: 1px solid var(--f6-color-border);
  border-radius: var(--f6-radius-default);
  box-shadow: 0 8px 24px rgba(40, 60, 80, .25);
}
.f6-permissions__help h3 { margin: 0 0 var(--f6-space-2); font-size: 1rem; }
.f6-permissions__help-footer {
  display: flex; gap: var(--f6-space-2); flex-wrap: wrap;
}
.f6-permissions__steps { margin: 0 0 var(--f6-space-4); padding-left: var(--f6-space-6); }
.f6-permissions__steps li { margin-bottom: var(--f6-space-1); }
.f6-permissions__note {
  padding: var(--f6-space-2);
  background: var(--f6-color-surface-sunken);
  border-radius: var(--f6-radius-default);
  font-size: var(--f6-font-size-small);
}
.f6-permissions__actions { display: flex; gap: var(--f6-space-2); flex-wrap: wrap; }

/* Demandée par une extension : elle couvre l'écran, parce qu'il n'y a rien d'utile à
   faire tant qu'on n'a pas répondu. */
.f6-permissions-host:not(:empty) {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: var(--f6-space-4);
  background: rgba(40, 60, 80, .45);
}
.f6-permissions-host .f6-permissions {
  width: 100%; max-width: var(--f6-layout-max-width);
  box-shadow: 0 8px 32px rgba(40, 60, 80, .25);
}

/* --- Contrôles vocaux ----------------------------------------------------
 *
 * Deux boutons distincts, et c'est délibéré : couper le son n'est pas la même chose que
 * fermer le micro. Les réunir sur un seul contrôle obligerait à choisir entre parler et
 * entendre. */
.f6-voice-controls { display: flex; gap: var(--f6-space-1); margin-left: auto; }
/* `display` l'emporte sur la règle par défaut du navigateur pour `[hidden]` : sans cette
   ligne, cacher les commandes vocales hors de l'entretien ne les cachait pas. Même piège
   que pour `.f6-button--icon[hidden]`, deux règles plus bas. */
.f6-voice-controls[hidden] { display: none; }
.f6-button--icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  font-size: 18px; line-height: 1;
  background: var(--f6-color-surface);
  border: 1px solid var(--f6-color-border);
  border-radius: var(--f6-radius-pill);
  cursor: pointer;
}
.f6-button--icon:hover { border-color: var(--f6-color-primary); }
/* `display` l'emporte sur la règle par défaut du navigateur pour `[hidden]` : sans cette
   ligne, poser `hidden` sur un bouton d'icône ne le cachait pas. Le bouton « prendre une
   photo » restait donc offert caméra éteinte. */
.f6-button--icon[hidden] { display: none; }
.f6-voice-sound[data-voice-enabled=false] { opacity: .55; }

/* Le micro ouvert doit se voir sans ambiguïté : on ne laisse personne parler à un micro
   fermé, ni croire fermé un micro ouvert. */
.f6-voice[data-listening] {
  background: var(--f6-color-primary);
  border-color: var(--f6-color-primary);
  animation: f6-voice-pulse 1.4s ease-in-out infinite;
}
@keyframes f6-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--f6-color-primary) 55%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--f6-color-primary) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .f6-voice[data-listening] { animation: none; }
}

/* --- Caméra d'arrière-plan -----------------------------------------------
 *
 * La vidéo est **hors du flux** : elle s'installe sans décaler d'un pixel ce que l'assuré
 * est en train de lire. C'est ce qui permet de l'allumer au milieu d'une question. */
.f6-background {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
}
.f6-camera__video {
  width: 100%; height: 100%; object-fit: cover;
}
/* Sans flou, le texte devient illisible dès que la scène est claire ou chargée. Le voile
   fait le reste : c'est lui qui garantit le contraste, quel que soit ce qui est filmé. */
.f6-camera__video[data-blur] { filter: blur(6px) saturate(.9); transform: scale(1.06); }
.f6-camera::after {
  content: ''; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--f6-color-surface) 72%, transparent);
}

/* Tant que la caméra filme, la coquille flotte au-dessus d'elle. */
f6-chatbot.f6-camera-active { background: transparent; }
f6-chatbot.f6-camera-active .f6-shell { position: relative; z-index: 1; }
f6-chatbot.f6-camera-active .f6-step,
f6-chatbot.f6-camera-active .f6-actions {
  background: color-mix(in srgb, var(--f6-color-surface) 88%, transparent);
  backdrop-filter: blur(2px);
}

.f6-camera-controls { display: flex; gap: var(--f6-space-1); }
.f6-camera-button[data-filming=true] {
  border-color: var(--f6-color-error); color: var(--f6-color-error);
}