/* ==========================================================================
   Luce — bulle d'assistance
   Fichier séparé de theme.css : composant autonome, greffé au site sans s'y
   mêler, et retirable en supprimant deux lignes (head.php + footer.php).
   Le panneau est en deux temps : en-tête sombre (la signature, la mention IA — du chrome
   de marque) et corps clair (le fil, les raccourcis, la saisie — de la conversation). La
   césure ne suit pas les sections de la page : elle reste la même devant un fond clair
   comme devant un fond sombre.
   ========================================================================== */

.luce {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 900;
  font-family: var(--font-main);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm, 0.75rem);
}

/* --- Pastille d'appel ---------------------------------------------------- */

.luce-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.18));
  border-radius: var(--radius-pill, 999px);
  background: var(--bg-navy, #0b1524);
  color: var(--text, #fff);
  font-size: var(--text-sm, 0.9rem);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-fast, 0.18s) var(--ease-out, ease),
              border-color var(--dur-fast, 0.18s) var(--ease-out, ease);
}

.luce-toggle { position: relative; }
.luce-toggle:hover { transform: translateY(-2px); border-color: var(--logo-teal, #2bb7b3); }

/* Halo d'appel — un anneau qui s'écarte de la pastille, trois fois, à l'arrivée de la bulle.
   C'est le mouvement qui capte le regard en vision périphérique, pas la couleur : une bulle
   posée en bas d'écran sans rien qui bouge autour, l'œil ne va pas la chercher. Trois
   itérations et c'est fini — au-delà, on n'attire plus, on harcèle. */
.luce-toggle::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--logo-teal, #6ed6d7);
  opacity: 0;
  pointer-events: none;
}

.luce.is-calling .luce-toggle::after {
  animation: luce-ping 2.4s var(--ease-out, ease-out) 3;
}

@keyframes luce-ping {
  0%        { opacity: 0.75; transform: scale(1); }
  70%, 100% { opacity: 0;    transform: scale(1.22); }
}
.luce-toggle:focus-visible { outline: 2px solid var(--logo-teal, #2bb7b3); outline-offset: 3px; }

/* La signature est un tracé plein et étroit : à 20 px elle se lit mal, on lui donne
   un peu plus de place qu'à une icône au trait. */
.luce-toggle__icon { display: inline-flex; width: 22px; height: 22px; color: var(--logo-teal, #2bb7b3); }
.luce-toggle__icon svg { width: 100%; height: 100%; }

.luce.is-open .luce-toggle { display: none; }

/* --- Accroche défilante --------------------------------------------------
   Bulle posée AU-DESSUS de la pastille (elle est le premier enfant du conteneur
   `column`), pointe tournée vers elle. Alignée à droite comme tout le bloc, elle
   ne déborde donc jamais du côté fenêtre.
   Elle n'existe que tant que Luce est fermée : dès l'ouverture du panneau, elle
   n'a plus rien à annoncer.
   ------------------------------------------------------------------------- */

.luce-teaser {
  position: relative;
  display: block;
  max-width: min(260px, calc(100vw - 3rem));
  /* Entrée et sortie pilotées par la classe : `hidden` seul couperait l'animation net. */
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transform-origin: 100% 100%;   /* elle sort de la pastille, pas du vide */
  transition: opacity 0.4s var(--ease-out, ease), transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
  pointer-events: none;
}

.luce-teaser[hidden] { display: none; }
.luce-teaser.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.luce.is-open .luce-teaser { display: none; }

.luce-teaser__bubble {
  position: relative;
  display: block;
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 0;
  border-radius: var(--radius-md, 12px);
  /* APLAT CLAIR, et non le navy du reste du chrome. Une bulle sombre bordée de blanc à 18 %
     sur un site sombre ne se distingue pas du décor — elle est là, personne ne la voit. Le
     teal de la marque sur texte navy est le seul couple du thème qui accroche l'œil en bas
     d'écran sans crier. */
  background: var(--logo-teal, #6ed6d7);
  color: var(--bg-navy, #02264a);
  font-family: inherit;
  font-size: var(--text-sm, 0.9rem);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

/* Pointe vers la pastille. Un seul triangle depuis que la bulle est un aplat sans liseré. */
.luce-teaser__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 26px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: var(--logo-teal, #6ed6d7);
}

.luce-teaser__bubble:hover { filter: brightness(1.06); }

/* Le texte ne s'anime plus pour lui-même : c'est la bulle entière qui va et vient d'une
   accroche à l'autre, le texte n'est remplacé que pendant qu'elle est à opacité 0. */
.luce-teaser__text { display: block; }

/* Pastille de refus posée SUR le coin de la bulle, et non à côté : en flux, elle décalait
   la bulle vers la gauche, dont le bord droit ne tombait plus sur celui de la pastille
   « Besoin d'aide ? » — deux blocs superposés désalignés de 25 px. */
.luce-teaser__dismiss {
  position: absolute;
  top: -9px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.18));
  border-radius: 50%;
  background: var(--bg-navy, #02264a);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color var(--dur-fast, 0.18s) var(--ease-out, ease),
              border-color var(--dur-fast, 0.18s) var(--ease-out, ease);
}
.luce-teaser__dismiss:hover { color: #fff; border-color: var(--logo-teal, #6ed6d7); }
.luce-teaser__dismiss svg { width: 11px; height: 11px; }

/* Réservoir de textes rendu par PHP : jamais affiché, seulement lu par le JS. */
.luce-teaser__source { display: none; }

/* Sur un écran de téléphone, la bulle mangerait le contenu de la page sans rien apporter
   que le bouton ne dise déjà. */
@media (max-width: 599.98px) {
  .luce-teaser { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .luce-teaser { transition: none; transform: none; }
  /* Le halo est du mouvement pur : il n'a aucune information à transmettre, il disparaît. */
  .luce.is-calling .luce-toggle::after { animation: none; }
}

/* --- Panneau ------------------------------------------------------------- */

/* Palette du corps clair, tenue en local : le composant reste retirable d'un bloc, et
   ces valeurs ne fuient pas dans le reste du thème. --luce-accent-ink est le teal de la
   marque assombri jusqu'à passer 4,5:1 sur blanc — le #6ed6d7 d'origine n'y atteint que
   1,9:1, illisible dès qu'il porte du texte. */
.luce-panel {
  --luce-paper: var(--light-bg, #f4f6fb);
  --luce-card: #ffffff;
  --luce-ink: var(--light-text, #0a1530);
  --luce-ink-soft: var(--light-muted, #475569);
  --luce-line: var(--infra-light, #dee3ec);
  --luce-accent-ink: #0f6f70;

  width: min(380px, calc(100vw - 2rem));
  max-height: min(560px, calc(100vh - 6rem));
  display: flex;
  flex-direction: column;
  background: var(--bg-navy, #0b1524);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.luce-panel[hidden] { display: none; }

/* Seule zone restée sombre. Le fond est réaffirmé ici plutôt que laissé à l'héritage du
   panneau : le corps repeint le sien, et un en-tête qui dépendrait du parent se retrouverait
   clair au premier oubli. */
.luce-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: var(--space-md, 1rem);
  background: var(--bg-navy, #02264a);
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

/* Pousse la croix de fermeture à droite sans recourir à space-between, qui écarterait
   la signature du reste de l'en-tête. */
.luce-panel__ident { flex: 1 1 auto; min-width: 0; }

/* La signature manuscrite tient lieu de titre : pas de doublon typographique à côté.
   Hauteur fixe et largeur libre — le SVG porte son propre rapport (157×60). */
.luce-panel__wordmark {
  display: block;
  height: 30px;
  color: var(--text, #e8eef7);
}

.luce-panel__wordmark svg { display: block; height: 100%; width: auto; }

/* Mention IA : discrète mais jamais masquée ni repliée (AI Act, art. 50).
   --text-dim (#64748b) ne donnait que 3,2:1 sur le fond du panneau : sous le seuil AA
   pour un texte de cette taille, alors que c'est justement la ligne qu'on ne peut pas
   se permettre de rendre illisible. --text-muted monte à 5,3:1. */
.luce-panel__role {
  margin: 0.15rem 0 0;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-muted, #94a3b8);
}

.luce-panel__close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 5px;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--text-muted, rgba(255, 255, 255, 0.7));
  cursor: pointer;
}

.luce-panel__close:hover { background: var(--surface-2, rgba(255, 255, 255, 0.06)); color: var(--text, #fff); }
.luce-panel__close svg { width: 100%; height: 100%; }

/* --- Fil ----------------------------------------------------------------- */

.luce-thread {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-md, 1rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.75rem);
  background: var(--luce-paper);
  color: var(--luce-ink);
}

.luce-msg { max-width: 88%; }

/* `color: inherit` n'est pas décoratif, il répare.
   theme.css pose `p { color: var(--text-muted) }` en règle globale : elle cible le <p>
   lui-même, donc elle bat la couleur héritée de la bulle, si spécifique soit cette
   dernière. Le texte du visiteur ressortait en gris clair sur le teal — 1,50:1, illisible.
   On force donc le <p> à reprendre la couleur de sa bulle, qui est la bonne. */
.luce-msg p {
  margin: 0;
  font-size: var(--text-sm, 0.9rem);
  line-height: 1.5;
  color: inherit;
}

/* Blanc franc sur le gris du fil : le voile à 5 % d'origine, transposé tel quel sur fond
   clair, ne dessinait plus aucune bulle. */
.luce-msg--bot {
  align-self: flex-start;
  padding: 0.65rem 0.85rem;
  border-radius: 14px 14px 14px 4px;
  background: var(--luce-card);
  border: 1px solid var(--luce-line);
  color: var(--luce-ink);
}

/* Navy plein, et non le teal de l'ancienne version : sur le fil clair, l'aplat teal ne se
   détachait plus du fond (1,4:1) — la bulle du visiteur cessait de se distinguer de celle
   de Luce. Le navy reprend le rôle d'accent fort, et fait écho à l'en-tête. */
.luce-msg--user {
  align-self: flex-end;
  padding: 0.65rem 0.85rem;
  border-radius: 14px 14px 4px 14px;
  background: var(--bg-navy, #02264a);
  color: #fff;
}

.luce-msg__link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: var(--text-sm, 0.9rem);
  color: var(--luce-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Un lien posé dans une bulle visiteur reste sur fond navy : il y reprend le teal clair. */
.luce-msg--user .luce-msg__link { color: var(--logo-teal, #6ed6d7); }

/* Points d'attente : le modèle répond en une à deux secondes, mais un panneau
   figé pendant ce laps se lit comme un plantage. */
.luce-msg--typing { display: flex; gap: 4px; padding: 0.85rem; }
.luce-msg--typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--luce-ink-soft);
  animation: luce-pulse 1.2s infinite ease-in-out;
}
.luce-msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.luce-msg--typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes luce-pulse {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* --- Raccourcis ---------------------------------------------------------- */

.luce-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 var(--space-md, 1rem) var(--space-sm, 0.75rem);
  background: var(--luce-paper);
}

.luce-suggestions[hidden] { display: none; }

.luce-chip {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--luce-line);
  border-radius: var(--radius-pill, 999px);
  background: var(--luce-card);
  color: var(--luce-ink-soft);
  font-size: var(--text-xs, 0.75rem);
  cursor: pointer;
  transition: border-color var(--dur-fast, 0.18s) var(--ease-out, ease),
              color var(--dur-fast, 0.18s) var(--ease-out, ease);
}

/* Aplat plein au survol : sur fond clair, un simple changement de liseré à 1 px se remarque
   à peine, là où la puce est justement ce qu'on veut donner envie de cliquer. */
.luce-chip:hover { background: var(--bg-navy, #02264a); border-color: var(--bg-navy, #02264a); color: #fff; }

/* --- Envoi de la demande ------------------------------------------------- */

.luce-send {
  padding: var(--space-md, 1rem);
  border-top: 1px solid var(--luce-line);
  background: var(--luce-card);
}

.luce-send[hidden] { display: none; }

.luce-send__recap {
  margin: 0 0 0.6rem;
  font-size: var(--text-xs, 0.75rem);
  color: var(--luce-ink-soft);
  line-height: 1.5;
}

/* Le seul bouton plein du corps clair : navy, comme l'en-tête. Un aplat teal y aurait
   perdu ses contours (1,5:1 sur le blanc) là où il portait tout le poids de l'appel. */
.luce-send__btn {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: var(--radius-md, 10px);
  background: var(--bg-navy, #02264a);
  color: #fff;
  font-size: var(--text-sm, 0.9rem);
  font-weight: 600;
  cursor: pointer;
}

.luce-send__btn:hover:not(:disabled) { background: #03182e; }
.luce-send__btn:disabled { opacity: 0.5; cursor: default; }

/* 0,7 rem en --text-dim tombait à 3,5:1 : trop bas pour une mention qui engage
   le consentement du visiteur. Remonté en taille et en contraste — 7,9:1 sur le blanc. */
.luce-send__legal {
  margin: 0.55rem 0 0;
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.5;
  color: var(--luce-ink-soft);
}

.luce-send__legal a { color: inherit; text-decoration: underline; }

/* --- Saisie -------------------------------------------------------------- */

.luce-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--space-sm, 0.75rem) var(--space-md, 1rem) var(--space-md, 1rem);
  background: var(--luce-card);
  border-top: 1px solid var(--luce-line);
}

.luce-form__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.luce-form input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--luce-line);
  border-radius: var(--radius-pill, 999px);
  background: var(--luce-paper);
  color: var(--luce-ink);
  caret-color: var(--bg-navy, #02264a);
  font-family: inherit;
  font-size: var(--text-sm, 0.9rem);
}

.luce-form input[type="text"]::placeholder {
  color: var(--luce-ink-soft);
  opacity: 1; /* Firefox applique sinon une opacité par défaut qui reperd le contraste. */
}

.luce-form input[type="text"]:focus {
  outline: none;
  border-color: var(--bg-navy, #02264a);
  box-shadow: 0 0 0 3px rgba(2, 38, 74, 0.12);
}

.luce-form input[type="text"]:disabled { opacity: 0.6; }

.luce-form__send {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  padding: 9px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-navy, #02264a);
  color: #fff;
  cursor: pointer;
}

.luce-form__send:hover:not(:disabled) { background: #03182e; }
.luce-form__send:disabled { opacity: 0.5; cursor: default; }
.luce-form__send svg { width: 100%; height: 100%; }

/* Focus clavier du corps clair. Le teal du reste du site n'y sert à rien : sur du blanc
   il plafonne à 1,5:1, l'anneau serait là sans se voir. Le navy, posé à 2 px du bouton,
   se lit aussi bien autour d'une puce blanche que d'un bouton plein. */
.luce-chip:focus-visible,
.luce-send__btn:focus-visible,
.luce-form__send:focus-visible {
  outline: 2px solid var(--bg-navy, #02264a);
  outline-offset: 2px;
}

/* Leurre anti-robot : hors flux et hors lecture d'écran, mais présent dans le DOM. */
.luce-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 560px) {
  .luce { right: 0; bottom: 0; left: 0; align-items: stretch; }
  .luce-toggle { align-self: flex-end; margin: 0 1rem 1rem 0; }

  .luce.is-open { top: 0; }
  .luce-panel {
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .luce-toggle { transition: none; }
  .luce-msg--typing span { animation: none; opacity: 0.5; }
}

/* ==========================================================================
   L'entretien — Luce sur la page Contact
   ==========================================================================
   Tout ce qui suit n'existe que sur /contact. Même moteur que la pastille.

   Depuis le 2026-09-21 : une fenêtre de discussion assumée, sur une bande CLAIRE. Bulles,
   avatar de Luce à gauche, avatar neutre du visiteur à droite, deux réponses rapides pour
   ouvrir, et les réserves (valeur des réponses, données) en mentions à astérisque au pied
   de la fenêtre. Remplace la « conversation imprimée » sans bulles du 2026-09-15.

   Les avatars sont des pseudo-éléments des bulles, pas des nœuds : luce.js réécrit le
   premier enfant de chaque bulle pendant le streaming, et un nœud d'avatar posé devant
   serait écrasé. `background-image` et non `mask-image`, pris en charge partout.
   -------------------------------------------------------------------------------------- */

.luce--entretien {
  /* La pastille est ancrée à la fenêtre ; l'entretien, lui, EST la page. */
  position: static;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: block;

  --e-avatar-luce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%236ed6d7' d='M 30.6 5.2 L 28.8 4.0 L 28.1 4.0 L 25.5 7.7 L 23.1 11.6 L 20.8 15.6 L 19.0 19.4 L 16.5 25.5 L 15.0 31.3 L 14.1 37.1 L 14.1 39.0 L 14.5 40.9 L 15.1 42.3 L 15.8 43.4 L 16.8 44.5 L 18.1 45.5 L 19.3 47.0 L 21.0 48.3 L 23.0 49.1 L 26.2 49.7 L 43.6 49.7 L 43.8 49.2 L 43.9 47.4 L 43.9 44.6 L 43.8 42.8 L 43.6 42.3 L 26.4 42.3 L 22.2 42.5 L 21.1 42.5 L 21.0 42.3 L 21.0 41.1 L 22.6 33.4 L 23.7 29.9 L 25.2 25.9 L 27.2 21.5 L 29.5 17.2 L 32.1 13.1 L 34.9 9.2 L 34.7 8.6 L 33.2 7.1 Z'/%3E%3C/svg%3E");
  --e-avatar-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b82' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.8 19.5c1.2-3.3 4-5 7.2-5s6 1.7 7.2 5'/%3E%3C/svg%3E");
}

.entretien-section {
  --e-ink:         var(--light-text);
  --e-soft:        var(--light-muted);
  --e-dim:         #5b6b82;              /* 5,3:1 sur blanc */
  --e-accent:      #0e7c8a;              /* teal assombri, 4,92:1 sur blanc, déjà en usage */
  --e-accent-deep: #0f7a46;
  --e-line:        rgba(10, 21, 48, 0.12);
  --e-card:        #ffffff;
  --e-bot:         #eef3f8;              /* bulle de Luce */
  --e-user:        var(--logo-navy);     /* bulle du visiteur */

  position: relative;
  padding-block: var(--space-2xl) var(--space-xl);
  color: var(--e-ink);
  /* Fond clair UNI, celui de l'habillage de référence (`--light-bg` vaut #dbe1ec sous
     `main[data-soft-deco]`). La texture de carrés et de points du 2026-09-21 est retirée :
     le décor de la bande est le maillage en traits fins posé dans un coin par soft-deco. */
  background-color: var(--light-bg);
  background-image: none;
}

.entretien {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  .entretien {
    /* La colonne de droite ne grandit pas avec l'écran : ce sont des notes en marge. */
    grid-template-columns: minmax(0, 1fr) clamp(17rem, 24vw, 21rem);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.entretien__scene { min-width: 0; display: flex; flex-direction: column; }

/* --- La fenêtre ---------------------------------------------------------- */

.entretien__board {
  background: var(--e-card);
  border: 1px solid var(--e-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(10, 21, 48, 0.1);
  color: var(--e-ink);

  /* HAUTEUR FIXE (demande du 2026-09-21) : la fenêtre ne bouge plus pendant l'échange, c'est
     le fil qui défile à l'intérieur. Assez haute pour lire plusieurs tours sans ascenseur,
     bornée par la hauteur d'écran pour que la ligne d'écriture reste visible. */
  display: flex;
  flex-direction: column;
  height: clamp(36rem, calc(100vh - 7rem), 52rem);
}

.entretien__chathead {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem var(--space-md);
  border-bottom: 1px solid var(--e-line);
}

.entretien__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--logo-navy);
  color: var(--logo-teal);
}

.entretien__avatar svg { width: 62%; height: 62%; }

.entretien__who { min-width: 0; }

/* Renvoi vers la mention ** dès l'arrivée : celui du bouton d'envoi n'apparaît qu'une fois
   le dossier complet, trop tard pour qui se demande où partent ses réponses. */
.entretien__datalink {
  margin-left: auto;
  color: var(--e-dim);
  font-size: var(--text-xs);
  text-decoration: none;
  white-space: nowrap;
}

.entretien__datalink:hover { color: var(--e-accent); }
.entretien__datalink:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 3px; border-radius: 2px; }

.entretien__name {
  margin: 0;
  color: var(--e-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
}

/* Renvoi vers la mention. Plus foncé que le texte courant : un astérisque est un signe
   mince, au même gris il disparaît (revue Léa du 2026-09-21). */
.entretien__ref {
  margin-left: 0.1em;
  color: var(--e-accent);
  font-weight: 700;
  text-decoration: none;
  vertical-align: super;
  font-size: 0.75em;
  line-height: 0;
}

.entretien__ref:hover { color: var(--e-accent-deep); }
.entretien__ref:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 2px; border-radius: 2px; }

.entretien__badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.15rem 0 0;
  color: var(--e-dim);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.entretien__online {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #1f9d5c;
  box-shadow: 0 0 0 3px rgba(31, 157, 92, 0.18);
}

/* --- Le fil -------------------------------------------------------------- */

/* Le fil prend la hauteur de son contenu, rétrécit quand il déborde et défile alors sur
   lui-même ; luce.js le ramène en bas à chaque bulle (`thread.scrollTop`). Il ne GRANDIT
   pas : les réponses rapides restent collées sous la présentation, et le vide se loge
   entre elles et la ligne d'écriture (`margin-top: auto`). `min-height: 0` est
   indispensable, sans lui un enfant flex refuse de rétrécir sous son contenu. */
.entretien__thread {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: var(--space-lg) var(--space-md) var(--space-md);
}

/* Les bulles. L'avatar est un pseudo-élément, décalé hors de la bulle : 2,25rem d'avatar
   et 0,6rem d'écart, réservés par la marge. Il s'aligne sur la base de la bulle, comme
   dans toutes les messageries. */
.luce--entretien .luce-msg {
  position: relative;
  max-width: min(36rem, calc(100% - 2.85rem));
  padding: 0.7rem 0.95rem;
  border-radius: 16px;
  box-shadow: none;
}

.luce--entretien .luce-msg::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

.luce--entretien .luce-msg--bot {
  align-self: flex-start;
  margin-left: 2.85rem;
  background: var(--e-bot);
  border: 0;
  border-bottom-left-radius: 4px;
  color: var(--e-ink);
}

.luce--entretien .luce-msg--bot::before {
  left: -2.85rem;
  background-color: var(--logo-navy);
  background-image: var(--e-avatar-luce);
  background-size: 62%;
}

/* Deux bulles de Luce qui se suivent : un seul avatar, sur la dernière. */
.luce--entretien .luce-msg--bot:has(+ .luce-msg--bot)::before { visibility: hidden; }

.luce--entretien .luce-msg--user {
  align-self: flex-end;
  margin-right: 2.85rem;
  background: var(--e-user);
  border-bottom-right-radius: 4px;
  color: #ffffff;
}

.luce--entretien .luce-msg--user::before {
  right: -2.85rem;
  background-color: #e4eaf1;
  background-image: var(--e-avatar-user);
  background-size: 64%;
}

.luce--entretien .luce-msg p {
  margin: 0;
  color: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  text-wrap: pretty;
}

.luce--entretien .luce-msg__link {
  display: inline-block;
  margin-top: 0.55rem;
  color: var(--e-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.luce--entretien .luce-msg__link:hover { color: var(--e-accent-deep); }
.luce--entretien .luce-msg--user .luce-msg__link { color: var(--logo-teal); }

.luce--entretien .luce-msg--typing {
  display: flex;
  gap: 0.3rem;
  padding: 0.95rem 1rem;
}

/* --luce-ink-soft n'est défini que sur .luce-panel, absent de la page Contact : sans cette
   ligne les points étaient transparents, la bulle d'attente restait vide et Luce semblait
   ne rien faire pendant que le modèle réfléchissait. */
.luce--entretien .luce-msg--typing span { background: var(--e-accent); }

/* Le trait qui suit l'écriture de la présentation. Il respire, ne clignote pas. */
.entretien__intro.is-writing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 0.12em;
  vertical-align: -0.12em;
  background: var(--e-accent);
  animation: entretien-breathe 1.7s var(--ease-in-out) infinite;
}

@keyframes entretien-breathe {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.8; }
}

/* --- Les réponses rapides ------------------------------------------------ */

/* Alignées sous les bulles de Luce, du côté de la réponse qu'elles attendent. Elles
   n'entrent qu'une fois la présentation écrite : les montrer avant couperait la parole. */
.entretien__cues {
  flex: 0 0 auto;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr;
  padding: 0 var(--space-md) var(--space-md) calc(var(--space-md) + 2.85rem);
}

@media (min-width: 600px) {
  .entretien__cues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* `display: grid` l'emporte sur l'attribut `hidden`. */
.entretien__cues[hidden] { display: none; }

/* Retrait écrit seulement sous `is-armed`, posé par luce.js : le défaut reste « tout est
   visible », jamais une page morte au premier incident. */
.luce--entretien.is-armed .entretien__cues {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.luce--entretien.is-armed .entretien__cues.is-in { opacity: 1; transform: none; }

.entretien__cue {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  text-align: left;
  cursor: pointer;
  background: #ffffff;
  border: 1.5px solid var(--e-accent);
  border-radius: 14px;
  color: inherit;
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.entretien__cue:hover {
  background: rgba(14, 124, 138, 0.07);
  transform: translateY(-1px);
}

.entretien__cue:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 3px; }

.entretien__cue-title { color: var(--e-accent); font-size: var(--text-base); font-weight: 700; }
.entretien__cue-desc  { color: var(--e-soft); font-size: var(--text-sm); line-height: 1.45; }

/* --- Le récapitulatif avant envoi ---------------------------------------- */

.luce--entretien .luce-send {
  flex: 0 0 auto;
  margin: 0 var(--space-md) var(--space-md);
  padding: var(--space-md);
  background: rgba(15, 122, 70, 0.07);
  border: 1px solid rgba(15, 122, 70, 0.3);
  border-radius: var(--radius-md);
}

.luce--entretien .luce-send__recap { margin: 0 0 var(--space-sm); color: var(--e-ink); font-size: var(--text-sm); }

.luce--entretien .luce-send__btn {
  padding: 0.7rem 1.3rem;
  background: var(--logo-navy);
  border: 0;
  border-radius: var(--radius-pill);
  color: #ffffff;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.luce--entretien .luce-send__legal { margin: var(--space-sm) 0 0; color: var(--e-dim); font-size: var(--text-xs); line-height: 1.5; }

/* --- La ligne d'écriture ------------------------------------------------- */

.luce--entretien .entretien__ask {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  margin: 0;

  flex: 0 0 auto;
  margin-top: auto;
  padding: 0.75rem var(--space-md);
  background: #ffffff;
  border: 0;
  border-top: 1px solid var(--e-line);
  /* Dernier élément de la fenêtre depuis que les mentions sont sorties dessous. */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 -10px 14px -12px rgba(10, 21, 48, 0.2);

  transition: opacity var(--dur-slow) var(--ease-out) 120ms;
}

.luce--entretien.is-armed .entretien__ask { opacity: 0; }
.luce--entretien.is-armed .entretien__ask.is-in { opacity: 1; }

/* Le libellé reste lu par les lecteurs d'écran, le texte grisé suffit à l'œil. */
.luce--entretien .entretien__ask .luce-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.luce--entretien .entretien__ask input[type="text"] {
  width: 100%;
  min-width: 0;
  padding: 0.75rem 1.1rem;
  background: var(--light-bg);
  border: 1px solid var(--e-line);
  border-radius: var(--radius-pill);
  color: var(--e-ink);
  font-family: inherit;
  font-size: var(--text-base);
}

.luce--entretien .entretien__ask input[type="text"]:focus { outline: none; border-color: var(--e-accent); background: #ffffff; }
.luce--entretien .entretien__ask input[type="text"]::placeholder { color: var(--e-dim); }
.luce--entretien .entretien__ask input[type="text"]:disabled { opacity: 0.5; }

.luce--entretien .entretien__ask .luce-form__send {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: var(--logo-navy);
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.luce--entretien .entretien__ask .luce-form__send svg { width: 20px; height: 20px; }
.luce--entretien .entretien__ask .luce-form__send:hover:not(:disabled) { background: var(--e-accent); }
.luce--entretien .entretien__ask .luce-form__send:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 2px; }
.luce--entretien .entretien__ask .luce-form__send:disabled { opacity: 0.4; cursor: default; }

/* --- Les mentions -------------------------------------------------------- */

.entretien__mentions {
  padding: 0.9rem 0.25rem 0;
}

.entretien__mentions p {
  margin: 0;
  color: var(--e-dim);
  font-size: var(--text-xs);
  line-height: 1.55;
  scroll-margin-top: 6rem;
}

.entretien__mentions p + p { margin-top: 0.45rem; }

.entretien__mark {
  display: inline-block;
  min-width: 1.4em;
  color: var(--e-accent);
  font-weight: 700;
}

.entretien__mentions a { color: var(--e-accent); text-decoration: underline; text-underline-offset: 2px; }

/* Arrivée par un astérisque : la mention visée s'éclaire un instant. */
.entretien__mentions p:target { color: var(--e-ink); }

/* --- Les notes en marge -------------------------------------------------- */

.entretien__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.entretien__aside > .entretien__note:first-child { padding-top: 0; border-top: 0; }


.entretien__note {
  padding-top: var(--space-md);
  border-top: 1px solid var(--e-line);
}

.entretien__note-title {
  margin: 0 0 var(--space-sm);
  color: var(--e-accent);
  font-family: var(--font-main);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}


/* « Parler à quelqu'un » : le numéro en grand, l'e-mail et les horaires dessous. */
.entretien__note .entretien__direct-value {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--e-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-decoration: none;
}

.entretien__note .entretien__direct-value:hover { color: var(--e-accent); }
.entretien__note .entretien__direct-value--mail { font-size: var(--text-base); word-break: break-word; }
.entretien__direct-hours { margin: 0.4rem 0 0; color: var(--e-dim); font-size: var(--text-xs); }

/* Les bureaux, en version de marge : photo ronde, nom, activités, adresse, itinéraire. */
.entretien__offices { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-md); }
.entretien__office { display: flex; gap: 0.8rem; align-items: flex-start; }
.entretien__office-photo { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.entretien__office-name { margin: 0 0 0.15rem; color: var(--e-ink); font-family: var(--font-main); font-size: var(--text-base); font-weight: 600; }
.entretien__office-desc { margin: 0 0 0.3rem; color: var(--e-accent); font-size: var(--text-xs); line-height: 1.45; }
.entretien__office-address { margin: 0; color: var(--e-soft); font-size: var(--text-sm); font-style: normal; line-height: 1.5; }
.entretien__office-link { display: inline-block; margin-top: 0.3rem; color: var(--e-accent); font-size: var(--text-xs); font-weight: 600; text-decoration: none; }
.entretien__office-link:hover { color: var(--e-accent-deep); }

/* --- « Vous partez ? » -------------------------------------------------- */

.entretien__exit {
  /* Centrage explicite : le reset global de theme.css (`margin: 0`) annule celui que le
     navigateur donne d'office à un <dialog> modal, qui partait alors en haut à gauche. */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(30rem, calc(100vw - 2rem));
  padding: var(--space-lg);
  border: 0;
  border-radius: var(--radius-lg);
  background: #ffffff;
  color: var(--light-text);
  box-shadow: 0 30px 70px rgba(10, 21, 48, 0.3);
}

.entretien__exit::backdrop { background: rgba(2, 10, 24, 0.55); }

.entretien__exit-title { margin: 0 0 0.5rem; color: var(--light-text); font-family: var(--font-display); font-size: var(--text-xl); }
.entretien__exit-text { margin: 0 0 0.75rem; color: var(--light-muted); font-size: var(--text-sm); line-height: 1.55; }

.entretien__exit-recap {
  margin: 0 0 var(--space-md);
  padding: 0.7rem 0.9rem;
  background: var(--light-bg);
  border-radius: var(--radius-md);
  color: var(--light-text);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.entretien__exit-status { margin: 0 0 var(--space-sm); color: #0f7a46; font-size: var(--text-sm); font-weight: 600; }
.entretien__exit-status[hidden] { display: none; }

.entretien__exit-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.entretien__exit-send {
  padding: 0.75rem 1.4rem;
  background: var(--logo-navy);
  border: 0;
  border-radius: var(--radius-pill);
  color: #ffffff;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.entretien__exit-send:hover:not(:disabled) { background: #0e7c8a; }
.entretien__exit-send:disabled { opacity: 0.5; cursor: default; }
.entretien__exit-send[hidden] { display: none; }

.entretien__exit-leave {
  padding: 0.75rem 0.4rem;
  background: none;
  border: 0;
  color: #5b6b82;
  font-family: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.entretien__exit-leave:hover { color: var(--light-text); }
.entretien__exit-send:focus-visible,
.entretien__exit-leave:focus-visible { outline: 2px solid #0e7c8a; outline-offset: 3px; }

.entretien__exit-legal { margin: var(--space-sm) 0 0; color: #5b6b82; font-size: var(--text-xs); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .entretien__intro.is-writing::after { animation: none; opacity: 0.5; }
  .luce--entretien.is-armed .entretien__cues,
  .luce--entretien.is-armed .entretien__ask { opacity: 1; transform: none; transition: none; }
}

/* Effacer la conversation : une sortie de secours, pas une action. */
.entretien__forget {
  align-self: flex-start;
  margin-top: var(--space-sm);
  padding: 0;
  background: none;
  border: 0;
  color: var(--e-dim);
  font-family: inherit;
  font-size: var(--text-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.entretien__forget:hover { color: var(--e-ink); }
.entretien__forget:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 3px; }

/* Petits écrans : avatars réduits, la bulle garde la largeur. */
@media (max-width: 479.98px) {
  .luce--entretien .luce-msg { max-width: calc(100% - 2.3rem); }
  .luce--entretien .luce-msg::before { width: 1.8rem; height: 1.8rem; }
  .luce--entretien .luce-msg--bot  { margin-left: 2.3rem; }
  .luce--entretien .luce-msg--user { margin-right: 2.3rem; }
  .luce--entretien .luce-msg--bot::before  { left: -2.3rem; }
  .luce--entretien .luce-msg--user::before { right: -2.3rem; }
  .entretien__cues { padding-left: var(--space-md); }
  .entretien__thread, .entretien__chathead, .luce--entretien .entretien__ask { padding-inline: 0.85rem; }
}

/* ==========================================================================
   La carte de contact — formulaire au recto, Luce au verso (2026-10-07)
   ==========================================================================
   Le retournement est fait de deux demi-tours d'un seul plan (voir luce.js) : pas de
   `preserve-3d`, pas de `backface-visibility`, pas de `translateZ`. La perspective est sur
   l'enveloppe, la rotation sur `.contact-flip__card`, et l'ombre ne bouge pas.
   -------------------------------------------------------------------------------------- */

.contact-flip {
  --flip-dir: 1;
  min-width: 0;
  perspective: 1800px;
  /* Point de fuite dans le haut de la carte, là où on la regarde : elle est plus haute que
     l'écran, et au centre géométrique le haut partait en biais pendant le demi-tour. */
  perspective-origin: 50% 18rem;
}

.contact-flip.is-turning { transition: height 320ms var(--ease-out); }

/* `display` posé par une classe l'emporterait sur l'attribut. */
.contact-flip__face[hidden] { display: none; }

.contact-flip.is-out .contact-flip__card { animation: contact-flip-out 240ms cubic-bezier(0.5, 0, 0.9, 0.5) forwards; }
.contact-flip.is-in  .contact-flip__card { animation: contact-flip-in  320ms cubic-bezier(0.1, 0.5, 0.3, 1) both; }

@keyframes contact-flip-out {
  to { transform: rotateY(calc(var(--flip-dir) * 90deg)); }
}

@keyframes contact-flip-in {
  from { transform: rotateY(calc(var(--flip-dir) * -90deg)); }
  to   { transform: none; }
}

/* --- Le recto : le formulaire ------------------------------------------- */

.contact-card {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--e-card);
  border: 1px solid var(--e-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(10, 21, 48, 0.1);
  color: var(--e-ink);
  scroll-margin-top: 6rem;
}

.contact-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--e-line);
}

.contact-card__titles { min-width: 0; flex: 1 1 14rem; }
.contact-card__title { margin: 0; color: var(--e-ink); font-size: var(--text-2xl); line-height: 1.15; }
.contact-card__intro { margin: 0.4rem 0 0; color: var(--e-soft); font-size: var(--text-base); line-height: 1.5; }

/* Le formulaire a été écrit pour une bande sombre (theme.css) : mêmes règles, encre claire. */
.contact-card .form--card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.contact-card .form-row--full { grid-column: 1 / -1; }
.contact-card .form-row > span { color: var(--e-soft); }

.contact-card .form input,
.contact-card .form textarea,
.contact-card .form select {
  background: #f3f6fa;
  border-color: var(--e-line);
  color: var(--e-ink);
}

.contact-card .form input:focus,
.contact-card .form textarea:focus,
.contact-card .form select:focus {
  background: #ffffff;
  border-color: var(--e-accent);
  box-shadow: 0 0 0 3px rgba(14, 124, 138, 0.14);
}

.contact-card .form textarea { resize: vertical; min-height: 8rem; }
.contact-card .form-error { color: #b3261e; }
.contact-card .form-notice--success { background: rgba(15, 122, 70, 0.08); border-color: rgba(15, 122, 70, 0.3); color: #0f7a46; }
.contact-card .form-notice--error { background: rgba(179, 38, 30, 0.07); border-color: rgba(179, 38, 30, 0.3); color: #b3261e; }

.contact-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

.contact-card__foot .form-gdpr { flex: 1 1 16rem; margin: 0; color: var(--e-dim); }

@media (max-width: 599.98px) {
  .contact-card .form--card { grid-template-columns: 1fr; }
}

/* --- Le bouton de bascule ------------------------------------------------ */

.contact-flip__switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.9rem 0.45rem 0.45rem;
  background: #ffffff;
  border: 1.5px solid var(--e-accent);
  border-radius: var(--radius-pill);
  color: var(--e-accent);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.contact-flip__switch[hidden] { display: none; }
.contact-flip__switch:hover { background: rgba(14, 124, 138, 0.07); }
.contact-flip__switch:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 3px; }

.contact-flip__switch-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--logo-navy);
  color: var(--logo-teal);
}

.contact-flip__switch-mark svg { width: 62%; height: 62%; }
.contact-flip__switch-text { display: flex; flex-direction: column; line-height: 1.25; }
.contact-flip__switch-label { font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.contact-flip__switch-hint { color: var(--e-dim); font-size: var(--text-xs); }
.contact-flip__switch-turn { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }

/* Au verso, dans l'en-tête de la fenêtre de Luce : même bouton, en plus petit. */
.contact-flip__switch--back { gap: 0.4rem; margin-left: 0.75rem; padding: 0.4rem 0.8rem; }

@media (max-width: 479.98px) {
  .contact-flip__switch { width: 100%; }
  .contact-flip__switch-turn { margin-left: auto; }
  .contact-flip__switch--back { width: auto; margin-left: 0.5rem; padding: 0.5rem; }
  .contact-flip__switch--back .contact-flip__switch-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-flip.is-turning { transition: none; }
  .contact-flip.is-out .contact-flip__card,
  .contact-flip.is-in  .contact-flip__card { animation: none; }
}

.contact-card__foot .form-gdpr a { color: var(--e-accent); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }