/* =========================================================================
   MEETennis — assets/outils.css
   Les huit simulateurs de l'onglet Ressources › Outils IA.
   Chargée seulement par outil.php : inutile de la faire payer aux autres
   écrans.
   ========================================================================= */

.ot-intro{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin:16px 0 0}

.ot-h2{font-family:'Montserrat',sans-serif;font-weight:900;font-size:19px;letter-spacing:-.4px;
  margin:24px 0 12px;color:var(--ink)}

.ot-card{background:var(--surface);border-radius:20px;padding:18px;box-shadow:var(--shadow-soft);margin-top:14px}
.ot-note{font-size:13px;color:var(--ink-faint);line-height:1.55;margin:12px 0 0}
.ot-hint{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:7px 0 0}

/* ---- Champs -------------------------------------------------------------
   Les <select> natifs sont volontairement conservés : sur téléphone ils
   ouvrent la roue du système, qui reste plus rapide à manipuler d'une main
   qu'une liste maison, et gratuite en accessibilité. */
.ot-field{margin-bottom:18px}
.ot-field:last-child{margin-bottom:0}
.ot-field > label{display:block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;
  color:var(--ink);margin-bottom:8px}
.ot-field select{width:100%;padding:13px 15px;border:1px solid rgba(0,0,0,.12);border-radius:12px;
  font-family:inherit;font-size:15px;color:var(--ink);background:var(--surface);appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23998f88' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:40px}

.ot-range{display:flex;align-items:center;gap:14px}
.ot-range input[type=range]{flex:1;min-width:0;appearance:none;height:6px;border-radius:999px;
  background:rgba(128,128,128,.22);outline:none}
.ot-range input[type=range]::-webkit-slider-thumb{appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--brand);border:3px solid #fff;box-shadow:0 3px 10px rgba(225,94,1,.45);cursor:pointer}
.ot-range input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--brand);border:3px solid #fff;box-shadow:0 3px 10px rgba(225,94,1,.45);cursor:pointer}
.ot-range output{flex:0 0 auto;min-width:78px;text-align:right;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;color:var(--brand)}

.ot-check{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--ink);line-height:1.45;
  cursor:pointer;margin-top:4px}
.ot-check input{width:21px;height:21px;flex:0 0 auto;accent-color:var(--brand);margin:1px 0 0}

/* ---- Résultats ---------------------------------------------------------- */
.ot-out{padding:6px 18px}
.ot-row{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.ot-row:last-child{border-bottom:0}
.ot-row .k{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--ink)}
.ot-row .k small{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:500;margin-top:3px;line-height:1.45}
.ot-row .v{flex:0 0 auto;font-family:'Montserrat',sans-serif;font-weight:900;font-size:16px;color:var(--brand);
  text-align:right;max-width:46%}
.ot-row .v small{display:block;font-family:'Raleway',sans-serif;font-weight:600;font-size:11.5px;
  color:var(--ink-faint);margin-top:2px}

.ot-big{text-align:center;padding:20px 0 4px}
.ot-big b{display:block;font-family:'Montserrat',sans-serif;font-weight:900;font-size:44px;line-height:1;
  letter-spacing:-1.5px;color:var(--brand)}
.ot-big span{display:block;font-size:13.5px;color:var(--ink-soft);font-weight:600;margin-top:8px}

.ot-alert{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:13px 15px;margin:14px 0 4px;
  font-size:13.5px;line-height:1.5;font-weight:600}
.ot-alert.warn{background:rgba(198,40,40,.08);color:#a92222}
.ot-alert.ok{background:rgba(46,125,50,.10);color:#2e7d32}
.ot-alert.info{background:rgba(225,94,1,.09);color:#a34600}

.ot-list{margin:0;padding-left:20px;font-size:14.5px;color:var(--ink-soft);line-height:1.7}
.ot-list b{color:var(--ink)}

.ot-dl{margin:0}
.ot-dl > div{display:flex;justify-content:space-between;gap:14px;padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.06)}
.ot-dl > div:last-child{border-bottom:0}
.ot-dl dt{margin:0;font-size:14.5px;color:var(--ink-soft);font-weight:600}
.ot-dl dd{margin:0;font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;color:var(--ink)}

/* ---- Cordage : l'indice et ses jauges ------------------------------------ */
.ot-irc{display:flex;align-items:baseline;gap:12px;padding-bottom:14px;margin-bottom:6px;
  border-bottom:1px solid rgba(0,0,0,.06)}
.ot-irc b{font-family:'Montserrat',sans-serif;font-weight:900;font-size:40px;line-height:1;
  letter-spacing:-1.4px;color:var(--brand)}
.ot-irc span{font-size:13.5px;color:var(--ink-soft);font-weight:600}
.ot-irc i{font-style:normal;color:var(--ink);font-weight:800}

.ot-gauge{margin-top:14px}
.ot-gauge .gl{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--ink);
  margin-bottom:6px}
.ot-gauge .gl span{color:var(--ink-soft);font-weight:600}
.ot-gauge .gb{height:8px;border-radius:999px;background:rgba(128,128,128,.16);overflow:hidden}
.ot-gauge .gb i{display:block;height:100%;border-radius:999px;background:var(--brand);
  transition:width .25s ease}
.ot-verdict{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:18px 0 0}

/* ---- Chronomètre --------------------------------------------------------
   Lisible depuis l'autre bout du court : le téléphone est posé sur le banc,
   pas tenu en main. D'où le cadran plein écran et le fond qui change de
   couleur — la couleur se voit de loin, les chiffres non. */
.ot-timer{border-radius:24px;padding:34px 20px;text-align:center;margin-top:16px;
  background:rgba(128,128,128,.10);transition:background .3s ease}
.ot-timer.work{background:rgba(198,40,40,.14)}
.ot-timer.rest{background:rgba(46,125,50,.14)}
.ot-timer.done{background:rgba(225,94,1,.14)}
.ot-phase{display:block;font-family:'Montserrat',sans-serif;font-weight:900;font-size:14px;
  letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft)}
.ot-timer.work .ot-phase{color:#a92222}
.ot-timer.rest .ot-phase{color:#2e7d32}
.ot-time{display:block;font-family:'Montserrat',sans-serif;font-weight:900;
  font-size:clamp(56px,19vw,86px);line-height:1;letter-spacing:-3px;color:var(--ink);
  margin:10px 0 8px;font-variant-numeric:tabular-nums}
.ot-round{display:block;font-size:14px;font-weight:700;color:var(--ink-soft)}
.ot-actions{display:flex;gap:11px;margin-top:14px}
.ot-actions .d-cta{margin:0;flex:1;padding:15px}

/* ---- Court --------------------------------------------------------------- */
.ot-court svg{display:block;width:100%;max-width:250px;margin:0 auto;height:auto}
.cu-zone{fill:rgba(225,94,1,.10);transition:fill .25s}
.cu-zone.off{fill:transparent}
.cu-single{fill:rgba(225,94,1,.16)}
.cu-line{fill:none;stroke:var(--ink);stroke-width:2;opacity:.75}
.cu-center{stroke-width:3}
.cu-net{stroke:var(--brand);stroke-width:3.5;stroke-dasharray:5 4}
.ot-court .ot-hint{text-align:center;margin-top:14px}

/* ---- Galaxie ------------------------------------------------------------- */
.ot-galaxie{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.ga-item{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border-radius:18px;
  padding:15px;box-shadow:var(--shadow-soft)}
.ga-ball{width:38px;height:38px;border-radius:50%;flex:0 0 auto;border:2px solid rgba(0,0,0,.10);
  box-shadow:inset -3px -4px 8px rgba(0,0,0,.12)}
.ga-b{min-width:0;flex:1}
.ga-b b{display:block;font-family:'Montserrat',sans-serif;font-weight:900;font-size:16px;color:var(--ink)}
.ga-b .age{font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;color:var(--brand);
  background:rgba(225,94,1,.10);padding:3px 9px;border-radius:999px;display:inline-block;margin-top:5px}
.ga-b p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:8px 0 0}
.ga-b .meta{font-size:12.5px;color:var(--ink-faint);font-weight:600;margin-top:6px}

/* ---- Grille des autres outils -------------------------------------------- */
.ot-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.ot-tile{display:flex;align-items:center;gap:11px;background:var(--surface);border-radius:16px;
  padding:14px 13px;box-shadow:var(--shadow-soft);
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;color:var(--ink);line-height:1.3}
.ot-tile:active{transform:scale(.97)}
.ot-ico{width:36px;height:36px;border-radius:11px;flex:0 0 auto;background:rgba(225,94,1,.10);color:var(--brand);
  display:flex;align-items:center;justify-content:center}
.ot-ico svg{width:19px;height:19px}

/* La liste des outils dans l'onglet Ressources reprend la même vignette,
   mais en pleine largeur avec le résumé. */
.ot-item{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border-radius:18px;
  padding:15px;box-shadow:var(--shadow-soft)}
.ot-item .ot-ico{width:42px;height:42px;border-radius:13px}
.ot-item .ot-ico svg{width:21px;height:21px}
.ot-item .b{min-width:0;flex:1}
.ot-item h3{font-family:'Montserrat',sans-serif;font-weight:800;font-size:15.5px;line-height:1.3;
  margin:0 0 5px;color:var(--ink)}
.ot-item p{font-size:13.5px;color:var(--ink-soft);line-height:1.45;margin:0}
.ot-item .mc{flex:0 0 auto;color:var(--ink-faint);align-self:center}
.ot-item .mc svg{width:18px;height:18px}
.ot-items{display:flex;flex-direction:column;gap:11px;margin-top:14px}

@media (min-width:900px){
  .ot-grid{grid-template-columns:repeat(3,1fr)}
}