/* ============================================
   APPLICATION AUDITION — CSS UNIFIÉ V3
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700&display=swap');

:root {
    /* === COULEURS DE THÈME — personnalisables dans les Réglages magasin ===
       Valeurs par défaut = thème Évidence ; surchargées par le thème actif via app.js */
    --couleur-principale: #383B8C;
    --couleur-principale-foncee: #24265B;
    --couleur-principale-claire: #EBEBF4;

    /* Variables historiques reliées au thème (compatibilité du code existant) */
    --rouge-lissac: var(--couleur-principale);
    --rouge-ancien: var(--couleur-principale);
    --rouge-carmin: var(--couleur-principale-foncee);
    --gris-lissac: #3F4443;
    --gris-clair: #F5F5F5;
    --gris-bordure: #E0E0E0;
    --blanc-pur: #FFFFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    background-color: var(--blanc-pur);
    color: var(--gris-lissac);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}

/* === EN-TÊTE === */

header {
    background: linear-gradient(135deg, var(--rouge-ancien), var(--rouge-carmin));
    color: var(--blanc-pur);
    padding: 50px 20px 60px;
    text-align: center;
}

header h1 {
    font-weight: 700;
    font-size: 48px;
    letter-spacing: 3px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

header .signature {
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.95;
}

/* === INTRO === */

.intro {
    background-color: var(--gris-clair);
    padding: 30px 20px;
    text-align: center;
    border-bottom: 1px solid var(--gris-bordure);
}

.intro h2 {
    font-weight: 600;
    font-size: 20px;
    color: var(--gris-lissac);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.intro p {
    font-weight: 400;
    font-size: 15px;
    color: var(--gris-lissac);
    max-width: 600px;
    margin: 0 auto;
}

/* === ACCUEIL === */

main {
    flex: 1;
    padding: 50px 20px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.menu-principal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.carte {
    background-color: var(--blanc-pur);
    border: 2px solid var(--gris-bordure);
    padding: 32px 24px;
    text-decoration: none;
    color: var(--gris-lissac);
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.carte:hover {
    border-color: var(--rouge-lissac);
    box-shadow: 0 6px 24px rgba(238, 39, 55, 0.12);
    transform: translateY(-2px);
}

.carte .numero {
    font-weight: 700;
    font-size: 13px;
    color: var(--rouge-lissac);
    letter-spacing: 2px;
}

.carte .icone {
    font-size: 56px;
}

.carte h3 {
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
}

.carte p {
    font-size: 14px;
    opacity: 0.8;
}

/* === PIED === */

footer {
    background-color: var(--gris-lissac);
    color: var(--blanc-pur);
    text-align: center;
    padding: 24px;
}

footer p {
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ============================================
   PAGE BILAN
   ============================================ */

.bilan-main {
    padding: 40px 20px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

.formulaire {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.bloc {
    background-color: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-left: 5px solid var(--rouge-lissac);
    padding: 28px 32px;
}

.bloc-import {
    background-color: var(--gris-clair);
    border-left-color: var(--gris-lissac);
}

.bloc-titre {
    font-weight: 700;
    font-size: 18px;
    color: var(--rouge-lissac);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gris-bordure);
}

.bloc-import .bloc-titre {
    color: var(--gris-lissac);
}

.bloc-sous-titre {
    font-weight: 600;
    font-size: 14px;
    color: var(--gris-lissac);
    margin: 20px 0 12px;
    text-transform: uppercase;
}

.boutons-source,
.boutons-source-audio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.btn-source,
.btn-source-audio {
    background-color: var(--blanc-pur);
    border: 2px solid var(--gris-bordure);
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: 'Raleway', sans-serif;
    text-align: center;
}

.btn-source:not(:disabled):hover,
.btn-source-audio:not(:disabled):hover {
    border-color: var(--rouge-lissac);
}

.btn-source.active,
.btn-source-audio.active {
    border-color: var(--rouge-lissac);
    background-color: rgba(238, 39, 55, 0.03);
}

.btn-source:disabled,
.btn-source-audio:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--gris-clair);
}

.btn-source-icone {
    font-size: 28px;
}

.btn-source-titre {
    font-size: 14px;
    font-weight: 700;
    color: var(--gris-lissac);
    text-transform: uppercase;
}

.btn-source-statut {
    font-size: 11px;
    color: var(--gris-lissac);
    opacity: 0.7;
    text-transform: uppercase;
}

.statut-import {
    background-color: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    padding: 12px 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.statut-puce {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--rouge-lissac);
}

.champs-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.champ-large {
    grid-column: span 2;
}

.champ label {
    font-weight: 600;
    font-size: 13px;
    color: var(--gris-lissac);
    text-transform: uppercase;
}

.champ input,
.champ select,
.champ textarea {
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    color: var(--gris-lissac);
    padding: 10px 14px;
    border: 1px solid var(--gris-bordure);
    background-color: var(--blanc-pur);
    transition: border-color 0.2s;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
    outline: none;
    border-color: var(--rouge-lissac);
    box-shadow: 0 0 0 3px rgba(238, 39, 55, 0.1);
}

.champ textarea {
    resize: vertical;
    min-height: 80px;
}

.cases-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin-bottom: 8px;
}

.case {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
}

.case input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--rouge-lissac);
}

.zone-upload {
    border: 2px dashed var(--gris-bordure);
    background-color: var(--gris-clair);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
}

.zone-upload:hover,
.zone-upload.drag-over {
    border-color: var(--rouge-lissac);
}

.upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.upload-icone {
    font-size: 48px;
}

.upload-titre {
    font-weight: 600;
    font-size: 16px;
    color: var(--rouge-lissac);
}

.upload-soustitre {
    font-size: 13px;
    opacity: 0.7;
}

.apercu-audiogramme,
.apercu-pdf {
    margin-top: 16px;
    padding: 16px;
    background-color: var(--gris-clair);
    border: 1px solid var(--gris-bordure);
    text-align: center;
}

.apercu-titre {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.apercu-audiogramme img {
    max-width: 100%;
    max-height: 400px;
}

.apercu-pdf #pdf-viewer {
    width: 100%;
    height: 500px;
}

.apercu-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
    flex-wrap: wrap;
}

.btn-analyser {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    border: none;
    padding: 8px 18px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.btn-analyser:disabled {
    opacity: 0.5;
}

.btn-supprimer,
.btn-convertir {
    background-color: var(--blanc-pur);
    color: var(--gris-lissac);
    border: 1px solid var(--gris-bordure);
    padding: 8px 18px;
    font-size: 12px;
    cursor: pointer;
}

.btn-supprimer:hover {
    border-color: var(--rouge-lissac);
    color: var(--rouge-lissac);
}

/* === RÉSULTATS IA === */

.resultats-ia {
    margin-top: 24px;
    background-color: var(--blanc-pur);
    border: 2px solid var(--rouge-lissac);
    padding: 24px;
}

.resultats-ia-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.resultats-ia-badge {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
}

.resultats-ia-statut {
    font-size: 11px;
    opacity: 0.7;
    font-style: italic;
}

.resultats-ia-titre {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gris-bordure);
}

.resultats-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.resultat-bloc {
    background-color: var(--gris-clair);
    padding: 16px;
    text-align: center;
}

.resultat-bloc-large {
    grid-column: span 2;
}

.resultat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 6px;
    opacity: 0.7;
}

.resultat-valeur {
    font-size: 22px;
    font-weight: 700;
    color: var(--rouge-lissac);
}

.resultat-sous-valeur {
    font-size: 13px;
    margin-top: 4px;
    opacity: 0.7;
}

.resultat-recommandation {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    padding: 18px;
    text-align: center;
    margin-bottom: 16px;
}

.resultat-recommandation .resultat-label {
    color: var(--blanc-pur);
    opacity: 0.85;
}

.resultat-valeur-reco {
    font-size: 20px;
    font-weight: 700;
}

.resultat-disclaimer {
    background-color: var(--gris-clair);
    border-left: 3px solid var(--gris-lissac);
    padding: 12px 16px;
    font-size: 12px;
    line-height: 1.6;
}

/* === RAPPORT IA === */

.rapport-ia {
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.rapport-ia-header {
    background: linear-gradient(135deg, var(--rouge-lissac), var(--rouge-carmin));
    color: var(--blanc-pur);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rapport-ia-header-icone {
    font-size: 24px;
}

.rapport-ia-header-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    margin: 0;
    opacity: 0.9;
}

.rapport-ia-header-titre {
    font-size: 16px;
    font-weight: 700;
    margin: 2px 0 0;
}

.rapport-ia-corps {
    background-color: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-top: none;
    padding: 18px;
}

.rapport-section {
    margin-bottom: 16px;
}

.rapport-section-titre {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--rouge-lissac);
    margin: 0 0 6px;
    font-weight: 700;
}

.rapport-section-texte {
    font-size: 13px;
    color: var(--gris-lissac);
    line-height: 1.6;
    margin: 0;
}

.rapport-section-encadre {
    padding: 12px 14px;
    background-color: var(--couleur-principale-claire);
    border-left: 3px solid var(--rouge-lissac);
    border-radius: 4px;
}

.rapport-criteres-liste {
    margin: 0 0 12px;
    padding-left: 20px;
}

.rapport-criteres-liste li {
    font-size: 13px;
    color: var(--gris-lissac);
    padding: 3px 0;
}

.rapport-cartes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rapport-carte {
    background-color: var(--couleur-principale-claire);
    border: 2px solid var(--rouge-lissac);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}

.rapport-carte-label {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.7;
    margin: 0;
}

.rapport-carte-titre {
    font-size: 16px;
    font-weight: 700;
    color: var(--rouge-lissac);
    margin: 4px 0 2px;
}

.rapport-carte-sub {
    font-size: 11px;
    opacity: 0.7;
    font-style: italic;
    margin: 0;
}

.rapport-explication {
    padding: 10px 14px;
    background-color: var(--gris-clair);
    border-radius: 6px;
    margin-top: 12px;
}

.rapport-explication-label {
    font-size: 11px;
    color: var(--gris-lissac);
    margin: 0 0 4px;
    font-weight: 700;
}

.rapport-explication-texte {
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}

/* === ACTIONS BOUTONS === */

.actions {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    flex-wrap: wrap;
}

.btn {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 14px 28px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border: 2px solid transparent;
    display: inline-block;
}

.btn-principal {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    border-color: var(--rouge-lissac);
}

.btn-secondaire {
    background-color: var(--blanc-pur);
    color: var(--gris-lissac);
    border-color: var(--gris-bordure);
}

.btn-effacer {
    background-color: transparent;
    color: var(--gris-lissac);
    border-color: var(--gris-bordure);
    opacity: 0.7;
}

.info-sauvegarde {
    text-align: center;
    font-size: 12px;
    opacity: 0.6;
    margin-top: 12px;
    font-style: italic;
}

/* ============================================
   PAGE GAMMES V2 - PROPRE
   ============================================ */

.gammes-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 24px 60px;
    width: 100%;
}

.gammes-intro {
    text-align: center;
    margin-bottom: 36px;
}

.gammes-etape-label {
    font-size: 11px;
    letter-spacing: 2px;
    color: #888;
    font-weight: 700;
    margin: 0 0 6px;
}

.gammes-titre {
    font-size: 28px;
    color: var(--rouge-lissac);
    font-weight: 700;
    margin: 0 0 8px;
}

.gammes-sous-titre {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* === BANDEAU RECOMMANDATION === */

.bandeau-recommandation {
    background: linear-gradient(135deg, var(--couleur-principale-claire), var(--blanc-pur));
    border: 2px solid var(--rouge-lissac);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 32px;
}

.bandeau-reco-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px dashed rgba(238, 39, 55, 0.3);
}

.bandeau-reco-icone {
    font-size: 28px;
}

.bandeau-reco-titre {
    font-size: 16px;
    font-weight: 700;
    color: var(--rouge-lissac);
    margin: 0;
    text-transform: uppercase;
}

.bandeau-reco-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(238, 39, 55, 0.3);
}

.bandeau-reco-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #888;
    margin: 0 0 6px;
    font-weight: 700;
    text-transform: uppercase;
}

.bandeau-reco-nom {
    font-size: 14px;
    color: var(--gris-lissac);
    margin: 0 0 6px;
    font-weight: 700;
}

.bandeau-reco-info {
    font-size: 12px;
    color: #666;
    margin: 2px 0;
}

.bandeau-reco-audio {
    font-size: 12px;
    color: var(--gris-lissac);
    margin: 2px 0;
}

.bandeau-reco-symetrie {
    font-size: 11px;
    color: #2E7D32;
    font-style: italic;
    margin: 6px 0 0;
}

.bandeau-reco-suggestions {
    background-color: var(--blanc-pur);
    border-radius: 8px;
    padding: 14px;
}

.bandeau-reco-sub-titre {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--rouge-lissac);
    margin: 0 0 10px;
    font-weight: 700;
}

.bandeau-reco-cartes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.reco-suggestion {
    padding: 10px 14px;
    background-color: var(--couleur-principale-claire);
    border-left: 3px solid var(--rouge-lissac);
    border-radius: 4px;
}

.reco-suggestion-label {
    font-size: 10px;
    color: #888;
    margin: 0;
    text-transform: uppercase;
}

.reco-suggestion-titre {
    font-size: 15px;
    font-weight: 700;
    color: var(--rouge-lissac);
    margin: 4px 0 2px;
}

.reco-suggestion-sub {
    font-size: 11px;
    color: #888;
    font-style: italic;
    margin: 0;
}

.bandeau-reco-mention {
    text-align: center;
    font-size: 11px;
    color: #888;
    font-style: italic;
    margin: 14px 0 0;
}

/* === SECTIONS === */

.section-gammes,
.section-types-appareil {
    margin-bottom: 40px;
}

.section-numero {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.numero-cercle {
    width: 32px;
    height: 32px;
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.section-titre {
    font-size: 20px;
    color: var(--gris-lissac);
    margin: 0;
    font-weight: 700;
}

/* === CARTES GAMMES === */

.gammes-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.gamme-carte {
    background-color: var(--blanc-pur);
    border: 2px solid var(--gris-bordure);
    border-radius: 10px;
    padding: 18px 14px;
    position: relative;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}

.gamme-carte:hover {
    border-color: var(--rouge-lissac);
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

.gamme-carte.gamme-selectionnee {
    border-color: var(--rouge-lissac);
    border-width: 3px;
    background-color: var(--couleur-principale-claire);
    box-shadow: 0 4px 12px rgba(238, 39, 55, 0.12);
}

.gamme-carte.gamme-100sante {
    border-color: #2E7D32;
}

.gamme-carte.gamme-100sante:hover {
    border-color: #1B5E20;
}

.gamme-carte.gamme-100sante.gamme-selectionnee {
    background-color: #E8F5E9;
    border-color: #2E7D32;
}

.gamme-classe {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #888;
    font-weight: 700;
    margin-bottom: 6px;
}

.gamme-prix-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--rouge-lissac);
    background-color: rgba(238, 39, 55, 0.08);
    padding: 3px 10px;
    border-radius: 4px;
}

.prix-zero {
    background-color: #C8E6C9;
    color: #1B5E20;
}

.gamme-nom-officiel {
    font-size: 17px;
    color: var(--gris-lissac);
    margin: 4px 0 2px;
    font-weight: 700;
}

.gamme-100sante .gamme-nom-officiel {
    color: #1B5E20;
}

.gamme-nom-commercial {
    font-size: 12px;
    font-style: italic;
    color: #888;
    margin: 0 0 12px;
}

.gamme-description {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    margin: 0 0 12px;
    flex-grow: 1;
}

.gamme-resume {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
    padding-top: 12px;
    border-top: 1px solid #EEE;
}

.resume-item {
    font-size: 11px;
    color: #777;
    font-weight: 600;
}

.btn-choisir-gamme {
    width: 100%;
    padding: 10px;
    background-color: var(--blanc-pur);
    border: 2px solid var(--rouge-lissac);
    border-radius: 6px;
    color: var(--rouge-lissac);
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

.btn-choisir-gamme:hover {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
}

.gamme-selectionnee .btn-choisir-gamme {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
}

.gamme-100sante .btn-choisir-gamme {
    border-color: #2E7D32;
    color: #2E7D32;
}

.gamme-100sante.gamme-selectionnee .btn-choisir-gamme {
    background-color: #2E7D32;
    color: var(--blanc-pur);
}

/* === COMPARATEUR (FORCÉ) === */

.comparateur-wrapper {
    margin-top: 24px;
}

.btn-comparateur {
    width: 100%;
    padding: 14px 20px;
    background-color: var(--blanc-pur);
    border: 2px solid var(--rouge-lissac);
    border-radius: 8px;
    color: var(--rouge-lissac);
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn-comparateur:hover {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
}

.comparateur-contenu {
    display: none !important;
    margin-top: 14px;
    padding: 18px;
    background-color: #FAFAFA;
    border-radius: 8px;
    border: 1px solid #EEE;
}

.comparateur-contenu.ouvert {
    display: block !important;
}

.comparateur-categorie {
    display: block !important;
    margin-bottom: 10px;
    border: 1px solid #DDD;
    border-radius: 6px;
    background-color: var(--blanc-pur);
    overflow: hidden;
    width: 100% !important;
}

.categorie-header {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--blanc-pur);
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--gris-lissac);
}

.categorie-header:hover {
    background-color: #FAFAFA;
}

.categorie-header.active {
    background-color: rgba(238, 39, 55, 0.05);
    color: var(--rouge-lissac);
}

.categorie-chevron {
    font-size: 11px;
    color: var(--rouge-lissac);
}

.categorie-tableau {
    padding: 10px 16px 14px;
    background-color: #FAFAFA;
}

.tableau-comparateur {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 12px;
}

.tableau-comparateur thead {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
}

.tableau-comparateur th {
    padding: 8px 6px;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
}

.tableau-comparateur th:first-child {
    text-align: left;
    padding-left: 12px;
}

.tableau-comparateur td {
    padding: 7px 6px;
    border-bottom: 1px solid #EEE;
    text-align: center;
    background-color: var(--blanc-pur);
}

.tableau-comparateur td:first-child {
    text-align: left;
    padding-left: 12px;
    color: #444;
    font-weight: 500;
}

.cell-oui {
    color: var(--rouge-lissac);
    font-size: 16px;
    font-weight: 700;
}

.cell-non {
    color: #CCC;
    font-size: 14px;
}

.cell-chiffre {
    color: var(--rouge-lissac);
    font-weight: 700;
    font-size: 14px;
}

/* === TYPES D'APPAREIL === */

.info-bandeau {
    background: linear-gradient(135deg, var(--couleur-principale-claire), var(--blanc-pur));
    border: 1px solid var(--rouge-lissac);
    border-left: 4px solid var(--rouge-lissac);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-icone {
    font-size: 22px;
}

.info-texte {
    font-size: 13px;
    line-height: 1.5;
}

.info-texte strong {
    color: var(--rouge-lissac);
}

.types-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.type-carte {
    background-color: var(--blanc-pur);
    border: 2px solid var(--gris-bordure);
    border-radius: 10px;
    padding: 20px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: all 0.25s ease;
}

.type-carte:hover {
    border-color: var(--rouge-lissac);
    transform: translateY(-3px);
}

.type-carte.type-recommande {
    border-color: var(--rouge-lissac);
    background-color: var(--couleur-principale-claire);
}

.type-carte.type-recommande::before {
    content: '★ RECOMMANDÉ';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.type-carte.type-selectionne {
    border-color: var(--rouge-lissac);
    border-width: 3px;
    background-color: var(--couleur-principale-claire);
}

.type-image-zone {
    width: 90px;
    height: 90px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.type-svg {
    width: 100%;
    height: 100%;
}

.type-nom {
    font-size: 22px;
    font-weight: 700;
    color: var(--gris-lissac);
    margin: 0 0 4px;
}

.type-nom-complet {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin: 0 0 14px;
}

.type-avantages {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.type-avantages li {
    font-size: 12px;
    color: var(--gris-lissac);
    padding: 3px 0;
    padding-left: 16px;
    position: relative;
    text-align: left;
    display: inline-block;
    margin: 0 4px;
}

.type-avantages li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--rouge-lissac);
    font-weight: 700;
}

.type-public {
    font-size: 11px;
    color: #888;
    font-style: italic;
    padding: 6px 10px;
    background-color: #FAFAFA;
    border-radius: 4px;
    width: 100%;
    margin: 0 0 14px;
}

.btn-choisir-type {
    width: 100%;
    padding: 10px;
    background-color: var(--blanc-pur);
    border: 2px solid var(--rouge-lissac);
    border-radius: 6px;
    color: var(--rouge-lissac);
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

.btn-choisir-type:hover {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
}

.type-selectionne .btn-choisir-type {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
}

/* === RÉSUMÉ === */

.resume-choix {
    background: linear-gradient(135deg, var(--couleur-principale-claire), var(--blanc-pur));
    border: 2px solid var(--rouge-lissac);
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
}

.resume-titre {
    color: var(--rouge-lissac);
    font-size: 18px;
    margin: 0 0 16px;
    font-weight: 700;
}

.resume-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.resume-bloc {
    padding: 12px;
    background-color: var(--blanc-pur);
    border-radius: 8px;
}

.resume-label {
    font-size: 11px;
    letter-spacing: 1px;
    color: #888;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.resume-valeur {
    font-size: 16px;
    color: var(--gris-lissac);
    font-weight: 700;
    margin: 0;
}

.gammes-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #EEE;
}

/* === RESPONSIVE === */

@media (max-width: 900px) {
    .gammes-grille {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .types-grille {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .champs-grille,
    .cases-grille,
    .boutons-source,
    .boutons-source-audio,
    .bandeau-reco-grille,
    .bandeau-reco-cartes {
        grid-template-columns: 1fr;
    }
    
    .champ-large {
        grid-column: span 1;
    }
}

@media (max-width: 600px) {
    .gammes-grille,
    .resume-grille {
        grid-template-columns: 1fr;
    }
}/* ============================================
   PAGE SIMULATION - CSS COMPLET
   ============================================ */

.simulation-main {
    padding: 40px 20px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bloc-simulation {
    background-color: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-left: 5px solid var(--rouge-lissac);
    padding: 24px 28px;
    border-radius: 4px;
}

/* === ENVIRONNEMENTS === */

.grille-environnements {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 12px;
}

.env-card {
    background-color: var(--blanc-pur);
    border: 2px solid var(--gris-bordure);
    padding: 18px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 6px;
    list-style: none;
}

.env-card:hover {
    border-color: var(--rouge-lissac);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(238, 39, 55, 0.08);
}

.env-card.selectionne {
    border-color: var(--rouge-lissac);
    border-width: 3px;
    background-color: rgba(238, 39, 55, 0.04);
    box-shadow: 0 4px 12px rgba(238, 39, 55, 0.12);
}

.env-card.en-lecture {
    border-color: var(--rouge-lissac);
    border-width: 3px;
    background-color: rgba(238, 39, 55, 0.08);
    box-shadow: 0 0 0 4px rgba(238, 39, 55, 0.15);
}

.env-icone {
    font-size: 38px;
    line-height: 1;
    margin: 0;
}

.env-nom {
    font-weight: 700;
    font-size: 13px;
    color: var(--gris-lissac);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 10px 0 4px;
}

.env-card.selectionne .env-nom {
    color: var(--rouge-lissac);
}

.env-soustitre {
    font-size: 11px;
    color: var(--gris-lissac);
    opacity: 0.7;
    margin: 0 0 8px;
}

.env-difficulte {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    text-transform: uppercase;
    border-radius: 3px;
}

.env-difficulte-facile { background-color: #C0DD97; color: #173404; }
.env-difficulte-moyen { background-color: #FAC775; color: #633806; }
.env-difficulte-difficile { background-color: #F0997B; color: #4A1B0C; }
.env-difficulte-tres-difficile { background-color: #F09595; color: #501313; }

/* === ZONES D'ÉCOUTE === */

.grille-ecoute {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 16px;
}

.zone-ecoute {
    background-color: var(--blanc-pur);
    border: 2px solid var(--gris-bordure);
    padding: 24px;
    text-align: center;
    transition: all 0.3s;
    border-radius: 6px;
}

.zone-sans { border-color: #888780; }
.zone-avec { border-color: var(--rouge-lissac); }

.zone-ecoute-header {
    margin-bottom: 16px;
}

.zone-ecoute-icone {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}

.zone-ecoute-titre {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    margin: 0 0 4px;
}

.zone-sans .zone-ecoute-titre { color: #5F5E5A; }
.zone-avec .zone-ecoute-titre { color: var(--rouge-lissac); }

.zone-ecoute-soustitre {
    font-size: 12px;
    color: var(--gris-lissac);
    opacity: 0.7;
    margin: 0;
}

.btn-ecouter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    color: var(--blanc-pur);
    border-radius: 4px;
}

.btn-ecouter-sans {
    background-color: #888780;
}

.btn-ecouter-sans:hover {
    background-color: #5F5E5A;
}

.btn-ecouter-avec {
    background-color: var(--rouge-lissac);
}

.btn-ecouter-avec:hover {
    background-color: var(--rouge-carmin);
}

.btn-ecouter.playing {
    animation: pulsationEcouter 1.2s ease-in-out infinite;
}

@keyframes pulsationEcouter {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* === RÉGLAGES === */

.reglages-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 12px;
}

.reglage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.reglage-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-lissac);
}

.reglage-valeur {
    font-size: 13px;
    font-weight: 700;
    color: var(--rouge-lissac);
    background-color: var(--gris-clair);
    padding: 2px 10px;
    min-width: 70px;
    text-align: center;
    border-radius: 3px;
}

.slider-perso {
    width: 100%;
    height: 6px;
    background-color: var(--gris-clair);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    border-radius: 3px;
}

.slider-perso::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background-color: var(--rouge-lissac);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid var(--blanc-pur);
    box-shadow: 0 0 0 1px var(--rouge-lissac);
}

.slider-perso::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background-color: var(--rouge-lissac);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid var(--blanc-pur);
    box-shadow: 0 0 0 1px var(--rouge-lissac);
}

.slider-legend {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--gris-lissac);
    opacity: 0.6;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-casque {
    background-color: var(--gris-clair);
    border-left: 3px solid var(--gris-lissac);
    padding: 12px 16px;
    margin-top: 18px;
    font-size: 12px;
    color: var(--gris-lissac);
    line-height: 1.5;
    border-radius: 0 4px 4px 0;
}

.bandeau-bilan {
    background-color: var(--gris-clair);
    border: 1px solid var(--gris-bordure);
    border-left: 4px solid var(--rouge-lissac);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-radius: 0 4px 4px 0;
}

.bandeau-bilan-contenu {
    font-size: 13px;
    color: var(--gris-lissac);
}

.bandeau-bilan-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 8px;
}

.bandeau-bilan-lien {
    font-size: 12px;
    font-weight: 600;
    color: var(--rouge-lissac);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bandeau-bilan-lien:hover {
    text-decoration: underline;
}

/* === RESPONSIVE SIMULATION === */

@media (max-width: 720px) {
    .grille-environnements {
        grid-template-columns: 1fr 1fr;
    }
    
    .grille-ecoute,
    .reglages-grille {
        grid-template-columns: 1fr;
    }
}/* ============================================
   BANDEAU LECTURE STICKY SIMULATION
   ============================================ */

.bandeau-lecture {
    background: linear-gradient(135deg, var(--rouge-lissac), var(--rouge-carmin));
    color: var(--blanc-pur);
    padding: 18px 24px;
    margin: 0 0 24px;
    border-radius: 8px;
    position: sticky;
    top: 58px;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(238, 39, 55, 0.25);
    animation: fadeInBandeau 0.4s ease;
}

@keyframes fadeInBandeau {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.bandeau-lecture-contenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.bandeau-lecture-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.bandeau-lecture-icone {
    font-size: 36px;
    line-height: 1;
    animation: pulsationIcone 1.5s ease-in-out infinite;
}

@keyframes pulsationIcone {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.bandeau-lecture-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    margin: 0;
    opacity: 0.9;
    text-transform: uppercase;
}

.bandeau-lecture-titre {
    font-size: 18px;
    font-weight: 700;
    margin: 2px 0 0;
    letter-spacing: 0.5px;
}

.bandeau-lecture-duree {
    text-align: right;
}

.bandeau-lecture-temps {
    font-size: 16px;
    font-weight: 700;
    margin: 2px 0 0;
}

.bandeau-lecture-barre {
    background-color: rgba(255, 255, 255, 0.25);
    height: 6px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 3px;
}

.bandeau-lecture-progression {
    background-color: var(--blanc-pur);
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
    border-radius: 3px;
}

@media (max-width: 720px) {
    .bandeau-lecture-contenu {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bandeau-lecture-duree {
        text-align: left;
        width: 100%;
    }
}/* === MENUS DÉROULANTS DANS BANDEAU RECOMMANDATION === */

.reco-select {
    width: 100%;
    padding: 8px 32px 8px 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--rouge-lissac);
    background-color: var(--blanc-pur);
    border: 2px solid var(--rouge-lissac);
    border-radius: 4px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23EE2737' stroke-width='3'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    margin: 4px 0 4px;
    transition: all 0.2s;
}

.reco-select:hover {
    background-color: var(--couleur-principale-claire);
}

.reco-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(238, 39, 55, 0.15);
}/* ============================================
   FIX ALIGNEMENT TABLEAUX COMPARATEUR
   ============================================ */

/* La colonne "Critère" prend ce qu'il reste, les 4 colonnes gammes prennent 12% chacune */
.tableau-comparateur th:first-child,
.tableau-comparateur td:first-child {
    width: auto !important;
    text-align: left !important;
}

.tableau-comparateur th:not(:first-child),
.tableau-comparateur td:not(:first-child) {
    width: 12% !important;
    text-align: center !important;
    min-width: 80px;
}

.tableau-comparateur {
    table-layout: fixed !important;
}

.tableau-comparateur td:first-child {
    width: 52% !important;
}/* ============================================
   PHOTOS RÉELLES DES APPAREILS
   ============================================ */

.type-image-zone {
    width: 140px !important;
    height: 110px !important;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.type-photo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}/* ============================================
   FIX URGENT - TAILLE PHOTOS APPAREILS
   ============================================ */

.type-carte .type-image-zone {
    width: 140px !important;
    height: 110px !important;
    max-width: 140px !important;
    max-height: 110px !important;
    margin: 0 auto 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.type-carte .type-image-zone img,
.type-carte .type-photo {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}/* ============================================
   PAGE RÉGLAGES MAGASIN
   ============================================ */

.parametres-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 24px 60px;
    width: 100%;
}

.parametres-intro {
    text-align: center;
    margin-bottom: 36px;
}

.parametres-titre {
    font-size: 28px;
    color: var(--rouge-lissac);
    font-weight: 700;
    margin: 0 0 8px;
}

.parametres-sous-titre {
    font-size: 14px;
    color: #666;
    margin: 0 0 12px;
}

.parametres-info {
    font-size: 12px;
    color: #888;
    font-style: italic;
    margin: 0;
}

.parametres-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* === SECTION COMMUNE === */

.parametres-section {
    background-color: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-left: 5px solid var(--rouge-lissac);
    border-radius: 4px;
    padding: 24px 28px;
}

.section-titre-param {
    font-weight: 700;
    font-size: 18px;
    color: var(--rouge-lissac);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gris-bordure);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.section-aide {
    font-size: 12px;
    color: #666;
    margin: 0 0 16px;
    font-style: italic;
}

/* === SECTION LOGO === */

.zone-logo {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: center;
}

.apercu-logo {
    width: 200px;
    height: 150px;
    border: 2px dashed var(--gris-bordure);
    border-radius: 8px;
    background-color: var(--gris-clair);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.apercu-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.apercu-logo-vide {
    font-size: 12px;
    color: #888;
    font-style: italic;
    text-align: center;
    margin: 0;
    padding: 10px;
}

.actions-logo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-upload-logo {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    padding: 10px 20px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
    transition: background-color 0.2s;
}

.btn-upload-logo:hover {
    background-color: var(--rouge-carmin);
}

.btn-supprimer-logo {
    background-color: var(--blanc-pur);
    color: var(--gris-lissac);
    border: 1px solid var(--gris-bordure);
    padding: 10px 20px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-supprimer-logo:hover {
    border-color: var(--rouge-lissac);
    color: var(--rouge-lissac);
}

/* === TARIFS CATALOGUE === */

.tarifs-tableau-wrapper {
    overflow-x: auto;
}

.tarifs-tableau {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
}

.tarifs-tableau thead {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
}

.tarifs-tableau th {
    padding: 12px 10px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.tarifs-tableau th:first-child {
    text-align: left;
    width: 40%;
}

.tarifs-tableau td {
    padding: 10px;
    border-bottom: 1px solid var(--gris-bordure);
    text-align: center;
    background-color: var(--blanc-pur);
}

.tarifs-tableau td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--gris-lissac);
}

.tarif-gamme-100sante {
    color: #2E7D32 !important;
}

.tarifs-tableau input[type="number"] {
    width: 90px;
    padding: 8px;
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-lissac);
}

.tarifs-tableau input[type="number"]:focus {
    outline: none;
    border-color: var(--rouge-lissac);
    box-shadow: 0 0 0 2px rgba(238, 39, 55, 0.1);
}

.tarifs-mention {
    font-size: 11px;
    color: #888;
    font-style: italic;
    margin: 4px 0 0;
}

/* === BOUTON AJOUTER === */

.btn-ajouter {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    border: none;
    padding: 6px 14px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-ajouter:hover {
    background-color: var(--rouge-carmin);
}

/* === LISTES DYNAMIQUES === */

.liste-dynamique {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.liste-vide {
    text-align: center;
    padding: 30px;
    color: #888;
    font-style: italic;
    background-color: var(--gris-clair);
    border-radius: 6px;
    margin: 0;
}

/* === CARTE ÉLÉMENT DANS UNE LISTE === */

.element-carte {
    background-color: var(--gris-clair);
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
    padding: 16px;
    transition: all 0.2s;
}

.element-carte:hover {
    border-color: var(--rouge-lissac);
    box-shadow: 0 2px 8px rgba(238, 39, 55, 0.06);
}

.element-carte-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.element-carte-titre {
    font-weight: 700;
    font-size: 14px;
    color: var(--gris-lissac);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.btn-supprimer-element {
    background-color: transparent;
    border: 1px solid #CCC;
    color: #888;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-supprimer-element:hover {
    border-color: var(--couleur-principale-foncee);
    color: var(--couleur-principale-foncee);
}

.element-carte-champs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.element-carte-champs .champ-petit {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.element-carte-champs label {
    font-size: 11px;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.element-carte-champs input[type="text"],
.element-carte-champs input[type="number"] {
    padding: 8px 10px;
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: var(--gris-lissac);
}

.element-carte-champs input:focus {
    outline: none;
    border-color: var(--rouge-lissac);
    box-shadow: 0 0 0 2px rgba(238, 39, 55, 0.1);
}

/* === TARIFS RÉSEAU (mini-tableau inline) === */

.element-tarifs-grille {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.element-tarifs-grille .champ-petit input {
    width: 100%;
}

/* === ACTIONS BAS DE PAGE === */

.parametres-actions {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--gris-bordure);
    flex-wrap: wrap;
}

/* === RESPONSIVE === */

@media (max-width: 720px) {
    .zone-logo {
        grid-template-columns: 1fr;
    }
    
    .apercu-logo {
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }
    
    .element-tarifs-grille {
        grid-template-columns: 1fr;
    }
    
    .parametres-actions {
        flex-direction: column;
    }
    
    .section-titre-param {
        font-size: 14px;
        flex-direction: column;
        align-items: flex-start;
    }
}/* ============================================
   ACCUEIL - OUTILS INTERNES
   ============================================ */

.outils-internes {
    max-width: 1100px;
    margin: 36px auto 16px;
    padding: 18px 24px 8px;
    border-top: 1px solid var(--gris-bordure);
}

.outils-titre {
    font-size: 12px;
    color: #aaa;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 14px;
    text-align: center;
}

.menu-outils {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.carte-outil {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--gris-clair);
    border: 1px solid var(--gris-bordure);
    border-radius: 22px;
    padding: 7px 15px 7px 11px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
}

.carte-outil:hover {
    border-color: var(--couleur-principale);
    background-color: var(--blanc-pur);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.carte-outil .icone {
    font-size: 18px;
    margin: 0;
    line-height: 1;
}

.carte-outil-nom {
    font-size: 12.5px;
    font-weight: 600;
    color: #777;
    white-space: nowrap;
}

.carte-outil:hover .carte-outil-nom {
    color: var(--couleur-principale);
}

/* ============================================
   PAGE CATALOGUE APPAREILS AUDITIFS
   ============================================ */

.catalogue-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 24px 60px;
    width: 100%;
}

.catalogue-intro {
    text-align: center;
    margin-bottom: 30px;
}

.catalogue-titre {
    font-size: 28px;
    color: var(--rouge-lissac);
    font-weight: 700;
    margin: 0 0 8px;
}

.catalogue-sous-titre {
    font-size: 14px;
    color: #666;
    margin: 0 0 8px;
}

.catalogue-info {
    font-size: 12px;
    color: #888;
    font-style: italic;
    margin: 0;
}

/* === BARRE D'ACTIONS === */

.catalogue-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
    padding: 14px 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.catalogue-stats {
    font-size: 13px;
    color: var(--gris-lissac);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.catalogue-stats strong {
    color: var(--rouge-lissac);
    font-weight: 700;
    font-size: 15px;
}

.stat-separator {
    color: #ccc;
}

.btn-ajouter-produit {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    border: none;
    padding: 10px 18px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-ajouter-produit:hover {
    background-color: var(--rouge-carmin);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(238, 39, 55, 0.2);
}

/* === FILTRES === */

.catalogue-filtres {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.filtre-champ {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filtre-champ label {
    font-size: 11px;
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filtre-champ input,
.filtre-champ select {
    padding: 9px 12px;
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: var(--gris-lissac);
    background-color: var(--blanc-pur);
}

.filtre-champ input:focus,
.filtre-champ select:focus {
    outline: none;
    border-color: var(--rouge-lissac);
    box-shadow: 0 0 0 2px rgba(238, 39, 55, 0.1);
}

/* === SECTION LISTE === */

.catalogue-section {
    background-color: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 24px;
}

.liste-produits {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.liste-vide {
    text-align: center;
    padding: 60px 20px;
    color: #888;
    font-style: italic;
    background-color: var(--gris-clair);
    border-radius: 6px;
    margin: 0;
    line-height: 1.8;
}

/* === CARTE PRODUIT === */

.produit-carte {
    background-color: var(--gris-clair);
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
    padding: 14px;
    transition: all 0.2s;
}

.produit-carte:hover {
    border-color: var(--rouge-lissac);
    box-shadow: 0 2px 8px rgba(238, 39, 55, 0.06);
}

.produit-carte.masque {
    display: none;
}

.produit-grille {
    display: grid;
    grid-template-columns: 1fr 1.5fr 0.8fr 1.1fr 1.1fr 1.1fr 1fr 40px;
    gap: 10px;
    align-items: end;
}

.produit-champ {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.produit-champ label {
    font-size: 9px;
    color: #888;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.produit-champ input,
.produit-champ select {
    padding: 7px 10px;
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    color: var(--gris-lissac);
    background-color: var(--blanc-pur);
}

.produit-champ input:focus,
.produit-champ select:focus {
    outline: none;
    border-color: var(--rouge-lissac);
}

/* Champ Code EDI (bleu) */
.produit-champ-edi label {
    color: #007AFF !important;
}

.produit-champ-edi input {
    border-color: rgba(0, 122, 255, 0.3);
    color: #007AFF;
    font-weight: 700;
}

.produit-champ-edi input:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

/* Champ Code LPP (rouge) */
.produit-champ-lpp label {
    color: var(--rouge-lissac) !important;
}

.produit-champ-lpp input {
    border-color: rgba(238, 39, 55, 0.3);
    color: var(--rouge-lissac);
    font-weight: 700;
}

.produit-champ-lpp input:focus {
    border-color: var(--rouge-lissac);
    box-shadow: 0 0 0 2px rgba(238, 39, 55, 0.1);
}

/* Champ Prix (vert) */
.produit-champ-prix label {
    color: #2E7D32 !important;
}

.produit-champ-prix input {
    border-color: rgba(46, 125, 50, 0.3);
    color: #2E7D32;
    font-weight: 700;
    text-align: center;
}

.produit-champ-prix input:focus {
    border-color: #2E7D32;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.1);
}

/* Champ Fournisseur (orange) */
.produit-champ-fournisseur label {
    color: #E65100 !important;
}

.p.produit-champ-fournisseur input {
    border-color: rgba(230, 81, 0, 0.2);
}

/* Bouton suppression produit */
.btn-supprimer-produit {
    background-color: transparent;
    border: 1px solid var(--gris-bordure);
    color: #888;
    padding: 7px 8px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s;
}

.btn-supprimer-produit:hover {
    border-color: var(--couleur-principale-foncee);
    color: var(--couleur-principale-foncee);
    background-color: rgba(198, 40, 40, 0.05);
}

/* === NAVIGATION CATALOGUE === */

.catalogue-navigation {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--gris-bordure);
    flex-wrap: wrap;
}

@media (max-width: 1000px) {
    .produit-grille {
        grid-template-columns: 1fr 1fr;
    }
    
    .produit-grille .produit-champ:last-of-type,
    .produit-grille .btn-supprimer-produit {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .catalogue-filtres {
        grid-template-columns: 1fr;
    }
    
    .catalogue-actions-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .produit-grille {
        grid-template-columns: 1fr;
    }
    
    .catalogue-navigation {
        flex-direction: column;
    }
}

/* ============================================
   MODALE GESTION MARQUES/FOURNISSEURS
   ============================================ */

.modale-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modale-contenu {
    background-color: var(--blanc-pur);
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.25s ease;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modale-header {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
}

.modale-titre {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modale-fermer {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--blanc-pur);
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.2s;
}

.modale-fermer:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

.modale-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
}

.modale-liste {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.modale-liste-vide {
    text-align: center;
    padding: 30px 20px;
    color: #888;
    font-style: italic;
    background-color: var(--gris-clair);
    border-radius: 6px;
    font-size: 13px;
    margin: 0;
}

.modale-item {
    background-color: var(--gris-clair);
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    transition: all 0.15s;
}

.modale-item:hover {
    border-color: var(--rouge-lissac);
    background-color: var(--blanc-pur);
}

.modale-item-nom {
    font-size: 13px;
    color: var(--gris-lissac);
    font-weight: 600;
    flex: 1;
}

.modale-item-input {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid var(--rouge-lissac);
    border-radius: 3px;
    font-size: 13px;
    font-family: 'Raleway', sans-serif;
    color: var(--gris-lissac);
}

.modale-item-actions {
    display: flex;
    gap: 6px;
}

.modale-item-btn {
    background-color: transparent;
    border: 1px solid var(--gris-bordure);
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}

.modale-item-btn.btn-editer {
    color: #007AFF;
}

.modale-item-btn.btn-editer:hover {
    border-color: #007AFF;
    background-color: rgba(0, 122, 255, 0.05);
}

.modale-item-btn.btn-valider {
    color: #2E7D32;
    border-color: #2E7D32;
    background-color: rgba(46, 125, 50, 0.05);
}

.modale-item-btn.btn-valider:hover {
    background-color: #2E7D32;
    color: var(--blanc-pur);
}

.modale-item-btn.btn-supprimer {
    color: var(--couleur-principale-foncee);
}

.modale-item-btn.btn-supprimer:hover {
    border-color: var(--couleur-principale-foncee);
    background-color: rgba(198, 40, 40, 0.08);
}

.modale-ajout {
    display: flex;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--gris-bordure);
}

#modale-input-nouveau {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: var(--gris-lissac);
}

#modale-input-nouveau:focus {
    outline: none;
    border-color: var(--rouge-lissac);
}

#modale-btn-ajouter {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.2s;
}

#modale-btn-ajouter:hover {
    background-color: var(--rouge-carmin);
}

.modale-footer {
    padding: 10px 18px;
    background-color: var(--gris-clair);
    border-radius: 0 0 8px 8px;
}

.modale-info {
    font-size: 11px;
    color: #888;
    font-style: italic;
    margin: 0;
    text-align: center;
}

/* ============================================
   CHAMP SELECT + BOUTON + (REMPLACE COMBOBOX)
   ============================================ */

.champ-select-wrapper {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.champ-select-wrapper select {
    flex: 1;
    padding: 7px 8px;
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    color: var(--gris-lissac);
    background-color: var(--blanc-pur);
    cursor: pointer;
}

.champ-select-wrapper select:focus {
    outline: none;
    border-color: var(--rouge-lissac);
}

.btn-gerer-liste {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    border: none;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.2s;
    min-width: 30px;
}

.btn-gerer-liste:hover {
    background-color: var(--rouge-carmin);
}

.label-avec-gerer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.lien-gerer {
    font-size: 10px;
    color: #007AFF;
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    font-family: 'Raleway', sans-serif;
}

.lien-gerer:hover {
    color: var(--rouge-lissac);
}/* ============================================
   FIX URGENT - GRILLE PRODUIT CATALOGUE
   ============================================ */

.produit-grille {
    display: grid !important;
    grid-template-columns: 1.3fr 1.3fr 0.6fr 1.1fr 1.3fr 1fr 0.9fr 0.95fr 40px !important;
    gap: 8px !important;
    align-items: end !important;
}

/* Champ Prix : plus large pour afficher des montants à 4 chiffres */
.produit-champ-prix input {
    width: 100% !important;
    min-width: 75px !important;
    padding: 7px 6px !important;
    font-size: 12px !important;
    text-align: center !important;
}

/* Bouton suppression : forcer la bonne place dans la grille */
.btn-supprimer-produit {
    align-self: end !important;
    height: 33px !important;
    width: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Codes EDI/LPP : un peu plus compacts */
.produit-champ-edi input,
.produit-champ-lpp input {
    padding: 7px 6px !important;
    font-size: 12px !important;
}

/* Responsive : repasse en 2 colonnes si écran trop petit */
@media (max-width: 1200px) {
    .produit-grille {
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
    }
    .btn-supprimer-produit {
        grid-column: span 4 !important;
        width: 100% !important;
    }
}

@media (max-width: 700px) {
    .produit-grille {
        grid-template-columns: 1fr 1fr !important;
    }
    .btn-supprimer-produit {
        grid-column: span 2 !important;
    }
}/* ============================================
   FIX URGENT - GRILLE PRODUIT CATALOGUE
   ============================================ */

.produit-grille {
    display: grid !important;
    grid-template-columns: 1.3fr 1.3fr 0.6fr 1.1fr 1.3fr 1fr 0.9fr 0.95fr 40px !important;
    gap: 8px !important;
    align-items: end !important;
}

/* Champ Prix : plus large pour afficher des montants à 4 chiffres */
.produit-champ-prix input {
    width: 100% !important;
    min-width: 75px !important;
    padding: 7px 6px !important;
    font-size: 12px !important;
    text-align: center !important;
}

/* Bouton suppression : forcer la bonne place dans la grille */
.btn-supprimer-produit {
    align-self: end !important;
    height: 33px !important;
    width: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Codes EDI/LPP : un peu plus compacts */
.produit-champ-edi input,
.produit-champ-lpp input {
    padding: 7px 6px !important;
    font-size: 12px !important;
}

/* Responsive : repasse en 2 colonnes si écran trop petit */
@media (max-width: 1200px) {
    .produit-grille {
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
    }
    .btn-supprimer-produit {
        grid-column: span 4 !important;
        width: 100% !important;
    }
}

@media (max-width: 700px) {
    .produit-grille {
        grid-template-columns: 1fr 1fr !important;
    }
    .btn-supprimer-produit {
        grid-column: span 2 !important;
    }
}/* ============================================
   FIX 2 - GRILLE PRODUIT COMPACTE
   ============================================ */

.produit-grille {
    grid-template-columns: 1.1fr 1.2fr 0.55fr 1fr 1.1fr 0.9fr 0.85fr 0.75fr 34px !important;
    gap: 6px !important;
}

/* Bouton corbeille plus compact */
.btn-supprimer-produit {
    width: 34px !important;
    min-width: 34px !important;
    height: 31px !important;
    padding: 0 !important;
    font-size: 13px !important;
    align-self: end !important;
}

/* Labels plus petits pour gagner de la place */
.produit-champ label {
    font-size: 8px !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Inputs encore plus compacts */
.produit-champ input,
.produit-champ select {
    padding: 6px 5px !important;
    font-size: 11px !important;
}

/* Boutons "+" un peu plus petits */
.btn-gerer-liste {
    min-width: 26px !important;
    padding: 0 6px !important;
    font-size: 13px !important;
}/* ============================================
   PAGE GRILLE TARIFAIRE
   ============================================ */

.grille-main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 24px 60px;
    width: 100%;
}

.grille-section {
    background-color: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-left: 5px solid var(--rouge-lissac);
    border-radius: 4px;
    padding: 22px 26px;
    margin-bottom: 20px;
}

.grille-section-titre {
    font-size: 14px;
    font-weight: 700;
    color: var(--rouge-lissac);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 14px;
}

.boutons-marques {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-marque {
    background-color: var(--gris-clair);
    color: var(--gris-lissac);
    border: 1px solid var(--gris-bordure);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
}

.btn-marque:hover {
    border-color: var(--rouge-lissac);
    color: var(--rouge-lissac);
}

.btn-marque.active {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    border-color: var(--rouge-lissac);
    font-weight: 700;
}

.grille-tableau-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.grille-info-produits {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin: 0;
}

.grille-tarifs-tableau {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.grille-tarifs-tableau thead {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
}

.grille-tarifs-tableau th {
    padding: 11px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.grille-tarifs-tableau th:first-child {
    text-align: left;
    width: 40%;
}

.grille-tarifs-tableau td {
    padding: 8px 11px;
    border-bottom: 1px solid var(--gris-bordure);
    text-align: center;
    background-color: var(--blanc-pur);
}

.grille-tarifs-tableau td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--gris-lissac);
}

.cell-100sante {
    color: #2E7D32 !important;
}

.grille-tarifs-tableau input[type="number"] {
    width: 100px;
    padding: 8px;
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-lissac);
}

.grille-tarifs-tableau input:focus {
    outline: none;
    border-color: var(--rouge-lissac);
    box-shadow: 0 0 0 2px rgba(238, 39, 55, 0.1);
}

.grille-mention {
    font-size: 11px;
    color: #888;
    font-style: italic;
    margin: 10px 0 0;
    text-align: center;
}

.grille-appliquer-zone {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--gris-bordure);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.case-ecraser {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
}

.case-ecraser input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--rouge-lissac);
    cursor: pointer;
}

.btn-appliquer-grille {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-appliquer-grille:hover {
    background-color: var(--rouge-carmin);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(238, 39, 55, 0.25);
}/* ============================================
   BOUTONS IMPORT/EXPORT CSV
   ============================================ */

.btn-import-csv {
    background-color: var(--blanc-pur);
    color: var(--rouge-lissac);
    border: 2px solid var(--rouge-lissac);
    padding: 8px 14px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    margin-right: 8px;
}

.btn-import-csv:hover {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
}/* ============================================
   PAGE DEVIS - PROPOSITION D'ÉQUIPEMENT
   ============================================ */

.devis-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    width: 100%;
}

/* === BARRE D'ACTIONS === */

.devis-actions-bar {
    background-color: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-radius: 8px;
    padding: 14px 20px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.devis-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.devis-stat-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
}

.devis-stat-titre {
    font-size: 18px;
    font-weight: 700;
    color: var(--rouge-lissac);
}

.devis-boutons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-devis {
    background-color: var(--blanc-pur);
    color: var(--rouge-lissac);
    border: 2px solid var(--rouge-lissac);
    padding: 9px 16px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-devis:hover {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(238, 39, 55, 0.2);
}

.btn-devis-principal {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
}

.btn-devis-principal:hover {
    background-color: var(--rouge-carmin);
}

/* === CONFIGURATION === */

.devis-config {
    background-color: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-left: 5px solid var(--rouge-lissac);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 24px;
}

.devis-config-titre {
    font-size: 13px;
    color: var(--rouge-lissac);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin: 0 0 12px;
}

.devis-config-grille {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 0.8fr;
    gap: 16px;
    align-items: end;
}

.devis-config-champ label {
    display: block;
    font-size: 11px;
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.devis-config-champ select,
.devis-config-champ input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: var(--gris-lissac);
    background-color: var(--blanc-pur);
}

.config-radios {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.config-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.config-radio input[type="radio"] {
    accent-color: var(--rouge-lissac);
    cursor: pointer;
}

/* ============================================
   DOCUMENT IMPRIMABLE
   ============================================ */

.devis-document {
    background-color: var(--blanc-pur);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}

/* === EN-TÊTE DOCUMENT === */

.devis-doc-header {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 16px;
    padding: 24px 32px;
    background: linear-gradient(135deg, var(--couleur-principale-claire), var(--blanc-pur));
    border-bottom: 3px solid var(--rouge-lissac);
}

.devis-logo-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    padding: 14px;
    min-height: 90px;
}

.devis-logo-zone img {
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
}

.devis-logo-vide {
    font-size: 16px;
    font-weight: 700;
    color: var(--rouge-lissac);
    letter-spacing: 1px;
    margin: 0;
}

.devis-doc-centre {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.devis-societe-nom {
    font-size: 16px;
    font-weight: 700;
    color: var(--gris-lissac);
    margin: 0 0 4px;
    text-transform: uppercase;
}

.devis-societe-adresse,
.devis-societe-tel,
.devis-societe-siret {
    font-size: 11px;
    color: #666;
    margin: 1px 0;
}

.devis-doc-droite {
    display: flex;
    align-items: center;
    justify-content: center;
}

.devis-numero-encadre {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    padding: 12px 18px;
    border-radius: 6px;
    text-align: center;
}

.devis-numero-label {
    font-size: 10px;
    margin: 0 0 4px;
    letter-spacing: 1px;
    opacity: 0.9;
}

.devis-numero-grand {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 1px;
}

.devis-date-affichee {
    font-size: 10px;
    margin: 4px 0 0;
    opacity: 0.9;
}

/* === TITRE DOCUMENT === */

.devis-doc-titre {
    padding: 20px 32px 14px;
    border-bottom: 1px solid var(--gris-bordure);
    text-align: center;
}

.devis-doc-titre h2 {
    font-size: 22px;
    color: var(--gris-lissac);
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

.devis-audio-info {
    font-size: 12px;
    color: #666;
    margin: 0;
    font-style: italic;
}

/* === SECTIONS DOCUMENT === */

.devis-doc-section {
    padding: 20px 32px;
    border-bottom: 1px solid var(--gris-bordure);
}

.devis-doc-section:last-of-type {
    border-bottom: none;
}

.devis-doc-section-titre {
    font-size: 14px;
    color: var(--rouge-lissac);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--rouge-lissac);
    display: inline-block;
}

/* === INFOS PATIENT === */

.devis-patient-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.devis-patient-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin: 0 0 4px;
}

.devis-patient-valeur {
    font-size: 14px;
    color: var(--gris-lissac);
    font-weight: 600;
    margin: 0;
}

/* === ANALYSE === */

.devis-analyse-contenu {
    background-color: var(--couleur-principale-claire);
    border-left: 3px solid var(--rouge-lissac);
    padding: 14px 18px;
    border-radius: 4px;
}

.devis-analyse-texte {
    font-size: 13px;
    color: var(--gris-lissac);
    line-height: 1.6;
    margin: 0;
}

/* === RÉSUMÉ VISUEL 4 GAMMES === */

.devis-resume-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.resume-gamme {
    background-color: var(--blanc-pur);
    border: 2px solid var(--gris-bordure);
    border-radius: 8px;
    padding: 14px 12px;
    text-align: center;
}

.resume-gamme-classe {
    font-size: 9px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 6px;
    font-weight: 700;
}

.resume-gamme-nom {
    font-size: 15px;
    color: var(--gris-lissac);
    font-weight: 700;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.resume-gamme-description {
    font-size: 11px;
    color: #666;
    margin: 0 0 10px;
    line-height: 1.4;
    min-height: 30px;
}

.resume-gamme-environnements {
    font-size: 10px;
    color: var(--rouge-lissac);
    font-weight: 700;
    margin: 4px 0;
    letter-spacing: 0.5px;
}

.resume-gamme-canaux {
    font-size: 11px;
    color: #888;
    margin: 0;
    font-style: italic;
}

.resume-100sante {
    border-color: #2E7D32;
    background-color: rgba(46, 125, 50, 0.04);
}

.resume-100sante .resume-gamme-nom {
    color: #2E7D32;
}

.resume-100sante .resume-gamme-environnements {
    color: #2E7D32;
}

.resume-bronze {
    border-color: #CD7F32;
}

.resume-bronze .resume-gamme-nom {
    color: #CD7F32;
}

.resume-argent {
    border-color: #888;
}

.resume-or {
    border-color: #B8860B;
    background-color: rgba(255, 215, 0, 0.04);
}

.resume-or .resume-gamme-nom {
    color: #B8860B;
}

/* === TABLEAU COMPARATIF OFFICIEL === */

.devis-tableau-comparatif {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin-bottom: 10px;
}

.devis-tableau-comparatif thead {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
}

.devis-tableau-comparatif th {
    padding: 10px 6px;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid var(--blanc-pur);
}

.devis-tableau-comparatif th.th-categorie {
    background-color: var(--gris-lissac);
    width: 14%;
}

.devis-tableau-comparatif th.th-critere {
    text-align: left;
    padding-left: 12px;
    width: 36%;
    background-color: var(--rouge-lissac);
}

.th-sous {
    font-size: 9px;
    opacity: 0.85;
    font-weight: 400;
}

.devis-tableau-comparatif tbody td {
    padding: 7px 8px;
    border: 1px solid var(--gris-bordure);
    text-align: center;
    background-color: var(--blanc-pur);
    vertical-align: middle;
}

.devis-tableau-comparatif td.td-categorie {
    background-color: var(--gris-lissac);
    color: var(--blanc-pur);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    width: 14%;
}

.devis-tableau-comparatif tbody td:nth-child(2),
.devis-tableau-comparatif tbody td:not(.td-categorie):first-child {
    text-align: left;
    padding-left: 12px;
    color: var(--gris-lissac);
    background-color: #FAFAFA;
    font-weight: 500;
}

.cell-oui {
    color: var(--rouge-lissac);
    font-size: 18px;
    font-weight: 700;
}

.cell-non {
    color: #CCC;
    font-size: 14px;
}

.devis-tableau-legende {
    font-size: 11px;
    color: #666;
    margin: 8px 0 0;
    text-align: center;
}

.legende-oui {
    color: var(--rouge-lissac);
    font-weight: 700;
    margin-right: 16px;
}

.legende-non {
    color: #888;
}

/* === SECTION SIMULATION === */

.devis-section-simulation {
    background: linear-gradient(135deg, var(--couleur-principale-claire), var(--blanc-pur));
    border-left: 5px solid var(--rouge-lissac);
}

.devis-simulation-contenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 14px;
}

.devis-simulation-texte h3 {
    font-size: 18px;
    color: var(--rouge-lissac);
    margin: 0 0 6px;
    font-weight: 700;
}

.devis-simulation-texte p {
    font-size: 13px;
    color: #666;
    margin: 0;
    max-width: 500px;
    line-height: 1.5;
}

.devis-simulation-btn {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
    padding: 14px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(238, 39, 55, 0.25);
}

.devis-simulation-btn:hover {
    background-color: var(--rouge-carmin);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(238, 39, 55, 0.35);
}

.devis-qrcode-zone {
    text-align: center;
    padding-top: 14px;
    border-top: 1px dashed rgba(238, 39, 55, 0.3);
}

.devis-qrcode-label {
    font-size: 11px;
    color: #666;
    margin: 0 0 8px;
    font-style: italic;
}

.devis-qrcode-image {
    display: inline-block;
}

.devis-qrcode-image canvas,
.devis-qrcode-image img {
    border: 4px solid var(--blanc-pur);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* === TABLEAU PRIX === */

.info-paire {
    font-size: 12px;
    color: #888;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
}

.devis-tableau-prix {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 8px;
}

.devis-tableau-prix thead {
    background-color: var(--rouge-lissac);
    color: var(--blanc-pur);
}

.devis-tableau-prix th {
    padding: 10px 8px;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid var(--blanc-pur);
}

.devis-tableau-prix th.col-100sante {
    background-color: #2E7D32;
}

.devis-tableau-prix td {
    padding: 10px 8px;
    border: 1px solid var(--gris-bordure);
    text-align: center;
    background-color: var(--blanc-pur);
    vertical-align: middle;
}

.devis-tableau-prix td.td-label {
    text-align: left;
    padding-left: 14px;
    background-color: #FAFAFA;
    font-weight: 600;
    color: var(--gris-lissac);
}

.devis-tableau-prix td.td-modele {
    font-weight: 600;
    color: var(--gris-lissac);
}

.devis-tableau-prix td.td-prix {
    color: var(--gris-lissac);
    font-weight: 600;
}

.devis-tableau-prix td.td-remise {
    color: var(--couleur-principale-foncee);
    font-weight: 700;
}

.devis-tableau-prix td.td-final {
    color: #2E7D32;
    font-weight: 700;
    font-size: 16px;
    background-color: rgba(46, 125, 50, 0.06);
}

.ligne-total {
    background-color: rgba(46, 125, 50, 0.04);
}

.devis-prix-mention {
    font-size: 11px;
    color: #888;
    font-style: italic;
    margin: 6px 0 0;
    text-align: center;
}

/* === ENGAGEMENTS ENSEIGNE === */

.devis-section-engagements {
    background: linear-gradient(135deg, var(--couleur-principale-claire), var(--blanc-pur));
}

.devis-engagements-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.engagement-carte {
    background-color: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-left: 3px solid var(--rouge-lissac);
    border-radius: 4px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.engagement-icone {
    font-size: 22px;
    line-height: 1;
}

.engagement-texte {
    flex: 1;
}

.engagement-titre {
    font-size: 13px;
    font-weight: 700;
    color: var(--gris-lissac);
    margin: 0 0 2px;
}

.engagement-desc {
    font-size: 11px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

.devis-engagements-mention {
    text-align: center;
    font-size: 11px;
    color: var(--rouge-lissac);
    font-weight: 700;
    letter-spacing: 1.5px;
    margin: 0;
    padding-top: 8px;
    border-top: 1px dashed rgba(238, 39, 55, 0.3);
}

/* === OPTIONS & ACCESSOIRES === */

.devis-options-liste,
.devis-accessoires-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.devis-option-item {
    background-color: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.devis-option-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    cursor: pointer;
}

.devis-option-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--rouge-lissac);
    cursor: pointer;
}

.devis-option-nom {
    font-size: 13px;
    font-weight: 700;
    color: var(--gris-lissac);
}

.devis-option-desc {
    font-size: 11px;
    color: #888;
    font-style: italic;
    margin-left: 6px;
}

.devis-option-prix {
    font-size: 14px;
    font-weight: 700;
    color: var(--rouge-lissac);
}

.devis-options-vide {
    text-align: center;
    padding: 24px;
    color: #888;
    font-style: italic;
    background-color: var(--gris-clair);
    border-radius: 4px;
    font-size: 12px;
    margin: 0;
}

/* === PIED DE PAGE DOCUMENT === */

.devis-doc-footer {
    padding: 18px 32px 24px;
    background-color: var(--gris-clair);
    border-top: 2px solid var(--rouge-lissac);
    text-align: center;
}

.devis-footer-legal {
    font-size: 11px;
    color: #666;
    font-style: italic;
    margin: 0 0 12px;
}

.devis-footer-signature {
    font-size: 12px;
    color: var(--gris-lissac);
    margin: 0;
    letter-spacing: 0.5px;
}

/* === NAVIGATION === */

.devis-navigation {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--gris-bordure);
    flex-wrap: wrap;
}

/* === IMPRESSION === */

@media print {
    body {
        background: white;
    }
    
    .no-print {
        display: none !important;
    }
    
    .devis-document {
        box-shadow: none;
        border-radius: 0;
    }
    
    .devis-main {
        padding: 0;
        max-width: none;
    }
    
    .devis-doc-section {
        page-break-inside: avoid;
    }
}

/* === RESPONSIVE === */

@media (max-width: 900px) {
    .devis-resume-grille,
    .devis-patient-grille {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .devis-engagements-grille {
        grid-template-columns: 1fr;
    }
    
    .devis-doc-header {
        grid-template-columns: 1fr;
    }
    
    .devis-config-grille {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .devis-doc-section {
        padding: 16px 18px;
    }
    
    .devis-doc-header {
        padding: 18px 20px;
    }
    
    .devis-tableau-comparatif,
    .devis-tableau-prix {
        font-size: 10px;
    }
    
    .devis-tableau-comparatif th,
    .devis-tableau-comparatif td,
    .devis-tableau-prix th,
    .devis-tableau-prix td {
        padding: 6px 4px;
    }
    
    .devis-simulation-contenu {
        flex-direction: column;
        text-align: center;
    }
}/* ============================================
   FIX URGENT - POINTS ROUGES UNIFORMES DEVIS
   ============================================ */

.devis-tableau-comparatif .cell-oui {
    color: var(--rouge-lissac) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    background-color: var(--blanc-pur) !important;
}

.devis-tableau-comparatif .cell-non {
    color: #CCC !important;
    font-size: 14px !important;
    background-color: var(--blanc-pur) !important;
}

/* Forcer aussi pour les premières cellules après catégorie */
.devis-tableau-comparatif tbody td.cell-oui,
.devis-tableau-comparatif tbody td.cell-non {
    text-align: center !important;
    padding: 7px 8px !important;
}/* ============================================
   FIX URGENT - PIED DE PAGE DEVIS VISIBLE
   ============================================ */

.devis-doc-footer {
    background-color: var(--gris-clair) !important;
    padding: 18px 32px 24px !important;
    border-top: 2px solid var(--rouge-lissac) !important;
    text-align: center !important;
}

.devis-doc-footer .devis-footer-mention-principale {
    color: var(--rouge-lissac) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 0 8px !important;
    background-color: transparent !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.devis-doc-footer .devis-footer-mention-secondaire {
    color: var(--gris-lissac) !important;
    font-size: 12px !important;
    font-style: italic !important;
    margin: 0 !important;
    background-color: transparent !important;
    text-shadow: none !important;
    opacity: 1 !important;
}/* ============================================
   AFFICHAGE CONDITIONNEL - REMISE
   ============================================ */

.config-case-remise {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: rgba(238, 39, 55, 0.05);
    border: 1px solid rgba(238, 39, 55, 0.2);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--gris-lissac);
    font-weight: 600;
    transition: all 0.2s;
}

.config-case-remise:hover {
    background-color: rgba(238, 39, 55, 0.1);
    border-color: var(--rouge-lissac);
}

.config-case-remise input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--rouge-lissac);
    cursor: pointer;
}

.input-remise {
    width: 70px;
    padding: 5px 8px;
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--couleur-principale-foncee);
}

.input-remise:focus {
    outline: none;
    border-color: var(--couleur-principale-foncee);
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.1);
}

#ligne-remise.visible {
    display: table-row !important;
}/* ============================================
   MODE D'AFFICHAGE OPTIONS/ACCESSOIRES
   ============================================ */

.champ-mode-affichage {
    margin-top: 10px;
    padding: 10px 12px;
    background-color: rgba(238, 39, 55, 0.04);
    border-radius: 4px;
    border-left: 3px solid var(--rouge-lissac);
}

.champ-mode-affichage label {
    display: block;
    font-size: 11px;
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.input-option-mode,
.input-accessoire-mode {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
    background-color: var(--blanc-pur);
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: var(--gris-lissac);
    font-weight: 600;
    cursor: pointer;
}

.input-option-mode:focus,
.input-accessoire-mode:focus {
    outline: none;
    border-color: var(--rouge-lissac);
}/* ============================================
   ============================================
   REFONTE V3 — STYLES NOUVEAUX MODULES
   ============================================
   ============================================ */


/* === RÉSEAUX AFFILIÉS (parametres.html) === */

.reseaux-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.reseau-case {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background-color: #F5F5F5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.reseau-case:hover {
    border-color: var(--couleur-principale);
    background-color: rgba(238, 39, 55, 0.04);
}

.reseau-case.affilie {
    background-color: rgba(238, 39, 55, 0.08);
    border-color: var(--couleur-principale);
}

.reseau-case input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--couleur-principale);
    cursor: pointer;
}

.reseau-case-nom {
    font-size: 13px;
    color: #3F4443;
    font-weight: 600;
    flex: 1;
}

.reseau-case.affilie .reseau-case-nom {
    color: var(--couleur-principale);
    font-weight: 700;
}

.reseau-case.affilie .reseau-case-nom::before {
    content: '✓ ';
}

.btn-supprimer-reseau-perso {
    background: transparent;
    border: 1px solid #ddd;
    color: #888;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s;
}

.btn-supprimer-reseau-perso:hover {
    border-color: var(--couleur-principale-foncee);
    color: var(--couleur-principale-foncee);
}

.reseaux-compteur {
    text-align: center;
    font-size: 12px;
    color: #2E7D32;
    font-weight: 700;
    margin: 0;
    padding: 8px;
    background-color: rgba(46, 125, 50, 0.06);
    border-radius: 4px;
}


/* === BANDEAU INFO RÉSEAUX (catalogue.html) === */

.catalogue-info-reseaux {
    background: linear-gradient(135deg, rgba(238, 39, 55, 0.05), #FFF);
    border-left: 5px solid var(--couleur-principale);
    padding: 12px 18px;
    border-radius: 4px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.catalogue-info-reseaux p {
    margin: 0;
    font-size: 13px;
    color: #3F4443;
}

.catalogue-info-reseaux strong {
    color: var(--couleur-principale);
    font-weight: 700;
    font-size: 15px;
}

.info-reseaux-lien {
    color: var(--couleur-principale);
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border: 1px solid var(--couleur-principale);
    border-radius: 4px;
    transition: all 0.15s;
}

.info-reseaux-lien:hover {
    background-color: var(--couleur-principale);
    color: white;
}


/* === FICHES ACCESSOIRES & SERVICES === */

.fiche-grille-principal {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.fiche-grille-secondaire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px dashed #ddd;
}


/* === COMPATIBILITÉ (Accessoires) === */

.champ-compatibilite label {
    display: block;
    font-size: 11px;
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.compat-cases {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.compat-case {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: #F5F5F5;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    color: #3F4443;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.compat-case:hover {
    border-color: var(--couleur-principale);
}

.compat-case input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--couleur-principale);
    cursor: pointer;
}


/* === MODE D'AFFICHAGE === */

.champ-mode-affichage {
    background-color: rgba(238, 39, 55, 0.04);
    padding: 10px 12px;
    border-radius: 4px;
    border-left: 3px solid var(--couleur-principale);
}

.champ-mode-affichage label {
    display: block;
    font-size: 11px;
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.input-acc-mode,
.input-svc-mode {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    color: #3F4443;
    font-weight: 600;
    cursor: pointer;
}


/* === DESCRIPTION (Services) === */

.champ-description label {
    display: block;
    font-size: 11px;
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.input-svc-description {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: #3F4443;
    resize: vertical;
    min-height: 50px;
}

.input-svc-description:focus,
.input-acc-mode:focus,
.input-svc-mode:focus,
.input-svc-type:focus {
    outline: none;
    border-color: var(--couleur-principale);
}


/* === RESPONSIVE === */

@media (max-width: 900px) {
    .fiche-grille-principal {
        grid-template-columns: 1fr 1fr;
    }
    
    .fiche-grille-secondaire {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .reseaux-grille {
        grid-template-columns: 1fr;
    }
    
    .fiche-grille-principal {
        grid-template-columns: 1fr;
    }
    
    .catalogue-info-reseaux {
        flex-direction: column;
        align-items: flex-start;
    }
}/* ============================================
   ZONE PRIX RÉSEAUX (catalogue appareils auditifs)
   ============================================ */

.zone-prix-reseaux {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #ddd;
}

.btn-toggle-prix-reseaux {
    width: 100%;
    background-color: rgba(238, 39, 55, 0.05);
    border: 1px dashed var(--couleur-principale);
    color: var(--couleur-principale);
    padding: 10px 16px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    text-align: left;
    position: relative;
    padding-right: 40px;
}

.btn-toggle-prix-reseaux:hover {
    background-color: rgba(238, 39, 55, 0.1);
}

.btn-toggle-prix-reseaux::after {
    content: '▼';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    transition: transform 0.2s;
}

.btn-toggle-prix-reseaux.ouvert {
    background-color: var(--couleur-principale);
    color: white;
    border-style: solid;
}

.btn-toggle-prix-reseaux.ouvert::after {
    transform: translateY(-50%) rotate(180deg);
}

.zone-prix-reseaux-contenu {
    margin-top: 10px;
    padding: 14px;
    background-color: rgba(238, 39, 55, 0.03);
    border: 1px solid rgba(238, 39, 55, 0.15);
    border-radius: 4px;
}

.prix-reseaux-aide {
    font-size: 11px;
    color: #666;
    font-style: italic;
    margin: 0 0 10px;
}

.tableau-prix-reseaux {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.tableau-prix-reseaux thead {
    background-color: var(--couleur-principale);
    color: white;
}

.tableau-prix-reseaux th {
    padding: 8px 12px;
    text-align: left;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.tableau-prix-reseaux th:last-child {
    text-align: right;
    width: 180px;
}

.tableau-prix-reseaux tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
    background-color: white;
}

.tableau-prix-reseaux tbody tr:last-child td {
    border-bottom: none;
}

.tableau-prix-reseaux tbody td:last-child {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    color: #3F4443;
}

.input-prix-reseau {
    width: 90px;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--couleur-principale);
}

.input-prix-reseau:focus {
    outline: none;
    border-color: var(--couleur-principale);
    box-shadow: 0 0 0 2px rgba(238, 39, 55, 0.1);
}

.input-prix-reseau::placeholder {
    color: #BBB;
    font-style: italic;
    font-weight: 400;
}

.zone-prix-reseaux-vide {
    background-color: rgba(255, 152, 0, 0.06);
    border: 1px dashed #FF9800;
    padding: 10px 14px;
    border-radius: 4px;
    text-align: center;
}

.zone-prix-reseaux-vide p {
    margin: 0;
    font-size: 12px;
    color: #666;
}

.zone-prix-reseaux-vide a {
    color: var(--couleur-principale);
    font-weight: 700;
    text-decoration: none;
}

.zone-prix-reseaux-vide a:hover {
    text-decoration: underline;
}
/* ============================================
   ============================================
   DEVIS FINAL V3 - STYLES COMPLETS
   ============================================
   ============================================ */

.devis-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    width: 100%;
}

.devis-actions-bar {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 14px 20px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.devis-stats { display: flex; flex-direction: column; gap: 2px; }
.devis-stat-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }
.devis-stat-titre { font-size: 18px; font-weight: 700; color: var(--couleur-principale); }
.devis-boutons { display: flex; gap: 8px; flex-wrap: wrap; }

.btn-devis {
    background-color: white;
    color: var(--couleur-principale);
    border: 2px solid var(--couleur-principale);
    padding: 9px 16px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}
.btn-devis:hover { background-color: var(--couleur-principale); color: white; transform: translateY(-1px); }
.btn-devis-principal { background-color: var(--couleur-principale); color: white; }
.btn-devis-principal:hover { background-color: var(--couleur-principale-foncee); }

.devis-config {
    background-color: white;
    border: 1px solid #ddd;
    border-left: 5px solid var(--couleur-principale);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 24px;
}
.devis-config-titre { font-size: 13px; color: var(--couleur-principale); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin: 0 0 12px; }
.devis-config-grille { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 16px; align-items: end; }
.devis-config-champ label { display: block; font-size: 11px; color: #666; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.devis-config-champ select, .devis-config-champ input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
}
.config-radios { display: flex; gap: 16px; flex-wrap: wrap; }
.config-radio { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.config-radio input[type="radio"] { accent-color: var(--couleur-principale); }

.config-case-remise {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: rgba(238, 39, 55, 0.05);
    border: 1px solid rgba(238, 39, 55, 0.2);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}
.config-case-remise input { accent-color: var(--couleur-principale); width: 16px; height: 16px; }

.input-remise {
    width: 70px; padding: 5px 8px;
    border: 1px solid #ddd; border-radius: 3px;
    text-align: center; font-weight: 700; color: var(--couleur-principale-foncee);
}

.devis-document {
    background-color: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}

.devis-doc-header {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 16px;
    padding: 24px 32px;
    background: linear-gradient(135deg, var(--couleur-principale-claire), white);
    border-bottom: 3px solid var(--couleur-principale);
}
.devis-logo-zone {
    display: flex; align-items: center; justify-content: center;
    background-color: white; border: 1px solid #ddd; border-radius: 4px;
    padding: 14px; min-height: 90px;
}
.devis-logo-zone img { max-width: 100%; max-height: 90px; object-fit: contain; }
.devis-logo-vide { font-size: 16px; font-weight: 700; color: var(--couleur-principale); letter-spacing: 1px; margin: 0; }
.devis-doc-centre { display: flex; flex-direction: column; justify-content: center; }
.devis-societe-nom { font-size: 16px; font-weight: 700; color: #3F4443; margin: 0 0 4px; text-transform: uppercase; }
.devis-societe-adresse, .devis-societe-tel, .devis-societe-siret { font-size: 11px; color: #666; margin: 1px 0; }

.devis-numero-encadre {
    background-color: var(--couleur-principale);
    color: white;
    padding: 12px 18px;
    border-radius: 6px;
    text-align: center;
}
.devis-numero-label { font-size: 10px; margin: 0 0 4px; letter-spacing: 1px; opacity: 0.9; }
.devis-numero-grand { font-size: 22px; font-weight: 700; margin: 0; }
.devis-date-affichee { font-size: 10px; margin: 4px 0 0; opacity: 0.9; }

.devis-doc-titre { padding: 20px 32px 14px; border-bottom: 1px solid #ddd; text-align: center; }
.devis-doc-titre h2 { font-size: 22px; color: #3F4443; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
.devis-audio-info { font-size: 12px; color: #666; margin: 0; font-style: italic; }

.devis-doc-section { padding: 20px 32px; border-bottom: 1px solid #ddd; }
.devis-doc-section:last-of-type { border-bottom: none; }
.devis-doc-section-titre {
    font-size: 14px; color: var(--couleur-principale);
    text-transform: uppercase; letter-spacing: 1px;
    font-weight: 700; margin: 0 0 14px;
    padding-bottom: 8px; border-bottom: 2px solid var(--couleur-principale);
    display: inline-block;
}

.devis-patient-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.devis-patient-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin: 0 0 4px; }
.devis-patient-valeur { font-size: 14px; color: #3F4443; font-weight: 600; margin: 0; }

.devis-analyse-contenu {
    background-color: var(--couleur-principale-claire);
    border-left: 3px solid var(--couleur-principale);
    padding: 14px 18px;
    border-radius: 4px;
}
.devis-analyse-texte { font-size: 13px; color: #3F4443; line-height: 1.6; margin: 0; }

.devis-tableau-comparatif { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 10px; }
.devis-tableau-comparatif thead { background-color: var(--couleur-principale); color: white; }
.devis-tableau-comparatif th { padding: 10px 6px; text-align: center; font-weight: 700; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; border: 1px solid white; }
.devis-tableau-comparatif th.th-categorie { background-color: #3F4443; width: 14%; }
.devis-tableau-comparatif th.th-critere { text-align: left; padding-left: 12px; width: 36%; }
.th-sous { font-size: 9px; opacity: 0.85; font-weight: 400; }
.devis-tableau-comparatif tbody td { padding: 7px 8px; border: 1px solid #ddd; text-align: center; background-color: white; vertical-align: middle; }
.devis-tableau-comparatif td.td-categorie { background-color: #3F4443; color: white; font-weight: 700; font-size: 10px; text-transform: uppercase; }
.devis-tableau-comparatif tbody td:nth-child(2):not(.td-categorie) { text-align: left; padding-left: 12px; background-color: #FAFAFA; }
.devis-tableau-comparatif .cell-oui { color: var(--couleur-principale) !important; font-size: 18px !important; font-weight: 700 !important; background-color: white !important; }
.devis-tableau-comparatif .cell-non { color: #CCC !important; font-size: 14px !important; background-color: white !important; }
.devis-tableau-legende { font-size: 11px; color: #666; margin: 8px 0 0; text-align: center; }
.legende-oui { color: var(--couleur-principale); font-weight: 700; margin-right: 16px; }
.legende-non { color: #888; }

.devis-section-simulation { background: linear-gradient(135deg, var(--couleur-principale-claire), white); border-left: 5px solid var(--couleur-principale); }
.devis-simulation-contenu { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 14px; }
.devis-simulation-texte h3 { font-size: 18px; color: var(--couleur-principale); margin: 0 0 6px; font-weight: 700; }
.devis-simulation-texte p { font-size: 13px; color: #666; margin: 0; max-width: 500px; }
.devis-simulation-btn {
    background-color: var(--couleur-principale); color: white;
    padding: 14px 24px; border-radius: 6px;
    text-decoration: none; font-weight: 700; font-size: 14px;
    text-transform: uppercase; letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(238, 39, 55, 0.25);
}
.devis-simulation-btn:hover { background-color: var(--couleur-principale-foncee); transform: translateY(-2px); }
.devis-qrcode-zone { text-align: center; padding-top: 14px; border-top: 1px dashed rgba(238, 39, 55, 0.3); }
.devis-qrcode-label { font-size: 11px; color: #666; margin: 0 0 8px; font-style: italic; }
.devis-qrcode-image { display: inline-block; }
.devis-qrcode-image canvas, .devis-qrcode-image img { border: 4px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.info-paire { font-size: 12px; color: #888; font-weight: 400; font-style: italic; }
.devis-tableau-prix { width: 100%; border-collapse: collapse; font-size: 12px; }
.devis-tableau-prix thead { background-color: var(--couleur-principale); color: white; }
.devis-tableau-prix th { padding: 10px 8px; text-align: center; font-weight: 700; font-size: 11px; text-transform: uppercase; border: 1px solid white; }
.devis-tableau-prix th.col-100sante { background-color: #2E7D32; }
.devis-tableau-prix td { padding: 10px 8px; border: 1px solid #ddd; text-align: center; background-color: white; }
.devis-tableau-prix td.td-label { text-align: left; padding-left: 14px; background-color: #FAFAFA; font-weight: 600; color: #3F4443; }
.devis-tableau-prix td.td-prix { color: #3F4443; font-weight: 600; }
.devis-tableau-prix td.td-remise { color: var(--couleur-principale-foncee); font-weight: 700; }
.devis-tableau-prix td.td-final { color: #2E7D32; font-weight: 700; font-size: 16px; background-color: rgba(46, 125, 50, 0.06); }
.ligne-total { background-color: rgba(46, 125, 50, 0.04); }
.select-produit-devis { width: 100%; padding: 5px; border: 1px solid #ddd; border-radius: 3px; font-size: 11px; }
.devis-prix-mention { font-size: 11px; color: #888; font-style: italic; margin: 6px 0 0; text-align: center; }

.devis-section-engagements { background: linear-gradient(135deg, var(--couleur-principale-claire), white); }
.devis-engagements-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.engagement-carte {
    background-color: white; border: 1px solid #ddd;
    border-left: 3px solid var(--couleur-principale); border-radius: 4px;
    padding: 10px 14px; display: flex; align-items: center; gap: 12px;
}
.engagement-icone { font-size: 22px; line-height: 1; }
.engagement-texte { flex: 1; }
.engagement-titre { font-size: 13px; font-weight: 700; color: #3F4443; margin: 0 0 2px; }
.engagement-desc { font-size: 11px; color: #666; margin: 0; line-height: 1.4; }
.devis-engagements-mention { text-align: center; font-size: 11px; color: var(--couleur-principale); font-weight: 700; letter-spacing: 1.5px; margin: 0; padding-top: 8px; border-top: 1px dashed rgba(238, 39, 55, 0.3); }

.devis-options-liste, .devis-accessoires-liste { display: flex; flex-direction: column; gap: 8px; }
.devis-option-item {
    background-color: white; border: 1px solid #ddd; border-radius: 4px;
    padding: 10px 14px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    transition: all 0.2s;
}
.devis-option-item.option-decoche { opacity: 0.5; background-color: #F5F5F5; }
.devis-option-item.option-decoche .devis-option-nom { text-decoration: line-through; }
.devis-option-checkbox { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; }
.devis-option-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--couleur-principale); }
.devis-option-nom { font-size: 13px; font-weight: 700; color: #3F4443; }
.devis-option-desc { font-size: 11px; color: #888; font-style: italic; margin-left: 6px; }
.devis-option-prix { font-size: 14px; font-weight: 700; color: var(--couleur-principale); }
.devis-options-vide { text-align: center; padding: 20px; color: #888; font-style: italic; background-color: #F5F5F5; border-radius: 4px; font-size: 12px; margin: 0; }

.devis-doc-footer {
    padding: 18px 32px 24px;
    background-color: #F5F5F5;
    border-top: 2px solid var(--couleur-principale);
    text-align: center;
}
.devis-footer-mention-principale { font-size: 13px; color: var(--couleur-principale) !important; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px; }
.devis-footer-mention-secondaire { font-size: 12px; color: #3F4443 !important; font-style: italic; margin: 0; }

.devis-navigation { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; flex-wrap: wrap; }

@media print {
    body { background: white; }
    .no-print { display: none !important; }
    .devis-document { box-shadow: none; border-radius: 0; }
    .devis-main { padding: 0; max-width: none; }
    .devis-doc-section { page-break-inside: avoid; }
    .devis-option-item.option-decoche { display: none !important; }
}

.mode-pdf .devis-option-item.option-decoche { display: none !important; }
.mode-pdf .no-print { display: none !important; }
.mode-pdf .devis-option-item input[type="checkbox"] { display: none !important; }

@media (max-width: 900px) {
    .devis-patient-grille, .devis-doc-header { grid-template-columns: 1fr; }
    .devis-engagements-grille { grid-template-columns: 1fr; }
    .devis-config-grille { grid-template-columns: 1fr; }
}

/* ============================================
   PERSONNALISATION DE L'ENSEIGNE (Réglages)
   ============================================ */

.theme-label {
    font-weight: 600;
    font-size: 15px;
    color: var(--gris-lissac);
    margin: 25px 0 6px;
}

/* Champ couleur : sélecteur visuel + code HEX */
.champ-couleur {
    display: flex;
    align-items: center;
    gap: 8px;
}
.champ-couleur input[type="color"] {
    width: 48px;
    height: 42px;
    padding: 2px;
    border: 2px solid var(--gris-bordure);
    border-radius: 8px;
    cursor: pointer;
    background: var(--blanc-pur);
    flex-shrink: 0;
}
.champ-hex {
    flex: 1;
    text-transform: uppercase;
}

/* Grille de cartes de thèmes */
.themes-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.theme-carte {
    border: 2px solid var(--gris-bordure);
    border-radius: 12px;
    overflow: hidden;
    background: var(--blanc-pur);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
}
.theme-carte:hover {
    border-color: var(--couleur-principale);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}
.theme-carte.active {
    border-color: var(--couleur-principale);
    box-shadow: 0 0 0 3px var(--couleur-principale-claire);
}

/* Aperçu deux couleurs */
.theme-apercu {
    display: flex;
    height: 54px;
}
.theme-apercu span {
    flex: 1;
}

.theme-carte-corps {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.theme-carte-nom {
    font-weight: 700;
    font-size: 14px;
    color: var(--gris-lissac);
}
.theme-carte-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 20px;
    width: fit-content;
}
.theme-carte-badge.systeme {
    background: var(--gris-clair);
    color: #888;
}
.theme-carte-badge.perso {
    background: var(--couleur-principale-claire);
    color: var(--couleur-principale-foncee);
}
.theme-carte-badge.actif {
    background: var(--couleur-principale);
    color: #fff;
}

.btn-appliquer-theme {
    margin-top: auto;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: var(--couleur-principale);
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-appliquer-theme:hover {
    background: var(--couleur-principale-foncee);
}
.btn-appliquer-theme.actif {
    background: var(--gris-clair);
    color: var(--couleur-principale-foncee);
    cursor: default;
}

.theme-carte-actions {
    display: flex;
    gap: 6px;
}
.btn-theme-action {
    flex: 1;
    padding: 6px;
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
    background: var(--blanc-pur);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-theme-action:hover {
    background: var(--gris-clair);
}

/* Bouton « Ajouter un thème personnalisé » */
.btn-ajouter-theme {
    display: inline-block;
    padding: 10px 18px;
    border: 2px dashed var(--couleur-principale);
    border-radius: 10px;
    background: var(--couleur-principale-claire);
    color: var(--couleur-principale-foncee);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-ajouter-theme:hover {
    background: var(--blanc-pur);
}

/* Formulaire d'ajout / édition de thème */
.theme-form {
    margin-top: 16px;
    padding: 18px;
    border: 2px solid var(--couleur-principale);
    border-radius: 12px;
    background: var(--gris-clair);
}
.theme-form-titre {
    font-weight: 700;
    font-size: 15px;
    color: var(--gris-lissac);
    margin-bottom: 14px;
}
.theme-form-apercu {
    margin: 14px 0;
}
.theme-form-apercu-label {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}
.theme-apercu-barre {
    height: 60px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #127C84, #0B5057);
}
.theme-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

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

/* ============================================
   NAVIGATION GLOBALE
   ============================================ */

.nav-globale {
    background: var(--couleur-principale-foncee);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    position: sticky;
    top: 0;
    z-index: 150;
}

.nav-accueil {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    padding: 7px 12px;
    border-radius: 6px;
    transition: background 0.15s;
}
.nav-accueil:hover {
    background: rgba(255, 255, 255, 0.18);
}

.nav-menu-wrap {
    position: relative;
}
.nav-menu-bouton {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: none;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.nav-menu-bouton:hover {
    background: rgba(255, 255, 255, 0.30);
}

.nav-menu-deroulant {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border: 1px solid var(--gris-bordure);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.20);
    min-width: 270px;
    padding: 8px;
}
.nav-menu-deroulant.ouvert {
    display: block;
}

.nav-menu-groupe {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #aaa;
    font-weight: 700;
    padding: 10px 10px 4px;
    margin: 0;
}
.nav-menu-lien {
    display: block;
    padding: 9px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--gris-lissac);
    font-size: 13.5px;
    font-weight: 500;
    transition: background 0.12s;
}
.nav-menu-lien:hover {
    background: var(--gris-clair);
}
.nav-menu-lien-actif {
    background: var(--couleur-principale-claire);
    color: var(--couleur-principale-foncee);
    font-weight: 700;
}

/* ============================================
   PAGE HISTORIQUE DES PROPOSITIONS
   ============================================ */

.histo-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.histo-carte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-left: 4px solid var(--couleur-principale);
    border-radius: 10px;
    padding: 16px 18px;
    transition: box-shadow 0.15s, transform 0.15s;
}
.histo-carte:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.histo-carte-info {
    flex: 1;
    min-width: 240px;
}
.histo-carte-fichier {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--couleur-principale-foncee);
    margin: 0 0 5px;
    word-break: break-all;
}
.histo-carte-client {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--gris-lissac);
    margin: 0 0 3px;
}
.histo-carte-contact {
    font-size: 12.5px;
    color: #888;
    margin: 0 0 3px;
}
.histo-carte-meta {
    font-size: 11.5px;
    color: #aaa;
    margin: 0;
}

.histo-carte-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.btn-histo-ouvrir {
    background: var(--couleur-principale);
    color: #fff;
    border: none;
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-histo-ouvrir:hover {
    background: var(--couleur-principale-foncee);
}
.btn-histo-dupliquer {
    background: var(--couleur-principale-claire);
    color: var(--couleur-principale-foncee);
    border: 1px solid var(--couleur-principale);
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-histo-dupliquer:hover {
    background: var(--blanc-pur);
}
.btn-histo-suppr {
    background: var(--gris-clair);
    border: 1px solid var(--gris-bordure);
    font-size: 15px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-histo-suppr:hover {
    background: #f3d9d9;
}

@media (max-width: 600px) {
    .histo-carte-actions {
        width: 100%;
    }
    .btn-histo-ouvrir {
        flex: 1;
    }
}

/* ============================================
   PAGE DE CONNEXION
   ============================================ */

body.page-connexion {
    background: linear-gradient(135deg, var(--couleur-principale), var(--couleur-principale-foncee));
}

.connexion-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 18px;
}

.connexion-carte {
    background: var(--blanc-pur);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.connexion-entete {
    margin-bottom: 22px;
}
.connexion-logo {
    font-size: 30px;
    font-weight: 700;
    color: var(--couleur-principale);
    margin: 0;
}
.connexion-sous-titre {
    font-size: 13px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 6px;
}

.connexion-form {
    text-align: left;
}
.connexion-form .champ {
    margin-bottom: 14px;
}
.connexion-bouton {
    width: 100%;
    margin-top: 6px;
    justify-content: center;
}

.connexion-erreur {
    background: #FDECEA;
    color: #B3261E;
    border: 1px solid #F3C2BD;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
}

.connexion-demo {
    margin-top: 18px;
    padding: 10px 12px;
    background: var(--couleur-principale-claire);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--couleur-principale-foncee);
}

.connexion-admin-lien {
    display: inline-block;
    margin-top: 18px;
    font-size: 13px;
    color: #888;
    text-decoration: none;
    font-weight: 600;
}
.connexion-admin-lien:hover {
    color: var(--couleur-principale);
}

.connexion-pied {
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12.5px;
}

/* ============================================
   ESPACE ADMINISTRATEUR — VERROU
   ============================================ */

.admin-lock {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--couleur-principale), var(--couleur-principale-foncee));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 500;
}
.admin-lock-carte {
    background: var(--blanc-pur);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
    padding: 34px 30px;
    width: 100%;
    max-width: 380px;
    text-align: center;
}
.admin-lock-icone {
    font-size: 40px;
    margin-bottom: 8px;
}
.admin-lock-titre {
    font-size: 20px;
    color: var(--gris-lissac);
    margin: 0 0 8px;
}
.admin-lock-texte {
    font-size: 13.5px;
    color: #888;
    margin-bottom: 18px;
}
.admin-lock-carte input {
    width: 100%;
    padding: 11px 12px;
    border: 2px solid var(--gris-bordure);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    margin-bottom: 12px;
}
.admin-lock-carte input:focus {
    outline: none;
    border-color: var(--couleur-principale);
}
.admin-lock-carte .btn {
    width: 100%;
    justify-content: center;
}
.admin-lock-carte .connexion-admin-lien {
    margin-top: 14px;
}

/* ============================================
   ADMINISTRATION — FORMULAIRE & LISTE MAGASINS
   ============================================ */

.magasin-form {
    background: var(--gris-clair);
    border: 2px solid var(--couleur-principale);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}
.magasin-form-titre {
    font-weight: 700;
    font-size: 16px;
    color: var(--gris-lissac);
    margin-bottom: 16px;
}
.magasin-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}

.magasins-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.magasin-carte {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-left: 4px solid var(--couleur-principale);
    border-radius: 10px;
    padding: 16px 18px;
}
.magasin-carte.magasin-inactif {
    border-left-color: #BBB;
    background: #FAFAFA;
    opacity: 0.85;
}

.magasin-info {
    flex: 1;
    min-width: 240px;
}
.magasin-nom {
    font-size: 16px;
    font-weight: 700;
    color: var(--gris-lissac);
    margin: 0 0 6px;
}
.magasin-statut {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 4px;
}
.statut-actif {
    background: #E6F4EA;
    color: #1E7E34;
}
.statut-inactif {
    background: #F1F1F1;
    color: #888;
}
.magasin-meta,
.magasin-ident,
.magasin-contact,
.magasin-notes {
    font-size: 13px;
    color: #666;
    margin: 3px 0 0;
}
.magasin-ident strong {
    color: var(--couleur-principale-foncee);
}
.magasin-notes {
    font-style: italic;
    color: #999;
}

.magasin-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.btn-mag-modifier,
.btn-mag-statut,
.btn-mag-suppr {
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-mag-modifier {
    background: var(--couleur-principale);
    color: #fff;
    border: none;
}
.btn-mag-modifier:hover {
    background: var(--couleur-principale-foncee);
}
.btn-mag-statut {
    background: var(--couleur-principale-claire);
    color: var(--couleur-principale-foncee);
    border: 1px solid var(--couleur-principale);
}
.btn-mag-statut:hover {
    background: var(--blanc-pur);
}
.btn-mag-suppr {
    background: var(--gris-clair);
    border: 1px solid var(--gris-bordure);
    font-size: 15px;
    padding: 8px 11px;
}
.btn-mag-suppr:hover {
    background: #f3d9d9;
}

/* ============================================
   NAVIGATION — BLOC SESSION
   ============================================ */

.nav-menu-session {
    border-top: 1px solid var(--gris-bordure);
    margin-top: 6px;
    padding-top: 6px;
}
.nav-session-info {
    font-size: 12px;
    color: #888;
    padding: 6px 10px 2px;
    margin: 0;
}
.nav-deconnexion {
    color: #B3261E !important;
    font-weight: 600;
}
.nav-deconnexion:hover {
    background: #FDECEA !important;
}

@media (max-width: 600px) {
    .magasin-actions {
        width: 100%;
    }
    .btn-mag-modifier {
        flex: 1;
    }
}

/* ============================================
   PAGE CONNEXION + ADMINISTRATION FUSIONNÉES
   ============================================ */

#bloc-connexion {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#vue-admin-console {
    flex: 1;
}

/* En mode console, fond blanc plein écran */
body.page-connexion.mode-console {
    background: var(--blanc-pur);
}

.connexion-logo-admin {
    font-size: 22px;
}

/* ============================================
   MARQUE LOGICIEL ÉVIDENCE
   ============================================ */

/* Logo sur la page de connexion */
.evidence-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
}
.evidence-logo svg {
    width: 290px;
    max-width: 100%;
    height: auto;
}

/* Marque dans la barre de navigation */
.nav-marque {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
}
.nav-marque-mark {
    display: block;
    flex-shrink: 0;
}

/* Mention dans les pieds de page */
.mention-evidence {
    opacity: 0.9;
}

@media (max-width: 560px) {
    .nav-marque-nom {
        display: none;
    }
}

/* ============================================
   BANDEAU COMPTE MAGASIN CONNECTÉ
   ============================================ */

.bandeau-compte {
    background: var(--gris-clair);
    border-bottom: 1px solid var(--gris-bordure);
    padding: 4px 20px;
    text-align: right;
}
.bandeau-compte-texte {
    font-size: 11.5px;
    font-weight: 600;
    color: #777;
    letter-spacing: 0.2px;
}

/* ============================================
   CORBEILLE DES COMPTES MAGASINS
   ============================================ */

.corbeille-section {
    max-width: 1100px;
    margin: 14px auto 0;
}

.corbeille-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--gris-clair);
    border: 1px solid var(--gris-bordure);
    border-radius: 10px;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--gris-lissac);
    cursor: pointer;
    transition: background 0.15s;
}
.corbeille-toggle:hover {
    background: #ECECEC;
}
.corbeille-toggle-titre {
    flex: 1;
    text-align: left;
}
.corbeille-compteur {
    background: #888;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
}
.corbeille-chevron {
    font-size: 11px;
    color: #999;
    transition: transform 0.15s;
}
.corbeille-toggle.ouvert .corbeille-chevron {
    transform: rotate(180deg);
}

.corbeille-contenu {
    padding: 14px 4px 4px;
}
.corbeille-info {
    font-size: 12.5px;
    color: #888;
    margin: 0 0 12px;
}

.corbeille-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.corbeille-carte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: #FAFAFA;
    border: 1px solid var(--gris-bordure);
    border-left: 4px solid #BBB;
    border-radius: 10px;
    padding: 14px 16px;
}
.corbeille-carte-info {
    flex: 1;
    min-width: 220px;
}
.corbeille-carte-nom {
    font-size: 15px;
    font-weight: 700;
    color: var(--gris-lissac);
    margin: 0 0 3px;
}
.corbeille-carte-meta {
    font-size: 12.5px;
    color: #777;
    margin: 0 0 3px;
}
.corbeille-carte-delai {
    font-size: 12px;
    color: #999;
    margin: 0;
}
.corbeille-carte-delai strong {
    color: var(--couleur-principale-foncee);
}

.corbeille-carte-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.btn-corbeille-restaurer,
.btn-corbeille-suppr {
    font-family: inherit;
    font-weight: 600;
    font-size: 12.5px;
    padding: 9px 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-corbeille-restaurer {
    background: var(--couleur-principale);
    color: #fff;
    border: none;
}
.btn-corbeille-restaurer:hover {
    background: var(--couleur-principale-foncee);
}
.btn-corbeille-suppr {
    background: var(--blanc-pur);
    color: #B3261E;
    border: 1px solid #E2B6B2;
}
.btn-corbeille-suppr:hover {
    background: #FDECEA;
}

/* ============================================
   PAGE APPAREILS PAR DÉFAUT
   ============================================ */

.addef-aide {
    max-width: 1100px;
    margin: 0 auto 20px;
    background: var(--couleur-principale-claire);
    border-radius: 10px;
    padding: 12px 16px;
}
.addef-aide p {
    font-size: 13px;
    color: var(--couleur-principale-foncee);
    margin: 0;
}

.addef-contexte {
    max-width: 1100px;
    margin: 0 auto 22px;
    background: var(--blanc-pur);
    border: 1px solid var(--gris-bordure);
    border-radius: 12px;
    padding: 18px 20px;
}
.addef-contexte-titre {
    font-size: 16px;
    font-weight: 700;
    color: var(--gris-lissac);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--couleur-principale);
}

.addef-table-wrap {
    overflow-x: auto;
}
.addef-table {
    width: 100%;
    border-collapse: collapse;
}
.addef-table th {
    background: var(--gris-clair);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #777;
    padding: 9px 10px;
    text-align: left;
    border: 1px solid var(--gris-bordure);
}
.addef-table td {
    padding: 8px 10px;
    border: 1px solid var(--gris-bordure);
    vertical-align: middle;
}
.addef-type {
    font-weight: 700;
    font-size: 13px;
    color: var(--gris-lissac);
    white-space: nowrap;
    background: #FCFCFC;
}
.addef-select {
    width: 100%;
    min-width: 150px;
    padding: 7px 8px;
    border: 1px solid var(--gris-bordure);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    background: var(--blanc-pur);
}
.addef-select:focus {
    outline: none;
    border-color: var(--couleur-principale);
}

/* Bouton « Modifier les appareils » sur la page Proposition */
.btn-modifier-appareils {
    background: var(--couleur-principale-claire);
    color: var(--couleur-principale-foncee);
    border: 1px solid var(--couleur-principale);
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-modifier-appareils:hover {
    background: var(--blanc-pur);
}
.btn-modifier-appareils.actif {
    background: var(--couleur-principale);
    color: #fff;
}
.config-aide-appareils {
    font-size: 11px;
    color: #999;
    margin: 6px 0 0;
    line-height: 1.4;
}

/* ============================================
   CATALOGUES — TABLEAU EN LIGNES + MODALE
   ============================================ */

.cat-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--gris-bordure);
    border-radius: 10px;
    background: var(--blanc-pur);
}
.cat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cat-table thead th {
    background: var(--gris-clair);
    color: #666;
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: left;
    padding: 11px 12px;
    white-space: nowrap;
    border-bottom: 2px solid var(--gris-bordure);
}
.cat-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--gris-bordure);
    white-space: nowrap;
    color: var(--gris-lissac);
}
.cat-table tbody tr:last-child td {
    border-bottom: none;
}
.cat-table tbody tr:hover td {
    background: var(--couleur-principale-claire);
}
.cat-col-actions {
    text-align: right;
    white-space: nowrap;
}
.cat-btn-modifier,
.cat-btn-supprimer {
    border: 1px solid var(--gris-bordure);
    background: var(--blanc-pur);
    border-radius: 6px;
    font-size: 14px;
    padding: 5px 9px;
    cursor: pointer;
    transition: background 0.15s;
}
.cat-btn-modifier:hover {
    background: var(--couleur-principale-claire);
    border-color: var(--couleur-principale);
}
.cat-btn-supprimer:hover {
    background: #FDECEA;
    border-color: #E2B6B2;
}

/* --- Fenêtre modale --- */
.cat-modale-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
}
.cat-modale {
    background: var(--blanc-pur);
    border-radius: 14px;
    width: 100%;
    max-width: 660px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.cat-modale-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gris-bordure);
}
.cat-modale-titre {
    font-size: 17px;
    font-weight: 700;
    color: var(--gris-lissac);
    margin: 0;
}
.cat-modale-fermer {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}
.cat-modale-fermer:hover {
    color: var(--couleur-principale);
}
.cat-modale-corps {
    overflow-y: auto;
    padding: 20px;
}
.cat-modale-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--gris-bordure);
}

/* --- Formulaire de la modale --- */
.cat-form-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.cat-form-champ {
    display: flex;
    flex-direction: column;
}
.cat-form-champ-large {
    grid-column: 1 / -1;
}
.cat-form-champ label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gris-lissac);
    margin-bottom: 5px;
}
.cat-form-champ input,
.cat-form-champ select,
.cat-form-champ textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--gris-bordure);
    border-radius: 7px;
    font-family: inherit;
    font-size: 13.5px;
    background: var(--blanc-pur);
}
.cat-form-champ input:focus,
.cat-form-champ select:focus,
.cat-form-champ textarea:focus {
    outline: none;
    border-color: var(--couleur-principale);
}
.cat-form-cases {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 4px;
}
.cat-form-case {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gris-lissac);
    cursor: pointer;
}
.cat-form-reseaux {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--gris-bordure);
}
.cat-form-reseaux-titre {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--couleur-principale-foncee);
    margin: 0 0 12px;
}
.cat-form-plus {
    flex-shrink: 0;
}

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