/* ==========================================================================
   TEKNI-PLI — Configurateur de l'espace client (compte/configurateur.php)

   Habillage du thème sombre (css/styles-v2.css) : --bg-surface-solid,
   --bg-surface, --text-main, --text-muted, --border-color, --shadow-glass.
   PIÈGE CONNU : css/styles.css (l'ancienne feuille) définit --white et --text
   (noir) ; un élément qui hérite « color » de l'ancienne feuille s'affiche en
   noir sur une surface sombre. Chaque surface qui pose un fond pose donc AUSSI
   sa couleur de texte, explicitement. Les commandes font au moins 44 px de
   haut : le configurateur se manie au doigt sur un téléphone de chantier.
   ========================================================================== */

/* L'attribut hidden doit gagner sur nos display:flex / grid, sinon un bandeau
   masqué par le script resterait visible. */
.cfg-app [hidden],
.cfg-overlay[hidden],
.cfg-modal[hidden] { display: none !important; }

.cfg-fil { margin-bottom: 18px; font-size: 0.9rem; color: var(--text-muted); }
.cfg-intro { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 20px; max-width: 780px; }
/* scroll-margin-top : quand le script amène l'application sous les yeux du
   client (changement d'onglet), l'en-tête fixe du site (80 px) ne doit pas
   recouvrir les onglets ni le haut du panneau. */
.cfg-app { color: var(--text-main); scroll-margin-top: 92px; }
.cfg-muet { color: var(--text-muted); font-size: 0.86rem; }
.cfg-indispo {
    background: var(--bg-surface-solid); color: var(--text-main);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass); padding: 28px;
}
.cfg-indispo p { color: var(--text-muted); margin-top: 8px; }

/* --- Bandeaux -------------------------------------------------------- */
.cfg-bandeau {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 14px 18px; margin-bottom: 16px;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    font-size: 0.92rem; font-weight: 500; line-height: 1.5;
}
.cfg-bandeau a { text-decoration: underline; }
.cfg-bandeau .cfg-btn { margin-left: auto; }
.cfg-bandeau-erreur { background: rgba(231, 76, 60, 0.12); color: #f5b7b1; border-color: rgba(231, 76, 60, 0.35); }
.cfg-bandeau-erreur a { color: #fadbd8; }
.cfg-bandeau-attention { background: rgba(212, 175, 55, 0.12); color: #f3e5ab; border-color: rgba(212, 175, 55, 0.35); }
.cfg-bandeau-attention a { color: var(--primary-hover); }
.cfg-bandeau-info { background: var(--bg-surface-solid); color: var(--text-muted); }

/* --- Onglets --------------------------------------------------------- */
.cfg-tabs {
    position: sticky; top: 80px; /* sous l'en-tête fixe du site */
    z-index: 20;
    display: flex; gap: 6px;
    padding: 8px 0; margin-bottom: 18px;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-color);
}
.cfg-tab {
    flex: 1; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    background: var(--bg-surface-solid); color: var(--text-muted);
    font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700;
    cursor: pointer; transition: var(--transition);
}
.cfg-tab:hover { color: var(--text-main); background: var(--bg-surface-hover); }
.cfg-tab.is-active { color: var(--primary); border-color: var(--border-highlight); background: var(--primary-glow); }
.cfg-tab-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.08); color: inherit; font-size: 0.75rem;
}
.cfg-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
    background: var(--primary); color: #000; font-size: 0.75rem; font-weight: 700;
}

/* --- Panneaux et cartes --------------------------------------------- */
.cfg-panel { display: none; }
.cfg-panel.is-active { display: block; }
.cfg-carte {
    background: var(--bg-surface-solid); color: var(--text-main);
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-glass);
}
.cfg-carte h2 { font-size: 1.05rem; margin-bottom: 12px; color: var(--text-main); }
.cfg-carte h2 small { font-family: var(--font-sans); font-weight: 400; color: var(--text-muted); font-size: 0.85rem; }

/* --- Onglet Dessin --------------------------------------------------- */
.cfg-dessin { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.cfg-canvas-wrap {
    position: relative; width: 100%;
    aspect-ratio: 4 / 3; max-height: 70vh; min-height: 260px;
    background: #f8fafc; /* une feuille claire : le tracé y reste lisible */
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    overflow: hidden;
}
.cfg-canvas-wrap canvas {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    touch-action: none; /* le doigt dessine, il ne fait pas défiler la page */
    cursor: crosshair;
}
.cfg-mode {
    position: absolute; top: 10px; left: 10px; padding: 4px 11px;
    border-radius: 999px; background: rgba(184, 134, 11, 0.92); color: #1a1a1a;
    font-size: 0.75rem; font-weight: 700; pointer-events: none;
}
.cfg-mode.is-cotation { background: rgba(39, 174, 96, 0.92); color: #fff; }
.cfg-outils { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; margin-top: 12px; }
.cfg-outil {
    min-height: 56px; padding: 6px 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    background: var(--bg-surface); color: var(--text-main);
    font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600;
    cursor: pointer; transition: var(--transition);
}
.cfg-outil:hover { background: var(--bg-surface-hover); border-color: var(--border-highlight); }
.cfg-outil.is-active { background: var(--primary-glow); border-color: var(--primary); color: var(--primary); }
.cfg-outil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cfg-outil small { font-size: 0.68rem; font-weight: 500; color: var(--text-muted); }
.cfg-outil.is-active small { color: var(--primary); }
.cfg-outil-valider { background: rgba(39, 174, 96, 0.18); border-color: rgba(39, 174, 96, 0.5); color: #a9dfbf; }
.cfg-outil-valider:hover { background: rgba(39, 174, 96, 0.3); border-color: #27ae60; }
.cfg-outil-modifier { background: rgba(212, 175, 55, 0.18); border-color: var(--border-highlight); color: var(--primary); }
.cfg-infos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cfg-info {
    padding: 6px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    background: var(--bg-surface); color: var(--text-muted); font-size: 0.82rem;
}
.cfg-info strong { color: var(--primary); font-variant-numeric: tabular-nums; }
.cfg-aide { margin-top: 10px; min-height: 1.4em; color: var(--text-muted); font-size: 0.88rem; }
.cfg-etapes { list-style: none; padding: 0; margin: 0; counter-reset: etape; }
.cfg-etapes li {
    position: relative; padding-left: 38px; margin-bottom: 14px;
    color: var(--text-muted); font-size: 0.9rem; line-height: 1.5;
}
.cfg-etapes li::before {
    counter-increment: etape; content: counter(etape);
    position: absolute; left: 0; top: 0;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-glow); color: var(--primary);
    font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem;
}

/* --- Formulaires ----------------------------------------------------- */
.cfg-champ { margin-bottom: 16px; }
.cfg-champ:last-child { margin-bottom: 0; }
.cfg-champ label, .cfg-libelle {
    display: block; margin-bottom: 6px;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted);
}
.cfg-app input[type="text"],
.cfg-app input[type="number"],
.cfg-app select,
.cfg-app textarea,
.cfg-modal input[type="number"] {
    width: 100%; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06); color: var(--text-main);
    font-family: var(--font-sans); font-size: 0.95rem;
    transition: var(--transition);
}
.cfg-app select option { background: var(--bg-surface-solid); color: var(--text-main); }
.cfg-app input::placeholder, .cfg-app textarea::placeholder, .cfg-modal input::placeholder { color: rgba(148, 163, 184, 0.7); }
.cfg-app input:focus, .cfg-app select:focus, .cfg-app textarea:focus, .cfg-modal input:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow);
}
.cfg-app textarea { min-height: 96px; resize: vertical; }
/* Référence chantier et commentaire gelés pendant l'envoi d'une demande (lecture seule). */
.cfg-app input[readonly], .cfg-app textarea[readonly] { opacity: 0.6; cursor: not-allowed; }
/* Champ refusé (longueur, quantité) : placé après :focus, il reste visible pendant la correction. */
.cfg-app input.is-invalide { border-color: rgba(231, 76, 60, 0.8); box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.22); }
.cfg-grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cfg-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.cfg-option {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    background: var(--bg-surface); color: var(--text-main); font-size: 0.92rem; cursor: pointer;
}
.cfg-option:hover { border-color: var(--border-highlight); }
.cfg-option input { width: 20px; height: 20px; min-height: 0; flex: 0 0 auto; accent-color: var(--primary); }
.cfg-longueurs, .cfg-article-longueurs { display: flex; flex-direction: column; gap: 8px; }
.cfg-longueur, .cfg-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfg-longueur input, .cfg-ligne input { flex: 1 1 110px; min-width: 90px; text-align: center; }
.cfg-longueur .cfg-longueur-qte, .cfg-ligne .cfg-qte { flex: 0 1 84px; min-width: 70px; }
.cfg-longueur-x { color: var(--text-muted); font-size: 0.9rem; white-space: nowrap; }
.cfg-ligne-prix { flex: 1 1 150px; text-align: right; font-size: 0.88rem; white-space: nowrap; }
.cfg-piece-tete { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.cfg-piece-apercu { width: 220px; max-width: 100%; height: auto; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }

/* --- Boutons --------------------------------------------------------- */
.cfg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 20px;
    border: 1px solid transparent; border-radius: 10px;
    background: var(--bg-surface); color: var(--text-main);
    font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600;
    cursor: pointer; transition: var(--transition); text-decoration: none;
}
.cfg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cfg-btn-primary { background: linear-gradient(135deg, #D4AF37 0%, #AA8C2C 100%); color: #000; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2); }
.cfg-btn-primary:hover:not(:disabled) { color: #000; transform: translateY(-1px); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.35); }
.cfg-btn-ghost { background: transparent; border-color: var(--border-highlight); color: var(--primary); }
.cfg-btn-ghost:hover:not(:disabled) { background: var(--primary-glow); border-color: var(--primary); color: var(--primary-hover); }
.cfg-btn-danger { background: rgba(231, 76, 60, 0.14); border-color: rgba(231, 76, 60, 0.35); color: #f5b7b1; }
.cfg-btn-danger:hover:not(:disabled) { background: rgba(231, 76, 60, 0.28); color: #fadbd8; }
.cfg-btn-petit { min-height: 38px; padding: 6px 12px; font-size: 0.84rem; border-radius: 8px; }
.cfg-btn-icone { width: 44px; min-width: 44px; padding: 0; font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }
.cfg-btn-large { width: 100%; min-height: 52px; font-size: 1.02rem; }
.cfg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* --- Prix (toujours rendus par le serveur) ---------------------------- */
.cfg-prix { color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.cfg-prix-piece { padding: 14px 16px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-main); }
.cfg-prix-piece p { color: var(--text-muted); font-size: 0.9rem; }
.cfg-prix-piece ul { list-style: none; margin: 6px 0 0; padding: 0; }
.cfg-prix-piece li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px dashed var(--border-color); font-size: 0.92rem; }
.cfg-prix-piece li:first-child { border-top: none; }
.cfg-prix-total { font-weight: 600; }
.cfg-erreur { margin-top: 10px; color: #f5b7b1; font-size: 0.9rem; font-weight: 500; }
.cfg-prix-piece li.cfg-ligne-ignoree { color: #f5b7b1; }
/* « .cfg-modal p » (plus spécifique) teinterait le message d'erreur en gris dans les fenêtres de cote et d'angle. */
.cfg-modal .cfg-erreur { color: #f5b7b1; }

/* --- Onglet Panier --------------------------------------------------- */
.cfg-vide { text-align: center; padding: 28px 12px; color: var(--text-muted); }
.cfg-article {
    background: var(--bg-surface-solid); color: var(--text-main);
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow-glass);
}
.cfg-article.is-editing { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow), var(--shadow-glass); }
.cfg-article-tete { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cfg-article-titre { margin: 0; font-size: 1rem; }
.cfg-article-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-article-corps { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; }
.cfg-article-apercu { width: 100%; height: auto; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.cfg-article-apercu-vide { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 0.8rem; }
.cfg-article-infos { margin-bottom: 8px; color: var(--text-muted); font-size: 0.88rem; }
.cfg-article-options { margin-bottom: 8px; color: var(--text-muted); font-size: 0.85rem; }
.cfg-article-pied { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); font-weight: 600; }
.cfg-totaux { display: grid; gap: 8px; }
.cfg-total { display: flex; justify-content: space-between; font-size: 0.98rem; }
.cfg-total.is-ttc { padding-top: 10px; border-top: 1px solid var(--border-color); font-size: 1.15rem; font-weight: 700; }
.cfg-succes { text-align: center; padding: 30px 22px; border-color: rgba(39, 174, 96, 0.45); }
.cfg-succes h2 { color: #a9dfbf; }
.cfg-succes-coche { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: rgba(39, 174, 96, 0.18); display: flex; align-items: center; justify-content: center; }
.cfg-succes-coche svg { width: 30px; height: 30px; fill: none; stroke: #27ae60; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cfg-succes p { color: var(--text-muted); max-width: 560px; margin: 0 auto; }
.cfg-succes .cfg-actions { justify-content: center; }

/* --- Fenêtres (cote, angle, vue 3D, confirmation) --------------------- */
.cfg-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(4, 8, 18, 0.74); }
.cfg-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(92vw, 380px); max-height: 90vh; overflow-y: auto;
    padding: 22px; z-index: 2001;
    background: var(--bg-surface-solid); color: var(--text-main);
    border: 1px solid var(--border-highlight); border-radius: var(--radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.cfg-modal h3 { font-size: 1.05rem; margin-bottom: 14px; color: var(--text-main); }
.cfg-modal p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
.cfg-modal input[type="number"] { font-size: 1.3rem; text-align: center; }
.cfg-modal-btns { display: flex; gap: 10px; margin-top: 18px; }
.cfg-modal-btns .cfg-btn { flex: 1; }
.cfg-modal-large { width: min(94vw, 760px); }
.cfg-radios { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cfg-radios label { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: 0.92rem; color: var(--text-main); }
.cfg-radios input { width: 20px; height: 20px; accent-color: var(--primary); }
.cfg-vue-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cfg-vue-tab { border-color: var(--border-color); }
.cfg-vue-tab.is-active { background: var(--primary-glow); border-color: var(--primary); color: var(--primary); }
.cfg-vue-zone { width: 100%; min-height: 320px; border-radius: var(--radius-sm); overflow: hidden; background: #0e1524; }
.cfg-vue-zone canvas { display: block; max-width: 100%; }
.cfg-vue-controles { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 12px; }

/* --- Voile d'un onglet inactif (un seul onglet actif à la fois) -------- */
/* .cfg-app porte le voile (position: relative) ; z-index 30 : au-dessus des
   onglets collants (20), sous l'en-tête fixe du site (1000) et sous les
   fenêtres (2000, fermées quand le voile tombe). La carte reste sous les yeux
   en défilant (sticky, sous l'en-tête de 80 px). Pas de « inset: 0 » : sur une
   application courte (panier vide), la carte déborderait du voile ; min-height
   garde au moins la hauteur de l'application, et le voile grandit avec la carte. */
.cfg-app { position: relative; }
.cfg-voile {
    position: absolute; top: 0; left: 0; right: 0; min-height: 100%; z-index: 30;
    padding: 24px 16px;
    background: rgba(4, 8, 18, 0.86); color: var(--text-main);
    border-radius: var(--radius-md);
}
.cfg-voile-carte {
    position: sticky; top: 110px;
    width: min(100%, 480px); margin: 0 auto; padding: 24px;
    background: var(--bg-surface-solid); color: var(--text-main);
    border: 1px solid var(--border-highlight); border-radius: var(--radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); text-align: center;
}
.cfg-voile-carte h2 { font-size: 1.1rem; line-height: 1.4; margin-bottom: 10px; color: var(--text-main); }
.cfg-voile-carte p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; margin-bottom: 16px; }
/* Issue d'un envoi de cet onglet revenue après la perte du bail : en tête de la carte. */
.cfg-voile-carte .cfg-voile-resultat {
    padding: 12px 14px; border-radius: var(--radius-sm); font-weight: 600; color: var(--text-main);
    border: 1px solid rgba(245, 183, 177, 0.5); background: rgba(231, 76, 60, 0.12);
}
.cfg-voile-carte .cfg-voile-resultat.is-ok { border-color: rgba(39, 174, 96, 0.55); background: rgba(39, 174, 96, 0.16); color: #a9dfbf; }
/* Sur un écran peu haut, un long message d'issue poussait « Continuer dans cet onglet »
   sous le bord de l'écran dès que le client remontait. La carte ne dépasse plus la
   hauteur visible sous son ancrage (110 px + 16 px de marge) : seul le message défile
   à l'intérieur, le titre et le bouton restent à l'écran. */
.cfg-voile-carte { display: flex; flex-direction: column; max-height: calc(100vh - 126px); max-height: calc(100dvh - 126px); }
.cfg-voile-carte > * { flex-shrink: 0; }
.cfg-voile-carte .cfg-voile-resultat { flex-shrink: 1; min-height: 3.2em; overflow-y: auto; }

/* --- Écrans étroits -------------------------------------------------- */
@media (max-width: 900px) {
    .cfg-dessin { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .cfg-tab { font-size: 0.8rem; gap: 6px; }
    .cfg-tab-num { display: none; }
    .cfg-carte { padding: 14px; }
    .cfg-outils { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .cfg-outil { font-size: 0.72rem; }
    .cfg-outil small { display: none; }
    /* Exception : le côté laqué (extérieur / intérieur / face A-B) est un ÉTAT,
       pas une aide. Masqué, le client ne voit plus où tombe la laque sur un
       téléphone. Sélecteur à identifiant : il l'emporte sur la règle ci-dessus ;
       couleur posée explicitement (thème sombre), bouton gardé à 56 px. */
    .cfg-outil #cfg-laquage-etat {
        display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-size: 0.7rem; font-weight: 600; line-height: 1.2; color: var(--text-main);
    }
    .cfg-outil.is-active #cfg-laquage-etat { color: var(--primary); }
    #cfg-btn-laquage { min-height: 56px; }
    .cfg-grille-2 { grid-template-columns: 1fr; }
    .cfg-article-corps { grid-template-columns: 1fr; }
    .cfg-article-apercu { max-width: 220px; }
    .cfg-ligne-prix { flex-basis: 100%; text-align: left; }
    .cfg-modal { padding: 18px; }
    .cfg-modal-btns { flex-direction: column; }
}