/* Styles pour equip.php — Direction B ("instrument de bord / carte marine"),
   validée par maquette. Remplace les composants Bootstrap par défaut
   (card/btn/badge/nav-pills) par un système bespoke ; Bootstrap reste chargé
   via headers.php pour d'autres besoins mais n'est plus utilisé ici pour les
   composants visuels. */

:root {
    --navy:        #0c2436;
    --paper:       #eef1ea;
    --cyan:        #15828f;
    --orange:      #c85a28;
    --grey:        #6d7c83;
    --card-bg:     #fbfbf7;
    --card-border: #d7ddd2;
    --hair:        #c3ccc3;
    --shadow:      0 1px 2px rgba(12,36,54,.05), 0 3px 12px rgba(12,36,54,.06);
}
:root[data-theme="dark"] {
    --paper:       #0a1a26;
    --navy:        #dbe6ea;
    --cyan:        #35c4c9;
    --orange:      #e57a44;
    --grey:        #86969c;
    --card-bg:     #10222f;
    --card-border: #1f3542;
    --hair:        #1f3542;
    --shadow:      0 1px 2px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper:       #0a1a26;
        --navy:        #dbe6ea;
        --cyan:        #35c4c9;
        --orange:      #e57a44;
        --grey:        #86969c;
        --card-bg:     #10222f;
        --card-border: #1f3542;
        --hair:        #1f3542;
        --shadow:      0 1px 2px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.4);
    }
}

.mono { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }

/* Fond identique au reste du site (crit_styles.css), pas la grille de la
   maquette — pour rester cohérent avec les autres pages. */
body {
    background-color: #ffffff;
    background-image: url('http://www.kayakdemer.net/images/background3.jpg');
    background-attachment: fixed;
    color: var(--navy);
}
:root[data-theme="dark"] body { background-color: var(--paper); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body { background-color: var(--paper); }
}

.equip-centered { display: flex; flex-direction: column; align-items: center; }

.equip-page-wrap {
    width: 975px;
    box-sizing: border-box;
    margin-top: 0;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
    padding: 20px 22px 26px;
}
@media (max-width: 992px) {
    .equip-page-wrap { width: 100% !important; }
}
@media (max-width: 575.98px) {
    .equip-page-wrap { padding: 14px 14px 20px; }
}

.topline { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; padding-bottom:14px; border-bottom: 1px solid var(--hair); }

.tabs { display:flex; gap:0; border: 1px solid var(--card-border); flex-wrap: wrap; }
.tab { font-size:.78rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:7px 13px; color:var(--grey); text-decoration:none; border-right:1px solid var(--card-border); }
.tab:last-child { border-right:none; }
.tab.active { background: var(--navy); color: var(--paper); }
:root[data-theme="dark"] .tab.active { color:#0a1a26; }
.tab:not(.active):hover { background: rgba(21,130,143,.08); }

.equip-search-wrap { position:relative; width:260px; max-width:100%; }
.equip-search-wrap .icon { position:absolute; left:9px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--grey); pointer-events:none; }
.equip-search-wrap input { width:100%; box-sizing:border-box; padding:7px 10px 7px 30px; border:1px solid var(--card-border); background:var(--paper); color:var(--navy); font-size:.82rem; }
.equip-search-results {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1050;
    background: var(--card-bg); border: 1px solid var(--card-border); border-top: none;
    box-shadow: var(--shadow); max-height: 70vh; overflow-y: auto;
}
.equip-search-item { display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem; text-decoration:none; color:inherit; border-bottom:1px solid var(--hair); }
.equip-search-item:hover { background: rgba(21,130,143,.08); }
.equip-search-item-badge {
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:20px; height:20px; border-radius:3px; font-size:.68rem; font-weight:800;
    color:#fff; font-family: ui-monospace, monospace;
}
.equip-search-item-badge.badge-kayak { background: var(--cyan); }
.equip-search-item-badge.badge-pleinair { background: var(--orange); }
/* Couleur fixe (pas var(--navy)) : --navy est le texte principal, il
   s'inverse en clair en mode sombre (voir :root[data-theme="dark"]) — un
   badge doit rester sombre dans les deux thèmes pour que le texte blanc
   reste lisible. */
.equip-search-item-badge.badge-kayaks { background: #3a5568; }
.equip-search-item-text { display:flex; flex-direction:column; min-width:0; }
.equip-search-item-titre { font-weight:700; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.equip-search-item-meta { font-size:.72rem; color:var(--grey); font-family: ui-monospace, monospace; }
.equip-search-empty { padding:.75rem; font-size:.8rem; color:var(--grey); }
.equip-search-more { display:block; width:100%; box-sizing:border-box; padding:.55rem .75rem; border:none; background:var(--paper); color:var(--cyan); font-weight:700; font-size:.78rem; text-align:center; cursor:pointer; }
.equip-search-more:hover { background: rgba(21,130,143,.08); }

.breadcrumb { font-size:.76rem; color:var(--grey); margin-bottom:14px; font-family: ui-monospace, monospace; }
.breadcrumb a { color:var(--cyan); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

/* Titres de section de premier niveau (ex. "ÉQUIPEMENT DE PLEIN AIR",
   "KAYAKS" dans la vue "Tous") — doivent se détacher clairement des
   sous-titres de widget (activité récente, en attente de critique, etc.)
   qui utilisent .log-head/.pending-head, sans quoi la page devient une
   suite plate de blocs sans hiérarchie visuelle. Trait de séparation au-dessus
   de chaque section (sauf la toute première du haut de page). */
h2.section-title { font-weight:800; font-size:1.2rem; letter-spacing:.03em; text-transform:uppercase; margin:40px 0 10px; padding-top:22px; border-top:2px solid var(--orange); color:var(--navy); display:flex; align-items:center; gap:9px; }
h2.section-title:first-of-type { margin-top:2px; padding-top:0; border-top:none; }
h2.section-title::before { content:""; width:11px; height:11px; background:var(--cyan); display:inline-block; flex-shrink:0; }
.section-sub { font-size:.76rem; color: var(--grey); margin-bottom:16px; font-family: ui-monospace, monospace; }

.stat-links { font-size:.78rem; color:var(--grey); margin: 0 0 18px; }
.stat-links a { color:var(--grey); text-decoration:none; }
.stat-links a:hover { color: var(--cyan); }
.stat-links a.active { color: var(--cyan); font-weight:700; }
.stat-links .sep { margin:0 8px; color:var(--hair); }

/* Activité récente */
.activity-panel { border: 1px solid var(--cyan); background: rgba(21,130,143,.05); padding: 14px 16px 4px; margin-bottom: 26px; }
.log-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.log-head .t { font-weight:800; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--navy); display:flex; align-items:center; gap:8px; }
.log-head .t .dot { width:8px; height:8px; background: var(--cyan); display:inline-block; }

.activity-log { position: relative; margin: 0 0 26px; padding-left: 2px; }
.activity-log::before { content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background: var(--hair); }
.activity-row { position:relative; display:flex; align-items:center; gap:11px; padding:8px 4px 8px 20px; text-decoration:none; color:inherit; border-bottom: 1px solid var(--hair); }
.activity-row:last-child { border-bottom:none; }
.activity-row:hover { background: rgba(21,130,143,.06); }
.activity-row::before { content:""; position:absolute; left:1px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; background: var(--card-bg); border:2px solid var(--cyan); }
.activity-row.is-critique::before { border-color: var(--orange); }
.activity-type { font-family: ui-monospace, monospace; font-size:.63rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border:1px solid var(--cyan); color:var(--cyan); flex-shrink:0; width:64px; text-align:center; }
.activity-row.is-critique .activity-type { border-color: var(--orange); color:var(--orange); }
.activity-main { flex:1; min-width:0; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.activity-name { font-weight:700; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.activity-by { font-size:.76rem; color:var(--grey); white-space:nowrap; }
.activity-time { font-family: ui-monospace, monospace; font-size:.72rem; color:var(--grey); flex-shrink:0; }
.activity-empty { font-size:.82rem; color:var(--grey); font-style:italic; margin-bottom:20px; }
.activity-thumb { flex-shrink:0; width:44px; height:44px; border:1px solid var(--card-border); background:var(--paper); overflow:hidden; }
.activity-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.activity-cat { width:100%; font-size:.7rem; color:var(--grey); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 575.98px) {
    .activity-type { width:auto; padding:2px 6px; }
    .activity-by { display:none; }
    .activity-thumb { width:36px; height:36px; }
}

/* Liste de catégories façon points de route */
.wp-list { border-top:1px solid var(--hair); margin-bottom:20px; }
.wp-row { display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid var(--hair); text-decoration:none; color:inherit; transition: background .12s; }
.wp-row:hover { background: rgba(21,130,143,.06); }
.wp-row .marker { width:9px; height:9px; border:2px solid var(--cyan); border-radius:50%; flex-shrink:0; }
.wp-row.empty .marker { border-color: var(--hair); }
.wp-row .name { font-weight:700; font-size:.88rem; flex:1; }
.wp-row.empty .name { color: var(--grey); font-weight:600; }
.wp-row .count { font-size:.78rem; color:var(--grey); font-family: ui-monospace, monospace; }
.wp-row .count b { color:var(--navy); font-weight:700; }
:root[data-theme="dark"] .wp-row .count b { color: var(--navy); }
.wp-row .chev { color:var(--hair); font-size:.75rem; }

.cta-row { display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap; }
.btn { font-size:.76rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:8px 16px; text-decoration:none; display:inline-flex; align-items:center; gap:7px; border:1px solid transparent; cursor:pointer; }
.btn-primary { background: var(--orange); color:#241601; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline { border-color: var(--cyan); color: var(--cyan); background: transparent; }
.btn-outline:hover { background: rgba(21,130,143,.08); }

/* En attente d'une première critique */
.pending-head { display:flex; align-items:center; gap:8px; font-weight:800; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; color:var(--navy); }
.pending-head .dot { width:8px; height:8px; background: var(--orange); display:inline-block; }
.pending-scroll { display:inline-flex; max-width:100%; gap:1px; overflow-x:auto; background: var(--card-border); border:1px solid var(--card-border); margin-bottom:8px; }
.pending-card { flex:0 0 150px; background: var(--card-bg); }
.pending-thumb { height:82px; background: repeating-linear-gradient(135deg, var(--hair) 0 1px, transparent 1px 9px); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--card-border); }
.pending-thumb img { width:100%; height:100%; object-fit:cover; }
.pending-body { padding:8px 9px 10px; }
.pending-body .pname { font-size:.76rem; font-weight:700; line-height:1.25; margin-bottom:8px; min-height:2.1em; }

/* Variante panoramique pour les kayaks (photos toujours horizontales) : carte
   plus large, vignette en 16/7 avec object-fit:contain plutôt que cover, pour
   ne jamais couper la proue/poupe — même raisonnement que .kayak-item-thumb. */
.kayak-pending-card { flex-basis:220px; }
.kayak-pending-thumb { height:auto; aspect-ratio:16/7; background:var(--paper); }
.kayak-pending-thumb:not(:has(img)) { background: repeating-linear-gradient(135deg, var(--hair) 0 1px, transparent 1px 9px); }
.kayak-pending-thumb img { object-fit:contain; }
.pending-cta { display:block; text-align:center; font-size:.68rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; background:var(--orange); color:#241601; padding:5px 0; text-decoration:none; }

/* Grille d'articles pour les kayaks (embarcations) — cartes plus larges et
   cadre panoramique, distinct de .item-grid (équipement) : un kayak est un
   bateau photographié de côté, presque toujours en format très allongé, ce
   que le format de carte générique (étroit, vignette carrée) rend mal. */
.kayak-item-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap:16px; }
.kayak-item-card { border:1px solid var(--card-border); background:var(--card-bg); box-shadow:var(--shadow); overflow:hidden; }
.kayak-item-thumb { width:100%; aspect-ratio: 16/7; background: var(--paper); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--card-border); }
.kayak-item-thumb:not(:has(img)) { background: repeating-linear-gradient(135deg, var(--hair) 0 1px, transparent 1px 9px); }
.kayak-item-thumb img { width:100%; height:100%; object-fit:contain; display:block; }

/* Grille d'articles */
.item-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(215px,1fr)); gap:1px; background: var(--card-border); border:1px solid var(--card-border); }
.item-card { background: var(--card-bg); position:relative; }
.item-thumb { height:120px; background: repeating-linear-gradient(135deg, var(--hair) 0 1px, transparent 1px 9px); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--card-border); }
.item-thumb img { width:100%; height:100%; object-fit:cover; }
.item-thumb-placeholder { font-size:.7rem; color:var(--grey); text-align:center; padding: 0 8px; text-decoration:none; }
.item-body { padding:11px 12px 13px; }
.item-name { font-weight:700; font-size:.88rem; margin-bottom:2px; }
.item-meta { font-size:.76rem; color:var(--grey); margin-bottom:10px; font-family: ui-monospace, monospace; }
.gauge-row { display:flex; align-items:center; gap:8px; }
.gauge { flex:1; height:5px; background: var(--hair); position:relative; }
.gauge > span { position:absolute; left:0; top:0; bottom:0; background: var(--cyan); }
.gauge-val { font-size:.78rem; font-weight:800; color:var(--cyan); width:28px; text-align:right; font-family: ui-monospace, monospace; }
.gauge-cnt { font-size:.7rem; color:var(--grey); margin-top:3px; font-family: ui-monospace, monospace; }
.no-rating { font-size:.76rem; color:var(--grey); font-style:italic; }
.item-actions { display:flex; gap:1px; margin-top:11px; background: var(--card-border); border:1px solid var(--card-border); }
.item-actions .btn { flex:1; justify-content:center; padding:6px 0; font-size:.68rem; border:none; }
.badge-section { position:absolute; top:0; right:0; font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; background: var(--navy); color: var(--paper); }
:root[data-theme="dark"] .badge-section { color:#0a1a26; }
.badge-desuet { position:absolute; top:0; left:0; font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; background: var(--orange); color:#fff; }
.item-year { color:var(--grey); }

.empty-note { font-size:.85rem; color:var(--grey); font-style:italic; margin-bottom: 20px; }

@media (max-width: 575.98px) {
    .item-thumb { height:100px; }
    .equip-search-wrap { max-width:100%; }
}