/* Thème « Destination Démo ».
 * Dérivé de la mise en page du thème rddm, sans police sous licence ni appel
 * externe, couleurs en dur rebranchées sur la palette. */

@media only screen and (max-width: 991px) {
  .left-body-panel::after {
    background-size: 75vw!important;
  }
}

h1 
{
  color: var(--color-second);
  font-family: "EuclidFlex", sans-serif;
}

h2
{
  color: var(--color-second);
  font-family: "EuclidFlex", sans-serif;
}

h3
{
  color: var(--color-second);
  font-family: "EuclidFlex", sans-serif;
}

a, b, .bold
{
  font-family: "EuclidFlex", sans-serif;
}

body {
  background-color: #fff;
}

/* En-tête aligné sur celui des autres guichets de la démonstration : bandeau
 * dégradé, logotype centré à 130 px de haut, filet pétrole en bas. Le div est
 * vide dans ce dépôt, le logotype passe donc par une couche de fond plutôt que
 * par un <img> comme ailleurs — le rendu est le même. */
#header-logo {
	position: relative;
	background-color: #ffffff;
	background-image:
		url('../../images/demo/logo.svg'),
		linear-gradient(to bottom, transparent 30%, #ffffff),
		url('../../images/demo/bg-entete.svg');
	background-size: auto 130px, 100% 100%, 400px auto;
	background-position: center 38%, center, center;
	background-repeat: no-repeat, no-repeat, repeat;
	border-bottom: 3px solid #1C6E7A;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
	width: 100%;
	margin: auto;
	height: 220px;
}

@media only screen and (max-width: 767px)  {
  #header-logo
  {
    height: 160px;
    max-height: 160px !important;
    background-size: auto 90px, 100% 100%, 300px auto;
    background-position: center 36%, center, center;
  }
}

@media only screen and (max-width: 575px) {
  #header-logo {
    height: 120px;
    max-height: 120px !important;
    background-size: auto 66px, 100% 100%, 240px auto !important;
    background-position: center 34%, center, center !important;
  }
}

/* Panneau principal : fond gris très clair, textes en noir. La marque n'est plus qu'une
 * texture en coin, transparente dans le fichier lui-même (le thème rddm y place
 * un filigrane géant en background-attachment: fixed, gênant pour la lecture). */
.left-body-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #F4F6F7;
  background-image: url('../../images/demo/filigrane.svg');
  background-repeat: no-repeat;
  background-size: 200px auto;
  background-position: right -34px bottom -26px;
  z-index: -1;
  pointer-events: none;
}

/* Textes sur fond clair : en noir (--color-main vaut blanc dans ce thème) */
.single-icon,
.left-body-panel-desc,
#translation_adult_management,
#translation_children_management,
#translation_start_comment,
#translation_title_order_card,
#translation_title_payment_page,
#translation_all_infos_correct,
.content-create-card-info-amount{
  color: #000;
}

#footer {
  display: block;
  justify-content: space-between;
  width: 83vw;
}

@media only screen and (max-width: 767px)  {
  #footer img {
    max-width: 225px !important;
  }
}

#footer img {
  max-height: 60px;
}

#footer-links {
  margin: 10px 0 40px 0;
}

#available-card-management {
  border-bottom-color: var(--color-main);
}

.action-button {
  border: 0px;
  /*width: 360px;*/
}

/* Boutons d'action (dont #start-create-card-button) : texte lisible sur le fond du bouton */
.enabled-action-button,
.disabled-action-button {
  width: 100%;
  font-weight: bold;
}

.enabled-action-button {
  background-color: var(--color-button-primary);
  color: #fff;
  box-shadow: 0 3px 8px rgba(38, 50, 56, 0.25);
}

.enabled-action-button:hover {
  color: #fff;
}

.disabled-action-button,
.disabled-action-button:hover {
  background-color: #D5DCDF !important;
  color: var(--color-dark-grey);
}

#current-lang {
  color: var(--color-dark-grey);
  font-size: 20px;
  text-transform: uppercase;
  margin-right: 2px;
}

#translation_home_error,
#translation_payment_error {
  color: var(--color-red);
}

.card-guest-body {
  padding-top: 10px;
}

.card-guest-header {
  color: var(--color-second-light);
  font-weight: bold;
  margin-bottom: 5px;
}

/*
===========================================================
*/

#translation_title_home_page {
  font-size: 24px;
  font-weight: bold;
  line-height: 30px;
  margin-bottom: 25px;
}

#translation_title_home_page,
#translation_title_create_card,
#available-card-text,
#available-card-quantity,
#translation_command_title {
  font-family: var(--theme-font-family-title);
}

#send_cards,
#download_cards,
#translation_processing_cards_info,
#translation_fail_processing_cards_info,
#translation_fail_processing_cards_info_bold {
  background-color: var(--color-main);
  color: var(--color-second-light);
}

/*
=========================================================== Lisibilité (fond clair)
*/

/* Le panneau gauche a un fond clair : on neutralise le text-white de Bootstrap */
.left-body-panel.text-white {
  color: #000 !important;
}

#translation_title_home_page,
#translation_discover,
#translation_command_title,
#translation_title_create_card,
#translation_title_payment_page {
  color: #000;
}

/* En-têtes de carte ("Carte 1", "Adresse de facturation") : fond foncé
 * (--color-card-header), textes et icônes en blanc */
#translation_customer,
.card-guest-header,
.card-guest-header h5,
.card-guest-header span,
.card-guest-header .bi,
.card-guest-header .remove-card-btn {
  color: #fff !important;
}

.card-guest-header .remove-card-btn:hover {
  color: var(--color-light-blue) !important;
}

/* Bouton "Ajouter une personne" : btn-outline-light est invisible sur fond clair */
#translation_add_person_button {
  color: var(--color-second);
  border-color: var(--color-second);
  background-color: #fff;
}

#translation_add_person_button:hover {
  color: #fff;
  background-color: var(--color-second);
}

/* Bouton "En savoir plus" */
#button-more-info {
  color: var(--color-second);
  border: 1px solid var(--color-second);
}

/* Champs des cartes (nom, prénom, date de naissance, adresse...) au clic :
 * un seul contour pétrole, sans le halo Bootstrap ni l'outline d'accessibilité
 * (double bordure), et sans le rouge-orangé des champs encore vides. */
.input-field input:focus,
.input-field input:focus-visible,
.input-field select:focus,
.input-field select:focus-visible,
.input-field input.inputfailed:focus,
.input-field select.inputfailed:focus {
  outline: none !important;
  box-shadow: none !important;
  border: 2px solid var(--color-second) !important;
  color: var(--color-darker-grey) !important;
}

/* Code promo (flag promoCodeEnabled) */
#promo-code-management {
  padding: 20px 0;
  margin: 10px 0;
}

#promo-code-management .label-style {
  display: block;
  margin-bottom: 8px;
  color: #000;
  font-weight: bold;
}

/* Champ + bouton sur une seule ligne, alignés sur le reste du panier.
 * La règle commune des input (width 80% !important, margin 5%) décalait le champ. */
#promo-code-management .input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

#promo-code-management #promo-code-input {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: auto !important;
  max-width: none;
  margin: 0;
  height: 42px;
  padding: 1px 15px;
  border-radius: 22px 0 0 22px !important;
}

#promo-code-apply-button {
  height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 0 22px 22px 0 !important;
  background-color: var(--color-button-primary);
  color: #fff;
  font-weight: bold;
}

#promo-code-apply-button:hover {
  background-color: var(--color-button-hover);
  color: #fff;
}

#promo-code-applied .bi,
#promo-code-remove-button {
  color: var(--color-second);
}

.right-body-panel p#promo-code-error {
  color: var(--color-red) !important;
  font-size: var(--font-size-14);
}

.right-body-panel #discount-management p {
  color: var(--color-green) !important;
}

#discount-management {
  display: flex;
  justify-content: space-between;
}

#card-and-discount {
  display: inline;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: auto;
  width: 100%;
  height: 200px;
}


/* ───────────────────────────────────────────────────────────────────────────
 * Améliorations propres au thème de démonstration.
 * Elles ne concernent que ce thème : aucun client n'est affecté. Si elles font
 * leurs preuves ici, elles auront vocation à remonter dans la feuille commune.
 * ─────────────────────────────────────────────────────────────────────────── */

/* 1. Navigation au clavier. Le contour par défaut disparaît sur les fonds
 *    colorés ; on le rend visible partout, sans gêner la souris. */
.left-body-panel :is(a, button, input, select, textarea):focus-visible,
:is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #23808D;
  outline-offset: 2px;
  border-radius: 3px;
}

/* 2. Longueur de ligne. Au-delà d'environ 70 caractères l'œil perd la ligne
 *    suivante ; le panneau s'étirait sur toute sa largeur en grand écran. */
.left-body-panel-desc,
#translation_start_comment {
  max-width: 62ch;
}

/* 3. Boutons : un retour visuel au survol et au clic, respectueux des
 *    préférences système en matière d'animation. */
button, .btn {
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
button:active, .btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  button, .btn { transition: none; }
  button:active, .btn:active { transform: none; }
}

/* 4. État désactivé lisible : le gris seul ne dit pas toujours « inactif ». */
button:disabled, .btn:disabled, button[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

/* 5. Les images ne débordent jamais de leur conteneur, y compris sur les
 *    petits écrans où le guichet est le plus utilisé. */
img { max-width: 100%; height: auto; }