/* public/css/facture-generator.css — generateur facture / devis
   Parti pris : un outil de travail sobre ; le document reprend le gabarit
   d'impression du transfert de stock de YoriinApp. */

/* ── Haut de page ────────────────────────────────────────────────────────── */
/* En-tête de l'outil : dégradé de marque discret, atouts en pastilles. */
.hero--outil {
  position: relative; overflow: hidden;
  padding: 44px 0 32px;
  background:
    radial-gradient(600px 240px at 88% -10%, rgba(118, 75, 162, .16), transparent 70%),
    radial-gradient(520px 220px at 0% 110%, rgba(102, 126, 234, .14), transparent 70%),
    linear-gradient(180deg, #F5F3FF 0%, #F8FAFF 100%);
  border-bottom: 1px solid #E8E6F8;
}
.outil-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 9px; margin: 0 0 14px;
  border-radius: 999px; background: #fff; border: 1px solid #E0DDFB;
  color: #5568d3; font-size: 13px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 1px 2px rgba(85, 104, 211, .08);
}
.outil-eyebrow .material-symbols-outlined { font-size: 17px; }
.hero--outil h1 {
  font-family: 'Plus Jakarta Sans', Inter, sans-serif;
  font-size: clamp(28px, 4.4vw, 42px); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.12; color: #0F172A; margin: 0 0 10px;
}
.outil-accent {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero--outil .hero-sous-titre { font-size: 17px; color: #475569; max-width: 680px; margin: 0; line-height: 1.55; }
.outil-atouts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 18px 0 0; }
.outil-atouts li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .85); border: 1px solid #E2E8F0;
  font-size: 14px; font-weight: 500; color: #1E293B;
}
.outil-atouts li::before {
  content: ''; width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: #22C55E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.yr-rassurance { display: flex; align-items: center; gap: 6px; margin: 16px 0 0; font-size: 14px; color: #64748B; }
.yr-rassurance .material-symbols-outlined { font-size: 18px; color: #22C55E; }
@media (max-width: 600px) {
  .hero--outil { padding: 28px 0 22px; }
  .outil-atouts li { font-size: 13px; padding: 5px 10px; }
  .yr-rassurance { align-items: flex-start; font-size: 13px; }
}

/* ── Mise en page de l'outil ─────────────────────────────────────────────── */
.yr-outil { margin: 28px 0 56px; scroll-margin-top: 90px; }
.yr-outil-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 992px) {
  /* minmax(0,1fr) et non 1fr : sinon le tableau de l'apercu force la colonne
     a depasser et la page scrolle horizontalement. */
  .yr-outil-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .yr-apercu-colonne { position: sticky; top: 90px; }
}

/* ── Formulaire ──────────────────────────────────────────────────────────── */
.yr-bloc { border: 0; border-top: 1px solid #E5E7EB; padding: 18px 0 6px; margin: 0; min-width: 0; }
.yr-bloc:first-of-type { border-top: 0; padding-top: 0; }
.yr-bloc legend { float: left; width: 100%; padding: 0 0 10px; font-size: 15px; font-weight: 700; color: #111827; }
.yr-bloc legend + * { clear: both; }
.yr-form label { display: block; margin-bottom: 12px; font-size: 13px; color: #374151; }
.yr-form input, .yr-form select, .yr-form textarea {
  display: block; width: 100%; max-width: 100%; margin-top: 4px; padding: 9px 10px;
  border: 1px solid #D1D5DB; border-radius: 4px; background: #fff; color: #111827;
  font: inherit; font-size: 16px; /* 16px : evite le zoom auto iOS */
}
.yr-form input:focus, .yr-form select:focus, .yr-form textarea:focus { outline: 2px solid #1E3A8A; outline-offset: -1px; border-color: #1E3A8A; }
.yr-form input[type="file"] { padding: 6px; font-size: 14px; }
.yr-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
@media (max-width: 480px) { .yr-duo { grid-template-columns: minmax(0, 1fr); } }
.yr-remise-champs { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 6px; }
.yr-check { display: flex !important; align-items: center; gap: 8px; font-size: 14px !important; color: #111827 !important; cursor: pointer; }
.yr-check input { width: 16px; height: 16px; margin: 0; }

.yr-ligne { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .8fr) minmax(0, 1.2fr) 38px; gap: 6px; margin-bottom: 6px; }
.yr-ligne input { margin-top: 0; }
@media (max-width: 480px) {
  /* Sur telephone : designation sur toute la largeur, qte + prix + x dessous */
  .yr-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 38px; padding-bottom: 8px; border-bottom: 1px dashed #D1D5DB; }
  .yr-ligne [data-champ="designation"] { grid-column: 1 / -1; }
}
.yr-supprimer-ligne { border: 1px solid #D1D5DB; background: #fff; color: #6B7280; border-radius: 4px; font-size: 18px; cursor: pointer; }
.yr-supprimer-ligne:hover { color: #B91C1C; border-color: #B91C1C; }

.yr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid #E5E7EB; }
.yr-btn-principal { background: #1E3A8A; color: #fff; border: 0; border-radius: 4px; padding: 12px 22px; font-size: 16px; font-weight: 600; cursor: pointer; }
.yr-btn-principal:hover { background: #172E6E; }
.yr-btn-secondaire { background: #fff; color: #111827; border: 1px solid #D1D5DB; border-radius: 4px; padding: 10px 16px; font-size: 14px; cursor: pointer; }
.yr-btn-secondaire:hover { background: #F3F4F6; }
.yr-lien-danger { background: none; border: 0; color: #6B7280; text-decoration: underline; cursor: pointer; padding: 0; font-size: 13px; }
.yr-aide { flex-basis: 100%; font-size: 13px; color: #6B7280; margin: 2px 0 0; }
.yr-aide:empty { display: none; }
.yr-alerte { background: #FFFBEB; border: 1px solid #F59E0B; border-radius: 4px; padding: 12px; margin-bottom: 18px; }
.yr-lien-bascule { flex-basis: 100%; font-size: 14px; color: #1E3A8A; }

/* ── Apercu : la feuille sur un fond gris neutre ─────────────────────────── */
.yr-apercu-colonne { background: #F3F4F6; border: 1px solid #E5E7EB; padding: 14px; }
.yr-apercu-tete { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #6B7280; margin: 0 0 10px; }

/* ── Le document ─────────────────────────────────────────────────────────
   Calque sur l'impression « Transfert de stock » de YoriinApp
   (stock_transfer/print.blade.php, Bootstrap 3 / AdminLTE, imprime sans fonds). */
.yr-apercu {
  background: #fff; color: #333; padding: 12mm 10mm;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.42857;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
  overflow-wrap: anywhere;
}
.yr-apercu table { border-collapse: collapse; border-spacing: 0; }
.doc-cadre { width: 100%; }
.doc-cadre > thead .doc-marge, .doc-cadre > tfoot .doc-marge { height: 0; padding: 0; }
.doc-cadre > tbody > tr > td { padding: 0; }

.doc-logo { display: block; max-width: 140px; max-height: 60px; object-fit: contain; margin-bottom: 8px; }
.doc-titre {
  font-family: inherit; font-size: 21px; font-weight: 400; color: #333; line-height: 1.1;
  margin: 0 0 18px; padding-bottom: 9px; border-bottom: 1px solid #eee;
}
.doc-titre b { font-weight: 700; }
.doc-titre small { float: right; font-size: 12px; color: #333; margin-top: 7px; }

.doc-infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.doc-infos address { margin: 0; font-style: normal; }

.doc-lignes { width: 100%; margin-bottom: 20px; }
.doc-lignes th, .doc-lignes td { padding: 8px; text-align: left; vertical-align: top; border-top: 1px solid #ddd; }
.doc-lignes thead th { border-bottom: 2px solid #ddd; overflow-wrap: normal; }
.doc-lignes th:first-child { width: 28px; }
.doc-lignes .num, .doc-totaux .num { text-align: right; white-space: nowrap; }
.doc-vide { color: #999; }

.doc-moitie { width: 50%; }
.doc-totaux { width: 100%; margin-bottom: 12px; }
.doc-totaux th, .doc-totaux td { padding: 8px; border-top: 1px solid #ddd; text-align: left; }
.doc-totaux td:nth-child(2) { width: 36px; }
.doc-totaux .total th, .doc-totaux .total td { font-size: 1.08em; }
.doc-totaux .total .num { font-weight: 700; }
.doc-lettres { margin: 0 0 14px; }
.doc-notes-titre { margin: 0 0 6px; }
.doc-notes { margin: 0; min-height: 20px; padding: 9px; border: 1px solid #e3e3e3; border-radius: 3px; white-space: pre-line; }
.doc-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; break-inside: avoid; }
.doc-signatures > div { min-height: 90px; }
.doc-signatures small { color: #777; }

@media (max-width: 600px) {
  /* Sur telephone la feuille garde ses proportions sans faire deborder la page */
  .yr-apercu-colonne { padding: 8px; }
  .yr-apercu { padding: 16px 12px; font-size: 11px; }
  .doc-titre { font-size: 16px; }
  .doc-titre small { float: none; display: block; margin-top: 6px; }
  .doc-infos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .doc-lignes th, .doc-lignes td, .doc-totaux th, .doc-totaux td { padding: 5px 3px; }
  .doc-lignes td.num { white-space: normal; }
  .doc-moitie { width: 100%; }
}

/* ── Contenu editorial ───────────────────────────────────────────────────── */
.yr-contenu { max-width: 780px; padding-bottom: 64px; color: #374151; font-size: 16px; line-height: 1.7; }
.yr-contenu h2 { font-size: 22px; font-weight: 700; color: #111827; margin: 44px 0 12px; }
.yr-contenu a { color: #1E3A8A; }
.yr-contenu ol, .yr-contenu ul { padding-left: 22px; }
.yr-contenu li { margin-bottom: 6px; }
.yr-contenu details { border-top: 1px solid #E5E7EB; }
.yr-contenu details:last-of-type { border-bottom: 1px solid #E5E7EB; }
.yr-contenu summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: #111827; }
.yr-contenu details p { margin: 0 0 12px; }
.yr-mention-legale { margin-top: 32px; font-size: 13px; color: #6B7280; }

/* ── Bandeau d'inscription (apres telechargement) ────────────────────────── */
.yr-bandeau { margin-top: 24px; padding: 20px; border: 1px solid #D1D5DB; border-radius: 4px; background: #F9FAFB; }
.yr-bandeau h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #111827; }
.yr-bandeau p { margin: 0 0 6px; color: #374151; max-width: 640px; }
.yr-bandeau a { display: inline-block; margin: 10px 8px 0 0; text-decoration: none; }

/* ── Impression ──────────────────────────────────────────────────────────── */
@media print {
  /* margin: 0 supprime les en-tetes et pieds que Chrome imprime par defaut
     (URL, date, titre d'onglet). Les marges haut/bas sont portees par les
     thead/tfoot de .doc-cadre, repetes sur CHAQUE page ; les marges laterales
     par le padding de #yr-apercu. */
  @page { size: A4; margin: 0; }

  body > *:not(.container),
  header:not(.doc-entete), footer, .hero, .yr-form, .yr-contenu, .yr-alerte, .yr-apercu-tete,
  #yr-bandeau-conversion { display: none !important; }

  body { background: #fff !important; }
  .container { max-width: none !important; padding: 0 !important; }
  .yr-outil { margin: 0 !important; }
  .yr-outil-grille { display: block !important; }
  .yr-apercu-colonne { position: static !important; background: none !important; border: 0 !important; padding: 0 !important; }

  .yr-apercu { box-shadow: none; padding: 0 12mm; width: 100%; font-size: 10pt; }
  .doc-cadre > thead .doc-marge, .doc-cadre > tfoot .doc-marge { height: 14mm; }
  .doc-cadre > thead { display: table-header-group; }
  .doc-cadre > tfoot { display: table-footer-group; }
  .yr-apercu * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Documents multi-pages : l'en-tete du tableau se repete, et aucun bloc
     totaux, signature ou ligne n'est coupe en deux. */
  .doc-lignes thead { display: table-header-group; }
  .doc-lignes tr, .doc-moitie, .doc-signatures { break-inside: avoid; }
}