/* CalcTub — Direction C design system */

:root {
    /* Direction C */
    --color-bg-main:               #f6f3ec;
    --color-card:                  #fbf9f3;
    --color-card-header:           #1b2230;
    --color-text-primary:          #1b2230;
    --color-text-secondary:        #6b7280;
    --color-text-muted:            #9ca3af;
    --color-border:                #ddd8cc;
    --color-button:                #1b2230;
    --color-button-hover:          #2a3347;
    --color-button-validate:       #9c2a2a;
    --color-button-validate-hover: #7d2222;
    --color-green-bg:              #edf2ee;
    --color-green-border:          #4a7c59;
    --color-green-text:            #2d5a3d;
    --color-red-bg:                #f5eeee;
    --color-red-border:            #9c2a2a;
    --color-red-text:              #9c2a2a;
    --color-blue-bg:               #f1ede4;
    --color-blue-border:           #1b2230;
    --color-blue-text:             #1b2230;
    --color-purple-bg:             #f1ede4;
    --color-purple-border:         #5a4a6a;
    --color-purple-text:           #5a4a6a;
    --color-orange-bg:             #f5eeee;
    --color-orange-border:         #9c2a2a;
    --color-orange-text:           #9c2a2a;

    /* Aliases legacy — mappés Direction C */
    --grey-bg:      #f6f3ec;
    --grey-card:    #fbf9f3;
    --grey-text:    #1b2230;
    --grey-sub:     #6b7280;
    --border:       #ddd8cc;
    --shadow:       none;
    --blue-dark:    #1b2230;
    --blue-mid:     #1b2230;
    --blue-light:   #1b2230;
    --green:        #9c2a2a;
    --green-dark:   #2d5a3d;
    --green-bg:     #edf2ee;
    --green-border: #4a7c59;
    --orange:       #9c2a2a;
    --orange-dark:  #9c2a2a;
    --orange-bg:    #f5eeee;
    --red:          #9c2a2a;
    --red-dark:     #9c2a2a;
    --red-bg:       #f5eeee;
    --yellow:       #ddd8cc;
    --purple:       #5a4a6a;
    --purple-bg:    #f1ede4;
}

/* Café / Stripe disclaimer banner */
.cafe-banner {
    background: #fffbf5;
    border-bottom: 1px solid #f0e0c0;
    text-align: center;
    padding: 7px 16px;
    font-size: 0.85rem;
}
.cafe-banner--footer {
    background: transparent;
    border-bottom: none;
    border-top: 1px solid #f0e0c0;
    margin-top: 10px;
    padding-top: 10px;
}
.cafe-link {
    color: #7a5230;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}
.cafe-link:hover { color: #9c2a2a; }
.cafe-cards {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-left: 4px;
}
.card-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    border: 1px solid;
    background: #fff;
}
.card-badge.visa  { color: #1a1f71; border-color: #1a1f71; }
.card-badge.mc    { color: #eb001b; border-color: #eb001b; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    background: var(--grey-bg);
    color: var(--grey-text);
    min-height: 100vh;
    font-size: 14px;
    padding-bottom: 70px; /* espace pour le bandeau pub footer */
}

/* ── Header ─────────────────────────────────── */
.header {
    background: #1b2230;
    color: white;
    padding: 14px 20px 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon {
    font-size: 1.6rem;
    opacity: 0.9;
}

.header h1 {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.header-sub {
    font-size: 0.72rem;
    opacity: 0.75;
    margin-top: 2px;
}

.header-meta {
    font-size: 0.7rem;
    opacity: 0.6;
    white-space: nowrap;
}

/* ── Layout page + sidebar ───────────────────── */
#page-layout {
    display: flex;
    align-items: flex-start;
    gap: 0;
    max-width: 1700px;
    margin: 0 auto;
}

#main-col {
    flex: 1 1 0;
    min-width: 0;
}

#sidebar-ad {
    display: none;
    flex-shrink: 0;
    width: 300px;
    padding: 1rem 12px 0 8px;
    position: sticky;
    top: 80px;
}

@media (min-width: 1100px) {
    #sidebar-ad { display: block; }
}

/* ── Footer pub ──────────────────────────────── */
#footer-ad {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    background: rgba(251,249,243,0.92);
    border-top: 1px solid var(--border);
    padding: 4px 0 2px;
    text-align: center;
}

/* ── Container ──────────────────────────────── */
.main-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
}

/* ── Layout deux colonnes ───────────────────── */
.layout {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .layout { grid-template-columns: 1fr; }
}

/* ── Cards ──────────────────────────────────── */
.card {
    background: var(--color-card);
    border-radius: 0;
    padding: 1rem;
    border: 1px solid var(--border);
}

/* ── Section headers ─────────────────────────── */
.section-header {
    padding: 8px 13px;
    border-radius: 0;
    margin-bottom: 0.8rem;
    font-weight: 700;
    font-size: 13px;
    color: white;
    display: flex;
    align-items: center;
    letter-spacing: 0.01em;
    background: #1b2230;
}

.section-header-blue,
.section-header-cyan,
.section-header-green,
.section-header-orange,
.section-header-purple,
.section-header-indigo,
.section-header-red    { background: #1b2230; }

/* ── Formulaire ──────────────────────────────── */
.params-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

@media (max-width: 600px) {
    .params-grid { grid-template-columns: 1fr; }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.form-group label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--grey-sub);
    letter-spacing: 0.02em;
}

.form-group input,
.form-group select,
.form-select {
    padding: 0.45rem 0.5rem;
    border: 1.5px solid var(--border);
    border-radius: 0;
    font-size: 0.875rem;
    background-color: var(--color-card);
    color: var(--grey-text);
    transition: border-color 0.2s;
    width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-button);
    box-shadow: none;
}

/* ── Boutons ─────────────────────────────────── */
.btn-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn {
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 0;
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s, transform 0.1s;
    text-decoration: none;
    display: inline-block;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
    background: #1b2230;
    color: white;
}
.btn-primary:hover {
    background: #2a3347;
    color: white;
}

.btn-success {
    background: #9c2a2a;
    color: white;
}
.btn-success:hover {
    background: #7d2222;
    color: white;
}

.btn-secondary {
    background: var(--color-bg-main);
    color: var(--grey-text);
    border: 1px solid var(--border);
}
.btn-secondary:hover {
    background: #ede9df;
}

.btn-danger {
    background: #9c2a2a;
    color: white;
}
.btn-danger:hover {
    background: #7d2222;
    color: white;
}

.btn-lg {
    width: 100%;
    padding: 0.9rem;
    font-size: 1rem;
    border-radius: 0;
}

.btn-del {
    background: none;
    border: none;
    color: var(--red);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 6px;
    border-radius: 0;
}
.btn-del:hover { background-color: var(--red-bg); }

/* ── Tableau tronçons éditable ───────────────── */
.troncons-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.troncons-table th {
    background: var(--grey-bg);
    font-weight: 700;
    color: var(--grey-sub);
    overflow: visible;
    font-size: 0.68rem;
    padding: 0.4rem 0.3rem;
    border: 1px solid var(--border);
    text-align: center;
    letter-spacing: 0.03em;
}

.troncons-table td {
    border: 1px solid var(--border);
    padding: 2px 3px;
}

.td-input {
    width: 100%;
    border: none;
    padding: 0.3rem 0.35rem;
    font-size: 0.8rem;
    background: transparent;
    outline: none;
    border-radius: 0;
    color: var(--grey-text);
}

.td-input:focus {
    background-color: #f1ede4;
    outline: 1.5px solid var(--color-border);
}

.td-orientation {
    width: 52px;
    min-width: 52px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--blue-dark);
}

/* ── Tableau résultats ───────────────────────── */
.cycle-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}

.cycle-table th {
    background: var(--grey-bg);
    font-weight: 700;
    color: var(--grey-sub);
    overflow: visible;
    font-size: 0.65rem;
    padding: 0.4rem 0.3rem;
    border: 1px solid var(--border);
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.cycle-table td {
    padding: 0.4rem 0.3rem;
    text-align: center;
    border: 1px solid var(--border);
    font-weight: 500;
}

.cycle-table tr:nth-child(even) { background: var(--color-bg-main); }
.cycle-table tr:hover           { background: #f1ede4; }

.row-critique { background: #f1ede4 !important; }
.val-ok  { color: var(--green-dark);  font-weight: 700; }
.val-nok { color: var(--red-dark);    font-weight: 700; }
.td-nom-res { font-weight: 700; color: var(--blue-mid); }

/* ── Select diamètre dans le tableau résultats ── */
.dia-select {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 4px;
    border: 1.5px solid var(--border);
    border-radius: 0;
    background: var(--color-card);
    color: var(--grey-text);
    cursor: pointer;
    outline: none;
    width: 100%;
    min-width: 72px;
}
.dia-select:hover  { border-color: var(--color-button); }
.dia-select:focus  { border-color: var(--color-button); box-shadow: none; }

/* Diamètre forcé manuellement */
.dia-select.dia-force {
    background: var(--color-bg-main);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}
.dia-select:disabled { opacity: 0.5; cursor: wait; }

/* ── Résultats globaux ───────────────────────── */
.globaux-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (max-width: 700px) {
    .globaux-grid { grid-template-columns: 1fr; }
}

.result-box {
    border-radius: 0;
    border: 1.5px solid;
    padding: 0.55rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 52px;
    background: var(--color-card);
    border-color: var(--color-border);
}

.result-box-green  { background: var(--color-green-bg);    border-color: var(--color-green-border); }
.result-box-red    { background: var(--color-red-bg);      border-color: var(--color-red-border); }
.result-box-blue   { background: var(--color-blue-bg);     border-color: var(--color-blue-border); }
.result-box-orange { background: var(--color-orange-bg);   border-color: var(--color-orange-border); }

.result-label { font-size: 0.65rem; font-weight: 600; color: var(--grey-sub); letter-spacing: 0.02em; }
.result-value { font-size: 1.05rem; font-weight: 700; margin-top: 2px; }

.value-green  { color: var(--green-dark); }
.value-red    { color: var(--red-dark);   }
.value-blue   { color: var(--blue-dark);  }
.value-orange { color: var(--orange-dark);}
.value-purple { color: var(--purple);     }

/* ── Légende tableau résultats ───────────────── */
.table-legende {
    font-size: 0.68rem;
    color: var(--grey-sub);
    margin-top: 0.4rem;
    padding: 0.3rem 0.5rem;
    border-left: 3px solid var(--border);
    background: var(--grey-bg);
    border-radius: 0;
}
.table-legende strong { color: var(--grey-text); }
.table-legende-gaz {
    border-left-color: var(--orange);
    color: var(--orange-dark);
    margin-top: 0.25rem;
}
.fluide-warning {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--orange-dark);
    background: var(--orange-bg);
    border-left: 3px solid var(--orange);
    border-radius: 0;
    padding: 0.35rem 0.5rem;
}
.table-legende-gaz strong { color: var(--orange-dark); }

/* ── Chemin critique ──────────────────────────── */
.chemin-critique {
    font-size: 0.78rem;
    color: var(--grey-sub);
    padding: 0.4rem 0.6rem;
    background: var(--color-bg-main);
    border-radius: 0;
    border-left: 3px solid var(--color-border);
}

.chemin-label { font-weight: 700; color: var(--color-text-primary); }
.chemin-node  { font-weight: 600; color: var(--color-text-primary); }

/* ── Schéma ───────────────────────────────────── */
.schema-container {
    text-align: center;
    min-height: 80px;
}

.schema-image {
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

/* ── Info placeholder ────────────────────────── */
.info-placeholder {
    color: var(--grey-sub);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* ── Messages ────────────────────────────────── */
.message-container {
    position: fixed;
    top: 75px;
    right: 20px;
    z-index: 1000;
    max-width: 420px;
}

.error-message {
    background: var(--red-bg);
    border: 1px solid var(--red);
    color: var(--red-dark);
    padding: 0.75rem;
    border-radius: 0;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.success-message {
    background: var(--green-bg);
    border: 1px solid var(--green-border);
    color: var(--green-dark);
    padding: 0.75rem;
    border-radius: 0;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.warning-message {
    background: var(--orange-bg);
    border: 1px solid var(--orange);
    color: var(--orange-dark);
    padding: 0.75rem;
    border-radius: 0;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

/* ── Export inline ───────────────────────────── */
.btn-export-inline {
    margin-left: auto;
    background: #1b2230;
    color: white;
    padding: 3px 10px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.btn-export-inline:hover { background: #2a3347; color: white; }

.btn-export-pdf {
    background: #9c2a2a;
}
.btn-export-pdf:hover { background: #7d2222; color: white; }

/* ── Table container ─────────────────────────── */
.table-container { overflow-x: auto; }

/* ── Spinner ──────────────────────────────────── */
.spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 3px solid rgba(255,255,255,0.35);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

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

/* ── Footer ───────────────────────────────────── */
.footer {
    text-align: center;
    color: var(--grey-sub);
    padding: 1.5rem;
    margin-top: 2rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    line-height: 1.8;
}

.footer strong { color: var(--grey-text); }

.footer-link {
    color: #9c2a2a;
    text-decoration: none;
}
.footer-link:hover { text-decoration: underline; }

/* ── Tooltips ────────────────────────────────── */
[data-tip] { cursor: help; }

/* Bulle JS — injectée dans <body> par main.js, jamais clippée */
#js-tip {
    position: fixed;
    background: #1b2230;
    color: #fff;
    padding: 6px 11px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 280px;
    text-align: center;
    white-space: normal;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}
#js-tip.visible { opacity: 1; }

/* ── Mobile ───────────────────────────────────── */
@media (max-width: 768px) {
    .header h1    { font-size: 1rem; }
    .header-meta  { display: none; }
    .troncons-table { min-width: 620px; }
    .cycle-table    { min-width: 900px; }
    .layout         { gap: 0.75rem; }
}