@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@300;400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

body { font-family: theme('fontFamily.body'); color: theme('colors.cmu-charcoal'); }

/* Masque les éléments pilotés par Alpine tant que le composant n'est pas initialisé (évite le flash du drawer/overlay au chargement). */
[x-cloak] { display: none !important; }

@layer components {
  .cmu-flag-edge { @apply fixed top-0 bottom-0 left-0 w-[6px] flex flex-col z-[200] pointer-events-none; }
  .cmu-flag-edge span { @apply flex-1; }
  .cmu-flag-edge .red { @apply bg-cmu-red-600; }
  .cmu-flag-edge .yellow { background-color: #FCD116; }
  .cmu-flag-edge .green { @apply bg-cmu-green-600; }

  .cmu-btn-primary { @apply px-4 py-2.5 rounded-cmu bg-cmu-green-800 text-white font-semibold text-sm hover:bg-cmu-green-700 hover:-translate-y-px hover:shadow-cmu-raised transition-all; }
  .cmu-btn-ghost { @apply px-4 py-2.5 rounded-cmu bg-white text-gray-700 border border-gray-300 font-semibold text-sm hover:border-cmu-green-600 hover:text-cmu-green-800 transition-all; }
  .cmu-btn-gold { @apply px-4 py-2.5 rounded-cmu bg-cmu-gold-500 text-cmu-green-900 font-bold text-sm hover:bg-cmu-gold-400 hover:-translate-y-px hover:shadow-cmu-gold transition-all; }

  .cmu-card { @apply bg-white border border-gray-200 rounded-cmu-lg p-6 shadow-cmu-card; }
  .cmu-eyebrow { @apply text-xs font-bold tracking-[0.18em] uppercase text-cmu-gold-700 flex items-center gap-2; }
  .cmu-eyebrow::before { content: ''; @apply w-[22px] h-px bg-cmu-gold-500; }
  .cmu-title { @apply font-display text-4xl font-medium text-cmu-green-900 leading-tight tracking-tight; }
  .cmu-title em { @apply italic text-cmu-gold-600 not-italic; font-style: italic; }

  /* ================================================================
     Page de connexion — reproduction fidèle de maquettes/cmu-login.html
     ================================================================ */
  .cmu-login-body { @apply flex min-h-screen w-full overflow-x-hidden; }

  .cmu-login-hero {
    flex: 0 0 55%;
    padding: 56px 72px 48px 96px;
    @apply relative flex flex-col justify-between bg-white overflow-hidden;
    background-image:
      linear-gradient(100deg,
        #FFFFFF 0%,
        rgba(255, 255, 255, 0.95) 18%,
        rgba(255, 255, 255, 0.55) 35%,
        rgba(255, 255, 255, 0.15) 55%,
        rgba(255, 255, 255, 0) 100%),
      url('/images/cmu/amu-hero.png');
    background-size: auto, cover;
    background-position: center, center right;
    background-repeat: no-repeat, no-repeat;
  }
  .cmu-login-hero::before {
    content: "";
    @apply absolute top-0 right-0 bottom-0 pointer-events-none;
    width: 45%;
    z-index: 1;
    background:
      radial-gradient(ellipse at 75% 35%, rgba(212, 160, 23, 0.04) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 85%, rgba(26, 93, 58, 0.03) 0%, transparent 55%);
  }
  .cmu-login-hero::after {
    content: "";
    @apply absolute pointer-events-none;
    top: 22%; bottom: 22%; left: 50%;
    width: 1px; z-index: 1;
    background: linear-gradient(to bottom, transparent, rgba(184, 134, 11, 0.25), transparent);
  }

  .cmu-login-hero-inner { @apply relative max-w-[560px]; z-index: 2; }

  .cmu-login-institutional { @apply flex items-center gap-[18px]; }
  .cmu-login-emblem {
    @apply w-[52px] h-[52px] rounded-full bg-cmu-green-800 flex items-center justify-center shrink-0 relative;
    box-shadow: 0 0 0 2px theme('colors.white'), 0 0 0 3px theme('colors.cmu-gold.500');
  }
  .cmu-login-emblem svg { @apply w-7 h-7; }
  .cmu-login-nation { @apply text-[11px] font-semibold tracking-[0.18em] uppercase text-cmu-green-800; }
  .cmu-login-ministry { @apply text-xs text-cmu-ink; letter-spacing: 0.02em; }

  .cmu-login-content { margin-top: 14vh; @apply max-w-[620px]; }

  .cmu-login-eyebrow {
    @apply inline-flex items-center gap-[10px] text-xs font-semibold uppercase text-cmu-gold-700;
    letter-spacing: 0.2em;
    margin-bottom: 28px;
  }
  .cmu-login-eyebrow::before {
    content: "";
    @apply inline-block bg-cmu-gold-500;
    width: 32px; height: 1px;
  }

  .cmu-login-title {
    @apply font-display font-medium text-cmu-green-900;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin-bottom: 28px;
  }
  .cmu-login-title em {
    @apply italic text-cmu-gold-600;
    font-weight: 500;
  }

  .cmu-login-subtitle {
    @apply text-cmu-ink max-w-[520px];
    font-size: 17px;
    line-height: 1.65;
    margin-bottom: 40px;
  }
  .cmu-login-subtitle strong { @apply font-semibold text-cmu-green-800; }

  .cmu-login-stats {
    @apply flex;
    padding-top: 28px;
    border-top: 1px solid rgba(26, 93, 58, 0.18);
  }
  .cmu-login-stat { @apply flex-1 relative; padding-right: 24px; }
  .cmu-login-stat + .cmu-login-stat {
    padding-left: 24px;
    border-left: 1px solid rgba(26, 93, 58, 0.18);
  }
  .cmu-login-stat-value {
    @apply font-display font-semibold text-cmu-green-800;
    font-size: 26px; line-height: 1.1; letter-spacing: -0.02em;
    margin-bottom: 6px; white-space: nowrap;
  }
  .cmu-login-stat-value .unit {
    @apply italic text-cmu-gold-600;
    font-size: 14px; margin-left: 4px; white-space: nowrap;
  }
  .cmu-login-stat-label { @apply text-xs text-cmu-ink; line-height: 1.4; }

  .cmu-login-hero-footer {
    @apply flex items-center justify-between uppercase relative max-w-[560px];
    font-size: 11px;
    color: theme('colors.cmu-ink');
    letter-spacing: 0.12em;
    margin-top: 40px;
    z-index: 2;
  }
  .cmu-login-hero-footer .tech-by { @apply flex items-center gap-2; }
  .cmu-login-hero-footer .dot { @apply w-[5px] h-[5px] rounded-full bg-cmu-gold-500; }

  /* -------- Form panel -------- */
  .cmu-login-form-panel {
    @apply flex-1 flex items-center justify-center relative bg-white;
    padding: 48px 64px;
    border-left: 1px solid rgba(26, 93, 58, 0.08);
  }
  .cmu-login-form-panel::before {
    content: ""; @apply absolute bg-cmu-gold-500;
    top: 48px; right: 48px; width: 64px; height: 1px;
  }
  .cmu-login-form-panel::after {
    content: ""; @apply absolute bg-cmu-gold-500;
    top: 48px; right: 48px; width: 1px; height: 64px;
  }

  .cmu-login-form-wrapper { @apply w-full max-w-[420px]; }

  .cmu-login-welcome {
    @apply flex items-center gap-2 text-xs font-semibold uppercase text-cmu-gold-700;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
  }
  .cmu-login-welcome .pulse {
    @apply w-[6px] h-[6px] rounded-full bg-cmu-green-500 relative inline-block;
  }
  .cmu-login-welcome .pulse::after {
    content: "";
    @apply absolute rounded-full border border-cmu-green-500;
    inset: -4px;
    animation: cmu-pulse 2s ease-out infinite;
  }
  .cmu-login-form-title {
    @apply font-display font-medium text-cmu-green-900;
    font-size: 32px; line-height: 1.15; letter-spacing: -0.01em;
    margin-bottom: 8px;
  }
  .cmu-login-form-hint {
    @apply text-sm text-cmu-ink;
    line-height: 1.5;
  }

  .cmu-login-role-label {
    @apply text-[11px] font-semibold uppercase text-cmu-ink;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
  }
  .cmu-login-role-pills {
    @apply grid gap-2;
    grid-template-columns: repeat(2, 1fr);
  }
  .cmu-login-role-pill {
    @apply flex items-center gap-[9px] text-left text-[13px] font-medium bg-white text-cmu-ink cursor-pointer border border-gray-200 rounded-cmu transition-all;
    padding: 11px 14px;
    font-family: theme('fontFamily.body');
  }
  .cmu-login-role-pill:hover { @apply border-cmu-green-500 bg-cmu-green-50; }
  .cmu-login-role-pill.active {
    @apply border-cmu-green-700 bg-cmu-green-700 text-white;
    box-shadow: 0 2px 8px rgba(26, 93, 58, 0.20);
  }
  .cmu-login-role-pill .role-icon { @apply w-4 h-4 shrink-0; }

  .cmu-login-field { margin-bottom: 20px; }
  .cmu-login-field-label {
    @apply block text-xs font-semibold text-cmu-ink;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
  }
  .cmu-login-field-input {
    @apply w-full block text-sm text-cmu-charcoal bg-white rounded-cmu border border-gray-200 transition-colors;
    padding: 13px 16px;
    font-family: theme('fontFamily.body');
  }
  .cmu-login-field-input::placeholder { @apply text-cmu-ink/50; }
  .cmu-login-field-input:focus {
    @apply outline-none border-cmu-green-600;
    box-shadow: 0 0 0 3px rgba(26, 93, 58, 0.08);
  }
  .cmu-login-field-error {
    @apply text-xs text-cmu-red-700;
    margin-top: 6px;
  }

  .cmu-login-field-row {
    @apply flex items-center justify-between text-[13px];
    margin-bottom: 24px;
  }
  .cmu-login-remember {
    @apply flex items-center gap-2 text-cmu-ink cursor-pointer select-none;
  }
  .cmu-login-remember input {
    @apply w-[15px] h-[15px];
    accent-color: theme('colors.cmu-green.700');
  }
  .cmu-login-forgot-link {
    @apply text-cmu-green-700 font-medium text-[13px] no-underline;
  }
  .cmu-login-forgot-link:hover { @apply underline; }

  .cmu-login-btn {
    @apply w-full flex items-center justify-center gap-[10px] relative overflow-hidden rounded-cmu text-white bg-cmu-green-800 font-semibold text-sm cursor-pointer transition-all;
    padding: 15px 20px;
    letter-spacing: 0.04em;
    font-family: theme('fontFamily.body');
    border: none;
  }
  .cmu-login-btn::before {
    content: "";
    @apply absolute top-0;
    left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.3), transparent);
    transition: left 0.6s ease;
  }
  .cmu-login-btn:hover {
    @apply bg-cmu-green-700 -translate-y-px;
    box-shadow: 0 4px 14px rgba(26, 93, 58, 0.25);
  }
  .cmu-login-btn:hover::before { left: 100%; }
  .cmu-login-btn:disabled { @apply opacity-70 cursor-not-allowed; }
  .cmu-login-btn .arrow { transition: transform 0.2s ease; }
  .cmu-login-btn:hover .arrow { transform: translateX(3px); }

  .cmu-login-divider {
    @apply flex items-center gap-[14px] text-[11px] uppercase text-cmu-ink;
    letter-spacing: 0.12em;
    margin: 28px 0 20px;
  }
  .cmu-login-divider::before, .cmu-login-divider::after {
    content: ""; flex: 1; height: 1px; @apply bg-gray-200;
  }
  .cmu-login-help-link {
    @apply block text-center text-[13px] text-cmu-ink;
  }
  .cmu-login-help-link strong { @apply font-semibold text-cmu-green-700; }
  .cmu-login-help-link:hover strong { @apply underline; }

  .cmu-login-form-footer {
    @apply absolute flex items-center justify-between text-[11px] text-cmu-ink;
    letter-spacing: 0.04em;
    bottom: 32px; left: 64px; right: 64px;
  }
  .cmu-login-form-footer .version { font-variant-numeric: tabular-nums; }

  /* -------- Animations staggerées -------- */
  .cmu-login-fade { opacity: 0; animation: cmu-fade-in-up 0.8s ease-out forwards; }
  .cmu-login-fade-1 { animation-delay: 0.1s; }
  .cmu-login-fade-2 { animation-delay: 0.25s; }
  .cmu-login-fade-3 { animation-delay: 0.4s; }
  .cmu-login-fade-4 { animation-delay: 0.55s; }
  .cmu-login-fade-5 { animation-delay: 0.7s; }
  .cmu-login-fade-6 { animation-delay: 0.9s; }

  /* ================================================================
     Wizard d'enrôlement (maquettes/cmu-enrolement.html)
     ================================================================ */

  /* Stepper 5 étapes */
  .cmu-stepper {
    @apply flex items-start bg-white border border-gray-200 rounded-cmu-lg;
    padding: 24px 32px;
  }
  .cmu-step { @apply flex-1 flex flex-col items-center relative cursor-pointer; }
  .cmu-step-line {
    @apply absolute h-[2px] bg-gray-200 pointer-events-none;
    top: 20px; left: calc(50% + 24px); right: calc(-50% + 24px); z-index: 0;
  }
  .cmu-step:last-child .cmu-step-line { display: none; }
  .cmu-step-line.done { @apply bg-cmu-green-600; }
  .cmu-step-circle {
    @apply w-10 h-10 rounded-full bg-white text-gray-500 flex items-center justify-center font-display font-semibold text-[15px] relative z-10 transition-all;
    border: 2px solid theme('colors.gray.300');
    margin-bottom: 10px;
  }
  .cmu-step.active .cmu-step-circle {
    @apply bg-cmu-green-800 text-white;
    border-color: theme('colors.cmu-green.800');
    box-shadow: 0 0 0 4px theme('colors.cmu-green.100');
    transform: scale(1.08);
  }
  .cmu-step.done .cmu-step-circle {
    @apply bg-cmu-green-600 text-white;
    border-color: theme('colors.cmu-green.600');
  }
  .cmu-step.done .cmu-step-circle svg { @apply w-[18px] h-[18px]; stroke-width: 3; }
  .cmu-step-label { @apply text-[12.5px] font-semibold text-cmu-ink text-center leading-snug transition-colors; }
  .cmu-step.active .cmu-step-label { @apply text-cmu-green-900; }
  .cmu-step.done .cmu-step-label { @apply text-cmu-green-700; }
  .cmu-step-hint { @apply text-[10.5px] text-cmu-ink mt-[3px]; letter-spacing: 0.02em; }

  /* Grid wizard : formulaire + récap sticky */
  .cmu-wizard-grid { @apply grid gap-5; grid-template-columns: 1fr 360px; }
  @media (max-width: 1200px) {
    .cmu-wizard-grid { grid-template-columns: 1fr; }
    .cmu-wizard-recap { position: static !important; }
  }

  /* Panneau formulaire */
  .cmu-wizard-panel {
    @apply bg-white border border-gray-200 rounded-cmu-lg overflow-hidden;
  }
  .cmu-wizard-panel-header {
    @apply border-b border-gray-100;
    padding: 24px 32px 18px;
  }
  .cmu-wizard-step-label {
    @apply text-[11px] font-bold uppercase text-cmu-gold-700;
    letter-spacing: 0.14em; margin-bottom: 6px;
  }
  .cmu-wizard-panel-header h2 {
    @apply font-display font-medium text-cmu-green-900;
    font-size: 24px; letter-spacing: -0.01em; margin-bottom: 4px;
  }
  .cmu-wizard-panel-header p {
    @apply text-[13px] text-cmu-ink leading-relaxed;
  }
  .cmu-wizard-panel-body { padding: 28px 32px; }
  .cmu-wizard-panel-footer {
    @apply border-t border-gray-100 flex items-center justify-between gap-3;
    background: theme('colors.gray.50');
    padding: 16px 32px;
  }

  /* Sections + champs */
  .cmu-form-section { margin-bottom: 28px; }
  .cmu-form-section:last-child { margin-bottom: 0; }
  .cmu-form-section-title {
    @apply text-[11px] font-bold uppercase text-cmu-ink flex items-center gap-2 border-b border-gray-100;
    letter-spacing: 0.14em; margin-bottom: 14px; padding-bottom: 10px;
  }
  .cmu-form-section-title::before {
    content: "";
    @apply bg-cmu-gold-500 rounded-sm;
    width: 3px; height: 14px;
  }

  .cmu-form-grid { @apply grid gap-x-4 gap-y-[14px]; grid-template-columns: 1fr 1fr; }
  .cmu-form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .cmu-form-field { @apply flex flex-col; }
  .cmu-form-field.full { grid-column: 1 / -1; }

  .cmu-form-label {
    @apply flex items-center gap-1.5 text-xs font-semibold text-cmu-ink;
    letter-spacing: 0.02em; margin-bottom: 7px;
  }
  .cmu-form-label .req,
  .cmu-upload-title .req { @apply text-cmu-red-600 font-bold; }
  .cmu-form-label .optional,
  .cmu-upload-title .optional { @apply text-cmu-ink font-normal text-[11px]; opacity: 0.65; }

  .cmu-input, .cmu-select {
    @apply w-full bg-white text-[13.5px] text-cmu-charcoal border border-gray-200 rounded-[9px] transition-colors;
    padding: 11px 14px; font-family: theme('fontFamily.body');
  }
  .cmu-input::placeholder { @apply text-cmu-ink/40; }
  .cmu-input:focus, .cmu-select:focus {
    @apply outline-none border-cmu-green-600;
    box-shadow: 0 0 0 3px rgba(26, 93, 58, 0.08);
  }
  .cmu-input.error, .cmu-select.error { @apply border-cmu-red-600; }

  .cmu-radio-group { @apply grid gap-2; grid-template-columns: 1fr 1fr; }
  .cmu-radio-group.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .cmu-radio-group.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .cmu-radio-pill {
    @apply flex items-center gap-[9px] bg-white text-left text-[13px] font-medium text-cmu-ink cursor-pointer border border-gray-200 rounded-[9px] transition-all;
    padding: 10px 14px; font-family: theme('fontFamily.body');
  }
  .cmu-radio-pill:hover { @apply border-cmu-green-500 bg-cmu-green-50; }
  .cmu-radio-pill.active {
    @apply border-cmu-green-700 bg-cmu-green-50 text-cmu-green-900 font-semibold;
  }
  .cmu-radio-pill .pill-dot {
    @apply rounded-full relative flex-shrink-0;
    width: 14px; height: 14px;
    border: 2px solid theme('colors.gray.300');
  }
  .cmu-radio-pill.active .pill-dot {
    border-color: theme('colors.cmu-green.700');
    @apply bg-cmu-green-700;
  }
  .cmu-radio-pill.active .pill-dot::after {
    content: ""; @apply absolute bg-white rounded-full;
    inset: 3px;
  }

  /* Upload zones */
  .cmu-upload-row { @apply grid gap-[14px]; grid-template-columns: 1fr 1fr; }
  .cmu-upload-zone {
    @apply text-center cursor-pointer flex flex-col items-center gap-2 relative transition-all;
    padding: 20px 16px; border-radius: 12px;
    border: 1.5px dashed theme('colors.gray.300');
    background: theme('colors.gray.50');
  }
  .cmu-upload-zone:hover { @apply bg-cmu-green-50; border-color: theme('colors.cmu-green.600'); }
  .cmu-upload-zone.uploaded {
    @apply bg-cmu-green-50;
    border-style: solid; border-color: theme('colors.cmu-green.600');
  }
  .cmu-upload-icon {
    @apply w-10 h-10 rounded-cmu bg-white flex items-center justify-center text-cmu-green-700;
    margin-bottom: 4px;
  }
  .cmu-upload-zone.uploaded .cmu-upload-icon { @apply bg-cmu-green-700 text-white; }
  .cmu-upload-title { @apply text-[13px] font-semibold text-cmu-ink; }
  .cmu-upload-zone.uploaded .cmu-upload-title { @apply text-cmu-green-700; }
  .cmu-upload-hint { @apply text-[11.5px] text-cmu-ink leading-snug; }
  .cmu-upload-check {
    @apply absolute top-2.5 right-2.5 w-[22px] h-[22px] rounded-full bg-cmu-green-600 text-white flex items-center justify-center transition-all;
    opacity: 0; transform: scale(0.6);
  }
  .cmu-upload-zone.uploaded .cmu-upload-check { opacity: 1; transform: scale(1); }

  /* OTP block */
  .cmu-otp-zone {
    @apply border border-cmu-green-100 rounded-cmu-lg;
    padding: 18px 20px;
    background: linear-gradient(135deg, theme('colors.cmu-green.50'), theme('colors.white'));
  }
  .cmu-otp-status {
    @apply flex items-center gap-2 text-xs font-semibold text-cmu-green-700;
    margin-bottom: 12px;
  }
  .cmu-otp-status .dot {
    @apply w-2 h-2 rounded-full bg-cmu-green-600 relative;
  }
  .cmu-otp-status .dot::after {
    content: ""; @apply absolute rounded-full border-cmu-green-600;
    inset: -4px; border-width: 1.5px;
    animation: cmu-pulse 2s ease-out infinite;
  }

  /* Carte profil cotisation (étape 4) */
  .cmu-profil-grid { @apply grid gap-3; grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 900px) { .cmu-profil-grid { grid-template-columns: 1fr 1fr; } }
  .cmu-profil-card {
    @apply relative flex flex-col gap-2 bg-white border border-gray-200 rounded-cmu-lg cursor-pointer transition-all;
    padding: 18px 16px;
  }
  .cmu-profil-card:hover {
    @apply border-cmu-gold-400 bg-cmu-gold-50;
  }
  .cmu-profil-card.active {
    @apply border-cmu-green-700 bg-cmu-green-50;
  }
  .cmu-profil-card-code {
    @apply text-[10.5px] font-bold uppercase text-cmu-gold-700;
    letter-spacing: 0.14em;
  }
  .cmu-profil-card-label {
    @apply text-[13px] font-semibold text-cmu-ink leading-snug;
  }
  .cmu-profil-card-montant {
    @apply font-display text-xl font-semibold text-cmu-green-800;
    line-height: 1; letter-spacing: -0.01em;
  }
  .cmu-profil-card-montant .unit { @apply italic text-cmu-gold-600 text-xs; margin-left: 3px; }
  .cmu-profil-card.active::after {
    content: "✓"; @apply absolute top-3 right-3 w-5 h-5 rounded-full bg-cmu-green-700 text-white text-xs flex items-center justify-center font-bold;
  }

  /* Carte téléphone (étape 3) */
  .cmu-phone-card {
    @apply border border-gray-200 rounded-cmu-lg transition-all relative;
    padding: 16px 18px; margin-bottom: 12px;
  }
  .cmu-phone-card.is-cotisation { @apply bg-cmu-green-50 border-cmu-green-700; }

  /* Ayants droit */
  .cmu-ayant-intro {
    @apply bg-cmu-gold-50 border border-cmu-gold-200 rounded-cmu flex items-center gap-[14px];
    border-left-width: 4px; border-left-color: theme('colors.cmu-gold.500');
    padding: 16px 20px; margin-bottom: 18px;
  }
  .cmu-ayant-intro svg { @apply text-cmu-gold-600 w-5 h-5 shrink-0; }
  .cmu-ayant-intro p { @apply text-[13px] text-cmu-ink leading-normal; }
  .cmu-ayant-intro strong { @apply text-cmu-gold-700 font-semibold; }

  .cmu-ayant-card {
    @apply border border-gray-200 rounded-cmu-lg flex items-center gap-[14px];
    padding: 16px 18px; margin-bottom: 10px;
  }
  .cmu-ayant-avatar {
    @apply w-11 h-11 rounded-full bg-cmu-gold-100 text-cmu-gold-700 flex items-center justify-center font-semibold text-sm shrink-0;
  }
  .cmu-ayant-info { @apply flex-1; }
  .cmu-ayant-name { @apply text-sm font-semibold text-cmu-charcoal; margin-bottom: 3px; }
  .cmu-ayant-meta { @apply text-xs text-cmu-ink flex gap-3.5; }

  .cmu-btn-add-ayant {
    @apply w-full flex items-center justify-center gap-2 rounded-cmu text-[13px] font-semibold text-cmu-ink bg-transparent transition-all;
    padding: 13px;
    border: 1.5px dashed theme('colors.gray.300');
    font-family: theme('fontFamily.body');
  }
  .cmu-btn-add-ayant:hover {
    @apply bg-cmu-green-50 text-cmu-green-700;
    border-color: theme('colors.cmu-green.600');
  }

  /* Récap panel sticky */
  .cmu-wizard-recap {
    @apply bg-white border border-gray-200 rounded-cmu-lg overflow-hidden sticky;
    top: 90px;
    align-self: flex-start;
  }
  .cmu-wizard-recap-header {
    @apply text-white relative overflow-hidden;
    padding: 20px 22px 14px;
    background: linear-gradient(135deg, theme('colors.cmu-green.800'), theme('colors.cmu-green.900'));
  }
  .cmu-wizard-recap-header::after {
    content: ""; @apply absolute top-0 right-0 pointer-events-none;
    width: 120px; height: 120px;
    background-image: radial-gradient(circle at 1px 1px, rgba(212, 160, 23, 0.25) 1px, transparent 0);
    background-size: 12px 12px;
    mask-image: radial-gradient(ellipse at top right, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at top right, black 0%, transparent 70%);
  }
  .cmu-wizard-recap-eyebrow {
    @apply text-[10px] font-bold uppercase text-cmu-gold-400;
    letter-spacing: 0.14em; margin-bottom: 6px;
  }
  .cmu-wizard-recap-title {
    @apply font-display font-medium;
    font-size: 20px; letter-spacing: -0.01em; margin-bottom: 4px;
  }
  .cmu-wizard-recap-sub { @apply text-xs; color: rgba(255,255,255,0.72); }
  .cmu-wizard-recap-body { padding: 18px 22px; }

  .cmu-wizard-recap-item {
    @apply flex items-start gap-2.5 relative border-b border-gray-100;
    padding: 12px 0;
  }
  .cmu-wizard-recap-item:last-child { border-bottom: none; }
  .cmu-wizard-recap-item-mark {
    @apply rounded-full bg-gray-100 text-cmu-ink flex items-center justify-center shrink-0 font-display font-semibold;
    width: 22px; height: 22px; font-size: 11px;
  }
  .cmu-wizard-recap-item.done .cmu-wizard-recap-item-mark {
    @apply bg-cmu-green-600 text-white;
  }
  .cmu-wizard-recap-item.active .cmu-wizard-recap-item-mark {
    @apply bg-cmu-gold-500 text-cmu-green-900;
    box-shadow: 0 0 0 3px theme('colors.cmu-gold.100');
  }
  .cmu-wizard-recap-item-body { @apply flex-1 min-w-0; padding-top: 2px; }
  .cmu-wizard-recap-item-label {
    @apply text-xs font-semibold text-cmu-ink leading-snug;
  }
  .cmu-wizard-recap-item-value {
    @apply text-[11.5px] text-cmu-ink leading-snug;
    margin-top: 4px; word-wrap: break-word;
  }
  .cmu-wizard-recap-item.done .cmu-wizard-recap-item-value { @apply text-cmu-green-700 font-medium; }
  .cmu-wizard-recap-item-value.pending { @apply text-cmu-ink italic; opacity: 0.5; }

  .cmu-wizard-recap-footer {
    @apply bg-cmu-green-50 border-t border-cmu-green-100;
    padding: 16px 22px;
  }
  .cmu-wizard-recap-footer-row {
    @apply flex items-center justify-between text-xs;
    margin-bottom: 6px;
  }
  .cmu-wizard-recap-footer-row:last-child { margin-bottom: 0; }
  .cmu-wizard-recap-footer-row .rk { @apply text-cmu-ink; }
  .cmu-wizard-recap-footer-row .rv { @apply font-display font-bold text-cmu-green-900 text-sm; }

  /* Transition des étapes */
  .cmu-step-content { animation: cmu-step-fade 0.4s ease-out; }

  /* Boutons wizard */
  .cmu-btn-submit {
    @apply px-5 py-[11px] rounded-cmu bg-cmu-gold-500 text-cmu-green-900 font-semibold text-[13px] inline-flex items-center gap-2 transition-all;
    box-shadow: 0 1px 3px rgba(212, 160, 23, 0.3);
  }
  .cmu-btn-submit:hover {
    @apply bg-cmu-gold-400 -translate-y-px;
    box-shadow: 0 4px 16px rgba(212, 160, 23, 0.35);
  }

  /* ================================================================
     Validation centrale — pattern mail client (queue + detail)
     maquettes/cmu-validation.html
     ================================================================ */
  .cmu-val-workspace {
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: calc(100vh - 64px);
  }

  /* Queue (colonne gauche) */
  .cmu-val-queue {
    @apply border-r border-gray-200 flex flex-col sticky;
    top: 64px;
    height: calc(100vh - 64px);
  }
  .cmu-val-queue-header {
    @apply border-b border-gray-100;
    padding: 20px 22px 14px;
  }
  .cmu-val-queue-eyebrow {
    @apply text-[10px] font-bold uppercase text-cmu-gold-700;
    letter-spacing: 0.14em; margin-bottom: 6px;
  }
  .cmu-val-queue-title-row { @apply flex items-baseline justify-between gap-2; }
  .cmu-val-queue-title {
    @apply font-display font-medium text-cmu-green-900;
    font-size: 22px; letter-spacing: -0.01em;
  }
  .cmu-val-queue-count {
    @apply text-[11px] font-bold text-cmu-green-900 bg-cmu-gold-400 rounded-full;
    padding: 3px 9px; letter-spacing: 0.08em;
  }
  .cmu-val-queue-sub { @apply text-xs text-cmu-ink mb-3.5; }
  .cmu-val-queue-filters { @apply flex gap-1.5 flex-wrap; }
  .cmu-filter-chip {
    @apply inline-flex items-center gap-1 bg-white text-[11.5px] font-medium text-cmu-ink border border-gray-200 rounded-full cursor-pointer transition-all;
    padding: 5px 10px;
  }
  .cmu-filter-chip:hover { @apply border-cmu-green-500 text-cmu-green-700; }
  .cmu-filter-chip.active {
    @apply bg-cmu-green-800 text-white;
    border-color: theme('colors.cmu-green.800');
  }

  .cmu-val-queue-search {
    @apply border-b border-gray-100 relative;
    padding: 12px 22px;
  }
  .cmu-val-queue-search input {
    @apply w-full text-[12.5px] text-cmu-charcoal border border-gray-200 rounded-lg transition-colors;
    padding: 9px 14px 9px 34px;
    background: theme('colors.gray.50');
    font-family: theme('fontFamily.body');
  }
  .cmu-val-queue-search input:focus {
    @apply outline-none bg-white border-cmu-green-600;
    box-shadow: 0 0 0 3px rgba(26, 93, 58, 0.08);
  }

  .cmu-val-queue-list { @apply flex-1 overflow-y-auto; padding: 4px 0; }
  .cmu-val-queue-item {
    @apply flex gap-3 border-b border-gray-100 cursor-pointer relative transition-colors;
    padding: 14px 22px;
  }
  .cmu-val-queue-item:hover { background: theme('colors.gray.50'); }
  .cmu-val-queue-item.active {
    @apply bg-cmu-green-50;
    box-shadow: inset 3px 0 0 theme('colors.cmu-green.700');
  }

  .cmu-val-queue-avatar {
    @apply w-[38px] h-[38px] rounded-full flex items-center justify-center font-semibold text-[13px] shrink-0;
  }
  .cmu-val-queue-avatar.v-green { @apply bg-cmu-green-100 text-cmu-green-800; }
  .cmu-val-queue-avatar.v-gold { @apply bg-cmu-gold-100 text-cmu-gold-700; }
  .cmu-val-queue-avatar.v-coral { background: #FAECE7; color: #993C1D; }
  .cmu-val-queue-avatar.v-pink { background: #FBEAF0; color: #993556; }
  .cmu-val-queue-body { @apply flex-1 min-w-0; }
  .cmu-val-queue-row-top {
    @apply flex justify-between items-baseline gap-2;
    margin-bottom: 4px;
  }
  .cmu-val-queue-name {
    @apply text-[13px] font-semibold text-cmu-charcoal leading-tight truncate;
  }
  .cmu-val-queue-time {
    @apply text-[11px] text-cmu-ink whitespace-nowrap shrink-0;
  }
  .cmu-val-queue-item.urgent .cmu-val-queue-time { @apply text-cmu-red-600 font-semibold; }
  .cmu-val-queue-meta {
    @apply text-[11.5px] text-cmu-ink leading-tight truncate;
    margin-bottom: 3px;
  }
  .cmu-val-queue-agent {
    @apply text-[11px] text-cmu-ink leading-tight flex items-center gap-1;
    opacity: 0.75;
  }
  .cmu-val-queue-badges { @apply flex gap-1 flex-wrap; margin-top: 5px; }
  .cmu-val-queue-item .q-badge {
    @apply rounded-full text-[10px] font-semibold;
    padding: 2px 7px;
  }
  .cmu-val-queue-item .q-badge.rgb { @apply bg-cmu-green-50 text-cmu-green-700; }
  .cmu-val-queue-item .q-badge.ram { @apply bg-cmu-gold-100 text-cmu-gold-700; }

  /* Détail (colonne droite) */
  .cmu-val-detail {
    @apply flex flex-col min-h-0;
    padding-bottom: 88px; /* espace pour action bar */
  }
  .cmu-val-detail-header {
    @apply border-b border-gray-100 flex items-start gap-5;
    padding: 24px 32px 20px;
  }
  .cmu-val-detail-avatar {
    @apply w-[68px] h-[68px] rounded-full bg-cmu-green-100 text-cmu-green-800 flex items-center justify-center font-display font-semibold shrink-0;
    font-size: 26px;
    box-shadow: 0 0 0 4px theme('colors.cmu-green.50'), 0 0 0 5px theme('colors.cmu-gold.500');
  }
  .cmu-val-detail-name {
    @apply font-display font-medium text-cmu-green-900;
    font-size: 28px; letter-spacing: -0.015em;
  }
  .cmu-val-pending-badge {
    @apply inline-flex items-center gap-1.5 bg-cmu-gold-100 text-cmu-gold-700 rounded-full text-[11.5px] font-bold;
    padding: 4px 11px; letter-spacing: 0.04em;
  }
  .cmu-val-pending-badge .dot {
    @apply w-1.5 h-1.5 rounded-full bg-cmu-gold-500 relative;
  }
  .cmu-val-pending-badge .dot::after {
    content: ""; @apply absolute rounded-full border-cmu-gold-500;
    inset: -3px; border-width: 1.5px;
    animation: cmu-pulse 2s ease-out infinite;
  }
  .cmu-val-detail-ius {
    @apply font-mono text-[12.5px] text-cmu-green-700 bg-cmu-green-50 rounded-md inline-block;
    padding: 4px 10px; margin-bottom: 14px;
  }
  .cmu-val-meta-grid {
    @apply grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 22px;
  }
  @media (max-width: 1400px) { .cmu-val-meta-grid { grid-template-columns: repeat(2, 1fr); } }
  .cmu-val-meta-cell { line-height: 1.3; }
  .cmu-val-meta-cell .dmk {
    @apply text-[10.5px] font-bold uppercase text-cmu-ink;
    letter-spacing: 0.12em; margin-bottom: 4px; opacity: 0.65;
  }
  .cmu-val-meta-cell .dmv {
    @apply text-[13px] text-cmu-charcoal font-medium;
  }

  .cmu-val-body {
    @apply grid gap-5;
    grid-template-columns: 1fr 320px;
    padding: 24px 32px 48px;
  }
  @media (max-width: 1400px) { .cmu-val-body { grid-template-columns: 1fr; } }

  .cmu-val-section { margin-bottom: 28px; }
  .cmu-val-section-title {
    @apply font-display font-medium text-cmu-green-900 flex items-center gap-2;
    font-size: 17px; margin-bottom: 14px;
  }
  .cmu-val-section-title::before {
    content: ""; @apply bg-cmu-gold-500 rounded-sm;
    width: 3px; height: 16px;
  }

  .cmu-val-info-grid {
    @apply grid border border-gray-100 rounded-cmu-lg;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px 20px; padding: 18px 20px;
    background: theme('colors.gray.50');
  }
  .cmu-val-info-cell .ik {
    @apply text-[10.5px] font-bold uppercase text-cmu-ink;
    letter-spacing: 0.12em; margin-bottom: 4px; opacity: 0.7;
  }
  .cmu-val-info-cell .iv {
    @apply text-[13.5px] text-cmu-charcoal font-medium leading-snug;
  }
  .cmu-val-info-cell .iv-mono { @apply font-mono text-[12.5px]; }

  /* Panneau contrôles automatiques */
  .cmu-val-side-col {
    @apply flex flex-col gap-[18px] sticky;
    top: 110px; align-self: flex-start;
  }
  .cmu-val-check-panel {
    @apply bg-white border border-gray-200 rounded-cmu-lg overflow-hidden;
  }
  .cmu-val-check-head {
    @apply text-white relative overflow-hidden;
    padding: 16px 20px 12px;
    background: linear-gradient(135deg, theme('colors.cmu-green.800'), theme('colors.cmu-green.900'));
  }
  .cmu-val-check-head::after {
    content: ""; @apply absolute top-0 right-0 pointer-events-none;
    width: 140px; height: 140px;
    background-image: radial-gradient(circle at 1px 1px, rgba(212, 160, 23, 0.25) 1px, transparent 0);
    background-size: 13px 13px;
    mask-image: radial-gradient(ellipse at top right, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at top right, black 0%, transparent 70%);
  }
  .cmu-val-check-eyebrow {
    @apply text-[10px] font-bold uppercase text-cmu-gold-400;
    letter-spacing: 0.14em; margin-bottom: 4px;
  }
  .cmu-val-check-title {
    @apply font-display font-medium;
    font-size: 17px; letter-spacing: -0.01em;
  }
  .cmu-val-check-sub { @apply text-[11.5px]; color: rgba(255,255,255,0.72); margin-top: 3px; }
  .cmu-val-check-list { padding: 6px 20px 16px; }
  .cmu-val-check-item {
    @apply flex items-start gap-2.5 border-b border-gray-100;
    padding: 11px 0;
  }
  .cmu-val-check-item:last-child { border-bottom: none; }
  .cmu-val-check-mark {
    @apply w-[22px] h-[22px] rounded-full flex items-center justify-center shrink-0;
    margin-top: 1px;
  }
  .cmu-val-check-mark.ok { @apply bg-cmu-green-100 text-cmu-green-700; }
  .cmu-val-check-mark.warn { background: theme('colors.cmu-gold.100'); color: theme('colors.cmu-gold.700'); }
  .cmu-val-check-mark.fail { @apply bg-cmu-red-100 text-cmu-red-700; }
  .cmu-val-check-body { @apply flex-1; }
  .cmu-val-check-label {
    @apply text-[12.5px] font-semibold text-cmu-charcoal leading-tight;
  }
  .cmu-val-check-desc {
    @apply text-[11px] text-cmu-ink leading-snug;
    margin-top: 3px; opacity: 0.75;
  }

  /* Timeline */
  .cmu-val-timeline {
    @apply bg-white border border-gray-200 rounded-cmu-lg;
    padding: 18px 20px;
  }
  .cmu-val-tl-title {
    @apply text-[11px] font-bold uppercase text-cmu-ink border-b border-gray-100;
    letter-spacing: 0.14em; margin-bottom: 14px; padding-bottom: 10px; opacity: 0.6;
  }
  .cmu-val-tl-item { @apply flex gap-3 relative; padding-bottom: 14px; }
  .cmu-val-tl-item:not(:last-child)::before {
    content: ""; @apply absolute bg-gray-200;
    left: 10px; top: 22px; bottom: 0; width: 1px;
  }
  .cmu-val-tl-dot {
    @apply w-5 h-5 rounded-full bg-gray-100 text-cmu-ink flex items-center justify-center shrink-0 relative z-[1];
  }
  .cmu-val-tl-dot.green { @apply bg-cmu-green-100 text-cmu-green-700; }
  .cmu-val-tl-dot.gold { background: theme('colors.cmu-gold.100'); color: theme('colors.cmu-gold.700'); }

  /* Action bar en bas */
  .cmu-val-action-bar {
    @apply fixed bottom-0 right-0 bg-white/95 backdrop-blur border-t border-gray-200 flex items-center justify-between z-30;
    left: calc(6px + 248px + 340px);
    padding: 16px 32px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
  }
  @media (max-width: 1400px) { .cmu-val-action-bar { left: calc(6px + 248px + 340px); } }
  .cmu-val-action-context { @apply flex items-center gap-2.5 text-[12.5px] text-cmu-ink; }
  .cmu-val-action-buttons { @apply flex gap-2.5; }
  .cmu-val-btn-approve {
    @apply inline-flex items-center gap-2 bg-cmu-green-800 text-white rounded-cmu font-semibold text-[13.5px] transition-all;
    padding: 12px 22px; letter-spacing: 0.03em;
    box-shadow: 0 1px 3px rgba(26, 93, 58, 0.18);
    border: 1px solid transparent;
  }
  .cmu-val-btn-approve:hover {
    @apply bg-cmu-green-700 -translate-y-px;
    box-shadow: 0 4px 14px rgba(26, 93, 58, 0.32);
  }
  .cmu-val-btn-reject {
    @apply inline-flex items-center gap-2 bg-white text-cmu-red-600 rounded-cmu font-semibold text-[13.5px] transition-all;
    padding: 12px 22px; letter-spacing: 0.03em;
    border: 1px solid theme('colors.cmu-red.600');
  }
  .cmu-val-btn-reject:hover {
    @apply bg-cmu-red-600 text-white;
    box-shadow: 0 2px 10px rgba(190, 22, 34, 0.24);
  }
  .cmu-val-btn-skip {
    @apply inline-flex items-center gap-2 bg-transparent text-cmu-ink rounded-cmu font-semibold text-[13.5px] transition-all;
    padding: 12px 22px; letter-spacing: 0.03em;
    border: 1px solid theme('colors.gray.300');
  }
  .cmu-val-btn-skip:hover { @apply text-cmu-green-700; border-color: theme('colors.cmu-green.500'); }

  /* ================================================================
     Carte bénéficiaire — cards-stage + recto/verso (maquettes/cmu-carte.html)
     ================================================================ */
  .cmu-cards-stage {
    @apply relative border border-gray-200 rounded-cmu-xl overflow-hidden;
    padding: 48px 32px 40px;
    background: linear-gradient(135deg,
      theme('colors.cmu-green.50'),
      theme('colors.white') 40%,
      theme('colors.cmu-gold.50') 100%);
  }
  .cmu-cards-stage::before {
    content: ""; @apply absolute top-0 right-0 pointer-events-none;
    width: 300px; height: 300px;
    background-image: radial-gradient(circle at 1px 1px, rgba(184, 134, 11, 0.1) 1px, transparent 0);
    background-size: 16px 16px;
    mask-image: radial-gradient(ellipse at top right, black 0%, transparent 60%);
    -webkit-mask-image: radial-gradient(ellipse at top right, black 0%, transparent 60%);
  }
  .cmu-cards-side-label {
    @apply absolute flex items-center gap-1.5 text-[10px] font-bold uppercase text-cmu-ink;
    top: 22px; right: 32px; letter-spacing: 0.18em; opacity: 0.55;
  }
  .cmu-cards-side-label .dot { @apply w-[5px] h-[5px] rounded-full bg-cmu-gold-500; }

  .cmu-cards-wrap {
    @apply flex justify-center items-center gap-8 flex-wrap relative z-10;
  }

  /* Carte : dimensions imprimées 460×290 */
  .cmu-fiche {
    width: 460px; height: 290px;
    @apply rounded-2xl relative overflow-hidden transition-transform;
    box-shadow:
      0 1px 1px rgba(0, 0, 0, 0.04),
      0 4px 8px rgba(26, 93, 58, 0.06),
      0 12px 28px rgba(26, 93, 58, 0.12),
      0 24px 48px rgba(26, 93, 58, 0.08);
  }
  .cmu-fiche:hover { transform: translateY(-4px); }

  /* Bande tricolore intégrée à la carte */
  .cmu-fiche-flag {
    @apply absolute top-0 bottom-0 left-0 flex flex-col z-20;
    width: 10px;
  }
  .cmu-fiche-flag span { @apply flex-1; }
  .cmu-fiche-flag .red { @apply bg-cmu-red-600; }
  .cmu-fiche-flag .yellow { background-color: #FCD116; }
  .cmu-fiche-flag .green { @apply bg-cmu-green-600; }

  /* ------ Recto ------ */
  .cmu-fiche-recto {
    background: linear-gradient(135deg, #FDFCF5 0%, #F8F3E4 50%, #FAF7EE 100%);
    color: theme('colors.cmu-green.900');
  }
  .cmu-fiche-recto::before {
    content: ""; @apply absolute inset-0 pointer-events-none;
    background-image:
      repeating-linear-gradient(45deg, rgba(184, 134, 11, 0.04) 0px, rgba(184, 134, 11, 0.04) 1px, transparent 1px, transparent 7px),
      repeating-linear-gradient(-45deg, rgba(26, 93, 58, 0.04) 0px, rgba(26, 93, 58, 0.04) 1px, transparent 1px, transparent 7px);
  }
  .cmu-fiche-recto::after {
    content: ""; @apply absolute top-0 right-0 pointer-events-none;
    width: 200px; height: 200px;
    background: radial-gradient(circle at top right, rgba(212, 160, 23, 0.15) 0%, transparent 60%);
  }

  .cmu-recto-header {
    @apply relative z-10 flex items-start gap-3;
    padding: 16px 20px 12px 24px;
    border-bottom: 1px solid rgba(212, 160, 23, 0.25);
  }
  .cmu-recto-emblem {
    @apply w-11 h-11 rounded-full flex items-center justify-center shrink-0 relative;
    background: linear-gradient(135deg, theme('colors.cmu-gold.500'), theme('colors.cmu-gold.700'));
    box-shadow: 0 2px 4px rgba(139, 101, 8, 0.25);
  }
  .cmu-recto-emblem::after {
    content: ""; @apply absolute rounded-full border border-white/35; inset: 2px;
  }
  .cmu-recto-emblem-inner {
    @apply w-[30px] h-[30px] rounded-full bg-cmu-green-900 text-cmu-gold-400 flex items-center justify-center font-display font-bold;
    font-size: 13px;
  }
  .cmu-recto-titles { @apply flex-1 min-w-0; }
  .cmu-recto-nation {
    @apply font-display font-bold text-cmu-green-900 leading-tight;
    font-size: 11px; letter-spacing: 0.08em; margin-bottom: 2px;
  }
  .cmu-recto-ministry {
    @apply text-cmu-ink;
    font-size: 8px; letter-spacing: 0.04em; opacity: 0.75;
  }
  .cmu-recto-motto {
    @apply font-display italic text-cmu-gold-700;
    font-size: 8px; letter-spacing: 0.06em; margin-top: 2px;
  }
  .cmu-recto-type {
    @apply text-right font-bold uppercase text-cmu-ink;
    font-size: 7.5px; letter-spacing: 0.12em; opacity: 0.6;
  }
  .cmu-recto-type strong {
    @apply block font-display font-semibold text-cmu-green-900 normal-case;
    font-size: 14px; letter-spacing: 0.01em; margin-top: 2px;
  }

  .cmu-recto-body {
    @apply relative z-10 flex gap-[18px];
    padding: 16px 22px 0 24px;
  }
  .cmu-recto-photo {
    @apply rounded-lg shrink-0 relative overflow-hidden flex items-center justify-center;
    width: 90px; height: 110px;
    background: linear-gradient(180deg, theme('colors.cmu-green.100'), theme('colors.cmu-green.50'));
    border: 1.5px solid theme('colors.cmu-gold.500');
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  }
  .cmu-recto-photo-avatar {
    @apply font-display font-semibold text-cmu-green-800;
    font-size: 32px; letter-spacing: 0.02em;
  }

  .cmu-recto-info { @apply flex-1 min-w-0 flex flex-col; gap: 9px; }
  .cmu-recto-field-label {
    @apply font-bold uppercase text-cmu-ink;
    font-size: 7px; letter-spacing: 0.14em; margin-bottom: 3px; opacity: 0.6;
  }
  .cmu-recto-field-value {
    @apply font-semibold text-cmu-green-900;
    font-size: 13px; letter-spacing: 0.01em;
  }
  .cmu-recto-field.name .cmu-recto-field-value {
    @apply font-display;
    font-size: 16px; letter-spacing: -0.005em;
  }
  .cmu-recto-ius {
    @apply font-mono font-bold text-cmu-green-900;
    font-size: 14px; letter-spacing: 0.04em;
  }
  .cmu-recto-dates { @apply flex gap-4; }

  .cmu-recto-footer {
    @apply absolute flex items-center justify-between z-10;
    bottom: 10px; left: 24px; right: 20px;
  }
  .cmu-recto-validity {
    @apply font-semibold text-cmu-ink;
    font-size: 8.5px; letter-spacing: 0.04em;
  }
  .cmu-recto-validity strong { @apply text-cmu-green-900 font-bold; }
  .cmu-recto-coverage {
    @apply inline-flex items-center gap-1 rounded-full bg-cmu-green-800 text-cmu-gold-400 font-bold;
    padding: 3px 9px;
    font-size: 9px; letter-spacing: 0.08em;
  }
  .cmu-recto-coverage .pct { font-size: 11px; }

  /* ------ Verso ------ */
  .cmu-fiche-verso {
    background: linear-gradient(135deg, #FAF7EE 0%, #F3EED9 100%);
    color: theme('colors.cmu-green.900');
  }
  .cmu-verso-header {
    @apply relative z-10 font-display font-medium text-cmu-green-900;
    padding: 16px 24px 10px;
    font-size: 13px; letter-spacing: -0.01em;
    border-bottom: 1px solid rgba(212, 160, 23, 0.25);
  }
  .cmu-verso-body { @apply relative z-10 grid grid-cols-2; padding: 14px 24px; gap: 10px 20px; }
  .cmu-verso-field-label {
    @apply font-bold uppercase text-cmu-ink;
    font-size: 7px; letter-spacing: 0.14em; margin-bottom: 3px; opacity: 0.6;
  }
  .cmu-verso-field-value {
    @apply text-cmu-green-900 font-medium;
    font-size: 11.5px; line-height: 1.3;
  }
  .cmu-verso-legal {
    @apply absolute border-t border-cmu-gold-500/25 text-cmu-ink;
    left: 24px; right: 24px; bottom: 12px;
    padding-top: 6px; font-size: 8px; line-height: 1.5; opacity: 0.7;
  }
  .cmu-verso-qr {
    @apply absolute bg-white rounded flex items-center justify-center;
    bottom: 44px; right: 24px;
    width: 72px; height: 72px;
    padding: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }

  /* ================================================================
     \u00c9cran prise en charge (maquettes/cmu-prise-en-charge.html)
     ================================================================ */

  /* Barre de recherche IUS / t\u00e9l */
  .cmu-pec-search {
    @apply flex items-center gap-3 bg-white border border-gray-200 rounded-cmu-lg;
    padding: 14px 18px;
  }
  .cmu-pec-search-tabs { @apply flex rounded-lg p-[3px]; background: theme('colors.gray.50'); }
  .cmu-pec-search-tab {
    @apply inline-flex items-center gap-1.5 rounded-md text-[12.5px] font-semibold text-cmu-ink cursor-pointer transition-colors;
    padding: 7px 13px;
  }
  .cmu-pec-search-tab.active {
    @apply bg-white text-cmu-green-800;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }
  .cmu-pec-search-input {
    @apply flex-1 border border-gray-200 rounded-lg text-[13.5px] text-cmu-charcoal transition-colors;
    padding: 10px 14px;
    background: theme('colors.gray.50');
    font-family: theme('fontFamily.body');
  }
  .cmu-pec-search-input:focus {
    @apply outline-none bg-white border-cmu-green-600;
    box-shadow: 0 0 0 3px rgba(26, 93, 58, 0.08);
  }

  /* Carte b\u00e9n\u00e9ficiaire */
  .cmu-pec-benef {
    @apply bg-white border border-gray-200 rounded-cmu-lg overflow-hidden flex flex-col;
  }
  .cmu-pec-benef-head { @apply flex items-stretch; }
  .cmu-pec-benef-identity {
    @apply flex-1 flex items-center gap-5 relative;
    padding: 24px 28px;
  }
  .cmu-pec-benef-avatar {
    @apply w-[82px] h-[82px] rounded-full bg-cmu-green-100 text-cmu-green-800 flex items-center justify-center font-display font-semibold shrink-0;
    font-size: 30px;
    box-shadow: 0 0 0 4px theme('colors.cmu-green.50'), 0 0 0 5px theme('colors.cmu-gold.500');
  }
  .cmu-pec-benef-name {
    @apply font-display font-medium text-cmu-green-900 leading-tight;
    font-size: 28px; letter-spacing: -0.015em; margin-bottom: 6px;
  }
  .cmu-pec-benef-sub { @apply text-[13px] text-cmu-ink mb-2.5; }
  .cmu-pec-benef-ius {
    @apply inline-block font-mono text-[13px] font-semibold text-cmu-green-700 bg-cmu-green-50 rounded-md;
    padding: 5px 11px; letter-spacing: 0.02em;
  }

  /* Verdict d'\u00e9ligibilit\u00e9 : badge r\u00e9gime */
  .cmu-pec-verdict {
    @apply relative overflow-hidden flex flex-col justify-center text-white;
    width: 320px; padding: 24px 28px;
    background: linear-gradient(135deg, theme('colors.cmu-green.800'), theme('colors.cmu-green.900'));
  }
  .cmu-pec-verdict.ram {
    background: linear-gradient(135deg, theme('colors.cmu-green.900'), #000000 130%);
    border-left: 3px solid theme('colors.cmu-gold.500');
  }
  .cmu-pec-verdict.non-eligible {
    background: linear-gradient(135deg, theme('colors.cmu-red.700'), #5a0f14);
  }
  .cmu-pec-verdict::after {
    content: ""; @apply absolute top-0 right-0 pointer-events-none;
    width: 180px; height: 180px;
    background-image: radial-gradient(circle at 1px 1px, rgba(212, 160, 23, 0.3) 1px, transparent 0);
    background-size: 13px 13px;
    mask-image: radial-gradient(ellipse at top right, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at top right, black 0%, transparent 70%);
  }
  .cmu-pec-verdict-eyebrow {
    @apply text-[10px] font-bold uppercase text-cmu-gold-400 relative z-10;
    letter-spacing: 0.14em; margin-bottom: 10px;
  }
  .cmu-pec-verdict-title {
    @apply font-display font-semibold relative z-10 leading-none;
    font-size: 34px; letter-spacing: -0.02em;
  }
  .cmu-pec-verdict-desc {
    @apply text-[13px] relative z-10;
    color: rgba(255,255,255,0.78); line-height: 1.5; margin-top: 10px;
  }

  /* Onglets cat\u00e9gories */
  .cmu-pec-cat-tabs {
    @apply flex gap-1.5 border-b border-gray-100 overflow-x-auto;
    padding: 14px 22px;
  }
  .cmu-pec-cat-tab {
    @apply inline-flex items-center gap-1.5 bg-white text-[12px] font-medium text-cmu-ink cursor-pointer whitespace-nowrap border border-gray-200 rounded-full transition-colors;
    padding: 7px 13px;
  }
  .cmu-pec-cat-tab:hover { @apply border-cmu-green-500 text-cmu-green-700; }
  .cmu-pec-cat-tab.active {
    @apply bg-cmu-green-800 text-white;
    border-color: theme('colors.cmu-green.800');
  }
  .cmu-pec-cat-tab .tab-count {
    @apply rounded-full text-[10.5px] font-bold;
    padding: 1px 6px;
    background: theme('colors.gray.100'); color: theme('colors.cmu-ink');
  }
  .cmu-pec-cat-tab.active .tab-count {
    background: rgba(255,255,255,0.15); color: white;
  }

  /* Rang\u00e9es d'actes */
  .cmu-pec-act-list { @apply max-h-[620px] overflow-y-auto; padding: 4px 0; }
  .cmu-pec-act-row {
    @apply flex items-center gap-3.5 border-b border-gray-100 cursor-pointer transition-colors;
    padding: 14px 22px;
  }
  .cmu-pec-act-row:hover { background: theme('colors.gray.50'); }
  .cmu-pec-act-row.selected { @apply bg-cmu-green-50; }
  .cmu-pec-act-check {
    @apply w-[22px] h-[22px] rounded-md border bg-white flex items-center justify-center shrink-0 transition-colors;
    border-width: 1.5px; border-color: theme('colors.gray.300');
    color: transparent;
  }
  .cmu-pec-act-row.selected .cmu-pec-act-check {
    @apply bg-cmu-green-700 text-white;
    border-color: theme('colors.cmu-green.700');
  }
  .cmu-pec-act-name { @apply text-[13.5px] font-semibold text-cmu-charcoal; }
  .cmu-pec-act-row.selected .cmu-pec-act-name { @apply text-cmu-green-900; }
  .cmu-pec-act-price {
    @apply font-display font-semibold text-cmu-green-900 whitespace-nowrap;
    font-size: 17px; letter-spacing: -0.01em;
  }
  .cmu-pec-act-price .u { @apply italic font-normal text-cmu-gold-600; font-size: 11px; margin-left: 2px; }
  .cmu-pec-act-code {
    @apply inline-block font-mono text-[10.5px] text-cmu-ink rounded-[4px];
    padding: 1px 6px;
    background: theme('colors.gray.100');
  }
  .cmu-pec-act-split { @apply flex items-center gap-1 text-[11px]; }
  .cmu-pec-act-split .cmu { @apply text-cmu-green-700 font-semibold; }
  .cmu-pec-act-split .pat { @apply text-cmu-gold-700 font-semibold; }
  .cmu-pec-act-split .sep { @apply text-cmu-ink; opacity: 0.5; }

  /* Panneau bill (droite sticky) */
  .cmu-pec-bill {
    @apply bg-white border border-gray-200 rounded-cmu-lg overflow-hidden sticky self-start;
    top: 84px;
  }
  .cmu-pec-bill-head { @apply border-b border-gray-100; padding: 18px 22px 12px; }
  .cmu-pec-bill-title {
    @apply font-display font-medium text-cmu-green-900;
    font-size: 20px;
  }
  .cmu-pec-bill-selected { max-height: 260px; overflow-y: auto; padding: 10px 22px; }
  .cmu-pec-bill-row {
    @apply flex items-center justify-between gap-2.5 border-b border-gray-100;
    padding: 10px 0;
  }
  .cmu-pec-bill-row:last-child { border-bottom: none; }
  .cmu-pec-bill-row-name {
    @apply text-[12.5px] font-semibold text-cmu-charcoal leading-tight;
    margin-bottom: 2px;
  }
  .cmu-pec-bill-row-meta { @apply text-[10.5px] text-cmu-ink; opacity: 0.7; }
  .cmu-pec-bill-row-price {
    @apply font-display font-semibold text-cmu-green-900 whitespace-nowrap;
    font-size: 14px;
  }

  /* Barre 80/20 visualis\u00e9e */
  .cmu-pec-split-viz {
    @apply border-y border-gray-100;
    padding: 20px 22px;
    background: linear-gradient(135deg, theme('colors.cmu-green.50'), theme('colors.white'));
  }
  .cmu-pec-split-total-row { @apply flex items-baseline justify-between mb-3.5; }
  .cmu-pec-split-total-label { @apply text-xs font-semibold text-cmu-ink; letter-spacing: 0.02em; }
  .cmu-pec-split-total-value {
    @apply font-display font-semibold text-cmu-green-900;
    font-size: 22px; letter-spacing: -0.015em;
  }
  .cmu-pec-split-bar {
    @apply flex rounded-lg overflow-hidden mb-3 relative;
    height: 42px;
  }
  .cmu-pec-split-bar-cmu {
    @apply flex items-center justify-center text-white font-bold;
    font-size: 13px; letter-spacing: 0.04em;
    background: linear-gradient(135deg, theme('colors.cmu-green.700'), theme('colors.cmu-green.800'));
  }
  .cmu-pec-split-bar-patient {
    @apply flex items-center justify-center text-cmu-green-900 font-bold;
    font-size: 13px; letter-spacing: 0.04em;
    background: linear-gradient(135deg, theme('colors.cmu-gold.500'), theme('colors.cmu-gold.600'));
  }
  .cmu-pec-split-details { @apply grid gap-2.5; grid-template-columns: 1fr 1fr; }
  .cmu-pec-split-card {
    @apply bg-white border border-gray-200 rounded-lg;
    padding: 12px 14px;
  }
  .cmu-pec-split-card.cmu { @apply bg-cmu-green-50 border-cmu-green-200; }
  .cmu-pec-split-card.patient { @apply bg-cmu-gold-50 border-cmu-gold-200; }
  .cmu-pec-split-card-label {
    @apply text-[10.5px] font-bold uppercase;
    letter-spacing: 0.1em; margin-bottom: 4px;
  }
  .cmu-pec-split-card.cmu .cmu-pec-split-card-label { @apply text-cmu-green-700; }
  .cmu-pec-split-card.patient .cmu-pec-split-card-label { @apply text-cmu-gold-700; }
  .cmu-pec-split-card-value {
    @apply font-display font-semibold;
    font-size: 19px; letter-spacing: -0.015em;
  }
  .cmu-pec-split-card.cmu .cmu-pec-split-card-value { @apply text-cmu-green-900; }
  .cmu-pec-split-card.patient .cmu-pec-split-card-value { @apply text-cmu-gold-700; }

  /* Action bar PEC */
  .cmu-pec-action-bar {
    @apply bg-white/95 backdrop-blur border-t border-gray-200 flex items-center justify-between;
    padding: 14px 24px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
  }
  .cmu-pec-action-pay-label {
    @apply text-[10.5px] font-bold uppercase text-cmu-ink;
    letter-spacing: 0.12em; opacity: 0.7;
  }
  .cmu-pec-action-pay-value {
    @apply font-display font-semibold text-cmu-gold-700;
    font-size: 26px; letter-spacing: -0.015em;
  }
}

@keyframes cmu-step-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cmu-fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cmu-pulse {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Responsive */
@media (max-width: 1100px) {
  .cmu-login-hero { padding: 48px 48px 40px 64px; flex: 0 0 50%; }
  .cmu-login-form-panel { padding: 40px 48px; }
}
@media (max-width: 900px) {
  .cmu-login-body { flex-direction: column; }
  .cmu-login-hero, .cmu-login-form-panel { flex: none; width: 100%; }
  .cmu-login-hero { padding: 48px 32px 40px 44px; min-height: auto; }
  .cmu-login-content { margin-top: 32px; }
  .cmu-login-form-panel { padding: 40px 32px 80px; }
  .cmu-login-form-footer { position: static; margin-top: 32px; }
}

/* ============================================================
   Responsive — adaptation mobile/tablette des écrans 2 colonnes
   (wizard enrôlement & PEC, validation centrale).
   Breakpoints alignés sur Tailwind : lg=1024, md=768, sm=640.
   ============================================================ */

/* Sous lg : sidebar en drawer, contenu pleine largeur */
@media (max-width: 1023px) {
  /* Validation : la barre d'action fixe ne réserve plus la sidebar */
  .cmu-val-action-bar { left: 0; }
  /* Validation : queue + détail s'empilent, queue non pleine hauteur */
  .cmu-val-workspace { grid-template-columns: 1fr; }
  .cmu-val-queue { position: static; height: auto; max-height: 52vh; overflow-y: auto; }
}

/* Tablette portrait / grand téléphone */
@media (max-width: 768px) {
  .cmu-radio-group.cols-3,
  .cmu-radio-group.cols-4 { grid-template-columns: 1fr 1fr; }
  .cmu-val-info-grid { grid-template-columns: 1fr 1fr; }
  .cmu-val-meta-grid { grid-template-columns: 1fr 1fr; }
}

/* Téléphone */
@media (max-width: 640px) {
  .cmu-form-grid,
  .cmu-form-grid.cols-3 { grid-template-columns: 1fr; }
  .cmu-upload-row { grid-template-columns: 1fr; }
  .cmu-profil-grid { grid-template-columns: 1fr; }
  .cmu-val-info-grid,
  .cmu-val-meta-grid { grid-template-columns: 1fr; }
  .cmu-pec-split-details { grid-template-columns: 1fr; }

  /* Paddings allégés */
  .cmu-wizard-panel-header { padding: 18px 18px 14px; }
  .cmu-wizard-panel-body { padding: 20px 18px; }
  .cmu-wizard-panel-footer { padding: 14px 18px; }
  .cmu-val-body { padding: 16px 16px 104px; }

  /* Stepper compact, sans sous-titres */
  .cmu-stepper { padding: 16px 10px; }
  .cmu-step-hint { display: none; }
  .cmu-step-label { font-size: 11px; }

  /* Barre d'action validation : pleine largeur, boutons répartis */
  .cmu-val-action-bar { padding: 10px 14px; }
  .cmu-val-action-context { display: none; }
  .cmu-val-action-buttons { width: 100%; }
  .cmu-val-action-buttons > * { flex: 1 1 0; justify-content: center; }
}

/* Correction du décalage de la barre d'action en tablette (sidebar visible,
   détail déjà empilé : on ne réserve plus la colonne queue de 340px) */
@media (min-width: 1024px) and (max-width: 1400px) {
  .cmu-val-action-bar { left: calc(6px + 248px); }
}