:root {
    /* Couleurs */
    --embleu: #336699;
    --embleulight: #c8dbec;
    --emnoir: #333333;
    --emgris: #ced2d4;
    --emblanc: #efefef;
    --emjaune: #cccc65;
    --emrouge: #993333; 

    --litewhite: #e8ecf0;
    --glow: #f8f7ee;
    --gris2: #8d8d8d;

    --harmonie: rgba(237, 244, 248, 0.66);
    --symphonique: rgba(248, 233, 229, 0.66);
    --opera: rgba(238, 237, 250, 0.66);
    --chambre: rgba(238, 248, 232, 0.66);
    --piano: rgba(231, 237, 243, 0.66);
    --autres: rgba(247, 240, 231, 0.66);

    /* Tailles */
    --hauteurmenu: 64px;
    --logolargeur: 256px;
    --fontsize: 1.25em;
    --btnheight: 60px;
    --btnminwidth: 240px;
    --heroheight: 800px;

    /* Durées */
    --transition: 0.25s;
}

.general-client {
    width: 100%;
    min-height: 100vh;
    background-color: var(--emblanc);
    display: flex;
    flex-wrap: nowrap;
}

.client-gauche {
    width: 500px;
    /* height: 100vh;  <-- à retirer */
    position: fixed;

    top: var(--hauteurmenu);
    height: calc(100vh - var(--hauteurmenu));

    background-color: var(--embleu);
    padding: 50px;
    box-sizing: border-box;
    color: var(--emblanc);
    transition: width var(--transition);
    z-index: 1;

    overflow-y: auto;     /* scroll vertical uniquement si besoin */
    overflow-x: hidden;   /* évite le scroll horizontal parasite */
}

.client-gauche::-webkit-scrollbar {
  width: 10px;
}

.client-gauche::-webkit-scrollbar-track {
  background: rgba(255,255,255,.08);
}
.client-gauche::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.28);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0); /* effet “thumb” fin */
  background-clip: padding-box;
}
.client-gauche::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.40);
  background-clip: padding-box;
}

.client-gauche {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.30) rgba(255,255,255,.10);
}



.client-gauche a {
    color: var(--emblanc);
}

.client-line-avatar {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;  
    gap: 20px;
    width: 100%;
    margin-bottom: 50px;
}

.client-line-avatar img {
    border-radius: 50%;
    margin: 0;
    padding: 0;
    max-width: 100px;
    height: auto;
}

.client-line {
    height: var(--btnheight);
    width: 100%;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center; 
    text-indent: 25px;
}

.line-active, .line-active a {
    background-color: var(--emblanc);
    color: var(--embleu);
}

.client-line a {
    text-decoration: none;
}

.client-line a:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
    font-weight: 700;
    transition: var(--transition);
}

.client-line-item {
    margin-left: 25px;
}

.client-reduire {
    position: absolute;
    display: block;

    margin-top: -45px;
    right: 5px;
    width: var(--btnheight);
    height: var(--btnheight);    
    border: 1px solid var(--emblanc);

    padding: 12px;
    box-sizing: border-box;
    text-indent: 8px;
}

.client-reduire:hover {
    cursor: pointer;
    background-color: var(--emblanc);
    color: var(--embleu);
    transition: var(--transition);
}

.client-droit {
    flex: 1;           /* prend le reste de la largeur */
    z-index: 0;
    margin-top: var(--hauteurmenu);
    color: var(--emnoir);
    box-sizing: border-box;
    margin-left: 500px;
    top: 0;
    padding: 50px;
}

/* État réduit */
.client-gauche.collapsed{
  width: var(--btnheight);
  padding: 10px 0;
  overflow-y: auto;     /* garde le scroll si menu trop long */
  overflow-x: hidden;
}


/* Masquer les libellés */
.client-gauche.collapsed .client-line-item,
.client-gauche.collapsed .client-line-avatar span {
  display: none;
}

/* Centrer les icônes dans chaque ligne */
.client-gauche.collapsed .client-line {
  justify-content: center;
  text-indent: 0;
}

/* Ajuster l’avatar */
.client-gauche.collapsed .client-line-avatar {
  justify-content: center;
  gap: 0;
  margin-top: var(--btnheight);
}

.client-gauche.collapsed .client-line-avatar img {
    width: calc(var(--btnheight ) - 10px);
    height: auto;
}

/* Faire pivoter la flèche de réduction */
.client-gauche.collapsed .client-reduire i {
  transform: rotate(180deg);
  transition: transform var(--transition);
}

.client-gauche.collapsed .client-reduire {
    margin-top: -5px;
    right: 5px;
    text-indent: -4px;
    width: calc(var(--btnheight) - 10px);
    height: calc(var(--btnheight) - 10px);
    padding: 8px;
}

.client-droit.extended {
    margin-left: var(--btnheight);
}

button[type] {
  margin-top: 20px;
  margin-bottom: 20px;
}

button[type]:hover {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-style: dotted;
  transition: var(--transition);
  cursor: pointer;
}

.client-btn {
    display: block;
    border: 1px solid var(--embleu);
    height: var(--btnheight)!important;
    width: 375px;
    border-radius: calc(var(--btnheight) / 2);
    text-decoration: none;
    color: var(--embleu);
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
}

.client-btn:hover {
    background-color: var(--embleu);
    color: var(--emblanc);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-style: dotted;
    transition: var(--transition);
}

.client-tableau table {
  width: 100%;
  border-collapse: collapse; 
}

.client-tableau thead tr {
    background: var(--emnoir);
    color: var(--emblanc);
}

.client-tableau tbody td {
    height:var(--btnheight);
    /*line-height:var(--btnheight);*/
    word-break:break-word;
    vertical-align:middle;
    overflow:hidden; 
}

.client-tableau img {
  width: calc(var(--btnheight) * 0.75);
  height: auto; 
  display: block;  
  margin: auto;  
  transition:transform var(--transition);
}

.client-tableau img:hover {
  transform:scale(1.33);
}

.client-tableau tbody tr:nth-child(even) {
    background: #e4e7ed;       /* ajuste la teinte si besoin */
}

.client-tableau th,
.client-tableau td {
    padding: 8px 12px;
    text-align: left;
    word-break: break-word;    /* évite les débordements */
}

.infotalic {
  font-size: 0.75em;
  font-style: italic;
}

.order-list {
  display: grid; 
  gap: 2rem; 
}

.order-list a {
  text-decoration: none;
  color: var(--embleu);
  font-weight: 700;
}

.order-list a:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  transition: var(--transition);
}

.order-card { 
  /*background:#fff; */
  border: 1px solid var(--gris2); 
  border-radius: 8px;
  box-shadow:0 4px 8px rgba(0,0,0,.05); 
  padding:1.5rem; 
}

.order-head {
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  flex-wrap: wrap; 
  gap: .5rem; 
}

.order-head h2 {
  margin: 0; 
  font-size: 1.25rem; 
}

.price-tag {
  font-weight: 700; 
  white-space: nowrap; 
}

.line-list li { 
  margin: .5rem 0; 
  line-height: 1.4; 
}

.line-price {
  white-space: nowrap; 
}

sup.vat {
  font-size: .75rem; 
}

.pagination { 
  display: flex; 
  gap: .5rem; 
  margin: 2rem 0; 
  justify-content: center; 
}

.pagination button {
  border: 1px solid var(--emgris); 
  padding:.4rem .8rem;
  border-radius: 8px; 
  cursor: pointer; 

  width: var(--btnheight);          /* largeur fixe           */
  height: var(--btnheight);         /* hauteur fixe           */
  display: inline-flex;             /* pour centrer le chiffre*/
  align-items: center;
  justify-content: center;
  padding: 0;                       /* on neutralise l’ancien padding */
  font-size: 1rem;                  /* ajuste si besoin       */
  box-sizing: border-box;           /* inclut la bordure dans les 60 px */
}

.pagination .active { 
  background: var(--embleu); 
  color: var(--emblanc); 
}

/* coloration en fonction de l’attribut data-status */
.status[data-status="payée"]        { color:#2e7d32; font-weight:600; }
.status[data-status="en attente"]   { color:#f57f17;                 }
.status[data-status="rejetée"],
.status[data-status="impayée"]      { color:#c62828;                 }

/* Conteneur pour scroll horizontal si nécessaire */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Styles communs aux deux tableaux */
.offers-table,
.bons-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-family: sans-serif;
}

/* En-tête sombre + texte clair */
.offers-table th,
.bons-table th {
    background: var(--emnoir);
    color: var(--emblanc);
    padding: 8px;
    text-align: left;
}

/* Cellules */
.offers-table td,
.bons-table td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

/* Zébrage léger */
.offers-table tbody tr:nth-child(even),
.bons-table tbody tr:nth-child(even) {
  background: #e4e7ed;
}

/* Hover */
.offers-table tbody tr:hover,
.bons-table tbody tr:hover {
  background: var(--embleulight);
}

/* Icônes dans les cellules (si utilisées) */
.offers-table img,
.bons-table img {
  width: 24px;
  height: auto;
  vertical-align: middle;
}

/* sous-titre italique */
p.italique {
  font-style: italic;
}

.groupe-input-v2,
.pays-groupe2 {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.95rem;
}

.groupe-input-v2 label,
.pays-groupe2 label {
    display: block;
    font-weight: 600;
    color: #243046;
    letter-spacing: 0.01em;
}

.required {
    color: #c0392b;
}

.groupe-input-v2 input,
.groupe-input-v2 select,
.pays-groupe2 input,
.pays-groupe2 select {
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #ccd2dd;
    font-size: 0.95rem;
    line-height: 1.4;
    background-color: #fdfdfd;
    color: #1c2533;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.groupe-input-v2 input:focus,
.groupe-input-v2 select:focus,
.pays-groupe2 input:focus,
.pays-groupe2 select:focus {
    outline: none;
    border-color: #1B365D; /* ton bleu CP/EMGC */
    box-shadow: 0 0 0 2px rgba(27, 54, 93, 0.14);
    background-color: #ffffff;
}

.groupe-input-v2 input[disabled],
.pays-groupe2 input[disabled] {
    background-color: #f3f5f8;
    color: #7a8290;
    cursor: not-allowed;
}

.groupe-input-v2 .erreur,
.pays-groupe2 .erreur {
    min-height: 1.1em;
    font-size: 0.8rem;
    color: #c0392b;
    margin: 0;
}

.pays-groupe2 {
    grid-column: 1 / -1; /* occupe toute la largeur du formulaire */
}

.pays-groupe2 .A_NOMMER {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.client-btn-2 {
    display: block;
    background-color: var(--embleu);
    height: var(--btnheight)!important;
    width: 375px;
    border-radius: calc(var(--btnheight) / 2);
    text-decoration: none;
    color: var(--emblanc);
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
}

.client-btn-2:hover {
    background-color: var(--emblanc);
    border: 1px solid var(--embleu);
    color: var(--embleu);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-style: dotted;
    transition: var(--transition);
}

.client-btn-3 {
    display: block;
    border: none;
    background-color: var(--emrouge);
    height: var(--btnheight)!important;
    width: 375px;
    border-radius: calc(var(--btnheight) / 2);
    text-decoration: none;
    color: var(--emblanc);
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
}

.client-btn-3:hover {
    background-color: var(--emblanc);
    border: 1px solid var(--emrouge);
    color: var(--emrouge);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-style: dotted;
    transition: var(--transition);
}

/* Favoris */

.favlist-wrap {
  margin-top: 16px;
}

.favlist {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.favrow {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    background: #fff;

    cursor: pointer;
    text-decoration: none;
    color: inherit;

    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

.favrow { min-width: 0; }

.favrow:hover {
    background: rgba(27,54,93,0.045); /* petit rappel de ton bleu 534C (#1B365D) */
    border-color: rgba(27,54,93,0.12);
}

.favrow:active {
    transform: translateY(1px);
}

.favthumb {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
    flex: 0 0 100px;
    background: rgba(0,0,0,.04);
}

.favthumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.favmeta {
    flex: 1 1 auto;
    min-width: 0; /* pour ellipsis */

    margin: 0;
    padding: 0;
    align-self: start;
}

.favtitle {
    font-weight: 650;
    line-height: 1.15;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favsubtitle {
    font-size: .92rem;
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favmeta,
.favtitle,
.favsubtitle{
    margin: 0;
}

.favdate {
    flex: 0 0 auto;
    font-size: .9rem;
    opacity: .7;
    margin-left: 8px;
    white-space: nowrap;
}

@media (max-width: 600px){
  .favrow{
    grid-template-columns: 56px 1fr; /* un peu plus confortable que 46 */
  }

  .favthumb{
    width: 56px;
    height: 56px;
  }

  .favdate{ display: none; }
  .fav-audio{ width: 100%; } /* bouton plein largeur, confortable */
}


.fav-audio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    box-sizing: border-box;
    max-width: 200px;
    width: 100%;
    height: var(--btnheight);

    padding: 0 10px;
    border-radius: 10px;

    background: #fff;
    border: 1px solid rgba(0,0,0,.08);

    font-family: "Merriweather Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: .78rem;
    line-height: 1;
    color: rgba(0,0,0,.75);

    cursor: pointer;
    user-select: none;

    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}

.fav-audio:hover {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.14);
}

.fav-audio:active {
    transform: translateY(1px);
}

.fav-audio.is-playing .fav-audio-ico {
    content: "⏸";
}

.fav-audio-ico {
    font-size: .85rem;
}

@media (max-width: 820px){
    .favrow{
      display: grid;              /* <-- indispensable */
      grid-template-columns: 100px 1fr;
      grid-template-areas:
        "thumb meta"
        "audio audio"
        "date  date";
      gap: 10px 12px;
      align-items: start;
    }

  .favthumb{ grid-area: thumb; }
  .favmeta { grid-area: meta; }
  .fav-audio{ grid-area: audio; max-width: 100%; justify-self: start; }
  .favdate{ grid-area: date; justify-self: start; }
  
  /* Sur mobile/tablette : on autorise plusieurs lignes */
  .favtitle,
  .favsubtitle{
      white-space: normal;        /* <-- lisible */
      overflow: visible;
      text-overflow: initial;
  }
}


/*------------ Préférences ---------------*/

/* =========================
   Preferences – Responsive UI
   ========================= */

.pref-card {
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(16px, 2.2vw, 26px);
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 12px 28px rgba(0,0,0,.06);
    backdrop-filter: blur(6px);
}

.pref-card h1 {
    margin: 0 0 6px 0;
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    line-height: 1.1;
}

.pref-card > p {
    margin: 0 0 18px 0;
    color: rgba(0,0,0,.72);
    line-height: 1.45;
}

/* La ligne principale : texte à gauche, actions à droite */
.pref-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;

    padding: 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(0,0,0,.06);
}

.pref-left h2 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
}
.pref-left p {
    margin: 0;
    color: rgba(0,0,0,.72);
    line-height: 1.4;
}

/* Zone actions */
.pref-actions {
    display: grid;
    gap: 12px;
    justify-items: end;
}

.pref-switch{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

/* IMPORTANT : on masque VRAIMENT l’input */
.pref-switch__input{
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Le “switch” visuel */
.pref-switch__ui{
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  transition: background .15s ease;
  flex: 0 0 auto;
}

/* La pastille */
.pref-switch__ui::after{
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .15s ease;
}

/* Etat ON */
.pref-switch__input:checked + .pref-switch__ui{
  background: rgba(27,54,93,.85); /* Pantone 534C approx en hex */
}
.pref-switch__input:checked + .pref-switch__ui::after{
  transform: translateX(20px);
}

/* Focus clavier visible */
.pref-switch__input:focus-visible + .pref-switch__ui{
  outline: 2px solid rgba(27,54,93,.35);
  outline-offset: 2px;
}

/* Texte */
.pref-switch__text{
  font-family: "Merriweather Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: .9rem;
  color: rgba(0,0,0,.8);
}


/* Bouton */
.pref-btn {
    appearance: none;
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: .95rem;

    background: rgba(27,54,93,.95);
    color: #fff;

    cursor: pointer;
    transition: transform .08s ease, filter .15s ease;
}

.pref-btn:hover { 
    filter: brightness(1.05); 
}

.pref-btn:active { 
    transform: translateY(1px); 
}

/* Notices */
.pref-notice {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(34,197,94,.10);
    border: 1px solid rgba(34,197,94,.20);
    color: rgba(0,0,0,.82);
}

.pref-notice.err {
    background: rgba(239,68,68,.10);
    border-color: rgba(239,68,68,.20);
}

/* =========================
   Breakpoints
   ========================= */

@media (max-width: 840px){
  .pref-row{
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .pref-actions{
    justify-items: start;
  }

  /* Sur mobile : bouton pleine largeur */
  .pref-btn{
    width: 100%;
    padding: 12px 14px;
  }
}

@media (max-width: 420px){
    .pref-switch{
      font-size: .92rem;
  }
    .pref-switch span{
      padding-left: 50px;
  }
}


/* =========================
   Service client
   ========================= */

/* ===== Service client – UI (local) ===== */

.support-card{
    width: 1000px!important;
    margin: 0 auto;
    padding: clamp(16px, 2.2vw, 26px);
    border-radius: 18px;
    box-sizing: border-box;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 12px 28px rgba(0,0,0,.06);
}

/* Sur très petits écrans, marge un peu plus petite */
@media (max-width: 600px){
  .support-card{
    width: calc(100% - 2 * 12px);
  }
}

.support-card h1{
    margin: 0 0 8px 0;
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    line-height: 1.1;
}
.support-lead{
    margin: 0 0 18px 0;
    color: rgba(0,0,0,.72);
    line-height: 1.45;
}

.support-stack{ display:flex; flex-direction:column; gap: 14px; }

.support-field{
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    padding: 12px 14px;
}

.support-label{
    display:block;
    font-weight: 700;
    margin-bottom: 6px;
    color: rgba(0,0,0,.82);
}

.support-ro{
    display:block;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.06);
    color: rgba(0,0,0,.78);
}

.support-select, .support-input{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    font-size: 1rem;
}
.support-select:focus, .support-input:focus{
    outline: none;
    border-color: rgba(27,54,93,.55);
    box-shadow: 0 0 0 2px rgba(27,54,93,.14);
}

.support-toolbar{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.toolbtn{
    appearance:none;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    border-radius: 10px;
    padding: 8px 10px;
    cursor:pointer;
    font-size: .95rem;
}
.toolbtn:hover{ background: rgba(0,0,0,.03); }

.support-editor{
    min-height: 160px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    font-size: 1rem;
    line-height: 1.5;
    box-sizing: border-box;
}
.support-editor:focus{
    outline:none;
    border-color: rgba(27,54,93,.55);
    box-shadow: 0 0 0 2px rgba(27,54,93,.14);
}

.support-actions{
    display:flex;
    flex-direction:column;
    gap: 10px;
    align-items: stretch;
}

.support-btn{
    appearance:none;
    border:0;
    border-radius: 12px;
    padding: 12px 14px;
    font-weight: 650;
    font-size: 1rem;
    background: rgba(27,54,93,.95);
    color:#fff;
    cursor:pointer;
    transition: transform .08s ease, filter .15s ease;
}
.support-btn:hover{ filter: brightness(1.05); }
.support-btn:active{ transform: translateY(1px); }

.support-notice{
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(34,197,94,.10);
    border: 1px solid rgba(34,197,94,.20);
    color: rgba(0,0,0,.82);
}
.support-notice.err{
    background: rgba(239,68,68,.10);
    border-color: rgba(239,68,68,.20);
}

.support-email{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    text-decoration:none;
    color: inherit;
}
.support-email svg{ display:block; height: 18px; }
.support-email:hover{ text-decoration: underline; text-decoration-style: dotted; }

.support-debug{
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9rem;
    line-height: 1.35;
    overflow:auto;
    max-height: 260px;
}

/* Responsive : on garde le “stack” naturel */
@media (max-width: 600px){
    .toolbtn{ flex: 1 1 auto; }
}

/* Empêche les textes longs (email, société, etc.) de dépasser */
.support-field,
.support-ro,
.support-lead{
  min-width: 0;
}

.support-ro{
  max-width: 100%;
  white-space: normal;         /* au cas où un style global force nowrap */
  overflow-wrap: anywhere;     /* casse même sans espaces */
  word-break: break-word;      /* fallback */
  box-sizing: border-box;
}

.support-email{
  max-width: 100%;
  min-width: 0;
}

.support-email svg{
  max-width: 100%;
  width: 260px;     /* largeur nominale = viewBox */
  height: 18px;
}

/* Option mobile : autoriser le SVG à réduire */
@media (max-width: 600px){
  .support-email svg{
    width: 100%;
    height: auto;
  }
}

.support-select,
.support-input,
.support-editor{
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Traitement des avatars */
.avatar-btn{
  position: relative;
  width:100px;
  height:100px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:50%;
  overflow:hidden;
}

.avatar-btn img{
  width:100px;
  height:100px;
  object-fit:cover;
  border-radius:50%;
  display:block;
}

.avatar-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:#fff;
  background:rgba(0,0,0,0.55);
  opacity:0;
  transition:opacity .15s ease;
  text-transform:lowercase;
}

.avatar-btn:hover .avatar-overlay{ opacity:1; }

.avatar-modal{
  position:fixed;
  inset:0;
  z-index:9999;
}

.avatar-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
}

.avatar-modal-card{
  position:relative;
  width:min(920px, 92vw);
  margin:6vh auto 0 auto;
  background:#fff;
  border-radius:16px;
  padding:18px;
}

.avatar-crop-grid{
  display:grid;
  grid-template-columns: 1fr 220px;
  gap:16px;
  margin-top:10px;
}

.avatar-crop-zone{
  width:100%;
  height:420px;
  background:#f3f4f6;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

#avatarCropImage{
  max-width:100%;
  display:block;
}

.avatar-preview-col{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}

.avatar-preview-title{ font-size:13px; opacity:.8; }

.avatar-preview-circle{
  width:150px;
  height:150px;
  border-radius:50%;
  overflow:hidden;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
}

.avatar-preview{
  width:150px;
  height:150px;
  overflow:hidden;
}

.avatar-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
}

.avatar-msg{
  margin-top:10px;
  font-size:13px;
  color:#b91c1c;
}

/* Force la couleur du texte dans la modal */
.avatar-modal-card,
.avatar-modal-card * {
  color: var(--emnoir) !important;
}

/* Sauf les boutons : on garde texte blanc (ou ce que tu veux) */
.avatar-modal-card button,
.avatar-modal-card button * {
  color: var(--emblanc) !important;
}




/* Responsive : réduction des paddings sur petit écran */
@media (max-width: 600px) {
  .offers-table th,
  .bons-table th,
  .offers-table td,
  .bons-table td {
    padding: 6px;
    font-size: 0.9rem;
  }
}

/* 7. Responsive < 800px : menu au-dessus, contenu 100% */
@media (max-width: 1024px) {

  .client-conteneur {
    flex-direction: column;
  }

  .client-droit, .client-droit.extended {
    margin-left: 0;
    padding-left: calc(var(--btnheight) + 10px);
    width: calc(100% - 20px - var(--btnheight));
  }

  .client-gauche {
    width: 100%;
  }

  /* 1) on masque l’en-tête */
  .client-tableau thead { 
    display: none; 
  }

  /* 2) chaque ligne devient un bloc (carte) */
  .client-tableau tbody tr {
      display: block;
      margin: 0 0 1rem;
      border: 1px solid var(--emgris);
      border-radius: 8px;
      overflow: hidden;
  }

  /* 3) les cellules s’empilent */
  .client-tableau tbody td {
      display: block;
      width: 100%;
      padding: 12px 16px;
      text-align: left;
      line-height: 1.4;
      background: var(--emblanc);
      box-sizing: border-box;
  }

  /* 4) libellé “Titre”, “Format”… affiché via ::before */
  .client-tableau tbody td::before {
      content: attr(data-label);
      font-weight: 700;
      color: var(--embleu);
      display: inline-block;
      min-width: 140px;                /* largeur de la colonne-gauche */
      margin-right: 8px;
  }

  /* 5) on coupe le grossissement d’icône pour éviter le débordement */
  .client-tableau img {
      /*width: 28px;                     /* fixe → pas de scale */
      transition: none;
  }

  .client-tableau tbody td {
      height: auto;           /* ← libère la cellule            */
      line-height: normal;    /* ← laisse le texte s’étager      */
      overflow: visible;      /* ← ne coupe plus le contenu      */
  }

  /* 7) idem pour la “carte” elle-même, au cas où                */
  .client-tableau tbody tr {
      overflow: visible;      /* agrandit la carte si besoin     */
  }
  
}