/*
Theme Name: Teknoboutik Native — Prototype
Description: Fondation indépendante de Divi. Préparation locale uniquement : NE PAS ACTIVER EN PRODUCTION.
Author: Teknoboutik
Version: 0.1.0-dev
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: teknoboutik-native
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* The Design System remains the token source. Fallbacks permit isolated tests. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--tkb-surface, #fff); color: var(--tkb-text, #333); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
/* Shared site-compat.css retains Divi's black mobile body. Native editorial
   templates have no Divi white section wrapper: keep their canvas readable. */
body.tkbnative-site { background-color: var(--tkb-surface, #fff) !important; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: var(--tkb-accent-text, #7a4300); text-underline-offset: .15em; }
a:hover { color: var(--tkb-accent-text-hover, #5f3400); }
:focus-visible { outline: 3px solid var(--tkb-accent-text, #7a4300); outline-offset: 3px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: fixed; z-index: 100000; top: 1rem; left: 1rem; width: auto; height: auto; padding: .75rem 1rem; margin: 0; clip-path: none; white-space: normal; background: var(--tkb-surface, #fff); color: var(--tkb-ink, #111); }
.tkbnative-container { width: var(--tkb-site-content-width, calc(100% - 2rem)); max-width: var(--tkb-site-content-max, 1440px); margin-inline: auto; }
.tkbnative-main { min-width: 0; padding-block: var(--tkb-page-top-gap-desktop, 30px) 3rem; }
.tkbnative-fallback-header, .tkbnative-fallback-footer { padding-block: 1.25rem; background: var(--tkb-black, #080808); color: var(--tkb-surface, #fff); }
.tkbnative-fallback-header a, .tkbnative-fallback-footer a { color: inherit; }
.tkbnative-fallback-header a:hover, .tkbnative-fallback-footer a:hover { color: var(--tkb-orange, #ff9900); }
.tkbnative-fallback-header :focus-visible, .tkbnative-fallback-footer :focus-visible { outline-color: var(--tkb-orange, #ff9900); }
.tkbnative-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.tkbnative-brand .custom-logo { display: block; width: auto; max-width: min(250px, 75vw); max-height: 80px; }
.tkbnative-site-title { font-size: 1.5rem; font-weight: 750; }
.tkbnative-menu, .tkbnative-menu .sub-menu { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; }
.tkbnative-menu .sub-menu { padding-inline-start: 1rem; }
.tkbnative-menu a { display: inline-block; padding-block: .5rem; }
.tkbnative-entry { min-width: 0; margin-block-end: 2.5rem; overflow-wrap: anywhere; }
.tkbnative-entry-title { color: var(--tkb-ink, #111); line-height: 1.2; font-size: clamp(1.65rem, 3vw, 2.5rem); }
.tkbnative-entry-meta { color: var(--tkb-muted, #686868); font-size: .9rem; }
.tkbnative-entry-content > :first-child { margin-block-start: 0; }
.tkbnative-entry-content::after { display: block; clear: both; content: ""; }
.tkbnative-entry-content iframe { max-width: 100%; }
.tkbnative-entry-content pre { max-width: 100%; overflow: auto; }
.tkbnative-entry-content table { max-width: 100%; }
.tkbnative-thumbnail { margin-block: 1rem; }
.tkbnative-thumbnail img { display: block; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption { font-size: .9rem; }
.tkbnative-comments { margin-block: 2rem; }
.tkbnative-comments .comment-list { padding-inline-start: 1.5rem; }
.tkbnative-comments .comment-body { margin-block: 1rem; }
.tkbnative-comments .comment-form textarea { width: 100%; }
.tkbnative-comments .comment-form input:not([type="checkbox"]):not([type="submit"]) { max-width: 100%; }
.tkbnative-comments .bypostauthor > .comment-body { border-inline-start: 2px solid var(--tkb-orange, #ff9900); padding-inline-start: 1rem; }
.tkbnative-pagination { margin-block: 1.5rem; }
.tkbnative-archive-details { clear: both; margin-block: 2rem; padding-top: 1.5rem; border-top: 1px solid #e8e8e8; }
.tkbnative-archive-details > :first-child { margin-top: 0; }
.tkbnative-blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; margin-block: 2rem; }
.tkbnative-blog-card { min-width: 0; }
.tkbnative-blog-card > a { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.tkbnative-blog-card > a img { width: 100%; height: 100%; object-fit: cover; }
.tkbnative-blog-card h3 { margin-bottom: .5rem; font-size: 1.25rem; line-height: 1.3; }
.tkbnative-blog-card time { color: var(--tkb-muted,#686868); font-size: .9rem; }
.tkbnative-external-media { margin-block: 1.5rem; padding: 1rem 1.25rem; border-inline-start: 3px solid var(--tkb-orange,#f90); background: #f5f5f5; }
.tkbnative-table-scroll { overflow-x: auto; margin-block: 1.5rem; }
.tkbnative-table-scroll table { border-collapse: collapse; width: 100%; min-width: 560px; }
.tkbnative-table-scroll th, .tkbnative-table-scroll td { text-align: start; padding: .75rem; border: 1px solid #d8d8d8; }
.tkbnative-table-scroll th { background: #f5f5f5; }
.tkbnative-contact { max-width: 720px; }
.tkbnative-contact fieldset { border: 1px solid #d8d8d8; border-radius: 12px; padding: 1.5rem; }
.tkbnative-contact label { display: block; margin-bottom: .4rem; }
.tkbnative-contact input, .tkbnative-contact textarea { width: 100%; padding: .6rem; border: 1px solid #bbb; border-radius: 6px; }
.tkbnative-contact button { min-height: 44px; }
@media (max-width: 980px) { .tkbnative-blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 767px) {
    .tkbnative-blog-grid { grid-template-columns: minmax(0,1fr); }
    .tkbnative-main { padding-block-start: var(--tkb-page-top-gap-mobile, 14px); }
    .alignleft, .alignright { float: none; margin-inline: 0; }
}