/* =====================================================================
   Demande de licences Microsoft (0.15.0) : formulaire, vérification.
   S'appuie sur les variables et composants de portal.css (carte, champs, boutons, alertes).
   ===================================================================== */

.licence-page { min-height: calc(100vh - 66px); padding: 24px 16px 48px; display: flex; justify-content: center; }
/* body.night écrit en blanc ; la carte, blanche dans les deux thèmes, fixe sa propre couleur de texte. */
.licence-card { width: 100%; max-width: 980px; color: var(--ink); }

.licence-head { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.licence-head h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.15; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.licence-kicker { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.licence-logo { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }

.licence-reminders {
    margin: 0 0 24px; padding: 14px 18px; border-radius: var(--radius-md);
    background: #FDF3F3; border: 1px solid #F5C2C3;
}
.licence-reminders h2 { margin: 0 0 6px; font-size: 15px; color: var(--red-deep); }
.licence-reminders ol { margin: 0; padding-left: 20px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.licence-reminders li + li { margin-top: 2px; }

.licence-fieldset { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.licence-fieldset legend,
.licence-summary h2,
.licence-block h2 { padding: 0; margin: 0 0 12px; font-size: 17px; font-weight: 800; color: var(--navy); }

.licence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.licence-grid .field { margin-bottom: 16px; }
.field-label { display: block; margin: 0 0 6px; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.licence-static {
    margin: 0; min-height: 46px; padding: 11px 14px; border-radius: var(--radius-md);
    background: var(--surface-2); border: 1px dashed var(--line-strong); color: var(--ink); overflow-wrap: anywhere;
}

/* Champs propres à cette page (portal.css ne met en forme que les input des .field). */
.licence-form select,
.licence-form textarea,
.licence-input,
.licence-form input[type="tel"] {
    width: 100%; min-height: 44px; padding: 9px 12px; font: inherit; font-size: 15px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.licence-form textarea { min-height: 84px; resize: vertical; }
.licence-form select:hover,
.licence-form textarea:hover,
.licence-input:hover { border-color: #B9C3D1; }
.licence-form select:focus,
.licence-form textarea:focus,
.licence-input:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.licence-form [aria-invalid="true"] { border-color: var(--red); }

.licence-table-wrap { width: 100%; overflow-x: auto; }
.licence-lines,
.licence-prices { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.licence-lines th,
.licence-prices th { text-align: left; font-size: 13px; font-weight: 700; color: var(--muted); padding: 8px 8px; border-bottom: 2px solid var(--line-strong); }
.licence-lines td,
.licence-prices td,
.licence-prices tbody th { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.licence-prices tbody th { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.licence-th-help { font-weight: 400; }
.licence-col-num { width: 44px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 18px; }
.licence-lines--read .licence-col-num { padding-top: 7px; }
.licence-col-remove { width: 52px; text-align: right; }
.licence-line--error td { background: #FFF7F7; }
.licence-break { overflow-wrap: anywhere; }
.licence-add { margin-top: 10px; }
.licence-add[disabled] { opacity: .55; cursor: not-allowed; }

.licence-summary { margin: 0 0 22px; }
.licence-prices .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.licence-row--empty td, .licence-row--empty th { color: var(--muted); }
.licence-prices tfoot th { padding: 7px 8px; font-size: 14.5px; color: var(--ink); border-bottom: 1px solid var(--line); }
.licence-prices .licence-total th, .licence-prices .licence-total td { font-weight: 800; color: var(--ink); border-bottom: 0; }
.licence-prices .licence-total--ttc th, .licence-prices .licence-total--ttc td { background: #0070C0; color: #FFFFFF; }
.licence-total--ttc th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.licence-total--ttc td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.licence-check__label { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.licence-check__label input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--blue); }

.licence-block { margin: 0 0 22px; }
.licence-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.licence-dl dt { font-weight: 700; color: var(--muted); }
.licence-dl dd { margin: 0; overflow-wrap: anywhere; }
.licence-comment { margin: 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-2); overflow-wrap: anywhere; }

.licence-actions { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.licence-actions--stack { flex-direction: column; align-items: stretch; }

@media (max-width: 720px) {
    .licence-grid { grid-template-columns: minmax(0, 1fr); }
    .licence-head h1 { font-size: 24px; }
    .licence-logo { width: 56px; height: 56px; }
    .licence-lines thead { display: none; }
    .licence-lines, .licence-lines tbody, .licence-lines tr, .licence-lines td { display: block; width: 100%; }
    .licence-lines tr { position: relative; padding: 10px 44px 10px 34px; border-bottom: 1px solid var(--line); }
    .licence-lines td { border: 0; padding: 4px 0; }
    .licence-lines .licence-col-num { position: absolute; left: 0; top: 14px; width: 28px; padding: 0; }
    .licence-lines .licence-col-remove { position: absolute; right: 0; top: 10px; width: auto; }
    .licence-actions { flex-direction: column-reverse; align-items: stretch; }
    .licence-actions .btn { width: 100%; }
    /* Tableau des montants : tient dans la largeur d'un téléphone sans défilement (en-têtes sur plusieurs lignes). */
    .licence-prices { font-size: 13.5px; }
    .licence-prices th,
    .licence-prices td,
    .licence-prices tbody th,
    .licence-prices tfoot th { padding: 6px 4px; font-size: 13px; }
    .licence-prices thead th { vertical-align: bottom; }
    .licence-prices thead .num { white-space: normal; }
    .licence-prices tbody th { min-width: 7em; }
}

@media (forced-colors: active) {
    .licence-total--ttc th, .licence-total--ttc td { border: 1px solid CanvasText; }
}