/* ───────────────────────────────────────────────────────────────────────────
   L'ATELIER DES OUTILS (19/09/2026).

   Les générateurs de courriers et de fiches empilaient le formulaire puis le document :
   on écrivait sans jamais voir ce qu'on écrivait, et le bouton d'impression se perdait au
   bas du formulaire. Désormais, sur un écran large, le formulaire est à gauche et le
   document à droite, qui reste sous les yeux pendant toute la saisie. Sur un écran
   étroit, les deux s'empilent et une barre en bas de l'écran mène au document et à
   l'impression.

   Feuille commune : elle s'appuie sur les variables de couleur que chaque page déclare
   déjà (--primary, --paper, --rule…), et ne touche à rien hors de ses propres classes.
   ─────────────────────────────────────────────────────────────────────────── */

/* Les pages coupent le débordement horizontal (overflow-x:hidden sur html et body), ce qui
   fait de body un conteneur de défilement et empêche la colonne du document de rester collée.
   « clip » coupe pareil sans créer de conteneur. Sélecteurs plus forts que « html,body » des
   pages, pour gagner quel que soit l'ordre des feuilles. */
@supports (overflow:clip){
  :root, :root body{overflow-x:clip}
}

.atelier{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:28px; align-items:start; margin:28px 0 8px}

.atelier-saisie{background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 22px 18px; min-width:0}
.atelier-saisie .groupe{border:0; padding:0; margin:0 0 22px; min-width:0}
.atelier-saisie .groupe:last-of-type{margin-bottom:0}
.atelier-saisie .groupe legend{padding:0; margin:0 0 12px; font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:17px; color:var(--ink)}
.atelier-saisie .grid-inputs{gap:14px}
.atelier-saisie select{font-family:inherit}

/* Le document : colonne collée en haut de l'écran pendant qu'on fait défiler le formulaire. */
.atelier-apercu{position:sticky; top:16px; max-height:calc(100vh - 32px); display:flex; flex-direction:column; min-width:0}
.atelier-barre{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 12px}
.atelier-barre h2{font-size:19px; margin:0}
.atelier-aide{margin:-4px 0 12px; font-size:12.5px; color:var(--muted)}
.atelier-doc{flex:1 1 auto; min-height:0; overflow:auto; border-radius:var(--radius)}
.atelier-doc > *{margin:0}

.btn-principal{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--primary); color:#fff; border:1px solid var(--primary); font-weight:600; cursor:pointer; padding:11px 18px; border-radius:10px; font-size:15px; font-family:inherit; line-height:1.2}
.btn-principal:hover{background:var(--primary-hover); border-color:var(--primary-hover)}
.btn-principal:focus-visible, .btn-second:focus-visible{outline:3px solid var(--primary-soft); outline-offset:2px}
.btn-second{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--paper); color:var(--primary); border:1px solid var(--rule); font-weight:600; cursor:pointer; padding:11px 18px; border-radius:10px; font-size:15px; font-family:inherit; line-height:1.2}
.btn-second:hover{background:var(--primary-soft)}

/* Ce que l'outil retient sur cet appareil, dit en clair, avec de quoi l'effacer. */
.profil-note{margin:10px 0 0; font-size:12.5px; color:var(--muted)}
.profil-note button{background:none; border:0; padding:0; font:inherit; color:var(--subtle); text-decoration:underline; cursor:pointer}

.barre-mobile{display:none}

@media (max-width:1023px){
  .atelier{grid-template-columns:1fr; gap:22px}
  .atelier-apercu{position:static; max-height:none; display:block; scroll-margin-top:12px}
  .atelier-saisie{scroll-margin-top:12px}
  .atelier-doc{overflow:visible}
  .barre-mobile{display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:50;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--paper);
    border-top:1px solid var(--rule); box-shadow:0 -8px 24px -14px oklch(0.14 0.022 255/.35);
    transform:translateY(115%); transition:transform .2s ease}
  .barre-mobile.visible{transform:none}
  .barre-mobile > *{flex:1 1 0; min-height:46px; padding:10px 12px}
  /* La barre ne doit jamais cacher le bas du document : on lui garde sa place. */
  body.a-barre-mobile .atelier{padding-bottom:70px}
}
@media (max-width:640px){
  .atelier-saisie{padding:18px 16px 16px}
}
/* Un tableau large dans le document défile dans sa colonne au lieu d'élargir la page. */
@media screen and (max-width:640px){
  .atelier-doc{overflow-x:auto}
}
/* Téléphone étroit : les deux boutons de la barre tiennent chacun sur une ligne. */
@media (max-width:420px){
  .barre-mobile{gap:8px; padding-left:12px; padding-right:12px}
  .barre-mobile > *{font-size:14px; padding:10px 8px}
}
@media (prefers-reduced-motion:reduce){
  .barre-mobile{transition:none}
}

@media print{
  .atelier{display:block; margin:0; padding:0 !important}
  .atelier-saisie, .atelier-barre, .atelier-aide, .barre-mobile{display:none !important}
  .atelier-apercu{position:static; max-height:none; display:block}
  .atelier-doc{overflow:visible}
}