/* ==========================================================================
   modern.css — rajeunissement visuel de Radioamateur.org
   Chargé APRÈS globale.css et dark.css (voir includes/header.php).
   Aucun changement de HTML/PHP/JS : pour revenir en arrière, retirer le <link>.
   Les couleurs de marque (bleu #355fb9, périwinkle #7b88d2, jaune) sont conservées.
   Le mode sombre (body.dark) garde ses couleurs : les règles de couleur claires
   sont préfixées par body:not(.dark).
   ========================================================================== */

:root {
   --ra-radius: 12px;
   --ra-shadow: 0 1px 2px rgba(20, 30, 70, .06), 0 2px 8px rgba(20, 30, 70, .06);
   --ra-shadow-hover: 0 2px 4px rgba(20, 30, 70, .08), 0 8px 24px rgba(20, 30, 70, .12);
}

body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body:not(.dark) {
   background-color: #f4f6fb;
}

/* ---------- Barre de navigation ---------- */

body:not(.dark) .navbar.bg-dark {
   background: linear-gradient(180deg, #8793da 0%, #7683cf 100%) !important;
}

.navbar.fixed-top {
   box-shadow: 0 2px 10px rgba(40, 50, 110, .22);
}

/* Remplace le soulignement jaune au survol par une pastille discrète */
.navbar-collapse ul li .nav-link:before,
.login ul li .nav-link:before {
   display: none;
}

.navbar-nav .nav-link {
   border-radius: 8px;
   transition: background-color .15s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .show > .nav-link {
   background-color: rgba(255, 255, 255, .16);
}

.btn-outline-jaune {
   border-radius: 999px;
   padding: .15rem .8rem;
   font-weight: 600;
   transition: background-color .15s ease, color .15s ease;
}

/* ---------- Menus déroulants ---------- */

.dropdown-menu {
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(20, 30, 70, .18);
   padding: .4rem;
}

.dropdown-item {
   border-radius: 8px;
   padding: .35rem .75rem;
}

body:not(.dark) .dropdown-menu.show {
   background-color: #fff;
}

body:not(.dark) .dropdown-item:hover,
body:not(.dark) .dropdown-item:focus {
   background-color: #eef2ff;
   color: #23369c;
}

/* ---------- Titre de section + recherche rapide ---------- */

.section-heading h6 {
   border-radius: 8px;
   box-shadow: 0 1px 3px rgba(53, 95, 185, .35);
}

.recherche-plus > .form-control:first-child {
   border-radius: 8px 0 0 8px;
}

.recherche-plus .input-group-append .btn {
   border-radius: 0 8px 8px 0;
}

body:not(.dark) .recherche-plus .form-control:not(select) {
   background-color: #fff;
}

/* ---------- Cartes d'annonces ---------- */

.card-std,
.card-une,
.card-gris {
   border-radius: var(--ra-radius);
   box-shadow: var(--ra-shadow);
   margin-bottom: 14px !important; /* remplace le margin inline de 20px */
   transition: box-shadow .2s ease, transform .2s ease;
}

@media (hover: hover) {
   .card-std:hover,
   .card-une:hover,
   .card-gris:hover {
      box-shadow: var(--ra-shadow-hover);
      transform: translateY(-1px);
   }
}

.card-std > .card-header:first-child,
.card-une > .card-header:first-child,
.card-gris > .card-header:first-child {
   border-radius: 8px calc(var(--ra-radius) - 1px) 0 0;
}

.card-std > .card-footer:last-child,
.card-une > .card-footer:last-child,
.card-gris > .card-footer:last-child {
   border-radius: 0 0 calc(var(--ra-radius) - 1px) 8px;
}

/* Liseré d'accent à gauche. dark.css pose "border: none !important" sur .dark .card
   (spécificité 0,2,0) : on monte la spécificité pour que le liseré survive en mode sombre. */
body .card.card-std,
body .card.card-une,
body .card.card-gris { border-left: 4px solid #b8bcc6 !important; }
body .card.card-std  { border-left-color: #355fb9 !important; }
body .card.card-une  { border-left-color: #f0a500 !important; }
body.dark .card.card-std  { border-left-color: #6a7bd1 !important; }
body.dark .card.card-une  { border-left-color: #d9a441 !important; }
body.dark .card.card-gris { border-left-color: #8a8a8a !important; }

/* Couleurs claires uniquement (le mode sombre reste géré par dark.css) */
body:not(.dark) .card.card-std { border-color: #dfe5f2; }
body:not(.dark) .card.card-une { border-color: #f1e2b4; }
body:not(.dark) .card.card-gris { border-color: #e1e3e8; }

body:not(.dark) .card-std > .card-header { background-color: #f3f6fd; }
body:not(.dark) .card-std > .card-body,
body:not(.dark) .card-std > .card-footer { background-color: #fff; color: #5b6472; }

body:not(.dark) .card-une > .card-header { background-color: #fff6dc; }
body:not(.dark) .card-une > .card-body,
body:not(.dark) .card-une > .card-footer { background-color: #fffcf2; color: #6b6354; }

body:not(.dark) .card-gris > .card-header { background-color: #eceef2; }
body:not(.dark) .card-gris > .card-body,
body:not(.dark) .card-gris > .card-footer { background-color: #f6f7f9; color: #6b7280; }

body:not(.dark) .card-std > .card-footer,
body:not(.dark) .card-une > .card-footer,
body:not(.dark) .card-gris > .card-footer {
   border-top: 1px solid rgba(20, 30, 70, .06);
}

/* Titres : un peu plus compacts, plus lisibles */
body .card a.titre-annonce:link,
body .card a.titre-annonce:visited,
body .card a.titre-annonce:hover,
body .card .titre-annonce {
   font-size: 1.3em;
   font-weight: 600;
   letter-spacing: -.005em;
}

body .card a.titre-annonce:hover {
   text-decoration: underline;
   text-underline-offset: 3px;
}

body:not(.dark) .card-une a.titre-annonce:link,
body:not(.dark) .card-une a.titre-annonce:visited,
body:not(.dark) .card-une a.titre-annonce:hover,
body:not(.dark) .card-une .titre-annonce {
   color: #b45f06;
}

.prix {
   font-weight: 700;
   font-variant-numeric: tabular-nums;
}

/* Bouton "Contacter l'annonceur" */
.contact-annonceur,
.contact-annonceur-disabled {
   display: inline-block;
   white-space: nowrap;
   padding: .25rem .9rem;
   border-radius: 999px;
   font-size: 1em;
   font-weight: 600;
   transition: background-color .15s ease;
}

body:not(.dark) .contact-annonceur {
   background-color: #355fb9;
   color: #fff;
}

body:not(.dark) .contact-annonceur:hover {
   background-color: #2a4d9c;
}

.dark .contact-annonceur {
   background-color: rgba(172, 185, 255, .14);
}

.dark .contact-annonceur:hover {
   background-color: rgba(172, 185, 255, .26);
}

body:not(.dark) .contact-annonceur-disabled {
   background-color: #e6e8ee;
   color: #6b7280;
}

.dark .contact-annonceur-disabled {
   background-color: rgba(255, 255, 255, .08);
}

/* ---------- Bandeaux ---------- */

.bandeau_promo_adhesion {
   border-radius: 12px;
   padding: .6rem 1rem;
}

body:not(.dark) .bandeau_promo_adhesion {
   background-color: #eef3ff;
   border-color: #c9d6ff;
}

.bandeau_news_site {
   border-radius: 10px;
   background: #fff7d6;
   border-color: #f0c24b;
}

.alerte-email {
   border-radius: 999px;
   font-weight: 600;
}

/* ---------- Pagination ---------- */

.pagination {
   gap: 4px;
}

.pagination .page-item .page-link {
   margin-left: 0;
   border-radius: 8px;
   min-width: 2.2rem;
   text-align: center;
   transition: background-color .15s ease;
}

body:not(.dark) .pagination .page-item .page-link {
   background-color: #fff;
   border-color: #dfe5f2;
   color: #355fb9;
}

body:not(.dark) .pagination .page-item .page-link:hover {
   background-color: #eef2ff;
}

body:not(.dark) .pagination .page-item.active .page-link {
   background-color: #355fb9;
   border-color: #355fb9;
   color: #fff;
}

/* ---------- Boutons et formulaires ---------- */

.btn {
   border-radius: 8px;
   font-weight: 600;
   transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body:not(.dark) .btn-primary {
   background-color: #355fb9;
   border-color: #355fb9;
}

body:not(.dark) .btn-primary:hover {
   background-color: #2a4d9c;
   border-color: #2a4d9c;
}

.form-control {
   border-radius: 8px;
}

/* globale.css supprime tout indicateur de focus : on le rétablit (accessibilité) */
body:not(.dark) .form-control:focus,
body:not(.dark) select:focus {
   border-color: #355fb9;
   box-shadow: 0 0 0 3px rgba(53, 95, 185, .18);
}

a:focus-visible,
button:focus-visible {
   outline: 2px solid #355fb9;
   outline-offset: 2px;
}

.dark a:focus-visible,
.dark button:focus-visible {
   outline-color: #acb9ff;
}

/* ---------- Fenêtres modales ---------- */

.modal-content {
   border: 0;
   border-radius: 16px;
   box-shadow: 0 20px 60px rgba(20, 30, 70, .28);
   overflow: hidden;
}

/* ---------- Accessibilité : réduire les animations si demandé ---------- */

@media (prefers-reduced-motion: reduce) {
   * {
      transition: none !important;
      scroll-behavior: auto !important;
   }
   .card-std:hover, .card-une:hover, .card-gris:hover {
      transform: none;
   }
}

/* ===== Correctifs : pager, bouton contact, pied de carte ===== */

/* Pager : Bootstrap impose un rayon de .2rem sur .pagination-sm .page-item:first-child .page-link */
body .pagination .page-item .page-link,
body .pagination .page-item:first-child .page-link,
body .pagination .page-item:last-child .page-link {
   margin-left: 0;
   border-radius: 8px;
   min-width: 2.2rem;
   text-align: center;
}

/* Bouton contact : pastille discrète au lieu d'un aplat bleu */
.contact-annonceur,
.contact-annonceur-disabled {
   white-space: nowrap;
   font-weight: 500;
}

body:not(.dark) .contact-annonceur {
   background-color: #eaf0fd;
   color: #23369c;
   box-shadow: inset 0 0 0 1px #cfdcf7;
}

body:not(.dark) .contact-annonceur:hover {
   background-color: #dbe5fb;
}

/* Pied de carte (>= 992px) : téléphone + bouton sur une seule ligne */
.card-footer img[data-tel] {
   vertical-align: middle;
}

@media (min-width: 992px) {
   .card-std > .card-footer > .col-lg-5,
   .card-une > .card-footer > .col-lg-5,
   .card-gris > .card-footer > .col-lg-5 {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
      white-space: nowrap;
   }

   .card-std > .card-footer > .col-3,
   .card-une > .card-footer > .col-3,
   .card-gris > .card-footer > .col-3 {
      flex: 1 1 auto;
      max-width: none;
      text-align: center;
   }

   .card-std > .card-footer > .col-4,
   .card-une > .card-footer > .col-4,
   .card-gris > .card-footer > .col-4 {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
      white-space: nowrap;
   }
}

/* Pied de carte >= 992px : grille 1fr / auto / 1fr => "Signaler" centré sur la carte */
@media (min-width: 992px) {
   .card-std > .card-footer,
   .card-une > .card-footer,
   .card-gris > .card-footer {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
   }

   .card-std > .card-footer > .col-lg-5,
   .card-une > .card-footer > .col-lg-5,
   .card-gris > .card-footer > .col-lg-5,
   .card-std > .card-footer > .col-3,
   .card-une > .card-footer > .col-3,
   .card-gris > .card-footer > .col-3,
   .card-std > .card-footer > .col-4,
   .card-une > .card-footer > .col-4,
   .card-gris > .card-footer > .col-4 {
      width: auto;
      max-width: none;
   }

   .card-std > .card-footer > .col-4,
   .card-une > .card-footer > .col-4,
   .card-gris > .card-footer > .col-4 {
      justify-self: end;
   }
}

/* Bouton contact plus petit */
.contact-annonceur,
.contact-annonceur-disabled {
   font-size: .85em;
   padding: .1rem .7rem;
}

/* Pastille de département : réduite (~75 %) pour rester proportionnée au bandeau */
.card-header .departement {
   width: 20px;
   height: 18px;
   font-size: 9px;
   margin: 0 4px;
}

.card-header .departement.pays {
   width: 17px;
}

.card-header .departement .numero-dpt {
   top: 8px;
   left: 11px;
}

/* ===== Navbar : contraste (blanc 4,7:1 / jaune 4,4:1) + recherche rapide ===== */

/* Navbar : aplat un peu plus foncé, sans dégradé (le dégradé clair passait sous 3:1) */
body:not(.dark) .navbar.bg-dark {
   background: #5f6dc0 !important;
}

/* Bouton "Connexion" : fond transparent (jaune sur #7b88d2 = 3,1:1) */
.btn-outline-jaune {
   background-color: transparent;
}

.btn-outline-jaune:hover,
.btn-outline-jaune:active,
.btn-outline-jaune:focus,
.btn-outline-jaune.active {
   background-color: #ffff00;
   color: #3b4694;
}

/* Recherche rapide : plus grande, texte lisible, coins cohérents */
.input-group.recherche-plus {
   border-radius: 10px;
   box-shadow: var(--ra-shadow);
}

.input-group.recherche-plus > .form-control,
.input-group.recherche-plus .input-group-append > .btn {
   height: 40px;
   font-size: .95rem;
   padding-top: .35rem;
   padding-bottom: .35rem;
}

.input-group.recherche-plus > .form-control:first-child {
   border-radius: 10px 0 0 10px;
   padding-left: .9rem;
}

.input-group.recherche-plus .input-group-append > .btn {
   border-radius: 0 10px 10px 0;
   padding-left: 1rem;
   padding-right: 1rem;
}

.input-group.recherche-plus select.input-group-addon {
   font-style: normal;
   border-radius: 0;
}

body:not(.dark) .input-group.recherche-plus select.input-group-addon {
   color: #3b4694;
}

body:not(.dark) .input-group.recherche-plus .input-group-append > .btn {
   background-color: #355fb9;
   border-color: #355fb9;
   color: #fff;
}

body:not(.dark) .input-group.recherche-plus .input-group-append > .btn:hover {
   background-color: #2a4d9c;
   border-color: #2a4d9c;
}

/* En-tête de carte : centrage vertical du n°, de la pastille de département et de l'icône d'édition */
.card-std > .card-header,
.card-une > .card-header,
.card-gris > .card-header {
   align-items: center;
   padding-right: .75rem;
}

.card-std > .card-header > div:last-child,
.card-une > .card-header > div:last-child,
.card-gris > .card-header > div:last-child {
   margin-top: 0 !important; /* annule le margin-top: 4px inline prévu pour l'ancien titre en 1.5em */
   display: flex;
   align-items: center;
   white-space: nowrap;
}

.card-header .departement {
   display: block; /* évite la ligne "fantôme" (strut) qui décalait la pastille vers le bas */
}

.card-header .departement .numero-dpt {
   top: 50%;
}

/* Navbar, partie droite : centrage vertical de l'interrupteur et du menu utilisateur. */
.navbar > .login {
   height: auto;
}

.navbar > .login > ul.navbar-nav {
   padding-top: 0 !important; /* annule le style="padding-top: 4px" inline */
}

a.nav-link.login {
   height: auto;
   margin-left: 0;
   padding: .3rem .65rem;
}

.navbar > .login .dropdown-menu {
   margin-top: .6rem;
}

/* =====================================================================
   Formulaire de dépôt d'annonce (wizard jquery.steps)
   form-to-wizard.css est chargé APRÈS modern.css (dans pages/deposer_annonce.php) :
   on préfixe par #AjoutAnnonce pour garder la priorité sans dépendre de l'ordre.
   ===================================================================== */

/* ----- Barre d'étapes ----- */
#AjoutAnnonce .steps {
   background: transparent;
   border-bottom: 0;
   padding: 0 0 1.1rem;
}

#AjoutAnnonce .steps ul {
   gap: 8px;
   justify-content: space-between;
}

#AjoutAnnonce .steps ul li {
   flex: 1 1 0;
   min-width: 0;
}

#AjoutAnnonce .steps ul li a {
   display: block;
   padding: .55rem .4rem;
   border-radius: 10px;
   border: 1px solid #dfe5f2;
   font-weight: 600;
   line-height: 1.25;
   text-align: center;
   transition: background-color .15s ease, border-color .15s ease;
}

body:not(.dark) #AjoutAnnonce .steps ul li a {
   background: #fff;
   color: #6b7280;
}

/* Mode sombre : dark.css pose "background: #232323 !important" sur .steps */
body.dark #AjoutAnnonce .steps {
   background: transparent !important;
}

body.dark #AjoutAnnonce .steps ul li a {
   background: #1b1d24;
   border-color: #444;
   color: #9aa0b4;
}

body.dark #AjoutAnnonce .steps ul .current a {
   background: #3f476e;
   border-color: #5a6fd5;
   color: #fff;
}

body.dark #AjoutAnnonce .steps ul .done a {
   border-color: #2f5a3d;
   color: #7fd39b;
}

#AjoutAnnonce .steps ul li a small {
   font-weight: 500;
}

#AjoutAnnonce .steps .title {
   justify-content: center;
}

body:not(.dark) #AjoutAnnonce .steps ul .current a {
   background: #355fb9;
   border-color: #355fb9;
   color: #fff;
}

body:not(.dark) #AjoutAnnonce .steps ul .done a {
   background: #eef7f0;
   border-color: #cfe8d6;
   color: #1f7a3d;
}

#AjoutAnnonce .steps ul .done .title_text::before {
   content: "\f00c"; /* coche Font Awesome (l'ancienne icône Material-Design-Iconic-Font n'est pas chargée) */
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   font-size: .8em;
   margin-right: .35rem;
}

/* ----- Corps du formulaire ----- */
body:not(.dark) #AjoutAnnonce .content {
   background: #fff;
   border: 1px solid #e3e8f3;
   border-radius: 14px;
   box-shadow: var(--ra-shadow);
   padding: .25rem 1.25rem 1rem;
}

#AjoutAnnonce legend {
   font-size: 1.2rem;
   font-weight: 700;
   padding-top: .25rem;
}

body:not(.dark) #AjoutAnnonce legend {
   color: #23369c;
}

#AjoutAnnonce label {
   font-family: inherit;
}

body:not(.dark) #AjoutAnnonce .form-section-box {
   border-color: #e3e8f3;
   border-radius: 12px;
   background: #fafbff;
}

/* ----- Cartes de choix (étape 1) ----- */
#AjoutAnnonce .form-radio-flex input + label {
   padding: .9rem 1rem;
   border-radius: 12px;
   cursor: pointer;
}

body:not(.dark) #AjoutAnnonce .form-radio-flex input + label {
   border-color: #dfe5f2;
   box-shadow: var(--ra-shadow);
}

body:not(.dark) #AjoutAnnonce .form-radio-flex input + label:hover {
   border-color: #355fb9;
}

/* Les labels portent .bgblanc (background: #fff !important) : l'état coché doit donc être !important */
body:not(.dark) #AjoutAnnonce .form-radio-flex input:checked + label {
   background-color: #eef3ff !important;
   border-color: #355fb9;
   box-shadow: 0 0 0 3px rgba(53, 95, 185, .18);
}

/* ----- Puces de choix (catégories, validité, port...) ----- */
#AjoutAnnonce .form-radio-flex-inline input + label,
#AjoutAnnonce .form-checkbox-flex input + label {
   border-radius: 10px;
   cursor: pointer;
}

/* Les largeurs fixes inline (width: 130px...) étaient calées sur Tahoma 14px : avec une autre
   police, le texte passait à la ligne. Les puces s'adaptent maintenant à leur contenu. */
#AjoutAnnonce .form-radio-flex-inline input + label {
   width: auto !important;
   min-width: 6rem;
   padding-left: .9rem;
   padding-right: .9rem;
   white-space: nowrap;
}

body:not(.dark) #AjoutAnnonce .form-radio-flex-inline input + label,
body:not(.dark) #AjoutAnnonce .form-checkbox-flex input + label {
   border-color: #dfe5f2;
}

body:not(.dark) #AjoutAnnonce .form-radio-flex-inline input + label:hover {
   border-color: #355fb9;
   background-color: #f5f8ff !important;
}

body:not(.dark) #AjoutAnnonce .form-radio-flex-inline input:checked + label {
   background-color: #355fb9 !important;
   border-color: #355fb9;
   color: #fff;
}

/* Les <input> sont sortis de l'écran : sans ça, le focus clavier est invisible */
#AjoutAnnonce .form-radio-flex input:focus-visible + label,
#AjoutAnnonce .form-radio-flex-inline input:focus-visible + label,
#AjoutAnnonce .form-checkbox-flex input:focus-visible + label {
   outline: 2px solid #355fb9;
   outline-offset: 2px;
}

/* ----- Zone photos ----- */
body:not(.dark) #AjoutAnnonce .dropzone {
   border: 2px dashed #b8c4e8;
   background: #f7f9fe;
}

#AjoutAnnonce .dropzone {
   border-radius: 12px !important;
   max-width: 100%; /* était fixe à 642px : débordait sur mobile */
}

/* ----- Boutons Précédent / Suivant ----- */
#AjoutAnnonce .actions {
   padding: 1rem 0 0;
}

#AjoutAnnonce .actions ul li a {
   padding: .55rem 1.3rem;
   border-radius: 10px;
   font-weight: 600;
   transition: background-color .15s ease;
}

body:not(.dark) #AjoutAnnonce .actions ul li a {
   background: #355fb9;
   color: #fff;
}

body:not(.dark) #AjoutAnnonce .actions ul li a:hover {
   background: #2a4d9c;
}

body:not(.dark) #AjoutAnnonce .actions ul li:first-child a {
   background: #eef1f8;
   color: #355fb9;
}

body:not(.dark) #AjoutAnnonce .actions ul li:first-child a:hover {
   background: #e0e6f5;
}

@media (max-width: 575px) {
   #AjoutAnnonce .steps ul {
      gap: 4px;
   }

   #AjoutAnnonce .steps ul li a {
      padding: .4rem .15rem;
      font-size: .75rem;
   }

   body:not(.dark) #AjoutAnnonce .content {
      padding: .25rem .75rem 1rem;
   }
}

/* Durée de publication : "30 jours → 10/11/2026" sur une seule ligne (le <br /> du balisage est masqué) */
#AjoutAnnonce #validiteAnnonce label br {
   display: none;
}

#AjoutAnnonce #validiteAnnonce label span {
   margin-left: .3rem;
}

#AjoutAnnonce #validiteAnnonce {
   gap: 8px 10px;
}

/* Prix / port / débattre : les deux groupes de puces se calent sur leur contenu
   (avant : deux colonnes égales => grand vide au milieu et retour à la ligne de la 3e puce) */
@media (min-width: 992px) {
   #AjoutAnnonce #prixBlock .row > .col-lg {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
   }
}

/* Espacement entre puces : 20px -> .6rem */
#AjoutAnnonce .form-radio-flex-inline input + label {
   margin-right: .6rem;
   padding-left: .75rem;
   padding-right: .75rem;
}

/* Prix / port / débattre : chaque choix forme un groupe distinct (contrôle segmenté),
   avec un vrai espace entre les deux, et le champ Prix a la même hauteur que les groupes. */
#AjoutAnnonce #PORT,
#AjoutAnnonce #A_DEBATTRE {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   width: fit-content;
   max-width: 100%;
   padding: 3px;
   border: 1px solid #e3e8f3;
   border-radius: 12px;
}

body:not(.dark) #AjoutAnnonce #PORT,
body:not(.dark) #AjoutAnnonce #A_DEBATTRE {
   background: #f1f4fb;
}

body.dark #AjoutAnnonce #PORT,
body.dark #AjoutAnnonce #A_DEBATTRE {
   border-color: #444;
}

#AjoutAnnonce #PORT input + label,
#AjoutAnnonce #A_DEBATTRE input + label {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 32px;
   padding-top: 0 !important; /* des labels ont un padding inline (6px 5px) */
   padding-bottom: 0 !important;
   margin: 0;
}

#AjoutAnnonce #PRIX,
#AjoutAnnonce #FRAIS_PORT {
   height: 40px;
}

@media (min-width: 992px) {
   #AjoutAnnonce #prixBlock .row > .col-lg:last-child {
      padding-left: 1.5rem;
   }
}

/* =====================================================================
   Page "Modifier / Supprimer" (/modifier) + liste "mes annonces"
   La page pose un <style> inline (.bleu { color:#007bff; margin-left:1rem; cursor:pointer })
   chargé après modern.css : on préfixe par #ModifAnnonce / #liste-annonces pour garder la priorité.
   ===================================================================== */

/* ----- Liste "Vos petites annonces actuellement en ligne" (aussi dans l'Espace Adhérent) ----- */
#liste-annonces {
   border-collapse: separate;
   border-spacing: 0;
   border: 1px solid #e3e8f3;
   border-radius: 12px;
   overflow: hidden;
   margin-top: .75rem;
}

#liste-annonces th,
#liste-annonces td {
   padding: .3rem .75rem;
   border-top: 0;
   vertical-align: middle;
}

#liste-annonces thead th {
   border-bottom: 1px solid #e3e8f3;
   font-weight: 600;
}

body:not(.dark) #liste-annonces thead th {
   background: #f3f6fd;
   color: #23369c;
}

body:not(.dark) #liste-annonces.table-striped > tbody > tr:nth-child(odd) > td {
   background: #fafbff;
}

body:not(.dark) #liste-annonces.table-striped > tbody > tr:nth-child(even) > td {
   background: #fff;
}

body:not(.dark) #liste-annonces tbody tr:hover > td {
   background: #eef3ff;
}

/* Icônes d'action : vraies zones cliquables (30px) */
#liste-annonces i.modification,
#liste-annonces i.suppression,
#liste-annonces a.card-link > i.bleu {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   margin-left: .25rem;
   border-radius: 8px;
   cursor: pointer;
   transition: background-color .15s ease;
}

body:not(.dark) #liste-annonces i.modification:hover,
body:not(.dark) #liste-annonces a.card-link > i.fa-edit:hover {
   background: #eef3ff;
}

body:not(.dark) #liste-annonces i.suppression:hover,
body:not(.dark) #liste-annonces a.card-link > i.fa-trash-alt:hover {
   background: #fdeaea;
   color: #c00;
}

body.dark #liste-annonces i.modification:hover,
body.dark #liste-annonces i.suppression:hover,
body.dark #liste-annonces a.card-link > i.bleu:hover {
   background: rgba(255, 255, 255, .1);
}

/* ----- Formulaire ----- */
#ModifAnnonce legend {
   font-size: 1.2rem;
   font-weight: 700;
}

body:not(.dark) #ModifAnnonce legend {
   color: #23369c;
}

#ModifAnnonce label {
   font-family: inherit;
}

#ModifAnnonce .form-group > label,
#ModifAnnonce > .row label[for] {
   font-weight: 600;
}

/* Choix radio (type d'opération, motif) : lignes cliquables ; la case native est conservée */
#ModifAnnonce .label-radio {
   display: flex;
   align-items: center;
   gap: .6rem;
   max-width: 460px;
   margin: 0 0 .5rem;
   padding: .55rem .85rem;
   border: 1px solid #dfe5f2;
   border-radius: 10px;
   font-family: inherit;
   cursor: pointer;
   transition: border-color .15s ease, background-color .15s ease;
}

#ModifAnnonce .label-radio.bleu {
   margin-left: 0; /* annule le margin-left: 1rem du <style> de la page */
}

#ModifAnnonce .label-radio input[type="radio"] {
   margin: 0;
   accent-color: #355fb9;
   flex: 0 0 auto;
}

body:not(.dark) #ModifAnnonce .label-radio {
   background: #fff;
   color: #23369c; /* remplace le #007bff du <style> de la page */
}

body:not(.dark) #ModifAnnonce .label-radio:hover {
   border-color: #355fb9;
}

body:not(.dark) #ModifAnnonce .label-radio:has(input:checked) {
   border-color: #355fb9;
   background: #eef3ff;
   box-shadow: 0 0 0 3px rgba(53, 95, 185, .15);
}

body.dark #ModifAnnonce .label-radio {
   border-color: #444;
}

body.dark #ModifAnnonce .label-radio:has(input:checked) {
   border-color: #5a6fd5;
   background: #3f476e;
}

/* Encadré "ATTENTION" (modification) */
#infoModification {
   border: 1px solid #f0d58a;
   border-left: 4px solid #e0a100;
   border-radius: 10px;
   padding: .35rem 1rem;
}

body:not(.dark) #infoModification {
   background: #fff8e1;
}

#infoModification p {
   line-height: 1.6;
   margin: .4rem 0;
}

/* Bouton "Etape suivante" */
#ModifAnnonce #valider {
   padding: .55rem 1.4rem;
   font-size: 1rem;
}

/* ----- Cartes d'erreur / de confirmation (styles inline) ----- */
.card[style*="margin: 60px auto"],
.card[style*="max-width: 600px"] {
   max-width: 100%;      /* saisie-error.php fixe width: 600px => débordait sur mobile */
   border-radius: 12px;
   overflow: hidden;
   box-shadow: var(--ra-shadow);
}

/* Mode sombre : les h1-h6 gardent #152535 (illisible sur fond noir) */
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 {
   color: #ccc;
}

/* Titre de section : "height: 28px" inline faisait déborder le texte sur 2 lignes (mobile) */
.section-heading h6 {
   height: auto !important;
   min-height: 28px;
}

/* Liste des annonces : les deux icônes d'action restent sur une ligne */
#liste-annonces td:last-child {
   white-space: nowrap;
}

@media (max-width: 575px) {
   #liste-annonces th,
   #liste-annonces td {
      padding: .3rem .4rem;
   }

   #liste-annonces td:first-child {
      width: auto !important; /* style inline width: 100px */
   }
}

/* ----- /modifier : même "carte" que le formulaire de dépôt ----- */
div:has(> #ModifAnnonce) {
   max-width: none !important;   /* style inline max-width: 1000px */
}

body:not(.dark) #ModifAnnonce {
   background: #fff;
   border: 1px solid #e3e8f3;
   border-radius: 14px;
   box-shadow: var(--ra-shadow);
   padding: .25rem 1.25rem 1rem;
   margin-top: 1.25rem;
}

#ModifAnnonce legend {
   margin-top: .75rem !important;   /* style inline margin-top: 20px */
   padding-top: .25rem;
}

#ModifAnnonce #valider {
   float: none;                     /* .pa_next { float:right } de globale.css */
   display: block;
   margin: 1rem 0 0 auto;
   border-radius: 10px;
   font-weight: 600;
}

body:not(.dark) #ModifAnnonce #valider {
   background: #355fb9;
   border-color: #355fb9;
}

body:not(.dark) #ModifAnnonce #valider:hover {
   background: #2a4d9c;
   border-color: #2a4d9c;
}

@media (max-width: 575px) {
   body:not(.dark) #ModifAnnonce {
      padding: .25rem .75rem 1rem;
   }
}