/* ── Rencontres Métiers d'Art – Design (calqué sur PJCMA) ─────────────── */

/* ── SORA FONT FACES ────────────────────────────────────────────────── */
@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ── APPLICATION UNIVERSELLE ────────────────────────────────────────── */
*, html{
    font-family: 'Sora', sans-serif !important;
    font-size: 15px;
    font-weight: 300;
}
b, strong {
  font-weight: 600;
}

/* Restaurer Font Awesome — il pose son font-family sur l'élément lui-même
   (.fas, .far, etc.) et non sur ::before, donc le * ci-dessus l'écrase */
.fa, .fas, .far, .fal, .fad,
[class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 5 Free" !important;
}
.fab, [class^="fa-brands"], [class*=" fa-brands"] {
    font-family: "Font Awesome 5 Brands" !important;
}

/* BODY + BACKGROUND ─────────────────────────────────────────────────── */
/* html reçoit le même background pour combler le gap Firefox en bas de page */
html {
    background-color: #ed6b10;
    background-image: url('../img/bg-4.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: bottom center;
    min-height: 100%;
}
body {
    background-color: transparent;
    background-image: none;
    min-height: 100vh;
}

a {
    color: #4d85ce;
    text-decoration: none;
}

/* HEADER ─────────────────────────────────────────────────────────────── */
#header {
    margin: 0;
}
#header h1 {
    font-size: clamp(1.3rem, 4.5vw, 2.3rem);
    line-height: clamp(1.6rem, 5.4vw, 3rem);
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
}
.header-bloc {
    padding: 20px 20px 20px 20px;
}
.header-content {
    background-color: #000000;
    padding: 13px 15px;
    border-radius: 0px;
}
.header-content a {
    width: 40% !important;
    max-width: 192px;
    padding: 8px;
}

/* CONTAINER ──────────────────────────────────────────────────────────── */
.container,
.form-page {
    position: relative;
}
.container {
    max-width: 950px !important;
    padding: 0;
    margin: 0 auto;
}

/* LAYOUT FORMULAIRE ───────────────────────────────────────────────────── */
.form-page {
    padding: 0 20px;
}

/* Contenu principal (carte blanche) */
.form-card {
    background-color: #f5f5f5;
    margin: 0;
    box-shadow: 0 0 1.3rem rgba(0,0,0,.3) !important;
    border-radius: 0px;
    margin-top: 30px;
}
.form-body {
    padding: 0 25px 20px 25px;
}
.form-body label {
    margin-bottom: 0.3em;
}
.form-body label.error {
    color: #FF1D00;
    display: block;
    margin-left: 0;
}

/* Barre d'actions (bas de formulaire) */
.form-actions {
    background-color: #f5f5f5;
    padding: 19px 12px 12px 20px;
    margin-top: 20px;
    margin-bottom: 35px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.form-actions .btn-submit {
    background: #6ebc43;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 0px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background .2s;
}
.form-actions .btn-submit:hover {
    background: #67a643;
    color: #fff;
}
.form-actions .btn-save {
    background: #dc3545;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 0px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background .2s;
}
.form-actions .btn-save:hover {
    background: #c82333;
    color: #fff;
}

/* TITRES DE SECTIONS ─────────────────────────────────────────────────── */
.form-section-title {
    padding: 28px 0 14px 0;
    margin: 0 0 20px 0;
    border-bottom: 1px solid #e1e1e1;
    text-transform: uppercase;
    font-size: 17px;
    font-weight: 600;
    color: #333;
}
h3.section-sub {
    font-size: 21px;
    margin: 15px 0 20px 0;
    border-bottom: 1px solid #ddd;
    padding: 0 0 10px 0;
}
h4.section-title {
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 600;
}

/* CHAMPS FORMULAIRE ──────────────────────────────────────────────────── */
.form-group {
    margin-bottom: 0.8rem;
}
.form-select {
    width: auto;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}
.form-label {
    margin-bottom: .4rem;
}
.form-control {
    padding: 9px 9px;
}
.form-select.w-100, select[name="departement"],
select[name="type_collectivite"] {
    width: 100% !important;
}

/* Région dérivée du département ──────────────────────────────────────── */
.region-display {
    padding: 9px 0;
    font-weight: 500;
    color: #333;
}

/* ALERTE INCOMPLET ───────────────────────────────────────────────────── */
.alert-warning.incomplet {
    border-left: 4px solid #ffc107;
    background: #fff3cd;
    border-radius: 0px;
    margin: 16px 0;
}

/* GPS ────────────────────────────────────────────────────────────────── */
#gps-result { font-size: 0.875rem; }
#gps-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
.input-group .btn-outline-secondary {
    border-color: #ced4da;
}

/* CONTACTS TABLE ─────────────────────────────────────────────────────── */
#contacts-table th,
#contacts-table td {
    vertical-align: middle;
    font-size: 0.875rem;
}
#contacts-table .form-control-sm {
    min-width: 85px;
    font-size: 0.8rem;
    /* Pas d'icône de validation — évite le décalage des colonnes */
    background-image: none !important;
    padding-right: 0.5rem;
}
#contacts-table .form-control.is-valid {
    border-color: #ced4da;
    box-shadow: none;
    background-image: none !important;
    padding-right: 0.5rem;
}
#contacts-table .form-control.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
    background-image: none !important;
    padding-right: 0.5rem;
}
#contacts-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
#contacts-table td:first-child { width: 55px; }
#contacts-table td:last-child  { width: 38px; }
.contacts-info {
    background: #e8f4f8;
    border: 1px solid #bee5eb;
    border-radius: 0px;
    padding: 10px 14px;
    font-size: 0.875rem;
    margin-bottom: 12px;
}

/* PHOTOS UPLOAD ──────────────────────────────────────────────────────── */
#photos-upload-zone {
    background: #fff;
    border: 2px dashed #ced4da !important;
    border-radius: 0px;
    min-height: 120px;
    transition: border-color .2s;
}
#photos-upload-zone:hover { border-color: #ed6b10 !important; }
#photos-upload-zone.is-invalid {
    border-color: #dc3545 !important;
}
#photos-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
.photo-item img { border-radius: 4px; }

/* PEKUPLOAD ──────────────────────────────────────────────────────────── */
.pkuparea {
    border: 2px dashed #ced4da;
    border-radius: 0px;
    padding: 11px 14px;
    text-align: center;
    background: #fafafa;
    transition: border-color .2s;
}
.pkuparea:hover { border-color: #ed6b10; }

/* BUTTONS ────────────────────────────────────────────────────────────── */
.btn-primary {
    background-color: #ed6b10;
    border: none;
    color: #fff;
    border-radius: 0px;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus-visible {
    background-color: #000 !important;
    color: #fff !important;
}
.btn-info {
    color: #000;
    background-color: #eeece9;
    border-color: #d1d1d1;
}
.btn-info:hover {
    color: #000 !important;
    background-color: #d1d1d1 !important;
}
.btn-lg {
  --bs-btn-padding-y: 0.8rem;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: 0rem;
}
.btn:hover {
  color: #fff !important;
  background-color: #000 !important;
  border-color: #000 !important;
}

/* LOGIN ──────────────────────────────────────────────────────────────── */
.loginCard {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}
.login-box-container {
    top: auto !important;
    transform: none !important;
    position: relative;
    max-width: 400px;
    margin: 60px auto;
}
.password-field .form-control {
    padding-right: 2.75rem;
}
.password-toggle {
    position: absolute;
    top: 0;
    right: 0.85rem;
    z-index: 5;
    height: calc(3.5rem + 2px);
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
}
.password-toggle:hover,
.password-toggle:focus {
    color: #ed6b10;
}
.password-toggle:focus-visible {
    outline: 2px solid #ed6b10;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ADMIN VIEW — champs ────────────────────────────────────────────────── */
.field-row {
    display: flex;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}
.field-row.no-border { border-bottom: none; }
.field-label {
    min-width: 220px;
    font-weight: 600;
    color: #495057;
    font-size: 0.875rem;
    flex-shrink: 0;
}
.field-value {
    flex: 1;
    color: #212529;
    font-size: 0.875rem;
}
h3.form-section {
    margin: 24px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #2c3e50;
    font-size: 1.1rem;
    color: #2c3e50;
}

/* INCOMPLET BANNER ───────────────────────────────────────────────────── */
#form-incomplet-banner {
    margin: 16px 0 0 0;
}

/* RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .form-page { padding: 0 8px; }
    .header-content a { max-width: 80px; }
    #contacts-table .form-control-sm { min-width: 60px; }
    .field-label { min-width: 130px; }
}