/* Couleurs reprises de libremaster.com */
:root {
    --color-background: #111926;
    --color-background-glow: #3a0d14;
    --color-card: #303845;
    --color-text: #ffffff;
    --color-text-muted: #c5cad3;
    --color-primary: #ff0000;
    --color-secondary: #cdba50;
    --color-gold: #b0a36d;
    --color-ok: #3fb950;
    /* Fond vert des bandeaux, assez sombre pour du texte blanc */
    --color-ok-dark: #238636;
    --color-warn: #d29922;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background:
        linear-gradient(90deg, var(--color-background-glow) 0%, transparent 25%),
        var(--color-background);
}

a {
    color: inherit;
}

main {
    flex: 1;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Pages de liste du staff : toute la largeur de l'écran */
main.wide {
    max-width: none;
    padding: 0 32px;
}

/* En-tête */

.site-header nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.brand {
    font-size: 1.75rem;
    font-weight: bold;
    white-space: nowrap;
    text-decoration: none;
    color: var(--color-primary);
}

.brand-master {
    color: var(--color-text);
}

/* Boutons */

.button {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    background: var(--color-primary);
    color: var(--color-text);
    font-size: 1.1rem;
    text-decoration: none;
}

.button:hover {
    filter: brightness(1.15);
}

.button-outline {
    padding: 8px 16px;
    border-color: var(--color-secondary);
    background: transparent;
    color: var(--color-secondary);
    font-size: 1rem;
    white-space: nowrap;
}

/* Accueil */

.hero {
    text-align: center;
}

/* Chaque section porte sa marge du dessus ; le titre en prend davantage */
.hero h1 {
    margin: 48px 0 0;
    line-height: 1.2;
}

.hero h1 small {
    font-size: 0.7em;
}

/* Page d'essai : colonne centrale élargie */
main.landing {
    max-width: 1100px;
}

/* Annonce de lancement, sous le titre : date, compte à rebours et arguments */
.launch-notice {
    max-width: 1040px;
    margin: 28px auto 0;
    padding: 20px 36px;
    border: 3px solid var(--color-primary);
    border-radius: 8px;
    background: transparent;
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.35);
}

.launch-new {
    margin: 0 0 4px;
    color: var(--color-primary);
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1.2;
}

.launch-date {
    margin: 0;
    font-size: 1.4rem;
    font-weight: bold;
}

.launch-countdown:not([hidden]) {
    display: block;
    margin: 8px 0 0;
    color: var(--color-secondary);
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.pitches-title {
    margin: 0;
    color: var(--color-secondary);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Séparation avec l'annonce, tant qu'elle est affichée */
.launch-header:not([hidden]) + .pitches-title {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Flex plutôt que grille : une ligne incomplète reste centrée */
.pitches {
    --pitch-columns: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 16px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.pitch {
    flex: 0 0 calc((100% - (var(--pitch-columns) - 1) * 16px) / var(--pitch-columns));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.3;
}

.pitch em {
    font-style: normal;
    color: var(--color-primary);
}

.pitch em.pitch-ok {
    color: var(--color-ok);
}

/* Pastille ronde autour de l'icône */
.pitch-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border: 2px solid var(--color-secondary);
    border-radius: 50%;
    background: rgba(205, 186, 80, 0.12);
    box-shadow: 0 0 24px rgba(205, 186, 80, 0.25);
    color: var(--color-secondary);
}

.pitch-icon .icon {
    width: 32px;
    height: 32px;
}

/* Choix de l'activité, avant les offres */
.variants {
    margin-top: 28px;
    text-align: center;
}

.variants-title {
    margin: 0 0 14px;
    font-size: 1.2rem;
    font-weight: bold;
}

.variants-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.variant {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 260px;
    padding: 24px 20px;
    border: 2px solid var(--color-card);
    border-radius: 8px;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

.variant:hover {
    border-color: var(--color-secondary);
    transform: translateY(-3px);
}

.variant.is-active {
    border-color: var(--color-secondary);
    background: rgba(205, 186, 80, 0.12);
}

.variant-icon {
    font-size: 2.2rem;
    line-height: 1.2;
}

.variant-name {
    margin-top: 8px;
    font-size: 1.15rem;
    font-weight: bold;
}

.variant.is-active .variant-name {
    color: var(--color-secondary);
}

.variant-hint {
    margin: 4px 0 16px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.variant-button {
    /* Les boutons s'alignent en bas quelle que soit la longueur du texte */
    margin-top: auto;
    padding: 8px 20px;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    background: var(--color-primary);
    font-size: 0.95rem;
}

.variant.is-active .variant-button {
    border-color: var(--color-secondary);
    background: transparent;
    color: var(--color-secondary);
}

/* Les boîtes peuvent dépasser la largeur du contenu : centrées, et défilables si l'écran est trop étroit */
.offers-scroll {
    margin: 24px calc(50% - 50vw) 0;
    overflow-x: auto;
}

.highlights {
    margin: 24px 0 0;
}

.hero em {
    font-style: normal;
    color: var(--color-primary);
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    padding-bottom: 64px;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 4px;
    background: var(--color-card);
    text-align: center;
}

.card-link {
    text-decoration: none;
    border: 1px solid transparent;
}

.card-link:hover {
    border-color: var(--color-secondary);
}

/* Introduction mise en avant, fond or comme sur libremaster.com */

.intro {
    max-width: 1040px;
    margin: 24px auto 0;
    padding: 4px 28px;
    border-radius: 8px;
    background: var(--color-gold);
    color: var(--color-background);
    text-align: left;
}

/* Catalogue des offres, une boîte par offre */

.offers {
    display: grid;
    grid-auto-flow: column;
    /* Colonnes de largeur égale, plafonnées */
    grid-auto-columns: min(450px, 90vw);
    grid-template-rows: subgrid;
    width: max-content;
    margin: 0 auto;
    padding: 0 16px;
    gap: 12px 16px;
}

.offer {
    /* Les lignes des boîtes s'alignent entre elles */
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    padding: 20px 16px;
    border: 1px solid var(--color-card);
    border-radius: 8px;
    text-align: center;
}

.offer h2 {
    margin: 0;
    white-space: nowrap;
}

.offer > :last-child {
    align-self: start;
    justify-self: center;
}

/* L'alerte de stock, dans une boîte d'offre */
.offer > :last-child {
    align-self: start;
    justify-self: center;
}

/* L'alerte de stock, dans une boîte d'offre : même gabarit qu'un bouton */
.offer .alert {
    padding: 12px 24px;
    border-left-width: 1px;
    font-size: 1.1rem;
    text-align: center;
    color: var(--color-secondary);
    animation: blink 1.5s ease-in-out infinite;
}

.stock-note {
    margin: 8px 0 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

@keyframes blink {
    50% {
        opacity: 0.4;
    }
}

.offer em,
.red {
    font-style: normal;
    color: var(--color-primary);
}

/* Le nom mis en avant ne se coupe pas */
.offer em {
    white-space: nowrap;
}

.offer-price {
    margin: 0;
    color: var(--color-text-muted);
}

.offer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.offer-list li {
    padding: 8px 0;
    border-top: 1px solid var(--color-card);
}

/* Caractéristique mise en avant : bandeau vert, sur sa propre ligne de la grille */
.offer-highlight {
    margin: 0 -16px;
    padding: 0 16px;
}

.offer-highlight.is-filled {
    padding: 8px 16px;
    background: var(--color-ok-dark);
    color: var(--color-text);
}

.offer-highlight .offer-desc {
    color: inherit;
}

/* Description de la caractéristique, sous son nom */
.offer-desc {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* Une précision qui change par rapport à la première offre */
.offer-diff,
.offer-yes {
    color: var(--color-ok);
}

/* Rubrique dans la liste des caractéristiques d'une offre */
.offer-list .offer-section {
    padding-top: 28px;
    padding-bottom: 2px;
    border-top: 0;
    border-bottom: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    font-weight: bold;
}

/* Le filet doré de la rubrique remplace celui de la première ligne */
.offer-list .offer-section + li {
    border-top: 0;
}

.offer-specials li {
    padding: 4px 0;
    border-top: 0;
    color: var(--color-secondary);
}

/* Une zone vide ne laisse ni bordure ni espace */
.offer-list:empty {
    display: none;
}

.offer-options {
    margin: 20px 0 8px;
    padding: 0 12px 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
}

.offer-options li {
    padding: 4px 0;
    border-top: 0;
    color: var(--color-text-muted);
    font-style: italic;
}

.offer-options-title {
    margin: 0 -12px 8px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-muted);
}

.offer-hint {
    display: block;
}

/* Visuels des options, centrés et espacés */
.offer-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 8px 0;
}

.offer-images img {
    max-width: 100%;
    height: auto;
}

.button-disabled {
    border-color: var(--color-text-muted);
    background: transparent;
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* Arguments courts sous les offres */

.highlights {
    text-align: center;
    line-height: 1;
}

/* Tableau de bord */

.dashboard {
    padding: 24px 0 48px;
}

/* Page d'essai */

.credentials {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin: 0 0 24px;
    padding: 16px;
    border-radius: 4px;
    background: var(--color-card);
}

.credentials dt {
    color: var(--color-text-muted);
}

.credentials dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Avancement de la construction dans le cadre d'attente */
.build-progress-bar {
    position: relative;
    overflow: hidden;
    margin: 12px 0 4px;
    border-radius: 5px;
}

.build-progress progress {
    display: block;
    width: 100%;
    height: 10px;
    accent-color: var(--color-ok);
}

/* Reflet qui balaie la barre : le travail continue même quand le pourcentage ne bouge pas */
.build-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: build-progress-shine 1.6s ease-in-out infinite;
    pointer-events: none;
}

/* Phases de la construction : faite, en cours, à venir */
.build-phases {
    list-style: none;
    margin: 16px 0 8px;
    padding: 0;
    text-align: left;
}

.build-phases .phase {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0 4px 28px;
    position: relative;
}

.build-phases .phase::before {
    position: absolute;
    left: 0;
    width: 18px;
    text-align: center;
}

.phase-done::before {
    content: '✓';
    color: var(--color-ok);
    font-weight: bold;
}

.phase-current::before {
    content: '◌';
    color: var(--color-secondary);
    animation: phase-spin 1.2s linear infinite;
}

.phase-elapsed {
    color: var(--color-ok);
}

.phase-pending {
    color: var(--color-text-muted);
}

.phase-pending::before {
    content: '·';
}

.phase-failed {
    color: #ff6b6b;
}

.phase-failed::before {
    content: '✗';
    font-weight: bold;
}

/* Mise en service terminée ou en échec : plus de reflet sur la barre */
.build-progress-bar[data-still]::after {
    animation: none;
    display: none;
}

@keyframes phase-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .phase-current::before {
        animation: none;
    }
}

@keyframes build-progress-shine {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .build-progress-bar::after {
        animation: none;
    }
}

.build-progress p {
    margin: 0;
}

/* Espace de stockage : barre d'occupation, rouge à partir de 90 % */
.credentials progress.disk {
    display: block;
    width: 100%;
    max-width: 320px;
    height: 8px;
    margin: 6px 0;
    accent-color: var(--color-ok);
}

.credentials progress.disk-full {
    accent-color: var(--color-primary);
}

.muted {
    color: var(--color-text-muted);
}

/* Factures */

/* Défilement horizontal du tableau sur petit écran */
.table-scroll {
    overflow-x: auto;
}

.invoices {
    width: 100%;
    border-collapse: collapse;
}

.invoices th,
.invoices td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-card);
    text-align: left;
}

.invoices th {
    color: var(--color-text-muted);
    font-weight: normal;
}

.invoices .amount {
    text-align: right;
    white-space: nowrap;
}

.invoices a {
    color: var(--color-secondary);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
}

.pagination a {
    color: var(--color-secondary);
}

/* Liens du menu : discrets, soulignés en rouge sur la page en cours */
.nav-link {
    padding: 6px 12px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.nav-link:hover,
.nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
}

.nav-link.active {
    color: var(--color-text);
    box-shadow: inset 0 -2px 0 var(--color-primary);
}

/* Menu Administration : liste ouverte au survol ou au focus */
.admin-menu {
    position: relative;
}

/* Ronds d'état du superviseur, un par relevé, dans le menu de l'équipe ; date du dernier relevé dessous en cas d'alerte */
.supervisor-box {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    text-decoration: none;
}

.supervisor-check {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Une forme par relevé : rond pour la passe, carré pour les hôtes, losange pour les offres */
.supervisor-status.supervisor-hosts {
    border-radius: 2px;
}

.supervisor-status.supervisor-offers {
    border-radius: 0;
    transform: rotate(45deg) scale(0.85);
}

.supervisor-last {
    color: var(--color-primary);
    font-size: 0.7rem;
    line-height: 1;
    white-space: nowrap;
}

.supervisor-status {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

/* Essai en cours : pastille qui clignote doucement */
.pill-blink {
    animation: pill-blink 1.5s ease-in-out infinite;
}

@keyframes pill-blink {
    50% {
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pill-blink {
        animation: none;
    }
}

.supervisor-ok {
    background: var(--color-ok);
}

.supervisor-down {
    background: var(--color-primary);
    animation: supervisor-blink 1s steps(2, start) infinite;
}

@keyframes supervisor-blink {
    to {
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .supervisor-down {
        animation: none;
    }
}

.admin-menu-toggle::after {
    content: " ▾";
}

.admin-menu-list {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    display: none;
    flex-direction: column;
    min-width: 200px;
    margin-top: 8px;
    padding: 8px 0;
    border-radius: 4px;
    background: var(--color-card);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Pont invisible : la souris passe du bouton à la liste sans la refermer */
.admin-menu-list::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 0;
    left: 0;
    height: 8px;
}

.admin-menu:hover .admin-menu-list,
.admin-menu:focus-within .admin-menu-list {
    display: flex;
}

.admin-menu-list a {
    padding: 8px 16px;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

/* Entête de catégorie, séparé du groupe précédent */
.admin-menu-group {
    margin: 0;
    padding: 8px 16px 2px;
    color: var(--color-secondary);
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-menu-list a + .admin-menu-group {
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-menu-list a:hover,
.admin-menu-list a:focus-visible {
    background: var(--color-background);
    color: var(--color-text);
}

/* Bandeau du module d'administration en cours : titre et sous-menu */
.module-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 24px;
    padding: 8px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.module-title {
    margin: 0;
    font-weight: bold;
    color: var(--color-secondary);
}

.module-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

/* Chiffres clés d'une liste : une ligne compacte au-dessus des filtres */
.list-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin: 0 0 16px;
}

.list-stats > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.list-stats dt {
    color: var(--color-text-muted);
}

.list-stats dd {
    margin: 0;
    font-weight: bold;
}

/* Symboles devant les noms : offre technique et plan, distingués d'un coup d'œil */
.offer-name::before {
    content: "⚙ ";
}

.plan-name::before {
    content: "◆ ";
}

.service-name::before {
    content: "▣ ";
}

/* Mémo sous le titre d'une page d'administration : à quoi elle sert */
.page-memo {
    max-width: 760px;
    margin: 0 0 16px;
    padding: 4px 12px;
    border-left: 3px solid var(--color-gold);
    color: var(--color-text-muted);
}

/* Mémos côte à côte, couleur du groupe de colonnes qu'ils expliquent */
.page-memos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.page-memos .page-memo {
    max-width: none;
    margin: 0;
    font-size: 0.9rem;
}

.page-memo-infra {
    border-left-color: #58a6ff;
}

.page-memo-remote {
    border-left-color: #bc8cff;
}

/* Liste des ressources */
.resource-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 16px;
}

/* Champs à leur taille naturelle, pas en pleine largeur comme dans les formulaires */
.resource-filters input[type="search"],
.resource-filters select {
    width: auto;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    background: var(--color-card);
    color: var(--color-text);
    font-size: 0.95rem;
}

.resource-filters input::placeholder {
    color: var(--color-text-muted);
}

.resource-filters input[type="search"] {
    width: 260px;
}

.resource-filters button[type="submit"] {
    width: auto;
    padding: 6px 16px;
    border: 1px solid var(--color-secondary);
    background: transparent;
    color: var(--color-secondary);
    font-size: 0.95rem;
}

.resource-filters label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
}

.data-table th a {
    color: var(--color-text-muted);
}

.data-table progress.disk {
    display: block;
    width: 120px;
    height: 6px;
    accent-color: var(--color-ok);
}

.data-table progress.disk-full {
    accent-color: var(--color-primary);
}

.data-table .expired {
    color: var(--color-primary);
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--color-card);
    font-size: 0.85rem;
    white-space: nowrap;
}

.badge-requested,
.badge-building,
.badge-configuring,
.badge-destroy_requested,
.badge-destroying {
    color: #f0a040;
}

.badge-available {
    color: #7ee787;
}

.badge-assigned {
    color: #d2a8ff;
}

.badge-collected {
    color: #79c0ff;
}

.badge-destroyed {
    color: var(--color-primary);
}

/* Alertes */

.alert {
    max-width: 560px;
    margin: 0 auto;
    padding: 16px 24px;
    border: 1px solid var(--color-secondary);
    border-left-width: 6px;
    border-radius: 4px;
    background: rgba(205, 186, 80, 0.12);
    text-align: left;
}

/* Message de réussite (messages.success) */
.alert-success {
    border-color: var(--color-ok);
    background: rgba(63, 185, 80, 0.12);
}

.alert strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-secondary);
    font-size: 1.1rem;
}

.alert p {
    margin: 0;
    color: var(--color-text);
}

/* Formulaires (pages de connexion et d'inscription) */

.panel {
    max-width: 480px;
    padding-top: 24px;
    padding-bottom: 48px;
}

.onboarding-panel {
    max-width: 600px;
}

.onboarding-panel > p {
    color: var(--color-text-muted);
    line-height: 1.55;
}

.onboarding-form {
    margin-top: 28px;
    padding: 28px;
    border: 1px solid var(--color-card);
    border-radius: 10px;
    background: var(--color-surface, #111926);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.onboarding-form .field-row {
    margin: 0 0 20px;
}

.onboarding-form small {
    display: block;
    margin-top: 6px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.address-choice {
    margin: 24px 0;
    padding: 18px;
    border: 1px solid var(--color-secondary);
    border-radius: 8px;
    background: rgba(205, 186, 80, 0.09);
}

.address-choice__title {
    margin: 0 0 14px;
    color: var(--color-text);
    line-height: 1.5;
}

.address-choice__title strong {
    font-size: 1.05rem;
}

.address-choice__title span {
    color: var(--color-secondary);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.address-choice__details {
    border-top: 1px solid rgba(205, 186, 80, 0.35);
    padding-top: 12px;
}

.address-choice__details summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    border: 1px solid var(--color-secondary);
    border-radius: 5px;
    color: var(--color-secondary);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.address-choice__details summary::-webkit-details-marker {
    display: none;
}

.address-choice__details summary:hover,
.address-choice__details[open] summary {
    background: var(--color-secondary);
    color: #111926;
}

.customize-icon {
    font-size: 1.1rem;
}

.address-choice__input {
    margin-top: 14px;
}

.mode-choice {
    margin: 24px 0;
    padding: 0;
    border: 0;
}

.mode-choice legend {
    margin-bottom: 8px;
    color: var(--color-text);
    font-weight: 700;
}

.mode-choice label {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 8px;
    color: var(--color-text);
}

.mode-choice input[type="radio"] {
    accent-color: var(--color-primary);
}

.consent-choice {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: start;
    margin: 26px 0 22px;
    padding: 16px;
    border: 1px solid var(--color-card);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
}

.consent-choice input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--color-primary);
}

.consent-choice label {
    margin: 0;
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.45;
}

.consent-choice small {
    grid-column: 2;
}

.consent-choice .errorlist {
    grid-column: 1 / -1;
}

/* Titre des pages de l'application, hors pages d'accueil : un trait rouge comme le menu */
.panel h1,
.dashboard h1 {
    margin: 0 0 24px;
    font-size: 1.75rem;
    line-height: 1.2;
}

.panel h1::after,
.dashboard h1::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 12px;
    border-radius: 2px;
    background: var(--color-primary);
}

.panel a {
    color: var(--color-secondary);
}

/* Un lien présenté en bouton garde la couleur du bouton */
.panel a.button {
    color: var(--color-text);
}

form p {
    margin: 0 0 16px;
}

label {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-muted);
}

input[type="email"],
input[type="password"],
input[type="text"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-card);
    border-radius: 4px;
    background: #0b111b;
    color: var(--color-text);
    font-size: 1rem;
}

/* Case à cocher sur la même ligne que son libellé */
form p:has(> input[type="checkbox"]) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

form p:has(> input[type="checkbox"]) label {
    margin: 0;
}

/* Paiement : options et adresse de facturation dans deux cadres distincts */
.checkout-block {
    margin: 0 0 24px;
    padding: 12px 20px 16px;
    border: 1px solid var(--color-card);
    border-radius: 6px;
}

.checkout-block legend {
    padding: 0 8px;
    color: var(--color-secondary);
    font-weight: bold;
}

.checkout-block p:last-child {
    margin-bottom: 0;
}

/* Quantité d'une option : gros boutons − et + autour du nombre */
.quantity-row {
    margin: 8px 0 16px;
}

.stepper {
    display: inline-flex;
    align-items: stretch;
}

.stepper button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-card);
    background: var(--color-card);
    color: var(--color-text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.stepper button:first-child {
    border-radius: 4px 0 0 4px;
}

.stepper button:last-child {
    border-radius: 0 4px 4px 0;
}

.stepper button:hover {
    filter: brightness(1.2);
}

.stepper input[type="number"] {
    width: 64px;
    border: 1px solid var(--color-card);
    background: #0b111b;
    color: var(--color-text);
    font-size: 1.1rem;
    text-align: center;
    appearance: textfield;
}

.stepper input[type="number"]::-webkit-inner-spin-button,
.stepper input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
}

form button[type="submit"] {
    width: 100%;
    padding: 12px 24px;
    border: 0;
    border-radius: 4px;
    background: var(--color-primary);
    color: var(--color-text);
    font-size: 1.1rem;
    cursor: pointer;
}

form button[type="submit"]:hover {
    filter: brightness(1.15);
}

/* Actions secondaires rattachées à un autre formulaire : email en attente de confirmation */
form button[type="submit"][form] {
    display: block;
    margin-top: 8px;
    border: 1px solid var(--color-secondary);
    background: transparent;
    color: var(--color-secondary);
    font-size: 1rem;
}

.errorlist {
    margin: 0 0 8px;
    padding: 8px 12px;
    list-style: none;
    border-left: 4px solid var(--color-primary);
    background: rgba(255, 0, 0, 0.12);
}

.messages {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

/* Petits écrans */

@media (max-width: 720px) {
    .launch-notice {
        padding: 16px 12px;
    }

    .launch-new {
        font-size: 2rem;
    }

    .launch-countdown:not([hidden]) {
        font-size: 1.6rem;
    }

    .pitches {
        --pitch-columns: 2;
    }

    .pitch {
        font-size: 1.05rem;
    }

    .pitch-icon {
        width: 60px;
        height: 60px;
    }

    .pitch-icon .icon {
        width: 26px;
        height: 26px;
    }

    .site-header {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .site-header nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
    }

    .offers {
        grid-auto-flow: row;
        width: auto;
    }

    .offer {
        grid-row: auto;
        grid-template-rows: none;
    }
}

@media (max-width: 480px) {
    .site-header {
        padding: 12px 16px;
    }

    .module-header {
        padding: 8px 16px;
    }

    .brand {
        font-size: 1.35rem;
    }

    .hero {
        padding-top: 48px;
    }

    .hero h1 {
        font-size: 2rem;
    }
}

/* Bandeau de nouvelle version */

.release-banner:not([hidden]) {
    position: fixed;
    right: 24px;
    bottom: 72px;
    left: 24px;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 24px;
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 28px;
    border: 2px solid var(--color-secondary);
    border-radius: 8px;
    background: var(--color-card);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    font-size: 1.15rem;
    text-align: center;
}

.release-banner button {
    padding: 12px 32px;
    border: 0;
    border-radius: 4px;
    background: var(--color-primary);
    color: var(--color-text);
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
}

.release-banner button:hover {
    filter: brightness(1.15);
}

/* Pied de page */

.site-footer {
    margin-top: 48px;
    padding: 12px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    opacity: 0.7;
}

.site-footer a {
    text-decoration: none;
}

/* Onglets de gamme : un filet large comme le tableau, sur lequel les onglets reposent */
.grid-tabs-bar {
    margin: 40px calc(50% - 50vw) 0;
    padding: 0 16px;
    overflow-x: hidden;
}

.grid-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    border-bottom: 2px solid var(--color-card);
}

.grid-tab {
    /* Le bord bas de l'onglet recouvre le filet */
    margin-bottom: -2px;
    padding: 10px 20px;
    border: 2px solid var(--color-card);
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1rem;
    cursor: pointer;
}

.grid-tab:hover {
    color: var(--color-text);
}

.grid-tab.is-active {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    font-weight: bold;
}

.grid-panel {
    display: none;
}

.grid-panel.is-active {
    display: block;
}

/* En-tête de la grille tarifaire */
.grid-intro {
    margin-top: 48px;
    text-align: center;
}

.grid-intro h1 {
    display: inline-block;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-secondary);
}

.grid-intro p {
    max-width: 900px;
    margin: 24px auto 0;
    padding: 16px 28px;
    border-radius: 8px;
    background: var(--color-gold);
    color: var(--color-background);
}

.grid-scroll {
    margin: 24px calc(50% - 50vw) 0;
    padding: 0 16px;
    overflow-x: auto;
}

.grid-table {
    width: max-content;
    margin: 0 auto;
    border-collapse: collapse;
}

.grid-table th,
.grid-table td {
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-card);
    font-weight: normal;
    text-align: center;
}

.grid-table .grid-label {
    min-width: 320px;
    max-width: 460px;
    text-align: left;
}

.grid-table thead th {
    vertical-align: top;
}

.grid-service {
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
}

.grid-price {
    display: block;
    color: var(--color-text-muted);
}

.grid-section th {
    padding-top: 24px;
    color: var(--color-secondary);
    font-weight: bold;
    text-align: left;
}

.grid-yes {
    color: var(--color-ok);
}

.grid-no {
    color: var(--color-primary);
}

.grid-hint {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.grid-images {
    display: block;
    margin: 4px 0;
}

.grid-images img {
    height: 24px;
    margin-right: 6px;
    vertical-align: middle;
}

/* Prolongation, séparée des accès et de l'avis sur le mot de passe */
.trial-extend {
    margin-top: 24px;
}

/* Suite proposée sous l'encadré d'un essai terminé */
.trial-next {
    max-width: 560px;
    margin: 28px auto 0;
    text-align: center;
}

.trial-next p {
    margin: 0 0 16px;
}

/* Bouton d'action staff présenté comme un lien, dans une cellule de tableau */
.inline-form {
    display: inline;
    margin-left: 8px;
}

.inline-form .link-danger {
    width: auto;
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Outils de test, affichés en développement seulement : flottants, ils ne décalent pas la page */
.dev-box {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 900;
    max-width: 300px;
    padding: 10px 14px;
    border: 2px dashed var(--color-warn);
    border-radius: 6px;
    background: var(--color-card);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dev-box h2 {
    margin: 0 0 8px;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--color-warn);
}

.dev-box form button[type="submit"] {
    width: auto;
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Fiche ressource : en-tête, actions en boutons, informations à leur largeur */
.back-link {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.resource-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0 16px;
}

.resource-head h1 {
    margin: 0;
    overflow-wrap: anywhere;
}

.resource-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.resource-actions .inline-form {
    margin-left: 0;
}

.inline-form .button-danger {
    width: auto;
    padding: 8px 16px;
    border: 1px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    font-size: 1rem;
}

.resource-info {
    max-width: 640px;
}

/* Page d'un service : toute la largeur, cartes Accès, Abonnement et Sauvegarde */
main.service-page {
    max-width: none;
    padding: 0 32px;
}

.breadcrumb {
    margin-bottom: 8px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--color-secondary);
    text-decoration: none;
}

.service-page h1 .pill {
    margin-left: 8px;
    vertical-align: middle;
    font-size: 0.9rem;
}

.service-address {
    margin: -12px 0 24px;
    color: var(--color-text-muted);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
}

/* Colonne Accès : 1 part, les cartes voisines 1,3 ; minmax(0) : un contenu large ne déborde pas */
@media (min-width: 1100px) {
    .service-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    }

    .service-grid:has(> :nth-child(3)) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr);
    }
}

/* Carte sans aplat : filet discret, liseré doré en tête */
.service-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px 26px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid var(--color-gold);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 60%);
}

.service-card h2 {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-secondary);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.service-card pre {
    margin: 4px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    overflow-x: auto;
}

/* Actions groupées en pied de carte */
.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.card-actions:not(:has(*)) {
    display: none;
}

.card-actions .card-action,
.card-actions form button.card-action[type="submit"] {
    margin-top: 0;
}

.service-card h3 {
    margin: 16px 0 4px;
    font-size: 1rem;
}

/* Domaine personnalisé, dans la carte Ressource */
.custom-domain {
    margin: 4px 0 16px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.custom-domain-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.custom-domain-form input {
    flex: 1 1 220px;
    width: auto;
}

.custom-domain-form .card-action {
    margin-top: 0;
}

/* Page du domaine personnalisé : étapes numérotées */
.domain-steps {
    counter-reset: domain-step;
    display: grid;
    gap: 24px;
    max-width: 900px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.domain-steps > li {
    counter-increment: domain-step;
}

.domain-steps > li > h2::before {
    content: counter(domain-step) ". ";
}

.domain-name {
    font-size: 1.1rem;
}

.dns-record code {
    font-size: 1rem;
}

.provider-steps {
    margin: 0 0 12px;
    padding-left: 22px;
}

.provider-steps li {
    margin-bottom: 6px;
}

.provider-list summary {
    cursor: pointer;
    color: var(--color-text-muted);
}

.dns-check {
    margin: 0 0 8px;
    padding: 12px 16px;
    border-left: 4px solid var(--color-text-muted);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    font-weight: bold;
}

.dns-check-ok {
    border-color: var(--color-ok);
    background: rgba(63, 185, 80, 0.12);
    color: var(--color-ok);
}

.dns-check-ko {
    border-color: var(--color-warn);
    background: rgba(210, 153, 34, 0.12);
    color: var(--color-warn);
}

/* Parties d'une même carte, séparées par un filet */
.service-section + .service-section {
    margin-top: 20px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.service-card .alert {
    max-width: none;
    margin: 0 0 16px;
}

/* Libellé au-dessus de sa valeur */
.facts {
    margin: 0;
}

/* Libellé discret, valeur en clair */
.facts dt {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.facts dd {
    margin: 2px 0 16px;
    overflow-wrap: anywhere;
}

.facts dd strong,
.facts dd a {
    color: var(--color-text);
}

.facts progress.disk {
    display: block;
    width: 100%;
    max-width: 320px;
    height: 8px;
    margin: 6px 0;
    accent-color: var(--color-ok);
}

.facts progress.disk-full {
    accent-color: var(--color-primary);
}

/* Pastille d'état : point coloré et libellé */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: bold;
    white-space: nowrap;
}

.pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.pill-ok {
    background: rgba(63, 185, 80, 0.15);
    color: var(--color-ok);
}

.pill-warn {
    background: rgba(210, 153, 34, 0.15);
    color: var(--color-warn);
}

.pill-danger {
    background: rgba(255, 0, 0, 0.15);
    color: #ff6b6b;
}

.pill-muted {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted);
}

.alert-danger {
    max-width: none;
    margin: 0 0 16px;
    border-color: var(--color-primary);
    background: rgba(255, 0, 0, 0.12);
}

/* Période payée : barre d'avancement entre ses deux dates */
.period {
    margin-bottom: 16px;
}

.period-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.period-bar span {
    display: block;
    height: 100%;
    background: var(--color-text);
}

.period-dates {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.period-left {
    margin: 2px 0 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-align: right;
}

/* Action d'une carte : lien fléché, ou bouton présenté comme tel */
.card-action,
form button.card-action[type="submit"] {
    display: inline-block;
    width: auto;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-secondary);
    font: inherit;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.card-action:hover,
form button.card-action[type="submit"]:hover {
    filter: none;
    text-decoration: underline;
}

/* Carte intégrité de la fiche ressource, détachée du tableau */
.resource-integrity {
    margin-top: 24px;
}

/* Action sur la ligne d'une valeur, sans marge haute */
.card-action-inline {
    margin: 0 0 0 12px;
}

form button.card-action-danger[type="submit"] {
    color: #ff6b6b;
}

/* Bouton de copie, discret à côté de la valeur */
.copy {
    margin-left: 4px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    cursor: pointer;
}

.copy:hover {
    color: var(--color-text);
}

/* Plans proposés dans la carte d'un essai */
.plan-choices {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.plan-choices li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.plan-choices .card-action {
    margin: 0;
    white-space: nowrap;
}

/* Plans et services : une ligne par service, le plan en tête de son groupe */
/* Actions d'une page sur une ligne, sous le titre */
.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.page-actions form {
    margin: 0;
}

.plan-sales-refresh {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.plan-sales-refresh p {
    margin: 0;
}

/* Cases resserrées : le tableau a beaucoup de colonnes */
.plan-sales th,
.plan-sales td {
    padding: 6px 8px;
    vertical-align: top;
}

.plan-sales th,
.plan-sales .plan-sales-number {
    text-align: center;
}

/* Entête commun à plusieurs colonnes, souligné au-dessus de ses sous-colonnes */
.plan-sales .plan-sales-group {
    /* Filet dessiné en fond, raccourci de chaque côté : deux groupes voisins restent séparés */
    background: linear-gradient(var(--group-color), var(--group-color)) 8px 100% / calc(100% - 16px) 2px no-repeat;
    color: var(--group-color);
}

.plan-sales .plan-sales-catalogue {
    --group-color: var(--color-gold);
    color: var(--color-gold);
}

.plan-sales .plan-sales-infra {
    --group-color: #58a6ff;
    color: #58a6ff;
}

.plan-sales .plan-sales-remote {
    --group-color: #bc8cff;
    color: #bc8cff;
}

/* Valeurs centrées, sauf le nom du service */
.plan-sales.offer-summary td {
    text-align: center;
}

.plan-sales.offer-summary td.offer-summary-service {
    text-align: left;
}

.plan-sales .plan-sales-resource {
    --group-color: #f778ba;
    color: #f778ba;
}

.plan-sales .plan-sales-trial {
    --group-color: var(--color-ok);
    color: var(--color-ok);
}

.plan-sales thead th {
    vertical-align: bottom;
}

.plan-sales tbody {
    border-top: 3px solid var(--color-card);
}

.plan-sales-plan td:first-child {
    font-weight: bold;
}

.plan-sales td.plan-sales-plan-cell {
    vertical-align: middle;
}

/* Accolade à droite du nom du plan, sur la hauteur de ses lignes */
.plan-sales td.plan-sales-brace {
    position: relative;
    padding-right: 24px;
}

.plan-sales-brace::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    right: 8px;
    width: 10px;
    /* Accolade étirée en hauteur, trait d'épaisseur constante */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cpath d='M9 1Q5 1 5 10V40Q5 50 1 50Q5 50 5 60V90Q5 99 9 99' fill='none' stroke='%23c5cad3' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* Case identique à la ligne du plan : petit trait */
.plan-sales td.plan-sales-same {
    vertical-align: middle;
}

.plan-sales-same::before {
    content: "";
    display: block;
    width: 12px;
    margin: 0 auto;
    border-top: 1px solid var(--color-text-muted);
}

/* Pointillé entre le plan et ses options, de la colonne Service à la fin de la ligne */
.plan-sales tr:not(:last-child) td {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}

.plan-sales td[rowspan] {
    border-bottom: 1px solid var(--color-card);
}

.plan-sales-option td:first-child {
    color: var(--color-text-muted);
}

/* Vérification passée en texte discret, écart en orange */
.check-ok {
    color: var(--color-text-muted);
}

.check-ok::before {
    content: "✓ ";
    color: var(--color-ok);
}

.check-todo {
    color: var(--color-warn);
    font-weight: bold;
}

.check-todo::before {
    content: "! ";
}

.plan-sales .pill + .check-todo,
.check-action {
    display: block;
    margin-top: 6px;
}

.check-action {
    color: var(--color-warn);
    font-size: 0.9rem;
}

.plan-sales-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

/* Bouton de synchronisation devant la date */
.plan-sales-sync {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6px;
}

/* Colonne des actions à la largeur de ses boutons */
.plan-sales-actions-cell {
    width: 1%;
    white-space: nowrap;
}

/* Boutons à leur largeur, blanc sur gris ; la règle générale des formulaires les étire */
.plan-sales-button,
form button.plan-sales-button[type="submit"] {
    display: inline-block;
    width: auto;
    padding: 8px 16px;
    border: 1px solid #6b7585;
    border-radius: 4px;
    background: #4a5363;
    color: var(--color-text);
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Bouton à symbole : carré, le libellé est dans l'infobulle */
.plan-sales-icon,
form button.plan-sales-icon[type="submit"] {
    min-width: 32px;
    padding: 4px 8px;
    line-height: 1.2;
}

form button.plan-sales-button-main[type="submit"] {
    border-color: var(--color-ok-dark);
    background: var(--color-ok-dark);
}

/* Écran d'attente d'un formulaire long : cercles reliés, allumés tour à tour */
.processing {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(17, 25, 38, 0.85);
}

.processing-box {
    max-width: 420px;
    width: 100%;
    padding: 24px;
    border-radius: 8px;
    background: var(--color-card);
}

.processing-steps {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.processing-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding: 10px 0;
    color: var(--color-text-muted);
}

/* Trait qui relie chaque cercle au suivant */
.processing-steps li + li::before {
    content: "";
    position: absolute;
    left: 10px;
    top: -10px;
    height: 20px;
    border-left: 2px solid var(--color-text-muted);
    opacity: 0.4;
}

.processing-dot {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--color-text-muted);
    box-sizing: border-box;
}

.processing-steps .is-current {
    color: var(--color-text);
}

.processing-steps .is-current .processing-dot {
    border-color: var(--color-gold);
    border-top-color: transparent;
    animation: phase-spin 0.9s linear infinite;
}

.processing-steps .is-done .processing-dot {
    border-color: var(--color-ok);
    background: var(--color-ok);
}

@media (prefers-reduced-motion: reduce) {
    .processing-steps .is-current .processing-dot {
        animation: none;
        border-top-color: var(--color-gold);
    }
}

/* Historique des emails : message affiché tel que reçu, dans un cadre isolé */
.sent-email {
    width: 100%;
    height: 70vh;
    border: 1px solid #d9dce1;
    border-radius: 8px;
    background: #ffffff;
}

.sent-email-text {
    white-space: pre-wrap;
}