/**
 * INTOLERIS - Style cohérent avec le scanner
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --intoleris-dark: #1a1a2e;
    --intoleris-dark-alt: #16213e;
    --intoleris-primary: #4ECDC4;
    --intoleris-accent: #FF6B6B;
    --intoleris-text: #f5f5f5;
    --intoleris-text-muted: rgba(245,245,245,0.7);
    --intoleris-border: rgba(78, 205, 196, 0.3);
    --intoleris-success: #28a745;
}

.ig-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 25px;
    background: linear-gradient(145deg, var(--intoleris-dark), var(--intoleris-dark-alt));
    border-radius: 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--intoleris-text);
}

/* ============ LANGUE ============ */
.ig-lang-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.ig-lang-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--intoleris-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.ig-lang-selector {
    display: flex;
    gap: 8px;
}

.ig-lang-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border: 2px solid transparent;
    border-radius: 50%;
    font-size: 1.3rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ig-lang-btn:hover {
    background: rgba(78, 205, 196, 0.2);
    border-color: var(--intoleris-primary);
    transform: scale(1.1);
}

.ig-lang-btn.active {
    background: var(--intoleris-primary);
    border-color: var(--intoleris-primary);
}

/* ============ HEADER ============ */
.ig-header {
    text-align: center;
    margin-bottom: 35px;
}

.ig-badge {
    display: inline-block;
    padding: 6px 20px;
    background: linear-gradient(135deg, var(--intoleris-primary), #3db8b0);
    color: var(--intoleris-dark);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 20px;
    margin-bottom: 15px;
}

.ig-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #4ECDC4 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    margin: 0 0 10px 0 !important;
    text-shadow: 0 0 20px rgba(212,175,55,0.5) !important;
}

.ig-subtitle {
    font-size: 1.1rem;
    color: var(--intoleris-text-muted);
    margin: 0;
}

/* ============ CRÉDITS ============ */
.ig-credits-bar {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 15px;
    background: rgba(212,175,55,0.1);
    border: 1px solid var(--intoleris-border);
    border-radius: 12px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    align-items: center;
}

.ig-credits-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ig-credits-icon {
    font-size: 1.2rem;
}

.ig-credits-label {
    color: var(--intoleris-text-muted);
    font-size: 0.9rem;
}

.ig-credits-value {
    color: var(--intoleris-primary);
    font-weight: 600;
}

.ig-btn-buy-credits {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: linear-gradient(135deg, var(--intoleris-primary), var(--intoleris-accent));
    color: var(--intoleris-dark) !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 20px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.ig-btn-buy-credits:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(212,175,55,0.4);
}

/* ============ STEPS INDICATOR ============ */
.ig-steps {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.ig-step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(212,175,55,0.3);
    transition: all 0.3s ease;
}

.ig-step-dot.active {
    background: var(--intoleris-primary);
    width: 40px;
    border-radius: 6px;
}

/* ============ FORMULAIRE ============ */
.ig-form-section {
    margin-bottom: 25px;
}

.ig-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--intoleris-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.ig-constraints-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.ig-constraint-btn {
    padding: 14px 15px;
    background: rgba(255,255,255,0.05);
    border: 2px solid var(--intoleris-border);
    border-radius: 12px;
    color: #ffffff !important;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.ig-constraint-btn:hover {
    background: rgba(212,175,55,0.15);
    border-color: var(--intoleris-primary);
    transform: translateY(-2px);
}

.ig-constraint-btn.active {
    background: var(--intoleris-primary);
    border-color: var(--intoleris-primary);
    color: #1a1a2e !important;
    font-weight: 600;
}

/* ============ INPUTS ============ */
.ig-input,
.ig-textarea,
.ig-select {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid var(--intoleris-border);
    border-radius: 10px;
    color: #ffffff !important;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ig-select {
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 40px;
}

.ig-input:focus,
.ig-textarea:focus,
.ig-select:focus {
    outline: none;
    border-color: var(--intoleris-primary);
    background: rgba(255,255,255,0.2) !important;
}

.ig-input::placeholder,
.ig-textarea::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

/* Fix pour les selects - améliorer la visibilité */
.ig-select option {
    background: #1a1a2e !important;
    color: #ffffff !important;
    padding: 10px;
}

.ig-select option:first-child {
    color: rgba(255,255,255,0.5) !important;
}

.ig-input,
.ig-textarea {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid var(--intoleris-border);
    border-radius: 10px;
    color: #ffffff !important;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
}

.ig-input:focus,
.ig-textarea:focus {
    outline: none;
    border-color: var(--intoleris-primary);
    background: rgba(255,255,255,0.15) !important;
}

.ig-input::placeholder,
.ig-textarea::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

.ig-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.ig-slider-container {
    margin-top: 12px;
}

.ig-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(212,175,55,0.3);
    outline: none;
    -webkit-appearance: none;
}

.ig-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--intoleris-primary);
    cursor: pointer;
}

.ig-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--intoleris-primary);
    cursor: pointer;
    border: none;
}

.ig-slider-value {
    text-align: center;
    color: var(--intoleris-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 8px;
}

/* ============ BOUTONS ============ */
.ig-btn {
    padding: 16px 36px;
    border: none;
    border-radius: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ig-btn-primary {
    background: linear-gradient(135deg, var(--intoleris-primary), var(--intoleris-accent));
    color: var(--intoleris-dark);
}

.ig-btn-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(212,175,55,0.4);
}

.ig-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ig-btn-secondary {
    background: rgba(255,255,255,0.1);
    color: var(--intoleris-text);
    border: 2px solid var(--intoleris-border);
}

.ig-btn-secondary:hover {
    background: rgba(212,175,55,0.2);
    border-color: var(--intoleris-primary);
}

.ig-btn-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 30px;
}

/* ============ RESULTATS ============ */
.ig-result {
    margin-top: 30px;
}

.ig-result-header {
    padding: 25px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 16px;
    margin-bottom: 25px;
}

.ig-result-name {
    font-family: 'Inter', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.ig-result-meta {
    display: flex;
    gap: 20px;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.95);
    font-weight: 600;
}

/* Boutons de partage */
.ig-btn-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ffffff;
}

.ig-btn-share:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.ig-btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.ig-btn-whatsapp:hover {
    box-shadow: 0 5px 20px rgba(37,211,102,0.4);
}

.ig-btn-telegram {
    background: linear-gradient(135deg, #0088cc, #006699);
}

.ig-btn-telegram:hover {
    box-shadow: 0 5px 20px rgba(0,136,204,0.4);
}

.ig-btn-pdf {
    background: linear-gradient(135deg, #dc143c, #a00f2a);
}

.ig-btn-pdf:hover {
    box-shadow: 0 5px 20px rgba(220,20,60,0.4);
}

.ig-btn-share svg {
    width: 20px;
    height: 20px;
}

.ig-alert {
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap; /* v7.10 - Permet wrap si contenu trop long */
    gap: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    animation: slideIn 0.3s ease-out;
    word-wrap: break-word; /* v7.10 - Coupe les mots longs */
    overflow-wrap: break-word; /* v7.10 - Fallback */
    max-width: 100%; /* v7.10 - Respect container */
}

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

.ig-alert-warning {
    background: linear-gradient(135deg, rgba(255,193,7,0.2), rgba(255,152,0,0.2));
    border: 2px solid #ffc107;
    color: #fff3cd;
}

.ig-alert-warning strong {
    color: #ffc107;
    font-weight: 700;
}

.ig-alert-success {
    background: linear-gradient(135deg, rgba(40,167,69,0.2), rgba(76,175,80,0.2));
    border: 2px solid #28a745;
    color: #d4edda;
}

.ig-alert-success strong {
    color: #28a745;
    font-weight: 700;
}

.ig-section {
    padding: 25px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--intoleris-border);
    border-radius: 16px;
    margin-bottom: 20px;
}

.ig-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.3rem;
    color: var(--intoleris-primary);
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ig-ingredient-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(212,175,55,0.2);
}

.ig-ingredient-item:last-child {
    border-bottom: none;
}

.ig-ingredient-name {
    color: var(--intoleris-text);
}

.ig-ingredient-qty {
    color: var(--intoleris-primary);
    font-weight: 600;
}

.ig-step {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    padding: 15px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
}

.ig-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--intoleris-primary);
    color: var(--intoleris-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
}

.ig-step-text {
    flex: 1;
    line-height: 1.6;
}

.ig-nutrition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
}

.ig-nutrition-item {
    text-align: center;
    padding: 15px;
    background: rgba(212,175,55,0.1);
    border-radius: 12px;
}

.ig-nutrition-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--intoleris-primary);
    margin-bottom: 5px;
}

.ig-nutrition-label {
    font-size: 0.85rem;
    color: var(--intoleris-text-muted);
    text-transform: capitalize;
}

.ig-loading {
    text-align: center;
    padding: 40px;
}

.ig-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(212,175,55,0.3);
    border-top-color: var(--intoleris-primary);
    border-radius: 50%;
    animation: ig-spin 1s linear infinite;
    margin: 0 auto 15px;
}

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

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
    .ig-wrapper {
        padding: 25px 15px;
    }
    
    .ig-title {
        font-size: 1.6rem !important;
    }
    
    .ig-constraints-grid {
        grid-template-columns: 1fr;
    }
    
    .ig-btn-actions {
        flex-direction: column;
    }
    
    .ig-credits-bar {
        flex-direction: column;
        gap: 15px;
    }
}


/* ═══════════════════════════════════════════════════════════
   INTOLERIS — Bloc Alternatives Recette v1.0
   ═══════════════════════════════════════════════════════════ */
.ng-alts-block {
    margin:        24px 0;
    border-radius: 16px;
    border:        1px solid rgba(45,212,191,.25);
    background:    rgba(13,28,40,.6);
    overflow:      hidden;
}
.ng-alts-header {
    display:      flex;
    align-items:  center;
    gap:          10px;
    padding:      14px 20px 12px;
    border-bottom: 1px solid rgba(45,212,191,.12);
    background:   rgba(45,212,191,.06);
}
.ng-alts-icon  { font-size: 1.2rem; }
.ng-alts-title {
    font-weight:    700;
    font-size:      0.95rem;
    color:          #2dd4bf;
    letter-spacing: .02em;
}
.ng-alts-body {
    padding:        4px 0;
}
/* Bloc par intolérance */
.ng-alts-intol {
    padding:        14px 20px;
    border-bottom:  1px solid rgba(255,255,255,.05);
}
.ng-alts-intol:last-child { border-bottom: none; }

.ng-alts-intol-label {
    font-size:      0.72rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          #64748b;
    margin-bottom:  8px;
}
/* Substitut individuel */
.ng-alts-sub {
    margin-bottom: 8px;
    padding-left:  8px;
}
.ng-alts-from {
    font-size:   0.88rem;
    color:       #cbd5e1;
    line-height: 1.4;
    margin-bottom: 2px;
}
.ng-alts-from em {
    color:       #94a3b8;
    font-style:  normal;
    text-decoration: line-through;
    text-decoration-color: rgba(239,68,68,.5);
}
.ng-alts-to {
    color:       #4ade80;
    font-weight: 700;
}
.ng-alts-why {
    font-size:   0.76rem;
    color:       #475569;
    line-height: 1.5;
    padding-left: 14px;
}
/* Conseil de profil */
.ng-alts-tip {
    margin-top:   8px;
    font-size:    0.78rem;
    color:        #64748b;
    background:   rgba(45,212,191,.04);
    border-left:  2px solid rgba(45,212,191,.2);
    padding:      6px 10px;
    border-radius: 0 6px 6px 0;
    line-height:  1.5;
}
/* Note de bas */
.ng-alts-note {
    font-size:   0.7rem;
    color:       rgba(255,255,255,.18);
    padding:     8px 20px 12px;
    margin:      0;
    border-top:  1px solid rgba(255,255,255,.04);
    line-height: 1.5;
}

/* ── Validation ingrédients avec alternatives inline ── */
.ng-validation-block {
    margin-top:    12px;
    border-radius: 10px;
    border:        1px solid rgba(251,191,36,.35);
    background:    rgba(120,80,0,.15);
    overflow:      hidden;
}
.ng-val-header {
    padding:      10px 14px 8px;
    font-size:    0.88rem;
    color:        #fbbf24;
    border-bottom: 1px solid rgba(251,191,36,.15);
}
.ng-val-items { padding: 4px 0; }
.ng-val-item {
    padding:       8px 14px;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.ng-val-item:last-child { border-bottom: none; }
.ng-val-forbidden {
    font-size:  0.88rem;
    color:      #f87171;
    margin-bottom: 4px;
}
.ng-val-intol {
    font-size:  0.78rem;
    color:      #94a3b8;
    font-weight: 400;
}
.ng-val-alt {
    font-size:  0.82rem;
    color:      #94a3b8;
    padding-left: 18px;
}
.ng-val-alt-name {
    color:      #4ade80;
    font-weight: 700;
}
.ng-val-alt-why {
    font-size:  0.76rem;
    color:      #475569;
    font-style: italic;
}


/* v13 profile readability fix */
.ig-profile-modal, .ig-profile-modal *,
#ig-save-profile-modal, #ig-save-profile-modal * {
    color: #eaf2ff !important;
}
.ig-profile-modal select,
.ig-profile-modal option,
#ig-save-profile-modal select,
#ig-save-profile-modal option,
select.ig-profile-select,
select[name*="profile"],
option {
    color: #0f172a !important;
    background: #ffffff !important;
}
.ig-profile-card,
.ig-profile-item,
.ig-profile-choice,
.profile-card,
.profile-item,
.profile-choice {
    color: #eaf2ff !important;
    background: rgba(15,23,42,.96) !important;
}
.ig-profile-card strong,
.ig-profile-item strong,
.ig-profile-choice strong,
.profile-card strong,
.profile-item strong,
.profile-choice strong {
    color: #ffffff !important;
}
.ig-profile-card small,
.ig-profile-item small,
.ig-profile-choice small,
.profile-card small,
.profile-item small,
.profile-choice small {
    color: #b8c7dc !important;
}



/* v14 profile modal readability fix */
#ig-save-profile-modal,
#ig-save-profile-modal *,
.ig-profile-modal,
.ig-profile-modal *,
.ig-profile-selector,
.ig-profile-selector *,
[class*="save-profile"],
[class*="profile-choice"],
[class*="profile-card"] {
    color: #eaf2ff !important;
}

#ig-save-profile-modal {
    background: rgba(8, 13, 18, .72) !important;
}

#ig-save-profile-modal .ig-modal,
#ig-save-profile-modal .ig-modal-content,
#ig-save-profile-modal [class*="modal-content"],
.ig-profile-modal .ig-modal,
.ig-profile-modal .ig-modal-content,
.ig-profile-card,
.ig-profile-choice,
.profile-card,
.profile-choice {
    background: #0d1520 !important;
    color: #eaf2ff !important;
    border: 1px solid #1e293b !important;
}

#ig-save-profile-modal strong,
#ig-save-profile-modal b,
#ig-save-profile-modal label,
#ig-save-profile-modal h1,
#ig-save-profile-modal h2,
#ig-save-profile-modal h3,
.ig-profile-card strong,
.ig-profile-choice strong,
.profile-card strong,
.profile-choice strong {
    color: #ffffff !important;
}

#ig-save-profile-modal small,
#ig-save-profile-modal .muted,
#ig-save-profile-modal .description,
.ig-profile-card small,
.ig-profile-choice small,
.profile-card small,
.profile-choice small {
    color: #b8c7dc !important;
}

#ig-save-profile-modal select,
#ig-save-profile-modal option,
#ig-save-profile-modal input,
#ig-save-profile-modal textarea,
.ig-profile-modal select,
.ig-profile-modal option,
.ig-profile-modal input,
.ig-profile-modal textarea,
select[name*="profile"],
select[id*="profile"],
option {
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

#ig-save-profile-modal button,
.ig-profile-modal button {
    color: #ffffff !important;
}