/* ==========================================================================
   ONGLET « VOTRE AVIS / UN PROBLÈME ? » — SITE VITRINE

   Feuille autonome, comme son script : elle doit pouvoir être chargée sur les
   pages légales, qui n'ont ni `vitrine.css` ni `style.css` en commun avec le
   reste. Les couleurs sont donc écrites en dur plutôt que prises à un jeu de
   jetons qui n'existe pas partout — c'est le seul endroit du site où c'est
   justifié.

   BORD DROIT À MI-HAUTEUR, PAS LE COIN BAS : le coin est déjà pris par le
   bandeau d'alerte et, sur mobile, par le pouce.
   ========================================================================== */

.avis__onglet {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: oklch(0.2 0.015 258);
  background: #fff;
  border: 1px solid oklch(0.88 0.008 258);
  border-right: none;
  border-radius: 10px 0 0 10px;
  padding: 16px 9px;
  cursor: pointer;
  writing-mode: vertical-rl;
  box-shadow: -2px 0 12px oklch(0.2 0.015 258 / 6%);
  transition: padding-right 140ms ease, background 140ms ease;
}

.avis__onglet:hover { background: oklch(0.975 0.004 258); padding-right: 12px; }
.avis__onglet-texte { white-space: nowrap; }

.avis__pastille {
  width: 6px; height: 6px; border-radius: 999px;
  background: oklch(0.55 0.17 258); flex: none;
}

.avis__panneau {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2000;
  width: 384px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  color: oklch(0.2 0.015 258);
  background: #fff;
  border: 1px solid oklch(0.86 0.01 258);
  border-radius: 14px;
  box-shadow: 0 18px 48px oklch(0.2 0.015 258 / 18%);
  display: flex;
  flex-direction: column;
}

.avis__panneau--court { padding: 20px; gap: 13px; }

.avis__tete {
  padding: 18px 20px 14px;
  border-bottom: 1px solid oklch(0.94 0.006 258);
  display: flex; align-items: flex-start; gap: 12px;
}

.avis__titres { display: flex; flex-direction: column; gap: 3px; }
.avis__titre { font-size: 15px; font-weight: 600; }
.avis__soustitre { font-size: 12.5px; line-height: 1.45; color: oklch(0.48 0.02 258); }

.avis__fermer {
  margin-left: auto; flex: none; width: 24px; height: 24px;
  border: none; background: transparent; border-radius: 6px; cursor: pointer;
  font-size: 18px; line-height: 1; color: oklch(0.5 0.02 258);
}

.avis__fermer:hover { background: oklch(0.94 0.006 258); }

.avis__corps { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 18px; }
.avis__bloc { display: flex; flex-direction: column; gap: 8px; }
.avis__ligne-kicker { display: flex; align-items: baseline; gap: 8px; }

.avis__kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(0.52 0.02 258);
}

.avis__facultatif { margin-left: auto; font-size: 11.5px; color: oklch(0.55 0.02 258); }

.avis__humeurs { display: flex; gap: 7px; }

.avis__humeur {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: oklch(0.24 0.015 258); background: #fff;
  border: 1px solid oklch(0.89 0.008 258); border-radius: 9px;
  padding: 10px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  /* Sans quoi « Un problème » se replie en deux lignes dans sa propre carte. */
  white-space: nowrap;
}

.avis__humeur:hover { border-color: oklch(0.7 0.01 258); }

.avis__humeur--active {
  background: oklch(0.19 0.015 258); color: #fff;
  border-color: oklch(0.19 0.015 258); font-weight: 600;
}

.avis__barres { display: flex; gap: 2px; align-items: flex-end; height: 11px; }
.avis__barres span { width: 3px; border-radius: 1px; background: currentcolor; opacity: 0.55; }

.avis__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.avis__chip {
  font-family: inherit; font-size: 12.5px;
  color: oklch(0.36 0.02 258); background: #fff;
  border: 1px solid oklch(0.9 0.008 258); border-radius: 999px;
  padding: 7px 12px; cursor: pointer;
  /* `nowrap` + `flex: none` : les chips passent à la ligne ENTRE elles, elles
     ne se replient jamais à l'intérieur de leur propre pastille. */
  white-space: nowrap; flex: none;
}

.avis__chip:hover { border-color: oklch(0.7 0.01 258); }

.avis__chip--active {
  background: oklch(0.94 0.006 258); color: oklch(0.2 0.015 258);
  border-color: oklch(0.6 0.02 258); font-weight: 600;
}

.avis__texte {
  font-family: inherit; font-size: 13.5px; line-height: 1.5;
  color: oklch(0.2 0.015 258); background: #fff;
  border: 1px solid oklch(0.88 0.008 258); border-radius: 9px;
  padding: 10px 12px; outline: none; resize: vertical;
}

.avis__texte:focus { border-color: oklch(0.6 0.12 258); }

/*
  Le champ d'adresse reprend exactement la boîte de la zone de texte : même
  bordure, même rayon, même retrait. Un champ qui ne ressemble pas aux autres
  se lit comme une demande d'une autre nature — ici c'est le même formulaire,
  et la même absence d'obligation.
*/
.avis__champ {
  font-family: inherit; font-size: 13.5px; line-height: 1.5;
  color: oklch(0.2 0.015 258); background: #fff;
  border: 1px solid oklch(0.88 0.008 258); border-radius: 9px;
  padding: 10px 12px; outline: none; width: 100%; box-sizing: border-box;
}

.avis__champ:focus { border-color: oklch(0.6 0.12 258); }
.avis__champ::placeholder { color: oklch(0.62 0.015 258); }

.avis__compteur:empty { display: none; }

.avis__compteur {
  font-size: 11.5px; line-height: 1.4; color: oklch(0.5 0.02 258);
  align-self: flex-end;
}

.avis__compteur--plein { color: oklch(0.52 0.16 25); font-weight: 600; }

.avis__note { font-size: 11.5px; line-height: 1.45; color: oklch(0.5 0.02 258); }

.avis__envoi { display: flex; flex-direction: column; gap: 10px; }
.avis__portee { font-size: 11.5px; line-height: 1.5; color: oklch(0.5 0.02 258); }

.avis__bouton {
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: #fff; background: oklch(0.19 0.015 258);
  border: none; border-radius: 9px; padding: 12px; cursor: pointer;
}

.avis__bouton:hover { background: oklch(0.28 0.015 258); }

.avis__bouton--secondaire {
  color: oklch(0.2 0.015 258); background: #fff;
  border: 1px solid oklch(0.85 0.01 258); font-size: 13.5px; padding: 11px 16px;
}

.avis__bouton--secondaire:hover { background: oklch(0.96 0.004 258); }

.avis__pied {
  padding: 12px 20px; border-top: 1px solid oklch(0.94 0.006 258);
  background: oklch(0.975 0.004 258);
  display: flex; align-items: center; gap: 10px;
}

.avis__pied-texte { font-size: 12px; color: oklch(0.5 0.02 258); flex: 1; }

.avis__lien {
  flex: none; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: oklch(0.3 0.015 258); background: transparent; border: none;
  padding: 0; cursor: pointer; text-decoration: underline;
}

.avis__paragraphe { margin: 0; font-size: 13px; line-height: 1.55; color: oklch(0.44 0.02 258); }
.avis__actions { display: flex; gap: 8px; }
.avis__actions .avis__bouton { flex: 1; }
.avis__actions .avis__bouton--secondaire { flex: none; }

.avis__annuler {
  position: fixed; right: 16px; bottom: 16px; z-index: 2001;
  display: flex; align-items: center; gap: 12px;
  font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 13px;
  background: oklch(0.19 0.015 258); color: oklch(0.93 0.005 258);
  border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 8px 24px oklch(0.2 0.015 258 / 20%);
}

.avis__annuler button {
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: #fff; background: transparent; border: none;
  padding: 0; cursor: pointer; text-decoration: underline;
}

/*
  SUR MOBILE, L'ONGLET DEVIENT UN BOUTON ROND.

  Un onglet vertical de bord sur un téléphone recouvre le contenu. Et le
  panneau devient une feuille pleine largeur : à 384 px sur un écran de 390,
  il n'aurait plus de marge.
*/
@media (max-width: 700px) {
  .avis__onglet {
    top: auto; bottom: 20px; right: 14px; transform: none;
    writing-mode: horizontal-tb;
    width: 48px; height: 48px; padding: 0;
    border: 1px solid oklch(0.88 0.008 258); border-radius: 999px;
    justify-content: center;
  }

  .avis__onglet-texte { display: none; }
  .avis__pastille { width: 9px; height: 9px; }

  .avis__panneau {
    right: 0; left: 0; bottom: 0; top: auto; transform: none;
    width: auto; max-height: 88vh; border-radius: 14px 14px 0 0;
  }

  .avis__annuler { left: 14px; right: 14px; bottom: 20px; }
}