/* ============================================================
   Rayon par occasion (livres.html + occasion.html).
   Se pose PAR-DESSUS iev.css : on ne redéfinit aucun token, on ne
   réutilise que .wrap, .btn, .section, .logo, les couleurs de la charte.
   Préfixe `oc-` sur tout : iev.css et histoires.css définissent déjà
   .carte, .visuel, .prix, et un nom en commun casserait l'un des deux.
   ============================================================ */

.oc-fil{font-size:14px;color:var(--sub);padding:18px 0 4px}
.oc-fil a:hover{color:var(--ink);text-decoration:underline}

/* --- en-tête de rayon --- */
.oc-tete{padding:26px 0 8px;max-width:720px}
.oc-tete h1{margin-bottom:.25em}
.oc-tete p{color:var(--sub);font-size:1.08rem;margin:0}

/* --- grille des occasions --- */
.oc-grille{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  padding:12px 0 8px}
.oc-case{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease}
.oc-case:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(43,36,64,.13)}
.oc-case img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--line)}
.oc-case .oc-txt{padding:16px 18px 20px}
/* Deux lignes réservées pour le titre : « Un grand frère, une grande sœur » ne
   tient pas sur une ligne en mobile, et le couper à l'ellipse cachait le nom du
   rayon. La hauteur est réservée pour tout le monde, donc les rangées restent
   d'aplomb même quand un titre court n'en prend qu'une. */
.oc-case h3{margin:0 0 4px;font-size:20px;line-height:1.2;min-height:2.4em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oc-case p{margin:0;color:var(--sub);font-size:.95rem;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* --- le choix : avec photo / sans photo --- */
.oc-choix{display:grid;gap:22px;grid-template-columns:1fr 1fr;padding:10px 0 6px;align-items:stretch}
/* Un rayon où une seule façon de personnaliser existe : la carte restante
   s'étale au lieu de laisser une colonne vide en face. */
.oc-choix.seule{grid-template-columns:1fr;max-width:640px}
.oc-voie{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px 28px 26px;display:flex;flex-direction:column;
  box-shadow:0 14px 34px rgba(43,36,64,.06);overflow:hidden}
/* Un liseré en haut distingue les deux voies au premier coup d'œil, sans
   avoir besoin d'un pictogramme. */
.oc-voie::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--accent)}
.oc-voie.sans::before{background:var(--cta)}
.oc-voie .oc-etiq{align-self:flex-start;color:var(--accent);
  font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:0 0 10px;margin:0}
.oc-voie.sans .oc-etiq{color:var(--brand)}
.oc-voie h2{font-size:27px;line-height:1.15;margin:0 0 10px}
.oc-voie > p{color:var(--sub);margin:0 0 20px;font-size:1rem;line-height:1.55}
.oc-voie ul{list-style:none;margin:0 0 22px;padding:18px 0 0;display:grid;gap:12px;
  border-top:1px solid var(--line)}
.oc-voie li{display:grid;grid-template-columns:19px 1fr;gap:11px;font-size:.96rem;line-height:1.45}
.oc-voie li b{font-weight:800}
.oc-voie .oc-coche{width:19px;height:19px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent);
  display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:2px}
.oc-voie.sans .oc-coche{background:color-mix(in srgb,var(--brand) 14%,var(--surface));color:var(--brand)}
.oc-voie .oc-bas{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.oc-voie .oc-des{font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;font-size:25px;line-height:1.15}
.oc-voie .oc-des small{display:block;font-family:"Nunito Sans",system-ui,sans-serif;
  font-weight:600;font-size:12.5px;color:var(--sub);margin-top:3px}
.oc-voie .oc-bas .btn{flex:none}
.oc-voie.vide{opacity:.72}

/* --- tous les univers, en bas de chaque page ---
   Les catégories en onglets, la collection choisie en grille illustrée :
   les trente titres d'un coup faisaient un mur, et une liste de titres nus
   ne donnait envie d'ouvrir aucun livre. Tout reste dans la page (les cartes
   sont là, seules les collections inactives sont masquées), donc suivable
   par un moteur de recherche. */
.oc-nav{border-top:1px solid var(--line);padding:34px 0 6px;margin-top:14px}
.oc-nav h2{font-size:20px;margin:0 0 4px}
.oc-nav .oc-nav-sous{color:var(--sub);font-size:.95rem;margin:0 0 18px}
.oc-nav-onglets{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:20px}
.oc-onglet{background:var(--chipBg);border:1.6px solid var(--line);color:var(--chipInk);
  font-family:"Baloo 2",system-ui,sans-serif;font-weight:700;font-size:16px;
  padding:9px 20px;border-radius:999px;cursor:pointer;transition:background .14s ease,color .14s ease}
.oc-onglet[aria-selected="true"]{background:var(--cta);color:#fff;border-color:transparent}
/* La collection choisie s'affiche en grille illustrée (.oc-livres) : un titre
   nu ne donne envie de rien, la couverture dit tout de suite de quel livre il
   s'agit. Sans cette règle, `display:grid` gagnerait sur l'attribut hidden et
   les quatre collections s'afficheraient en même temps. */
.oc-nav-liste[hidden]{display:none}

/* --- filtres --- */
.oc-chips{display:flex;gap:10px;flex-wrap:wrap;padding:6px 0 18px}
.oc-chip{background:var(--chipBg);border:1.6px solid var(--line);color:var(--chipInk);
  font-family:inherit;font-weight:700;font-size:14.5px;padding:9px 18px;border-radius:999px;cursor:pointer}
.oc-chip[aria-pressed="true"]{background:var(--cta);color:#fff;border-color:transparent}

/* --- cartes livre --- */
.oc-livres{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));padding-bottom:8px}
.oc-livre{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:transform .16s ease,box-shadow .16s ease}
.oc-livre:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(43,36,64,.13)}
.oc-livre .oc-vis{position:relative}
.oc-livre img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--line)}
.oc-badge{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);
  color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;box-shadow:0 4px 14px rgba(43,36,64,.16)}
.oc-badge.sans{background:var(--cta);color:#fff}
.oc-livre .oc-corps{padding:15px 17px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.oc-livre h3{margin:0;font-size:18px;line-height:1.2}
.oc-livre p{margin:0;color:var(--sub);font-size:.9rem;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Les étiquettes situent le livre d'un coup d'œil (Noël, 3-7 ans). Elles ne
   sont pas cliquables : ce sont des repères, et un lien dans un lien n'est pas
   valide. */
.oc-tags{display:flex;flex-wrap:wrap;gap:7px;padding-top:2px}
.oc-tag{background:color-mix(in srgb,var(--brand) 11%,var(--surface));color:var(--ink);
  font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;line-height:1.25}
/* La flèche est dessinée en CSS : un émoji ne se rend pas pareil d'un appareil
   à l'autre (demande Cyril du 06/08). */
.oc-livre .oc-pied{margin-top:auto;padding-top:12px;font-weight:800;color:var(--brand);font-size:.95rem;
  display:flex;align-items:center;gap:7px}
.oc-livre .oc-pied::after{content:"";width:15px;height:9px;flex:none;background:currentColor;
  transition:transform .16s ease;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h13M9 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h13M9 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.oc-livre:hover .oc-pied::after{transform:translateX(4px)}

.oc-vide{color:var(--sub);padding:8px 0 24px}

@media(max-width:860px){
  .oc-choix{grid-template-columns:1fr}
}
@media(max-width:600px){
  .oc-grille{grid-template-columns:1fr 1fr;gap:13px}
  .oc-case .oc-txt{padding:12px 13px 15px}
  .oc-case h3{font-size:16px}
  .oc-case p{font-size:.84rem}
  .oc-livres{grid-template-columns:1fr 1fr;gap:13px}
  .oc-livre h3{font-size:15.5px}
  .oc-livre .oc-corps{padding:12px 13px 15px}
  .oc-voie{padding:24px 20px 22px}
  .oc-voie h2{font-size:23px}
  .oc-voie .oc-bas{flex-direction:column;align-items:stretch;gap:12px}
  .oc-voie .oc-bas .btn{text-align:center}
  /* la grille des univers passe a deux colonnes comme les autres grilles */
  .oc-onglet{font-size:15px;padding:8px 16px}
  /* Les filtres défilent au doigt plutôt que de passer à la ligne. */
  .oc-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 -26px;padding:6px 26px 18px}
  .oc-chips::-webkit-scrollbar{display:none}
  .oc-chip{flex:none}
}