/* ════════════════════════════════
   CATALOG CATEGORY - Nos planches / Extras / Boissons
   Maquette Figma : node "Nos planches" 74:2 (1440×4209)
   Appliqué à /{slug} (ex. /nos-planches)
════════════════════════════════ */

.cc-page {
    --cc-cream:     #f3e9d7;
    --cc-cream-2:   #fbf4e9;
    --cc-cream-3:   #f1ead8;
    --cc-white-2:   #fffdf8;
    --cc-orange:    #ffa200;
    --cc-orange-2:  #f3a63c;
    --cc-red:       #e85a28;
    --cc-red-2:     #b22222;
    --cc-dark:      #242323;
    --cc-grey:      #dbdbdb;
    --cc-pill-bg:   #fafafa;
    --cc-pagination-bg: #fdfdfd;

    --cc-font-display: 'Erica One', 'Anton', Impact, sans-serif;
    --cc-font-script:  'Darumadrop One', 'Caveat', cursive;
    --cc-font-body:    'DM Sans', sans-serif;
    --cc-font-ui:      'Poppins', system-ui, sans-serif;

    --cc-max:   1440px;
    --cc-pad:   100px;

    background: var(--cc-cream);
    overflow-x: clip;
}

/* Annule le padding-top par défaut de <main> (réservé à la navbar fixed),
   on a notre propre nav en overlay sur le hero. */
.cc-page main { padding-top: 0; }
body.cc-page > .blob { display: none !important; }

.cc-page h1, .cc-page h2, .cc-page h3 { margin: 0; }
.cc-page ul { margin: 0; padding: 0; list-style: none; }
.cc-page img { display: block; max-width: 100%; }

/* ════════════════════════════════
   1. HERO
════════════════════════════════ */
.cc-hero {
    position: relative;
    min-height: 700px;
    background-color: var(--cc-red);
    background-image: url('/images/home/union3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
    overflow: visible;
}

.cc-hero-mascot {
    position: absolute;
    top: 124px;
    left: calc(50% - 720px + 14px);
    width: 117px;
    height: 103px;
    z-index: 5;
    pointer-events: none;
    transform: scaleY(-1) rotate(174.51deg);
}
.cc-hero-mascot img { width: 100%; height: 100%; object-fit: contain; }

.cc-hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--cc-max);
    margin: 0 auto;
    /* padding-top réduit : le titre vient se placer juste sous le gribouillis. */
    padding: 175px var(--cc-pad) 100px;
    box-sizing: border-box;
    color: #fff;
}

.cc-hero-title {
    font-family: var(--cc-font-display);
    font-size: clamp(80px, 7.5vw, 122px);
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.0;
    letter-spacing: -2px;
    max-width: 900px;
}

.cc-hero-title span { display: block; }

/* Design `.hp-hero-title-line` repris de la home (cf. home.css L181-184) :
   met le mot sur sa propre ligne avec 4px de marge en bas. Sur les pages
   catégorie, ça s'utilise pour isoler le mot qui portera le tampon. */
.cc-hero-title .hp-hero-title-line {
    display: block;
    margin-bottom: 4px;
}

/* Tampon jaune dessiné à la main repris de la home (cf. home.css L191-200) :
   le SVG `rect3464584.svg` est appliqué en background, le padding intérieur
   simule le "tampon manuel" qui déborde du mot. À placer sur un mot précis
   du h1 (style "ramène" sur la home, "planches" sur /nos-planches, "plus pour"
   sur /extras...). */
.cc-hero-title .hp-hero-title-stamp {
    display: inline-block;
    position: relative;
    padding: 14px 20px 18px;
    line-height: 1;
    background-image: url('/images/home/rect3464584.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.cc-hero-desc {
    margin-top: 32px;
    font-family: var(--cc-font-body);
    font-size: 22px;
    line-height: 1.55;
    color: #fff;
    max-width: 630px;
}

/* Bande de carrés orange séparateur hero / grille */
.cc-hero-dots {
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--cc-max);
    padding: 0 var(--cc-pad);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    z-index: 3;
    pointer-events: none;
}

.cc-hero-dots span {
    width: 34px;
    height: 34px;
    background: var(--cc-orange-2);
    flex: 0 0 34px;
}

/* ════════════════════════════════
   2. GRID PRODUITS
════════════════════════════════ */
.cc-products {
    padding: 100px var(--cc-pad) 80px;
    background: var(--cc-cream);
}

.cc-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 30px;
    max-width: 1180px;
    margin: 0 auto;
}

/* Carte produit - style polaroid */
.cc-card {
    position: relative;
    background: var(--cc-white-2);
    border: 18px solid #fff;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        2px 9px 21px rgba(0, 0, 0, .1),
        7px 38px 39px rgba(0, 0, 0, .09),
        16px 85px 52px rgba(0, 0, 0, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}

.cc-card:hover {
    transform: translateY(-4px);
    box-shadow:
        2px 12px 28px rgba(0, 0, 0, .12),
        10px 44px 52px rgba(0, 0, 0, .12);
}

.cc-card-img {
    width: calc(100% + 36px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: -18px -18px 0;
    position: relative;
    background: var(--cc-cream-3);
}

.cc-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffa200;
    color: #e85a28;
}

.cc-card-img-placeholder svg {
    width: 80px;
    height: 80px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.cc-card-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(36, 35, 35, .85);
    color: #fff;
    padding: 6px 12px;
    border-radius: 16px;
    font-family: var(--cc-font-body);
    font-size: 13px;
    font-weight: 600;
}

/* Badge "Promo" : rouge, positionné à gauche (pour ne pas cacher d'autres
   badges éventuels comme le volume sur les boissons). Utilisé sur les 3
   catégories quand le produit ou une de ses variantes est en promo. */
.cc-card-badge--promo {
    top: 14px;
    left: 14px;
    right: auto;
    background: var(--cc-red);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    padding: 5px 11px;
    box-shadow: 0 4px 12px rgba(232, 90, 40, 0.30);
}

.cc-card-body {
    padding: 28px 22px 24px;
}

/* Ligne titre + bouton panier sur la même ligne (maquette Méditerranée) */
.cc-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.cc-card-title {
    font-family: var(--cc-font-script);
    font-size: 38px;
    color: #000;
    line-height: 1.05;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.cc-card-title a {
    color: inherit;
    text-decoration: none;
}

.cc-card-desc {
    font-family: var(--cc-font-body);
    font-size: 18px;
    color: var(--cc-dark);
    line-height: 1.45;
    margin-bottom: 22px;
}

/* État de chargement AJAX (pagination, filtre sous-catégorie) : on grise et
   désactive les interactions pendant le fetch pour éviter les double-clics. */
.cc-products-inner.cc-results--loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity .2s ease;
}

/* ─────────  Onglets de sous-catégories (Charcuterie / Fromage…, Soft / Bière / Vin)  ─────────
   Pills blanches arrondies, active = pilule orange/rouge plein. Partagé entre :
   - /extras  → _subcat_tabs.html.twig     (filtre AJAX via ?sub=)
   - /boissons → _boissons_tabs.html.twig  (ancre #subcat-<slug> + smooth scroll) */
.cc-subcat-tabs {
    max-width: 1180px;
    margin: 48px auto 28px;
    padding: 0 var(--cc-pad);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.cc-subcat-tab {
    background: #fff;
    border: 1.5px solid transparent;
    border-radius: 999px;
    padding: 14px 32px;
    font-family: var(--cc-font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--cc-dark);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(36, 35, 35, 0.08);
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
    letter-spacing: 0;
}

.cc-subcat-tab:hover {
    border-color: var(--cc-red);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(36, 35, 35, 0.12);
}

.cc-subcat-tab--active {
    background: var(--cc-red);
    color: #fff;
    border-color: var(--cc-red);
    box-shadow: 0 10px 22px rgba(232, 90, 40, 0.30);
}
.cc-subcat-tab--active:hover {
    background: var(--cc-red);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 720px) {
    .cc-subcat-tabs { gap: 8px; padding: 0 18px; }
    .cc-subcat-tab { padding: 11px 22px; font-size: 14px; }
}

/* Sections boissons avec ancrage : on offset le scroll pour ne pas glisser
   sous la nav fixe. scroll-behavior: smooth sur cc-page assure la transition
   animée au click de l'onglet.
   scroll-margin-top à 140px : marge confortable sous la nav fixe ~100px.
   padding-top : breathing room pour que le titre (haut des glyphes Erica)
   n'arrive pas collé contre le bord de la section. */
.cc-page { scroll-behavior: smooth; }
.cc-boissons-section {
    scroll-margin-top: 140px;
    padding-top: 24px;
}

/* Stack grid : la carte planche peut héberger plusieurs descriptions
   superposées (une visible + N fantômes pour les autres variantes). Le
   conteneur prend la hauteur du plus long texte → les boutons en dessous
   ne sautent pas quand on bascule de variante.
   minmax(0, 1fr) : sans ça, la colonne par défaut serait `auto` qui se
   dimensionne à max-content (le texte resterait sur une seule ligne et
   ne wrapperait jamais). 0 en min évite l'overflow sur petits écrans. */
.cc-card-desc-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    margin-bottom: 22px;
}
.cc-card-desc-wrap > .cc-card-desc {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    min-width: 0;
}
.cc-card-desc-wrap > .cc-card-desc--ghost {
    visibility: hidden;
    pointer-events: none;
}

/* ───────── Overlay description sur l'image (desktop) ─────────
   La description reste dans le corps de la carte (un seul élément : le swap JS
   des planches continue de cibler .js-card-desc). En desktop, .cc-card-desc-overlay
   passe en absolu, calé sur la MÊME boîte carrée que .cc-card-img (mêmes left /
   width / aspect-ratio), masqué puis révélé au survol de la carte - même esprit
   que la home (.hp-product-card-overlay). En mobile (<=900px) l'overlay est
   neutralisé via `display: contents` : la description retombe dans le flux du
   corps, sous le titre, exactement comme avant. */
.cc-card-desc-overlay {
    position: absolute;
    /* Boîte identique à .cc-card-img (mêmes top/left/width/aspect-ratio) : l'image
       est tirée de -18px en haut/côtés par ses marges négatives, on s'y cale pour
       que le bas du dégradé coïncide avec le bas visible de l'image. */
    top: -18px;
    left: -18px;
    width: calc(100% + 36px);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    padding: 48px 30px 24px;
    background: linear-gradient(to top,
        rgba(20, 18, 16, .92) 0%,
        rgba(20, 18, 16, .60) 55%,
        rgba(20, 18, 16, 0) 100%);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    z-index: 2;
}

.cc-card:hover .cc-card-desc-overlay,
.cc-card:focus-within .cc-card-desc-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Texte blanc dans l'overlay, sans marge (l'espacement vient du padding de
   l'overlay). Desktop uniquement (>900px) : en deçà, l'overlay est neutralisé
   (`display: contents`) et la description garde ses règles d'origine intactes,
   y compris les marges propres à chaque catégorie (ex. extras = 18px). La
   spécificité `.cc-card ...` passe devant `.cc-extras-card .cc-card-desc`. */
@media (min-width: 901px) {
    .cc-card .cc-card-desc-overlay .cc-card-desc { color: #fff; margin: 0; }
    .cc-card .cc-card-desc-overlay .cc-card-desc-wrap { width: 100%; margin: 0; }
}

.cc-card-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.cc-card-pill {
    flex: 1 1 0;
    min-width: 0;
    background: var(--cc-pill-bg);
    border-radius: 20px;
    padding: 12px 8px;
    text-align: center;
    color: #000;
    font-family: var(--cc-font-body);
    font-size: 17px;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
    /* Reset du style natif des <button> (utilisés comme sélecteur de variante) */
    border: 0;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.cc-card-pill:focus-visible {
    outline: 2px solid var(--cc-red);
    outline-offset: 2px;
}

.cc-card-pill-name { display: block; font-weight: 400; }
.cc-card-pill-price { display: block; font-weight: 700; margin-top: 2px; }

.cc-card-pill--selected,
.cc-card-pill:hover {
    background: var(--cc-red);
    color: #fff;
}

/* Bouton panier carré noir (maquette Méditerranée : 56×56, rounded-[16.78px]).
   Utilisable en <a> (vue produit) ou en <button> (ajout direct au panier). */
.cc-card-cta {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    background: #000;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex: 0 0 56px;
    transition: background .15s ease, transform .15s ease;
    /* Reset du style natif des <button> qui partagent cette classe. */
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.cc-card-cta:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.cc-card-cta:hover {
    background: var(--cc-red);
    transform: scale(1.05);
}

.cc-card-cta svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* État out-of-stock */
.cc-card--oos { opacity: .6; }
.cc-card--oos .cc-card-cta {
    background: var(--cc-grey);
    pointer-events: none;
}

/* ════════════════════════════════
   3. PAGINATION
════════════════════════════════ */
.cc-pagination {
    margin: 60px auto 0;
    max-width: 1180px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.cc-page-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--cc-pagination-bg);
    border: 1px solid var(--cc-grey);
    color: #000;
    font-family: 'Open Sans', var(--cc-font-body);
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
}

.cc-page-btn:hover {
    background: var(--cc-cream-3);
    border-color: var(--cc-orange-2);
}

.cc-page-btn--active {
    background: var(--cc-red);
    color: #fff;
    border-color: var(--cc-red);
    cursor: default;
}

.cc-page-btn--active:hover {
    background: var(--cc-red);
    border-color: var(--cc-red);
}

.cc-page-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cc-page-dots {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cc-dark);
    font-family: var(--cc-font-body);
    font-size: 16px;
    user-select: none;
}

/* ════════════════════════════════
   4. EMPTY
════════════════════════════════ */
.cc-empty {
    text-align: center;
    padding: 80px 20px;
    font-family: var(--cc-font-body);
    color: var(--cc-dark);
}

.cc-empty svg {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    color: var(--cc-grey);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.cc-empty p {
    font-size: 18px;
    margin-bottom: 24px;
}

/* ════════════════════════════════
   5. RESPONSIVE
════════════════════════════════ */
@media (max-width: 1440px) {
    .cc-page { --cc-pad: 60px; }
    .cc-hero-mascot { left: 30px; }
}

@media (max-width: 900px) {
    .cc-page { --cc-pad: 24px; }
    .cc-products-grid { grid-template-columns: 1fr; gap: 40px; }

    /* Plus d'overlay : la description reprend sa place dans le flux du corps,
       sous le titre, à l'identique. `display: contents` supprime la boîte de
       l'overlay sans retirer ses enfants du DOM ; les overrides de texte étant
       confinés au desktop (@media min-width:901px), la description garde ici ses
       règles d'origine (couleur, marges par catégorie) sans rien à restaurer. */
    .cc-card-desc-overlay { display: contents; }

    /* Hero mobile : même logique que la page principale (titre qui scale,
       espacements compacts, mascotte réduite). */
    .cc-hero { min-height: 0; }
    .cc-hero-inner { padding: 130px var(--cc-pad) 70px; }
    .cc-hero-title { font-size: clamp(36px, 11vw, 90px); letter-spacing: -1px; max-width: none; }
    .cc-hero-title .hp-hero-title-stamp { padding: 6px 12px 10px; }
    .cc-hero-desc { font-size: 16px; margin-top: 22px; }
    .cc-hero-mascot { left: 22px; top: 92px; width: 78px; height: 68px; }
}

@media (max-width: 480px) {
    .cc-hero-title { font-size: clamp(32px, 12vw, 64px); }
}