/* Travel2World — /outils : la page des outils (module hub, version du 16 octobre 2026 au soir).
   Un petit titre, une phrase, 4 grandes cartes (icône, titre, une phrase, un bouton), une ligne vers les guides.
   Fond blanc, filets gris clair, Playfair Display (titres) + Inter (texte) : mêmes jetons que theme-pro.css.
   Aucune animation ; au survol, la bordure et l'ombre de la carte se renforcent, c'est tout.
   Préfixe « html #app » : cette feuille peut arriver avant ou après theme-pro.css. */

/* ------------------------------------------------------------ en-tête */
html #app .ot-hub{padding-bottom:clamp(36px,5vw,64px)}
html #app .ot-hub .ot-hub-tete{margin-bottom:clamp(20px,2.6vw,30px)}
html #app .ot-hub .ot-hub-tete h1{font-family:var(--f-display);font-weight:600;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.1;letter-spacing:-.015em;max-width:none}
html #app .ot-hub .ot-hub-tete .ot-question{margin:0;max-width:56ch;font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.5;color:var(--muted)}

/* ------------------------------------------------------------ les 4 cartes */
html #app .ot-h4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
html #app .ot-h4>li{margin:0;padding:0;min-width:0}
html #app .ot-h4 .ot-h4-carte{display:flex;flex-direction:column;align-items:flex-start;height:100%;box-sizing:border-box;padding:24px 22px 22px;
  background:var(--surface);color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:var(--tp-r,12px);box-shadow:var(--tp-sh,0 1px 2px rgba(15,27,42,.06));
  transition:border-color .15s ease,box-shadow .15s ease}
html #app .ot-h4 .ot-h4-carte:hover{border-color:var(--line-strong);box-shadow:var(--tp-sh-hover,0 8px 24px rgba(15,27,42,.08))}
html #app .ot-h4 .ot-h4-carte:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
html #app .ot-h4 .ot-h4-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--tp-tint,#fdf1ec);color:var(--orange-ink)}
html #app .ot-h4 .ot-h4-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html #app .ot-h4 .ot-h4-nom{margin:18px 0 8px;padding:0;font-family:var(--f-display);font-weight:600;font-size:1.4rem;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
html #app .ot-h4 .ot-h4-q{flex:1 1 auto;margin:0 0 22px;font-size:.98rem;line-height:1.5;color:var(--muted)}
html #app .ot-h4 .ot-h4-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;padding:10px 18px;border-radius:var(--tp-r-btn,10px);
  background:var(--orange);color:#fff;font:600 .95rem/1.2 var(--f-body);white-space:nowrap;transition:background-color .15s ease}
html #app .ot-h4 .ot-h4-carte:hover .ot-h4-btn{background:#b3431d}
html[data-theme=dark] #app .ot-h4 .ot-h4-btn{background:#c94d23}
html[data-theme=dark] #app .ot-h4 .ot-h4-ico{background:rgba(240,138,93,.14)}

/* ------------------------------------------------------------ la ligne vers les guides */
html #app .ot-hub .ot-h4-guides{margin:clamp(24px,3vw,34px) 0 0;font-size:.95rem;line-height:1.5;color:var(--muted)}
html #app .ot-hub .ot-h4-guides a{color:var(--orange-ink);font-weight:600;text-decoration:none;white-space:nowrap}
html #app .ot-hub .ot-h4-guides a:hover{text-decoration:underline}

/* ------------------------------------------------------------ tablette et téléphone */
@media (max-width:1060px){html #app .ot-h4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  /* outils.css cache la phrase d'en-tête des outils sur téléphone : ici elle reste (c'est la seule explication) */
  html #app .ot-hub .ot-hub-tete .ot-question{display:block;font-size:.98rem}
  html #app .ot-h4{grid-template-columns:minmax(0,1fr);gap:12px}
  html #app .ot-h4 .ot-h4-carte{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"ico nom" "q q" "btn btn";align-items:center;column-gap:14px;padding:16px}
  html #app .ot-h4 .ot-h4-ico{grid-area:ico;width:44px;height:44px;border-radius:10px}
  html #app .ot-h4 .ot-h4-ico svg{width:24px;height:24px}
  html #app .ot-h4 .ot-h4-nom{grid-area:nom;margin:0;font-size:1.2rem}
  html #app .ot-h4 .ot-h4-q{grid-area:q;margin:10px 0 14px;font-size:.95rem}
  html #app .ot-h4 .ot-h4-btn{grid-area:btn;justify-self:start;min-height:42px;padding:9px 16px}
  html #app .ot-hub .ot-h4-guides a{white-space:normal}
}
@media (prefers-reduced-motion:reduce){html #app .ot-h4 .ot-h4-carte,html #app .ot-h4 .ot-h4-btn{transition:none}}