.mv-item,
        .mv-item a {
            display: block;
        }

        .mv-item a {
            margin: 1px;
            padding: 4px;
            color: var(--FormCouleurCarac);
            background: #FFF;
            font-family: var(--FormPoliceChamp);
            text-decoration: none;
            -webkit-transition: all .3s;
            -moz-transition: all .3s;
            transition: all .1s;
            font-size: 14px;
            vertical-align: middle;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: left;
        }

        .mv-item a:hover,
        .mv-item a:focus {
            background: #254893;
            color: #FFF;
            padding-left: 30px;
        }

        body {
            font-family: var(--FormPoliceChamp);
            font-weight: lighter;
            text-align: center;
        }

        h1 {
            color: #444;
            margin: 2em 0;
            font-weight: lighter;
        }

        .by {
            font-size: .8em;
            color: #888;
            margin: 5em 0;
        }

        .by a {
            color: #888;
        }

        .ad {
            margin-top: 4em;
            padding: 10px;
            height: 125px;
            text-align: center;
        }

        .ad ins {
            margin: 0 1em;
        }

        @media all and (orientation: portrait) {

       .docs {
            margin-left: 15%;
            right: 1vw !important;
        }
    }

    .table-wrap , .docs{ background-color: transparent; border:0px solid transparent;}

    /* 3) Le style “alerte / warning” */
.btn-alert {
  /* Variables faciles à ajuster */
  --alert-bg:       #fff7e6; /* fond jaune très pâle */
  --alert-bg-hover: #ffe8bf; /* fond survol */
  --alert-border:   #ffa117; /* bord + ombre */
  --alert-color:    #b34700; /* texte + icône */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;                 /* espace texte/icône (au cas où) */
  padding: .6rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid var(--alert-border);
  background: var(--alert-bg);
  color: var(--alert-color);
  border-radius: .5rem;
  cursor: pointer;
  width: auto !important;
  /* Micro-anim */
  transition: background .2s, transform .15s, box-shadow .15s;
  box-shadow: 0 2px 4px rgba(0,0,0,.10);
}

.btn-alert i {                   /* icône un peu plus grande */
  font-size: 1.25em;
}

.btn-alert:hover,
.btn-alert:focus-visible {
  background: var(--alert-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0,0,0,.15);
  outline: none;                /* évite le double contour */
}

.btn-alert:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* Option : mode sombre automatique */
@media (prefers-color-scheme: dark) {
  .btn-alert {
    --alert-bg:       #332100;
    --alert-bg-hover: #503400;
    --alert-border:   #ff9800;
    --alert-color:    #ffb547;
  }
}

@media all and (orientation: portrait) {
  #abcObsA {
    width: 200vw !important;
    left: -50%;
  }

}

.icon-outline {
  color: #fff;            /* couleur intérieure du pictogramme */
  text-shadow:
    /* quatre coins */
    -1px -1px 0 #f00,
     1px -1px 0 #f00,
    -1px  1px 0 #f00,
     1px  1px 0 #f00,
    /* côtés */
     0   -1px 0 #f00,
     1px   0  0 #f00,
     0    1px 0 #f00,
    -1px   0  0 #f00;
}

@media all and (orientation: portrait) {
.divTriangle {
  width: 80px;
}
}

/* -----------------------------------------------------------------
   BOUTON ALERTE ROUGE – style moderne, ombre + relief
------------------------------------------------------------------*/
.btn-alert{
  /* mise en page */
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.65rem 1.2rem;
  border-radius:.5rem;

  /* couleurs */
  background:#dc3545;                   /* rouge “danger” */
  color:#fff;
  border:1px solid #b02a37;             /* liseré plus sombre */

  /* relief & ombre */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35), /* léger highlight en haut */
    inset 0 -1px 0 rgba(0,0,0,.15),      /* léger creux en bas    */
           0 4px 10px rgba(0,0,0,.25);   /* ombre portée */
  transition:
    transform .08s ease-out,
    box-shadow .08s ease-out;
  font-weight:600;
  cursor:pointer;
  user-select:none;
}

/* survol : un tout petit éclaircissement */
.btn-alert:hover{
  background:#e6505e;
}

/* focus clavier : halo accessible */
.btn-alert:focus-visible{
  outline:2px solid #ffc107;
  outline-offset:3px;
}

/* clic : effet d’enfoncement */
.btn-alert:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 1px 1px rgba(0,0,0,.25),
    0 2px 5px rgba(0,0,0,.2);
}