/* ==========================================================================
   IIN Design System — Composants
   Dépend de tokens/tokens.css et css/base.css.
   Aucun composant n'a d'angle arrondi : la seule exception est l'avatar.
   ========================================================================== */

/* --- Boutons --------------------------------------------------------------
   Trois niveaux seulement. Toujours en capitales, approche 0.06em,
   angles vifs, aucune ombre, aucune transition de couleur au survol. */

.iin-btn {
  display: inline-block;
  padding: 15px 28px;
  font-size: var(--iin-text-base);
  font-weight: var(--iin-weight-medium);
  letter-spacing: var(--iin-tracking-button);
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  border-radius: var(--iin-radius);
}

/* Primaire : aplat navy. L'action principale d'une page, une seule fois. */
.iin-btn--primary { background: var(--iin-navy-600); color: #fff; }

/* Or : réservé aux fonds sombres, où le navy disparaîtrait. */
.iin-btn--gold { background: var(--iin-gold-500); color: var(--iin-navy-750); font-weight: var(--iin-weight-bold); padding: 15px 30px; }

/* Tertiaire : pas de fond, soulignement or de 2px. Le « lire la suite »
   du système. Le glyphe → fait partie du libellé, pas du CSS. */
.iin-btn--underline {
  background: none;
  color: var(--iin-ink);
  padding: 15px 4px;
  border-bottom: var(--iin-accent-underline) solid var(--iin-gold-500);
}
.iin-btn--underline.on-dark { color: #fff; }

/* Contour : utilisé dans les cartes de palier non prioritaires. */
.iin-btn--outline {
  background: var(--iin-surface);
  color: var(--iin-navy-600);
  border: var(--iin-hairline) solid var(--iin-navy-600);
}

.iin-btn--sm { padding: 10px 18px; font-size: var(--iin-text-xs); font-weight: var(--iin-weight-bold); letter-spacing: var(--iin-tracking-meta); }
.iin-btn--block { display: block; width: 100%; text-align: center; padding: 12px; font-size: var(--iin-text-sm); font-weight: var(--iin-weight-bold); }

/* --- En-tête --------------------------------------------------------------- */

.iin-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--iin-header-bg);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--iin-hairline) solid var(--iin-rule);
}
.iin-header__inner {
  max-width: var(--iin-container);
  margin: 0 auto;
  padding: 13px var(--iin-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.iin-header__logo { height: 38px; width: auto; display: block; }

.iin-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.iin-nav__link {
  font-size: var(--iin-text-base);
  font-weight: var(--iin-weight-medium);
  letter-spacing: var(--iin-tracking-nav);
  color: var(--iin-ink-2);
  cursor: pointer;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
/* L'état actif est un soulignement or, jamais un changement de graisse. */
.iin-nav__link[aria-current], .iin-nav__link.is-active {
  color: var(--iin-ink);
  border-bottom-color: var(--iin-gold-500);
}

/* Sélecteur de langue : deux cases dans un cadre or, l'active en aplat or. */
.iin-lang { display: inline-flex; border: var(--iin-hairline) solid var(--iin-gold-500); }
.iin-lang__opt {
  padding: 5px 9px;
  font-size: var(--iin-text-2xs);
  font-weight: var(--iin-weight-bold);
  letter-spacing: var(--iin-tracking-meta);
  cursor: pointer;
  color: var(--iin-muted-2);
  background: transparent;
}
.iin-lang__opt.is-active { color: var(--iin-navy-750); background: var(--iin-gold-500); }

/* --- Grille-tableau --------------------------------------------------------
   Des cellules blanches sur un fond de filet : gap:1px sur un fond
   --iin-rule produit des séparateurs parfaits sans bordure par cellule.
   C'est le motif de grille par défaut du système (objectifs, avantages,
   chiffres d'impact). */

.iin-cellgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--iin-hairline);
  background: var(--iin-rule);
  border: var(--iin-hairline) solid var(--iin-rule);
}
.iin-cellgrid > * { background: var(--iin-surface); padding: 26px 22px; }

/* --- Bande de services ----------------------------------------------------- */

.iin-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.iin-trust__item {
  padding: 30px 28px;
  border-left: var(--iin-hairline) solid var(--iin-rule-soft);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.iin-trust__title { font-size: var(--iin-text-md2); font-weight: var(--iin-weight-bold); color: var(--iin-ink); line-height: 1.25; }
.iin-trust__desc  { font-size: var(--iin-text-sm2); color: var(--iin-grey); margin-top: 6px; line-height: 1.5; }

/* --- Compteur statistique --------------------------------------------------
   Chiffre serif géant, filet or, libellé court. Jamais d'icône. */

.iin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.iin-stat__value {
  font-family: var(--iin-font-display);
  font-weight: var(--iin-weight-display);
  font-size: var(--iin-text-9xl);
  line-height: 1;
  color: var(--iin-ink);
}
.iin-stat__label { font-size: var(--iin-text-base); color: var(--iin-body); line-height: var(--iin-leading-snug); max-width: 14em; }

/* --- Carte ---------------------------------------------------------------- */

.iin-card {
  background: var(--iin-surface);
  border: var(--iin-hairline) solid var(--iin-rule);
  display: flex;
  flex-direction: column;
}
.iin-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.iin-card--raised { background: var(--iin-paper-raised); }

/* Media d'une carte : image, voile, liseré catégoriel, millésime serif. */
.iin-card__media { position: relative; height: 180px; overflow: hidden; background: var(--iin-navy-700); }
.iin-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iin-card__scrim { position: absolute; inset: 0; pointer-events: none; background: var(--iin-scrim-card); }
.iin-card__flag { position: absolute; left: 0; top: 20px; height: 4px; width: 50px; pointer-events: none; }
.iin-card__year {
  position: absolute; left: 20px; bottom: 16px; pointer-events: none;
  font-family: var(--iin-font-display); font-size: var(--iin-text-6xl); color: rgba(201,162,75,0.9);
}
.iin-card__kicker {
  font-size: var(--iin-text-2xs);
  font-weight: var(--iin-weight-bold);
  letter-spacing: var(--iin-tracking-country);
  text-transform: uppercase;
}

/* --- Carte de palier ------------------------------------------------------
   Liseré catégoriel de 4px en haut, corps en trois zones :
   identité, lignes label/valeur, action. */

.iin-tier { background: var(--iin-surface); border: var(--iin-hairline) solid var(--iin-rule); display: flex; flex-direction: column; border-top: var(--iin-tier-top) solid var(--iin-navy-600); }
.iin-tier__head  { padding: 26px 24px 20px 24px; }
.iin-tier__who   { font-size: var(--iin-text-sm2); color: var(--iin-muted); margin-top: 8px; line-height: var(--iin-leading-snug); min-height: 2.6em; }
.iin-tier__price { font-family: var(--iin-font-display); font-weight: var(--iin-weight-display); font-size: var(--iin-text-6xl); color: var(--iin-ink); margin-top: 16px; line-height: 1.1; }
.iin-tier__note  { font-size: var(--iin-text-sm); color: var(--iin-muted); margin-top: 4px; }
.iin-tier__rows  { padding: 4px 24px 0 24px; flex: 1; }
.iin-tier__row   { display: flex; justify-content: space-between; gap: 12px; font-size: var(--iin-text-base); color: var(--iin-ink-2); padding: 10px 0; border-top: var(--iin-hairline) solid var(--iin-rule-softer); }
.iin-tier__row b { font-weight: var(--iin-weight-bold); color: var(--iin-ink); }
.iin-tier__foot  { padding: 20px 24px 24px 24px; }

/* --- Onglets et filtres ---------------------------------------------------- */

.iin-tabs { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: var(--iin-hairline) solid var(--iin-rule); }
.iin-tab {
  font-size: var(--iin-text-base);
  font-weight: var(--iin-weight-bold);
  letter-spacing: var(--iin-tracking-tag);
  padding: 14px 20px;
  color: var(--iin-muted);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}
.iin-tab.is-active { color: var(--iin-ink); border-bottom-color: var(--iin-gold-500); }

/* Filtre : case rectangulaire, l'état actif s'inverse en navy plein. */
.iin-filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; border-top: var(--iin-hairline) solid var(--iin-rule); border-bottom: var(--iin-hairline) solid var(--iin-rule); padding: 18px 0; }
.iin-filters__label { font-size: var(--iin-text-2xs); font-weight: var(--iin-weight-bold); letter-spacing: var(--iin-tracking-filter); text-transform: uppercase; color: var(--iin-muted); margin-right: 6px; }
.iin-chip {
  font-size: var(--iin-text-base);
  font-weight: var(--iin-weight-medium);
  padding: 8px 15px;
  border: var(--iin-hairline) solid var(--iin-rule-strong);
  background: var(--iin-surface);
  color: var(--iin-ink-2);
  cursor: pointer;
}
.iin-chip.is-active { border-color: var(--iin-navy-600); background: var(--iin-navy-600); color: #fff; }

/* Tag : capitales grises dans un cadre fin. Descriptif, jamais cliquable. */
.iin-tag {
  display: inline-block;
  font-size: var(--iin-text-2xs);
  font-weight: var(--iin-weight-bold);
  letter-spacing: var(--iin-tracking-meta);
  text-transform: uppercase;
  color: var(--iin-muted);
  border: var(--iin-hairline) solid var(--iin-rule);
  padding: 7px 12px;
  text-align: center;
}

/* --- Formulaire ------------------------------------------------------------ */

.iin-field { display: block; }
.iin-label {
  font-size: var(--iin-text-2xs);
  font-weight: var(--iin-weight-bold);
  letter-spacing: var(--iin-tracking-label);
  text-transform: uppercase;
  color: var(--iin-muted);
}
.iin-input, .iin-textarea {
  width: 100%;
  margin-top: 8px;
  padding: 13px 14px;
  border: var(--iin-hairline) solid var(--iin-rule-strong);
  background: var(--iin-paper-field);
  font-size: var(--iin-text-md);
  color: var(--iin-ink);
  outline: none;
  border-radius: var(--iin-radius);
}
.iin-textarea { resize: vertical; font-family: inherit; }
.iin-input:focus, .iin-textarea:focus { border-color: var(--iin-navy-600); }

/* Champ inversé : bloc newsletter du pied de page. */
.iin-subscribe { display: flex; border: var(--iin-hairline) solid var(--iin-navy-350); }
.iin-subscribe input { flex: 1; min-width: 0; padding: 11px 12px; border: 0; background: var(--iin-navy-880); color: #fff; font-size: var(--iin-text-base); outline: none; }
.iin-subscribe button { padding: 11px 16px; background: var(--iin-gold-500); color: var(--iin-navy-750); font-size: var(--iin-text-2xs); font-weight: var(--iin-weight-bold); letter-spacing: var(--iin-tracking-button); text-transform: uppercase; cursor: pointer; border: 0; white-space: nowrap; }

/* --- Personne -------------------------------------------------------------- */

.iin-person { background: var(--iin-paper-raised); border: var(--iin-hairline) solid var(--iin-rule); padding: 26px; }
/* Pastille d'initiales : le seul cercle du système. Dégradé navy, texte or. */
.iin-person__avatar {
  width: 56px; height: 56px; border-radius: var(--iin-radius-avatar);
  background: linear-gradient(150deg, var(--iin-navy-600), var(--iin-navy-300));
  color: var(--iin-gold-500);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--iin-font-display); font-size: 20px; flex: none;
}
.iin-person__name { font-size: 16px; font-weight: var(--iin-weight-bold); color: var(--iin-ink); line-height: var(--iin-leading-title); }
.iin-person__role { font-size: var(--iin-text-2xs); font-weight: var(--iin-weight-bold); letter-spacing: var(--iin-tracking-meta); text-transform: uppercase; color: var(--iin-gold-600); margin-top: 6px; line-height: 1.3; }

/* --- Héros ----------------------------------------------------------------- */

/* Variante A : image en portrait 4/5, voile bas, cadre or en retrait de 14px. */
.iin-hero-figure { aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--iin-navy-700); }
.iin-hero-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iin-hero-figure__scrim { position: absolute; inset: 0; pointer-events: none; background: var(--iin-scrim-hero); }
.iin-hero-figure__frame { position: absolute; inset: 14px; border: var(--iin-hairline) solid rgba(201,162,75,0.5); pointer-events: none; }
.iin-hero-figure__caption { position: absolute; left: 28px; bottom: 26px; right: 28px; pointer-events: none; }
/* La légende est la seule italique serif du système. */
.iin-hero-figure__caption em { font-family: var(--iin-font-display); font-style: italic; font-size: var(--iin-text-2xl); color: var(--iin-paper); line-height: 1.3; font-weight: var(--iin-weight-regular); }
.iin-hero-figure__caption small { display: block; font-size: var(--iin-text-2xs); letter-spacing: var(--iin-tracking-country); text-transform: uppercase; color: var(--iin-on-dark-muted); margin-top: 5px; }

/* Variante B : image pleine largeur à 34% d'opacité sous un voile diagonal. */
.iin-hero-bleed { position: relative; background: var(--iin-navy-850); overflow: hidden; }
.iin-hero-bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.34; }
.iin-hero-bleed__scrim { position: absolute; inset: 0; background: var(--iin-scrim-bleed); pointer-events: none; }
.iin-hero-bleed__inner { position: relative; max-width: var(--iin-container); margin: 0 auto; padding: 104px var(--iin-gutter) 96px var(--iin-gutter); }

/* --- Ligne de programme ----------------------------------------------------
   Numéro serif 48px, contenu, colonne de tags. Séparée par un filet haut. */

.iin-program-row {
  display: grid;
  grid-template-columns: 88px 1fr 220px;
  gap: 32px;
  align-items: center;
  padding: 34px 0;
  border-top: var(--iin-hairline) solid var(--iin-rule);
}
@media (max-width: 860px) { .iin-program-row { grid-template-columns: 1fr; gap: 16px; } }

/* --- Pied de page ----------------------------------------------------------- */

.iin-footer { background: var(--iin-navy-800); color: var(--iin-on-dark-muted); }
.iin-footer__inner {
  max-width: var(--iin-container); margin: 0 auto;
  padding: 56px var(--iin-gutter) 40px var(--iin-gutter);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px;
}
@media (max-width: 860px) { .iin-footer__inner { grid-template-columns: 1fr 1fr; } }
/* Le logo est retourné en blanc par filtre : pas de second fichier à gérer. */
.iin-footer__logo { height: 40px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.92; }
.iin-footer__heading { font-size: var(--iin-text-2xs); font-weight: var(--iin-weight-bold); letter-spacing: var(--iin-tracking-footer); text-transform: uppercase; color: var(--iin-gold-500); }
.iin-footer__link { color: var(--iin-on-dark-muted); cursor: pointer; display: block; }
.iin-footer__legal { border-top: var(--iin-hairline) solid var(--iin-navy-450); }
.iin-footer__legal > div {
  max-width: var(--iin-container); margin: 0 auto; padding: 16px var(--iin-gutter);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: var(--iin-text-2xs); color: var(--iin-on-dark-faint); letter-spacing: var(--iin-tracking-tag);
}

/* --- Confirmation ---------------------------------------------------------- */

.iin-confirm { text-align: center; padding: 30px 10px; }
.iin-confirm__mark {
  width: 54px; height: 54px; border: 2px solid var(--iin-cat-green); border-radius: 50%;
  margin: 0 auto; display: flex; align-items: center; justify-content: center;
  color: var(--iin-cat-green); font-size: 24px;
}

/* --- Modificateurs catégoriels --------------------------------------------- */

.iin-cat-green  { --iin-cat: var(--iin-cat-green); }
.iin-cat-orange { --iin-cat: var(--iin-cat-orange); }
.iin-cat-maroon { --iin-cat: var(--iin-cat-maroon); }
.iin-cat-blue   { --iin-cat: var(--iin-cat-blue); }
.iin-cat-gold   { --iin-cat: var(--iin-cat-gold); }

.iin-card__flag  { background: var(--iin-cat, var(--iin-gold-500)); }
.iin-card__kicker{ color: var(--iin-cat, var(--iin-gold-600)); }
.iin-tier        { border-top-color: var(--iin-cat, var(--iin-navy-600)); }