/* ══════════════════════════════════════════════════════════════════
   TAKAIDANCE — CSS THÈME PARENT
   Variables neutres + structure complète. Les child themes surchargent
   les variables :root et les sections dont ils ont besoin.

   TABLE DES MATIÈRES
   01. VARIABLES (valeurs par défaut neutres)
   02. RESET
   03. ACCESSIBILITÉ (skip-link, screen-reader-text, focus)
   04. LAYOUT (.container, .section)
   05. TYPOGRAPHIE (titres, paragraphes, listes, tableaux)
   06. CONTENU ENRICHI (blockquote, pre, code, figures)
   07. FORMULAIRES (inputs, textarea, select, radio, checkbox)
   08. BOUTONS
   09. HEADER & BRANDING
   10. NAVIGATION PRINCIPALE (menus, sous-menus, chevron)
   11. HAMBURGER & MENU MOBILE
   12. FOOTER
   13. PAGE BANNER (en-tête visuel des pages internes)
   14. PAGE HEADER (titre + description des archives)
   15. POSTS LIST (cartes articles — index, archive, category…)
   15. ARTICLE SINGLE (.entry-content, tags, navigation prev/next)
   16. PAGE STATIQUE (.page-content, .page-body)
   17. SIDEBAR & WIDGETS
   18. PAGINATION
   19. COMMENTAIRES
   20. BREADCRUMB
   21. PAGE D'ACCUEIL (hero, cards styles)
   22. PAGE CONTACT (deux colonnes)
   23. PAGES LÉGALES
   24. PAGE 404
   25. AUTEUR (archive auteur)
   26. RECHERCHE
   27. UTILITAIRES (.section-heading, .back-link, placeholders…)
   28. RESPONSIVE / MOBILE (breakpoints 1024px, 768px, 480px)
   29. IMPRESSION
══════════════════════════════════════════════════════════════════ */


/* ── 01. VARIABLES ──────────────────────────────────────────────
   Valeurs neutres/grises — à surcharger dans le child theme.
   Toutes les couleurs, fontes et espacements passent par ces vars.
─────────────────────────────────────────────────────────────── */
:root {
    /* Couleurs */
    --color-bg:         #ffffff;
    --color-bg-dark:    #1a1a1a;
    --color-bg-card:    #f5f5f5;
    --color-text:       #1a1a1a;
    --color-text-muted: #666666;
    --color-primary:    #333333;
    --color-accent:     #555555;
    --color-border:              #e0e0e0;
    --color-tag:                 var(--color-accent);
    --color-btn-primary-text:    #ffffff;
    --color-btn-outline-border:  var(--color-border);

    /* Typographie */
    --font-main:   system-ui, -apple-system, sans-serif;
    --font-mono:   ui-monospace, 'Courier New', monospace;

    /* Espacements & formes */
    --radius:          4px;
    --container-width: 1200px;
    --header-height:   64px;
}


/* ── 02. RESET ──────────────────────────────────────────────────
─────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background:  var(--color-bg);
    color:       var(--color-text);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main { flex: 1; }

img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; }
p a, li a, blockquote a, td a  { color: var(--color-accent); text-decoration: underline; }
p a:hover, li a:hover, blockquote a:hover, td a:hover { color: var(--color-tag); text-decoration: none; }
ul   { list-style: none; }
button { font-family: inherit; }


/* ── 03. ACCESSIBILITÉ ──────────────────────────────────────────
   Skip-link, textes pour lecteurs d'écran, focus visible.
─────────────────────────────────────────────────────────────── */

/* Lien "Aller au contenu" — visible uniquement au focus clavier */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--color-primary);
    color: var(--color-bg);
    padding: 8px 16px;
    z-index: 9999;
    transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* Masqué visuellement mais lu par les lecteurs d'écran */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Focus visible pour la navigation clavier */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}


/* ── 04. LAYOUT ─────────────────────────────────────────────────
─────────────────────────────────────────────────────────────── */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

.section { padding: 40px 0; }
.section-cta {
    padding: 40px 0;
    background: var(--color-primary-dark);
    border-top: 2px solid var(--color-primary);
    text-align: center;
}
.section-cta h2 { color: var(--color-text); margin-bottom: 24px; }
.section-cta p  { color: var(--color-text-muted); margin-bottom: 40px; font-size: 0.9375rem; }
.template-hero + .section { padding-top: 40px; }



/* ── 05. TYPOGRAPHIE ────────────────────────────────────────────
   Titres, paragraphes, listes typographiques (avec puces/numéros)
   dans le contenu éditorial (.entry-content, .page-body, etc.)
─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.2;
}

h1 { font-size: clamp(1.75rem, 5vw, 3rem); }
h2 { font-size: clamp(1.375rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

.section-tag {
    display: inline-block;
    font-size: 0.8125rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-tag, var(--color-accent));
    margin-bottom: 8px;
    font-weight: 500;
}

/* Listes et tableaux dans le contenu éditorial uniquement */
.entry-content ul,
.entry-content ol,
.page-body ul,
.page-body ol,
.legal-content ul,
.legal-content ol {
    padding-left: 24px;
    margin-bottom: 16px;
}

.entry-content ul,
.page-body ul,
.legal-content ul { list-style: disc; }

.entry-content ol,
.page-body ol,
.legal-content ol { list-style: decimal; }

.entry-content li,
.page-body li,
.legal-content li { margin-bottom: 6px; }

/* Tableaux */
.entry-content table,
.page-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 0.875rem;
}

.entry-content th,
.entry-content td,
.page-body th,
.page-body td {
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    text-align: left;
}

.entry-content th,
.page-body th {
    background: var(--color-bg-card);
    font-weight: 600;
}


/* ── 06. CONTENU ENRICHI ────────────────────────────────────────
   Éléments typographiques spéciaux dans le contenu éditorial.
─────────────────────────────────────────────────────────────── */
blockquote {
    border-left: 4px solid var(--color-primary);
    padding: 12px 20px;
    margin: 24px 0;
    color: var(--color-text-muted);
    font-style: italic;
}

pre {
    background: var(--color-bg-dark);
    color: #f8f8f8;
    padding: 16px;
    border-radius: var(--radius);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    margin-bottom: 24px;
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-bg-card);
    padding: 2px 6px;
    border-radius: 3px;
}

pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

figure { margin: 24px 0; }
figcaption {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 8px;
}


/* ── 07. FORMULAIRES ────────────────────────────────────────────
   Styles de base pour tous les champs de saisie.
   CF7, commentaires, recherche utilisent ces règles.
─────────────────────────────────────────────────────────────── */
label {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 6px;
    color: var(--color-text);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 0.875rem;
    transition: border-color 0.2s;
    margin-bottom: 16px;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    outline: none;
}

textarea { resize: vertical; min-height: 120px; }

/* Checkbox et radio */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    margin-right: 8px;
    margin-bottom: 0;
    vertical-align: middle;
}

/* Champ de recherche WP */
.search-form {
    display: flex;
    gap: 8px;
}

.search-form input[type="search"] { margin-bottom: 0; }


/* ── 08. BOUTONS ────────────────────────────────────────────────
─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: var(--radius);
    cursor: pointer;
    transition: opacity 0.2s;
    border: none;
    font-family: var(--font-main);
}

.btn:hover { opacity: 0.85; }

.btn-primary {
    background: var(--color-primary);
    color: var(--color-btn-primary-text);
}

.btn-outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-btn-outline-border);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}


/* ── 09. HEADER & BRANDING ──────────────────────────────────────
─────────────────────────────────────────────────────────────── */
.site-header {
    background: var(--color-bg-dark);
    border-bottom: 2px solid var(--color-primary);
    padding: 0;
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

/* Logo texte (fallback si pas de logo image) */
.site-logo {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-text);
    white-space: nowrap;
}

.site-logo span { color: var(--color-accent); }

/* Logo image via Customizer WP */
.site-branding .custom-logo-link { display: block; line-height: 0; }
.custom-logo { max-height: 48px; width: auto; }


/* ── 10. NAVIGATION PRINCIPALE ──────────────────────────────────
   Menu desktop + sous-menus volants.
   WP génère automatiquement .menu-item-has-children sur les items
   qui ont des enfants — on s'appuie dessus pour les dropdowns.
─────────────────────────────────────────────────────────────── */
.site-nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
}

.site-nav > ul { gap: 4px; }

.site-nav a {
    display: block;
    padding: 8px 12px;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}

.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a { color: var(--color-accent); }

/* Bouton chevron injecté par JS à côté de chaque lien parent */
.submenu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px 0 0;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.submenu-toggle:hover { color: var(--color-accent); }

.chevron {
    display: block;
    font-size: 0.5625rem;
    line-height: 1;
    transition: transform 0.2s;
}

/* Chevron tourne quand le sous-menu est ouvert */
.submenu-open > .submenu-toggle .chevron { transform: rotate(180deg); }

/* ── Sous-menus volants ── */
.menu-item-has-children { position: relative; display: flex; align-items: center; }
.menu-item-has-children > a { padding-right: 2px; }

.site-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 0;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.site-nav .sub-menu ul { flex-direction: column; gap: 0; }

.site-nav .sub-menu a {
    padding: 10px 16px;
    font-size: 0.6875rem;
}

.site-nav .sub-menu a:hover { background: var(--color-bg-card); }

/* Ouverture au survol (desktop) et via .submenu-open (JS mobile) */
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu,
.submenu-open > .sub-menu { display: block; }


/* ── 11. HAMBURGER & MENU MOBILE ────────────────────────────────
   Le bouton hamburger est masqué sur desktop, visible sur mobile.
   Le JS ajoute/retire .is-open sur la nav quand on clique.
─────────────────────────────────────────────────────────────── */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 110;
}

/* Trois traits du hamburger via l'élément + ::before + ::after */
.hamburger {
    display: block;
    position: relative;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: background 0.3s;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: transform 0.3s;
}

.hamburger::before { top: -7px; }
.hamburger::after  { top:  7px; }

/* Animation X quand le menu est ouvert */
.nav-toggle[aria-expanded="true"] .hamburger              { background: transparent; }
.nav-toggle[aria-expanded="true"] .hamburger::before { transform: translateY(7px)  rotate(45deg);  }
.nav-toggle[aria-expanded="true"] .hamburger::after  { transform: translateY(-7px) rotate(-45deg); }


/* ── 12. FOOTER ─────────────────────────────────────────────────
─────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--color-bg-dark);
    border-top: 1px solid var(--color-border);
    padding: 24px 0;
}

.site-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.footer-links .footer-menu { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; }

.footer-links a {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    transition: color 0.2s;
}

.footer-links a:hover { color: var(--color-accent); }

.footer-copyright {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}


/* ── 13. TEMPLATE HERO ──────────────────────────────────────────
   En-tête visuel des pages internes (page.php, page-contact,
   pages légales, templates child page-*).
─────────────────────────────────────────────────────────────── */
.page-banner {
    background: linear-gradient(160deg, #1a0000 0%, #3d0000 100%);
    padding: 60px 0;
    border-bottom: 2px solid var(--color-primary);
}

.page-banner h1 {
    color: var(--color-text);
    margin: 8px 0 16px;
}

.page-banner .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.page-banner p {
    font-size: 1rem;
    color: var(--color-text-muted);
    max-width: 600px;
    line-height: 1.7;
}


/* ── 14. PAGE HEADER ────────────────────────────────────────────
   En-tête des pages d'archives (category, tag, taxonomy,
   archive, author, date, search) — titre + description optionnelle.
─────────────────────────────────────────────────────────────── */
.page-header {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
}

.page-header .page-title {
    margin-bottom: 12px;
}

.archive-description {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* En-tête auteur : avatar + infos côte à côte */
.author-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 40px;
}

.author-avatar img {
    border-radius: 50%;
    width: 96px;
    height: 96px;
    object-fit: cover;
}

.author-bio {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    margin-top: 8px;
}


/* ── 14. POSTS LIST ─────────────────────────────────────────────
   Grille de cartes articles — utilisée par index, home, archive,
   category, tag, taxonomy, author, date, search.
─────────────────────────────────────────────────────────────── */
.posts-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.post-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s;
}

.post-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.post-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-card-body { padding: 20px; }

.entry-title {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 10px;
}

.entry-title a { color: var(--color-text); transition: color 0.2s; }
.entry-title a:hover { color: var(--color-accent); }

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.entry-summary {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 16px;
}

.read-more {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-accent);
    transition: opacity 0.2s;
}

.read-more:hover { opacity: 0.7; }


/* ── 15. ARTICLE SINGLE ─────────────────────────────────────────
   Contenu complet d'un article + navigation prev/next + tags.
─────────────────────────────────────────────────────────────── */
.entry-content {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--color-text);
    max-width: 800px;
    margin-bottom: 32px;
}

.entry-content p  { margin-bottom: 16px; }
.entry-content h2 { margin: 40px 0 16px; }
.entry-content h3 { margin: 28px 0 12px; }
.entry-content a  { color: var(--color-accent); text-decoration: underline; }

/* Liens de pagination dans un article long (<!--nextpage-->) */
.page-links {
    margin: 24px 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Footer de l'article : tags */
.entry-footer {
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.tags-links a {
    color: var(--color-accent);
    margin-right: 8px;
}

/* Navigation article suivant / précédent */
.post-navigation {
    margin: 40px 0;
    padding: 24px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next { max-width: 48%; }

.post-navigation a {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    transition: color 0.2s;
}

.post-navigation a:hover { color: var(--color-accent); }


/* ── 16. PAGE STATIQUE ──────────────────────────────────────────
─────────────────────────────────────────────────────────────── */
.page-content {
    padding: 60px 0;
    max-width: 800px;
}

.page-title {
    font-size: clamp(1.75rem, 4vw, 2.625rem);
    color: var(--color-text);
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-primary);
}

.page-body {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.8;
}

.page-body h2 { color: var(--color-text); margin: 40px 0 16px; }
.page-body h3 { color: var(--color-text); margin: 28px 0 12px; }
.page-body p  { margin-bottom: 16px; }
.page-body a  { color: var(--color-accent); text-decoration: underline; }


/* ── 17. SIDEBAR & WIDGETS ──────────────────────────────────────
─────────────────────────────────────────────────────────────── */
.widget-area { min-width: 260px; }

.widget {
    margin-bottom: 32px;
    padding: 20px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.widget-title {
    font-size: 0.8125rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

/* Listes de widgets (derniers articles, catégories…) */
.widget ul li {
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--color-text-muted); transition: color 0.2s; }
.widget ul li a:hover { color: var(--color-accent); }


/* ── 18. PAGINATION ─────────────────────────────────────────────
   Générée par takaidance_pagination() → the_posts_pagination().
   Classe racine : .navigation.pagination
─────────────────────────────────────────────────────────────── */
.navigation.pagination {
    margin: 40px 0;
    text-align: center;
}

.navigation.pagination .nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 3px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    transition: border-color 0.2s, color 0.2s;
}

a.page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}

.page-numbers.current {
    background: var(--color-primary);
    color: var(--color-bg);
    border-color: var(--color-primary);
}


/* ── 19. COMMENTAIRES ───────────────────────────────────────────
   WP génère <ol class="comment-list"> avec <li class="comment">
─────────────────────────────────────────────────────────────── */
.comments-area {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
}

.comments-title,
.comment-reply-title {
    font-size: 1.25rem;
    margin-bottom: 24px;
}

.comment-list { margin-bottom: 40px; }

.comment {
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
}

.comment:last-child { border-bottom: none; }

.comment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.comment-author img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.comment-author .fn { font-weight: 500; font-size: 0.875rem; }

.comment-metadata {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.comment-content {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.reply a {
    font-size: 0.75rem;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Commentaires imbriqués */
.children {
    margin-left: 40px;
    padding-left: 20px;
    border-left: 2px solid var(--color-border);
}

/* Formulaire de commentaire */
.comment-form label   { font-size: 0.8125rem; margin-bottom: 4px; }
.comment-form p       { margin-bottom: 16px; }


/* ── 20. BREADCRUMB ─────────────────────────────────────────────
   Généré par takaidance_breadcrumb() dans functions.php.
─────────────────────────────────────────────────────────────── */
.breadcrumb {
    margin-bottom: 24px;
    font-size: 0.8125rem;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    list-style: none;
    padding: 0;
}

/* Séparateur "›" entre chaque item via ::after */
.breadcrumb-item:not(:last-child)::after {
    content: '›';
    margin-left: 8px;
    color: var(--color-text-muted);
}

.breadcrumb-item a { color: var(--color-text-muted); transition: color 0.2s; }
.breadcrumb-item a:hover { color: var(--color-accent); }
.breadcrumb-item.current { color: var(--color-text-muted); }


/* ── 21. PAGE D'ACCUEIL ─────────────────────────────────────────
   Hero + section cartes styles (front-page.php).
   Tout est surchargé dans le child theme.
─────────────────────────────────────────────────────────────── */

/* Hero */
.hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    background: var(--color-bg-dark);
    background-size: cover;
    background-position: center;
}

.hero-content {
    max-width: 600px;
}

.hero h1 { margin-bottom: 16px; }
.hero p   { margin-bottom: 24px; color: var(--color-text-muted); }

/* Cartes styles */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.style-card {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    padding: 32px 16px;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.style-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-3px);
}

.style-card .card-name {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 8px;
}

.style-card .card-sub {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.style-card .card-cta {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: auto;
    padding-top: 16px;
}

.style-card:hover .card-cta {
    color: var(--color-text);
}

.style-card.card-current {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.style-card.card-current:hover {
    transform: none;
    border-color: var(--color-border);
}


/* ── 22. PAGE CONTACT ───────────────────────────────────────────
   Deux colonnes : formulaire à gauche, infos à droite.
─────────────────────────────────────────────────────────────── */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 32px;
}

.contact-form-col { min-width: 0; }
.contact-info-col { min-width: 0; }
.contact-layout--full { grid-template-columns: 1fr; }


.contact-form-placeholder,
.contact-info-placeholder {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
}


/* ── 23. PAGES LÉGALES ──────────────────────────────────────────
─────────────────────────────────────────────────────────────── */
.legal-content {
    padding-top: 20px;
    max-width: 800px;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.8;
}

.legal-content h2 {
    color: var(--color-text);
    font-size: 1.125rem;
    margin: 40px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.legal-content h3 {
    color: var(--color-text);
    font-size: 0.9375rem;
    margin: 24px 0 8px;
}

.legal-content h4 {
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 18px 0 6px;
}

.legal-content p  { margin-bottom: 12px; }
.legal-content a  { color: var(--color-accent); }

.rgpd-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.875rem;
}
.rgpd-table th,
.rgpd-table td {
    border: 1px solid var(--rgpd-table-border, var(--color-border));
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}
.rgpd-table th {
    background: var(--rgpd-table-header-bg, var(--color-bg-card));
    color: var(--rgpd-table-header-color, var(--color-text));
    font-weight: 600;
}
.rgpd-table td {
    color: var(--rgpd-table-cell-color, var(--color-text-muted));
}


/* ── 24. PAGE 404 ───────────────────────────────────────────────
─────────────────────────────────────────────────────────────── */
.error-404 {
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.error-content {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.error-code {
    display: block;
    font-size: 7.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 16px;
    opacity: 0.8;
}

.error-content h1 { margin-bottom: 16px; }
.error-content p  { color: var(--color-text-muted); margin-bottom: 32px; font-size: 0.9375rem; }
.error-search-hint { margin-top: 16px; margin-bottom: 12px; }
.error-content .search-form { max-width: 400px; width: 100%; margin: 0 auto; }
.search-form .search-field { margin-bottom: 0; width: 100%; }
.search-form label { flex: 1; }

.search-submit {
    padding: 0 20px;
    height: 44px;
    background: var(--color-primary);
    color: var(--color-text);
    border: none;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.search-submit:hover { background: var(--color-primary-dark); }


/* ── 25. AUTEUR ─────────────────────────────────────────────────
   (voir aussi section 13. PAGE HEADER pour .author-header)
─────────────────────────────────────────────────────────────── */
.author-info .page-title { border-bottom: none; margin-bottom: 4px; }


/* ── 26. RECHERCHE ──────────────────────────────────────────────
─────────────────────────────────────────────────────────────── */
.search-results-count {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 15px;
    margin-bottom: 24px;
}

.no-results .page-content { padding: 40px 0; }

.no-results .search-form { max-width: 500px; margin: 24px 0; }


/* ── 27. UTILITAIRES ────────────────────────────────────────────
   Classes réutilisables dans tous les templates et child themes.
─────────────────────────────────────────────────────────────── */

/* Titre de section avec trait décoratif */
.section-heading {
    font-size: clamp(1.125rem, 2.5vw, 1.75rem);
    margin-bottom: 32px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-primary);
}

/* Lien "retour" (← Retour à la liste, etc.) */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: 24px;
    transition: color 0.2s;
}

.back-link::before { content: '←'; }
.back-link:hover { color: var(--color-accent); }

/* Message d'aide affiché quand une zone est vide */
.placeholder-hint {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
    padding: 16px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}


/* ── 28. RESPONSIVE / MOBILE ────────────────────────────────────
   Breakpoints : 1024px (tablette), 768px (mobile large), 480px (mobile)
   Ordre : du plus large au plus étroit.
─────────────────────────────────────────────────────────────── */

/* Tablette */
@media (max-width: 1024px) {
    .posts-list {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

/* Mobile large */
@media (max-width: 768px) {

    /* Afficher le hamburger, masquer la nav */
    .nav-toggle { display: flex; align-items: center; }

    /* La nav devient un panneau plein écran qui descend */
    .site-nav {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        background: var(--color-bg-dark);
        border-top: 1px solid var(--color-border);
        padding: 16px 0;
        z-index: 99;
    }

    /* La nav s'affiche quand JS ajoute .is-open */
    .site-nav.is-open { display: block; }

    .site-nav ul { flex-direction: column; gap: 0; }

    .site-nav > ul > li {
        border-bottom: 1px solid var(--color-border);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .site-nav > ul > li > a {
        flex: 1;
        padding: 14px 24px;
        text-align: center;
    }

    .submenu-toggle { padding: 14px 16px; }

    /* Sous-menu : lien + chevron centrés ensemble, pas écarté */
    .menu-item-has-children { flex-wrap: wrap; justify-content: center; }
    /* Spécificité 0,2,3 pour battre .site-nav > ul > li > a (0,1,3) */
    .site-nav > ul > li.menu-item-has-children > a { flex: 0 0 auto; padding-right: 4px; }

    /* Sous-menu mobile : position statique (pas de dropdown volant) */
    .site-nav .sub-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        width: 100%;
        background: rgba(0,0,0,0.15);
    }

    /* Le sous-menu mobile s'affiche uniquement via .submenu-open */
    .menu-item-has-children:hover > .sub-menu,
    .menu-item-has-children:focus-within > .sub-menu { display: none; }

    /* Spécificité égale (0,3,0), source order gagne */
    .menu-item-has-children.submenu-open > .sub-menu { display: block; }

    .site-nav .sub-menu a { padding: 12px 24px; text-align: center; }

    /* Layout général */
    .posts-list { grid-template-columns: 1fr; }

    .author-header { flex-direction: column; align-items: flex-start; }

    .post-navigation .nav-links { flex-direction: column; }
    .post-navigation .nav-previous,
    .post-navigation .nav-next   { max-width: 100%; }

    .site-footer .container { flex-direction: column; align-items: flex-start; }

    .children { margin-left: 16px; padding-left: 12px; }
}

/* Mobile étroit */
@media (max-width: 480px) {
    .section { padding: 40px 0; }

    .hero { min-height: 50vh; }

    .error-code { font-size: 5rem; }

    .cards-grid { grid-template-columns: 1fr 1fr; }

    .search-form { flex-direction: column; }
}


/* ── 29. IMPRESSION ─────────────────────────────────────────────
   Masquer les éléments inutiles à l'impression.
─────────────────────────────────────────────────────────────── */
@media print {
    .site-header,
    .site-footer,
    .site-nav,
    .nav-toggle,
    .breadcrumb,
    .post-navigation,
    .navigation.pagination,
    .comments-area,
    .skip-link { display: none !important; }

    body {
        color: #000;
        background: #fff;
        font-size: 12pt;
    }

    a { color: #000; text-decoration: underline; }

    .container { max-width: 100%; padding: 0; }
}