/* Outil public « Créer mon CV » (/outils/cv). Fichier simple, sans Tailwind : aucune recompilation nécessaire.
 *
 * 1. Passerelle de variables : les composants du formulaire (f-*, fa-*, cz-*, fe-*) sont écrits pour le tableau de bord
 *    (--card, --line, --text, --brand…). Le site public (layout « home ») nomme ses variables autrement
 *    (--card-bg, --border, --fg, --accent…). On relie les deux dans la zone de l'outil, pour réutiliser les composants
 *    tels quels, clair et sombre compris (var() est résolu à l'endroit où il est lu).
 * 2. Disposition : mobile first (une colonne, aperçu en pastille flottante), puis deux colonnes dès 1024 px
 *    (formulaire à gauche, aperçu A4 collé en haut à droite).
 */

#outil-cv {
  --card: var(--card-bg);
  --line: var(--border);
  --text: var(--fg);
  --brand: var(--accent);
  --brand-soft: var(--accent-soft);
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --ok: #15803d;
  color: var(--fg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #outil-cv { --danger: #f87171; --danger-soft: #2a1717; --ok: #4ade80; }
}
:root[data-theme="dark"] #outil-cv { --danger: #f87171; --danger-soft: #2a1717; --ok: #4ade80; }

/* Zone de l'outil : une colonne sur mobile (place réservée sous le contenu pour la pastille « Aperçu »). */
.cvt-layout { display: grid; gap: 1.25rem; padding-bottom: 5rem; }
.cvt-status { margin: 0 0 .75rem; color: var(--muted); font-size: .75rem; }

/* Champ piège anti-robot : hors écran, jamais rempli par un humain (pas de display:none, que certains robots repèrent). */
.cvt-trap { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Actions : le téléchargement est l'action principale, pleine largeur sur mobile. */
.cvt-actions { display: flex; flex-direction: column-reverse; gap: .6rem; margin-top: 1.25rem; }
.cvt-download {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: .7rem 1.5rem;
  border: 0; border-radius: .75rem; background: var(--brand); color: #fff; font-size: .875rem; font-weight: 700; cursor: pointer;
}
.cvt-download:hover { opacity: .95; }
.cvt-download:disabled { cursor: wait; opacity: .6; }
.cvt-download:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Invitation à créer un compte : panneau flottant après le téléchargement.
   Mobile : au-dessus de la pastille d'aperçu ; PC : en bas à droite. Le contenu défile si l'écran est trop bas. */
.cvt-invite {
  position: fixed; z-index: 70; inset-inline: .75rem; bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 7rem); overflow-y: auto; padding: 1rem 1rem .9rem;
  border: 1px solid var(--brand); border-radius: .95rem; background: var(--card); color: var(--text);
  box-shadow: 0 12px 40px rgb(0 0 0 / 28%);
}
.cvt-invite h3 { margin: 0 2rem .25rem 0; font-size: .9375rem; font-weight: 700; }
.cvt-invite p { margin: 0 0 .75rem; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.cvt-invite-close {
  position: absolute; top: .45rem; inset-inline-end: .45rem; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.cvt-invite-close:hover { background: var(--brand-soft); color: var(--text); }
.cvt-invite-close:focus-visible, .cvt-invite-later:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cvt-invite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.cvt-invite-later { min-height: 2.25rem; padding: 0 .5rem; border: 0; background: transparent; color: var(--muted); font-size: .8125rem; text-decoration: underline; cursor: pointer; }
/* Sur petit écran on ne garde que le titre des cartes, pour que le panneau reste léger. */
.cvt-invite .cvt-card > span:last-child { display: none; }
@media (min-width: 640px) {
  .cvt-invite { inset-inline: auto 1.2rem; bottom: 1.2rem; width: 26rem; }
  .cvt-invite .cvt-cards { grid-template-columns: 1fr; }
  .cvt-invite .cvt-card { grid-template-columns: auto 1fr; }
  .cvt-invite .cvt-card > span:first-child { grid-row: span 2; }
  .cvt-invite .cvt-card > span:last-child { display: block; }
}
@media (min-width: 1024px) { .cvt-invite { bottom: 1.5rem; } }

@media (min-width: 640px) {
  .cvt-actions { flex-direction: row; justify-content: flex-end; }
}

/* PC : deux colonnes ; l'aperçu reste visible pendant que le formulaire défile. */
@media (min-width: 1024px) {
  .cvt-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: start; padding-bottom: 0; }
  .cvt-preview { position: sticky; top: 5.5rem; }
}
@media (min-width: 1280px) {
  .cvt-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
}

/* ---------- Bouton « Design : … » de l'éditeur (retour à l'étape Design) ---------- */
.cvt-design-btn {
  display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.9rem; margin-bottom: .75rem; padding: .5rem .9rem;
  border: 1px solid var(--line); border-radius: .75rem; background: var(--card); color: var(--text);
  font-size: .8125rem; text-align: start; cursor: pointer;
}
.cvt-design-btn:hover { border-color: var(--brand); }
.cvt-design-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cvt-design-change { margin-inline-start: auto; color: var(--brand); font-weight: 600; text-decoration: underline; }

/* ---------- Étape Design : une vignette par thème (une colonne sur mobile, trois dès 768 px) ---------- */
.cvd-title { margin: 0 0 .5rem; font-size: 1.375rem; font-weight: 800; text-align: center; }
.cvd-intro { max-width: 40rem; margin: 0 auto 1.25rem; color: var(--muted); font-size: .875rem; line-height: 1.55; text-align: center; }
.cvd-error { margin: 0 0 .75rem; color: var(--danger); font-size: .75rem; text-align: center; }

.cvd-grid { display: grid; gap: 1.25rem; padding-bottom: 1rem; }
.cvd-card { display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--line); border-radius: 1rem; background: var(--card); }
.cvd-card.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* Vignette : le haut du CV, à l'échelle de la colonne (calcul dans cv-design-picker.js). Le clic traverse l'iframe. */
.cvd-thumb { position: relative; overflow: hidden; background: #fff; cursor: pointer; }
.cvd-thumb iframe { display: block; border: 0; background: #fff; pointer-events: none; }
.cvd-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: .75rem; background: #fff; }

.cvd-body { display: grid; gap: .6rem; padding: .9rem 1rem 1rem; }
.cvd-name { margin: 0; font-size: 1.0625rem; font-weight: 800; }
.cvd-tagline { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.45; }

/* Palettes : pastilles rondes dont la zone de toucher fait 44 px ; l'état choisi = anneau + coche (pas la couleur seule). */
.cvd-palettes { display: flex; flex-wrap: wrap; gap: .1rem; }
.cvd-dot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.cvd-dot-fill { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid rgb(0 0 0 / 18%); transition: transform .15s; }
.cvd-dot:hover .cvd-dot-fill { transform: scale(1.1); }
.cvd-dot-check { position: absolute; color: #fff; font-size: .8rem; font-weight: 800; text-shadow: 0 0 3px rgb(0 0 0 / 70%); opacity: 0; }
.cvd-dot[aria-pressed="true"] .cvd-dot-fill { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--brand); }
.cvd-dot[aria-pressed="true"] .cvd-dot-check { opacity: 1; }
.cvd-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 50%; }

.cvd-choose {
  min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--brand); border-radius: .75rem; background: transparent; color: var(--brand);
  font-size: .8125rem; font-weight: 700; cursor: pointer;
}
.cvd-choose[aria-pressed="true"] { background: var(--brand); color: #fff; }
.cvd-choose:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Barre « Continuer » : collée en bas de l'écran pendant le défilement des thèmes. */
.cvd-bar { position: sticky; bottom: 0; z-index: 30; margin-inline: -1.25rem; padding: .7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--card); box-shadow: 0 -6px 20px rgb(0 0 0 / 8%); }
.cvd-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; max-width: 72rem; margin: 0 auto; }
.cvd-bar-text { display: grid; min-width: 0; font-size: .875rem; }
.cvd-bar-label { color: var(--muted); font-size: .6875rem; }
.cvd-bar-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 768px) {
  .cvd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .cvd-dot-fill { transition: none; }
}

/* ---------- Navigation de l'accordéon (Précédent / Suivant ou Passer / Terminer), avancement ---------- */
.cvt-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: 1rem; }
.cvt-nav > button { min-height: 2.75rem; justify-content: center; margin: 0; }
.cvt-nav > .f-btn-add { margin-inline-start: auto; }

.cvt-progress { margin-bottom: .75rem; }
.cvt-progress-track { height: .4rem; overflow: hidden; border-radius: 999px; background: var(--line); }
.cvt-progress-fill { height: 100%; border-radius: 999px; background: var(--brand); transition: width .25s ease; }
.cvt-progress-text { display: block; margin-top: .3rem; color: var(--muted); font-size: .6875rem; }
@media (prefers-reduced-motion: reduce) { .cvt-progress-fill { transition: none; } }

/* ---------- Invitation après téléchargement : cartes (CV en ligne, portfolio, services) ---------- */
.cvt-cards { display: grid; gap: .6rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.cvt-card { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--card); }
.cvt-card > span:first-child { grid-row: span 2; font-size: 1.4rem; line-height: 1.2; }
.cvt-card strong { font-size: .8125rem; }
.cvt-card > span:last-child { color: var(--muted); font-size: .75rem; line-height: 1.45; }
@media (min-width: 640px) { .cvt-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cvt-card { grid-template-columns: 1fr; } .cvt-card > span:first-child { grid-row: auto; } }

/* Note sous le titre de l'aperçu (repères gris, clic sur le CV). */
.cvt-hint-note { margin: 0 0 .6rem; color: var(--muted); font-size: .6875rem; line-height: 1.45; }