/* =====================================================================
   GYMBERY — Outils & Calculateurs
   Styles du composant calculateur (rendu par assets/js/outils.js).
   Chargé uniquement sur le CPT « outil » (cf. functions.php).
   Les tokens (:root --primary, --surface, polices…) viennent de style.css.
   ===================================================================== */

/* ============ CALCULATEUR (above the fold) ============ */
/* Chrome sans bordures : le widget se détache de la page par l'ombre, pas des filets. */
.gx-calc{margin-top:24px;background:var(--surface-container-lowest);border-radius:var(--radius-2xl);box-shadow:0 1px 2px rgba(21,28,39,.05),0 20px 48px -12px rgba(0,64,224,.14);overflow:hidden;}
.gx-calc__form{padding:26px 28px 22px;display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:620px){
  .gx-calc__form{grid-template-columns:1fr 1fr;gap:18px 16px;}
  .gx-calc__form.cols-wide{grid-template-columns:1.25fr 1fr;}
  .gx-calc__form.cols-3{grid-template-columns:1.4fr 1fr 1fr;}
}
.gx-field{display:flex;flex-direction:column;gap:7px;}
.gx-field.is-full{grid-column:1/-1;}
.gx-field label{font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--outline);}
/* champ composite (ex. distance + temps) : le libellé sert de kicker de section, pas juste d'étiquette de champ */
.gx-field:has(.gx-subgrid)>label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--primary);margin-bottom:2px;}
.gx-field:has(.gx-subgrid)>label::before{content:"directions_run";font-family:"Material Symbols Outlined";font-weight:400;font-size:16px;line-height:1;}
.gx-field select,.gx-field input,
.gx-subgrid select,.gx-subgrid input{font-family:var(--font-sans);font-size:16px;font-weight:600;color:var(--on-surface);background:var(--surface-container-low);border:none;border-radius:var(--radius-lg);padding:13px 14px;width:100%;transition:box-shadow .15s,background .15s;appearance:none;}
.gx-field select,.gx-subgrid select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23747688'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:32px;}
.gx-field select:focus,.gx-field input:focus,
.gx-subgrid select:focus,.gx-subgrid input:focus{outline:none;background:var(--surface-container-lowest);box-shadow:inset 0 0 0 1.5px var(--primary);}
.gx-field .gx-hint{font-size:12px;color:var(--outline);}

/* sous-grille pour une saisie composite (ex. VMA : distance + temps) */
.gx-subgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* aide « comment faire » inline, sous le formulaire (méthodes commutées) */
.gx-howto{margin:0 28px 18px;padding:12px 16px;background:var(--surface-container-low);border-radius:var(--radius-lg);font-size:13.5px;color:var(--on-surface-variant);}
.gx-howto strong{color:var(--on-surface);}

/* encadré réserve / mise en garde de méthode */
.gx-reserve{display:flex;align-items:flex-start;gap:10px;margin:0 28px 18px;background:var(--surface-container-low);border-left:4px solid var(--primary);border-radius:var(--radius-lg);padding:12px 14px;color:var(--on-surface-variant);font-size:13.5px;}
.gx-reserve strong{color:var(--on-surface);}
.gx-reserve::before{content:"\2248";font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.1;color:var(--primary);}

/* résultat en hero dégradé (remplace l'ancien encadré à bordure) */
.gx-result{position:relative;margin:0 16px 16px;padding:26px 26px 22px;border-radius:var(--radius-xl);background:linear-gradient(120deg,var(--primary) 0%,var(--on-primary-fixed-variant) 100%);color:#fff;overflow:hidden;}
.gx-result::before{content:"";position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);}
.gx-result::after{content:"";position:absolute;bottom:-80px;left:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,191,0,.18),transparent 70%);}
.gx-result__label{position:relative;font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.75);}
.gx-result__big{position:relative;font-family:var(--font-display);font-weight:800;font-size:52px;line-height:1;letter-spacing:-.03em;color:#fff;margin-top:8px;}
.gx-result__big [data-bigunit]{font-size:22px;font-weight:600;color:rgba(255,255,255,.75);margin-left:4px;}
.gx-result__sub{position:relative;font-size:14.5px;color:rgba(255,255,255,.9);margin-top:10px;max-width:56ch;}
.gx-result__sub strong{color:#fff;}

/* fiches de résultat secondaires en puces (plus de grille à cases) */
.gx-formulas{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.gx-fcard{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);border-radius:var(--radius-full);padding:8px 18px 8px 12px;}
.gx-fcard__ico{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:16px;}
.gx-fcard__name{font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.72);}
.gx-fcard__val{font-family:var(--font-display);font-weight:700;font-size:16px;color:#fff;margin-top:2px;}
.gx-fcard__val span{font-size:12px;font-weight:600;color:rgba(255,255,255,.75);}
.gx-fcard__note{font-size:10.5px;color:rgba(255,255,255,.65);margin-top:2px;}
.gx-fcard--amber .gx-fcard__val{color:var(--amber);}

.gx-warn{position:relative;display:none;align-items:flex-start;gap:10px;margin-top:16px;background:rgba(255,255,255,.16);border-radius:var(--radius);padding:12px 14px;color:#fff;font-size:13.5px;}
.gx-warn.is-on{display:flex;}
.gx-warn::before{content:"\26A0";font-size:18px;line-height:1.2;color:var(--amber);}

/* table d'interprétation du résultat */
.gx-tablewrap{padding:22px 28px 6px;}
.gx-tablewrap h3{font-size:17px;margin:6px 0 4px;font-family:var(--font-display);font-weight:700;color:var(--on-surface);}
.gx-tablewrap p.gx-small{font-size:13.5px;color:var(--on-surface-variant);margin:0 0 14px;}
.gx-tscroll{overflow-x:auto;margin:0 0 22px;border-radius:var(--radius-lg);box-shadow:0 1px 3px rgba(21,28,39,.06);}
table.gx-gt{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;background:var(--surface-container-lowest);min-width:480px;}
table.gx-gt thead th{background:var(--on-surface);color:#fff;font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;text-align:left;padding:12px 16px;}
table.gx-gt thead th:first-child{border-top-left-radius:var(--radius-lg);}
table.gx-gt thead th:last-child{border-top-right-radius:var(--radius-lg);}
table.gx-gt tbody td{padding:12px 16px;border-top:1px solid var(--surface-container-low);vertical-align:middle;}
table.gx-gt tbody tr:last-child td:first-child{border-bottom-left-radius:var(--radius-lg);}
table.gx-gt tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius-lg);}
table.gx-gt tbody td.gx-c{text-align:center;font-variant-numeric:tabular-nums;}
table.gx-gt .gx-strong{font-family:var(--font-display);font-weight:800;color:var(--on-surface);}
table.gx-gt .gx-mono{font-family:var(--font-mono);font-weight:700;color:var(--on-surface);}
table.gx-gt tr.is-sel td{background:var(--primary-fixed);}
table.gx-gt tr.is-sel td:first-child{box-shadow:inset 4px 0 0 var(--primary);}
table.gx-gt tr.o-vma td,table.gx-gt tr.o-force td{background:rgba(0,64,224,.05);}
table.gx-gt tr.o-seuil td,table.gx-gt tr.o-hyper td{background:rgba(255,191,0,.10);}
table.gx-gt tr.o-endu td{background:rgba(15,138,77,.07);}
.gx-obj{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;}
.gx-obj::before{content:"";width:10px;height:10px;border-radius:3px;flex:none;}
.gx-obj.vma::before,.gx-obj.maint::before,.gx-obj.force::before,.gx-obj.confirme::before{background:var(--primary);}
.gx-obj.seuil::before,.gx-obj.def::before,.gx-obj.hyper::before,.gx-obj.intermediaire::before{background:var(--amber);}
.gx-obj.endu::before,.gx-obj.gain::before,.gx-obj.debutant::before{background:var(--pos);}
.gx-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:13px;color:var(--on-surface-variant);}
.gx-legend span{display:inline-flex;align-items:center;gap:7px;}
.gx-legend i{width:11px;height:11px;border-radius:3px;display:inline-block;}

/* mise en garde YMYL (rendue par le thème en post_content, classe partagée) */
.gx-disclaimer{margin-top:18px;background:var(--surface-container-low);border:1px solid var(--outline-variant);border-left:4px solid var(--amber);border-radius:var(--radius-lg);padding:14px 18px;font-size:14px;color:var(--on-surface-variant);}
.gx-disclaimer strong{color:var(--on-surface);}
.gx-revdate{font-size:13px;line-height:1.5;color:var(--on-surface-variant);margin-top:14px;}

.gx-eq{font-family:var(--font-mono);background:var(--surface-container);padding:2px 7px;border-radius:5px;font-size:.92em;white-space:nowrap;}

/* ============ CHROME DE PAGE (single-outil.php / archive-outil.php) ============ */
/* Page-outil en colonne pleine : pas de rail/sommaire (réservé aux articles). */
.entry-grid--solo{display:block;}
.outil-lede{font-size:18px;line-height:1.6;color:var(--on-surface-variant);margin:14px 0 0;max-width:64ch;}
.outil-single .entry-header{padding-bottom:12px;}
.outil-widget{max-width:var(--reading-width);margin:0 auto 8px;}
.outil-noscript{margin:28px 0 0;padding:14px 18px;background:var(--surface-container-low);border:1px solid var(--outline-variant);border-left:4px solid var(--amber);border-radius:var(--radius-lg);font-size:14px;color:var(--on-surface-variant);}

/* Hub /outils/ : icône calculateur dans le pied de carte. */
.outil-card__ico{font-size:18px;line-height:1;vertical-align:-3px;color:var(--primary);margin-right:5px;}