/* e-galiseur — Styles spécifiques (bootstrap.css + common.css chargés avant) */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed&family=Micro+5&family=Patrick+Hand&display=swap');

/* Surcharge couleur e-galiseur */
.header-icone { color: #e67e22 }

/* Main */
main { max-width: 900px }

/* Centrage des contrôles dans le main */
.onglets-operation, .input-container, .options-methode, .error-message { align-self: center }

/* Boutons custom (système e-cole) */
.btn {
    padding: 10px 28px; font-size: 1.05em; font-weight: 600; color: #fff;
    border: none; border-radius: 6px; cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-orange { background: #e67e22 }
.btn-orange:hover { background: #d35400 }
.btn-vert { background: #25a277 }
.btn-vert:hover { background: #1f8a65 }
.btn-secondaire { background: #7f8c8d; color: #fff }
.btn-secondaire:hover { background: #636e72 }
.btn-sm { padding: 7px 18px; font-size: 0.85em }

/* Onglets opération */
.onglets-operation { flex-wrap: wrap; justify-content: center }
.op-tab {
    padding: 10px 28px; font-size: 1.05em; font-weight: 600;
    border: none; border-radius: 6px; cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    background: #7f8c8d; color: #fff;
}
.op-tab:hover { background: #636e72 }
.op-tab.active { background: #e67e22 }
.op-tab.active:hover { background: #d35400 }

/* Inputs */
.input-container {
    display: flex; flex-direction: column; align-items: center;
    width: 100%; gap: 5px;
}
.input-container input {
    padding: 10px; margin: 5px; border-radius: 6px;
    border: 2px solid #bdc3c7; font-size: 1.1rem;
    box-sizing: border-box; width: 90%; max-width: 300px;
}
.input-container input:focus { outline: none; border-color: #e67e22; box-shadow: 0 0 0 3px rgba(230,126,34,0.15) }
.operateur-symbole { color: #aaa; font-size: 2rem; font-weight: 600; margin: 0 10px }

/* Boutons méthode */
.options-methode { flex-wrap: wrap; justify-content: center }
.method-btn {
    padding: 10px 28px; font-size: 1.05em; font-weight: 600;
    background: #7f8c8d; color: #fff; border: none; border-radius: 6px;
    cursor: pointer; transition: background 0.2s, opacity 0.2s;
}
.method-btn:hover { background: #636e72 }
.method-btn.active { background: #25a277 }
.method-btn.active:hover { background: #1f8a65 }

/* Addition — inputs supplémentaires */
#extra-inputs { align-self: center; width: 100%; max-width: 300px }
.extra-input-wrap { display: flex; align-items: center; gap: 5px; width: 100% }
.extra-input-wrap input { flex: 1; padding: 10px; border-radius: 6px; border: 2px solid #bdc3c7; font-size: 1.1rem }
.extra-input-wrap input:focus { outline: none; border-color: #e67e22; box-shadow: 0 0 0 3px rgba(230,126,34,0.15) }
.btn-suppr-input {
    width: 32px; height: 32px; border-radius: 50%; border: none;
    background: #e74c3c; color: #fff; font-size: 1.2em; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.btn-suppr-input:hover { background: #c0392b }
.btn-ajouter-nombre {
    align-self: center; background: none; border: 2px dashed #bdc3c7;
    border-radius: 6px; padding: 6px 16px; color: #7f8c8d; cursor: pointer;
    font-size: 0.95em; margin-top: 5px;
}
.btn-ajouter-nombre:hover { border-color: #e67e22; color: #e67e22 }

/* Erreur */
.error-message {
    color: #D8000C; font-size: 0.9rem; font-family: sans-serif;
    height: 1.2em; margin-top: 10px; text-align: center;
}

/* Table opération */
#resultat table {
    border-collapse: collapse; background: white;
    table-layout: auto; margin: 0; width: 100%;
}
td {
    text-align: center; font-family: 'Patrick Hand', cursive;
    font-size: clamp(16px, 4vw, 32px); padding: clamp(8px, 2vw, 16px);
    border: 1px solid #eee; height: clamp(40px, 6vw, 60px);
    white-space: nowrap;
}
.total { background-color: #d4edda }
.border-bottom td { border-bottom: 2px solid black }
.ligne-partielle { background-color: #fdf5e6 }

/* Retenues multiplication */
.retenue {
    font-family: 'Micro 5', sans-serif; color: #eb70f3;
    font-size: clamp(14px, 3.5vw, 28px);
    height: clamp(20px, 3vw, 30px) !important;
}
.retenue-cercle {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
    width: 1.5em; height: 1.5em;
    border: 2.5px solid #eb70f3; border-radius: 50%;
    padding-top: 0.08em; padding-left: 0.1em;
}
.retenue-utilisee::after {
    content: ''; position: absolute; top: 50%; left: -10%;
    width: 120%; height: 2px; background-color: #dc3545;
    transform: rotate(-25deg);
}
.row-retenue td { height: clamp(20px, 3vw, 30px) !important; padding: 0 }
.zero-decalage { color: #bbb }

/* Cassage (soustraction emprunt) */
.chiffre-barre {
    color: #dc3545; position: relative; display: inline-block; margin-right: 0.3em;
}
.chiffre-barre::after {
    content: ''; position: absolute; top: 50%; left: -10%;
    width: 120%; height: 1.5px; background-color: currentColor;
    transform: rotate(-20deg);
}
.cascade-container { position: relative; display: inline-block; margin-right: 0.2em }
.cascade-container::after {
    content: ''; position: absolute; top: 50%; left: -10%;
    width: 120%; height: 1.5px; background-color: #dc3545;
    transform: rotate(-20deg);
}
.cascade-intermediate-1 { font-size: 0.8em; color: orange; vertical-align: baseline }
.cascade-intermediate-0 { color: #dc3545; vertical-align: baseline }
.chiffre-nouveau { color: #007bff; font-weight: bold }
.chiffre-emprunt {
    font-family: 'Patrick Hand', cursive; color: #007bff;
    font-size: 0.8em; vertical-align: baseline; margin-right: 0;
}

/* Compensation (soustraction) */
.retenue-compensation-haut {
    font-family: 'Patrick Hand', cursive; font-size: 0.8em;
    vertical-align: baseline; margin-right: 0;
}
.retenue-compensation-bas {
    font-family: 'Micro 5', sans-serif; font-size: 0.9em;
    vertical-align: middle; margin-left: 0.2em;
}

/* Virgule — soustraction (colonne dédiée) */
.virgule {
    font-weight: bold; padding: 0 !important; width: 0.4em !important;
    border-top: none !important; border-left: none !important; border-right: none !important;
    vertical-align: bottom; background-color: #de8a001a;
}

/* Virgule — multiplication (pseudo-element) */
td.has-comma-intermediaire, td.has-comma-finale { position: relative }
td.has-comma-intermediaire::after, td.has-comma-finale::after {
    content: ','; position: absolute; right: -0.15em; bottom: 0.2em;
    font-weight: bold; font-size: 1.2em;
}
td.has-comma-intermediaire::after { color: #ccc }
td.has-comma-finale::after { color: #D8000C }

/* Étapes */
.controles-etapes { align-self: center }
.etape-cachee { visibility: hidden }
td > span:not(.etape-cachee) ~ .chiffre-avant-emprunt { display: none }
.calcul-etape {
    align-self: center; text-align: center;
    font-family: 'Patrick Hand', cursive; font-size: clamp(16px, 4vw, 28px);
    background: #f5f7fa; border: 2px solid #25a277; border-radius: 6px;
    padding: 8px 20px; display: none;
}

/* Scroll RTL */
#resultat-container {
    width: 100%; margin: 20px 0 50px 0;
    transition: width 0.3s ease-in-out, max-width 0.3s ease-in-out;
}
#scroll-container {
    overflow-x: auto; overflow-y: hidden;
    direction: rtl; -webkit-overflow-scrolling: touch;
}
#scroll-container #resultat {
    direction: ltr; display: inline-block; min-width: 100%;
}
#scroll-container::-webkit-scrollbar { height: 10px }
#scroll-container::-webkit-scrollbar-track { background-color: #e0e0e0; border-radius: 10px }
#scroll-container::-webkit-scrollbar-thumb {
    background-color: #e67e22; border-radius: 10px; border: 2px solid #e0e0e0;
}
#scroll-container::-webkit-scrollbar-thumb:hover { background-color: #d35400 }
#scroll-container { scrollbar-width: thin; scrollbar-color: #e67e22 #e0e0e0 }

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px) }
    to { opacity: 1; transform: translateY(0) }
}
.fade-in { animation: fadeIn 0.5s ease-out }

/* Responsive */
@media (min-width: 600px) {
    .input-container { flex-direction: row; justify-content: center }
    .input-container input { width: auto }
    #extra-inputs { max-width: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px }
    .extra-input-wrap { width: auto }
    .extra-input-wrap input { width: 150px }
}
@media (min-width: 820px) {
    #resultat-container { width: 90%; max-width: 800px; margin: 20px auto 50px auto }
    #resultat-container.is-overflowing { width: 100%; max-width: none }
}
@media (max-width: 600px) {
    header { padding: 14px 16px }
    header h1 { font-size: 1.3em }
    main { padding: 16px }
}