/* Diagnostic Google gratuit: the call-back questionnaire (js/diagnostic.js,
   markup from scripts/diagnostic.py). On the home pages and the case-study
   pages. Uses the palette and --rule, --ease-ui, --ease-soft from style.css.

/* ---------- the questionnaire ----------
   A banner first (one question, five buttons, a small slice of the screen),
   so it never covers the page uninvited. It only grows into a panel once
   the visitor taps an answer. Google's page-experience guidance allows the
   banner; the panel is the visitor's own doing. */

.ec-pop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  pointer-events: none;
  /* A floating card, not a strip glued to the edge: 12px clear of the sides
     and 16px above the bottom (plus the phone's home-bar area), so a thumb
     reaching for Safari's toolbar or the home gesture never lands on it. */
  padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px));
}
.ec-pop[hidden] { display: none; }
.ec-pop__form {
  pointer-events: auto;
  width: 100%;
  max-width: 1200px;
  background: var(--bleu-nuit);
  color: var(--blanc-neige);
  border: var(--rule) solid var(--blanc-neige);
  border-top: 4px solid var(--ambre);
  padding: 12px 16px 16px;
  max-height: min(84svh, 700px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(110%);
  transition: transform 340ms var(--ease-soft);
}
.ec-pop.is-shown .ec-pop__form { transform: none; }
@media (min-width: 900px) {
  .ec-pop { padding: 0 24px 24px; }
  .ec-pop:not(.is-open) .ec-pop__form { max-width: 980px; }
  .ec-pop__form { padding: 16px 28px 22px; }
  .ec-pop.is-open .ec-pop__form { max-width: 620px; }
}
@media (prefers-reduced-motion: reduce) { .ec-pop__form { transition: none; } }

.ec-pop__top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ec-pop__kicker { font-size: 14px; font-weight: 600; color: var(--ambre); }
.ec-pop__count { font-size: 13px; color: var(--bleu-givre); font-variant-numeric: tabular-nums lining-nums; }
.ec-pop__close {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: var(--rule) solid var(--bleu-chouette);
  color: var(--blanc-neige);
  cursor: pointer;
  flex: 0 0 auto;
}
.ec-pop__close .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }
@media (hover: hover) { .ec-pop__close:hover { border-color: var(--blanc-neige); } }

.ec-pop__progress { height: 4px; background: var(--bleu-chouette); margin-bottom: 14px; }
.ec-pop__progress span { display: block; height: 100%; width: 15%; background: var(--ambre); transition: width 300ms var(--ease-ui); }

.ec-pop__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.ec-pop__step[hidden] { display: none; }
.ec-pop__q { display: block; padding: 0; font-size: clamp(1.125rem, 2.6vw, 1.375rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 12px; color: var(--blanc-neige); }
.ec-pop__note { margin: 10px 0 0; font-size: 13px; color: var(--bleu-givre); }

.ec-chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* In the banner, one row that scrolls sideways on a phone, so the banner
   stays short. */
.ec-pop:not(.is-open) .ec-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-right: -16px;
  padding-right: 16px;
}
.ec-pop:not(.is-open) .ec-chips::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .ec-pop:not(.is-open) .ec-chips { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; } }
.ec-chips--stack { flex-direction: column; }
.ec-chip {
  flex: 0 0 auto;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  min-height: 48px;
  padding: 10px 16px;
  background: var(--blanc-neige);
  color: var(--bleu-nuit);
  border: var(--rule) solid var(--blanc-neige);
  cursor: pointer;
}
.ec-chip[aria-pressed="true"] { background: var(--ambre); border-color: var(--ambre); }
@media (hover: hover) { .ec-chip:hover { background: var(--ambre); border-color: var(--ambre); } }
.ec-chip:focus-visible { outline: 2px solid var(--ambre); outline-offset: 2px; }

.ec-pop__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  min-height: 40px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--bleu-givre);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.ec-pop__back .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }

.ec-pop__why { margin: 0 0 8px; font-size: 1rem; line-height: 1.45; color: var(--blanc-neige); }
.ec-pop__offer { margin: 0 0 16px; font-size: 1rem; line-height: 1.45; color: var(--bleu-givre); }
.ec-pop__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
@media (min-width: 560px) { .ec-pop__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ec-pop__field { display: grid; gap: 6px; font-size: 14px; color: var(--bleu-givre); }
.ec-pop__field input {
  font: inherit;
  font-size: 1.0625rem;
  min-height: 52px;
  padding: 10px 14px;
  background: var(--blanc-neige);
  color: var(--bleu-nuit);
  border: var(--rule) solid var(--blanc-neige);
  min-width: 0;
}
.ec-pop__field input:focus-visible { outline: 2px solid var(--ambre); outline-offset: 2px; }
.ec-pop__field input[aria-invalid="true"] { border-color: var(--ambre); }
.ec-pop__err { margin: 0 0 12px; padding: 8px 12px; background: var(--ambre); color: var(--bleu-nuit); font-size: 15px; font-weight: 600; }
.ec-pop__err a { color: var(--bleu-nuit); }
.ec-pop__submit { width: 100%; justify-content: center; min-height: 56px; }
.ec-pop__submit[disabled] { opacity: 0.7; cursor: wait; }
.ec-pop__promise { margin: 10px 0 0; font-size: 14px; color: var(--blanc-neige); }
.ec-pop__alt { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; font-size: 15px; align-items: center; }
.ec-pop__alt span { color: var(--bleu-givre); }
.ec-pop__alt a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--blanc-neige); text-decoration: none; border-bottom: 1px solid var(--bleu-givre); }
.ec-pop__alt .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.ec-pop__legal { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--bleu-givre); }
.ec-pop__legal a { color: var(--blanc-neige); }
.ec-pop__done p { margin: 0 0 8px; font-size: 1.0625rem; }
.ec-pop__done .ec-pop__q { font-size: clamp(1.375rem, 3vw, 1.75rem); }
.ec-pop__done:focus { outline: none; }
/* The banner stays short: no progress bar or note until it is opened. */
.ec-pop:not(.is-open) .ec-pop__progress,
.ec-pop:not(.is-open) .ec-pop__count { display: none; }
.ec-pop:not(.is-open) .ec-pop__top { margin-bottom: 2px; }
.ec-pop:not(.is-open) .ec-pop__q { margin-bottom: 10px; }
.ec-pop:not(.is-open) .ec-pop__close { width: 40px; height: 40px; }
@media (max-width: 899px) { .ec-pop:not(.is-open) .ec-pop__note { display: none; } }
.ec-pop .ac-btn--amber:hover { background: var(--blanc-neige); color: var(--bleu-nuit); border-color: var(--blanc-neige); }

/* The page's own .ec rules don't reach the home pages: the button icon here. */
.ec-pop .ac-btn .icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.ec-pop .ac-btn { gap: 10px; }

/* ---------- the way back ----------
   Closed with the X, the questionnaire leaves this button in the corner, so
   the visitor can come back to it on any page that has it. Never shown
   while the questionnaire is open, nor once it has been sent. */

.ec-pop-reopen {
  position: fixed;
  right: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 29;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bleu-nuit);
  background: var(--ambre);
  border: var(--rule) solid var(--bleu-nuit);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(4, 44, 83, 0.25);
}
.ec-pop-reopen[hidden] { display: none; }
.ec-pop-reopen .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.ec-pop-reopen:focus-visible { outline: 2px solid var(--bleu-nuit); outline-offset: 3px; }
@media (hover: hover) { .ec-pop-reopen:hover { background: var(--bleu-nuit); color: var(--ambre); } }
/* Above the case study's call bar on phones. */
@media (max-width: 899px) { .ec-has-sticky .ec-pop-reopen { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 900px) { .ec-pop-reopen { right: 24px; bottom: 24px; } }
@media print { .ec-pop, .ec-pop-reopen { display: none !important; } }