/* Atletisport — configurateur
   Extrait sans modification du CSS de https://atletisport.com/DEVIS/ (relevé du 16/09/2026).
   Les valeurs sont celles de la page de référence : ne pas les réinventer. */
/* ========================= CONFIGURATEUR ========================= */
.zone-outil{margin-top:-96px;position:relative;z-index:5;padding-bottom:80px}
/* Halo rouge derrière le haut de la carte : il déborde sur le fond sombre du
   hero et fait décoller le configurateur du reste de la page. */
.zone-outil::before{
  content:"";position:absolute;left:50%;top:-46px;transform:translateX(-50%);
  width:min(980px,94%);height:240px;pointer-events:none;
  background:radial-gradient(58% 56% at 50% 45%,rgba(255,38,38,.42),transparent 70%);
  filter:blur(46px);
}
.outil{
  position:relative;
  background:var(--blanc);border-radius:var(--r-xl);
  box-shadow:var(--ombre-lg);border:1px solid var(--gris-200);
  overflow:hidden;
}
/* Pulsation jouée deux fois quand la carte arrive à l'écran. */
@keyframes appelOeil{
  0%,100%{box-shadow:var(--ombre-lg),0 0 0 0 rgba(255,38,38,0)}
  50%{box-shadow:var(--ombre-lg),0 0 0 7px rgba(255,38,38,.16)}
}
.outil.attire{animation:appelOeil 1.7s ease-in-out 2}

/* Chevron sur les réponses à choix unique : rend la carte plus visiblement
   cliquable, ce qui compte beaucoup sur la toute première question. */
.choix .aller{
  width:18px;height:18px;flex-shrink:0;color:var(--gris-400);transition:.16s;
}
.choix:hover .aller{color:var(--rouge-texte);transform:translateX(2px)}
.outil-tete{
  padding:20px 26px;border-bottom:1px solid var(--gris-200);
  background:var(--gris-50);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.outil-tete .titre{font-weight:600;font-size:15px;display:flex;align-items:center;gap:9px}
.outil-tete .titre svg{width:17px;height:17px;color:var(--rouge)}
.progression{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:210px}
.progression .compteur{
  font-size:12px;font-weight:600;color:var(--gris-500);
  letter-spacing:.04em;white-space:nowrap;
}
.progression .barre{
  flex:1;height:6px;background:var(--gris-200);border-radius:100px;overflow:hidden;
}
.progression .barre i{
  display:block;height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--rouge),var(--rouge-clair));
  transition:width .45s cubic-bezier(.4,0,.2,1);
}

/* — fil des réponses déjà données — */
.recap-fil{
  display:flex;flex-wrap:wrap;gap:7px;padding:14px 26px 0;
}
.recap-fil:empty{display:none}
.puce-recap{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;color:var(--gris-700);
  background:var(--gris-100);border:1px solid var(--gris-200);
  border-radius:100px;padding:5px 11px;transition:.18s;
}
.puce-recap:hover{border-color:var(--rouge);color:var(--rouge-texte);background:rgba(255,38,38,.05)}
.puce-recap b{font-weight:600;color:var(--noir)}
.puce-recap:hover b{color:var(--rouge-texte)}
.puce-recap svg{width:11px;height:11px;opacity:.55}

/* — dialogue — */
.dialogue{padding:24px 26px 8px;min-height:160px}
.bulle{
  max-width:78%;padding:13px 17px;border-radius:var(--r);
  font-size:15.5px;line-height:1.55;white-space:pre-line;
  animation:apparait .34s cubic-bezier(.2,.8,.3,1) both;
}
.bulle.bot{
  background:var(--gris-100);border:1px solid var(--gris-200);
  border-bottom-left-radius:5px;margin-bottom:16px;
}
.bulle.moi{
  background:var(--noir);color:#fff;margin-left:auto;
  border-bottom-right-radius:5px;margin-bottom:16px;
}
.bulle.bot strong{font-weight:600}
@keyframes apparait{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.frappe{
  display:inline-flex;gap:4px;padding:15px 17px;background:var(--gris-100);
  border:1px solid var(--gris-200);border-radius:var(--r);border-bottom-left-radius:5px;
  margin-bottom:16px;
}
.frappe i{
  width:6px;height:6px;border-radius:50%;background:var(--gris-400);display:block;
  animation:pulse 1.15s infinite ease-in-out;
}
.frappe i:nth-child(2){animation-delay:.16s}
.frappe i:nth-child(3){animation-delay:.32s}
@keyframes pulse{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.indice{
  font-size:13px;color:var(--gris-500);margin:-8px 0 14px;padding-left:2px;
}

/* — zone de saisie — */
.saisie{padding:0 26px 26px}
.grille-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.grille-choix.compacte{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}
.choix{
  display:flex;align-items:center;gap:12px;text-align:left;
  padding:14px 16px;border:1.5px solid var(--gris-200);border-radius:var(--r);
  background:var(--blanc);transition:all .16s ease;position:relative;
}
.choix:hover{border-color:var(--noir);transform:translateY(-1px);box-shadow:var(--ombre)}
.choix.actif{border-color:var(--rouge);background:rgba(255,38,38,.04)}
.choix .ico{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:var(--gris-100);color:var(--gris-700);
  display:grid;place-items:center;transition:.16s;
}
.choix .ico svg{width:18px;height:18px}
.choix:hover .ico{background:var(--noir);color:#fff}
.choix.actif .ico{background:var(--rouge);color:#fff}
.choix .txt{min-width:0;flex:1}
.choix .txt b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.choix .txt small{display:block;font-size:12.5px;color:var(--gris-500);line-height:1.35;margin-top:2px}
.choix .coche{
  width:19px;height:19px;border-radius:50%;border:1.5px solid var(--gris-200);
  flex-shrink:0;display:grid;place-items:center;transition:.16s;
}
.choix.actif .coche{background:var(--rouge);border-color:var(--rouge)}
.choix .coche svg{width:11px;height:11px;color:#fff;opacity:0;transition:.16s}
.choix.actif .coche svg{opacity:1}

.champ{
  width:100%;padding:14px 16px;border:1.5px solid var(--gris-200);
  border-radius:var(--r);background:var(--blanc);font-size:15.5px;transition:.16s;
}
.champ:focus{outline:0;border-color:var(--rouge);box-shadow:0 0 0 3px rgba(255,38,38,.11)}
.champ::placeholder{color:var(--gris-400)}
textarea.champ{resize:vertical;min-height:104px}

.barre-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:center}

.erreur{
  color:var(--rouge-texte);font-size:13.5px;font-weight:500;margin-top:9px;
  display:flex;align-items:center;gap:6px;
}
.erreur svg{width:14px;height:14px;flex-shrink:0}

/* — pot de miel anti-robot — */
.pot-de-miel{position:absolute!important;left:-9999px!important;opacity:0;height:0;overflow:hidden}

/* =========================== RÉSULTATS =========================== */
.resultats{padding:4px 26px 30px;animation:apparait .4s both}
.bandeau-resultat{
  background:linear-gradient(135deg,var(--noir),var(--gris-900));
  color:#fff;border-radius:var(--r-lg);padding:26px 28px;margin-bottom:26px;
}
.bandeau-resultat h2{font-size:clamp(20px,3vw,26px);font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.bandeau-resultat p{color:#B9BDC3;font-size:15px;max-width:640px}

.astuce-quantite{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13.5px;color:var(--gris-700);line-height:1.5;
  background:rgba(255,38,38,.05);border:1px solid rgba(255,38,38,.2);
  border-radius:var(--r);padding:13px 16px;margin-bottom:6px;
}
.astuce-quantite svg{width:16px;height:16px;color:var(--rouge);flex-shrink:0;margin-top:2px}

/* Le libellé doit rester lisible sur le fond gris de la vignette : le
   gris-400 n'y donne que 2,37:1. L'icône, elle, n'est pas du texte. */

/* --- sélecteur de poids (haltères, disques) : une quantité par poids --- */
.poids{
  border-top:1px solid var(--gris-200);padding:12px 15px 13px;background:var(--blanc);
}
.poids-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-bottom:9px}
.poids-libelle{font-size:12.5px;font-weight:600;color:var(--gris-500)}
.poids-compte{
  font-size:11.5px;font-weight:600;color:var(--rouge-texte);margin-left:auto;white-space:nowrap;
  background:rgba(255,38,38,.09);border-radius:100px;padding:2px 8px;
}
.poids.vide .poids-compte{color:var(--gris-400);background:var(--gris-100)}
.poids-liste{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:4px;
  max-height:250px;overflow-y:auto;padding-right:2px;
}
.poids-ligne{
  display:flex;align-items:center;gap:4px;
  border:1.5px solid var(--gris-200);border-radius:6px;padding:3px 4px 3px 6px;
  transition:.13s;cursor:pointer;
}
.poids-ligne:hover{border-color:var(--noir)}
.poids-ligne.zero{opacity:.5}
.poids-ligne.zero:hover{opacity:1}
.poids-valeur{font-size:11px;font-weight:600;white-space:nowrap;flex:1}
.poids-menu{
  width:36px;border:0;border-radius:4px;background:var(--gris-100);
  font-size:11.5px;font-weight:600;text-align:center;padding:3px 1px;cursor:pointer;
  -moz-appearance:none;appearance:none;text-align-last:center;
}
.poids-menu:focus{outline:2px solid var(--rouge);outline-offset:1px}
.poids-ligne:not(.zero) .poids-menu{background:var(--noir);color:#fff}
.poids-actions{display:flex;gap:12px;margin-top:10px}
.poids-action{
  font-size:11.5px;font-weight:600;color:var(--gris-500);
  text-decoration:underline;text-underline-offset:2px;transition:.13s;
}
.poids-action:hover{color:var(--rouge-texte)}

/* --- sélecteur de quantité --- */
.quantite{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 15px;border-top:1px solid var(--gris-200);background:var(--gris-50);
}
.quantite-libelle{font-size:12.5px;font-weight:600;color:var(--gris-500)}
.quantite-controles{
  display:flex;align-items:center;
  border:1.5px solid var(--gris-200);border-radius:100px;background:var(--blanc);overflow:hidden;
}
.quantite-btn{
  width:30px;height:30px;font-size:16px;font-weight:600;line-height:1;
  color:var(--gris-700);display:grid;place-items:center;transition:.15s;
}
.quantite-btn:hover:not(:disabled){background:var(--rouge-texte);color:#fff}
.quantite-btn:disabled{color:var(--gris-200);cursor:not-allowed}
.quantite-champ{
  width:38px;height:30px;border:0;text-align:center;
  font-size:14.5px;font-weight:600;background:transparent;
  -moz-appearance:textfield;appearance:textfield;
}
.quantite-champ::-webkit-outer-spin-button,
.quantite-champ::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quantite-champ:focus{outline:0;background:rgba(255,38,38,.07)}

.note-methode{
  font-size:12.5px;color:var(--gris-500);background:var(--gris-50);
  border:1px solid var(--gris-200);border-left:3px solid var(--rouge);
  border-radius:var(--r-sm);padding:13px 16px;margin-top:24px;line-height:1.55;
}

/* ============= Encadré de validation + personnalisation ============= */
.validation{
  margin-top:26px;border-radius:var(--r-lg);padding:26px 28px;
  background:linear-gradient(135deg,var(--noir),var(--gris-900));color:#fff;
  position:relative;overflow:hidden;
}
.validation::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(520px 240px at 82% 0%,rgba(255,38,38,.26),transparent 68%);
}
.validation>*{position:relative}
.validation h3{font-size:20px;font-weight:700;letter-spacing:-.015em;margin-bottom:9px}
.validation p{color:#B9BDC3;font-size:14.5px;max-width:620px;margin-bottom:20px}
.validation .choix-validation{display:flex;flex-wrap:wrap;gap:11px}
.validation .btn-clair{
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);
}
.validation .btn-clair:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}

/* ---- Panneau d'ajout de machines ---- */
/* ---- recherche directe d'une machine ---------------------------------- */
/* Le parcours par recherche directe n'a pas d'étapes à compter. */
.progression[hidden]{display:none}
.recherche-directe{padding:18px 26px 0;border-bottom:1px solid var(--gris-200);padding-bottom:18px}
.recherche-libelle{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:var(--noir);margin-bottom:9px}
.recherche-libelle svg{width:16px;height:16px;color:var(--rouge-texte);flex:none}
.recherche-boite{position:relative}
.recherche-boite .champ{padding-right:42px}
/* Safari et Chrome ajoutent leur propre croix dans les champs de type
   « search » : elle ferait doublon avec la nôtre. */
.recherche-boite .champ::-webkit-search-cancel-button,
.perso-recherche .champ::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.recherche-effacer{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:0;border-radius:50%;background:var(--gris-100);
  color:var(--gris-700);cursor:pointer;display:flex;align-items:center;justify-content:center}
.recherche-effacer:hover{background:var(--gris-200);color:var(--noir)}
.recherche-effacer svg{width:13px;height:13px}
.recherche-effacer[hidden]{display:none}
.recherche-aide{font-size:12.5px;color:var(--gris-500);margin-top:7px;line-height:1.5}
.recherche-resultats{
  margin-top:12px;border:1px solid var(--gris-200);border-radius:12px;
  background:var(--blanc);max-height:340px;overflow-y:auto}
.recherche-resultats[hidden]{display:none}
.recherche-mouvement{
  position:sticky;top:0;z-index:1;background:var(--gris-50);
  padding:8px 14px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gris-700);
  border-bottom:1px solid var(--gris-200)}
.recherche-item{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 14px;border:0;border-bottom:1px solid var(--gris-100);
  background:none;cursor:pointer;font:inherit;color:inherit}
.recherche-item:last-child{border-bottom:0}
.recherche-item:hover,.recherche-item:focus-visible{background:var(--gris-50)}
.recherche-item img{width:40px;height:40px;object-fit:contain;flex:none;border-radius:6px;background:var(--gris-50)}
.recherche-item .vignette-absente{width:40px;height:40px;flex:none}
.recherche-item .txt{display:block;flex:1;min-width:0}
.recherche-item .txt b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.recherche-item .txt small{display:block;font-size:11.5px;color:var(--gris-500);margin-top:2px}
.recherche-item .gamme{
  flex:none;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;
  background:var(--noir);color:#fff;letter-spacing:.02em}
.recherche-item[aria-disabled="true"]{cursor:default}
.recherche-item[aria-disabled="true"] .gamme{background:var(--ok-fonce)}
.recherche-vide{padding:18px 16px;font-size:13.5px;color:var(--gris-700);line-height:1.6}
.recherche-panier{margin-top:12px}
.recherche-panier[hidden]{display:none}
.recherche-panier h4{font-size:13px;font-weight:700;margin-bottom:8px}
.recherche-puces{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.recherche-puce{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  padding:5px 6px 5px 11px;border-radius:99px;
  background:var(--gris-100);border:1px solid var(--gris-200)}
.recherche-puce button{
  width:19px;height:19px;border:0;border-radius:50%;background:var(--gris-400);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.recherche-puce button:hover{background:var(--rouge-texte)}
.recherche-puce button svg{width:10px;height:10px}
@media(max-width:640px){
  .recherche-directe{padding-left:15px;padding-right:15px}
  .recherche-resultats{max-height:270px}
}
.perso{
  margin-top:20px;border:1px solid var(--gris-200);border-radius:var(--r-lg);
  background:var(--blanc);overflow:hidden;animation:apparait .3s both;
}
.perso[hidden]{display:none}
.perso-tete{
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;border-bottom:1px solid var(--gris-200);background:var(--gris-50);
}
.perso-tete h3{font-size:16px;font-weight:600;flex:1}
.perso-tete .fermer{
  width:32px;height:32px;border-radius:50%;color:var(--gris-500);
  display:grid;place-items:center;transition:.16s;flex-shrink:0;
}
.perso-tete .fermer:hover{background:var(--gris-200);color:var(--noir)}
.perso-tete .fermer svg{width:15px;height:15px}

.perso-filtres{padding:18px 22px 0}
.perso-recherche{position:relative;margin-bottom:12px}
.perso-recherche svg{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--gris-400);pointer-events:none;
}
.perso-recherche .champ{padding-left:42px}
.perso-chips{display:flex;flex-wrap:wrap;gap:7px}
.perso-chip{
  font-size:13px;font-weight:500;padding:7px 14px;border-radius:100px;
  border:1.5px solid var(--gris-200);color:var(--gris-700);transition:.16s;
}
.perso-chip:hover{border-color:var(--noir)}
.perso-chip[aria-pressed="true"]{background:var(--noir);border-color:var(--noir);color:#fff}

.perso-compte{font-size:13px;color:var(--gris-500);padding:14px 22px 0}
.perso-liste{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px;
  padding:12px 22px 22px;max-height:420px;overflow-y:auto;
}
.perso-item{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--gris-200);border-radius:var(--r);padding:9px 12px 9px 9px;
  transition:.16s;
}
.perso-item:hover{border-color:var(--noir)}
.perso-item img{
  width:52px;height:52px;object-fit:contain;flex-shrink:0;
  background:var(--gris-100);border-radius:8px;padding:4px;
}
.perso-item .txt{flex:1;min-width:0}
.perso-item .txt b{
  display:block;font-size:13.5px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.perso-item .txt small{display:block;font-size:11.5px;color:var(--gris-500);margin-top:2px}
.perso-ajouter{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--gris-100);color:var(--noir);display:grid;place-items:center;transition:.16s;
}
.perso-ajouter:hover{background:var(--rouge-texte);color:#fff}
.perso-ajouter svg{width:15px;height:15px}
.perso-item.ajoute{border-color:var(--ok);background:rgba(27,158,90,.05)}
.perso-item.ajoute .perso-ajouter{background:var(--ok);color:#fff;cursor:default}
.perso-vide{padding:26px 22px;text-align:center;color:var(--gris-500);font-size:14px}

@media(max-width:640px){
  .perso-filtres,.perso-liste,.perso-compte,.perso-tete{padding-left:15px;padding-right:15px}
  .validation{padding:22px 18px}
}

/* ------------------------- Encadré accessoires ------------------------- */
.accessoires{
  margin-top:14px;border:1.5px dashed var(--gris-200);border-radius:var(--r-lg);
  padding:20px 22px;background:var(--gris-50);
}
.accessoires-tete{display:flex;gap:13px;align-items:flex-start;cursor:pointer}
.accessoires-tete input{
  width:19px;height:19px;margin-top:2px;accent-color:var(--rouge);flex-shrink:0;cursor:pointer;
}
.accessoires-tete b{display:block;font-size:15.5px;font-weight:600;margin-bottom:4px}
.accessoires-tete span span{display:block;font-size:13.5px;color:var(--gris-500);line-height:1.5}
.accessoires-precisions{margin-top:16px;padding-left:32px}
.accessoires-precisions[hidden]{display:none}
.accessoires-precisions textarea{min-height:84px}
@media(max-width:640px){
  .accessoires{padding:17px 15px}
  .accessoires-precisions{padding-left:0}
}

/* ===================== FORMULAIRE DE DEVIS ===================== */
.bloc-devis{
  background:var(--gris-50);border-top:1px solid var(--gris-200);
  padding:30px 26px;
}
.bloc-devis h2{font-size:21px;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
.bloc-devis .sous{color:var(--gris-500);font-size:14.5px;margin-bottom:22px}

.grille-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grille-form .pleine{grid-column:1/-1}
@media(max-width:640px){.grille-form{grid-template-columns:1fr}}
.libelle{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.libelle .opt{color:var(--gris-500);font-weight:400}
.consentement{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--blanc);border:1px solid var(--gris-200);border-radius:var(--r);
  padding:15px 16px;font-size:12.5px;color:var(--gris-500);line-height:1.5;
}
.consentement input{
  width:17px;height:17px;margin-top:1px;accent-color:var(--rouge);flex-shrink:0;cursor:pointer;
}
.consentement a{color:var(--rouge-texte);font-weight:500}

.confirmation{text-align:center;padding:48px 26px}
.confirmation .pastille{
  width:62px;height:62px;border-radius:50%;background:rgba(27,158,90,.12);
  color:var(--ok);display:grid;place-items:center;margin:0 auto 20px;
}
.confirmation .pastille svg{width:30px;height:30px}
.confirmation h2{font-size:25px;font-weight:700;margin-bottom:10px}
.confirmation p{color:var(--gris-500);max-width:480px;margin:0 auto 24px}