/* ==========================================================================
   Tomek Training — Pont Elementor (ERA STUDIO)
   Applique les composants .tk-* (components.css) au balisage généré par Elementor.
   Usage : ajouter la classe dans Avancé → Classes CSS du widget ou du conteneur.
   Règle : aucune couleur ni taille en dur ici, uniquement des variables --tk-*.
   ========================================================================== */

/* ---------- 1. Base du site ---------- */
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:hidden}
@supports (overflow:clip){html{overflow-x:clip}}
@media (max-width:767px){html{scroll-padding-top:80px}}
body{background:var(--tk-bg);color:var(--tk-text);font-family:var(--tk-font-body);font-size:var(--tk-fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--tk-cta);text-underline-offset:4px}
a:hover,a:active{color:var(--tk-cta-hover)}
body :focus-visible{outline:3px solid var(--tk-focus);outline-offset:3px}
.tk-on-dark :focus-visible{outline-color:var(--tk-creme-100)}
img{max-width:100%;height:auto}
::selection{background:var(--tk-teal-100);color:var(--tk-petrol-800)}

/* Sans JavaScript ou dans l'éditeur : tout reste visible */
html:not(.tk-js) .tk-reveal,
.elementor-editor-active .tk-reveal{opacity:1!important;transform:none!important}

/* ---------- 2. Conteneurs Elementor (.e-con) ---------- */
/* Elementor pilote ses conteneurs par variables : on les règle plutôt que de forcer padding/gap. */
.e-con.tk-section{--padding-top:var(--tk-section-y);--padding-bottom:var(--tk-section-y);--padding-left:var(--tk-gutter);--padding-right:var(--tk-gutter);--content-width:var(--tk-container)}
.e-con.tk-container{--content-width:var(--tk-container);--padding-left:var(--tk-gutter);--padding-right:var(--tk-gutter)}
.e-con.tk-on-dark{--background-color:var(--tk-surface-inverse)}
.e-con.tk-alt{--background-color:var(--tk-surface-alt)}
.e-con.tk-course{--padding-top:12px;--padding-right:12px;--padding-bottom:20px;--padding-left:12px;--gap:16px;--row-gap:16px;--flex-direction:column}
.e-con.tk-course__body{--padding-top:0;--padding-bottom:0;--padding-left:10px;--padding-right:10px;--gap:10px;--row-gap:10px;--flex-direction:column}
.e-con.tk-review{--padding-top:28px;--padding-right:28px;--padding-bottom:28px;--padding-left:28px;--gap:16px;--row-gap:16px;--flex-direction:column}
.e-con.tk-event{--padding-top:0;--padding-right:0;--padding-bottom:0;--padding-left:0;--gap:0;--row-gap:0;--flex-direction:column}
.e-con.tk-event__body{--padding-top:20px;--padding-right:20px;--padding-bottom:20px;--padding-left:20px;--gap:10px;--row-gap:10px;--flex-direction:column}
.e-con.tk-proof__item{--padding-top:18px;--padding-right:22px;--padding-bottom:18px;--padding-left:22px;--gap:14px;--column-gap:14px;--flex-direction:row;--align-items:center}
.e-con:is(.tk-story,.tk-ridge,.tk-arch,.tk-event__media){--padding-top:0;--padding-right:0;--padding-bottom:0;--padding-left:0;--min-height:0}
.e-con.tk-arch-frame{--padding-top:8px;--padding-right:8px;--padding-bottom:8px;--padding-left:8px}
.e-con.tk-form{--padding-top:clamp(22px,3vw,36px);--padding-right:clamp(22px,3vw,36px);--padding-bottom:clamp(22px,3vw,36px);--padding-left:clamp(22px,3vw,36px);--gap:26px;--row-gap:26px;--flex-direction:column}
.e-con.tk-ridge{--width:100%;max-width:none}

/* Grilles : la classe porte la mise en page, le conteneur interne s'efface */
.e-con:is(.tk-rail,.tk-proof,.tk-stories){--display:grid;display:grid}
.e-con:is(.tk-rail,.tk-proof,.tk-stories)>.e-con-inner{display:contents}
.e-con.tk-rail{--gap:20px;--row-gap:20px;--column-gap:20px}
.e-con.tk-proof{--gap:12px;--row-gap:12px;--column-gap:12px}
@media (max-width:767px){
  .e-con.tk-rail{--gap:14px;--row-gap:14px;--column-gap:14px}
  .e-con.tk-proof{--gap:0;--row-gap:0;--column-gap:0}
  .e-con.tk-proof__item{--flex-direction:column;--gap:5px;--row-gap:5px;--padding-top:0;--padding-bottom:0;--padding-left:6px;--padding-right:6px}
}

/* ---------- 3. Titres et textes (widgets Titre / Éditeur de texte) ---------- */
/* La classe est posée sur le widget : le titre ou le paragraphe interne hérite du style. */
:is(.tk-h1,.tk-h2,.tk-h3,.tk-lead,.tk-overline,.tk-course__title,.tk-story__title,.tk-story__text) :is(.elementor-heading-title,p){font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-wrap:inherit;margin:0}
.elementor-widget-heading[class*="tk-"] .elementor-heading-title{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-wrap:inherit;margin:0}
.elementor-widget.tk-overline>.elementor-widget-container{display:contents}
.elementor-widget-text-editor:is(.tk-lead) p+p{margin-top:.8em}
h1,h2,h3,h4{font-family:var(--tk-font-display);color:var(--tk-text-strong)}
.elementor-widget-text-editor p:last-child{margin-bottom:0}

/* ---------- 4. Boutons (widget Bouton) ---------- */
/* On neutralise l'enveloppe du widget, puis on applique le style au lien .elementor-button */
body .elementor-widget:is(.tk-btn,.tk-btn--secondary,.tk-btn--ghost),
body .elementor-widget:is(.tk-btn,.tk-btn--secondary,.tk-btn--ghost):hover{display:block;min-height:0;padding:0;background:none;box-shadow:none;border-radius:0;transform:none;color:inherit;gap:0}
.tk-btn .elementor-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;border:0;border-radius:var(--tk-radius-pill);background:var(--tk-cta);color:var(--tk-cta-text);fill:currentColor;font:700 var(--tk-fs-button)/1 var(--tk-font-body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background var(--tk-dur-fast),transform var(--tk-dur-fast),box-shadow var(--tk-dur-fast)}
.tk-btn .elementor-button:is(:hover,:focus-visible){background:var(--tk-cta-hover);color:var(--tk-cta-text);transform:translateY(-1px);box-shadow:var(--tk-shadow-cta)}
.tk-btn .elementor-button:active{transform:none;box-shadow:none}
.tk-btn .elementor-button-content-wrapper{gap:12px;align-items:center}
.tk-btn--lg .elementor-button{min-height:58px;padding:0 30px}
.tk-btn--sm .elementor-button{min-height:44px;padding:0 20px;font-size:13px}
.tk-btn--block .elementor-button{width:100%}
@media (max-width:480px){.tk-btn--block-mobile .elementor-button{width:100%}}
.tk-btn--secondary .elementor-button{background:var(--tk-petrol-700);color:var(--tk-creme-100)}
.tk-btn--secondary .elementor-button:is(:hover,:focus-visible){background:var(--tk-petrol-800);color:var(--tk-creme-100);box-shadow:none}
.tk-btn--ghost .elementor-button{background:transparent;color:var(--tk-petrol-700);box-shadow:inset 0 0 0 2px var(--tk-petrol-700)}
.tk-btn--ghost .elementor-button:is(:hover,:focus-visible){background:var(--tk-petrol-50);color:var(--tk-petrol-700);box-shadow:inset 0 0 0 2px var(--tk-petrol-700);transform:none}
.tk-on-dark .tk-btn--ghost .elementor-button{color:var(--tk-creme-100);box-shadow:inset 0 0 0 2px var(--tk-creme-100)}
.tk-on-dark .tk-btn--ghost .elementor-button:is(:hover,:focus-visible){background:rgba(254,249,243,.12);color:var(--tk-creme-100)}
.tk-on-dark .tk-btn .elementor-button:focus-visible{outline-color:var(--tk-creme-100)}

/* ---------- 5. Liste kettlebell (widget Éditeur de texte ou HTML) ---------- */
.tk-list :is(ul,ol){margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.tk-list li{display:flex;gap:12px;align-items:flex-start;font:500 16px/1.4 var(--tk-font-body);color:var(--tk-text-strong)}
.tk-list li::before{content:"";width:16px;height:20px;flex:none;margin-top:1px;background:var(--tk-accent);-webkit-mask:url(../brand/kettlebell.svg) center/contain no-repeat;mask:url(../brand/kettlebell.svg) center/contain no-repeat}
.tk-on-dark .tk-list li{color:var(--tk-creme-100)}
.tk-on-dark .tk-list li::before{background:var(--tk-teal-300)}

/* ---------- 6. Arche (widget Image) ---------- */
.elementor-widget-image.tk-arch>.elementor-widget-container,
.elementor-widget-image.tk-arch a{display:block;height:100%}
.tk-arch--1x1{aspect-ratio:1/1;border-radius:var(--tk-radius-arch-1x1)}
.tk-arch-frame .tk-arch{border-radius:50% 50% 16px 16px / 40% 40% 16px 16px}

/* ---------- 7. FAQ (widget Accordéon imbriqué = <details>/<summary>) ---------- */
.tk-faq .e-n-accordion{display:flex;flex-direction:column;gap:12px}
.tk-faq .e-n-accordion-item-title{border:0;background:transparent}
.tk-faq .e-n-accordion-item-title-icon{display:none}
.tk-faq .e-n-accordion-item-title-header,.tk-faq .e-n-accordion-item-title-text{font:inherit;color:inherit}
.tk-faq details>[role=region]{--padding-top:0;--padding-bottom:22px;--padding-left:22px;--padding-right:22px;border:0}

/* ---------- 8. Header, CTA sticky, barre d'admin ---------- */
.admin-bar .tk-header{top:32px}
@media (max-width:782px){.admin-bar .tk-header{top:46px}}
.elementor-editor-active .tk-sticky-cta{display:none}
@media (max-width:767px){.has-tk-sticky .tk-footer{padding-bottom:96px}}

/* ---------- 9. Ajouts au kit (non prévus dans components.css) ---------- */
.tk-text-muted{color:var(--tk-text-muted)}
.tk-nowrap{white-space:nowrap}
.tk-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}