/* Charte graphique Catlante — design tokens reproduits depuis app.catlante-catamarans.
 * Polices officielles (license commerciale dans CharteGraphique/.../eula.pdf) + palette charte.
 */

/* ---- Polices Montserrat (corps de texte) ---- */
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- Polices SangBleu Sunrise (titres) ---- */
@font-face {
    font-family: 'SangBleu Sunrise';
    src: url('/fonts/SangBleuSunrise-Light.otf') format('opentype');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'SangBleu Sunrise';
    src: url('/fonts/SangBleuSunrise-Medium.otf') format('opentype');
    font-weight: 500; font-style: normal; font-display: swap;
}

/* ============================================================================
 * DESIGN TOKENS — issus de l'audit de app.catlante-catamarans (Vue 3 + Metronic)
 * ============================================================================ */
:root {
    /* ----- Couleurs primaires Catlante ----- */
    --catlante-bleu:        #003849;   /* bleu nuit primaire (sidebar, titres détail) */
    --catlante-bleu-moyen:  #2e7d8f;   /* turquoise (titres de page, accent secondaire) */
    --catlante-orange:      #EE6E47;   /* orange accent — aligné PDF Design sans titre.pdf */
    --catlante-orange-hover:#D85B36;   /* hover aligné PDF */
    --catlante-creme:       #fff9ef;   /* crème (table headers, fonds doux) */

    /* ----- Backgrounds ----- */
    --bg-page:      #F0F2FB;           /* fond général de l'app (espace contenu) */
    --bg-card:      #ffffff;
    --bg-sidebar:   #003849;
    --bg-section:   #f9f9f9;

    /* ----- Échelle de gris (Bootstrap-like) ----- */
    --gray-100: #f9f9f9;
    --gray-200: #f1f1f4;
    --gray-300: #dbdfe9;
    --gray-400: #c4cada;
    --gray-500: #99a1b7;
    --gray-600: #78829d;
    --gray-700: #4b5675;
    --gray-800: #252f4a;
    --gray-900: #071437;

    /* ----- Texte ----- */
    --text-primary:   #003849;
    --text-secondary: #2e7d8f;
    --text-body:      #4b5675;
    --text-muted:     #99a1b7;
    --text-label:     #99a1b7;
    --text-white:     #ffffff;

    /* ----- Bordures ----- */
    --catlante-border: rgba(0, 56, 73, 0.2);
    --border-color:    #f1f1f4;
    --border-color-input: #dcdfe6;

    /* ----- États ----- */
    --success:     #17c653;
    --success-bg:  #dfffea;
    --warning:     #f6c000;
    --warning-bg:  #fff8dd;
    --danger:      #f8285a;
    --danger-bg:   #ffeef3;
    --catlante-danger-bg: #f8d7da;
    --catlante-danger-fg: #721c24;
    --catlante-success-bg: #d4edda;
    --catlante-success-fg: #155724;
    --info:        #7239ea;

    /* ----- Typographie ----- */
    --font-heading: 'SangBleu Sunrise', Georgia, serif;
    --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;
    --font-base:    13px;
    --h1-size:      26px;
    --h2-size:      20px;
    --h3-size:      18px;
    --label-size:   14px;
    --body-size:    14px;
    --small-size:   12px;

    /* ----- Spacing ----- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-base: 16px;
    --space-lg: 22px;
    --space-xl: 30px;

    /* ----- Radius ----- */
    --radius-sm:    4px;
    --radius-base:  6px;
    --radius-md:    10px;
    --radius-card:  10px;
    --radius-input: 10px;
    --radius-pill:  999px;

    /* ----- Layout ----- */
    --header-height:        74px;
    --sidebar-width:        260px;
    --card-shadow:          0 1px 3px rgba(0,0,0,0.04);
    --card-shadow-hover:    0 4px 12px rgba(0,0,0,0.08);
}

/* ============================================================================
 * CLASSES UTILITAIRES — réutilisables dans toutes les pages Blade
 * ============================================================================ */

/* Polices */
.font-sangbleu   { font-family: var(--font-heading); }
.font-montserrat { font-family: var(--font-body); }

/* Couleurs texte */
.text-catlante-bleu       { color: var(--catlante-bleu); }
.text-catlante-bleu-moyen { color: var(--catlante-bleu-moyen); }
.text-catlante-orange     { color: var(--catlante-orange); }
.text-muted               { color: var(--text-muted); }

/* Titres de page (style ancienne app) */
.page-title {
    font-family: var(--font-heading);
    font-size: var(--h1-size);
    font-weight: 500;
    color: var(--catlante-bleu-moyen);
    margin: 16px 0 24px;
    line-height: 1.15;
}

/* Sections de card */
.card-block {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    padding: 24px 28px;
    margin-bottom: 18px;
}
.card-block-head {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 16px; margin-bottom: 16px;
    border-bottom: 1px solid #eef0f2;
}
.card-block-head h2 {
    font-family: var(--font-heading);
    font-size: var(--h2-size);
    font-weight: 500;
    color: var(--catlante-bleu);
    margin: 0;
}

/* Labels / valeurs de détail (info-rows) */
.info-row {
    display: grid; grid-template-columns: 220px 1fr; gap: 16px;
    padding: 14px 0; align-items: center;
}
.info-row + .info-row { border-top: 1px solid #f5f6f8; }
@media (max-width: 640px) { .info-row { grid-template-columns: 1fr; gap: 4px; } }

.title-info {
    font-family: var(--font-body);
    font-size: var(--label-size);
    font-weight: 600;
    color: var(--text-muted);
}
.contenu-info {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--catlante-bleu);
}
.contenu-info.missing {
    color: var(--catlante-orange);
    display: inline-flex; align-items: center; gap: 8px;
}
.contenu-info .badge-warn {
    background: var(--catlante-orange); color: #fff;
    font-size: 11px; padding: 2px 8px; border-radius: 10px;
    font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}

/* Boutons (style ancienne app) */
.btn {
    padding: 0.775rem 1rem; border-radius: var(--radius-md);
    font-family: var(--font-body); font-weight: 600; font-size: var(--font-base);
    cursor: pointer; border: 0; transition: all .15s; line-height: 1.2;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--catlante-bleu);
    color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--catlante-bleu-moyen); }

.btn-orange {
    background: var(--catlante-orange);
    color: #fff;
}
.btn-orange:hover:not(:disabled) { background: var(--catlante-orange-hover); }

.btn-secondary {
    background: #fff; color: var(--catlante-bleu);
    border: 1px solid #e0e4e7;
}
.btn-secondary:hover:not(:disabled) { background: #f5f6f8; }

.btn-back {
    background: #f3f3f3; color: var(--catlante-bleu);
    padding: 12px 20px; border-radius: var(--radius-md);
}
.btn-back:hover { background: #e8e8e8; }

.btn-sm { padding: 0.55rem 0.75rem; font-size: 12px; }
.btn-lg { padding: 0.825rem 1.5rem; }

/* Champs de formulaire */
.field { margin-bottom: 18px; }
.field label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--catlante-bleu); margin-bottom: 6px;
}
.field label .req { color: var(--catlante-orange); }
.field input, .field select, .field textarea {
    width: 100%; padding: 11px 14px;
    border: 1px solid #e0e4e7; border-radius: var(--radius-input);
    background: #fff; font-family: var(--font-body); font-size: var(--body-size);
    color: var(--catlante-bleu); outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--catlante-bleu-moyen);
    box-shadow: 0 0 0 3px rgba(46,125,143,0.15);
}
.field input[disabled] { background: #f5f6f8; color: var(--text-muted); cursor: not-allowed; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* Alertes / flash */
.alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px;
         font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.alert-success { background: var(--catlante-success-bg); color: var(--catlante-success-fg); border-left: 4px solid var(--success); }
.alert-warning { background: #fff3cd; color: #856404; border-left: 4px solid var(--warning); }
.alert-danger  { background: var(--catlante-danger-bg); color: var(--catlante-danger-fg); border-left: 4px solid var(--danger); }
.alert-info    { background: #d1ecf1; color: #0c5460; border-left: 4px solid #17a2b8; }
.alert b { display: block; margin-bottom: 2px; }
.alert-expired {
    background: #fff3cd; color: #856404; border-left: 4px solid #ffc107;
}
.alert-expired strong { display: block; margin-bottom: 4px; }
.alert-danger strong { display: block; margin-bottom: 4px; }
.alert-success strong { display: block; margin-bottom: 4px; }

/* Bandeau "incomplete" (style capture profil) */
.alert-incomplete {
    display: flex; gap: 14px; align-items: flex-start;
    background: #fff; border-radius: var(--radius-card); padding: 18px 22px;
    box-shadow: var(--card-shadow); margin-bottom: 20px;
    font-size: 14px; color: var(--catlante-bleu); line-height: 1.6;
}
.alert-incomplete .ico {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border: 2px solid var(--catlante-bleu); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: var(--catlante-bleu);
}
.alert-incomplete a {
    color: var(--catlante-orange); font-weight: 600;
    text-decoration: underline; cursor: pointer;
}

/* Badges de statut */
.badge {
    display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill);
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase;
}
.badge-success { background: var(--success-bg); color: #155724; }
.badge-warning { background: #fff3cd; color: #856404; }
.badge-danger  { background: var(--danger-bg); color: #721c24; }

/* ===== Contact CATLANTE — bouton + popover tel/sms =====
   Partagé entre home.blade.php (carte croisière à venir) et
   croisiere.blade.php (détail). Le wrapper porte x-data="{ open: false }". */
.contact-catlante { position: relative; }
.contact-catlante__btn {
    background: none; border: 0; padding: 0; margin: 0;
    color: inherit; font: inherit; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none;
}
.contact-catlante__btn i { color: var(--accent-primary, #EE6E47); font-size: 14px; }
.contact-catlante__btn:hover b { color: var(--accent-primary, #EE6E47); }
.contact-catlante__btn:focus-visible {
    outline: 2px solid var(--accent-primary, #EE6E47); outline-offset: 3px; border-radius: 4px;
}
.contact-catlante__pop {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
    min-width: 240px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 14px; display: flex; flex-direction: column; gap: 6px;
}
.contact-catlante__pop-head {
    display: flex; flex-direction: column; gap: 2px;
    padding-bottom: 10px; margin-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.contact-catlante__pop-head strong { font-size: 14px; color: var(--primary, #003849); }
.contact-catlante__pop-head span { font-size: 12px; color: var(--accent-secondary, #5DB7C7); }
.contact-catlante__act {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    text-decoration: none; font-size: 14px; font-weight: 600;
    color: var(--primary, #003849); background: #F4F6F8;
    transition: background-color .15s, color .15s;
}
.contact-catlante__act:hover { background: #E6ECF0; }
.contact-catlante__act--primary { background: var(--accent-primary, #EE6E47); color: #fff; }
.contact-catlante__act--primary:hover { background: #D85B36; color: #fff; }
.contact-catlante__act i { font-size: 16px; }

/* ===== Sélecteur de dossier (chips) =====
   Utilisé sur /paiements et / (home) quand le client a plusieurs croisières
   à venir : permet de basculer entre les dossiers. */
.dossier-picker {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin: 0 0 18px;
}
.dossier-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px;
    background: #fff; border: 1px solid #eef0f2;
    cursor: pointer; text-align: left;
    transition: transform .15s, box-shadow .15s;
}
.dossier-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.dossier-chip.active {
    background: var(--catlante-orange, #EE6E47);
    border-color: var(--catlante-orange, #EE6E47); color: #fff;
    box-shadow: 0 6px 18px rgba(238, 110, 71, 0.3);
}
.dossier-chip .dest { font-weight: 700; font-size: 13px; color: var(--catlante-bleu, #003849); }
.dossier-chip.active .dest { color: #fff; }
.dossier-chip .meta { font-size: 11px; color: var(--text-muted, #8a99a3); margin-top: 2px; }
.dossier-chip.active .meta { color: rgba(255, 255, 255, 0.85); }
.dossier-chip i { font-size: 18px; color: var(--catlante-bleu-moyen, #2e7d8f); }
.dossier-chip.active i { color: #fff; }

/* ===== Bloc coordonnées passager (téléphone + email) =====
   Utilisé dans la card de chaque passager sur l'onglet « Passagers » de la
   fiche croisière. Mode lecture par défaut, formulaire à l'écran d'édition. */
.pax-contact {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px dashed #eef0f2;
}
.pax-contact__head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.pax-contact__label {
    font-size: 10px; letter-spacing: 1px;
    text-transform: uppercase; color: #8a99a3; font-weight: 700;
}
.pax-contact__edit {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(238, 110, 71, 0.12);
    border: 0; border-radius: 6px;
    padding: 3px 8px; cursor: pointer;
    color: var(--catlante-orange, #EE6E47); font-weight: 700; font-size: 11px;
}
.pax-contact__edit:hover { background: rgba(238, 110, 71, 0.18); }
.pax-contact__edit i { font-size: 13px; }
.pax-contact__values { display: flex; flex-direction: column; gap: 4px; }
.pax-contact__row {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--catlante-bleu, #003849);
}
.pax-contact__row i { color: var(--catlante-bleu-moyen, #2e7d8f); font-size: 14px; }
.pax-contact__empty {
    font-size: 12px; color: #8a99a3; font-style: italic;
}
.pax-contact__form { display: flex; flex-direction: column; gap: 4px; }
.pax-contact__flabel {
    font-size: 11px; color: #8a99a3; margin-top: 4px;
}
.pax-contact__input {
    padding: 8px 10px; border-radius: 6px;
    border: 1px solid #eef0f2; background: #fafbfc;
    font-size: 13px; color: var(--catlante-bleu, #003849);
    font-family: inherit;
}
.pax-contact__input:focus {
    outline: none; border-color: var(--catlante-orange, #EE6E47);
    background: #fff;
}
.pax-contact__actions {
    display: flex; gap: 8px; margin-top: 8px;
}
.pax-contact__btn {
    flex: 1; padding: 8px 12px; border-radius: 6px;
    font-weight: 700; font-size: 13px; cursor: pointer;
    border: 0;
}
.pax-contact__btn--cancel {
    background: #f4f6f8; color: #6b7c87;
}
.pax-contact__btn--cancel:hover { background: #e6ecf0; }
.pax-contact__btn--save {
    background: var(--catlante-orange, #EE6E47); color: #fff;
}
.pax-contact__btn--save:hover { background: #d85b36; }
.pax-contact__btn:disabled { opacity: 0.6; cursor: wait; }
.badge-orange  { background: var(--catlante-orange); color: #fff;
                 box-shadow: 0 0 0 3px rgba(238, 110, 71,0.2);
                 animation: pulse-badge 1.6s ease-in-out infinite; }
.badge-info    { background: #d1ecf1; color: #0c5460; }
.badge-muted   { background: #eef0f2; color: #666; }
@keyframes pulse-badge {
    0%,100% { box-shadow: 0 0 0 3px rgba(238, 110, 71,0.2); }
    50%     { box-shadow: 0 0 0 6px rgba(238, 110, 71,0.05); }
}

/* Tableaux (style ancien thead crème + Sangbleu) */
table.app-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: #fff; border-radius: var(--radius-md); overflow: hidden;
    box-shadow: var(--card-shadow);
}
table.app-table thead { background: var(--catlante-creme); }
table.app-table thead th {
    font-family: var(--font-heading);
    color: #09244b; font-weight: 500; font-size: 14px;
    padding: 14px 18px; text-align: left;
}
table.app-table tbody td {
    font-family: var(--font-body);
    color: #09244b; font-weight: 600; font-size: 13px;
    padding: 14px 18px;
    border-top: 2px solid #f0f2fb;
}

/* Lignes (alternance subtile) */
table.app-table tbody tr:hover td { background: rgba(46,125,143,0.05); }