/* =============================================================================================
   Outils gratuits de jointheclub.fr (22/10/2026) : calculateur de devis, vérificateur d'email,
   compteur d'entreprises. Tout tourne dans le navigateur (outils.js), rien n'est envoyé.
   Jetons de couleur et polices : ceux de club.css (--ink, --accent, --display…).
   ============================================================================================= */

.outil-zone { position:relative; padding:8px 0 84px; scroll-margin-top:110px;
  background:linear-gradient(180deg, rgba(246,248,252,0) 0, #f3f6fb 38%, rgba(246,248,252,0) 100%); }

.outil { position:relative; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  border:1px solid var(--card-border); border-radius:26px; background:#fff; overflow:hidden;
  box-shadow:0 1px 0 rgba(19,20,23,.04), 0 30px 70px -40px rgba(19,20,23,.38); }

/* ---- Colonne de saisie ---- */
.outil__saisie { padding:38px 40px 36px; }
.outil__etiquette { display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.outil__etiquette::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(91,112,140,.16); }
.outil__titre { margin:0 0 8px; font-family:var(--display); font-size:clamp(23px,2.2vw,29px); line-height:1.18; letter-spacing:-.025em; color:var(--ink); }
.outil__intro { margin:0 0 26px; font-size:15.5px; line-height:1.6; color:#5f6b7d; }

/* Curseurs */
.reglage { margin:0 0 22px; }
.reglage__tete { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:10px; }
.reglage__tete label { font-size:14px; font-weight:600; color:var(--ink); }
.reglage__valeur { font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.reglage__valeur small { margin-left:3px; font-family:var(--sans); font-size:13px; font-weight:500; color:#8a94a6; letter-spacing:0; }
.reglage__aide { margin:8px 0 0; font-size:12.5px; color:#8a94a6; }
.curseur { --p:50%; width:100%; height:26px; margin:0; background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none; }
.curseur:focus { outline:none; }
.curseur::-webkit-slider-runnable-track { height:6px; border-radius:6px;
  background:linear-gradient(90deg, var(--ink) 0, var(--accent) var(--p), #e6eaf1 var(--p)); }
.curseur::-moz-range-track { height:6px; border-radius:6px; background:#e6eaf1; }
.curseur::-moz-range-progress { height:6px; border-radius:6px; background:linear-gradient(90deg, var(--ink), var(--accent)); }
.curseur::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; margin-top:-9px; border-radius:50%;
  background:#fff; border:2px solid var(--ink); box-shadow:0 6px 14px -4px rgba(19,20,23,.45); transition:transform .15s ease; }
.curseur::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid var(--ink);
  box-shadow:0 6px 14px -4px rgba(19,20,23,.45); }
.curseur:hover::-webkit-slider-thumb { transform:scale(1.08); }
.curseur:active::-webkit-slider-thumb { transform:scale(1.16); }
.curseur:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 5px rgba(91,112,140,.28), 0 6px 14px -4px rgba(19,20,23,.45); }
.curseur:focus-visible::-moz-range-thumb { box-shadow:0 0 0 5px rgba(91,112,140,.28); }

/* Champs */
.champ-outil { display:grid; gap:7px; margin:0 0 16px; }
.champ-outil label { font-size:14px; font-weight:600; color:var(--ink); }
.champ-outil select, .champ-outil textarea { width:100%; font:inherit; font-size:15px; color:var(--ink); background:#fff;
  border:1px solid var(--input-border); border-radius:12px; padding:12px 14px; transition:border-color .15s, box-shadow .15s; }
.champ-outil select { appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position:calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size:6px 6px; background-repeat:no-repeat; }
.champ-outil textarea { min-height:300px; resize:vertical; line-height:1.6; font-size:14.5px; }
.champ-outil select:focus, .champ-outil textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(91,112,140,.16); }
.outil__boutons { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.bouton-doux { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; font:inherit; font-size:13.5px; font-weight:500;
  color:var(--ink); background:#fff; border:1px solid var(--input-border); border-radius:999px; cursor:pointer; transition:border-color .15s, background .15s; }
.bouton-doux:hover { border-color:var(--accent); background:#f6f8fc; }
.puces { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.puce { padding:8px 13px; font:inherit; font-size:13px; font-weight:500; color:#3e5675; background:#f3f6fb;
  border:1px solid #dfe6f0; border-radius:999px; cursor:pointer; transition:all .18s ease; }
.puce:hover { border-color:var(--accent); }
.puce[aria-pressed="true"] { color:#fff; background:var(--ink); border-color:var(--ink); }

/* ---- Panneau de résultat (sombre) ---- */
.outil__resultat { position:relative; padding:38px 40px 34px; color:#e9edf3; background:var(--dark); isolation:isolate; overflow:hidden; }
.outil__resultat::before { content:""; position:absolute; inset:-30% -20% auto auto; width:520px; height:520px; z-index:-1;
  background:radial-gradient(closest-side, rgba(91,112,140,.55), rgba(91,112,140,0)); filter:blur(8px); }
.outil__resultat::after { content:""; position:absolute; inset:auto auto -35% -25%; width:420px; height:420px; z-index:-1;
  background:radial-gradient(closest-side, rgba(159,176,195,.18), rgba(159,176,195,0)); }
.res__label { margin:0 0 6px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#9fb0c3; }
.res__gros { margin:0; font-family:var(--display); font-size:clamp(46px,5.4vw,72px); font-weight:600; line-height:1; letter-spacing:-.04em; color:#fff; }
.res__phrase { margin:12px 0 24px; font-size:15.5px; line-height:1.6; color:#c5ceda; }
.res__phrase strong { color:#fff; font-weight:600; }
.res__tuiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 24px; }
.res__tuiles div { padding:16px 16px 14px; border:1px solid var(--dark-border); border-radius:16px; background:rgba(255,255,255,.035); }
.res__tuiles > div > b { display:block; font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-.02em; color:#fff; line-height:1.15; }
.res__tuiles > div > span { display:block; margin-top:6px; font-size:12.5px; line-height:1.4; color:#9fb0c3; }
.res__cta { display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border-radius:999px; font-size:14.5px; font-weight:600;
  color:var(--ink) !important; background:#fff; border:0 !important; transition:transform .18s ease, box-shadow .18s ease; }
.res__cta:hover { transform:translateY(-1px); box-shadow:0 12px 26px -12px rgba(255,255,255,.55); }
.res__cta span { transition:transform .18s ease; } .res__cta:hover span { transform:translateX(3px); }
.res__note { margin:16px 0 0; font-size:12.5px; line-height:1.5; color:#8592a6; }

/* Barre empilée (calculateur) */
.pile { margin:0 0 24px; }
.pile__barre { display:flex; height:12px; border-radius:8px; overflow:hidden; background:#22252b; }
.pile__barre i { display:block; height:100%; transition:width .6s cubic-bezier(.2,.8,.2,1); }
.pile__barre .p1 { background:#3b4250; } .pile__barre .p2 { background:#9fb0c3; } .pile__barre .p3 { background:#fff; }
.pile__legende { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:12.5px; color:#9fb0c3; }
.pile__legende span { display:inline-flex; align-items:center; gap:6px; }
.pile__legende i { width:9px; height:9px; border-radius:3px; display:inline-block; }

/* Chiffres qui défilent (odomètre) */
.roule { display:inline-flex; align-items:baseline; white-space:nowrap; }
.roule__c { position:relative; display:inline-block; height:1em; line-height:1; overflow:hidden; vertical-align:baseline; transition:width .75s cubic-bezier(.16,1,.3,1); }
.roule__c > span { display:block; transition:transform .75s cubic-bezier(.16,1,.3,1); }
.roule__c > span > b { display:block; height:1em; line-height:1; font:inherit; }
.roule__s { display:inline-block; }

/* Score (vérificateur) */
.score { display:flex; align-items:center; gap:20px; margin:4px 0 22px; }
.score__anneau { position:relative; width:112px; height:112px; flex:0 0 112px; }
.score__anneau svg { width:100%; height:100%; transform:rotate(-90deg); }
.score__anneau circle { fill:none; stroke-width:9; }
.score__fond { stroke:#2a2e36; }
.score__arc { stroke:#fff; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.16,1,.3,1), stroke .3s; }
.score__chiffre { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:1px; font-family:var(--display); font-size:30px; font-weight:600; color:#fff; letter-spacing:-.03em; }
.score__chiffre small { font-size:14px; color:#9fb0c3; font-weight:500; }
.score__verdict { margin:0; font-family:var(--display); font-size:21px; font-weight:600; line-height:1.25; color:#fff; letter-spacing:-.02em; }
.score__detail { margin:6px 0 0; font-size:13.5px; color:#9fb0c3; }
.stats { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.stats span { padding:6px 11px; font-size:12.5px; color:#c5ceda; border:1px solid var(--dark-border); border-radius:999px; background:rgba(255,255,255,.03); }
.stats b { color:#fff; font-weight:600; }
.controles { list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px; }
.controles li { display:grid; grid-template-columns:26px minmax(0,1fr); gap:10px; font-size:14px; line-height:1.5; color:#c5ceda;
  opacity:0; transform:translateY(6px); animation:apparait .45s cubic-bezier(.16,1,.3,1) forwards; }
.controles li strong { color:#fff; font-weight:600; }
.controles .ic { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; }
.controles .ok .ic { background:rgba(124,214,160,.16); color:#7cd6a0; }
.controles .av .ic { background:rgba(240,196,92,.16); color:#f0c45c; }
.controles .ko .ic { background:rgba(240,128,128,.16); color:#f08080; }
@keyframes apparait { to { opacity:1; transform:none; } }
.apercu { margin:0 0 6px; padding:14px 16px; max-height:180px; overflow:auto; font-size:13.5px; line-height:1.6; color:#c5ceda;
  border:1px solid var(--dark-border); border-radius:14px; background:rgba(255,255,255,.03); white-space:pre-wrap; }
.apercu mark { padding:0 3px; border-radius:4px; color:#1b1d22; background:#f0c45c; }

/* Compteur : bascule et barres par département */
.bascule { display:inline-flex; padding:4px; margin:0 0 18px; border-radius:999px; background:#22252b; border:1px solid var(--dark-border); }
.bascule button { padding:7px 14px; font:inherit; font-size:12.5px; font-weight:600; color:#9fb0c3; background:none; border:0; border-radius:999px; cursor:pointer; transition:all .18s; }
.bascule button[aria-pressed="true"] { color:var(--ink); background:#fff; }
.carte-deps { display:grid; gap:7px; margin:0 0 24px; }
.carte-deps button { display:grid; grid-template-columns:minmax(0,9.5em) minmax(0,1fr) 5.2em; align-items:center; gap:12px; width:100%;
  padding:5px 8px; margin:0 -8px; font:inherit; font-size:13px; text-align:left; color:#c5ceda; background:none; border:0; border-radius:10px; cursor:pointer; transition:background .15s; }
.carte-deps button:hover { background:rgba(255,255,255,.05); }
.carte-deps .piste { height:9px; border-radius:6px; background:#22252b; overflow:hidden; }
.carte-deps .piste i { display:block; height:100%; width:0; border-radius:6px; background:#5b708c; transition:width .7s cubic-bezier(.16,1,.3,1); }
.carte-deps .nb { text-align:right; font-variant-numeric:tabular-nums; color:#fff; }
.carte-deps button[aria-pressed="true"] { color:#fff; background:rgba(255,255,255,.07); }
.carte-deps button[aria-pressed="true"] .piste i { background:linear-gradient(90deg, #9fb0c3, #fff); }

.lecteur-seul { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.pile__legende .l1 { background:#3b4250; } .pile__legende .l2 { background:#9fb0c3; } .pile__legende .l3 { background:#fff; }
.champ-outil__titre { margin:0 0 8px; font-size:14px; font-weight:600; color:var(--ink); }

/* Encart « La cible se renouvelle » (compteur) */
.renouveau { margin:26px 0 0; padding:22px 22px 18px; border:1px solid #dfe6f0; border-radius:18px;
  background:linear-gradient(160deg, #f6f8fc 0, #fff 70%); }
.renouveau__tete { display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); }
.pouls { position:relative; width:9px; height:9px; border-radius:50%; background:#2fa66a; flex:0 0 9px; }
.pouls::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid #2fa66a; opacity:0; animation:pouls 1.8s ease-out infinite; }
@keyframes pouls { 0% { transform:scale(.4); opacity:.8; } 100% { transform:scale(1.5); opacity:0; } }
.renouveau__chiffre { display:flex; align-items:baseline; gap:2px; margin:0; font-family:var(--display); font-size:clamp(30px,3vw,38px);
  font-weight:600; letter-spacing:-.03em; line-height:1.05; color:var(--ink); }
.renouveau__legende { margin:4px 0 16px; font-size:13.5px; color:#5f6b7d; }
.histo { display:flex; align-items:flex-end; gap:5px; height:64px; padding:0 2px; }
.histo i { flex:1 1 0; min-width:0; height:3%; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg, var(--accent), #c6d0dc);
  transition:height .7s cubic-bezier(.16,1,.3,1); }
.histo i:last-child { background:linear-gradient(180deg, var(--ink), var(--accent)); }
.histo__axe { display:flex; justify-content:space-between; margin:6px 2px 0; font-size:11.5px; color:#8a94a6; }
.renouveau__note { margin:14px 0 0; font-size:13.5px; line-height:1.55; color:#4b5158; }
.renouveau__note strong { color:var(--ink); }

/* ---- Responsive ---- */
@media (max-width:980px) {
  .outil { grid-template-columns:minmax(0,1fr); }
  .outil__saisie, .outil__resultat { padding:30px 24px; }
}
@media (max-width:520px) {
  .outil { border-radius:20px; }
  .res__tuiles { grid-template-columns:minmax(0,1fr); }
  .res__tuiles div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
  .res__tuiles > div > span { margin-top:0; text-align:right; }
  .score__anneau { width:92px; height:92px; flex-basis:92px; }
  .carte-deps button { grid-template-columns:minmax(0,7.5em) minmax(0,1fr) 4.6em; gap:8px; font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce) {
  .roule__c > span, .pile__barre i, .score__arc, .carte-deps .piste i { transition:none; }
  .controles li { animation:none; opacity:1; transform:none; }
  .pouls::after { animation:none; }
  .histo i { transition:none; }
}
@media print { .outil-zone { background:none; } .outil__resultat { color:#000; background:#fff; } }