/************************************
 * /var/www/Cezam/src/public/assets/css/app.css
 ************************************/

/* ═════════════════════════════════════════════════════════════════
 * VARIABLES — Couleurs Cezam
 * ═════════════════════════════════════════════════════════════════ */
:root {
    --cezam-red:          #e0023f;
    --cezam-red-dark:     #b00234;
    --cezam-yellow:       #fbba00;
    --cezam-orange:       #FFA500;
    --cezam-orange-text:  #FF6A13;
}


/* ═════════════════════════════════════════════════════════════════
 * BODY — fond jaune, sans marges
 * ═════════════════════════════════════════════════════════════════ */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    background-color: var(--cezam-yellow);
}

body.bg-white {
    background-color: white;
}


/* ═════════════════════════════════════════════════════════════════
 * CONTAINER CENTRAL BLANC — du haut en bas, pleine hauteur
 * ═════════════════════════════════════════════════════════════════ */

/* On écrase les paddings/margins Bootstrap du container parent */
.container,
.container-fluid {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* La row qui contient la colonne blanche */
.container > .row,
.container-fluid > .row {
    margin: 0 !important;
}

/* La colonne blanche */
.container > .row > [class*="col-"],
.container-fluid > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Container blanc pleine hauteur sans coins arrondis */
.cezam-white-container {
    background: white;
    border-radius: 0;
    padding: 2rem;
    margin: 0;
    min-height: 100vh;
    width: 100%;
}


/* ═════════════════════════════════════════════════════════════════
 * ÉLÉMENTS VISUELS CEZAM
 * ═════════════════════════════════════════════════════════════════ */

/* Titre h3 rouge du formulaire */
.cezam-form h3 {
    color: var(--cezam-red);
    font-weight: bold;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

/* Barre titre rouge pleine largeur */
.cezam-bar-red {
    background: var(--cezam-red);
    color: white;
    padding: 0.5rem 1rem;
    text-align: center;
    font-weight: bold;
    margin-bottom: 1rem;
}

/* Texte couleur Cezam */
.text-cezam {
    color: var(--cezam-red) !important;
}

/* Fond couleur Cezam */
.bg-cezam {
    background-color: var(--cezam-red) !important;
}


/* ═════════════════════════════════════════════════════════════════
 * BOUTONS
 * ═════════════════════════════════════════════════════════════════ */
.btn-cezam,
.btn-cezam-red {
    background: var(--cezam-red);
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
}
.btn-cezam:hover,
.btn-cezam-red:hover {
    background: var(--cezam-red-dark);
    color: white;
}


/* ═════════════════════════════════════════════════════════════════
 * ENCADRÉ ORANGE
 * ═════════════════════════════════════════════════════════════════ */
.cezam-box-orange {
    border: 2px solid var(--cezam-orange);
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.25rem;
}

.cezam-box-orange-title {
    color: var(--cezam-red);
    font-size: 1.2rem;
    font-weight: bold;
}

.cezam-box-orange-title .orange-text {
    color: var(--cezam-orange-text);
    font-weight: normal;
}


/* ═════════════════════════════════════════════════════════════════
 * AIDES
 * ═════════════════════════════════════════════════════════════════ */
.cezam-help {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    margin-bottom: 1rem;
}


/* ═════════════════════════════════════════════════════════════════
 * NAVBAR
 * ═════════════════════════════════════════════════════════════════ */
.navbar-cezam {
    background-color: var(--cezam-red) !important;
}

.navbar-cezam .navbar-brand,
.navbar-cezam .nav-link {
    color: white !important;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* ═════════════════════════════════════════════════════════════════
 * CARD CEZAM
 * ═════════════════════════════════════════════════════════════════ */
.card-cezam-header {
    background: var(--cezam-red);
    color: white;
}


/* ═════════════════════════════════════════════════════════════════
 * TABLEAU DES CHOIX D'AVANTAGES
 * 1 ligne d'entête rouge + 1 ligne avec 3 colonnes
 * ═════════════════════════════════════════════════════════════════ */
.cezam-choix-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--cezam-red);
    table-layout: fixed;
    margin-bottom: 1.5rem;
}

/* Cellule d'entête rouge pleine largeur */
.cezam-choix-table .cezam-choix-header td {
    background: var(--cezam-red) !important;
    background-color: var(--cezam-red) !important;
    color: white !important;
    font-weight: bold;
    text-align: center;
    padding: 0.15rem 1rem !important;
    line-height: 1.2 !important;
    height: auto !important;
    border: 1px solid var(--cezam-red);
}

/* Les 3 cellules de choix */
.cezam-choix-table td {
    border: 1px solid var(--cezam-red);
    padding: 1rem;
    text-align: center;
    vertical-align: middle;
    width: 33.33%;
    height: 80px;
}

.cezam-choix-table td > * {
    vertical-align: middle;
}


/* ═════════════════════════════════════════════════════════════════
 * FOOTER (collé en bas, au-dessus du container blanc)
 * ═════════════════════════════════════════════════════════════════ */
footer {
    background: var(--cezam-red);
    color: white;
    padding: 0.75rem 0;
    text-align: center;
    font-size: 0.9rem;
    position: relative;
    z-index: 10;
}

footer a {
    color: white;
    text-decoration: underline;
}

/* ═════════════════════════════════════════════════════════════════
 * TABLEAU PACK COMMUNICATION
 * ═════════════════════════════════════════════════════════════════ */
.cezam-pack-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--cezam-red);
}

.cezam-pack-table thead th {
    background: var(--cezam-red) !important;
    color: white !important;
    font-weight: bold;
    text-align: left;
    padding: 0.5rem 1rem;
    border: 1px solid var(--cezam-red);
}

.cezam-pack-table tbody td {
    border: 1px solid var(--cezam-red);
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.cezam-pack-table tbody tr:hover {
    background-color: #fff8f8;
}

/* ═════════════════════════════════════════════════════════════════
 * TABLEAU OPTIONS COMPLÉMENTAIRES
 * Style repris de renouvellementOptionRetour.php
 * ═════════════════════════════════════════════════════════════════ */
.cezam-options-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--cezam-red);
}

/* Entête rouge */
.cezam-options-table thead th {
    background: var(--cezam-red) !important;
    color: white !important;
    font-weight: bold;
    text-align: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--cezam-red);
}

/* Lignes de sous-catégorie (fond rouge clair + texte rouge) */
.cezam-options-table .category-row td {
    background: #fff0f3 !important;
    color: var(--cezam-red) !important;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border: 1px solid var(--cezam-red);
}

/* Cellules standard des options */
.cezam-options-table tbody td {
    border: 1px solid var(--cezam-red);
    padding: 0.75rem;
    vertical-align: middle;
}

/* Cellule nom de l'option (alignée centre verticalement) */
.cezam-options-table .option-name {
    text-align: center;
    vertical-align: middle;
    width: 180px;
}

/* Ligne en surbrillance quand option cochée */
.cezam-options-table .option-row-selected {
    background-color: #fff8f8;
}

.cezam-options-table .option-row-selected .option-name {
    color: var(--cezam-red);
}

/* ═════════════════════════════════════════════════════════════════
 * Partie centrale : largeur minimum 500px
 * Ascenseur horizontal si l'écran est plus étroit
 * ═════════════════════════════════════════════════════════════════ */
.cezam-white-container {
    min-width: 900px;
}

body {
    overflow-x: auto;
}

/* Navbar et footer suivent le scroll horizontal comme le reste */
.navbar-cezam,
nav.navbar,
footer {
    min-width: 950px;
}

/* Force la largeur minimum de la table options pour que les cellules ne débordent pas */
.cezam-options-table {
    min-width: 800px;
}

/* ═════════════════════════════════════════════════════════════════
 * Impression : chaque bloc enseigne reste entier sur une seule page
 * ═════════════════════════════════════════════════════════════════ */
.shop-block {
    page-break-inside: avoid;
    break-inside: avoid;
}

/* ═════════════════════════════════════════════════════════════════
 * Impression : "Présenter votre activité en 3 mots-clés" 
 * commence toujours en haut de la page suivante
 * ═════════════════════════════════════════════════════════════════ */
@media print {
    .print-page-break {
        page-break-before: always;
        break-before: page;
    }
}

/* ═════════════════════════════════════════════════════════════════
 * Impression : masquer les éléments non pertinents
 * ═════════════════════════════════════════════════════════════════ */
@media print {
    /* Forcer une largeur minimum et text-overflow visible à l'impression */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"] {
        min-width: 100px !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 10pt !important;
    }
    
    /* Forcer l'affichage cochée des checkboxes */
    input[type="checkbox"] {
        -webkit-appearance: checkbox !important;
        -moz-appearance: checkbox !important;
        appearance: checkbox !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
}