/* ═══════════════════════════════════════════════════════════════════════════
   IMOVI+ — catalogue.css
   Catalogues publics (véhicules, immobilier, terrains, résidences, hôtels) et
   page Contact, dans la langue visuelle de l'accueil.

   Se charge APRÈS imovi-theme.css et home.css : il réutilise leurs jetons
   (--encre, --ivoire, --ocre, --ocre-fonce, --texte-2, --hp-radius, --hp-ease…)
   et n'en invente aucun de couleur. Contrastes mesurés sur le fond réel :
     cuivre foncé #8E561F  → 6,00:1 sur ivoire, 6,49:1 sur blanc (texte, boutons)
     cuivre       #B87333  → aplats, icônes, filets ; texte seulement sur l'encre
     rgba(250,246,240,.78) → 11,9:1 sur l'encre #1A1612
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --cq-ombre-1: 0 1px 2px rgba(26, 22, 18, .05), 0 8px 24px -14px rgba(26, 22, 18, .22);
  --cq-ombre-2: 0 2px 4px rgba(26, 22, 18, .05), 0 24px 56px -26px rgba(26, 22, 18, .38);
  --cq-lin: #E6DCCD;            /* filet de séparation sur ivoire */
  --cq-sable: #F3ECE1;          /* surface calme, un cran sous l'ivoire */
}

/* Surfaces du navigateur : elles aussi parlent la charte. */
::selection { background: rgba(184, 115, 51, .24); color: var(--encre); }
html { accent-color: var(--ocre-fonce); caret-color: var(--ocre-fonce); scrollbar-color: #CDBFAC transparent; }
body { background: var(--ivoire); color: var(--texte); }
a, a:hover { text-decoration: none; }

.cq-h2 {
  font-family: var(--serif); font-weight: 400; color: var(--encre);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.15;
  letter-spacing: -.015em; margin: 0 0 clamp(22px, 3vw, 34px); text-wrap: balance;
}
.cq-lien-fleche {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  color: var(--ocre-fonce); text-decoration: none; transition: gap .25s var(--hp-ease);
}
.cq-lien-fleche:hover { gap: 12px; color: #74451A; }
.cq-lien-fleche i { font-size: 11px; }

/* ═══ 1. BANDEAU ════════════════════════════════════════════════════════════ */
.cq-hero { padding: clamp(18px, 3vw, 40px) 0 clamp(28px, 4vw, 52px); position: relative; }
.cq-hero-grille {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(28px, 4.5vw, 64px); align-items: center;
}

.cq-fil { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--texte-2); margin: 0 0 18px; flex-wrap: wrap; }
.cq-fil a { color: var(--texte-2); text-decoration: none; }
.cq-fil a:hover { color: var(--ocre-fonce); }
.cq-fil i { font-size: 9px; color: var(--ocre); }
.cq-fil [aria-current] { color: var(--encre); font-weight: 600; }

.cq-titre {
  font-family: var(--serif); font-weight: 400; color: var(--encre);
  font-size: clamp(2.05rem, 1.35rem + 3.1vw, 3.55rem); line-height: 1.05;
  letter-spacing: -.028em; margin: 0 0 18px; text-wrap: balance; max-width: 17ch;
}
.cq-sous { font-size: clamp(1rem, .95rem + .25vw, 1.1rem); color: var(--texte-2); line-height: 1.65; max-width: 56ch; margin: 0 0 28px; text-wrap: pretty; }

/* ── Console de recherche ── */
.cq-console {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--hp-radius-lg);
  padding: clamp(14px, 1.8vw, 20px); box-shadow: var(--cq-ombre-2); position: relative; z-index: 5;
}
.cq-bascule { border: 0; margin: 0 0 14px; padding: 4px; display: inline-flex; gap: 2px; background: var(--cq-sable); border-radius: 999px; }
.cq-bascule-opt { position: relative; cursor: pointer; }
.cq-bascule-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cq-bascule-opt span {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--texte-2); transition: background .25s var(--hp-ease), color .25s, box-shadow .25s;
}
.cq-bascule-opt:hover span { color: var(--encre); }
.cq-bascule-opt input:checked + span { background: var(--surface); color: var(--encre); box-shadow: 0 1px 2px rgba(26,22,18,.08), 0 4px 12px -6px rgba(26,22,18,.25); }
.cq-bascule-opt input:focus-visible + span { outline: 3px solid var(--ocre); outline-offset: 2px; }

.cq-champs { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.cq-champ { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cq-champ-large { flex: 2 1 240px; }
.cq-champ label { font-size: 12.5px; font-weight: 600; color: var(--texte-2); }
.cq-champ input, .cq-champ select {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--ligne); border-radius: 12px;
  background: var(--surface); font: 500 15px/1.2 var(--sans); color: var(--encre);
  -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s;
}
.cq-champ select {
  padding-right: 38px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B6560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.cq-champ input::placeholder { color: var(--texte-3); }
.cq-champ input:focus, .cq-champ select:focus { outline: none; border-color: var(--ocre); box-shadow: 0 0 0 4px rgba(184, 115, 51, .16); }
.cq-champ-icone { position: relative; }
.cq-champ-icone i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--texte-3); font-size: 14px; pointer-events: none; }
.cq-champ-icone input { padding-left: 40px; }
.cq-champ-suffixe { position: relative; }
.cq-champ-suffixe input { padding-right: 52px; }
.cq-champ-suffixe span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; color: var(--texte-3); }

.cq-chercher {
  flex: 0 0 auto; height: 48px; padding: 0 24px; border: 0; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--ocre-fonce); color: #fff; font: 700 15px/1 var(--sans);
  box-shadow: 0 10px 22px -12px rgba(142, 86, 31, .8);
  transition: background .2s, transform .15s var(--hp-ease), box-shadow .2s;
}
.cq-chercher:hover { background: #74451A; box-shadow: 0 14px 26px -12px rgba(142, 86, 31, .9); }
.cq-chercher:active { transform: scale(.98); }
.cq-chercher:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; }

.cq-faits { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.cq-faits li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.cq-faits i { color: var(--ocre); font-size: 13px; }

/* ── Vitrine : les annonces récentes défilent, légende comprise ── */
.cq-vitrine {
  position: relative; aspect-ratio: 4 / 5; max-height: 640px; border-radius: var(--hp-radius-lg);
  overflow: hidden; background: var(--encre); box-shadow: var(--cq-ombre-2); isolation: isolate;
}
.cq-diapo { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--hp-ease), visibility 0s linear .9s; }
.cq-diapo.actif { opacity: 1; visibility: visible; transition: opacity .9s var(--hp-ease), visibility 0s; z-index: 1; }
.cq-diapo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); }
.cq-vitrine-anime .cq-diapo.actif img { animation: cqDerive 7.5s var(--hp-ease) both; }
@keyframes cqDerive { from { transform: scale(1.08) translate3d(1.2%, .6%, 0); } to { transform: scale(1.001); } }
.cq-diapo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,22,18,0) 45%, rgba(26,22,18,.55) 100%); pointer-events: none; }
.cq-diapo figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; }

.cq-vedette {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px 14px 18px; border-radius: 16px; text-decoration: none; color: var(--encre);
  background: rgba(255, 255, 255, .95); border: 1px solid rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
  transform: translateY(0); transition: transform .35s var(--hp-ease);
}
.cq-vedette:hover { transform: translateY(-3px); }
.cq-vedette:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cq-diapo:not(.actif) .cq-vedette { transform: translateY(12px); }
.cq-vedette-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cq-vedette-txt small { font-size: 11.5px; font-weight: 600; color: var(--ocre-fonce); }
.cq-vedette-txt strong { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-vedette-txt > span { font-size: 12.5px; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-vedette-txt > span i { color: var(--ocre); margin-right: 5px; font-size: 11px; }
.cq-vedette-prix { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; }
.cq-vedette-prix b { font: 700 18px/1.05 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--encre); white-space: nowrap; }
.cq-vedette-prix em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--texte-2); white-space: nowrap; }
.cq-vedette-fleche { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ocre-fonce); color: #fff; flex-shrink: 0; }
.cq-vedette-vide .cq-vedette-txt strong { white-space: normal; }

.cq-vitrine-points { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 3; display: flex; gap: 6px; }
.cq-vitrine-points button {
  flex: 1; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative;
}
.cq-vitrine-points button::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%);
  border-radius: 3px; background: rgba(255, 255, 255, .38);
}
.cq-vitrine-points button::after {
  content: ''; position: absolute; left: 0; top: 50%; height: 3px; transform: translateY(-50%);
  width: 0; border-radius: 3px; background: #fff;
}
.cq-vitrine-points button[aria-pressed="true"]::after { width: 100%; }
.cq-vitrine.en-lecture .cq-vitrine-points button[aria-pressed="true"]::after { animation: cqProgression var(--cq-duree, 6s) linear both; }
.cq-vitrine.en-pause .cq-vitrine-points button[aria-pressed="true"]::after { animation-play-state: paused; }
.cq-vitrine-points button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
@keyframes cqProgression { from { width: 0; } to { width: 100%; } }

/* ── Recherches rapides ── */
.cq-raccourcis { border-block: 1px solid var(--ligne); background: var(--surface); }
.cq-raccourcis-in { display: flex; align-items: center; gap: 18px; padding-block: 14px; }
.cq-raccourcis-lbl { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--encre); }
.cq-raccourcis-lbl i { color: var(--ocre); }
.cq-raccourcis-liste { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.cq-raccourcis-liste::-webkit-scrollbar { display: none; }
.cq-raccourcis-liste .hp-chip { white-space: nowrap; min-height: 40px; }

/* ═══ 2. CATALOGUE ═══════════════════════════════════════════════════════ */
.cg {
  display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: clamp(22px, 2.6vw, 34px); align-items: start;
  max-width: var(--ivp-max); margin: 0 auto; padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 32px) clamp(56px, 7vw, 96px);
  scroll-margin-top: 80px;
}

/* ── Panneau de filtres ── */
.cg-panneau {
  position: sticky; top: 88px; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--hp-radius);
  max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--cq-ombre-1);
  scrollbar-width: thin;
}
.cg-panneau-tete {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--ligne-claire);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.cg-panneau-tete h2 { font-family: var(--serif); font-weight: 400; font-size: 19px; margin: 0; display: flex; align-items: center; gap: 10px; color: var(--encre); margin-right: auto; }
.cg-panneau-tete h2 i { color: var(--ocre); font-size: .72em; }
.cg-raz { font-size: 13px; color: var(--ocre-fonce); text-decoration: none; font-weight: 600; white-space: nowrap; }
.cg-raz:hover { color: #74451A; }
.cg-fermer { display: none; }

.cg-bloc { border-bottom: 1px solid var(--ligne-claire); }
.cg-bloc > summary {
  cursor: pointer; list-style: none; padding: 14px 18px; font-size: 14px; font-weight: 700; color: var(--encre);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; user-select: none; min-height: 48px;
}
.cg-bloc > summary::-webkit-details-marker { display: none; }
.cg-bloc > summary:hover { background: var(--ivoire); }
.cg-bloc > summary:focus-visible { outline: 3px solid var(--ocre); outline-offset: -3px; }
.cg-bloc > summary i { font-size: 11px; transition: transform .25s var(--hp-ease); color: var(--texte-3); }
.cg-bloc[open] > summary i { transform: rotate(180deg); }
.cg-aide { margin: -4px 18px 10px; font-size: 12.5px; color: var(--texte-2); line-height: 1.5; }
.cg-controle { padding: 0 18px 16px; }
.cg-label { display: block; font-size: 13px; font-weight: 600; color: var(--texte-2); margin-bottom: 8px; }
.cg-aide-champ { margin: 6px 0 0; font-size: 12px; color: var(--texte-2); line-height: 1.45; }

.cg-panneau input[type=text], .cg-panneau input[type=date], .cg-panneau select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 10px; background: var(--surface);
  font: 500 14px/1.2 var(--sans); color: var(--encre); min-height: 44px;
}
.cg-panneau input::placeholder { color: var(--texte-3); }
.cg-panneau input:focus, .cg-panneau select:focus { outline: none; border-color: var(--ocre); box-shadow: 0 0 0 4px rgba(184, 115, 51, .16); }
.cg-paire { display: flex; align-items: center; gap: 8px; }
.cg-paire span { color: var(--texte-2); font-size: 13px; flex-shrink: 0; }
.cg-paire input { flex: 1 1 0; min-width: 0; width: auto; }
.cg-avec-suffixe { position: relative; display: flex; align-items: center; }
.cg-avec-suffixe input { padding-right: 48px; }
.cg-avec-suffixe span { position: absolute; right: 12px; font-size: 12px; color: var(--texte-2); pointer-events: none; }

.cg-segments { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-segment {
  position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; min-height: 40px;
  border: 1px solid var(--ligne); border-radius: 999px; font-size: 13.5px; cursor: pointer; background: var(--surface); color: var(--texte-2);
  transition: border-color .2s, color .2s, background .2s;
}
.cg-segment:hover { border-color: #CDBFAC; color: var(--encre); }
.cg-segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cg-segment.on, .cg-segment:has(input:checked) { background: var(--encre); border-color: var(--encre); color: var(--ivoire); font-weight: 600; }
.cg-segment:has(input:focus-visible) { outline: 3px solid var(--ocre); outline-offset: 2px; }

.cg-cases { display: flex; flex-direction: column; gap: 2px; }
.cg-cases.cg-scroll { max-height: 220px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.cg-case { display: flex; align-items: center; gap: 10px; padding: 6px 6px; cursor: pointer; font-size: 14px; color: var(--encre); border-radius: 8px; line-height: 1.35; min-height: 40px; }
.cg-case:hover { background: var(--ivoire); }
.cg-case input { accent-color: var(--ocre-fonce); width: 18px; height: 18px; flex-shrink: 0; margin: 0; }
.cg-case em { font-style: normal; color: var(--texte-2); font-size: .9em; font-variant-numeric: tabular-nums; }

.cg-panneau-pied { padding: 14px 18px; position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--ligne-claire); }
.cg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 12px 18px; min-height: 48px;
  border-radius: 12px; border: 0; background: var(--ocre-fonce); color: #fff; font: 700 15px/1 var(--sans);
  cursor: pointer; text-decoration: none; transition: background .2s;
}
.cg-btn:hover { background: #74451A; color: #fff; }
.cg-btn:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; }
.cg-btn.petit { width: auto; padding: 9px 14px; min-height: 40px; font-size: 13px; }

/* ── Barre des résultats ── */
.cg-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cg-compte { margin: 0; font-size: 15px; color: var(--texte-2); }
.cg-compte b { font: 700 24px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--encre); margin-right: 6px; }
.cg-compte span { color: var(--texte-2); }
.cg-tri { display: flex; align-items: center; gap: 10px; }
.cg-tri label { font-size: 13px; color: var(--texte-2); white-space: nowrap; }
.cg-tri select {
  padding: 0 36px 0 12px; height: 44px; border: 1px solid var(--ligne); border-radius: 10px; font: 500 14px/1 var(--sans); color: var(--encre);
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B6560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.cg-tri select:focus { outline: none; border-color: var(--ocre); box-shadow: 0 0 0 4px rgba(184, 115, 51, .16); }
.cg-ouvrir { display: none; }

.cg-avis {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; margin-bottom: 18px; font-size: 14px; line-height: 1.55;
  background: #FBF3E8; border: 1px solid #EBD6BC; color: #6B3F12;
}
.cg-avis i { margin-top: 3px; color: var(--ocre-fonce); }
.cg-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cg-pastille {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 38px; border-radius: 999px;
  background: #FBF3E8; border: 1px solid #EBD6BC; color: #6B3F12; font-size: 13px; text-decoration: none; font-weight: 600;
  transition: background .2s, border-color .2s, color .2s;
}
.cg-pastille:hover { background: var(--encre); border-color: var(--encre); color: var(--ivoire); }
.cg-pastille i { font-size: 11px; }

/* ── Grille et cartes ── */
.cg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: clamp(16px, 1.8vw, 22px); }
.cb {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--hp-radius); overflow: hidden;
  transition: transform .35s var(--hp-ease), box-shadow .35s var(--hp-ease), border-color .35s;
}
@media (prefers-reduced-motion: no-preference) {
  .cb { animation: cqCarte .7s var(--hp-ease) both; animation-delay: calc(var(--rang, 0) * 55ms); }
  @keyframes cqCarte { from { opacity: 0; transform: translateY(14px); } }
}
.cb:hover { transform: translateY(-5px); border-color: rgba(184, 115, 51, .45); box-shadow: var(--hp-shadow-hover); }
.cb-lien { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.cb-lien:focus-visible { outline: 3px solid var(--ocre); outline-offset: -3px; border-radius: var(--hp-radius); }
.cb-image { position: relative; aspect-ratio: 4 / 3; background: var(--cq-sable); overflow: hidden; }
.cb-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--hp-ease); }
.cb:hover .cb-image img { transform: scale(1.06); }
.cb-sans-photo { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--texte-2); font-size: 13px; }
.cb-sans-photo i { font-size: 30px; color: #BFAF98; }
.cb-etiquette {
  position: absolute; top: 12px; left: 12px; background: rgba(255, 255, 255, .95); color: var(--encre);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 5px 11px; border-radius: 999px;
}
.cb-vedette {
  position: absolute; top: 12px; right: 12px; background: var(--ocre-fonce); color: #fff; font-size: 11px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px;
}
.cb-corps { padding: 16px 18px 16px; display: flex; flex-direction: column; flex: 1; }
.cb-titre {
  font-family: var(--serif); font-weight: 400; font-size: 17.5px; line-height: 1.28; margin: 0 0 6px; color: var(--encre);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty;
}
.cb:hover .cb-titre { color: var(--ocre-fonce); }
.cb-lieu { margin: 0 0 12px; font-size: 13px; color: var(--texte-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-lieu i { color: var(--ocre); font-size: 11px; flex-shrink: 0; }
.cb-attributs { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--texte-2); }
.cb-attributs li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--ivoire); border: 1px solid var(--ligne-claire); }
.cb-attributs i { color: var(--texte-3); font-size: 11px; }
.cb-pied { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--ligne-claire); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cb-prix { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
/* Le prix se compose en sans à chasse fixe : en Marcellus, le « 1 » n'est qu'un
   trait et « 150 000 » se lisait « I50 000 ». */
.cb-prix b { font: 700 20px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--encre); }
.cb-prix span { font-size: 12.5px; color: var(--texte-2); font-weight: 600; }
.cb-prix em { font-style: normal; font-size: 12px; color: var(--texte-2); width: 100%; margin-top: 3px; }
.cb-voir { font-size: 13px; font-weight: 700; color: var(--ocre-fonce); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: gap .25s var(--hp-ease); }
.cb-voir i { font-size: 11px; }
.cb:hover .cb-voir { gap: 10px; }
.cb-note { margin: 0; font-size: 13px; color: var(--texte-2); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.cb-note i { color: var(--ocre); }
.cb-note b { color: var(--encre); font-variant-numeric: tabular-nums; }

/* ── Pagination et vide ── */
.cg-pages { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.cg-pages a, .cg-pages span {
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--encre);
  font-size: 14px; font-variant-numeric: tabular-nums; transition: border-color .2s, color .2s;
}
.cg-pages a:hover { border-color: var(--ocre); color: var(--ocre-fonce); }
.cg-pages .on { background: var(--encre); border-color: var(--encre); color: var(--ivoire); font-weight: 700; }
.cg-pages .cg-points { border: 0; background: none; color: var(--texte-2); min-width: 20px; }
.cg-neant {
  background: var(--surface); border: 1px dashed #D8CAB6; border-radius: var(--hp-radius-lg);
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px); text-align: center;
}
.cg-neant i { font-size: 34px; color: var(--ocre); margin-bottom: 18px; display: block; }
.cg-neant h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin: 0 0 10px; color: var(--encre); text-wrap: balance; }
.cg-neant p { color: var(--texte-2); font-size: 15px; line-height: 1.65; margin: 0 auto 22px; max-width: 54ch; text-wrap: pretty; }
.cg-neant .cg-btn { width: auto; display: inline-flex; padding-inline: 24px; }
.cg-voile { display: none; }

/* ═══ 3. GUIDE MÉTIER ═════════════════════════════════════════════════════ */
.cq-guide { background: var(--surface); border-top: 1px solid var(--ligne); padding: clamp(56px, 8vw, 104px) 0; }
.cq-guide-grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.cq-guide-tete { position: sticky; top: 100px; }
.cq-guide-tete h2 { font-family: var(--serif); font-weight: 400; color: var(--encre); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance; }
.cq-guide-tete p { color: var(--texte-2); font-size: 16px; line-height: 1.7; margin: 0 0 22px; max-width: 46ch; text-wrap: pretty; }
.cq-guide-liste { list-style: none; margin: 0; padding: 0; counter-reset: guide; }
.cq-guide-liste li { padding: 26px 0; border-top: 1px solid var(--cq-lin); }
.cq-guide-liste li:last-child { border-bottom: 1px solid var(--cq-lin); }
.cq-guide-liste h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.25; color: var(--encre); margin: 0 0 10px; text-wrap: balance; }
.cq-guide-liste p { margin: 0; color: var(--texte-2); font-size: 15.5px; line-height: 1.72; max-width: 64ch; text-wrap: pretty; }

/* ═══ 4. VILLES ═══════════════════════════════════════════════════════════ */
.cq-villes { padding: clamp(52px, 7vw, 88px) 0; }
.cq-villes .hp-ville { min-height: 88px; justify-content: center; }
.cq-villes .hp-ville span { color: var(--texte-2); font-variant-numeric: tabular-nums; }

/* ═══ 5. CE QUI A ÉTÉ VÉRIFIÉ (fond encre) ════════════════════════════════ */
.cq-verifs { background: var(--hp-dark); color: var(--ivoire); padding: clamp(56px, 8vw, 104px) 0; }
.cq-verifs-grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.cq-verifs h2 { font-family: var(--serif); font-weight: 400; color: var(--ivoire); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.cq-verifs-liste { list-style: none; margin: 0; padding: 0; }
.cq-verifs-liste li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid rgba(250, 246, 240, .12); }
.cq-verifs-liste li:last-child { border-bottom: 1px solid rgba(250, 246, 240, .12); }
.cq-verifs-liste i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: #E0A86D; background: rgba(184, 115, 51, .16); }
.cq-verifs-liste h3 { font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--ivoire); margin: 0 0 5px; line-height: 1.35; }
.cq-verifs-liste p { margin: 0; color: rgba(250, 246, 240, .78); font-size: 14.5px; line-height: 1.65; }

/* ═══ 6. FAQ ══════════════════════════════════════════════════════════════ */
.cq-faq { background: var(--surface); padding: clamp(56px, 8vw, 104px) 0; }
.cq-faq .hp-faq-intro h2 { margin-top: 0; text-wrap: balance; }
.cq-faq .hp-faq-intro a { color: var(--ocre-fonce); font-weight: 600; }

/* ═══ 7. TÉLÉPHONE ════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .cq-hero-grille { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
}
@media (max-width: 1000px) {
  .cg { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cg-resultats { order: 1; }
  .cg-panneau { order: 2; position: static; max-height: none; overflow: visible; }
  .cg-panneau-tete, .cg-panneau-pied { position: static; }

  /* Avec le script : les filtres deviennent un panneau glissant, ouvert par
     « Filtrer » qui reste à portée de pouce. Sans script, la règle ci-dessus
     suffit : le panneau reste sous les résultats. */
  .js .cg-ouvrir {
    display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px; border-radius: 999px;
    border: 1px solid var(--encre); background: var(--encre); color: var(--ivoire); font: 700 14px/1 var(--sans); cursor: pointer;
  }
  .js .cg-ouvrir[hidden] { display: inline-flex; }
  .js .cg-ouvrir:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; }
  .cg-ouvrir-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ocre); color: var(--encre); display: inline-grid; place-items: center; font-size: 12px; }
  .js .cg-panneau {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1200; max-height: min(88dvh, 88vh);
    overflow-y: auto; border-radius: 24px 24px 0 0; border: 0; box-shadow: 0 -24px 60px -20px rgba(26, 22, 18, .45);
    transform: translateY(104%); visibility: hidden;
    transition: transform .45s var(--hp-ease), visibility 0s linear .45s;
  }
  .js .cg-panneau.ouvert { transform: none; visibility: visible; transition: transform .45s var(--hp-ease), visibility 0s; }
  .js .cg-panneau-tete { position: sticky; top: 0; padding-top: 22px; }
  .js .cg-panneau-tete::before { content: ''; position: absolute; top: 9px; left: 50%; width: 42px; height: 4px; border-radius: 4px; background: #D8CAB6; transform: translateX(-50%); }
  .js .cg-panneau-pied { position: sticky; bottom: 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .js .cg-fermer {
    display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 50%;
    background: transparent; color: var(--encre); font-size: 18px; cursor: pointer;
  }
  .js .cg-fermer:hover { background: var(--ivoire); }
  .js .cg-voile { display: block; position: fixed; inset: 0; z-index: 1190; background: rgba(26, 22, 18, .5); opacity: 0; transition: opacity .35s; pointer-events: none; }
  .js .cg-voile.visible { opacity: 1; pointer-events: auto; }
  .js .cg-voile[hidden] { display: block; }
  /* Panneau ouvert : le chat et le retour en haut ne couvrent plus ses derniers réglages. */
  .cg-filtres-ouverts #imvcFab, .cg-filtres-ouverts #imvcInvite, .cg-filtres-ouverts .hp-top { visibility: hidden !important; opacity: 0 !important; }
  .cq-guide-grille, .cq-verifs-grille { grid-template-columns: minmax(0, 1fr); }
  .cq-guide-tete { position: static; }
}
@media (max-width: 860px) {
  .cq-hero-grille { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .cq-titre { max-width: 20ch; }
  .cq-vitrine { aspect-ratio: 16 / 11; max-height: 440px; order: -1; }
  .cq-hero-texte { order: 0; }
}
@media (max-width: 620px) {
  .cq-hero { padding-top: 8px; }
  /* La vitrine reste en tête, mais courte : le titre et la recherche entrent dans le premier écran. */
  .cq-vitrine { aspect-ratio: 16 / 10; max-height: 250px; border-radius: 20px; }
  .cq-diapo figcaption { left: 10px; right: 10px; bottom: 10px; }
  .cq-vedette { padding: 10px 12px 10px 14px; border-radius: 14px; }
  .cq-vedette-txt small { display: none; }
  .cq-titre { font-size: clamp(1.9rem, 1.4rem + 2.6vw, 2.3rem); margin-bottom: 12px; }
  .cq-sous { font-size: .98rem; margin-bottom: 20px; }
  .cq-fil { margin-bottom: 12px; }
  .cq-champ, .cq-champ-large { flex: 1 1 100%; }
  .cq-champs .cq-champ:has(input[type=date]) { flex: 1 1 calc(50% - 5px); }
  .cq-chercher { flex: 1 1 100%; }
  .cq-bascule { display: flex; width: 100%; }
  .cq-bascule-opt { flex: 1; }
  .cq-bascule-opt span { width: 100%; justify-content: center; padding: 0 8px; }
  .cq-raccourcis-in { flex-direction: column; align-items: stretch; gap: 10px; }
  .cg-grille { grid-template-columns: minmax(0, 1fr); }
  .cg-barre { align-items: center; }
  .cg-tri label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cq-vedette-txt strong { font-size: 15.5px; }
  .cq-vedette-prix b { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cq-vitrine-anime .cq-diapo.actif img { animation: none; }
  .cq-diapo, .cq-diapo.actif { transition: none; }
}

/* ═══ 8. CONTACT ══════════════════════════════════════════════════════════ */
.ct-hero { padding: clamp(18px, 3vw, 40px) 0 clamp(24px, 3vw, 40px); }
.ct-hero-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ct-hero .cq-titre { max-width: 14ch; }

.ct-canaux { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; }
.ct-canal { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--cq-lin); text-decoration: none; color: inherit; }
.ct-canaux li:last-child .ct-canal { border-bottom: 1px solid var(--cq-lin); }
.ct-canal-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--ligne); color: var(--ocre-fonce); font-size: 18px; transition: background .25s, color .25s, border-color .25s; }
.ct-canal-txt { min-width: 0; }
.ct-canal-txt strong { display: block; font-size: 15.5px; color: var(--encre); font-weight: 700; margin-bottom: 2px; }
.ct-canal-txt span { display: block; font-size: 14px; color: var(--texte-2); line-height: 1.5; overflow-wrap: anywhere; }
.ct-canal-fleche { color: var(--texte-3); font-size: 13px; transition: transform .25s var(--hp-ease), color .25s; }
a.ct-canal:hover .ct-canal-ico { background: var(--ocre-fonce); border-color: var(--ocre-fonce); color: #fff; }
a.ct-canal:hover .ct-canal-fleche { transform: translateX(4px); color: var(--ocre-fonce); }
a.ct-canal:focus-visible { outline: 3px solid var(--ocre); outline-offset: 4px; border-radius: 12px; }
.ct-canal-conseil strong { color: var(--ocre-fonce); }

.ct-carte {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--hp-radius-lg);
  padding: clamp(22px, 3vw, 38px); box-shadow: var(--cq-ombre-2); scroll-margin-top: 96px;
}
.ct-carte h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); color: var(--encre); margin: 0 0 6px; letter-spacing: -.01em; }
.ct-carte-sous { margin: 0 0 24px; color: var(--texte-2); font-size: 15px; line-height: 1.6; }

.ct-sujets { border: 0; padding: 0; margin: 0 0 20px; }
.ct-sujets legend { font-size: 13px; font-weight: 600; color: var(--texte-2); margin-bottom: 10px; padding: 0; }
.ct-sujets-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-sujet { position: relative; }
.ct-sujet input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ct-sujet span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--ligne); background: var(--surface); font-size: 14px; color: var(--encre); cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.ct-sujet span i { color: var(--ocre); font-size: 13px; transition: color .2s; }
.ct-sujet:hover span { border-color: #CDBFAC; }
.ct-sujet input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--ivoire); font-weight: 600; }
.ct-sujet input:checked + span i { color: #E0A86D; }
.ct-sujet input:focus-visible + span { outline: 3px solid var(--ocre); outline-offset: 2px; }

.ct-rangee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ct-champ { margin-bottom: 16px; position: relative; }
.ct-champ label { display: block; font-size: 13px; font-weight: 600; color: var(--texte-2); margin-bottom: 7px; }
.ct-champ label abbr { color: #A4361F; text-decoration: none; }
.ct-input {
  width: 100%; min-height: 50px; padding: 12px 15px; border: 1px solid var(--ligne); border-radius: 12px;
  background: var(--ivoire); font: 500 15px/1.4 var(--sans); color: var(--encre);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea.ct-input { min-height: 150px; resize: vertical; line-height: 1.6; }
.ct-input::placeholder { color: var(--texte-3); }
.ct-input:focus { outline: none; background: var(--surface); border-color: var(--ocre); box-shadow: 0 0 0 4px rgba(184, 115, 51, .16); }
.ct-input.is-err { border-color: #A4361F; background: #FDF4F1; }
.ct-input.is-ok { border-color: #2F6B4F; }
.ct-err { display: none; margin-top: 7px; font-size: 13px; color: #A4361F; font-weight: 600; }
.ct-err.show { display: flex; align-items: center; gap: 6px; }
.ct-err.show::before { content: '\f06a'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; }
.ct-compteur { margin-top: 6px; font-size: 12.5px; color: var(--texte-2); text-align: right; font-variant-numeric: tabular-nums; }
.ct-compteur.court { color: #A4361F; }

.ct-connecte { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #EEF5F1; color: #1F5139; font-size: 14px; margin: 4px 0 18px; }
.ct-alerte { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }
.ct-alerte i { margin-top: 3px; }
.ct-alerte.ok { background: #EEF5F1; border: 1px solid #C5DDD0; color: #1F5139; }
.ct-alerte.ko { background: #FDF4F1; border: 1px solid #EFC9BD; color: #7E2A18; }

.ct-envoyer {
  width: 100%; min-height: 54px; border: 0; border-radius: 14px; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ocre-fonce); color: #fff; font: 700 16px/1 var(--sans);
  box-shadow: 0 12px 26px -14px rgba(142, 86, 31, .9); transition: background .2s, transform .15s var(--hp-ease);
}
.ct-envoyer:hover { background: #74451A; }
.ct-envoyer:active { transform: scale(.99); }
.ct-envoyer:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; }
.ct-envoyer .sp { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: ctTourne .7s linear infinite; }
.ct-envoyer.loading { pointer-events: none; opacity: .85; }
.ct-envoyer.loading .sp { display: inline-block; }
.ct-envoyer.loading .lbl-ico { display: none; }
@keyframes ctTourne { to { transform: rotate(360deg); } }
.ct-mention { margin: 14px 0 0; font-size: 13px; color: var(--texte-2); line-height: 1.55; text-align: center; }
.ct-mention a { color: var(--ocre-fonce); }

.ct-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 1300; transform: translate(-50%, 24px); opacity: 0; visibility: hidden;
  display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 14px; background: var(--encre); color: var(--ivoire);
  font-size: 14.5px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); transition: transform .35s var(--hp-ease), opacity .35s, visibility 0s linear .35s;
  max-width: calc(100vw - 32px);
}
.ct-toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .35s var(--hp-ease), opacity .35s, visibility 0s; }
.ct-toast i { color: #8FD1AE; }
.ct-toast.erreur { background: #7E2A18; }
.ct-toast.erreur i { color: #FFD9CF; }

.ct-bureau { padding: clamp(52px, 7vw, 92px) 0; }
.ct-bureau-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--cq-lin); }
.ct-bureau-item { padding: 26px clamp(0px, 2vw, 28px) 26px 0; }
.ct-bureau-item + .ct-bureau-item { border-left: 1px solid var(--cq-lin); padding-left: clamp(18px, 2.4vw, 32px); }
.ct-bureau-item h3 { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--encre); margin: 0 0 8px; display: flex; align-items: center; gap: 9px; }
.ct-bureau-item h3 i { color: var(--ocre); }
.ct-bureau-item p { margin: 0; color: var(--texte-2); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.ct-bureau-item a { color: var(--encre); font-weight: 600; }
.ct-bureau-item a:hover { color: var(--ocre-fonce); }

@media (max-width: 960px) {
  .ct-hero-grille { grid-template-columns: minmax(0, 1fr); }
  .ct-bureau-grille { grid-template-columns: minmax(0, 1fr); }
  .ct-bureau-item, .ct-bureau-item + .ct-bureau-item { border-left: 0; padding: 20px 0; }
  .ct-bureau-item + .ct-bureau-item { border-top: 1px solid var(--cq-lin); }
}
@media (max-width: 620px) {
  .ct-rangee { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ct-canal { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; }
  .ct-canal-ico { width: 44px; height: 44px; }
}

/* ─── Affaire conclue : « Vendu » / « Loué », 3 jours au plus ───────────────── */
.cb--conclu .cb-image img { filter: saturate(.35) brightness(.92); }
.cb--conclu .cb-prix { opacity: .55; }
.cb-conclu { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; background: rgba(26, 22, 18, .86); color: #faf6f0; font: 700 14px/1 'Instrument Sans', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.cb-conclu i { color: #d9a46a; }

/* Lot de plusieurs exemplaires : « 4 restants sur 5 » — l'annonce reste ouverte tant qu'il en reste un */
.cb-stock { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: rgba(250, 246, 240, .96); color: #2b2620; font: 700 12px/1 'Instrument Sans', system-ui, sans-serif; box-shadow: 0 6px 16px -8px rgba(26, 22, 18, .5); }
.cb-stock i { color: #8a5d2c; }

/* ── Contact sur téléphone : sujets en grille de tuiles égales (au lieu de pastilles de largeurs inégales) ── */
@media (max-width: 560px) {
  .ct-sujets-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ct-sujet span { display: flex; width: 100%; min-height: 54px; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.25; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; }
  .ct-sujet { display: flex; }
  .ct-sujet span { flex: 1; }
  .ct-sujet span i { font-size: 15px; }
  .ct-sujet:last-child:nth-child(odd) { grid-column: 1 / -1; }
}