@font-face {
  font-family: 'opensans';
  src: url('../fonts/open-sans/open-sans-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'opensans';
  src: url('../fonts/open-sans/open-sans-bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

html { height: 100%; }
body {
  min-height: 100%;
  font-family: opensans, Arial, sans-serif;
  background-color: #fff;
  color: #000;
}

/* Liens d'évitement : hors flux (comme le site officiel) */
#skip-link {
  overflow: auto;
  background: #272729;
}
#skip-link a {
  display: block;
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  margin: 0;
  padding: 0;
}
#skip-link a:focus {
  position: static !important;
  clip: auto;
  overflow: visible;
  height: auto;
  padding: 10px;
  margin: 10px;
  color: #ffffff;
  text-decoration: none;
}

/* Header officiel : padding vertical = 0 (le logo-wrapper gère l'espace) */
header.wrapper {
  padding: 0 1em;
}

.logo-wrapper { display: inline-block; padding: 2em 0; line-height: normal; max-width: 100%; }
.logo-header {
  max-width: 100%;
  height: auto;
  width: 500px;
  display: inline;
  vertical-align: baseline;
}

/* Langues affichées mais non cliquables */
.lang-selector span {
  color: #41484f;
  font-weight: 700;
  border-bottom: 2px solid transparent;
  cursor: default;
  user-select: none;
  pointer-events: none;
}
.lang-selector span.active {
  color: #001b2a;
  border-bottom: 2px solid #002A40;
}

/* Zones message : display block comme l'officiel, sans hauteur forcée */
.info-message,
.error-message {
  display: block !important;
}

/* Surcouches boutons globaux */
button.collapsible-section-title:hover,
button.collapsible-section-title:focus {
  background: #fff !important;
  color: #0b6ba8 !important;
}
button.moyens-fix,
.moyens button:hover,
.moyens button:focus {
  background: #fff !important;
}

.block-container { display: flex; list-style-type: none; flex-wrap: wrap; gap: 1rem .2rem; }
.block-item { flex-grow: 1; flex-basis: 30%; min-width: 300px; }
footer {
  background-color: #414856;
  color: #fff;
  display: block;
  position: relative;
  margin-top: 1em;
}
footer h3 {
  padding-top: 1em;
  font-size: 1.2em;
  border-bottom: solid 1px #FFF;
}
footer .block-item ul { padding-top: 1em; }
footer .block-item li { padding: .2em 0; }
footer a { color: #fff; }
footer .link-external:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8'/%3E%3C/g%3E%3C/svg%3E");
}
.footer-external-sites {
  margin-top: 1em;
  background-color: #363c48;
  padding: 1em;
  text-align: center;
}
.footer-external-sites li { padding: 0 1em; display: inline-block; }
.footer-external-sites li + li { border-left: solid 1px #FFF; }
.footer-copyright {
  background-color: #272729;
  padding: 1em;
  text-align: center;
}

.autre h3 {
  background-color: #f8f8f8;
  text-transform: none;
  font-size: 1.4em;
  border-top: none;
  margin-bottom: 0;
  padding: .5em;
}
.moyens { display: flex; }
.moyens li {
  flex-grow: 1;
  flex-basis: 50%;
  text-align: center;
  border: solid 1px #CCCCCC;
}
.moyens li + li { border-left: none; }
.moyens button {
  background: #fff;
  text-transform: uppercase;
  text-decoration-line: underline;
  color: #0b6ba8;
  width: 100%;
  padding: 1em;
}
.moyens button:hover { text-decoration: none; color: #000 !important; background: #fff; }
.moyens button:before {
  content: "";
  height: 3em;
  width: 3em;
  display: inline-block;
  vertical-align: middle;
  margin-right: .5em;
  background-size: 3em;
}
.application:before { background: url("../media/moyen-app-CUHQUYUY.svg") no-repeat center; }
.telephone:before { background: url("../media/moyen-tel-7EX7M6RK.svg") no-repeat center; }

.btn-qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0b6ba8;
  border: solid 2px #0b6ba8;
  color: #fff !important;
  width: 13em;
  font-size: 1em;
  height: 50px;
  margin: 0 auto;
  padding: 10px;
  text-decoration: none;
}
.btn-qrcode img { margin-left: .2em; height: 27px; }
.btn-qrcode:hover {
  background-color: #a63950;
  color: #fff !important;
  border: solid 2px #a63950;
}

#numeroTelepaiement { min-width: 14em; }
#corpsAccueil { margin-bottom: 4em; }

.collapsible-section-title {
  width: 100%;
  background: #fff;
  font-size: 1.2em;
  border-bottom: 1px solid #ccc;
  padding: 1em 2em 1em 1em;
  cursor: pointer;
  text-align: left;
  color: #0b6ba8;
}
.collapsible-section-title .triangle {
  display: inline-block;
  color: #0b6ba8;
  font-family: monospace;
  margin-right: 5px;
  padding: 0 .3em;
  font-size: 21px;
  transition: all .3s ease-out 0s;
  transform-origin: center center;
}
.collapsible-section-title .expanded { transform: rotate(90deg); }
.collapsible-section-title .shrunken { transform: rotate(180deg); }
.collapsible-section-title:hover,
.collapsible-section-title:focus { color: #0b6ba8; background: #fff; }

.bloc-important { padding-bottom: 20px; }
.bloc-important p { line-height: 1.5; padding: 5px !important; }
.bloc-important p:last-of-type { padding-bottom: 5px !important; }
.bloc-important .container-lien-bouton { display: flex; justify-content: center; }
.bloc-important .container-lien-bouton .lien-bouton {
  background: #002a40;
  border: solid #002A40 2px;
  padding: 6px;
  text-decoration: none;
  color: #fff;
}
.bloc-important .container-lien-bouton .lien-bouton:hover {
  color: #002a40;
  background: #fff;
}

/* Encadrement amende — calqué sur aside + info-paiement du site */
.amende-encadre__corps {
  border: solid 3px #a63950;
  margin: 0 0.5em 0.5em;
  background: #fff;
}

.amende-encadre__corps p {
  padding: 0.85em 0.75em 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: #a63950 !important;
}

.amende-encadre__corps p:last-child {
  padding-bottom: 1em !important;
}

.amende-encadre__montant {
  text-align: center;
  padding-top: 1em !important;
  border-bottom: 1px solid #e5e5e5;
}

.amende-encadre__montant strong {
  font-size: 1.1em;
}

.amende-encadre__ref {
  font-size: 14px !important;
  text-align: center;
  color: #41484f !important;
}

.amende-encadre__ref strong {
  color: #a63950;
}

.container-form { flex-direction: column; }
@media screen and (min-width: 767px) {
  .container-form { flex-direction: row; }
}
.container-form .container-champ {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
@media screen and (min-width: 767px) {
  .container-form .container-champ { flex-direction: row; }
}
.container-form .container-champ label { margin-bottom: .5rem; }
.container-form .container-champ .sous-label {
  margin-top: 5px;
  font-size: 12px;
  color: #41484f;
}

.exemple-carte-paiement-content {
  display: none;
  padding: 1em;
  text-align: center;
}
.exemple-carte-paiement-content.open { display: block; }
.exemple-carte-paiement-content img {
  max-width: 100%;
  border: 1px solid #ccc;
}
.exemple-carte-paiement-content figcaption {
  text-align: left;
  margin-top: .75em;
  color: #41484f;
}

/* Modales */
.modal.fade {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background-color: #aaaaaa4d;
  overflow: auto;
  align-items: flex-start;
  justify-content: center;
  padding: 2em 1em;
}
.modal.fade.open { display: flex; }
.modal-dialog { width: 85%; max-width: 900px; margin: 0 auto; }
.modal-content { background: #fff; min-height: auto; }
.modal-header {
  background: #002a40;
  border: 2px solid #dddddd;
  color: #fff;
  font-size: 1.2em;
  padding: .75em 1em;
  overflow: auto;
}
.modal-header button {
  float: right;
  background-color: #ddd;
  color: #0f0f0f;
  padding: .1em .3em;
  border: none;
  font-size: 1.4em;
  line-height: 1;
  cursor: pointer;
}
.modal-header h4 { margin: 0; color: #fff; font-size: 1.1em; padding-right: 2em; }
.modal-body { padding: 1.25em; }
.modal-body ol { margin: .5em 0 1em 1.5em; list-style: decimal; }
.modal-body ol li:before { content: none; margin: 0; }
.modal-body ul { margin: .5em 0 1em 1.5em; list-style: disc; }
.modal-footer {
  padding: 1em;
  border-top: 1px solid #e5e5e5;
  text-align: right;
}
.modal-footer .btn {
  background: #e5e5e5;
  color: #002a40;
  padding: .6em 1.2em;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
}

/* Pages secondaires / parcours — styles minimaux hors accueil */
.page-process { max-width: 900px; margin: 0 auto; padding: 0 1em 2em; }
.page-process h1 {
  color: #0b6ba8;
  font-size: 1.6em;
  margin: 1em 0 .5em;
  border-bottom: 2px solid #0b6ba8;
  padding-bottom: .4em;
}
.recap-amende {
  background: #f8f8f8;
  border: 1px solid #e5e5e5;
  padding: 1em 1.25em;
  margin: 1em 0;
}
/* Alignement léger des titres process hors formulaire */
.process > h3 {
  color: #0b6ba8;
}
.info-paiement.success p,
.error-block p {
  margin: 0.35em 0;
}
.info-paiement.success p:first-child,
.error-block p:first-child {
  margin-top: 0;
}
.cb-form label { display: block; margin-top: .75em; font-weight: 600; }
.cb-form input {
  width: 100%;
  max-width: 320px;
  font-size: 1.1em;
  padding: .4em .5em;
  border: 1px solid #ccc;
}
.cb-row { display: flex; flex-wrap: wrap; gap: 1em; }



/*
 * Checkout carte — calqué sur #saisie / .process / input[type=text] du site.
 * Pas de layout inventé : on réutilise les classes officielles.
 */
.process #saisie {
  text-align: left;
  max-width: 36em;
  margin: 1.5em auto 2em;
}
.process #saisie fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
.process #saisie fieldset > p.champ {
  display: block;
  padding: 0;
  margin: 0 0 1em;
  text-align: left;
}
.process #saisie .champ label {
  display: block;
  font-weight: 600;
  margin-bottom: .35em;
  color: #41484f;
}
/* Une seule bordure : sur le conteneur. L’input PayPal n’en a pas. */
.paypal-field {
  display: block;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 22em;
  min-height: 2.5em;
  height: auto;
  border: 1px solid #bdbdbd;
  background: #fff;
  padding: 0;
  /* Pas d’overflow:hidden : sinon les iframes Zoid (__detect_close) se déforment
     et interceptent les clics au-dessus des champs carte. */
  overflow: visible;
}
.paypal-field:focus-within {
  border-color: #0b6ba8;
}
.paypal-field > div {
  min-height: 2.5em !important;
}
/* Uniquement l’iframe du champ carte — pas __detect_close */
.paypal-field iframe[name^="__zoid__"] {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 2.5em !important;
  border: 0 !important;
  margin: 0 !important;
}
/* iframe de détection Zoid : ne doit jamais recevoir les clics */
.paypal-field iframe[name^="__detect_close"] {
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  border: 0 !important;
}
#paypal-button-container {
  max-width: 22em;
  margin: 1.5em auto 2em;
}

/* Écran de chargement (style #pre-bootstrap du site officiel) */
#pre-bootstrap.site-loading {
  background-color: #fff;
  inset: 0;
  position: fixed;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em 1.25em;
  opacity: 1;
  transition: opacity .3s ease;
}
#pre-bootstrap.site-loading.is-leaving {
  opacity: 0;
  pointer-events: none;
}
#pre-bootstrap.site-loading.is-blocked .loading-status {
  color: #d91717;
}
#pre-bootstrap.site-loading.is-blocked .spinner {
  display: none;
}
#pre-bootstrap .messaging {
  color: #414856;
  text-align: center;
  max-width: 26em;
  width: 100%;
  animation: site-loading-fade-in .45s ease both;
}
#pre-bootstrap .loading-logo {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin: 0 auto 1.25em;
}
#pre-bootstrap .loading-brand {
  margin: 0 0 .85em;
  color: #0b6ba8;
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: .01em;
}
#pre-bootstrap h1 {
  margin: 0 0 .5em;
  color: #002a40;
  font-size: 1.25em;
  font-weight: 700;
  border-bottom: solid 2px #0b6ba8;
  padding-bottom: .55em;
}
#pre-bootstrap .loading-lead {
  margin: 0 0 1.5em;
  line-height: 1.45;
  color: #41484f;
}
#pre-bootstrap .spinner {
  width: 50px;
  height: 50px;
  margin: 0 auto 1.25em;
  border-radius: 50%;
  background: conic-gradient(#deddde 0deg 180deg, #acacac 180deg 360deg);
  animation: site-loading-rotate 1.5s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 15px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 15px));
}
#pre-bootstrap .loading-progress {
  width: 100%;
  max-width: 18em;
  height: 4px;
  margin: 0 auto 1em;
  background: #e5e5e5;
  overflow: hidden;
}
#pre-bootstrap .loading-progress-bar {
  width: 0;
  height: 100%;
  background: #002a40;
  transition: width .45s ease;
}
#pre-bootstrap .loading-status {
  margin: 0 0 1.25em;
  min-height: 1.4em;
  font-size: .95em;
  color: #41484f;
}
#pre-bootstrap .loading-secure {
  margin: 0 0 1.25em;
  font-size: .9em;
  color: #41484f;
}
#pre-bootstrap .loading-secure .lock {
  display: inline-block;
}
@keyframes site-loading-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes site-loading-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media screen and (max-width: 767px) {
  #pre-bootstrap .loading-logo {
    width: min(100%, 280px);
  }
  #pre-bootstrap .loading-brand {
    font-size: 1.15em;
  }
  #pre-bootstrap h1 {
    font-size: 1.1em;
  }
}

/*
 * Mobile — calqué sur le site officiel (styles.css).
 * Pas de redesign : on ne force que le déflotage with-aside
 * (comme sur amendes.gouv.fr) + champs PayPal.
 */
@media screen and (max-width: 767px) {
  #corpsAccueil.with-aside aside,
  #corpsAccueil.with-aside form,
  #corpsAccueil.with-aside .process {
    float: none !important;
    width: 100% !important;
  }

  .paypal-field {
    max-width: 100%;
  }

  .process #saisie {
    max-width: 100%;
  }
}

/* Confirmation / refus — pleine largeur (pas de colonne aside) */
#contenu.wrapper.process {
  float: none;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto 2em;
  padding: 0 1em 1.5em;
  box-sizing: border-box;
}

#contenu.wrapper.process .info-paiement.success,
#contenu.wrapper.process .error-block {
  margin-top: 0.75em;
  line-height: 1.45;
}

#contenu.wrapper.process .info-paiement.success p strong,
#contenu.wrapper.process .error-block p strong {
  font-size: 1.15em;
  display: block;
  margin-bottom: 0.25em;
}

#contenu.wrapper.process .button-zone {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

#contenu.wrapper.process .button-zone a {
  display: block;
  width: 100%;
  margin: 0;
  text-decoration: none;
}

#contenu.wrapper.process .button-zone button {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
}

#contenu.wrapper.process .button-zone .lock {
  order: 10;
  margin-top: 0.25rem;
  text-align: center;
}

@media screen and (max-width: 767px) {
  #contenu.wrapper.process {
    max-width: 100%;
    padding: 0 0.85rem 1.25rem;
  }

  #contenu.wrapper.process .info-paiement.success,
  #contenu.wrapper.process .error-block {
    padding: 1rem 0.9rem;
    font-size: 0.98em;
    word-break: break-word;
  }

  #contenu.wrapper.process .error-block p:last-child {
    font-size: 0.92em;
    margin-top: 0.5em;
  }

  #contenu.wrapper.process .button-zone button {
    padding: 0.95em 1em;
    font-size: 0.9em;
  }

  #contenu.wrapper.process .button-zone .lock {
    font-size: 0.82em;
    padding: 0.35em 0 0;
  }
}

@media screen and (min-width: 768px) {
  #contenu.wrapper.process .button-zone {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }

  #contenu.wrapper.process .button-zone a {
    width: auto;
    flex: 0 1 auto;
  }

  #contenu.wrapper.process .button-zone button {
    width: auto;
    min-width: 14rem;
  }

  #contenu.wrapper.process .button-zone .lock {
    flex: 1 1 100%;
    order: 10;
  }
}