/* ============================================================
   UTILITIES.CSS — Classes utilitaires CAPVO
   Remplace les attributs style="..." inline répétitifs.
============================================================ */

/* ============================================================
   ALIGNEMENT
============================================================ */
.u-text-center { text-align: center !important; }
/* ============================================================
   POIDS / STYLE TEXTE
============================================================ */
.u-bold     { font-weight: bold !important; }
.u-italic   { font-style: italic !important; }
.u-no-wrap  { white-space: nowrap !important; }

/* ============================================================
   TAILLES TEXTE
============================================================ */
.u-fs-12   { font-size: 12px !important; }
.u-fs-13   { font-size: 13px !important; }
.u-fs-09em  { font-size: 0.9em !important; }
.u-fs-11em  { font-size: 1.1em !important; }

/* ============================================================
   COULEURS TEXTE
============================================================ */
.u-color-muted   { color: #777 !important; }
.u-color-dim     { color: #555 !important; }
.u-color-error   { color: #a00 !important; }
.u-color-danger  { color: #cc0000 !important; }
.u-color-success { color: #006600 !important; }
.u-color-info    { color: #0077cc !important; }
.u-color-warning { color: #cc8800 !important; }
.u-color-green   { color: #009900 !important; }
.u-color-orange  { color: #d17b00 !important; }
.u-color-red     { color: red !important; }
.u-color-666     { color: #666 !important; }
.u-color-aaa     { color: #aaa !important; }
.u-color-c62828  { color: #c62828 !important; }
.u-color-2e7d32  { color: #2e7d32 !important; }
/* ============================================================
   COULEURS FOND (alerte / message)
============================================================ */
.u-bg-success { background: #d9ffd9 !important; color: #006600 !important; }
.u-bg-error   { background: #ffd9d9 !important; color: #990000 !important; }
.u-bg-info    { background: #e8f6ff !important; color: #0077cc !important; }
.u-bg-warning { background: #fff4d6 !important; color: #cc8800 !important; }
.u-bg-light   { background: #f8f8f8 !important; }
.u-bg-soft    { background: #ffe5e5 !important; color: #a00 !important; }
.u-bg-active  { background: #e8f6ff !important; }

/* ============================================================
   MARGES
============================================================ */
.u-m-0  { margin: 0 !important; }
.u-mt-3  { margin-top: 3px !important; }
.u-mt-4  { margin-top: 4px !important; }
.u-mt-5  { margin-top: 5px !important; }
.u-mt-8  { margin-top: 8px !important; }
.u-mt-10 { margin-top: 10px !important; }
.u-mt-15 { margin-top: 15px !important; }
.u-mt-20 { margin-top: 20px !important; }
.u-mt-25 { margin-top: 25px !important; }

.u-mb-5  { margin-bottom: 5px !important; }
.u-mb-10 { margin-bottom: 10px !important; }
.u-mb-15 { margin-bottom: 15px !important; }
.u-mb-20 { margin-bottom: 20px !important; }
.u-mb-25 { margin-bottom: 25px !important; }

.u-mr-10 { margin-right: 10px !important; }
.u-mr-20 { margin-right: 20px !important; }
.u-ml-10 { margin-left: 10px !important; }

.u-m-0-0-4-0 { margin: 0 0 4px 0 !important; }
.u-m-8-0     { margin: 8px 0 !important; }
.u-m-5-0     { margin: 5px 0 !important; }
/* ============================================================
   PADDINGS
============================================================ */
.u-p-0       { padding: 0 !important; }
.u-p-10      { padding: 10px !important; }
.u-py-6-10   { padding: 6px 10px !important; }
.u-p-4-8     { padding: 4px 8px !important; }
.u-py-6-0    { padding: 6px 0 !important; }
.u-p-20      { padding: 20px !important; }
.u-p-6       { padding: 6px !important; }

.u-bg-gray-aaa { background: #aaa !important; }
.u-bg-gray-888 { background: #888 !important; }
.u-bg-red-c00  { background: #c00 !important; }
.u-bg-green    { background: #2e7d32 !important; }

.u-clear-both    { clear: both !important; }
.u-no-decoration { text-decoration: none !important; }
.u-color-444     { color: #444 !important; }

.u-m-10-0 { margin: 10px 0 !important; }

.u-input-readonly {
    background: #f0f0f0 !important;
    color: #555 !important;
    cursor: not-allowed !important;
}

.thumb-preview-200 {
    max-width: 200px;
    max-height: 200px;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 6px;
}
.thumb-galerie-150 {
    width: 150px;
    height: auto;
    max-height: 150px;
    object-fit: contain;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.u-flex-row-gap20-mt10 {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

/* --- Compléments passe 3 --- */
.u-mt-30      { margin-top: 30px !important; }
.u-mt-neg10   { margin-top: -10px !important; }
.u-fs-18      { font-size: 18px !important; }
.u-fs-08em    { font-size: 0.8em !important; }
.u-fs-12em    { font-size: 1.2em !important; }
.u-w-20ch     { width: 20ch !important; max-width: 100% !important; }

.u-m-4-0-0-0     { margin: 4px 0 0 0 !important; }
.u-m-10-0-20-0   { margin: 10px 0 20px 0 !important; }

.u-border-bottom-ddd { border-bottom: 1px solid #ddd !important; }

.u-inline-flex-center {
    display: inline-flex;
    align-items: center;
}
.u-flex-gap-20-my-20 {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

.u-hr-soft {
    margin: 30px 0;
    border: 0;
    border-top: 2px solid #aaa;
}

.u-alert-orange {
    margin: 10px 0;
    padding: 10px;
    background: #fff3cd;
    border-left: 5px solid #ff9800;
    color: #856404;
}
.u-alert-info {
    margin: 10px 0;
    padding: 10px;
    background: #e3f2fd;
    border-left: 5px solid #1976d2;
    color: #0d47a1;
}

.u-textarea-code {
    width: 100%;
    height: 500px;
    font-family: monospace;
    font-size: 14px;
}

/* Bloc terminal/console — utilisé par les scripts d'import (outils/) pour
   afficher les traces de debug dans un cadre noir+vert lisible. */
.u-console {
    background: #111;
    color: #0f0;
    padding: 10px;
    font-size: 12px;
    white-space: pre-wrap;
    border: 1px solid #444;
}

/* Vignettes diverses */
.thumb-light-250 {
    max-width: 250px;
    border: 1px solid #ccc;
    padding: 4px;
    border-radius: 6px;
}
.thumb-center-200 {
    max-width: 200px;
    border-radius: 6px;
    margin: 10px auto;
    display: block;
}
.thumb-center-120 {
    max-width: 120px;
    border-radius: 6px;
    display: block;
    margin: auto;
}
.thumb-center-100 {
    max-width: 100px;
    border-radius: 6px;
    display: block;
    margin: auto;
}

/* --- Compléments passe 4 --- */
.u-cursor-pointer { cursor: pointer !important; }
.u-color-cc0000   { color: #cc0000 !important; }
.u-color-2f6a2f   { color: #2f6a2f !important; }

/* Vignette : cellule inline-block centrée verticalement */
.u-cell-inline {
    display: inline-block;
    margin: 5px;
    text-align: center;
    vertical-align: top;
}
/* Bouton "réinitialisé" : sans bordure, sans fond */
.u-btn-reset {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 20px;
    padding: 0;
}

/* Bouton vert "succès" (cas particulier de bouton valider) */
.u-btn-success {
    background: #28a745;
    padding: 10px 25px;
}

/* Flex inline avec petit gap (icône + texte) */
.u-flex-gap-6 {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* État désactivé (visuel grisé + clics neutralisés) */
.u-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Bouton "👁 afficher mot de passe" — icône à droite du champ password */
.u-pwd-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #555;
}
/* Variante "button natif" : haut 0, pleine hauteur, sans bg/border */
.u-pwd-toggle-btn {
    position: absolute;
    right: 10px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #555;
    background: none;
    border: none;
}

/* Loader plein écran (outils/convert_photos.php) */
.u-loader-fullscreen {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.85);
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    z-index: 9999;
}

/* Badge "succès" mini (vert) — utilisé dans defis.php pour l'état "votes ouverts" */
.u-badge-success-mini {
    background: #28a745;
    color: white;
    padding: 4px 10px;
    font-size: 0.75em;
    font-weight: bold;
    line-height: 1.1em;
    text-align: center;
    display: inline-block;
    border-radius: 3px;
}

/* Tableau de config admin (admin_view_blocks.php) */
.config-table {
    border-collapse: collapse;
    width: auto;
    text-align: left !important;
    margin: 0 !important;
    align-self: flex-start !important;
}
.config-table td {
    padding-right: 10px;
    white-space: nowrap;
    text-align: left !important;
    display: table-cell !important;
}
.config-table td.col-msg {
    padding-left: 10px;
    padding-right: 0;
    color: #2e7d32;
    font-weight: bold;
}
.config-table select {
    padding: 4px 6px;
    font-size: 13px;
    width: auto;
}
.config-table button {
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    background: #2e7d32;
    color: white;
    border: 1px solid #1b5e20;
    border-radius: 3px;
}

/* ============================================================
   DISPLAY / FLEX
============================================================ */
.u-hidden       { display: none !important; }
.u-block        { display: block !important; }
.u-inline-block { display: inline-block !important; }
.u-flex-center  { display: flex; align-items: center; }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; }
.u-flex-gap-10  { display: flex; gap: 10px; }
/* ============================================================
   POSITION
============================================================ */
.u-relative { position: relative !important; }
/* ============================================================
   LARGEURS COURANTES SUR INPUTS / TEXTAREAS DE FORMULAIRES
============================================================ */
.u-form-w-600 { width: 100% !important; max-width: 600px !important; }
.u-form-w-400 { width: 100% !important; max-width: 400px !important; }
.u-form-w-300 { width: 100% !important; max-width: 300px !important; }
.u-w-60       { width: 60px !important; }
.u-w-140      { width: 140px !important; }
.u-w-200      { width: 200px !important; }

/* Vignette admin (image dans table-admin : 120 × 90) */
.thumb-admin {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border: 1px solid #ccc;
}
/* Placeholder "Aucune image" — même gabarit que .thumb-admin */
.thumb-admin-empty {
    width: 120px;
    height: 90px;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Bouton gris (annuler, retour, neutre) */
.u-btn-gray {
    padding: 10px 15px !important;
    background: #999 !important;
    color: white !important;
}

/* Texte d'aide à côté d'un label (12px, gris doux) */
.u-label-help {
    font-size: 12px !important;
    color: #777 !important;
}

/* Texte d'aide secondaire (0.9em, gris dim) */
.u-note-dim {
    font-size: 0.9em !important;
    color: #555 !important;
}
/* Composants flex courants */
.u-flex-row-gap20-mt15 {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}
.u-flex-1 { flex: 1; }
/* Variantes de bordures */
.u-fieldset-light {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

/* ============================================================
   BORDURES GAUCHES COLOREES (concours-bloc variantes)
============================================================ */
.u-bl-info    { border-left: 5px solid #0077cc !important; }
.u-bl-gray    { border-left: 5px solid #555 !important; }
.u-bl-green   { border-left: 5px solid #009900 !important; }
.u-bl-warning { border-left: 4px solid #cc8800 !important; }
.u-bl-danger  { border-left: 6px solid #cc0000 !important; }

/* ============================================================
   LISTES SANS PUCE (concours / défis listing)
============================================================ */
.u-list-clean {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.85em;
    line-height: 1.2;
}

.u-list-clean li {
    padding: 6px 0;
    border-bottom: 1px solid #ddd;
}

.u-list-clean li:last-child {
    border-bottom: none;
}

/* ============================================================
   LINE-HEIGHT
============================================================ */
.u-lh-14 { line-height: 1.4 !important; }
.u-lh-16 { line-height: 1.6 !important; }
.u-w-140  { width: 140px !important; }
.u-w-100p { width: 100% !important; }
.u-w-60p  { width: 60% !important; }
.u-w-40p  { width: 40% !important; }
/* ============================================================
   IMAGE COMPACTE (thumbnail concours)
============================================================ */
.u-thumb-110 {
    width: 110px;
    border-radius: 4px;
    display: block;
    margin: auto;
}