/* ═══════════════════════════════════════════════════════════════════════
   FLEX/ — vitrine partenaires (flex-app.ca)
   Version STATIQUE AUTONOME de app/partenaires/partenaires.css (v2-db).
   Contient les tokens :root et les objets globaux nécessaires (extraits de
   globals.css) — ce fichier est un gabarit autonome : les valeurs de la
   charte y sont figées, comme lib/pdf / lib/markdown dans l'app.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Reset minimal + base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body { overflow-x: clip; max-width: 100vw; }
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 400;
  color: var(--ink-80);
}
img { max-width: 100%; }
button { font-family: inherit; }

/* ── Tokens design system FLEX (extraits de globals.css) ──────────────── */
:root {
  --h1-size:   3.0rem;
  --h1-weight: 400;
  --h2-size:   1.8rem;
  --h2-weight: 900;
  --h3-size:   1.3rem;
  --h3-weight: 600;
  --h4-size:   1rem;
  --h4-weight: 900;
  --h5-size:   11px;
  --h5-weight: 700;
  --body-size: 1rem;

  --jaune:        #fff056;
  --brun:         #806642;
  --orange:       #f4ad04;
  --orange-fonce: #f27200;
  --vert-clair:   #88fa4e;
  --vert:         #1db100;
  --rose:         #ffcbc7;
  --rose-fonce:   #ff644e;
  --rouge:        #ee220c;
  --gris-clair:   #acacac;
  --gris-fonce:   #5e5e5e;
  --gris-header:  #434343;
  --bg-app:       #545454;

  --ink-80: rgba(0,0,0,0.80);
  --ink-60: rgba(0,0,0,0.60);
  --ink-40: rgba(0,0,0,0.40);
  --ink-30: rgba(0,0,0,0.30);
  --ink-20: rgba(0,0,0,0.20);
  --paper-90: rgba(255,255,255,0.90);
  --paper-80: rgba(255,255,255,0.80);
  --paper-60: rgba(255,255,255,0.60);
  --paper-20: rgba(255,255,255,0.20);
  --card: var(--paper-90);

  --fs-13: 13px; --fs-15: 15px; --fs-16: 16px; --fs-24: 24px;
  --list-row-h: 35px;

  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-lg:   16px;
  --radius-md:   12px;
  --radius-xs:   6px;
}

/* ── Typographie titres (échelle FLEX) ────────────────────────────────── */
h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); }

/* ── Objets globaux utilisés par la page (extraits de globals.css) ────── */
.label-section {
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-40);
}
.label-section--dark { color: var(--paper-60); }

.itemname {
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--ink-80);
}

.total {
  text-align: right;
  font-size: var(--fs-24);
  font-weight: 700;
  color: var(--jaune);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.total-legend {
  font-size: var(--fs-13);
  font-style: italic;
  color: var(--gris-clair);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: var(--jaune);
  color: var(--brun);
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.btn-primary:hover { background-color: #e6d84e; }

/* ═══ Page partenaires (copie fidèle de partenaires.css v2-db) ═════════ */

.part-page {
  min-height: 100vh;
  background-color: var(--bg-app);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
@media (min-width: 768px) {
  .part-page { padding: 40px 20px; gap: 30px; }
}

.part-col {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 768px) { .part-col { gap: 30px; } }

/* ── Sélecteur de langue ──────────────────────────────────────────────── */
.part-lang {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 50;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background-color: var(--ink-60);
  backdrop-filter: blur(6px);
}
.part-lang button {
  border: none;
  cursor: pointer;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.04em;
  background-color: transparent;
  color: var(--paper-80);
  transition: background-color 150ms ease, color 150ms ease;
}
.part-lang button:hover { background-color: var(--paper-20); }
.part-lang button.is-active {
  background-color: var(--jaune);
  color: var(--brun);
}

/* ── Hero — carte jaune ───────────────────────────────────────────────── */
.part-hero {
  background-color: var(--jaune);
  border-radius: 50px;
  padding: 20px 20px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  box-shadow: 0 12px 32px var(--ink-30);
}
.part-hero img { margin-top: 30px; }
.part-hero h1 {
  color: var(--brun);
  font-size: clamp(2rem, 5vw, var(--h1-size));
  font-weight: var(--h1-weight);
  line-height: 1.15;
  margin: 0;
}
.part-hero .part-lead {
  color: var(--brun);
  font-size: var(--fs-16);
  max-width: 560px;
  margin: 0;
}

/* ── Panneau de section ───────────────────────────────────────────────── */
.part-bloc {
  background-color: var(--ink-20);
  border-radius: 50px;
  padding: 20px;
}
.part-bloc > h2 {
  color: var(--jaune);
  margin: 0 0 8px;
  padding-top: 20px;
}
.part-bloc .part-intro {
  color: var(--paper-80);
  font-size: var(--fs-16);
  margin: 0 0 24px;
  max-width: 640px;
}

/* ── Grille de cartes fonctionnalités ─────────────────────────────────── */
.part-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 640px)  { .part-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .part-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.part-card {
  background-color: var(--card);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.part-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px var(--ink-30);
}
.part-card h3 { margin: 0; color: var(--ink-80); }
.part-card p  { margin: 0; font-size: var(--fs-13); color: var(--ink-60); }

/* ── Bloc « L'interface » ─────────────────────────────────────────────── */
.part-ui-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
@media (min-width: 768px) { .part-ui-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.part-ui-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 110px;
  padding: 12px 6px;
  border-radius: var(--radius-lg);
  background-color: var(--jaune);
  color: var(--brun);
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.part-ui-item svg { width: 56px; height: 56px; color: var(--brun); flex-shrink: 0; }
.part-ui-item span { padding-top: 12px; }

.part-widgets {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 768px) { .part-widgets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.part-widget {
  background-color: var(--ink-20);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.part-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-height: 96px;
  background-color: var(--gris-header);
  border-radius: var(--radius-md);
  padding: 12px;
}
.part-bars span {
  flex: 1;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.part-bars span:nth-child(odd)  { background-color: var(--vert); }
.part-bars span:nth-child(even) { background-color: var(--rouge); }
.part-bars span:nth-child(1) { height: 60%; }
.part-bars span:nth-child(2) { height: 35%; }
.part-bars span:nth-child(3) { height: 80%; }
.part-bars span:nth-child(4) { height: 45%; }
.part-bars span:nth-child(5) { height: 70%; }
.part-bars span:nth-child(6) { height: 30%; }
.part-total-bar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: var(--gris-fonce);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  min-height: var(--list-row-h);
}
.part-total-bar .total { white-space: nowrap; }
.part-total--depense { color: var(--rouge); }
.part-statuts {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 8px;
}

/* ── Lignes partenaires ───────────────────────────────────────────────── */
.part-partners { display: flex; flex-direction: column; gap: 8px; }
.part-partner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background-color: var(--paper-90);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.part-partner:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--ink-30);
}
.part-partner .itemname a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--jaune);
}
.part-partner .itemname a:hover { color: var(--brun); }
.part-partner p {
  margin: 0;
  flex: 1 1 100%;
  font-size: var(--fs-13);
  color: var(--ink-60);
}
@media (min-width: 640px) {
  .part-partner p { flex: 1 1 0; }
}

/* Pastille d'état — convention pastille INVERSÉE de l'app. */
.part-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.part-pill--live     { background-color: var(--vert);         color: #000; }
.part-pill--dev      { background-color: var(--orange-fonce); color: var(--orange); }
.part-pill--etude    { background-color: var(--gris-fonce);   color: var(--gris-clair); }
/* Pastilles de statut d'atelier (couleurs STATUS_META, pastille inversée). */
.part-st-rv       { background-color: #806642; color: #fff056; }
.part-st-approuve { background-color: #1db100; color: #88fa4e; }
.part-st-surpied  { background-color: #017100; color: #5dce33; }
.part-st-facture  { background-color: #ff644e; color: #ffcbc7; }
.part-st-suivi    { background-color: #ee220c; color: #f4978e; }

/* ── CTA ──────────────────────────────────────────────────────────────── */
.part-cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.part-cta p { color: var(--paper-80); font-size: var(--fs-16); max-width: 560px; margin: 0; }
.part-cta a.btn-primary { text-decoration: none; }

/* ── Pied de page ─────────────────────────────────────────────────────── */
.part-footer {
  color: var(--paper-60);
  font-size: var(--fs-13);
  text-align: center;
  padding: 20px 0 10px;
}
.part-footer a { color: var(--paper-60); }

/* ── Apparition au scroll ─────────────────────────────────────────────── */
.part-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.part-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .part-reveal { transition: none; opacity: 1; transform: none; }
  .part-card, .part-partner { transition: none; }
}