.cooperativemaker-page {
  margin: 2rem auto;
}

.cooperativemaker-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 300px));
  justify-content: start;
  /* stretch, not start: the cards are built to one height (clamped title and
     description) and a start-aligned row would undo that on every row whose
     tallest card sets the track. */
  align-items: stretch;
}

/*
 * Home "Les coopératives" section: the theme renders .coop__media as an <a>,
 * which is inline by default, so the theme's `aspect-ratio:3/2.3` is ignored
 * and the image keeps its natural height — it fills the whole card and pushes
 * .coop__body (the name + description) below the card's overflow:hidden edge,
 * hiding the cooperative name. Forcing the media to a block restores the crop.
 */
.coop__media {
  display: block;
}

.cooperativemaker-card {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  max-width: 300px;
  /* One card, one height. The names run from « Saya » to « Association Dar Al
     Ma'allama pour le Développement et la Revitalisation du Patrimoine » and
     the descriptions from nothing at all to six hundred characters, so a card
     that simply wrapped its own text made every row a different height. The
     name and the description are clamped AND given the height of their clamp
     below, and the column layout here puts « Lire la suite » on the same line
     across the whole grid. */
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/*
 * contain, not cover: 186 of the 195 cooperative files are 250×250 squares and
 * most of them are logos, so a 3/2 crop cuts the top and bottom off a wordmark
 * — the MAASSOULA bee, the Afaq wordmark, ENNAJAH's name were all losing their
 * ends. The cream ground and the inset make the letterboxing read as a frame.
 * The theme's own cooperative cards (.coop__media, .ccoop-card__media,
 * .txcoop__media) were changed the same way in the same pass.
 */
.cooperativemaker-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  padding: 12px;
  background: #FBF7F0;
}

.cooperativemaker-card__media {
  display: block;
}

.cooperativemaker-card__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* The reserved height is computed from --lh rather than written out, because
   Arabic keeps its own leading: `body.lang-rtl h1,h2,h3,h4` sets 1.45 and
   `body.lang-rtl .twiza-home p` sets 1.85, both of which outrank the value
   here. Hard-coding the Latin leading in the height cropped the Arabic cards
   through the middle of their last line. --lh follows those rules instead. */
.cooperativemaker-card__body h2 {
  --lh: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: .75rem 0 .5rem;
  font-size: 1.25rem;
  line-height: var(--lh);
  height: calc(2 * var(--lh) * 1em);
}

body.lang-rtl .cooperativemaker-card__body h2 { --lh: 1.45; }

.cooperativemaker-card__body h2 a {
  color: inherit;
  text-decoration: none;
}

/* The name is the card's only link in the accessibility tree; stretching it
   over the whole card makes the photo, the text and « Lire la suite » clickable
   without repeating the same destination three times for a screen reader. */
.cooperativemaker-card__body h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cooperativemaker-card__desc {
  --lh: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: .92rem;
  line-height: var(--lh);
  height: calc(3 * var(--lh) * 1em);
  color: var(--muted, #7C7167);
}

body.lang-rtl .cooperativemaker-card__desc { --lh: 1.85; }

.cooperativemaker-card__more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  padding-top: .85rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--green-deep, #3C7146);
}

.cooperativemaker-card__more .cl-arr {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--ease, cubic-bezier(.4, .16, .18, 1));
}

.cooperativemaker-card:hover .cooperativemaker-card__more .cl-arr {
  transform: translateX(3px);
}

body.lang-rtl .cooperativemaker-card:hover .cooperativemaker-card__more .cl-arr {
  transform: scaleX(-1) translateX(3px);
}

.cooperativemaker-territoire,
.product__coop-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  background: #2f6b45;
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  padding: .3rem .65rem;
}

.product__coop-badge {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  z-index: 2;
  text-decoration: none;
}

.cooperativemaker-description {
  margin: 1rem 0 2rem;
}

/* The cooperative's own page shows the same file large, and `cover` under a
   420px cap cut the logo there too. */
.cooperativemaker-detail__image {
  display: block;
  width: min(100%, 720px);
  max-height: 420px;
  object-fit: contain;
  object-position: left center;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.cooperativemaker-products {
  display: grid;
  gap: 1.25rem;
  /* Fixed max track width so a single product never stretches to the full
     row width and upscales its image into a blurry, distorted thumbnail. */
  grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
  justify-content: start;
}

.cooperativemaker-product {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.cooperativemaker-product a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.cooperativemaker-product img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #f4efe7;
}

.cooperativemaker-product span {
  display: block;
  padding: .8rem;
  font-weight: 600;
}

/* Product page: "made by cooperative" badge under the add-to-cart form */
.cooperativemaker-pbadge {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.cooperativemaker-pbadge:hover {
  border-color: rgba(47, 107, 69, .45);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
  transform: translateY(-1px);
}

.cooperativemaker-pbadge__logo {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #f4efe7;
}

.cooperativemaker-pbadge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.cooperativemaker-pbadge__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #2f6b45;
}

.cooperativemaker-pbadge__name {
  font-size: 1rem;
  font-weight: 700;
  color: #2b251e;
}

.cooperativemaker-pbadge__arrow {
  width: 18px;
  height: 18px;
  margin-inline-start: auto;
  flex: 0 0 auto;
  color: #2f6b45;
}

/* =====================================================================
   ARTISANS & COOPÉRATIVES — landing sections on the list page.
   Uses the theme's :root tokens (loaded globally via twiza.3.css) and its
   .twiza-home design system; everything below is scoped under .coop-landing.
   ===================================================================== */

/* neutralise the default PS content "card" frame so full-bleed sections are clean */
#module-cooperativemaker-list #content.page-content{
  padding:0; margin:0; border:0; border-radius:0; box-shadow:none; background:transparent; overflow:visible;
}
#module-cooperativemaker-list #main{ margin:0; }
#module-cooperativemaker-list #wrapper{ padding-top:0; }

.coop-landing{ margin:0; }
.coop-landing .cl-ic{ width:100%; height:100%; display:block; }
.coop-landing .cl-arr{ width:18px; height:18px; flex:none; }

/* diamond eyebrow ornament (CSS-drawn khatem; overrides the theme's line eyebrow).
   A bare ❖ glyph renders as tofu in the site fonts, so we draw a rotated square. */
.coop-landing .eyebrow.cl-diamond{ gap:12px; }
.coop-landing .eyebrow.cl-diamond::before,
.coop-landing .eyebrow.cl-diamond.center::after{
  content:""; width:7px; height:7px; background:var(--orange); border-radius:1px;
  transform:rotate(45deg); flex:none;
}

/* ---------- 1 · HÉRO ---------- */
.coop-landing .cl-hero{ background:var(--cream); overflow:hidden; padding-top:0; }
.coop-landing .cl-hero__grid{
  width:min(var(--maxw), 100% - var(--gutter)*2); margin-inline:auto;
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,4vw,56px);
  align-items:center; min-height:clamp(520px,72vh,700px); padding-block:clamp(40px,5vw,72px);
}
.coop-landing .cl-hero__text h1{
  font-size:clamp(38px,4.8vw,64px); line-height:1.04; letter-spacing:-.02em;
  margin:20px 0 0; text-wrap:balance;
}
.coop-landing .cl-hero__text h1 em{ font-style:normal; color:var(--orange-deep); }
.coop-landing .cl-hero__prose{ margin-top:26px; max-width:520px; display:grid; gap:16px; }
.coop-landing .cl-hero__prose p{ color:var(--muted); font-size:17px; }
.coop-landing .cl-hero__prose b{ color:var(--ink); font-weight:700; }
.coop-landing .cl-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.coop-landing .cl-hero__cta .btn{ gap:11px; }
.coop-landing .cl-hero__media{ position:relative; }
/* The frame is landscape and the slot is filled from the back office, where the
   photographs that arrive are portrait — phone photographs of people at work.
   Cover then crops the height, and a centred crop takes it off the top, which
   is exactly where the faces are: the first real photograph put in here lost
   one woman's head entirely. 12% keeps the heads and still leaves the hands
   and the thread they are spinning above the stats card that overlaps the
   bottom of this frame. */
.coop-landing .cl-hero__media > img{
  display:block; width:100%; height:100%; min-height:360px; max-height:600px;
  object-fit:cover; object-position:center 12%;
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
}
.coop-landing .cl-hero__stats{
  position:relative; margin-top:-46px; margin-inline:auto; width:min(100%,560px);
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-lift);
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:22px 14px;
}
.coop-landing .cl-stat{ text-align:center; padding:4px 6px; position:relative; }
.coop-landing .cl-stat + .cl-stat::before{
  content:""; position:absolute; left:0; top:14%; height:72%; width:1px; background:var(--line);
}
.coop-landing .cl-stat__ic{ display:block; width:26px; height:26px; margin:0 auto 8px; color:var(--orange-deep); }
.coop-landing .cl-stat b{ display:block; font-family:var(--font-head); font-size:clamp(20px,2.2vw,28px); color:var(--ink); line-height:1; }
.coop-landing .cl-stat__l{ display:block; margin-top:6px; font-size:11.5px; line-height:1.35; color:var(--muted); }

/* ---------- 2 · POURQUOI INVENTER TWIZA ---------- */
.coop-landing .cl-why .section-head h2 em{ font-style:normal; color:var(--orange-deep); }

/* value-chain band */
.coop-landing .cl-band{
  position:relative; margin-top:clamp(34px,4vw,54px); border-radius:var(--radius-lg); overflow:hidden;
  display:grid; grid-template-columns:1fr 1.35fr 1fr; gap:0; color:#fff; isolation:isolate;
  background:#241c15;
}
.coop-landing .cl-band::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--band) center/cover no-repeat;
  filter:grayscale(.2) brightness(.5);
}
.coop-landing .cl-band__side{
  background:rgba(20,15,11,.62); backdrop-filter:blur(2px);
  padding:clamp(22px,2.4vw,34px); display:flex; flex-direction:column; justify-content:center;
}
.coop-landing .cl-band__side--l{ box-shadow:inset -1px 0 0 rgba(255,255,255,.08); }
.coop-landing .cl-band__side--r{ box-shadow:inset 1px 0 0 rgba(255,255,255,.08); text-align:right; }
/* Everything in this band that is not one of the two prices was set between
   11px and 13.5px, at 70–85% white, over a photograph. The prices read; the
   sentences that explain them did not. Every one of those is bigger here, and
   closer to full white — the dimming was decoration on text that has to be
   read. The two amounts are untouched: they were never the problem. */
.coop-landing .cl-band__label{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.92); }
.coop-landing .cl-band__sub{ margin-top:12px; font-size:16px; line-height:1.6; color:rgba(255,255,255,.88); }
.coop-landing .cl-band__amount{ margin-top:14px; font-family:var(--font-head); font-size:clamp(30px,3.4vw,42px); color:var(--orange); line-height:1; }
.coop-landing .cl-band__amount--big{ font-size:clamp(40px,4.6vw,60px); }
.coop-landing .cl-band__note{ margin-top:8px; font-size:15px; color:rgba(255,255,255,.88); }
.coop-landing .cl-band__center{ padding:clamp(24px,2.6vw,38px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; text-align:center; }
.coop-landing .cl-band__ctitle{ font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.95); }
.coop-landing .cl-flow{ display:flex; align-items:flex-start; justify-content:center; gap:5px; flex-wrap:wrap; }
/* the step widens with its label, or four 13.5px captions wrap to three lines */
.coop-landing .cl-flow__step{ display:flex; flex-direction:column; align-items:center; gap:8px; width:92px; }
.coop-landing .cl-flow__ic{ width:28px; height:28px; color:#fff; }
.coop-landing .cl-flow__t{ font-size:13.5px; line-height:1.35; color:rgba(255,255,255,.92); }
.coop-landing .cl-flow__arr{ width:16px; height:16px; color:rgba(255,255,255,.6); margin-top:4px; }
.coop-landing .cl-flow__arr .cl-arr{ width:16px; height:16px; }
.coop-landing .cl-band__cnote{
  background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:14px 22px; font-size:16px;
}
.coop-landing .cl-band__cnote span{ color:rgba(255,255,255,.95); }
.coop-landing .cl-band__cnote strong{ display:block; color:var(--orange); margin-top:2px; }

/* problem cards */
.coop-landing .cl-why__cardshead{
  text-align:center; font-family:var(--font-head); font-weight:600;
  font-size:clamp(20px,2.3vw,28px); color:var(--ink); margin:clamp(40px,4.6vw,64px) 0 24px;
}
.coop-landing .cl-why__cardshead em{ font-style:normal; color:var(--orange-deep); }
.coop-landing .cl-probs{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.coop-landing .cl-prob{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column;
}
.coop-landing .cl-prob__head{ display:flex; align-items:center; gap:12px; padding:18px 18px 0; }
.coop-landing .cl-prob__ic{
  flex:none; width:42px; height:42px; border-radius:12px; padding:10px; color:#fff;
  background:var(--orange); box-shadow:0 8px 18px -8px var(--orange);
}
.coop-landing .cl-prob h4{ font-family:var(--font-head); font-weight:600; font-size:15.5px; line-height:1.2; color:var(--ink); margin:0; }
.coop-landing .cl-prob p{ padding:14px 18px 18px; font-size:13.5px; line-height:1.6; color:var(--muted); margin:0; flex:1; }
/* A ratio, not a fixed 120px height. The strip is a band at the foot of the
   card and stays one — but a fixed height gets proportionally thinner as the
   card widens, so the same photograph was cropped hardest on a tablet, where
   two cards share the row and each is widest. 16/9 crops the same amount at
   every width, and at desktop it is 178px where it was 120: a portrait upload
   shows 43% of its height instead of 30%.
   The focal point sits above centre because these are photographs of people
   working — hands and faces are in the upper half, and a centred crop cut the
   fingers off the spinner in the first card.
   The ratio is carried by the IMG, not by its wrapper: the card is a column
   flex container, the wrapper's height is indefinite there, and an
   `aspect-ratio` on it is ignored — the image then falls back to its natural
   height and a portrait upload turns the card into a 640px tower. */
.coop-landing .cl-prob__photo{ margin-top:auto; }
.coop-landing .cl-prob__photo img{ width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; object-position:center 38%; filter:grayscale(1); display:block; }

/* bottom banner */
.coop-landing .cl-whyban{
  margin-top:clamp(34px,4vw,52px); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(20px,3vw,40px);
}
.coop-landing .cl-whyban__pill{
  display:inline-flex; align-items:center; gap:14px; background:var(--green-deep); color:#fff;
  border-radius:100px; padding:16px 26px; max-width:420px;
}
.coop-landing .cl-whyban__pilic{ flex:none; width:26px; height:26px; color:var(--orange); }
.coop-landing .cl-whyban__pill span{ font-family:var(--font-head); font-weight:600; font-size:15px; line-height:1.25; }
.coop-landing .cl-whyban__pill em{ font-style:normal; display:block; color:#ffd9b0; }
.coop-landing .cl-whyban__txt{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:14.5px; line-height:1.5; }
.coop-landing .cl-whyban__hic{ flex:none; width:34px; height:34px; color:var(--green-deep); }
.coop-landing .cl-whyban .tm-cta{ padding:15px 24px; }

/* ---------- 3 · NOTRE RÉPONSE ---------- */
.coop-landing .cl-rep{ background:var(--white); }
.coop-landing .cl-rep__h{ font-size:clamp(34px,4.4vw,58px); }
.coop-landing .cl-rep__h em{ font-style:normal; color:var(--orange-deep); }
.coop-landing .cl-rep__sub{ font-family:var(--font-head); font-size:clamp(20px,2.2vw,28px); color:var(--ink)!important; margin-top:14px!important; }
.coop-landing .cl-rep__p{ max-width:760px; margin-inline:auto; }
.coop-landing .cl-rep__p b{ color:var(--ink); font-weight:700; }
/* Optional section illustration. Never cropped — these arrive as finished
   compositions, so a ratio would cut a label off; the width is capped
   instead, which is what keeps a wide picture from dwarfing the pillars. */
.coop-landing .cl-rep__art{ max-width:900px; margin:clamp(30px,3.4vw,44px) auto 0; }
.coop-landing .cl-rep__art img{ display:block; width:100%; height:auto; border-radius:var(--radius); }

.coop-landing .cl-pillars{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:clamp(38px,4vw,56px); }
.coop-landing .cl-pillar{
  background:var(--cream); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:26px 18px; text-align:center;
}
.coop-landing .cl-pillar__ic{
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%; padding:17px;
  background:var(--orange-tint); color:var(--ink); display:block;
}
.coop-landing .cl-pillar h4{ font-family:var(--font-head); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:14px; color:var(--ink); margin:0; }
.coop-landing .cl-pillar h4::after{ content:""; display:block; width:26px; height:2px; background:var(--orange); margin:10px auto 0; border-radius:2px; }
.coop-landing .cl-pillar p{ margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--muted); }

.coop-landing .cl-repfoot{
  margin-top:clamp(34px,4vw,52px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(20px,3vw,40px);
}
.coop-landing .cl-repfoot__col{ display:flex; flex-direction:column; gap:22px; }
.coop-landing .cl-repfoot__col:last-child{ align-items:flex-end; text-align:right; }
.coop-landing .cl-mini{ display:flex; align-items:center; gap:12px; max-width:230px; }
.coop-landing .cl-repfoot__col:last-child .cl-mini{ flex-direction:row-reverse; text-align:right; }
.coop-landing .cl-mini__ic{ flex:none; width:40px; height:40px; padding:8px; border-radius:50%; background:var(--green-soft); color:var(--green-deep); }
.coop-landing .cl-mini span:last-child{ font-size:13.5px; line-height:1.4; color:var(--ink); }
.coop-landing .cl-repfoot__cta{ padding:17px 30px; }

/* ---------- 4 · NOS CRÉATEURS (chapeau) + liste ---------- */
.coop-landing .cl-crea .section-head h2 em{ font-style:normal; color:var(--orange-deep); }
/* narrower than the réponse artwork above: this one is a photograph under a
   centred chapeau, and at 900px it out-shouted the heading it illustrates. */
.coop-landing .cl-crea__art{ max-width:620px; margin:clamp(26px,3vw,38px) auto 0; }
.coop-landing .cl-crea__art img{ display:block; width:100%; height:auto; border-radius:var(--radius); }
.coop-landing .cl-crea__list{ margin-top:clamp(30px,3.4vw,48px); }
.coop-landing .cl-crea__list .cooperativemaker-grid{
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); justify-content:stretch;
}
/* Four across, not five: a page holds twelve cards, and twelve over five
   columns ends on a row of two with three holes beside it. 12 divides by the
   1, 2, 3 and 4 columns every other width gives, so every row stays full. */
@media (min-width:1080px){
  .coop-landing .cl-crea__list .cooperativemaker-grid{ grid-template-columns:repeat(4,1fr); }
}
.coop-landing .cl-crea__list .cooperativemaker-card{ max-width:none; }
.coop-landing .cl-crea__empty{ text-align:center; color:var(--muted); }

/* Pager. There are ~190 active cooperatives: the section used to print all of
   them, so the landing ended in a wall of cards nobody scrolled to the foot of.
   Twelve a page — three rows of four at the wide breakpoint. */
.coop-landing .cl-pager{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:10px; margin-top:clamp(28px,3vw,42px);
}
.coop-landing .cl-pager__nav{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border:1px solid var(--line); border-radius:999px;
  background:var(--white); color:var(--ink); font-size:14.5px; font-weight:600;
  text-decoration:none; transition:border-color .2s var(--ease), color .2s var(--ease);
}
.coop-landing .cl-pager__nav:hover{ border-color:var(--green); color:var(--green-deep); }
.coop-landing .cl-pager__nav.is-off{ opacity:.35; pointer-events:none; }
.coop-landing .cl-pager__nav--prev .cl-arr{ transform:scaleX(-1); }
.coop-landing .cl-pager__pages{
  display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0;
}
.coop-landing .cl-pager__p{
  display:grid; place-items:center; min-width:40px; height:40px; padding:0 10px;
  border-radius:999px; font-size:14.5px; font-weight:600;
  color:var(--ink); text-decoration:none;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.coop-landing .cl-pager__p:hover{ background:var(--green-soft); color:var(--green-deep); }
.coop-landing .cl-pager__p.is-current{ background:var(--green-deep); color:var(--white); }
.coop-landing .cl-pager__gap{ color:var(--muted); padding:0 2px; }
.coop-landing .cl-pager__count{
  margin:14px 0 0; text-align:center; color:var(--muted); font-size:14px;
}
@media (max-width:560px){
  .coop-landing .cl-pager__nav span{ display:none; }
  .coop-landing .cl-pager__nav{ padding:11px 14px; }
}

/* ---------- RTL ---------- */
body.lang-rtl .coop-landing .cl-arr{ transform:scaleX(-1); }
/* …except the pager's « précédent », which points back toward the start of the
   row — and in Arabic the start is on the right, where the unflipped arrow
   already points. */
body.lang-rtl .coop-landing .cl-pager__nav--prev .cl-arr{ transform:none; }
body.lang-rtl .coop-landing .cl-band__side--r{ text-align:left; }
body.lang-rtl .coop-landing .cl-repfoot__col:last-child{ align-items:flex-start; text-align:left; }
body.lang-rtl .coop-landing .cl-repfoot__col:last-child .cl-mini{ flex-direction:row; text-align:left; }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .coop-landing .cl-hero__grid{ grid-template-columns:1fr; }
  .coop-landing .cl-hero__media > img{ max-height:440px; }
  .coop-landing .cl-band{ grid-template-columns:1fr; }
  .coop-landing .cl-band__side--r{ text-align:left; }
  .coop-landing .cl-probs{ grid-template-columns:repeat(2,1fr); }
  .coop-landing .cl-pillars{ grid-template-columns:repeat(3,1fr); }
  .coop-landing .cl-whyban,
  .coop-landing .cl-repfoot{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .coop-landing .cl-repfoot__col{ align-items:center!important; text-align:center!important; }
  .coop-landing .cl-repfoot__col .cl-mini{ flex-direction:row!important; text-align:center; }
  .coop-landing .cl-whyban__txt{ justify-content:center; }
}
@media (max-width:600px){
  .coop-landing .cl-hero__stats{ grid-template-columns:repeat(2,1fr); gap:14px 6px; }
  .coop-landing .cl-stat:nth-child(3)::before{ display:none; }
  .coop-landing .cl-probs{ grid-template-columns:1fr; }
  .coop-landing .cl-pillars{ grid-template-columns:repeat(2,1fr); }
  .coop-landing .cl-whyban__pill{ max-width:none; }
}

/* =====================================================================
   UNE COOPÉRATIVE — the detail page.
   Same recipe as .coop-landing above: the theme's :root tokens and its
   .twiza-home design system, everything page-specific scoped to
   .coop-detail. Three full-bleed bands; RTL at the foot.
   ===================================================================== */

/* Classic wraps page_content in `#content.page-content.card`, a bordered white
   panel — the full-bleed bands inside it drew a box within a box. Same
   neutralisation the list page needs. */
#module-cooperativemaker-detail #content.page-content{
  padding:0; margin:0; border:0; border-radius:0; box-shadow:none; background:transparent; overflow:visible;
}
#module-cooperativemaker-detail #main{ margin:0; }
#module-cooperativemaker-detail #wrapper{ padding-top:0; }
/* the layout still emits the (now empty) footer element */
#module-cooperativemaker-detail .page-footer{ margin:0; }

.coop-detail .cd-ic{ width:100%; height:100%; display:block; }
.coop-detail .cd-arr{ width:18px; height:18px; flex:none; }

/* the landing's CSS-drawn khatem, for the same reason: a bare ❖ is tofu here */
.coop-detail .eyebrow.cd-diamond{ gap:12px; }
.coop-detail .eyebrow.cd-diamond::before,
.coop-detail .eyebrow.cd-diamond.center::after{
  content:""; width:7px; height:7px; background:var(--orange); border-radius:1px;
  transform:rotate(45deg); flex:none;
}

/* ---------- 1 · IDENTITÉ ---------- */
.coop-detail .cd-id__back{ margin-bottom:clamp(22px,3vw,34px); }
.coop-detail .cd-id__back .cd-arr{ transition:transform .35s var(--ease); }
.coop-detail .cd-id__back:hover .cd-arr{ transform:translateX(-4px); }

.coop-detail .cd-id__grid{
  display:grid; grid-template-columns:260px 1fr; gap:clamp(28px,4vw,56px); align-items:center;
}

/* The identity card exists to give a 250×250 logo some presence without
   upscaling it. See the ⚠ note in detail.tpl: these files are logos, and the
   old 720×420 cover frame both blew them up and cropped them. */
.coop-detail .cd-id__card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:26px 22px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.coop-detail .cd-id__logo{
  width:132px; height:132px; border-radius:50%; background:#fff;
  /* contain, never cover: a logo cropped to a circle loses its wordmark */
  object-fit:contain; padding:10px; border:1px solid var(--line-2);
}
.coop-detail .cd-id__count{ display:block; line-height:1.2; }
.coop-detail .cd-id__count b{
  display:block; font-family:var(--font-head); font-weight:600;
  font-size:clamp(26px,3vw,34px); color:var(--ink); line-height:1;
}
.coop-detail .cd-id__count > span{
  display:block; margin-top:6px; font-size:12.5px; letter-spacing:.04em;
  text-transform:uppercase; font-weight:600; color:var(--muted);
}

.coop-detail .cd-id__text h1{
  font-size:clamp(30px,3.8vw,50px); line-height:1.06; letter-spacing:-.02em;
  margin:18px 0 0; text-wrap:balance;
}
.coop-detail .cd-chip{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  background:var(--green-soft); color:var(--green-deep);
  border-radius:100px; padding:7px 14px; font-size:13px; font-weight:600;
}
.coop-detail .cd-chip .cd-ic{ width:15px; height:15px; flex:none; }

/* A measure, not the full band. The descriptions run 95–600 characters and at
   the 1240px content width they were a single 150-character line. */
.coop-detail .cd-id__prose{
  margin-top:20px; max-width:62ch; color:var(--muted); font-size:17px; line-height:1.75;
}
.coop-detail .cd-id__prose p{ margin:0 0 12px; }
.coop-detail .cd-id__prose p:last-child{ margin-bottom:0; }
.coop-detail .cd-id__prose strong,
.coop-detail .cd-id__prose b{ color:var(--ink); font-weight:700; }

/* ⚠ THE DESCRIPTIONS ARE PASTED OUT OF WORD. Measured on the live records:
   they arrive as `<p class="MsoNormal"><span style="font-size:11.5pt;
   line-height:107%;font-family:'Times New Roman', serif;background:#FFFFFF">`.
   Three of those four declarations are actively wrong here — the family
   overrides the theme's Inter with a font the visitor may not even have (on a
   machine without Times New Roman the paragraph renders as tofu), the 11.5pt
   size ignores the scale, and `background:#FFFFFF` paints a white rectangle
   behind every line of a band whose ground is cream. Overridden rather than
   stripped from the data: the copy is the client's, and BO must stay free to
   paste. `color` is deliberately NOT reset — a deliberate highlight survives.
   !important is required: these are inline styles. */
.coop-detail .cd-id__prose,
.coop-detail .cd-id__prose *{
  font-family:var(--font-body)!important;
  font-size:inherit!important;
  line-height:inherit!important;
  background:transparent!important;
}

.coop-detail .cd-id__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.coop-detail .cd-id__cta .cd-ic{ width:18px; height:18px; flex:none; }
.coop-detail .cd-id__cta .btn--ghost .cd-arr{ transition:transform .35s var(--ease); }
.coop-detail .cd-id__cta .btn--ghost:hover .cd-arr{ transform:translateX(4px); }

/* ---------- 2 · SES CRÉATIONS ---------- */
/* Four across, like the homepage sélection rail — these are the theme's own
   product cards, and .twiza-home .products is three across by default. */
.coop-detail .cd-prod__grid{
  margin-top:clamp(34px,4vw,52px);
  grid-template-columns:repeat(4,1fr); gap:30px 22px;
}
@media (max-width:1240px){ .coop-detail .cd-prod__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1080px){ .coop-detail .cd-prod__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .coop-detail .cd-prod__grid{ grid-template-columns:1fr; } }

.coop-detail .cd-empty{
  margin-top:clamp(30px,3.6vw,44px); text-align:center;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(34px,4.4vw,56px) 24px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.coop-detail .cd-empty .cd-ic{ width:38px; height:38px; color:var(--orange); }
.coop-detail .cd-empty p{ color:var(--muted); font-size:16.5px; margin:0; }
.coop-detail .cd-empty .cd-arr{ transition:transform .35s var(--ease); }
.coop-detail .cd-empty .btn:hover .cd-arr{ transform:translateX(4px); }

/* ---------- 3 · D'AUTRES COOPÉRATIVES ---------- */
.coop-detail .cd-more__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.coop-detail .cd-more__head .section-head h2{ font-size:clamp(24px,2.8vw,36px); }
.coop-detail .cd-more__grid{
  margin-top:clamp(28px,3.4vw,42px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.coop-detail .cd-coop{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:24px 18px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.coop-detail .cd-coop:hover{
  border-color:var(--orange); box-shadow:var(--shadow); transform:translateY(-2px);
}
/* contain again — same 250×250 logos as the medallion above */
.coop-detail .cd-coop__logo{
  width:72px; height:72px; border-radius:50%; object-fit:contain;
  background:#fff; padding:6px; border:1px solid var(--line-2);
}
/* flex:1 so the count sits on the card's floor. Cooperative names run from one
   word to « La coopérative Afaq pour le développement artisanal féminin », and
   without this the count follows the name up and the row's four baselines
   disagree. */
.coop-detail .cd-coop__name{
  flex:1; display:flex; align-items:center;
  font-family:var(--font-head); font-weight:600; font-size:15.5px; line-height:1.3; color:var(--ink);
}
.coop-detail .cd-coop__n{ font-size:12.5px; color:var(--muted); }

/* ---------- RTL ---------- */
body.lang-rtl .coop-detail .cd-arr{ transform:scaleX(-1); }
body.lang-rtl .coop-detail .cd-id__back:hover .cd-arr{ transform:scaleX(-1) translateX(-4px); }
body.lang-rtl .coop-detail .cd-id__cta .btn--ghost:hover .cd-arr,
body.lang-rtl .coop-detail .cd-empty .btn:hover .cd-arr{ transform:scaleX(-1) translateX(4px); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .coop-detail .cd-id__grid{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .coop-detail .cd-id__card{ max-width:260px; }
  .coop-detail .cd-id__prose{ margin-inline:auto; }
  .coop-detail .cd-id__cta{ justify-content:center; }
  .coop-detail .cd-more__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .coop-detail .cd-more__grid{ grid-template-columns:1fr; }
}