/* ==========================================================================
   L'atelier à CV : la pièce sombre.

   Le score ATS est sur papier crème, l'atelier est sur encre du haut en bas.
   On ne change pas d'onglet, on change de pièce (DESIGN.md, section 2).
   Aucune couleur en dur : tout vient de design-tokens.css.
   ========================================================================== */

.atelier-page { background: var(--nuit); color: var(--sur-nuit); }

.largeur-atelier { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--esp-3); }

.atelier { padding: var(--esp-6) 0 var(--esp-12); }

/* ---------- Le chargement ---------- */

.atelier-chargement { padding: var(--esp-6) 0; }
.atelier-squelette { background: var(--nuit-creuse); border-radius: var(--r-champ); animation: atelier-respire 1.4s ease-in-out infinite; }
.atelier-squelette-titre { width: min(420px, 70%); height: 48px; margin-bottom: var(--esp-3); }
.atelier-squelette-chapo { width: min(560px, 90%); height: 20px; }
@keyframes atelier-respire { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- Le hub : arrivée, tes CV, les modèles ---------- */

.atelier-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.atelier-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--esp-8); align-items: center; padding: var(--esp-4) 0 var(--esp-6); }
.atelier-surtitre { margin: 0 0 var(--esp-2); display: flex; align-items: center; gap: 10px; font-size: var(--t-interface); letter-spacing: .04em; color: var(--sur-nuit-doux); }
.atelier-surtitre::before { content: ""; width: 28px; height: 2px; background: var(--orange); border-radius: 2px; }
.atelier-titre { margin: 0 0 var(--esp-3); font-size: var(--t-page); line-height: 1.02; letter-spacing: -.03em; font-weight: var(--graisse-titre); text-wrap: balance; }
.atelier-titre em { font-style: normal; color: var(--orange); }
.atelier-chapo { margin: 0 0 var(--esp-4); max-width: 52ch; font-size: 1.125rem; line-height: 1.6; color: var(--sur-nuit-doux); }
.atelier-entrees { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--esp-4); }
.atelier-bouton { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 1.5px solid transparent; border-radius: var(--r-bouton); font: inherit; font-weight: var(--graisse-moyen); text-decoration: none; cursor: pointer; transition: transform var(--dur-court) var(--ease-sortie), background var(--dur) ease, border-color var(--dur) ease; }
.atelier-bouton:active { transform: scale(.98); }
.atelier-bouton-primaire { color: var(--sur-bleu); background: var(--blue); }
.atelier-bouton-primaire:hover { background: var(--blue-light); }
.atelier-bouton-contour { color: var(--sur-nuit); background: transparent; border-color: var(--nuit-ligne); }
.atelier-bouton-contour:hover { background: var(--nuit-creuse); border-color: var(--sur-nuit-doux); }
.atelier-bouton:focus-visible, .atelier-carte-cv:focus-visible, .atelier-modele:focus-visible, .atelier-rejouer:focus-visible, .atelier-interrupteur button:focus-visible { outline: none; box-shadow: var(--focus-anneau); }
.atelier-preuves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; max-width: 560px; margin: 0; padding: 0; list-style: none; }
.atelier-preuves li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-interface); line-height: 1.4; color: var(--sur-nuit-doux); }
.atelier-preuves svg, .atelier-icone { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.atelier-preuves svg { margin-top: 1px; color: var(--sur-nuit-succes); }

/* La feuille de démonstration : un seul mouvement orchestré, une seule fois. */
.atelier-scene { position: relative; display: grid; place-items: center; padding: var(--esp-3) 0; }
.atelier-feuille { position: relative; width: min(100%, 420px); aspect-ratio: 1 / 1.414; background: #fff; border-radius: 4px; box-shadow: var(--ombre-feuille); }
.atelier-feuille img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 4px; }
.atelier-feuille .avec { opacity: 0; }
.atelier-composition { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; clip-path: inset(0 0 100% 0); }
.atelier-balayage { position: absolute; left: -6%; right: -6%; top: 0; height: 2px; background: var(--sur-nuit-doux); opacity: 0; }
.atelier-puce { position: absolute; display: flex; align-items: center; gap: 12px; background: var(--nuit-creuse); border: 1px solid var(--nuit-ligne); opacity: 0; transform: translateY(8px); }
.atelier-puce-ia { left: -40px; top: 22%; padding: 10px 16px 10px 12px; border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(4, 5, 22, .7); }
.atelier-puce strong { display: block; font-size: var(--t-interface); font-weight: var(--graisse-moyen); }
.atelier-puce span { display: block; font-size: .75rem; color: var(--sur-nuit-doux); }
.atelier-puce-jumeau { right: -22px; top: 6%; padding: 7px 12px; border-radius: var(--r-bouton); font-size: .75rem; color: var(--sur-nuit-doux); }
.atelier-anneau { width: 46px; height: 46px; flex: none; }
.atelier-anneau circle { fill: none; stroke-width: 5; }
.atelier-anneau .fond { stroke: var(--nuit-ligne); }
.atelier-anneau .val { stroke: var(--sur-nuit); stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 113; transform: rotate(-90deg); transform-origin: 50% 50%; }
.atelier-anneau text { fill: var(--sur-nuit); font-family: var(--police-chiffres); font-size: 15px; font-weight: 700; }
.atelier-paraphe { position: absolute; right: 8%; bottom: 7%; width: 34%; overflow: visible; }
.atelier-paraphe path { fill: none; stroke: var(--orange); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.atelier-rejouer { position: absolute; right: 0; bottom: -4px; padding: 8px; background: none; border: 0; font: inherit; font-size: .75rem; color: var(--sur-nuit-doux); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.atelier-scene.joue .atelier-composition { animation: atelier-composer 3.2s cubic-bezier(.45, .05, .25, 1) .5s forwards; }
.atelier-scene.joue .atelier-balayage { animation: atelier-balayer 3.2s cubic-bezier(.45, .05, .25, 1) .5s forwards; }
.atelier-scene.joue .atelier-puce-ia { animation: atelier-entrer var(--dur-long) var(--ease-sortie) 3.9s forwards; }
.atelier-scene.joue .atelier-anneau .val { animation: atelier-remplir 1.1s var(--ease-sortie) 4s forwards; }
.atelier-scene.joue .atelier-feuille .avec { animation: atelier-apparaitre 700ms ease 5s forwards; }
.atelier-scene.joue .atelier-puce-jumeau { animation: atelier-entrer var(--dur-long) var(--ease-sortie) 5.1s forwards; }
.atelier-scene.joue .atelier-paraphe path { animation: atelier-tracer 1.2s cubic-bezier(.5, 0, .2, 1) 6s forwards; }
@keyframes atelier-composer { to { clip-path: inset(0 0 0 0); } }
@keyframes atelier-balayer { 0% { top: 0; opacity: 1; } 96% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes atelier-entrer { to { opacity: 1; transform: none; } }
@keyframes atelier-remplir { to { stroke-dashoffset: 7; } }
@keyframes atelier-apparaitre { to { opacity: 1; } }
@keyframes atelier-tracer { to { stroke-dashoffset: 0; } }
.atelier-scene.fini .atelier-composition { clip-path: inset(0); }
.atelier-scene.fini .atelier-puce { opacity: 1; transform: none; }
.atelier-scene.fini .atelier-anneau .val { stroke-dashoffset: 7; }
.atelier-scene.fini .atelier-feuille .avec { opacity: 1; }
.atelier-scene.fini .atelier-paraphe path { stroke-dashoffset: 0; }

.atelier-bloc { padding: var(--esp-6) 0; }
.atelier-bloc-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.atelier-bloc h2 { margin: 0; font-size: var(--t-section); letter-spacing: -.02em; line-height: 1.1; font-weight: var(--graisse-titre); }
.atelier-bloc-aide { margin: 6px 0 0; max-width: 62ch; font-size: var(--t-interface); color: var(--sur-nuit-doux); }

/* Tes CV : une carte par candidature pas encore envoyée, le CV de référence, un nouveau CV. */
.atelier-mes-cv { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
.atelier-carte-cv { display: flex; flex-direction: column; gap: 12px; width: 100%; height: 100%; padding: 16px; font: inherit; color: inherit; text-align: left; background: var(--nuit-creuse); border: 1px solid var(--nuit-ligne); border-radius: var(--r-carte); cursor: pointer; transition: transform var(--dur) var(--ease-sortie), border-color var(--dur) ease, background var(--dur) ease; }
.atelier-carte-cv:hover { transform: translateY(-4px); border-color: var(--sur-nuit-doux); background: var(--nuit-haute); }
.atelier-carte-cv[aria-pressed="true"] { border-color: var(--orange); }
.atelier-vignette { display: grid; place-items: center; aspect-ratio: 1 / .8; border-radius: 8px; background: var(--nuit); border: 1px solid var(--nuit-ligne); color: var(--sur-nuit-doux); }
.atelier-vignette .atelier-icone { width: 30px; height: 30px; }
.atelier-carte-cv h3 { margin: 0; font-size: var(--t-corps); font-weight: var(--graisse-moyen); line-height: 1.25; }
.atelier-carte-cv p { margin: 2px 0 0; font-size: .75rem; line-height: 1.45; color: var(--sur-nuit-doux); }
.atelier-etat { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; color: var(--sur-nuit); }
.atelier-etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sur-nuit-succes); }
.atelier-etat-manque::before { background: var(--sur-nuit-alerte); }
.atelier-action { margin-top: auto; padding-top: 4px; font-size: var(--t-interface); font-weight: var(--graisse-moyen); color: var(--sur-nuit); }
.atelier-carte-nouveau { align-items: center; justify-content: center; min-height: 200px; text-align: center; background: transparent; border-style: dashed; color: var(--sur-nuit-doux); }
.atelier-vide { margin: 0; font-size: var(--t-interface); line-height: 1.5; color: var(--sur-nuit-doux); }
.atelier-note { margin: var(--esp-2) 0 0; font-size: var(--t-interface); color: var(--sur-nuit-doux); }

/* Un CV généraliste : la carte s'ouvre d'un clic, ses outils sont des boutons à part (jamais un bouton dans un bouton). */
.atelier-carte-groupe { display: flex; flex-direction: column; height: 100%; }
.atelier-carte-groupe .atelier-carte-cv { flex: 1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.atelier-carte-outils { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; background: var(--nuit-creuse); border: 1px solid var(--nuit-ligne); border-top: 0; border-radius: 0 0 var(--r-carte) var(--r-carte); }
.atelier-outil { min-height: 36px; padding: 0 10px; font: inherit; font-size: .8125rem; color: var(--sur-nuit-doux); background: transparent; border: 0; border-radius: var(--r-champ); cursor: pointer; }
.atelier-outil:hover { color: var(--sur-nuit); background: var(--nuit-haute); }
.atelier-outil:focus-visible { outline: none; box-shadow: var(--focus-anneau); }
.atelier-outil[disabled] { opacity: .5; cursor: progress; }
.atelier-outil-danger { color: var(--sur-nuit-alerte); }
.atelier-renommer { display: flex; gap: 6px; }
.atelier-renommer input { flex: 1; min-width: 0; min-height: 40px; padding: 0 10px; font: inherit; color: var(--sur-nuit); background: var(--nuit); border: 1px solid var(--nuit-champ); border-radius: var(--r-champ); }
.atelier-renommer input:focus-visible { outline: none; box-shadow: var(--focus-anneau); }

/* Ce qui est parti : une ligne par candidature envoyée, avec la copie du CV. */
.atelier-envoyes { display: grid; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.atelier-envoye { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); padding: 14px 16px; background: var(--nuit-creuse); border: 1px solid var(--nuit-ligne); border-radius: var(--r-carte); }
.atelier-envoye h3 { margin: 0; font-size: var(--t-corps); font-weight: var(--graisse-moyen); }
.atelier-envoye p { margin: 2px 0 0; font-size: .8125rem; color: var(--sur-nuit-doux); }

/* La galerie des neuf modèles. */
.atelier-interrupteur { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border: 1px solid var(--nuit-ligne); border-radius: var(--r-bouton); background: var(--nuit-creuse); font-size: var(--t-interface); }
.atelier-interrupteur button { position: relative; width: 48px; height: 28px; padding: 0; border: 0; border-radius: var(--r-bouton); background: var(--nuit-ligne); cursor: pointer; transition: background var(--dur) ease; }
.atelier-interrupteur button::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--sur-nuit); transition: transform var(--dur) var(--ease-sortie); }
.atelier-interrupteur button[aria-pressed="true"] { background: var(--blue); }
.atelier-interrupteur button[aria-pressed="true"]::after { transform: translateX(20px); }
.atelier-galerie { display: grid; grid-auto-flow: column; grid-auto-columns: 210px; gap: var(--esp-3); margin: 0; padding: 8px 4px 28px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--nuit-ligne) transparent; }
.atelier-galerie li { scroll-snap-align: start; }
.atelier-modele { display: grid; gap: 12px; width: 100%; padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: default; perspective: 900px; }
.atelier-modele-feuille { position: relative; aspect-ratio: 1 / 1.414; background: #fff; border-radius: 4px; box-shadow: 0 16px 32px -14px rgba(4, 5, 22, .85); transition: transform var(--dur-court) linear, box-shadow var(--dur) ease; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
.atelier-modele:hover .atelier-modele-feuille { box-shadow: 0 26px 44px -14px rgba(4, 5, 22, .95); }
.atelier-modele-feuille img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 4px; transition: opacity var(--dur-long) ease; }
.atelier-modele-feuille .avec { opacity: 0; }
.atelier-galerie.avec-photo .atelier-modele-feuille .avec { opacity: 1; }
.atelier-modele strong { display: block; font-weight: var(--graisse-moyen); }
.atelier-modele .pour { display: block; font-size: .75rem; color: var(--sur-nuit-doux); }

/* Ce que les autres ne font pas : trois tuiles, chacune avec sa démonstration. */
.atelier-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
.atelier-tuile { display: flex; flex-direction: column; gap: 14px; padding: var(--esp-3); background: var(--nuit-creuse); border: 1px solid var(--nuit-ligne); border-radius: var(--r-carte); }
.atelier-tuile h3 { margin: 0; font-size: 1.125rem; font-weight: var(--graisse-titre); letter-spacing: -.01em; line-height: 1.2; }
.atelier-tuile > p { margin: 0; font-size: var(--t-interface); line-height: 1.55; color: var(--sur-nuit-doux); }
.atelier-demo { margin-top: auto; padding: 14px; border-radius: 12px; background: var(--nuit); border: 1px solid var(--nuit-ligne); font-size: .75rem; }
.atelier-lecture { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.atelier-lecture figure { margin: 0; }
.atelier-lecture figcaption { margin-top: 8px; text-align: center; color: var(--sur-nuit-doux); }
.atelier-lecture .page { display: grid; gap: 5px; padding: 8px; background: #fff; border-radius: 4px; }
.atelier-lecture .page.deux { grid-template-columns: 1fr 1.6fr; }
.atelier-lecture .col { display: grid; gap: 5px; }
.atelier-lecture .b { display: grid; place-items: center; min-height: 26px; background: #ECEEF8; border-radius: 3px; font-family: var(--police-chiffres); font-weight: 700; font-size: 12px; color: var(--ink); }
.atelier-lecture .b.faux { background: #FFE2D6; color: var(--orange-texte); }
.atelier-proposition { padding: 10px 12px; border-radius: 8px; background: var(--nuit-creuse); line-height: 1.5; }
.atelier-proposition + .atelier-proposition { margin-top: 8px; }
.atelier-proposition s { color: var(--sur-nuit-doux); text-decoration-color: var(--sur-nuit-alerte); }
.atelier-proposition .motif { display: block; margin-top: 4px; color: var(--sur-nuit-alerte); }
.atelier-proposition.ok { border: 1px solid rgba(123, 224, 176, .35); }
.atelier-proposition .garde { display: block; margin-top: 4px; color: var(--sur-nuit-succes); }
.atelier-coffre { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: center; }
.atelier-coffre .noeud { flex: 1; padding: 12px 6px; border-radius: 10px; background: var(--nuit-creuse); border: 1px solid var(--nuit-ligne); }
.atelier-coffre .noeud svg { display: block; margin: 0 auto 6px; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.atelier-coffre .non { opacity: .6; border-style: dashed; }
.atelier-coffre .barre { color: var(--sur-nuit-alerte); flex: none; }
.atelier-coffre .garde { color: var(--sur-nuit-succes); }

/* Notre règle, une ligne repliable. */
.atelier-regle { margin-top: var(--esp-4); padding: var(--esp-2) var(--esp-3); border-left: 2px solid var(--orange); background: var(--nuit-creuse); border-radius: 0 var(--r-champ) var(--r-champ) 0; }
.atelier-regle summary { cursor: pointer; font-weight: var(--graisse-moyen); }
.atelier-regle p { margin: var(--esp-1) 0 0; font-size: var(--t-interface); line-height: 1.6; color: var(--sur-nuit-doux); }
.atelier-regle b { color: var(--sur-nuit); }
.atelier-pied { padding: var(--esp-6) 0 0; text-align: center; font-size: var(--t-interface); color: var(--sur-nuit-doux); }

@media (max-width: 1100px) {
  .atelier-hero { grid-template-columns: 1fr; gap: var(--esp-6); }
  .atelier-feuille { width: min(100%, 380px); }
  .atelier-tuiles { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .atelier-puce-ia { left: -6px; top: 14%; }
  .atelier-puce-jumeau { right: -6px; }
  .atelier-preuves { grid-template-columns: 1fr; }
  .atelier-mes-cv { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .atelier-scene .atelier-composition { clip-path: inset(0); }
  .atelier-scene .atelier-puce { opacity: 1; transform: none; animation: none; }
  .atelier-scene .atelier-anneau .val { stroke-dashoffset: 7; animation: none; }
  .atelier-scene .atelier-feuille .avec { opacity: 1; animation: none; }
  .atelier-scene .atelier-paraphe path { stroke-dashoffset: 0; animation: none; }
  .atelier-scene .atelier-composition, .atelier-scene .atelier-balayage { animation: none; }
  .atelier-modele-feuille { transform: none; transition: none; }
}

/* ---------- L'écran déconnecté ---------- */

.atelier-debut { max-width: 46ch; margin: var(--esp-8) auto; text-align: center; }
.atelier-debut-paraf { display: block; margin: 0 auto var(--esp-3); }
.atelier-debut-titre { margin: 0 0 var(--esp-2); font-size: var(--t-section); font-weight: var(--graisse-titre); line-height: var(--interligne-titre); }
.atelier-debut-texte { margin: 0 0 var(--esp-4); color: var(--sur-nuit-doux); }

/* ---------- L'éditeur : une pièce entière, l'établi ---------- */

/* Dans l'éditeur, les jetons du site clair sont redéfinis en versions « encre » : tous les champs, boutons et
   cartes de la colonne de gauche passent sur l'établi sans une règle de plus. La feuille de CV (.editeur-cadre)
   reste blanche : c'est le seul objet clair de la pièce. */
.atelier-panneau {
  --paper: var(--nuit-creuse);
  --surface: var(--nuit-haute);
  --surface-survol: var(--nuit-relief);
  --surface-creuse: var(--nuit);
  --ink: var(--sur-nuit);
  --muted: var(--sur-nuit-doux);
  --line: var(--nuit-ligne);
  --metal: var(--nuit-champ);
  --blue-dark: var(--sur-nuit-doux);
  --fond-neutre: var(--nuit-haute);
  --fond-succes: var(--nuit-fond-succes);
  --succes-texte: var(--sur-nuit-succes);
  --alerte-texte: var(--sur-nuit-alerte);
  --attention-texte: var(--sur-nuit-alerte);
  --green-fonce: var(--sur-nuit-succes);
  --focus-anneau: 0 0 0 3px rgba(175, 181, 232, 0.55);
  --ombre-carte: var(--ombre-feuille);
  --ombre-fenetre: 0 24px 60px rgba(4, 5, 22, 0.6);

  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--nuit);
  z-index: var(--z-fenetre);
  animation: atelier-entre var(--dur-long) var(--ease-sortie);
}

@keyframes atelier-entre { from { opacity: 0; transform: scale(.985); } }

.atelier-panneau-tete {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.atelier-retour {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--esp-2) 0 var(--esp-1);
  font: inherit;
  font-size: var(--t-interface);
  font-weight: var(--graisse-moyen);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-bouton);
  cursor: pointer;
}

.atelier-retour:hover { background: var(--surface-survol); }
.atelier-retour:focus-visible { outline: none; box-shadow: var(--focus-anneau); }
.atelier-retour svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.atelier-panneau-titres { min-width: 0; }
.atelier-panneau-tete h2 { margin: 0; font-size: var(--t-corps); font-weight: var(--graisse-titre); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atelier-panneau-tete p { margin: 2px 0 0; font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atelier-panneau-barre { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }

.atelier-panneau-corps { flex: 1; min-height: 0; padding: 0; overflow: hidden; display: flex; }

@media (prefers-reduced-motion: reduce) {
  .atelier-squelette, .atelier-panneau { animation: none; }
}

/* ==========================================================================
   L'éditeur (DESIGN.md, section 7). À gauche les cinq étapes du travail,
   au centre le CV sur l'établi, que l'on modifie en cliquant sur ses lignes.
   Le bleu est la couleur de l'action ; l'orange reste réservé à la signature.
   ========================================================================== */

.editeur { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 384px minmax(0, 1fr); }

/* --- La colonne de gauche --- */

.editeur-rail { min-height: 0; display: flex; flex-direction: column; background: var(--paper); border-right: 1px solid var(--line); }

/* Les cinq étapes, dans l'ordre du travail. Le numéro est de la même famille que les chiffres de mesure du site. */
.editeur-etapes { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin: 0; padding: var(--esp-1) var(--esp-2) 0; list-style: none; border-bottom: 1px solid var(--line); }
.editeur-etape-bouton { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; width: 100%; min-height: 64px; padding: 8px 2px 10px; font: inherit; font-size: .75rem; line-height: 1.25; text-align: center; color: var(--muted); background: transparent; border: 0; border-radius: var(--r-champ) var(--r-champ) 0 0; cursor: pointer; transition: color var(--dur-court) var(--ease-sortie), background var(--dur-court) var(--ease-sortie); }
.editeur-etape-bouton:hover { color: var(--ink); background: var(--surface-survol); }
.editeur-etape-bouton:focus-visible { outline: none; box-shadow: var(--focus-anneau); }
.editeur-etape-bouton[aria-current="step"] { color: var(--ink); font-weight: var(--graisse-moyen); }
.editeur-etape-bouton[aria-current="step"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--blue-light); border-radius: 2px; }
.editeur-etape-numero { display: grid; place-items: center; width: 28px; height: 28px; font-family: var(--police-chiffres); font-size: .8125rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 50%; }
.editeur-etape-bouton[aria-current="step"] .editeur-etape-numero { color: var(--sur-bleu); background: var(--blue); border-color: var(--blue); }

.editeur-etape { flex: 1; min-height: 0; overflow: auto; padding: var(--esp-3); }
.editeur-etape[hidden] { display: none; }
.editeur-bloc { margin: 0 0 var(--esp-3); padding-bottom: var(--esp-3); border-bottom: 1px solid var(--line); }
.editeur-bloc:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.editeur-bloc-titre { margin: 0 0 var(--esp-0-5); font-size: var(--t-corps); font-weight: var(--graisse-titre); line-height: var(--interligne-titre); }
.editeur-sous-titre { margin: var(--esp-2) 0 var(--esp-0-5); font-size: var(--t-interface); font-weight: var(--graisse-titre); }
.editeur-aide { margin: 0 0 var(--esp-1); font-size: var(--t-interface); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.editeur-aide-haut { margin-top: var(--esp-2); }
.editeur-prudence { padding-left: 12px; border-left: 1px solid var(--metal); }
.editeur-etiquette { display: block; margin: var(--esp-1) 0 4px; font-size: var(--t-interface); font-weight: var(--graisse-moyen); color: var(--ink); }

.editeur-champ {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: var(--t-corps);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--metal);
  border-radius: var(--r-champ);
}

textarea.editeur-champ { resize: vertical; line-height: 1.5; }
.editeur-champ[aria-invalid="true"] { border-color: var(--alerte); }
.editeur-erreur { margin: 4px 0 0; font-size: var(--t-interface); line-height: 1.45; color: var(--alerte-texte); }

.editeur-lien {
  min-height: 44px;
  padding: 0;
  font: inherit;
  font-size: var(--t-interface);
  font-weight: var(--graisse-moyen);
  color: var(--blue-dark);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.editeur-jauge { height: 8px; margin: var(--esp-1) 0; overflow: hidden; background: var(--surface-creuse); border-radius: var(--r-bouton); }
.editeur-jauge-barre { height: 100%; background: var(--blue); border-radius: var(--r-bouton); transition: width var(--dur-long) var(--ease-sortie); }
.editeur-afaire { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.editeur-afaire-lien {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px var(--esp-2);
  font: inherit;
  font-size: var(--t-interface);
  line-height: 1.4;
  text-align: left;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--metal);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-champ);
  cursor: pointer;
}

.editeur-afaire-lien:hover { background: var(--surface-survol); }

.editeur-modeles { display: grid; gap: var(--esp-1); margin-bottom: var(--esp-1); }

.editeur-modele {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--esp-2);
  align-items: start;
  width: 100%;
  padding: 12px var(--esp-2);
  text-align: left;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--metal);
  border-radius: var(--r-champ);
  cursor: pointer;
  transition: border-color var(--dur-court) var(--ease-sortie), background var(--dur-court) var(--ease-sortie);
}

.editeur-modele:hover { background: var(--surface-survol); }
.editeur-modele[aria-pressed="true"] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: var(--fond-neutre); }
.editeur-modele-corps { display: grid; gap: 4px; justify-items: start; }
.editeur-miniature { display: block; min-height: 136px; background: var(--surface-creuse); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.editeur-miniature-page { display: block; width: 100%; height: auto; background: #fff; }
.editeur-modele-nom { font-weight: var(--graisse-titre); }
.editeur-modele-etiquette { padding: 1px 8px; font-size: 0.75rem; color: var(--blue-dark); background: var(--fond-neutre); border-radius: var(--r-bouton); }
.editeur-modele[aria-pressed="true"] .editeur-modele-etiquette { background: var(--surface); }
.editeur-modele-texte { font-size: var(--t-interface); line-height: 1.45; color: var(--muted); }

/* Les couleurs : rangées par ambiance, des pastilles assez grandes pour le doigt, un coche sur la couleur choisie. */
.editeur-couleur-actuelle { margin: 0 0 var(--esp-1); font-size: var(--t-interface); font-weight: var(--graisse-moyen); color: var(--ink); }
.editeur-ambiance { margin: var(--esp-2) 0 6px; font-size: .72rem; font-weight: var(--graisse-moyen); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.editeur-palettes { display: flex; flex-wrap: wrap; gap: 10px; }
.editeur-pastille { position: relative; width: 44px; height: 44px; padding: 0; border: 2px solid var(--surface); border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 1px var(--metal); transition: transform var(--dur-court) var(--ease-sortie), box-shadow var(--dur-court) var(--ease-sortie); }
.editeur-pastille:hover { transform: scale(1.08); }
.editeur-pastille:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--metal), var(--focus-anneau); }
.editeur-pastille[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--blue); }
.editeur-pastille[aria-pressed="true"]::after { content: ''; position: absolute; left: 15px; top: 9px; width: 7px; height: 14px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .55)); }
.editeur-pastille[data-conseillee="oui"]::before { content: ''; position: absolute; right: -2px; top: -2px; width: 12px; height: 12px; background: var(--surface); border: 2px solid var(--blue); border-radius: 50%; }
.editeur-couleur-perso { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: var(--esp-2); padding: 0 16px 0 8px; font-size: var(--t-interface); color: var(--ink); background: var(--surface); border: 1px solid var(--metal); border-radius: 99px; cursor: pointer; }
.editeur-couleur-perso:hover { background: var(--surface-survol); }
.editeur-couleur-perso:focus-within { box-shadow: var(--focus-anneau); }
.editeur-couleur-perso-pastille { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px var(--metal); }
.editeur-couleur-libre { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.editeur-segment { display: flex; padding: 3px; background: var(--surface-creuse); border-radius: 99px; }
.editeur-segment-bouton { flex: 1; min-height: 40px; padding: 0 8px; font: inherit; font-size: .8rem; color: var(--muted); background: transparent; border: 0; border-radius: 99px; cursor: pointer; transition: background var(--dur-court), color var(--dur-court); }
.editeur-segment-bouton[aria-pressed="true"] { color: var(--ink); font-weight: var(--graisse-moyen); background: var(--surface); box-shadow: var(--ombre-douce); }
.editeur-segment-bouton:focus-visible { outline: none; box-shadow: var(--focus-anneau); }
.editeur-metier { margin-top: var(--esp-3); padding-top: var(--esp-2); border-top: 1px solid var(--fond-neutre); }
.editeur-metier summary { cursor: pointer; font-size: var(--t-interface); font-weight: var(--graisse-moyen); color: var(--ink); }
.editeur-metier[open] summary { margin-bottom: var(--esp-1); }
@media (prefers-reduced-motion: reduce) { .editeur-pastille, .editeur-segment-bouton { transition: none; } .editeur-pastille:hover { transform: none; } }

.editeur-sections { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.editeur-section-ligne { display: flex; align-items: center; gap: var(--esp-1); padding: 4px var(--esp-1); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-champ); }
.editeur-section-ligne input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--blue); }
.editeur-section-ligne label { flex: 1; font-size: var(--t-interface); color: var(--ink); }
.editeur-ajouts { display: grid; gap: 6px; }

.editeur-icone {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-bouton);
  cursor: pointer;
}

.editeur-icone:hover:not(:disabled) { color: var(--ink); background: var(--surface-survol); }
.editeur-icone:disabled { opacity: .35; cursor: not-allowed; }

.editeur-ajouter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--esp-2);
  font: inherit;
  font-size: var(--t-interface);
  font-weight: var(--graisse-moyen);
  color: var(--blue-dark);
  background: transparent;
  border: 1px dashed var(--blue);
  border-radius: var(--r-bouton);
  cursor: pointer;
}

.editeur-reglages summary { min-height: 44px; display: flex; align-items: center; font-weight: var(--graisse-moyen); cursor: pointer; }
/* Notre IA te lit : la note, ses conseils, et la vue « ce que lit l'ATS ». */
.editeur-note { min-height: 44px; padding: 0 var(--esp-2); font: inherit; font-size: var(--t-interface); font-weight: var(--graisse-moyen); color: var(--ink); background: var(--surface); border: 1px solid var(--metal); border-radius: var(--r-bouton); cursor: pointer; }
.editeur-note:hover { background: var(--surface-survol); }
.editeur-note:focus-visible { outline: none; box-shadow: var(--focus-anneau); }
.editeur-note[hidden] { display: none; }
.editeur-lecture-note { margin: 0; font-size: var(--t-interface); color: var(--muted); }
.editeur-lecture-note strong { font-family: var(--police-chiffres); font-size: 2.5rem; line-height: 1; font-weight: var(--graisse-moyen); color: var(--ink); }
.editeur-lecture-conseil { display: grid; gap: 4px; padding: 10px var(--esp-2); font-size: var(--t-interface); line-height: 1.45; color: var(--ink); background: var(--surface); border: 1px solid var(--metal); border-left: 3px solid var(--sur-nuit-alerte); border-radius: var(--r-champ); }
.editeur-lecture-remede { color: var(--muted); }
.editeur-lecture .editeur-historique { margin-top: var(--esp-2); }
.editeur-bloc-titre-suite { margin-top: var(--esp-4); }
.editeur-ats[hidden] { display: none; }
.editeur-ats { flex: 1; min-height: 0; overflow: auto; padding: var(--esp-4) var(--esp-3); }
.editeur-ats-legende { max-width: 70ch; margin: 0 auto var(--esp-2); font-size: var(--t-interface); line-height: 1.55; color: var(--muted); }
.editeur-ats-lignes { max-width: 70ch; margin: 0 auto; padding: var(--esp-2) var(--esp-2) var(--esp-2) 3.5em; font-family: var(--police-chiffres); font-size: .8125rem; line-height: 1.7; color: var(--sur-nuit); background: var(--nuit-creuse); border: 1px solid var(--nuit-ligne); border-radius: var(--r-champ); counter-reset: ligne; list-style: none; }
.editeur-ats-lignes li { position: relative; counter-increment: ligne; overflow-wrap: anywhere; }
.editeur-ats-lignes li::before { content: counter(ligne); position: absolute; left: -3em; width: 2.2em; text-align: right; color: var(--muted); }
.editeur-verifier-actions { display: grid; gap: var(--esp-1); margin-top: var(--esp-2); }
.editeur-metier-phrase { margin: 0 0 var(--esp-1); font-size: var(--t-interface); color: var(--ink); }
.editeur-rappels { margin: 0 0 var(--esp-1); padding-left: 18px; font-size: var(--t-interface); line-height: 1.55; color: var(--ink); }
.editeur-rappels li { margin-bottom: 4px; }

/* --- La scène : le CV sur son bureau --- */

.editeur-scene { position: relative; min-height: 0; display: flex; flex-direction: column; background: var(--nuit); }

.editeur-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--esp-2); }

.editeur-historiques { display: flex; gap: 6px; }
.editeur-statut { margin: 0; padding: var(--esp-1) var(--esp-3); font-size: var(--t-interface); color: var(--muted); border-bottom: 1px solid var(--line); }
.editeur-statut:empty { display: none; }
.editeur-statut-alerte { color: var(--alerte-texte); }
.editeur-aide-page { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: var(--esp-1) var(--esp-3); border-bottom: 1px solid var(--line); font-size: var(--t-interface); }
.editeur-aide-page p { margin: 0; flex-basis: 100%; }
.editeur-aide-titre { color: var(--alerte-texte); font-weight: 600; }
.editeur-aide-detail { color: var(--muted); }
.editeur-aide-liste { flex-basis: 100%; margin: 0; padding-left: 1.2em; color: var(--muted); }
.editeur-sauvegarde { margin: 0; font-size: var(--t-interface); color: var(--muted); }
.editeur-sauvegarde:empty { display: none; }
.editeur-conflit { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }

.editeur-historique {
  min-height: 44px;
  padding: 0 var(--esp-2);
  font: inherit;
  font-size: var(--t-interface);
  font-weight: var(--graisse-moyen);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--metal);
  border-radius: var(--r-bouton);
  cursor: pointer;
}

.editeur-historique:disabled { opacity: .4; cursor: not-allowed; }
.editeur-historique:hover:not(:disabled) { background: var(--surface-survol); }

.editeur-telecharger {
  flex: none;
  min-height: 44px;
  padding: 0 var(--esp-3);
  font: inherit;
  font-weight: var(--graisse-moyen);
  color: var(--sur-bleu);
  background: var(--blue);
  border: 0;
  border-radius: var(--r-bouton);
  cursor: pointer;
}

.editeur-telecharger:hover:not(:disabled) { background: var(--blue-lighter); }
.editeur-telecharger:disabled { opacity: .45; cursor: not-allowed; }

.editeur-succes { margin: 0; padding: var(--esp-2) var(--esp-3); font-size: var(--t-interface); line-height: 1.5; color: var(--succes-texte); background: var(--fond-succes); border-bottom: 1px solid var(--line); }
.editeur-succes a { color: inherit; font-weight: var(--graisse-moyen); }

.editeur-import { padding: var(--esp-1) var(--esp-3); font-size: var(--t-interface); line-height: 1.4; color: var(--ink-soft, var(--ink)); border-bottom: 1px solid var(--line); }
.editeur-import-titre { margin: 0; }
.editeur-import-liste { margin: 0 0 var(--esp-1); padding-left: 18px; }

.editeur-feuille { position: relative; flex: 1; min-height: 0; overflow: auto; padding: var(--esp-4) var(--esp-3); }
.editeur-astuce { display: flex; align-items: center; gap: 8px; max-width: 780px; margin: 0 auto var(--esp-2); padding: 0 var(--esp-2); font-size: var(--t-interface); color: var(--blue-dark); background: var(--fond-neutre); border-radius: var(--r-champ); }
.editeur-pages-cadre { position: relative; max-width: 780px; margin: 0 auto; }

/* Le paraphe se trace sur la feuille au téléchargement : le seul moment orange de l'éditeur. Il n'est pas dans le PDF. */
.editeur-paraphe { position: absolute; right: 9%; bottom: 2.5%; width: 22%; height: auto; fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 800; stroke-dashoffset: 800; opacity: 0; pointer-events: none; }
.editeur-paraphe-trace { opacity: 1; animation: editeur-signe 700ms var(--ease-sortie) forwards, editeur-efface 400ms ease 2200ms forwards; }
@keyframes editeur-signe { to { stroke-dashoffset: 0; } }
@keyframes editeur-efface { to { opacity: 0; } }
.editeur-succes-texte { margin: 0 0 var(--esp-1); }
.editeur-succes-actions { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.editeur-succes .editeur-aide { margin: 0 0 var(--esp-1); color: var(--succes-texte); }
.editeur-cadre { position: relative; width: 100%; margin: 0 0 var(--esp-3); background: #fff; border-radius: 2px; box-shadow: var(--ombre-feuille); }
.editeur-page { display: block; width: 100%; height: 100%; }

/* Un bouton invisible sur chaque ligne du CV : il s'éclaire au survol et montre ce qu'on va modifier. */
.editeur-zone { position: absolute; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 3px; cursor: text; transition: background var(--dur-court) var(--ease-sortie), box-shadow var(--dur-court) var(--ease-sortie); }
.editeur-zone-rubrique { cursor: pointer; }
.editeur-zone-attente { outline: 1px dashed rgba(59, 79, 228, .5); outline-offset: 1px; }
.editeur-zone:hover, .editeur-zone-survol { background: rgba(59, 79, 228, .10); box-shadow: 0 0 0 1px rgba(59, 79, 228, .55); }
.editeur-zone-active { background: rgba(59, 79, 228, .14); box-shadow: 0 0 0 2px var(--blue); }

.editeur-zone-plus { position: absolute; display: grid; place-items: center; margin: 0; padding: 0; color: var(--sur-bleu); background: var(--blue); border: 0; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity var(--dur-court) var(--ease-sortie); }
.editeur-cadre:hover .editeur-zone-plus, .editeur-zone-plus:focus-visible { opacity: 1; }
@media (hover: none) { .editeur-zone-plus { opacity: 1; } }

/* La fiche : ce qu'on modifie, posé juste sous la ligne cliquée. */
.editeur-fiche { position: absolute; z-index: 5; display: grid; gap: 4px; max-height: min(78vh, 560px); overflow: auto; padding: var(--esp-2); background: var(--surface); border: 1px solid var(--metal); border-radius: var(--r-carte); box-shadow: var(--ombre-fenetre); }
.editeur-fiche-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-1); }
.editeur-fiche-titre { margin: 0; font-size: var(--t-corps); font-weight: var(--graisse-titre); }
.editeur-fiche-actions { display: grid; gap: 6px; margin-top: var(--esp-1); }
.editeur-fiche-actions-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.editeur-fiche-action {
  min-height: 44px;
  padding: 0 var(--esp-1);
  font: inherit;
  font-size: var(--t-interface);
  font-weight: var(--graisse-moyen);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--metal);
  border-radius: var(--r-champ);
  cursor: pointer;
}

.editeur-fiche-action:hover:not(:disabled) { background: var(--surface-survol); }
.editeur-fiche-action:disabled { opacity: .4; cursor: not-allowed; }
.editeur-fiche-danger { color: var(--alerte-texte); }
.editeur-fiche-fin { display: flex; justify-content: flex-end; margin-top: var(--esp-1); }
.editeur-fiche-ok { min-height: 44px; padding: 0 var(--esp-3); font: inherit; font-weight: var(--graisse-moyen); color: var(--sur-bleu); background: var(--blue); border: 0; border-radius: var(--r-bouton); cursor: pointer; }

/* Le départ : ton CV rangé, un fichier, ou une page blanche. */
.editeur-demarrage { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: var(--esp-3); overflow: auto; background: rgba(20, 22, 60, .94); }
.editeur-depart { width: min(520px, 100%); padding: var(--esp-4); background: var(--surface); border: 1px solid var(--metal); border-radius: var(--r-panneau); box-shadow: var(--ombre-fenetre); }
.editeur-depart-titre { margin: 0 0 var(--esp-1); font-size: var(--t-sous-titre); font-weight: var(--graisse-titre); line-height: var(--interligne-titre); }
.editeur-depart-liste { display: grid; gap: var(--esp-1); margin: var(--esp-2) 0; }
.editeur-depart-metier { margin: var(--esp-2) 0; padding-top: var(--esp-2); border-top: 1px solid var(--line); }
.editeur-depart-metier .editeur-fiche-ok { margin-top: var(--esp-1); }

.editeur-depart-cv { display: grid; width: 100%; padding: 10px var(--esp-2); text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--metal); border-radius: var(--r-champ); cursor: pointer; }
.editeur-depart-cv:hover { background: var(--surface-survol); border-color: var(--blue); }
.editeur-depart-nom { font-weight: var(--graisse-moyen); }
.editeur-depart-detail { font-size: var(--t-interface); color: var(--muted); }

.editeur-depot { position: relative; margin: var(--esp-2) 0; border: 2px dashed var(--blue); border-radius: var(--r-carte); }
.editeur-depot:focus-within { box-shadow: var(--focus-anneau); }
.editeur-depot-champ { position: absolute; width: 1px; height: 1px; opacity: 0; }
.editeur-depot-etiquette { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; padding: var(--esp-2); font-weight: var(--graisse-moyen); color: var(--blue-dark); cursor: pointer; }
.editeur-depart-message { min-height: 1.5em; }

.editeur-depart-sous-titre { margin: var(--esp-1) 0 0; font-size: var(--t-interface); font-weight: var(--graisse-moyen); color: var(--muted); }
.editeur-depart-ligne { display: flex; align-items: center; gap: 6px; }
.editeur-depart-ligne .editeur-depart-cv { flex: 1; min-width: 0; width: auto; }
.editeur-depart-ligne-ref .editeur-depart-cv { border-color: var(--blue); background: rgba(59, 79, 228, .06); }
.editeur-depart-etiquette-ref { font-size: .75em; font-weight: var(--graisse-moyen); letter-spacing: .04em; text-transform: uppercase; color: var(--blue-dark); }
.editeur-depart-ref { flex: none; min-height: 44px; white-space: nowrap; padding: 0 var(--esp-2); font: inherit; font-size: var(--t-interface); color: var(--blue-dark); background: var(--surface); border: 1px solid var(--metal); border-radius: var(--r-bouton); cursor: pointer; }
.editeur-depart-ref:hover:not(:disabled) { border-color: var(--blue); }
.editeur-depart-ref:disabled { opacity: .5; cursor: progress; }
.editeur-depart-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-1); margin-top: var(--esp-2); }
.editeur-depart-option { display: grid; gap: 2px; padding: 12px var(--esp-2); text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--metal); border-radius: var(--r-champ); cursor: pointer; }
.editeur-depart-option:hover { border-color: var(--blue); background: var(--surface-survol); }
.editeur-depart-option-titre { font-weight: var(--graisse-moyen); }
.editeur-depart-option-detail { font-size: var(--t-interface); color: var(--muted); }
.editeur-depart-annuler { min-height: 44px; margin-top: var(--esp-1); padding: 0; font: inherit; font-size: var(--t-interface); color: var(--muted); background: none; border: 0; cursor: pointer; }
.editeur-depart-annuler:hover { color: var(--ink); }
@media (max-width: 520px) { .editeur-depart-options { grid-template-columns: 1fr; } }


/* --- Téléphone : l'aperçu ou les étapes, une barre en bas avec le bouton Télécharger toujours là ---
   Trois zones, pas plus : en-tête (retour, titre, note), la pièce (aperçu OU étapes), la barre du bas. */

.editeur-onglets { display: none; }
.editeur-telecharger-mobile { display: none; }

@media (max-width: 899px) {
  .editeur { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .editeur-rail, .editeur-scene { grid-row: 1; grid-column: 1; }
  .editeur-onglets { grid-row: 2; display: flex; align-items: center; gap: var(--esp-1); padding: var(--esp-1) var(--esp-2) max(var(--esp-1), env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); }
  .editeur-onglet { flex: 1; min-height: 48px; font: inherit; font-weight: var(--graisse-moyen); color: var(--ink); background: transparent; border: 1px solid var(--metal); border-radius: var(--r-bouton); cursor: pointer; }
  .editeur-onglet[aria-pressed="true"] { color: var(--ink); background: var(--surface); border-color: var(--blue-light); box-shadow: inset 0 0 0 1px var(--blue-light); }
  .editeur-telecharger-mobile { display: inline-block; flex: 1.2; min-height: 48px; padding: 0 var(--esp-2); }
  .editeur-rail { display: none; border-right: 0; }
  .editeur-vue-reglages .editeur-rail { display: flex; }
  .editeur-vue-reglages .editeur-scene { display: none; }

  /* L'en-tête : retour et titre sur une ligne, la note et l'historique dessous. Le gros bouton est en bas. */
  .atelier-panneau-tete { flex-wrap: wrap; gap: var(--esp-1); padding: var(--esp-1) var(--esp-2); }
  .atelier-panneau-titres { flex: 1; }
  .atelier-panneau-barre { flex-basis: 100%; justify-content: flex-start; }
  .atelier-panneau-barre .editeur-telecharger, .atelier-panneau-barre .editeur-barre > .editeur-historique { display: none; }
  .editeur-barre { gap: var(--esp-1); justify-content: flex-start; }
  .editeur-historique, .editeur-note { min-height: 40px; padding: 0 var(--esp-1); }

  /* Les cinq étapes défilent de côté : tout reste atteignable au pouce. */
  .editeur-etapes { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-left: var(--esp-1); padding-right: var(--esp-1); }
  .editeur-etapes::-webkit-scrollbar { display: none; }
  .editeur-etapes > li { flex: 1 0 68px; scroll-snap-align: center; }
  .editeur-etape { padding: var(--esp-2); }

  .editeur-statut { padding: var(--esp-1) var(--esp-2); }
  .editeur-feuille, .editeur-ats { padding: var(--esp-1); }
  .editeur-fiche { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto !important; max-height: 70vh; overflow: auto; border-radius: var(--r-panneau) var(--r-panneau) 0 0; }
}

/* --- L'IA qui écrit : l'attente se voit sur la ligne, puis les lettres arrivent --- */

.editeur-ia { display: grid; gap: 6px; margin-top: var(--esp-1); }
.editeur-ia-boutons { display: flex; flex-wrap: wrap; gap: 6px; }

.editeur-ia-bouton {
  min-height: 44px;
  padding: 0 var(--esp-2);
  font: inherit;
  font-size: var(--t-interface);
  font-weight: var(--graisse-moyen);
  color: var(--blue-dark);
  background: var(--fond-neutre);
  border: 1px solid var(--blue);
  border-radius: var(--r-bouton);
  cursor: pointer;
}

.editeur-ia-bouton:hover:not(:disabled) { background: var(--surface); }
.editeur-ia-bouton:disabled { opacity: .5; cursor: progress; }
.editeur-ia-etat { margin: 0; font-size: var(--t-interface); line-height: 1.5; color: var(--muted); }
.editeur-ia-etat:empty { display: none; }

/* Trois points qui respirent derrière « L'IA écrit… » */
.editeur-ia-attente::after { content: ' ...'; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; white-space: nowrap; animation: editeur-points 1.2s steps(4, end) infinite; }
@keyframes editeur-points { from { width: 0; } to { width: 1.4em; } }

/* Le champ qui attend : un reflet qui passe, comme la ligne sur la page */
.editeur-champ-ia { background-image: linear-gradient(100deg, transparent 30%, rgba(59, 79, 228, .12) 50%, transparent 70%); background-size: 220% 100%; animation: editeur-reflet 1.4s linear infinite; }
.editeur-zone-ia { background: rgba(59, 79, 228, .12); box-shadow: 0 0 0 2px var(--blue); background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); background-size: 220% 100%; animation: editeur-reflet 1.4s linear infinite; }
@keyframes editeur-reflet { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.editeur-style { font-size: var(--t-interface); }
.editeur-style-titre { margin: 0 0 4px; font-weight: var(--graisse-moyen); color: var(--alerte-texte); }
.editeur-style-liste { margin: 0; padding-left: 18px; line-height: 1.5; color: var(--muted); }

/* --- Adapter à l'offre : les étapes réelles, puis 3 versions par ligne --- */

.editeur-adapt-etapes { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--t-interface); line-height: 1.5; }
.editeur-adapt-etiquette { font-size: var(--t-interface); font-weight: var(--graisse-moyen); }
.editeur-adapt-offre { width: 100%; resize: vertical; font: inherit; font-size: var(--t-interface); line-height: 1.45; }
.editeur-adapt-detail { display: block; margin-top: 2px; font-size: .9em; font-weight: normal; line-height: 1.45; color: var(--muted); }
.editeur-adapt-faite { color: var(--muted); }
.editeur-adapt-faite::before { content: '\2713\00a0'; color: var(--blue-dark); }
.editeur-adapt-courante { color: var(--blue-dark); font-weight: var(--graisse-moyen); }
.editeur-adapt-ligne { display: grid; gap: 4px; padding: var(--esp-1) 0; border-top: 1px solid var(--bordure, rgba(0, 0, 0, .1)); }
.editeur-adapt-titre { margin: 0; font-size: var(--t-interface); font-weight: var(--graisse-moyen); }
.editeur-adapt-choix { display: grid; gap: 4px; }
.editeur-adapt-version {
  display: grid; gap: 2px; text-align: left; min-height: 44px; padding: 6px var(--esp-2);
  font: inherit; font-size: var(--t-interface); line-height: 1.45; color: inherit;
  background: var(--fond-neutre); border: 1px solid transparent; border-radius: var(--r-bouton); cursor: pointer;
}
.editeur-adapt-version:hover { background: var(--surface); }
.editeur-adapt-version[aria-pressed="true"] { border-color: var(--blue); background: rgba(59, 79, 228, .08); }
.editeur-adapt-type { font-size: .75em; font-weight: var(--graisse-moyen); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .editeur-zone, .editeur-jauge-barre, .editeur-zone-plus, .editeur-modele { transition: none; }
  .editeur-paraphe-trace { animation: none; stroke-dashoffset: 0; }
  .editeur-ia-attente::after, .editeur-champ-ia, .editeur-zone-ia { animation: none; }
}

.editeur-recherche-rythme { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0 var(--esp-1); align-items: end; }
.editeur-recherche-champ { min-width: 0; }
.editeur-recherche-apercu { margin: 0 0 var(--esp-1); padding: var(--esp-1) var(--esp-2); font-size: var(--t-interface); line-height: 1.5; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-bouton); }

/* La photo du CV : le bloc des réglages et la fenêtre de recadrage (atelier-photo-ui.js). */
.photo-ligne { display: flex; align-items: center; gap: var(--esp-1); margin: var(--esp-1) 0; font-size: var(--t-interface); }
.photo-ligne input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--esp-1) 0; }
.photo-groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--esp-1) 0; }
.photo-groupe-titre { flex-basis: 100%; font-size: var(--t-interface); font-weight: var(--graisse-moyen); color: var(--ink); }
.photo-choix { min-height: 44px; padding: 0 var(--esp-2); font: inherit; font-size: var(--t-interface); color: var(--ink); background: var(--surface); border: 1px solid var(--metal); border-radius: var(--r-bouton); cursor: pointer; }
.photo-choix:hover { background: var(--surface-survol); }
.photo-choix[aria-pressed="true"] { color: var(--sur-bleu); background: var(--blue); border-color: var(--blue); }
.photo-qualite { margin: var(--esp-1) 0; font-size: var(--t-interface); }
.photo-qualite-nette, .photo-qualite-correcte { color: var(--green-fonce); }
.photo-qualite-douce { color: var(--attention-texte); }
.photo-qualite-floue { color: var(--alerte-texte); }
.photo-aide { margin: 0 0 var(--esp-1); font-size: var(--t-interface); color: var(--muted); }

.photo-cadrage-fond { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: var(--esp-2); background: rgba(20, 22, 32, .55); }
.photo-cadrage { display: grid; gap: var(--esp-1); width: min(360px, 100%); max-height: 100%; overflow: auto; padding: var(--esp-3); background: var(--surface); border: 1px solid var(--metal); border-radius: var(--r-panneau); box-shadow: var(--ombre-fenetre); }
.photo-cadrage-titre { margin: 0; font-size: var(--t-sous-titre); font-weight: var(--graisse-titre); }
.photo-cadrage-toile { width: 100%; max-width: 300px; height: auto; margin: 0 auto; border-radius: var(--r-champ); cursor: grab; touch-action: none; outline-offset: 3px; }
.photo-cadrage-toile:active { cursor: grabbing; }
.photo-cadrage-toile:focus-visible { outline: none; box-shadow: var(--focus-anneau); }
.photo-cadrage-zoom { display: flex; align-items: center; gap: var(--esp-1); font-size: var(--t-interface); }
.photo-cadrage-zoom input[type="range"] { flex: 1; min-height: 44px; }
.photo-cadrage-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.photo-candidates { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--esp-2); }
.photo-candidate { display: grid; gap: 6px; justify-items: center; text-align: center; padding: var(--esp-1); border: 1px solid var(--metal); border-radius: var(--r-champ); }
.photo-candidate-image { display: grid; place-items: center; min-height: 120px; }
.photo-candidate-image canvas { max-width: 100%; height: auto; border-radius: 6px; }
.editeur-annonces:empty { display: none; }
.photo-annonce { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: var(--esp-1) var(--esp-3); font-size: var(--t-interface); background: var(--fond-neutre); border-bottom: 1px solid var(--line); }

/* ==========================================================================
   Les animations plein écran (atelier-ecran.js) et la fenêtre de questions (atelier-questions.js)
   ========================================================================== */

.ecran-anim { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--esp-3); overflow: auto; color: var(--sur-nuit); background: var(--nuit); animation: ecran-entrer .35s var(--ease-sortie, ease-out); }
.ecran-anim:focus { outline: none; }
.ecran-anim.sort { animation: ecran-sortir .26s ease-in forwards; pointer-events: none; }
.ecran-scene { display: grid; justify-items: center; gap: var(--esp-4); width: min(620px, 100%); text-align: center; }
.ecran-feuilles { display: flex; align-items: center; justify-content: center; gap: var(--esp-1); }
.ecran-feuille { --n: 10; position: relative; display: grid; align-content: start; gap: 9px; width: 150px; height: 200px; padding: 18px 14px 14px; overflow: hidden; background: var(--surface); border-radius: 10px; box-shadow: var(--ombre-feuille); }
.ecran-feuille-grande { width: 200px; height: 262px; padding: 22px 18px; gap: 10px; }
.ecran-feuille-etiquette { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; font-size: .7rem; font-weight: var(--graisse-moyen); color: var(--blue-dark); background: var(--fond-neutre); border-radius: 99px; }
.ecran-ligne { --l: 80; --i: 0; display: block; width: calc(var(--l) * 1%); height: 7px; background: #D9DCF2; border-radius: 4px; animation: ecran-lit 3.2s ease-in-out infinite; animation-delay: calc((var(--i) + .5) / var(--n) * 3.2s); }
.ecran-ligne-titre { height: 11px; background: #B9BFEA; }
.ecran-faisceau { position: absolute; left: 0; right: 0; top: -40px; height: 40px; background: linear-gradient(to bottom, transparent, rgba(59, 79, 228, .32)); border-bottom: 2px solid var(--blue); animation: ecran-balaye 3.2s linear infinite; }
.ecran-pont { width: 70px; height: 150px; flex: none; }
.ecran-fil { --i: 0; fill: none; stroke: var(--blue-light); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 9; animation: ecran-fil 1.4s linear infinite; animation-delay: calc(var(--i) * -.45s); }
.ecran-texte { display: grid; gap: var(--esp-1); max-width: 46ch; }
.ecran-titre { margin: 0; font-size: var(--t-section); font-weight: var(--graisse-titre); line-height: 1.15; }
.ecran-sous-titre { margin: 0; color: var(--sur-nuit-doux); }
.ecran-detail { min-height: 3em; margin: 0; font-size: var(--t-interface); line-height: 1.5; color: var(--sur-nuit-doux); animation: ecran-apparait .4s ease-out; }
.ecran-etapes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; text-align: left; font-size: var(--t-interface); }
.ecran-etape { display: flex; align-items: center; gap: 10px; color: var(--sur-nuit-doux); opacity: .55; transition: opacity .3s; }
.ecran-etape.courante { color: var(--sur-nuit); opacity: 1; font-weight: var(--graisse-moyen); }
.ecran-etape.faite { opacity: .9; }
.ecran-etape-marque { flex: none; width: 18px; height: 18px; border: 2px solid var(--nuit-ligne); border-radius: 50%; }
.ecran-etape.courante .ecran-etape-marque { border-color: var(--blue-light); border-top-color: transparent; animation: ecran-tourne .9s linear infinite; }
.ecran-etape.faite .ecran-etape-marque { position: relative; border-color: var(--sur-nuit-succes); background: var(--nuit-fond-succes); }
.ecran-etape.faite .ecran-etape-marque::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--sur-nuit-succes); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ecran-passer { min-height: 44px; padding: 0 var(--esp-3); font: inherit; font-size: var(--t-interface); color: var(--sur-nuit); background: transparent; border: 1px solid var(--nuit-ligne); border-radius: 99px; cursor: pointer; }
.ecran-passer:hover { background: var(--nuit-creuse); }
.ecran-passer:focus-visible { outline: none; box-shadow: var(--focus-anneau); }

@keyframes ecran-entrer { from { opacity: 0; } }
@keyframes ecran-sortir { to { opacity: 0; } }
@keyframes ecran-apparait { from { opacity: 0; transform: translateY(4px); } }
@keyframes ecran-balaye { to { top: 100%; } }
@keyframes ecran-lit { 0% { background: #D9DCF2; } 6%, 38% { background: var(--blue); } 80%, 100% { background: #D9DCF2; } }
@keyframes ecran-fil { to { stroke-dashoffset: -28; } }
@keyframes ecran-tourne { to { transform: rotate(360deg); } }

.quest-voile { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--esp-2); background: rgba(14, 15, 45, .78); animation: ecran-entrer .2s ease-out; }
.quest-fenetre { display: grid; grid-template-rows: auto auto 1fr auto; width: min(620px, 100%); max-height: min(92vh, 720px); overflow: hidden; color: var(--ink); background: var(--surface); border-radius: var(--r-panneau); box-shadow: var(--ombre-fenetre); }
.quest-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); padding: var(--esp-3) var(--esp-3) var(--esp-2); }
.quest-titre { margin: 0; font-size: var(--t-sous-titre); font-weight: var(--graisse-titre); }
.quest-fermer { flex: none; width: 44px; height: 44px; font: inherit; font-size: 1.5rem; line-height: 1; color: var(--muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.quest-fermer:hover { background: var(--surface-survol); }
.quest-fermer:focus-visible, .quest-bouton:focus-visible { outline: none; box-shadow: var(--focus-anneau); }
.quest-piste { height: 4px; margin: 0 var(--esp-3); background: var(--surface-creuse); border-radius: 99px; overflow: hidden; }
.quest-barre { height: 100%; background: var(--blue); border-radius: 99px; transition: width .35s var(--ease-sortie, ease-out); }
.quest-corps { display: grid; align-content: start; gap: var(--esp-1); padding: var(--esp-3); overflow: auto; }
.quest-corps:focus { outline: none; }
.quest-rubrique { margin: 0; font-size: var(--t-interface); font-weight: var(--graisse-moyen); letter-spacing: .04em; text-transform: uppercase; color: var(--blue-dark); }
.quest-enonce { margin: 0; font-size: var(--t-sous-titre); font-weight: var(--graisse-titre); line-height: 1.25; }
.quest-lieu { margin: 0; font-size: var(--t-interface); color: var(--muted); }
.quest-aide { margin: 0; font-size: var(--t-interface); line-height: 1.5; color: var(--muted); }
.quest-options { display: grid; gap: var(--esp-1); margin: var(--esp-1) 0; }
.quest-option { position: relative; display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 12px 14px; background: var(--surface); border: 1.5px solid var(--metal); border-radius: var(--r-carte); cursor: pointer; transition: border-color .15s, background .15s; }
.quest-option:hover { background: var(--surface-survol); }
.quest-option input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.quest-option:has(input:checked) { border-color: var(--blue); background: rgba(59, 79, 228, .07); }
.quest-option:has(input:focus-visible) { box-shadow: var(--focus-anneau); }
.quest-option-contenu { display: grid; gap: 4px; }
.quest-option-type { font-size: .72rem; font-weight: var(--graisse-moyen); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.quest-option-texte { font-size: .95rem; line-height: 1.45; }
.quest-recap { display: grid; gap: var(--esp-1); margin: var(--esp-1) 0; padding: 0; list-style: none; }
.quest-recap-ligne { display: grid; gap: 2px; padding: 10px 12px; font-size: var(--t-interface); line-height: 1.45; background: var(--surface-creuse); border-radius: var(--r-champ); }
.quest-recap-lieu { font-weight: var(--graisse-moyen); }
.quest-recap-avant { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(92, 88, 128, .5); }
.quest-recap-apres { color: var(--blue-dark); }
.quest-pied { display: flex; align-items: center; gap: var(--esp-1); padding: var(--esp-2) var(--esp-3) var(--esp-3); border-top: 1px solid var(--fond-neutre); }
.quest-pied-espace { flex: 1; }
.quest-bouton { min-height: 44px; padding: 0 var(--esp-3); font: inherit; font-weight: var(--graisse-moyen); border-radius: 99px; cursor: pointer; }
.quest-bouton-plein { color: var(--sur-bleu, #fff); background: var(--blue); border: 1px solid var(--blue); }
.quest-bouton-plein:hover { background: var(--blue-dark); }
.quest-bouton-contour { color: var(--ink); background: transparent; border: 1px solid var(--metal); }
.quest-bouton-contour:hover { background: var(--surface-survol); }
.quest-bouton:disabled { opacity: .6; cursor: default; }

@media (max-width: 560px) {
  .ecran-feuille { width: 110px; height: 150px; padding: 14px 10px; }
  .ecran-feuille-grande { width: 160px; height: 210px; }
  .ecran-pont { width: 40px; }
  .quest-pied { flex-wrap: wrap; }
  .quest-bouton { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ecran-anim, .quest-voile, .ecran-detail { animation: none; }
  .ecran-faisceau { display: none; }
  .ecran-ligne, .ecran-fil, .ecran-etape.courante .ecran-etape-marque { animation: none; }
  .ecran-etape.courante .ecran-etape-marque { background: var(--blue-light); border-color: var(--blue-light); }
  .quest-barre, .quest-option { transition: none; }
}

.editeur-correction { display: grid; gap: 8px; padding: 14px var(--esp-2); background: var(--surface); border: 1px solid var(--metal); border-radius: var(--r-carte); }
.editeur-correction-titre { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-1); margin: 0; font-size: .95rem; font-weight: var(--graisse-moyen); line-height: 1.3; color: var(--ink); }
.editeur-correction-points { flex: none; padding: 2px 9px; font-size: .75rem; font-weight: var(--graisse-moyen); color: var(--blue-dark); background: rgba(59, 79, 228, .1); border-radius: 99px; }
.editeur-correction-avant, .editeur-correction-apres { margin: 0; font-size: var(--t-interface); line-height: 1.45; }
.editeur-correction-apres { padding: 6px 10px; color: var(--ink); background: var(--surface-creuse); border-radius: var(--r-champ); }
.editeur-correction-avant { color: var(--muted); }
.editeur-correction > .editeur-fiche-ok, .editeur-correction > .editeur-fiche-action { justify-self: start; }
.editeur-correction-mots { display: grid; gap: 6px; }
.editeur-correction-mot { display: flex; align-items: center; gap: 6px; }
.editeur-correction-mot-nom { flex: 1; min-width: 0; font-size: var(--t-interface); font-weight: var(--graisse-moyen); overflow-wrap: anywhere; }
.editeur-correction-petit { flex: none; min-height: 36px; padding: 0 12px; font: inherit; font-size: .8rem; color: var(--ink); background: var(--surface); border: 1px solid var(--metal); border-radius: 99px; cursor: pointer; }
.editeur-correction-petit:first-of-type { color: var(--sur-bleu, #fff); background: var(--blue); border-color: var(--blue); }
.editeur-correction-petit:hover:not(:disabled) { filter: brightness(.95); }
.editeur-correction-petit:focus-visible { outline: none; box-shadow: var(--focus-anneau); }
.editeur-correction-petit:disabled { opacity: .55; cursor: default; }
.editeur-correction-pourquoi summary, .editeur-lecture-plus summary { cursor: pointer; font-size: .78rem; color: var(--muted); }
.editeur-correction-pourquoi[open] summary { margin-bottom: 4px; }
.editeur-lecture-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-1); flex-wrap: wrap; margin: var(--esp-2) 0 var(--esp-1); }
.editeur-lecture-gain { margin: 0; font-size: var(--t-interface); font-weight: var(--graisse-moyen); color: var(--ink); }
.editeur-lecture-note-bas { margin: var(--esp-1) 0 0; font-size: .75rem; line-height: 1.4; color: var(--muted); }
.editeur-lecture-plus { margin-top: var(--esp-2); }
.editeur-lecture-evolution { margin: 0 0 var(--esp-1); padding: 8px 12px; font-size: var(--t-interface); font-weight: var(--graisse-moyen); color: var(--blue-dark); background: rgba(59, 79, 228, .08); border-radius: var(--r-champ); }

/* La miniature d'un CV dans sa carte : le haut de la première page, comme un coup d'œil sur le papier. */
.atelier-vignette-contenu { display: grid; place-items: center; width: 100%; height: 100%; }
.atelier-vignette.atelier-vignette-cv { overflow: hidden; padding: 0; background: #fff; }
.atelier-vignette-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* La fenêtre de questions, deuxième version : le projet, « écrire la mienne », l'attente de l'accroche. */
.quest-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.quest-etiquette { padding: 3px 10px; font-size: var(--t-interface); color: var(--blue-dark); background: rgba(59, 79, 228, .1); border-radius: 99px; }
.quest-implicites { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.quest-implicites li { display: grid; gap: 1px; padding: 8px 12px; background: var(--surface-creuse); border-radius: var(--r-champ); font-size: var(--t-interface); line-height: 1.4; }
.quest-implicite-signal { font-weight: var(--graisse-moyen); }
.quest-implicite-extrait { color: var(--muted); }
.quest-etiquette-champ { margin-top: var(--esp-1); font-size: var(--t-interface); font-weight: var(--graisse-moyen); }
.quest-champ { display: grid; gap: 2px; width: 100%; }
.quest-libre { width: 100%; padding: 10px 12px; font: inherit; font-size: .95rem; line-height: 1.45; color: var(--ink); background: var(--surface); border: 1.5px solid var(--metal); border-radius: var(--r-champ); resize: vertical; }
.quest-libre:focus-visible { outline: none; border-color: var(--blue); box-shadow: var(--focus-anneau); }
.quest-compteur { justify-self: end; font-size: .72rem; color: var(--muted); }
.quest-option-libre .quest-champ { display: none; }
.quest-option-libre:has(input:checked) .quest-champ { display: grid; margin-top: 6px; }
.quest-option-libre .quest-option-contenu { flex: 1; min-width: 0; }
.quest-alerte { margin: 0; padding: 8px 12px; font-size: var(--t-interface); line-height: 1.45; color: var(--ink); background: var(--fond-alerte); border-radius: var(--r-champ); }
.quest-attente { display: grid; justify-items: center; gap: var(--esp-1); padding: var(--esp-4) 0; text-align: center; }
.quest-attente-rond { width: 34px; height: 34px; border: 3px solid var(--fond-neutre); border-top-color: var(--blue); border-radius: 50%; animation: ecran-tourne .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .quest-attente-rond { animation: none; border-top-color: var(--blue); } }

/* La carte de résultat de « Adapter à cette offre » : une phrase claire, des gestes, aucun chiffre technique. */
.editeur-resultat { display: flex; align-items: flex-start; gap: 12px; padding: var(--esp-2); background: var(--fond-succes); border-radius: var(--r-carte); }
.editeur-resultat-rond { position: relative; flex: none; width: 28px; height: 28px; background: var(--green-fonce, #1f7a52); border-radius: 50%; }
.editeur-resultat-rond::after { content: ''; position: absolute; left: 10px; top: 5px; width: 7px; height: 13px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.editeur-resultat-texte { display: grid; gap: 2px; min-width: 0; }
.editeur-resultat-titre { margin: 0; font-size: var(--t-corps); font-weight: var(--graisse-titre); color: var(--ink); }
.editeur-resultat-sous { margin: 0; font-size: var(--t-interface); line-height: 1.45; color: var(--muted); }
.editeur-resultat-legende { margin: var(--esp-2) 0 6px; font-size: .75rem; font-weight: var(--graisse-moyen); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.editeur-resultat-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.editeur-resultat-puce { padding: 3px 10px; font-size: var(--t-interface); color: var(--ink); background: var(--surface-creuse); border-radius: 99px; }
.editeur-resultat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin-top: var(--esp-2); }

/* Les cinq étapes tiennent sur un téléphone : un élément de grille ne rétrécit pas sous son contenu sans ceci. */
.editeur-etapes > li { min-width: 0; }
.editeur-etape-bouton { overflow-wrap: anywhere; }
@media (max-width: 420px) { .editeur-etape-bouton { font-size: .68rem; } }
.editeur-correction-mot-nom { color: var(--ink); }