/* =====================================================================
   CARTES PERSONA — ÉLÉMENT SIGNATURE
   Comportement calé pendant la réunion (18:39–20:18) :
   rangée de cartes → au clic, les autres s'effacent et la carte
   sélectionnée s'étend en bandeau (image + détails + tunnel).
   ===================================================================== */

.ile-personas { position: relative; }

/* --- La rangée (état par défaut) --- */
.ile-personas__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}
.ile-personas__row > .ile-persona {
  flex: 0 1 250px;
  width: auto;
}
@media (max-width: 560px) {
  .ile-personas__row > .ile-persona { flex-basis: 100%; }
}
.ile-personas[data-expanded="true"] .ile-personas__row { display: none; }

/* --- Carte (recto) --- */
.ile-persona {
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--ligne);
  border-top: 4px solid var(--uni);
  border-radius: var(--rayon);
  padding: 1.4rem 1.4rem 1.5rem;
  cursor: pointer;
  display: flex; flex-direction: column; gap: .7rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  min-height: 260px;
  font: inherit; color: inherit; width: 100%;
}
.ile-persona:hover { transform: translateY(-4px); box-shadow: var(--ombre-douce); }
.ile-persona__media { aspect-ratio: 4 / 3; border-radius: var(--rayon-sm); overflow: hidden; background: var(--uni-clair); display: grid; place-items: center; }
.ile-persona__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.ile-persona__media span { font-family: var(--font-display); font-size: 2rem; color: var(--uni); }
.ile-persona__univers { font-family: var(--font-data); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--uni); }
.ile-persona__title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; }
.ile-persona__baseline { font-size: .92rem; color: var(--encre-douce); margin: 0; }
.ile-persona__prix { margin-top: auto; font-family: var(--font-data); font-size: .92rem; font-weight: 600; color: var(--encre); }
.ile-persona__prix small { display: block; font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--uni); margin-top: 2px; }

/* --- Le bandeau (carte étendue) --- */
.ile-personas__stage { display: none; }
.ile-personas[data-expanded="true"] .ile-personas__stage { display: block; animation: ile-fade var(--transition); }
@keyframes ile-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ile-bandeau {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.2rem, 4vw, 2.5rem);
  background: #ffffff;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.ile-bandeau__media { background: var(--uni-clair); min-height: 320px; display: grid; place-items: center; }
.ile-bandeau__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.ile-bandeau__media span { font-family: var(--font-display); font-size: 4rem; color: var(--uni); }
.ile-bandeau__body { padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.4rem) 0; }
.ile-bandeau__univers { font-family: var(--font-data); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--uni); }
.ile-bandeau__body h3 { margin: .3rem 0 .4rem; }
.ile-bandeau__prix { display: inline-block; font-family: var(--font-data); font-weight: 600; background: var(--uni-clair); color: var(--uni); padding: .4rem .8rem; border-radius: 999px; margin-bottom: .5rem; }
.ile-bandeau__diag { font-family: var(--font-data); font-weight: 600; font-size: .82rem; letter-spacing: .04em; color: var(--uni); margin: 0 0 1rem; }
.ile-bandeau__inclus { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; }
.ile-bandeau__inclus li { position: relative; padding-left: 1.6rem; }
.ile-bandeau__inclus li::before { content: "→"; position: absolute; left: 0; color: var(--uni); font-weight: 700; }
.ile-bandeau__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.2rem; }

.ile-personas__close { background: none; border: 0; padding: .55rem .4rem; cursor: pointer; font: inherit; color: var(--encre-douce); text-decoration: underline; text-underline-offset: 3px; }
.ile-personas__close:hover { color: var(--encre); }

/* Grille tarifaire détaillée (rubriques) — en-tête + colonne formule aux couleurs de l'univers, packs sur blanc */
.ile-grille { margin: 0 0 1.4rem; }
.ile-grille__lab { font-family: var(--font-data); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--uni); margin: 0 0 .5rem; }
.ile-grille__wrap { border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--uni); overflow-x: auto; }
.ile-grille table { width: 100%; border-collapse: collapse; font-size: .92rem; background: #fff; }
.ile-grille th, .ile-grille td { text-align: left; padding: .6rem .85rem; vertical-align: top; }
.ile-grille thead th { background: var(--uni); color: #fff; font-family: var(--font-data); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; }
.ile-grille tbody td { background: #fff; color: var(--encre); border-top: 1px solid var(--ligne); }
.ile-grille tbody td:first-child { background: var(--uni); color: #fff; font-weight: 600; border-top: 1px solid rgba(255,255,255,.2); }
.ile-grille td span { display: block; font-family: var(--font-data); font-size: .78rem; color: var(--encre-douce); margin-top: 2px; }
.ile-grille tbody td:first-child span { color: rgba(255,255,255,.85); }

@media (max-width: 720px) {
  .ile-bandeau { grid-template-columns: 1fr; }
  .ile-bandeau__media { min-height: 200px; }
  .ile-bandeau__body { padding: 0 1.4rem 1.6rem; }
}