/* =====================================================================
   Opentri Outils : socle CSS (assets/outils.css)
   Charte 2026 : Apfel Grotezk + Outfit, navy, bleu d'action, accent lime.
   Préfixe ot- partout. Markup de référence : _build/SOCLE.md et _build/demo/gabarit.html
   1 Polices . 2 Tokens . 3 Base . 4 Typographie . 5 Mise en page . 6 Formulaires
   7 Boutons . 8 Cartes et résultats . 9 Tableaux . 10 Onglets . 11 FAQ
   12 Encadrés . 13 Progression et checklist . 14 Blocs de conversion
   15 Retours (toast, vide, squelette, partage) . 16 Modale . 17 Utilitaires
   18 Mouvement réduit . 19 Impression
   ===================================================================== */

/* 1. Polices (fichiers dans assets/fonts/) */
@font-face{font-family:"Apfel Grotezk";src:url(fonts/ApfelGrotezk-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Apfel Grotezk";src:url(fonts/ApfelGrotezk-Mittel.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Apfel Grotezk";src:url(fonts/ApfelGrotezk-Fett.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url(fonts/Outfit-Variable.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

/* 2. Tokens. Gammes recopiées de tokens-opentri-2026.json (50 à 950).
   swim = blue, success = ride, warning = run : mêmes valeurs, non dupliquées. */
:root{
  color-scheme:light;
  --ot-navy-50:#E3E4EB;--ot-navy-100:#CBCCD8;--ot-navy-200:#999DB0;--ot-navy-300:#686D89;--ot-navy-400:#363E61;--ot-navy-500:#050E3A;--ot-navy-600:#040B2E;--ot-navy-700:#030823;--ot-navy-800:#020617;--ot-navy-900:#01030C;--ot-navy-950:#010106;
  --ot-blue-50:#EDF2FE;--ot-blue-100:#DBE6FD;--ot-blue-200:#B7CCFC;--ot-blue-300:#92B3FA;--ot-blue-400:#6E99F9;--ot-blue-500:#4A80F7;--ot-blue-600:#3B68CB;--ot-blue-700:#2D51A0;--ot-blue-800:#1E3974;--ot-blue-900:#102249;--ot-blue-950:#081633;
  --ot-lime-50:#FDFEE9;--ot-lime-100:#FAFDD3;--ot-lime-200:#F5FBA7;--ot-lime-300:#F1F97B;--ot-lime-400:#ECF74F;--ot-lime-500:#E7F523;--ot-lime-600:#BAC51C;--ot-lime-700:#8C9515;--ot-lime-800:#5F640E;--ot-lime-900:#313407;--ot-lime-950:#1B1C04;
  --ot-ride-50:#E9FAF5;--ot-ride-100:#D2F6EC;--ot-ride-200:#A6EDD9;--ot-ride-300:#79E4C6;--ot-ride-400:#4DDBB3;--ot-ride-500:#20D2A0;--ot-ride-600:#1AA880;--ot-ride-700:#137E60;--ot-ride-800:#0D5440;--ot-ride-900:#062A20;--ot-ride-950:#031510;
  --ot-run-50:#FEF8EC;--ot-run-100:#FDF1D8;--ot-run-200:#FBE3B1;--ot-run-300:#F9D48B;--ot-run-400:#F7C664;--ot-run-500:#F5B83D;--ot-run-600:#C69531;--ot-run-700:#977125;--ot-run-800:#684E18;--ot-run-900:#392A0C;--ot-run-950:#221906;
  --ot-strength-50:#F5F0FF;--ot-strength-100:#EBE1FF;--ot-strength-200:#D7C4FF;--ot-strength-300:#C3A6FF;--ot-strength-400:#AF89FF;--ot-strength-500:#9B6BFF;--ot-strength-600:#8056D9;--ot-strength-700:#6540B3;--ot-strength-800:#4B2B8E;--ot-strength-900:#301568;--ot-strength-950:#220B55;
  --ot-error-50:#FDEFEF;--ot-error-100:#FCE0E0;--ot-error-200:#F9C0C0;--ot-error-300:#F6A1A1;--ot-error-400:#F38181;--ot-error-500:#F06262;--ot-error-600:#CA4F4F;--ot-error-700:#A33D3D;--ot-error-800:#7D2A2A;--ot-error-900:#561818;--ot-error-950:#430E0E;
  --ot-neutral-50:#F7FBFC;--ot-neutral-100:#EEF1F7;--ot-neutral-200:#DDE3EE;--ot-neutral-300:#C5CDDC;--ot-neutral-400:#9CA8BC;--ot-neutral-500:#76849D;--ot-neutral-600:#59677F;--ot-neutral-700:#3E4B63;--ot-neutral-800:#29354D;--ot-neutral-900:#17233C;--ot-neutral-950:#0B1630;
  /* Marque, disciplines, états (contrat §2) */
  --ot-blue:#4A80F7;--ot-navy:#050E3A;--ot-air:#E8EFFE;--ot-lime:#E7F523;--ot-white:#FFFFFF;
  --ot-swim:#4A80F7;--ot-bike:#20D2A0;--ot-run:#F5B83D;--ot-strength:#9B6BFF;
  --ot-error:#F06262;--ot-success:#20D2A0;--ot-warning:#F5B83D;
  /* Neutres courts : n0 = 50 ... n8 = 800, n9 = 950 */
  --ot-n0:var(--ot-neutral-50);--ot-n1:var(--ot-neutral-100);--ot-n2:var(--ot-neutral-200);--ot-n3:var(--ot-neutral-300);--ot-n4:var(--ot-neutral-400);
  --ot-n5:var(--ot-neutral-500);--ot-n6:var(--ot-neutral-600);--ot-n7:var(--ot-neutral-700);--ot-n8:var(--ot-neutral-800);--ot-n9:var(--ot-neutral-950);
  /* Rôles (paires AA documentées dans SOCLE.md) */
  --ot-bg:var(--ot-n0);--ot-ink:var(--ot-navy);--ot-muted:var(--ot-n6);--ot-line:var(--ot-n2);--ot-ctl-line:var(--ot-n5);
  --ot-link:var(--ot-blue-600);--ot-focus:var(--ot-blue-600);
  --ot-err-ink:var(--ot-error-700);--ot-ok-ink:var(--ot-ride-700);--ot-warn-ink:var(--ot-run-800);
  --ot-font-display:"Apfel Grotezk","Outfit",system-ui,sans-serif;
  --ot-font-body:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* Espacements : échelle du design system (grille 8 px) */
  --ot-s0:4px;--ot-s1:8px;--ot-s2:12px;--ot-s3:16px;--ot-s4:24px;--ot-s5:32px;--ot-s6:40px;--ot-s7:48px;--ot-s8:64px;
  --ot-r-ctl:8px;--ot-r-card:16px;--ot-r-pill:999px;
  --ot-h-l:48px;--ot-h-m:44px;--ot-h-s:36px;
  --ot-shadow:0 1px 2px rgba(5,14,58,.06),0 6px 20px rgba(5,14,58,.06);
  --ot-w-read:720px;--ot-w-tool:880px;--ot-w-hub:1120px;--ot-gut:16px;--ot-head:56px;
  --ot-t:.15s;--ot-ease:cubic-bezier(.2,.7,.2,1)
}
@media (min-width:1024px){:root{--ot-gut:24px;--ot-head:64px}}

/* 3. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--ot-head) + 16px)}
body{margin:0;min-height:100vh;background:var(--ot-bg);color:var(--ot-ink);font:400 16px/1.55 var(--ot-font-body);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
@media (min-width:1024px){body{font-size:17px}}
img,canvas,video{display:block;max-width:100%;height:auto}
input,button,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
:where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote){margin:0}
:where(ul,ol)[class]{list-style:none;padding:0}
a{color:var(--ot-link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:is([hidden],#ot-none){display:none} /* hidden l'emporte toujours sur le display d'un composant */
:focus-visible{outline:2px solid var(--ot-focus);outline-offset:2px}
::selection{background:var(--ot-lime);color:var(--ot-navy)}
table{border-collapse:collapse}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* 4. Typographie : mobile d'abord, desktop à 1024 px */
:where(.ot) h1,.ot-h1{font:700 32px/.95 var(--ot-font-display);letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
:where(.ot) h2,.ot-h2{font:700 26px/1 var(--ot-font-display);letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
:where(.ot) h3,.ot-h3{font:500 19px/1.25 var(--ot-font-display);letter-spacing:-.01em}
:where(.ot) h4{font:600 16px/1.35 var(--ot-font-body)}
.ot-h2s{font-size:22px}
.ot-chapeau{max-width:60ch;color:var(--ot-n7);font-size:18px;line-height:1.5}
.ot-kicker{color:var(--ot-blue-600);font:600 14px/1.2 var(--ot-font-body);letter-spacing:.06em;text-transform:uppercase}
.ot-muted{color:var(--ot-muted)}
.ot-small{font-size:14px;line-height:1.45}
.ot-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.ot-prose>*+*{margin-top:var(--ot-s3)}
.ot-prose>h2{margin-top:var(--ot-s7)}
.ot-prose>h3{margin-top:var(--ot-s5)}
.ot-prose>:is(h2,h3)+*{margin-top:var(--ot-s2)}
.ot-prose>:first-child{margin-top:0}
.ot-prose :where(ul,ol):not([class]){padding-left:1.3em}
.ot-prose li+li{margin-top:6px}
.ot-prose li::marker{color:var(--ot-blue-600)}
.ot-prose strong{font-weight:600}
@media (min-width:1024px){
  :where(.ot) h1,.ot-h1{font-size:48px}
  :where(.ot) h2,.ot-h2{font-size:34px}
  :where(.ot) h3,.ot-h3{font-size:22px}
  .ot-h2s{font-size:26px}
  .ot-chapeau{font-size:20px}
}

/* 5. Mise en page : lien d'évitement, header, colonnes, intro, footer */
.ot-skip{position:absolute;top:-200px;left:8px;z-index:100;padding:12px 16px;border-radius:var(--ot-r-ctl);background:var(--ot-navy);color:#fff;font-weight:600;text-decoration:none}
.ot-skip:focus{top:8px}
.ot-header{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--ot-line);background:var(--ot-n0)}
.ot-header-in,.ot-footer-in{width:min(100% - 2 * var(--ot-gut),var(--ot-w-hub));margin-inline:auto}
.ot-header-in{display:flex;align-items:center;gap:var(--ot-s1);min-height:var(--ot-head)}
.ot-logo{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;border-radius:4px}
.ot-logo img{width:auto;height:28px}
.ot-hlink{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 10px;border-radius:var(--ot-r-ctl);color:var(--ot-ink);font-size:15px;font-weight:500;text-decoration:none}
.ot-hlink:hover{background:var(--ot-n1)}
@media (max-width:559px){.ot-hlink{padding:0}.ot-hlink span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.ot-main{display:flex;flex-direction:column;gap:var(--ot-s7);padding:var(--ot-s4) 0 var(--ot-s8)}
.ot-main>*{width:min(100% - 2 * var(--ot-gut),var(--ot-w,var(--ot-w-tool)));margin-inline:auto}
.ot-intro,.ot-content,.ot-faq{--ot-w:var(--ot-w-read)}
.ot-main--hub>*{--ot-w:var(--ot-w-hub)}
@media (min-width:1024px){.ot-main{gap:72px;padding-top:var(--ot-s6)}}
.ot-intro{display:grid;gap:var(--ot-s3)}
.ot-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;color:var(--ot-muted);font-size:14px}
.ot-crumbs li{display:flex;align-items:center;gap:8px}
.ot-crumbs li+li::before{content:"/";content:"/"/"";color:var(--ot-n4)}
.ot-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.ot-crumbs a:hover{color:var(--ot-ink);text-decoration:underline}
.ot-crumbs [aria-current]{color:var(--ot-ink);font-weight:500}
.ot-footer{border-top:1px solid var(--ot-line);background:var(--ot-n1);color:var(--ot-n7);font-size:14px}
.ot-footer-in{display:grid;gap:var(--ot-s3);padding:var(--ot-s5) 0}
.ot-footer img{width:auto;height:22px}
.ot-footer ul{display:flex;flex-wrap:wrap;column-gap:var(--ot-s4);list-style:none;padding:0}
.ot-footer a{display:inline-flex;align-items:center;min-height:44px;color:inherit}
@media (min-width:768px){.ot-footer-in{grid-template-columns:auto 1fr auto;align-items:center}.ot-footer ul{justify-content:center}}
/* Les enfants de grille peuvent rétrécir : un tableau large défile dans son cadre au lieu d'élargir la page */
:where(.ot-form,.ot-group,.ot-field,.ot-intro,.ot-tool,.ot-result,.ot-res,.ot-stack,.ot-tabs,.ot-faq,.ot-cl,.ot-cl-zone,.ot-unlock,.ot-unlock-b,.ot-bridge,.ot-others,.ot-final,.ot-m-step,.ot-sheet,.ot-sheet-s)>*{min-width:0}

/* 6. Formulaires */
.ot-form{display:grid;gap:var(--ot-s4)}
.ot-group{display:grid;gap:var(--ot-s3);min-width:0;margin:0;padding:0;border:0}
.ot-legend{padding:0;color:var(--ot-ink);font:500 18px/1.25 var(--ot-font-display);letter-spacing:-.01em}
.ot-group>.ot-legend+.ot-help{margin-top:-8px}
.ot-grid{display:grid;gap:var(--ot-s3);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--ot-min,150px)),1fr))}
.ot-field{display:grid;align-content:start;gap:6px;min-width:0;margin:0;padding:0;border:0}
:is(.ot-field,.ot-group)>legend{float:left;width:100%} /* légende flottante : elle devient un élément de grille */
.ot-label{padding:0;color:var(--ot-ink);font-size:15px;font-weight:600;line-height:1.3}
.ot-label small{color:var(--ot-muted);font-size:14px;font-weight:400}
.ot-help{color:var(--ot-muted);font-size:14px;line-height:1.45}
.ot-error{display:flex;align-items:flex-start;gap:8px;color:var(--ot-err-ink);font-size:14px;font-weight:500;line-height:1.4}
.ot-error::before,.ot-alert::before{content:"!";content:"!"/"";flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--ot-err-ink);color:#fff;font:700 12px/1 var(--ot-font-body)}
.ot-alert{display:flex;gap:10px;padding:12px 14px;border:1px solid var(--ot-error-300);border-radius:var(--ot-r-ctl);background:var(--ot-error-50);font-size:15px;line-height:1.45}
.ot-input{width:100%;min-height:var(--ot-h-l);padding:10px 14px;border:1px solid var(--ot-ctl-line);border-radius:var(--ot-r-ctl);background:#fff;color:var(--ot-ink);font-size:16px;font-weight:500;line-height:1.3;appearance:none;transition:border-color var(--ot-t),box-shadow var(--ot-t)}
.ot-input::placeholder{color:var(--ot-n6);font-weight:400;opacity:1}
.ot-input:hover{border-color:var(--ot-n7)}
.ot-input:focus{border-color:var(--ot-focus)}
.ot-input[aria-invalid=true]{border-color:var(--ot-error-600);box-shadow:inset 0 0 0 1px var(--ot-error-600)}
.ot-input:disabled{background:var(--ot-n1);color:var(--ot-n6);cursor:not-allowed}
.ot-input[type=number]{-moz-appearance:textfield}
.ot-input::-webkit-inner-spin-button,.ot-input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}
select.ot-input{padding-right:40px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ot-ink) 50%),linear-gradient(135deg,var(--ot-ink) 50%,transparent 50%);background-position:calc(100% - 21px) 55%,calc(100% - 16px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.ot-control{position:relative}
.ot-control>.ot-input{padding-right:var(--ot-u,3.6em)}
.ot-control--l{--ot-u:5.6em} /* unité longue : « /100 m », « km/h » */
.ot-unit{position:absolute;top:50%;right:14px;transform:translateY(-50%);color:var(--ot-muted);font-size:15px;pointer-events:none}
/* Boutons segmentés (groupe de radios) */
.ot-seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--ot-line);border-radius:12px;background:var(--ot-n1)}
.ot-seg>label{position:relative;flex:1 1 0;min-width:max-content}
.ot-seg input,.ot-check input,.ot-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ot-seg span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:6px 14px;border-radius:var(--ot-r-ctl);color:var(--ot-n7);font-size:15px;font-weight:600;line-height:1.25;text-align:center;transition:background-color var(--ot-t),color var(--ot-t)}
.ot-seg input:hover+span{background:rgba(255,255,255,.7);color:var(--ot-ink)}
.ot-seg input:checked+span{background:var(--ot-navy);color:#fff}
.ot-seg input:focus-visible+span{outline:2px solid var(--ot-focus);outline-offset:2px}
.ot-seg--cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:8px;padding:0;border:0;background:none}
.ot-seg--cards>label{min-width:0}
.ot-seg--cards span{position:relative;height:100%;align-items:flex-start;gap:2px;min-height:56px;padding:12px 14px 12px 44px;border:1px solid var(--ot-ctl-line);border-radius:12px;background:#fff;color:var(--ot-ink);text-align:left}
.ot-seg--cards span::before{content:"";position:absolute;top:14px;left:14px;width:20px;height:20px;border:2px solid var(--ot-ctl-line);border-radius:50%;background:#fff}
.ot-seg--cards small{color:var(--ot-muted);font-size:14px;font-weight:400}
.ot-seg--cards input:hover+span{background:#fff;border-color:var(--ot-n7)}
.ot-seg--cards input:checked+span{border-color:var(--ot-navy);background:var(--ot-air);box-shadow:inset 0 0 0 1px var(--ot-navy);color:var(--ot-ink)}
.ot-seg--cards input:checked+span::before{border:6px solid var(--ot-navy)}
/* Cases à cocher et interrupteur */
.ot-checks{display:flex;flex-wrap:wrap;gap:4px 20px}
.ot-check,.ot-switch{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:44px;line-height:1.35;cursor:pointer}
.ot-check-box{flex:none;display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--ot-ctl-line);border-radius:6px;background:#fff;transition:background-color var(--ot-t),border-color var(--ot-t)}
.ot-check-box::after{content:"";width:6px;height:11px;margin-top:-2px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);opacity:0}
.ot-check input:checked+.ot-check-box{border-color:var(--ot-navy);background:var(--ot-navy)}
.ot-check input:checked+.ot-check-box::after{opacity:1}
.ot-check input:focus-visible+.ot-check-box,.ot-switch input:focus-visible+.ot-switch-ui{outline:2px solid var(--ot-focus);outline-offset:2px}
.ot-switch-ui{flex:none;position:relative;width:40px;height:22px;border:1px solid var(--ot-ctl-line);border-radius:999px;background:var(--ot-n1);transition:background-color var(--ot-t)}
.ot-switch-ui::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ot-n6);transition:transform var(--ot-t) var(--ot-ease)}
.ot-switch input:checked+.ot-switch-ui{border-color:var(--ot-navy);background:var(--ot-lime)}
.ot-switch input:checked+.ot-switch-ui::after{transform:translateX(18px);background:var(--ot-navy)}

/* 7. Boutons : primaire pilule bleue (texte navy, AA), secondaire contour navy, discret */
.ot-btn{--bg:var(--ot-blue);--fg:var(--ot-navy);--bd:var(--bg);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ot-h-m);padding:8px 20px;border:1px solid var(--bd);border-radius:var(--ot-r-pill);background:var(--bg);color:var(--fg);font:600 16px/1.2 var(--ot-font-body);text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--ot-t),border-color var(--ot-t),color var(--ot-t)}
.ot-btn:hover{--bg:var(--ot-blue-400);text-decoration:none}
.ot-btn:active{transform:translateY(1px)}
.ot-btn--l{min-height:var(--ot-h-l);padding-inline:24px}
.ot-btn--s{position:relative;min-height:var(--ot-h-s);padding:6px 12px;font-size:14px}
.ot-btn--s::after{content:"";position:absolute;inset:-4px 0} /* zone tactile portée à 44 px */
.ot-btn--2{--bg:transparent;--fg:var(--ot-navy);--bd:var(--ot-navy);border-radius:var(--ot-r-ctl)}
.ot-btn--2:hover{--bg:var(--ot-n1)}
.ot-btn--3{--bg:transparent;--bd:transparent;--fg:var(--ot-link);padding-inline:8px;text-decoration:underline;text-underline-offset:.2em}
.ot-btn--3:hover{--bg:var(--ot-air);text-decoration:underline}
.ot-btn--lime{--bg:var(--ot-lime);--fg:var(--ot-navy)}
.ot-btn--lime:hover{--bg:var(--ot-lime-300)}
.ot-btn--navy{--bg:var(--ot-navy);--fg:#fff}
.ot-btn--navy:hover{--bg:var(--ot-navy-400)}
.ot-btn--block{width:100%}
.ot-btn:disabled,.ot-btn[aria-disabled=true]{--bg:var(--ot-n1);--fg:var(--ot-n5);--bd:var(--ot-line);cursor:not-allowed;transform:none}
.ot-btn.ot-loading{pointer-events:none}
.ot-btn.ot-loading::before{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ot-spin .7s linear infinite}
@keyframes ot-spin{to{transform:rotate(360deg)}}
.ot-btn .ot-ic{width:20px;height:20px}
.ot-btn-go{display:grid;place-items:center;width:32px;height:32px;margin:-4px -14px -4px 4px;border-radius:50%;background:#fff;color:var(--ot-navy)}
.ot-btn-go .ot-ic{width:18px;height:18px}
.ot-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ot-s2)}
@media (max-width:639px){.ot-actions>.ot-btn:not(.ot-btn--3){flex:1 1 100%}}

/* 8. Cartes et résultats */
.ot-card{padding:var(--ot-s3);border:1px solid var(--ot-line);border-radius:var(--ot-r-card);background:#fff;box-shadow:var(--ot-shadow)}
@media (min-width:640px){.ot-card{padding:var(--ot-s4)}}
@media (min-width:1024px){.ot-card{padding:var(--ot-s5)}}
.ot-tool,.ot-result,.ot-res,.ot-stack{display:grid;gap:var(--ot-s3)}
.ot-tool-head{display:grid;gap:var(--ot-s1);margin-bottom:var(--ot-s4)}
.ot-res-head{display:grid;gap:var(--ot-s1)}
.ot-big{color:var(--ot-ink);font:700 52px/.9 var(--ot-font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ot-big small{margin-left:.12em;font-size:.45em;letter-spacing:0}
@media (min-width:1024px){.ot-big{font-size:68px}}
.ot-range{color:var(--ot-n7);font-size:15px}
.ot-range b{color:var(--ot-ink);font-weight:600}
.ot-lines{display:grid;border-top:1px solid var(--ot-line)}
.ot-line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--ot-line)}
.ot-line-v{color:var(--ot-ink);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.ot-line-x{grid-column:2/-1;color:var(--ot-muted);font-size:14px}
.ot-line>:first-child:not(.ot-dot){grid-column:1/3} /* ligne sans pastille (total) */
.ot-line>:first-child:not(.ot-dot)~.ot-line-x{grid-column:1/-1}
.ot-line--total{border-top:2px solid var(--ot-navy);border-bottom:0;font-weight:600}
.ot-line--total .ot-line-v{font-size:1.15em}
.ot-dot{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;background:var(--c,var(--ot-n4))}
.ot-c-swim{--c:var(--ot-swim)}.ot-c-bike{--c:var(--ot-bike)}.ot-c-run{--c:var(--ot-run)}.ot-c-str{--c:var(--ot-strength)}.ot-c-tr{--c:var(--ot-n4)}
.ot-pastille{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c,var(--ot-n2));color:var(--ot-navy)}
.ot-pastille .ot-ic{width:18px;height:18px}
.ot-badge{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;padding:4px 10px;border-radius:999px;background:var(--ot-n1);color:var(--ot-n8);font-size:13px;font-weight:600;line-height:1.3}
.ot-badge .ot-ic{width:14px;height:14px}
.ot-badge--lime{background:var(--ot-lime);color:var(--ot-navy)}
.ot-badge--ok{background:var(--ot-ride-100);color:var(--ot-ride-800)}
.ot-badge--warn{background:var(--ot-run-100);color:var(--ot-run-800)}
.ot-badge--air{background:var(--ot-air);color:var(--ot-navy)}
/* Cartes de format (sélection d'objectif) */
.ot-fcards{display:grid;gap:var(--ot-s2);grid-template-columns:repeat(auto-fill,minmax(min(100%,156px),1fr))}
.ot-fcard{position:relative;display:grid;align-content:start;gap:6px;padding:var(--ot-s3);border:1px solid var(--ot-line);border-radius:12px;background:#fff}
.ot-fcard-f{font:700 20px/1 var(--ot-font-display);text-transform:uppercase}
.ot-fcard-v{font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.ot-fcard-r{color:var(--ot-muted);font-size:13px}
.ot-fcard .ot-badge--lime{position:absolute;top:-11px;right:12px}
.ot-fcard.ot-target{border-color:var(--ot-navy);box-shadow:inset 0 0 0 1px var(--ot-navy)}
.ot-fcard:not(.ot-target) .ot-badge--lime{display:none}
/* Tuiles (allures par discipline, chiffres clés) */
.ot-tiles{display:grid;gap:var(--ot-s2);grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.ot-tile{display:grid;align-content:start;gap:4px;padding:var(--ot-s3);border:1px solid var(--ot-line);border-top:4px solid var(--c,var(--ot-n2));border-radius:12px;background:#fff}
.ot-tile-l{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.ot-tile-v{font:700 34px/1 var(--ot-font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ot-tile-v small{margin-left:4px;color:var(--ot-muted);font:500 15px var(--ot-font-body);letter-spacing:0}
.ot-tile-x{color:var(--ot-muted);font-size:14px}
/* Étapes numérotées et chronologie */
.ot-steps{display:grid;counter-reset:ot-step}
.ot-steps>li{position:relative;padding:0 0 var(--ot-s4) 48px;counter-increment:ot-step}
.ot-steps>li::before{content:counter(ot-step);content:counter(ot-step)/"";position:absolute;top:-3px;left:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ot-navy);color:#fff;font:700 15px/1 var(--ot-font-body)}
.ot-steps>li::after{content:"";position:absolute;top:33px;bottom:4px;left:15px;width:2px;background:var(--ot-line)}
.ot-steps>li:last-child{padding-bottom:0}
.ot-steps>li:last-child::after{display:none}
.ot-steps strong,.ot-timeline strong{display:block;font-weight:600}
.ot-timeline{display:grid}
.ot-timeline>li{display:grid;grid-template-columns:minmax(64px,auto) 1fr;gap:14px}
.ot-tl-t{padding-top:1px;color:var(--ot-ink);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ot-tl-c{position:relative;padding:0 0 var(--ot-s3) 22px;border-left:2px solid var(--ot-line)}
.ot-tl-c::before{content:"";position:absolute;top:5px;left:-8px;width:14px;height:14px;border:3px solid #fff;border-radius:50%;background:var(--c,var(--ot-blue))}
.ot-timeline>li:last-child .ot-tl-c{border-left-color:transparent}
/* Zones d'intensité Z1 à Z7 (texte navy sur chaque teinte, AA) */
.ot-z{display:inline-grid;place-items:center;min-width:38px;padding:3px 8px;border-radius:999px;background:var(--zc,var(--ot-n2));color:var(--ot-navy);font:700 13px/1.25 var(--ot-font-body)}
.ot-z1{--zc:var(--ot-neutral-300)}.ot-z2{--zc:var(--ot-blue-300)}.ot-z3{--zc:var(--ot-ride-400)}.ot-z4{--zc:var(--ot-run-400)}.ot-z5{--zc:var(--ot-error-400)}.ot-z6{--zc:var(--ot-error-500)}.ot-z7{--zc:var(--ot-strength-400)}

/* 9. Tableaux : défilement horizontal sur mobile, 1re colonne et en-têtes collants */
.ot-table-wrap{position:relative;max-width:100%;overflow-x:auto;border:1px solid var(--ot-line);border-radius:12px;background:#fff;-webkit-overflow-scrolling:touch}
.ot-table-wrap--tall{max-height:min(70vh,560px);overflow-y:auto}
.ot-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;font-variant-numeric:tabular-nums}
.ot-table caption{padding:12px 14px 4px;font-weight:600;text-align:left}
.ot-table :is(th,td){padding:10px 14px;border-bottom:1px solid var(--ot-n1);text-align:left;vertical-align:top;white-space:nowrap}
.ot-table thead th{position:sticky;top:0;z-index:1;background:var(--ot-n1);color:var(--ot-n8);font-size:13px;font-weight:600;letter-spacing:.02em}
.ot-table tbody th{position:sticky;left:0;background:#fff;font-weight:500}
.ot-table thead th:first-child{left:0;z-index:2}
.ot-table tr:last-child>*{border-bottom:0}
.ot-table .ot-r{text-align:right}
.ot-table--wrap :is(th,td){min-width:9em;white-space:normal}
.ot-table--kv th{width:48%;color:var(--ot-n7);font-weight:400;white-space:normal}
.ot-table--kv td{color:var(--ot-ink);font-weight:600;white-space:normal}
.ot-table--kv td[colspan]{color:var(--ot-n8);font-weight:400} /* ligne de conseil sans valeur */
.ot-table tr.ot-ref>*{background:var(--ot-air)}
.ot-table tr.ot-ref>:first-child{box-shadow:inset 4px 0 0 var(--ot-blue)}

/* 10. Onglets ARIA (role=tablist/tab/tabpanel, activés par OT.tabs) */
.ot-tabs{display:grid;gap:var(--ot-s4)}
.ot-tablist{display:flex;gap:4px;padding:4px;overflow-x:auto;border:1px solid var(--ot-line);border-radius:12px;background:var(--ot-n1);scrollbar-width:none}
.ot-tab{flex:1 0 auto;min-height:44px;padding:8px 14px;border:0;border-radius:var(--ot-r-ctl);background:transparent;color:var(--ot-n7);font-size:15px;font-weight:600;white-space:nowrap}
.ot-tab:hover{background:rgba(255,255,255,.7);color:var(--ot-ink)}
.ot-tab[aria-selected=true]{background:#fff;color:var(--ot-ink);box-shadow:0 1px 3px rgba(5,14,58,.12),inset 0 -3px 0 var(--ot-blue)}
.ot-tabpanel:focus-visible{outline-offset:4px}

/* 11. FAQ (details/summary, alignée sur le FAQPage du JSON-LD) */
.ot-faq{display:grid;gap:var(--ot-s4)}
.ot-qa{border-bottom:1px solid var(--ot-line)}
.ot-qa:first-of-type{border-top:1px solid var(--ot-line)}
.ot-qa>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;color:var(--ot-ink);font-size:17px;font-weight:600;line-height:1.35;list-style:none;cursor:pointer}
.ot-qa>summary::-webkit-details-marker{display:none}
.ot-qa>summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(var(--ot-navy),var(--ot-navy)) center/12px 2px no-repeat,linear-gradient(var(--ot-navy),var(--ot-navy)) center/2px 12px no-repeat,var(--ot-n1)}
.ot-qa[open]>summary::after{background:linear-gradient(var(--ot-navy),var(--ot-navy)) center/12px 2px no-repeat,var(--ot-air)}
.ot-qa>summary:hover{color:var(--ot-blue-600)}
.ot-qa>summary:focus-visible{border-radius:4px;outline-offset:4px}
.ot-qa-a{padding:0 44px var(--ot-s4) 0;color:var(--ot-n8)}

/* 12. Encadrés : note (info), conseil, attention. Pictogramme + titre : jamais la couleur seule */
.ot-note,.ot-tip,.ot-warning{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:start;gap:0 12px;padding:14px 16px;border:1px solid var(--ot-blue-200);border-radius:12px;background:var(--ot-air);font-size:15px;line-height:1.5}
.ot-note>*,.ot-tip>*,.ot-warning>*{grid-column:2}
.ot-note>*+*,.ot-tip>*+*,.ot-warning>*+*{margin-top:4px}
.ot-note::before,.ot-tip::before,.ot-warning::before{content:"i";content:"i"/"";grid-row:1/span 9;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--ot-blue-600);color:#fff;font:700 13px/1 var(--ot-font-body)}
.ot-tip{border-color:var(--ot-ride-200);background:var(--ot-ride-50)}
.ot-tip::before{content:"";background:var(--ot-ride-700)}
.ot-tip::after{content:"";position:absolute;top:20px;left:24px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ot-warning{border-color:var(--ot-run-300);background:var(--ot-run-50)}
.ot-warning::before{content:"!";content:"!"/"";background:var(--ot-warn-ink)}
.ot-callout-t{font-weight:600}
.ot-note--s{padding:10px 12px;font-size:14px}
.ot-note--s::after{top:16px;left:20px}

/* 13. Progression et checklist mémorisée (logique : _build/demo/partials/checklist.js) */
.ot-progress{height:10px;overflow:hidden;border-radius:999px;background:var(--ot-n2)}
.ot-progress>span{display:block;width:var(--p,0%);height:100%;border-radius:inherit;background:var(--ot-blue);transition:width .3s var(--ot-ease)}
.ot-progress.ot-done>span{background:var(--ot-ride-500)}
.ot-progress-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-weight:600}
.ot-cl{display:grid;gap:var(--ot-s5)}
.ot-cl-zone{display:grid;gap:4px}
.ot-cl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:2px solid var(--ot-navy)}
.ot-cl-count{color:var(--ot-n7);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ot-cl-zone.ot-done .ot-cl-count{color:var(--ot-ok-ink)}
.ot-cl-zone.ot-done .ot-cl-count::before{content:"";display:inline-block;width:5px;height:10px;margin:0 8px 2px 0;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ot-cl-list>li{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;border-bottom:1px solid var(--ot-n1)}
.ot-cl-list .ot-check{flex:1 1 200px;padding:4px 0}
.ot-cl-list input:checked~.ot-check-txt{color:var(--ot-muted);text-decoration:line-through;text-decoration-color:var(--ot-n4)}
.ot-cl-why{min-height:44px;padding:0 8px;border:0;background:none;color:var(--ot-link);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.ot-cl-tip{flex-basis:100%;margin:0 0 12px 36px;color:var(--ot-n7);font-size:14px}
.ot-confirm{display:grid;gap:var(--ot-s2);padding:var(--ot-s3);border:1px solid var(--ot-run-300);border-radius:12px;background:var(--ot-run-50)}

/* 14. Blocs de conversion : Débloque, pont produit, autres outils, CTA final, hero du hub */
.ot-unlock{display:grid;gap:var(--ot-s3);padding:var(--ot-s4);border:1px solid var(--ot-blue-200);border-radius:var(--ot-r-card);background:var(--ot-air)}
.ot-unlock-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--ot-navy);color:var(--ot-lime)}
.ot-unlock-ic .ot-ic{width:24px;height:24px}
.ot-unlock-b{display:grid;gap:var(--ot-s3)}
@media (min-width:768px){.ot-unlock{grid-template-columns:auto 1fr;column-gap:var(--ot-s4);padding:var(--ot-s5)}}
.ot-benefits{display:grid;gap:10px}
.ot-benefits li{position:relative;padding-left:34px;line-height:1.45}
.ot-benefits li::before{content:"";position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;background:var(--ot-navy)}
.ot-benefits li::after{content:"";position:absolute;top:5px;left:8px;width:5px;height:10px;border:solid var(--ot-lime);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ot-bridge{display:grid;gap:var(--ot-s3);padding:var(--ot-s4);border:1px solid var(--ot-line);border-radius:var(--ot-r-card);background:#fff;box-shadow:var(--ot-shadow)}
@media (min-width:1024px){.ot-bridge{padding:var(--ot-s6)}}
.ot-proof{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--ot-n7);font-size:14px;font-weight:600}
.ot-proof li{display:inline-flex;align-items:center;gap:8px}
.ot-proof li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ot-lime);box-shadow:0 0 0 1.5px var(--ot-navy)}
.ot-others{display:grid;gap:var(--ot-s4)}
.ot-ogrid{display:grid;gap:var(--ot-s2);grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.ot-ocard{display:grid;grid-template-columns:auto 1fr;align-content:start;gap:4px 14px;height:100%;padding:var(--ot-s3);border:1px solid var(--ot-line);border-radius:var(--ot-r-card);background:#fff;color:var(--ot-ink);text-decoration:none;transition:border-color var(--ot-t),box-shadow var(--ot-t),transform var(--ot-t)}
.ot-ocard:hover{border-color:var(--ot-blue);box-shadow:var(--ot-shadow);transform:translateY(-2px)}
.ot-ocard-ic{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ot-air);color:var(--ot-navy)}
.ot-ocard-t{align-self:end;font:500 18px/1.2 var(--ot-font-display)}
.ot-ocard-p{color:var(--ot-muted);font-size:14px;line-height:1.45}
.ot-final,.ot-hero{position:relative;display:grid;justify-items:start;gap:var(--ot-s3);overflow:hidden;padding:var(--ot-s6) var(--ot-s4);border-radius:var(--ot-r-card);background:var(--ot-navy);color:#fff}
.ot-hero{background:linear-gradient(135deg,var(--ot-navy) 30%,var(--ot-blue-800))} /* seul dégradé autorisé : hero du hub */
@media (min-width:1024px){.ot-final,.ot-hero{padding:var(--ot-s8)}}
.ot-final h2::after{content:"";display:block;width:64px;height:6px;margin-top:16px;border-radius:3px;background:var(--ot-lime)}
:is(.ot-final,.ot-hero) :is(h1,h2){max-width:20ch;color:#fff}
:is(.ot-final,.ot-hero) p{max-width:58ch;color:var(--ot-navy-100)}
:is(.ot-final,.ot-hero) .ot-kicker{color:var(--ot-lime)}
:is(.ot-final,.ot-hero) :focus-visible{outline-color:var(--ot-lime)}
:is(.ot-final,.ot-hero) a:not(.ot-btn){color:#fff}
:is(.ot-final,.ot-hero) .ot-btn--2{--fg:#fff;--bd:#fff}
:is(.ot-final,.ot-hero) .ot-btn--2:hover{--bg:var(--ot-navy-400)}
:is(.ot-final,.ot-hero) .ot-proof{color:var(--ot-navy-100)}

/* 15. Retours : toast, état vide, squelette, partage */
.ot-toast{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:50%;z-index:90;width:max-content;max-width:calc(100% - 32px);padding:12px 18px;border-radius:12px;background:var(--ot-navy);color:#fff;font-size:15px;font-weight:500;box-shadow:0 8px 24px rgba(5,14,58,.25);opacity:0;visibility:hidden;transform:translate(-50%,16px);transition:opacity var(--ot-t),transform var(--ot-t),visibility var(--ot-t)}
.ot-toast.ot-show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ot-toast:empty{display:none}
.ot-empty{display:grid;justify-items:center;gap:8px;padding:var(--ot-s5) var(--ot-s3);border:1.5px dashed var(--ot-n3);border-radius:var(--ot-r-card);color:var(--ot-muted);font-size:15px;text-align:center}
.ot-empty .ot-ic{width:28px;height:28px;color:var(--ot-n5)}
.ot-skel{display:grid;gap:10px}
.ot-skel>span{height:14px;border-radius:7px;background:var(--ot-n2);animation:ot-pulse 1.1s ease-in-out infinite alternate}
.ot-skel>span:nth-child(3n+2){width:80%}
.ot-skel>span:nth-child(3n){width:60%}
@keyframes ot-pulse{from{opacity:.45}to{opacity:1}}
.ot-share{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ot-s2)}
.ot-share-prev{width:96px;border-radius:8px;box-shadow:var(--ot-shadow)}

/* 16. Modale de capture (injectée par outils.js) */
.ot-lock{overflow:hidden}
.ot-modal{position:fixed;inset:0;z-index:80;display:flex;padding:16px;overflow-y:auto;overscroll-behavior:contain}
.ot-modal-ov{position:fixed;inset:0;background:rgba(5,14,58,.62)}
.ot-modal-box{position:relative;width:min(100%,440px);margin:auto;padding:var(--ot-s5) var(--ot-s4) var(--ot-s4);border-radius:var(--ot-r-card);background:#fff;box-shadow:0 24px 64px rgba(5,14,58,.3);animation:ot-pop .25s var(--ot-ease)}
.ot-modal.ot-ok .ot-modal-box{width:min(100%,600px)}
@keyframes ot-pop{from{opacity:0;transform:translateY(12px) scale(.98)}}
.ot-modal-x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ot-navy)}
.ot-modal-x:hover{background:var(--ot-n1)}
.ot-modal-x .ot-ic{width:22px;height:22px}
.ot-m-step{display:grid;gap:var(--ot-s3)}
.ot-modal-t{padding-right:32px;font:700 24px/1 var(--ot-font-display);letter-spacing:-.02em;text-transform:uppercase}
.ot-modal-t:focus{outline:none}
.ot-modal .ot-form{gap:var(--ot-s3);margin-top:var(--ot-s1)}
.ot-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ot-consent{color:var(--ot-muted);font-size:13px;line-height:1.45}
.ot-sheet{display:grid;gap:var(--ot-s4)}
.ot-sheet-s{display:grid;gap:var(--ot-s2)}
.ot-sheet h3{font-size:18px}
.ot-m-acts{padding-top:var(--ot-s1)}

/* 17. Utilitaires et icônes (SVG inline, trait 1,75 px) */
.ot-ic{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
[data-ot-icon]{display:inline-flex;flex:none}
.ot-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.ot-stack--s{gap:var(--ot-s1)}
.ot-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ot-s1)}
.ot-center{text-align:center}
.ot-sep{height:1px;margin:0;border:0;background:var(--ot-line)}
.ot-print-root{display:none}

/* 18. Mouvement réduit */
@media (prefers-reduced-motion:reduce){
  :root{--ot-t:0s}
  .ot-modal-box,.ot-skel>span{animation:none}
  .ot-btn.ot-loading::before{animation-duration:2s}
  .ot-ocard:hover,.ot-btn:active{transform:none}
  .ot-progress>span{transition:none}
}

/* 19. Impression : OT.print() n'imprime que .ot-print-root, en noir sur blanc.
   Sans OT.print(), la page s'imprime allégée. */
@media print{
  @page{margin:14mm}
  html,body{height:auto !important;overflow:visible !important;background:#fff !important;color:#000 !important;font-size:11pt}
  .ot-header,.ot-footer,.ot-skip,.ot-modal,.ot-toast,.ot-unlock,.ot-bridge,.ot-others,.ot-final,.ot-share,.ot-actions,.ot-form,.ot-tablist,.ot-cl-why{display:none !important}
  html.ot-printing body>:not(.ot-print-root){display:none !important}
  html.ot-printing .ot-print-root{display:block !important}
  .ot-main{display:block !important;padding:0 !important}
  .ot-main>*{width:auto !important;margin:0 0 12pt !important}
  .ot-print-root *,.ot-main *{color:#000 !important;background:transparent !important;box-shadow:none !important;text-shadow:none !important}
  .ot-pr-head{display:flex;align-items:center;justify-content:space-between;gap:12pt;margin-bottom:12pt;padding-bottom:8pt;border-bottom:1.5pt solid #000;font-size:9pt}
  .ot-pr-head img{width:auto;height:20pt}
  .ot-pr-t{margin:0 0 10pt;font-size:18pt}
  .ot-pr-foot{margin-top:14pt;padding-top:6pt;border-top:1pt solid #000;font-size:9pt}
  .ot-card,.ot-tile,.ot-fcard,.ot-table-wrap{border:1pt solid #000 !important;break-inside:avoid}
  .ot-table-wrap{overflow:visible !important;max-height:none !important}
  .ot-table :is(th,td){position:static !important;padding:4pt 6pt !important;border-bottom:.5pt solid #000 !important;white-space:normal !important}
  .ot-table thead{display:table-header-group}
  .ot-table tr,.ot-cl-list>li{break-inside:avoid}
  :is(h1,h2,h3){break-after:avoid}
  .ot-big{font-size:30pt !important}
  .ot-dot,.ot-z,.ot-pastille{border:1pt solid #000}
  .ot-check-box{border:1pt solid #000 !important}
  .ot-check-box::after{border-color:#000 !important}
  .ot-cl-list input:checked~.ot-check-txt{color:#000 !important;text-decoration:line-through !important;text-decoration-color:#000 !important}
  a{text-decoration:none !important}
}