/*
 Theme Name:   Cadixel Child
 Theme URI:    https://cadixel.com
 Description:  Thème enfant d'Astra pour Cadixel — plateforme d'échange de fichiers dentaires
 Author:       Léna Terrière
 Template:     astra
 Version:      1.0.0
 Text Domain:  cadixel-child
*/

/* ==== VARIABLES DE MARQUE ==== */
:root{
  --menthe-100:#D9F5E9;
  --menthe-500:#3EB489;
  --menthe-600:#2FA278;
  --menthe-700:#278363;

  --cerise-100:#F7DDD7;
  --cerise-500:#C23F2E;
  --cerise-600:#AD3626;
  --cerise-700:#8A2C1E;

  --bleu-100:#E4EEFF;
  --bleu-500:#66A8FF;
  --bleu-600:#4A8FE8;
  --bleu-700:#3A72BE;

  --fond:#F2FAF6;
  --blanc:#FFFFFF;
  --gris-900:#232B27;
  --gris-700:#414B46;
  --gris-500:#8B9A93;
  --gris-200:#DCE6E1;

  --police-titre:'Comfortaa', -apple-system, "Segoe UI", sans-serif;
  --police-texte:'Inter', -apple-system, "Segoe UI", sans-serif;
  --police-mono:'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;

  --rayon:14px;
  --rayon-lg:22px;
  --ombre-carte: 0 40px 80px -24px rgba(20,30,26,0.45);
}

/* ==== ACCESSIBILITÉ : RESPECT DE prefers-reduced-motion ==== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}

/* ==== FOCUS CLAVIER VISIBLE (accessibilité) ==== */
a:focus-visible, button:focus-visible, input:focus-visible, label:focus-visible{
  outline:2.5px solid var(--menthe-500);
  outline-offset:3px;
}

/* ==== RESET DE BASE ==== */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:var(--police-texte);
  color:var(--gris-700);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; }

/* ==== SCÈNE PLEIN ÉCRAN ==== */
.scene{
  position:relative;
  height:100vh;
  width:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ==== FOND DE MARQUE ==== */
.scene-fond{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    background:#2FA278;
    isolation:isolate;
}

.scene-fond::before{
    content:"";
    position:absolute;
    inset:-25%;
    background:radial-gradient(
        circle at 20% 30%,
        rgba(62,180,137,.95) 0%,
        rgba(62,180,137,.60) 30%,
        transparent 65%
    );
}

.scene-fond::after{ 
  content:""; 
  position:absolute; 
  inset:-25%; 
  background:radial-gradient( 
    circle at 82% 78%, 
    rgba(102,168,255,.82) 0%,
    rgba(102,168,255,.34) 35%,
     transparent 70% ); }

.scene-fond::before,
.scene-fond::after{
    pointer-events:none;
}

.halo-violet{
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;

    background:radial-gradient(
        circle at 100% 0%,
        rgba(170,165,245,.82) 0%,
        rgba(170,165,245,.45) 12%,
        rgba(170,165,245,.20) 28%,
        rgba(170,165,245,.08) 45%,
        transparent 68%
    );

    filter:blur(40px);
}

.forme{ position:absolute; border-radius:50%; filter:blur(2px); }
.forme-1{ width:520px; height:520px; top:-160px; left:-140px; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), transparent 70%); animation:derive-1 18s ease-in-out infinite; }
.forme-2{ width:640px; height:640px; bottom:-220px; right:-180px; background:radial-gradient(circle at 60% 40%, rgba(0,0,0,0.10), transparent 70%); animation:derive-2 22s ease-in-out infinite; }
.forme-3{ width:340px; height:340px; top:38%; right:8%; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.10), transparent 72%); animation:derive-3 16s ease-in-out infinite; }
.fond-motif{ position:absolute; top:50%; left:8%; width:min(50vh, 620px); height:min(50vh, 620px); object-fit:contain; transform:translateY(-50%); pointer-events:none; opacity: 0.2; }


/* -- Grille technique façon plan CAO -- */
.grille-technique{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size:46px 46px;
  animation:glisse-grille 40s linear infinite;
}

@keyframes glisse-grille{ from{ background-position:0 0; } to{ background-position:46px 46px; } }
@keyframes derive-1{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(24px,18px); } }
@keyframes derive-2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-20px,-16px); } }
@keyframes derive-3{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-14px,14px) scale(1.06); } }

/* ==== EN-TÊTE ==== */
.scene-entete{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:flex-end;
  padding:26px 44px;
  flex-shrink:0;
  animation:apparition-haut .6s ease both;
}
.marque{ position:absolute; top:50%; left:44px; transform:translateY(-50%); z-index:3; }
.repere-marque{ position:relative; height:200px; width:auto; display:block; }
.repere-marque-mobile{ display:none; }
.marque-nom{ font-family:var(--police-titre); font-weight:700; font-size:17px; color:#fff; }

.lien-connexion{
  font-size:13.5px;
  font-weight:600;
  color:#fff;
  padding:9px 18px;
  border:1.5px solid rgba(255,255,255,0.45);
  border-radius:9px;
  transition:all .15s ease;
}

.lien-connexion:hover{
  color:#AAA5F5;
  border-color:#AAA5F5;
  background:rgba(170,165,245,.08);
}

/* ==== CORPS : DEUX COLONNES ==== */
.scene-corps{
  position:relative; z-index:2;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:70px;
  padding:40px 44px 0;
  min-height:0;
}

/* -- Colonne gauche : arguments -- */
.scene-texte{ color:#fff; max-width:440px; animation:apparition-gauche .7s ease .1s both; }
.eyebrow-clair{
  font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.eyebrow-clair::before{ content:""; width:20px; height:2px; background:#fff; border-radius:2px; }
.scene-texte h1{
  font-family:var(--police-titre);
  font-size:36px;
  font-weight:700;
  line-height:1.14;
  letter-spacing:-0.01em;
  margin-bottom:16px;
  color:#fff;
}
.scene-texte-intro{ font-size:14.5px; color:rgba(255,255,255,0.9); margin-bottom:18px; }

.liste-avantages{ list-style:none; margin-bottom:26px; }
.liste-avantages li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13.5px; color:#fff; margin-bottom:11px; line-height:1.4;
}
.liste-avantages svg{ width:17px; height:17px; flex-shrink:0; margin-top:1px; }

.btn-compte-gratuit{
  display:inline-block;
  background:#fff;
  color:var(--menthe-700);
  font-family:var(--police-titre);
  padding:13px 24px;
  border-radius:9px;
  font-weight:700;
  font-size:14px;
  box-shadow:0 16px 28px -16px rgba(0,0,0,0.35);
  transition:transform .15s ease, box-shadow .15s ease;
}

.btn-compte-gratuit:hover{
  transform:translateY(-1px);
}

/* -- Colonne droite : carte d'envoi -- */
.carte-envoi{
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.5);
  border-radius:var(--rayon-lg);
  box-shadow:var(--ombre-carte);
  width:600px;
  flex-shrink:0;
  padding:22px 30px 20px;
  animation:apparition-droite .7s ease .2s both;
}
.carte-entete{ margin-bottom:12px; }
.carte-envoi h2{
  font-family:var(--police-titre); font-size:17px; font-weight:700;
  color:var(--gris-900); margin-bottom:5px;
}
.carte-sous-titre{ font-size:12px; color:var(--gris-500); }

.zone-depot{
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:10px;
  border:1.5px dashed var(--gris-200);
  border-radius:var(--rayon);
  padding:10px 14px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
  margin-bottom:12px;
}
.zone-depot:hover{ border-color:var(--menthe-500); background:var(--menthe-100); }
.zone-depot.zone-depot-survol{
  border-color:var(--menthe-500); background:var(--menthe-100);
  transform:scale(1.015);
  box-shadow:0 0 0 4px var(--menthe-100);
}
.zone-depot-icone{ width:32px; height:32px; border-radius:50%; background:var(--menthe-100); padding:7px; transition:transform .2s ease; }
.zone-depot.zone-depot-survol .zone-depot-icone{ transform:translateY(-2px); }
.zone-depot-texte{ font-size:11.5px; color:var(--gris-500); line-height:1.4; text-align:center; }

/* -- Liste des fichiers déposés -- */
.liste-fichiers{ list-style:none; margin:-6px 0 16px; display:flex; flex-direction:column; gap:6px; }
.liste-fichiers li{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--fond); border:1px solid var(--gris-200); border-radius:8px;
  padding:8px 11px; font-size:11.5px; color:var(--gris-900);
  animation:apparition-ligne .25s ease both;
}
.liste-fichiers .nom-fichier{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; }
.liste-fichiers .taille-fichier{ font-family:var(--police-mono); font-size:10px; color:var(--gris-500); flex-shrink:0; margin-left:8px; }

.champ{ margin-bottom:11px; }
.champ label{ display:block; font-size:11px; font-weight:600; color:var(--gris-700); margin-bottom:6px; }
.champ input{
  width:100%; height:42px; padding:0 13px;
  border:1.5px solid var(--gris-200); border-radius:9px;
  font-family:var(--police-texte); font-size:13px; color:var(--gris-900);
  background:var(--fond);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.champ input:focus{ outline:none; border-color:var(--menthe-500); box-shadow:0 0 0 3px var(--menthe-100); }
.champ input.champ-invalide{ border-color:var(--cerise-500); }
.champ input.champ-invalide:focus{ box-shadow:0 0 0 3px var(--cerise-100); }
.champ input::placeholder{ color:var(--gris-500); }
.champ-erreur{ display:block; font-size:11px; color:var(--cerise-500); margin-top:6px; }
.champ-erreur[hidden]{ display:none; }

.btn-envoyer{
    width:100%;
    height:44px;
    background:var(--menthe-600);
    color:#fff;
    font-family:var(--police-titre);
    border-radius:9px;
    font-weight:700;
    font-size:14px;
    box-shadow:0 14px 24px -12px rgba(47,162,120,.45);
    transition:background .15s ease, transform .15s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
}
.btn-envoyer:hover{
    background:var(--menthe-700);
    transform:translateY(-1px);
}
.btn-envoyer:active{ transform:translateY(0); }
.btn-envoyer.btn-envoi-encours{ opacity:0.85; cursor:progress; }
.btn-envoyer.btn-envoi-reussi{ background:var(--menthe-500); box-shadow:0 14px 24px -12px rgba(62,180,137,0.55); }

.icone-spin{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
  animation:tourner .7s linear infinite;
}

@keyframes apparition-haut{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes apparition-gauche{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:translateX(0); } }
@keyframes apparition-droite{ from{ opacity:0; transform:translateX(18px) scale(0.98); } to{ opacity:1; transform:translateX(0) scale(1); } }
@keyframes apparition-ligne{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
@keyframes tourner{ to{ transform:rotate(360deg); } }

/* ==== BADGES DE CONFIANCE ==== */
.scene-bas{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  padding:18px 20px 22px;
  flex-shrink:0;
}
.badge-confiance{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:500; color:#fff;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.22);
  padding:7px 13px; border-radius:20px;
}
.badge-confiance svg{ width:13px; height:13px; flex-shrink:0; }

.badge-statut{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--police-mono); font-size:11px; color:rgba(255,255,255,0.9);
  padding:7px 13px; border-radius:20px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
}
.badge-statut-point{
  width:7px; height:7px; border-radius:50%; background:#7CE8B8;
  box-shadow:0 0 0 0 rgba(124,232,184,0.6);
  animation:pouls 2s ease-out infinite;
}
@keyframes pouls{
  0%{ box-shadow:0 0 0 0 rgba(124,232,184,0.55); }
  70%{ box-shadow:0 0 0 7px rgba(124,232,184,0); }
  100%{ box-shadow:0 0 0 0 rgba(124,232,184,0); }
}

/* ==== NOUVEAUX ÉLÉMENTS — CONTENU V1 ==== */
.scene-texte-tagline{ font-size:13px; color:rgba(255,255,255,0.85); margin-bottom:18px; font-style:italic; }

.optionnel{ font-weight:400; color:var(--gris-500); }

.champ-avec-bouton{ display:flex; gap:9px; }
.champ-avec-bouton input{ flex:1; }
.btn-auto{
  font-family:var(--police-titre); font-size:11.5px; font-weight:600;
  background:var(--menthe-100); color:var(--menthe-700);
  padding:0 14px; border-radius:9px; white-space:nowrap;
}
.champ-aide{ display:block; font-size:10.5px; color:var(--gris-500); margin-top:6px; }

.champ textarea{
  width:100%; padding:9px 13px;
  min-height:38px; height:38px;
  border:1.5px solid var(--gris-200); border-radius:9px;
  font-family:var(--police-texte); font-size:13px; color:var(--gris-900);
  background:var(--fond); resize:vertical;
}
.champ textarea:focus{ outline:none; border-color:var(--menthe-500); box-shadow:0 0 0 3px var(--menthe-100); }
.champ textarea::placeholder{ color:var(--gris-500); }

.colonne-carte{ display:flex; flex-direction:column; align-items:center; }

.mentions-sous-carte{
  width:100%;
  font-size:10.5px; color:rgba(255,255,255,0.75); text-align:center;
  margin-top:10px; line-height:1.5;
}

/* ==== Deux champs sur une même ligne ==== */
.champ-duo{ display:flex; gap:12px; margin-bottom:11px; }
.champ-duo .champ{ flex:1; margin-bottom:0; }


/* ==== Pile de cartes empilées, avec transition au clic ==== */
.pile-cartes{ position:relative; display:grid; margin-bottom:26px; }

.pile-cartes .carte-envoi{
  grid-area:1 / 1;
  position:relative;
  transition:opacity .15s ease;
}

.pile-cartes .carte-avant{
  transform:translate(0,0);
  z-index:2;
  opacity:1;
}

.pile-cartes .carte-arriere{
  animation:none;
  transform:translate(26px, 26px);
  z-index:1;
  opacity:0.75;
  cursor:pointer;
  box-shadow:none;
}
.pile-cartes .carte-arriere:hover{ opacity:0.9; }
.pile-cartes .carte-arriere:hover{ opacity:1; }

.zone-qr-resultat{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:10px 0 4px;
}
.zone-qr-resultat[hidden]{ display:none; }
.zone-qr-resultat #qr-code-cible{ display:flex; justify-content:center; margin-bottom:14px; }
.qr-info{ font-size:12.5px; color:var(--gris-500); margin-bottom:10px; }
.avertissement-qr{
  font-size:11px; color:var(--cerise-700);
  padding:8px 12px; border-radius:8px;
  margin-bottom:16px; width:100%;
}

/* ==== Case à cocher ==== */
.champ-case{
  display:flex; align-items:flex-start; gap:9px;
  font-size:12.5px; color:var(--gris-700); line-height:1.4;
  margin-bottom:16px; cursor:pointer;
}
.champ-case input{
  margin-top:2px; width:15px; height:15px;
  accent-color:var(--menthe-500); flex-shrink:0; cursor:pointer;
}

/* ==== Carte QR : variante bleue (carte e-mail reste en menthe) ==== */
#carte-qr .zone-depot:hover{ border-color:var(--bleu-500); background:var(--bleu-100); }
#carte-qr .zone-depot.zone-depot-survol{
  border-color:var(--bleu-500); background:var(--bleu-100);
  box-shadow:0 0 0 4px var(--bleu-100);
}
#carte-qr .zone-depot-icone{ background:var(--bleu-100); }
#carte-qr .zone-depot-icone path{ stroke:var(--bleu-700); }

#carte-qr .champ input:focus{ border-color:var(--bleu-500); box-shadow:0 0 0 3px var(--bleu-100); }
#carte-qr .champ textarea:focus{ border-color:var(--bleu-500); box-shadow:0 0 0 3px var(--bleu-100); }

#carte-qr .btn-auto{ background:var(--bleu-100); color:var(--bleu-700); }

#carte-qr .btn-envoyer{
  background:var(--bleu-600);
  box-shadow:0 14px 24px -12px rgba(74,143,232,.45);
}
#carte-qr .btn-envoyer:hover{ background:var(--bleu-700); }
#carte-qr .btn-envoyer.btn-envoi-reussi{
  background:var(--bleu-500);
  box-shadow:0 14px 24px -12px rgba(102,168,255,0.55);
}

#carte-qr .champ-case input{ accent-color:var(--bleu-500); }

/* ==== Repère QR code ==== */
.repere-qr{
  position:absolute;
  bottom:-24px; right:-110px;
  font-size: 15px; color:rgba(255,255,255,0.8);
  white-space:nowrap;
  background:none;
  border:none;
  padding:0;
  font-family:inherit;
  cursor:pointer;
}
.repere-qr:hover{ color:#fff; }

/* ==== Œil d'aperçu dans la liste des fichiers ==== */
.groupe-fichier-gauche{ display:flex; align-items:center; gap:8px; min-width:0; }
.groupe-fichier-gauche .nom-fichier{ max-width:150px; }

.bouton-oeil{
  appearance:none;
  -webkit-appearance:none;
  width:20px; height:20px; padding:0; margin:0;
  border:0; border-radius:6px; outline:none; flex-shrink:0;
  background:none;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--gris-500);
  transition:background .15s ease, color .15s ease;
}
.bouton-oeil:hover{ background:var(--menthe-100); color:var(--menthe-700); }
.bouton-oeil:focus-visible{ outline:2px solid var(--menthe-500); outline-offset:2px; }
.bouton-oeil svg{ display:block; width:16px; height:16px; }

/* ==== Fenêtre d'aperçu ====
   Deux gabarits : la carte compacte d'origine (icône + nom + message
   "aperçu non disponible") et un gabarit agrandi ".popup-apercu-grand"
   (basculé en JS, script.js) pour les aperçus réellement visuels
   (image/PDF/3D), avec des proportions équilibrées et un
   dimensionnement cohérent avec la fenêtre d'aperçu de l'espace compte
   (compte.css, .popup-apercu-fichier-contenu). */
.popup-apercu{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.popup-apercu[hidden]{ display:none; }
.popup-apercu-fond{
  position:absolute; inset:0;
  background:rgba(20,30,26,0.55);
  backdrop-filter:blur(3px);
}
.popup-apercu-contenu{
  position:relative; z-index:1;
  background:#fff; border-radius:var(--rayon-lg);
  padding:20px; width:380px; max-width:100%;
  text-align:center;
  box-shadow:0 30px 70px -20px rgba(20,30,26,.4);
}
.popup-apercu-contenu.popup-apercu-grand{
  width:820px;
  max-width:100%;
  height:680px;
  max-height:100%;
  padding:18px;
  text-align:left;
  display:flex;
  flex-direction:column;
}
.popup-apercu-grand #popup-apercu-corps{
  flex:1;
  min-height:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.popup-apercu-fermer{
  position:absolute; top:10px; right:10px;
  z-index:1;
  width:30px; height:30px; border-radius:50%;
  border:none;
  background:rgba(35,43,39,.7);
  font-size:17px; line-height:1; color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .15s ease;
}
.popup-apercu-fermer:hover{ background:rgba(35,43,39,.88); }

.popup-apercu-image{ max-width:100%; max-height:100%; border-radius:9px; object-fit:contain; }

.popup-apercu-pdf{
  width:100%; height:100%;
  border:1px solid var(--gris-200); border-radius:9px;
}

.popup-apercu-icone{
  width:56px; height:56px; margin:8px auto 14px;
  border-radius:12px; background:var(--menthe-100); color:var(--menthe-700);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--police-mono); font-size:11px; font-weight:700;
}
.popup-apercu-nom{ font-size:13px; font-weight:600; color:var(--gris-900); margin-bottom:8px; word-break:break-word; }
.popup-apercu-note{ font-size:11.5px; color:var(--gris-500); line-height:1.5; }

/* ==== Croix de suppression + groupe droite ==== */
.groupe-fichier-droite{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

.bouton-supprimer-fichier{
  appearance:none; -webkit-appearance:none;
  width:20px; height:20px; padding:0; margin:0;
  border:0; border-radius:6px; outline:none; flex-shrink:0;
  background:none;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--gris-500);
  transition:background .15s ease, color .15s ease;
}
.bouton-supprimer-fichier:hover{ background:var(--cerise-100); color:var(--cerise-700); }
.bouton-supprimer-fichier:focus-visible{ outline:2px solid var(--cerise-500); outline-offset:2px; }
.bouton-supprimer-fichier svg{ display:block; width:15px; height:15px; }

/* ==== Conteneur du visionneur 3D dans l'aperçu ==== */
.popup-apercu-3d{ width:100%; height:100%; border-radius:9px; overflow:hidden; }
.popup-apercu-3d canvas{ display:block; width:100%; }

/* ==== Éléments désactivés temporairement ==== */
.scene-texte-tagline-desactive{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  color:rgba(255,255,255,0.55);
}

.etiquette-bientot{
  font-family:var(--police-texte); font-size:11px; font-weight:500;
  color:rgba(255,255,255,0.9);
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.3);
  padding:4px 10px; border-radius:20px;
  white-space:nowrap;
}

.btn-desactive{
  pointer-events:none;
  opacity:0.45;
  filter:grayscale(0.4);
}
.btn-desactive:hover{ transform:none; }