/* ── ROOT ──────────────────────────────────────────── */
    :root {
      --navy:       #0b1f3a;
      --navy-mid:   #132d52;
      --navy-light: #1e4175;
      --gold:       #c9a84c;
      --gold-light: #e2c170;
      --gold-pale:  #f7f0dd;
      --cream:      #faf8f3;
      --white:      #ffffff;
      --text:       #2c2c2c;
      --text-light: #6b7280;
      --border:     rgba(201,168,76,0.25);
      --success:    #16a34a;
      --error:      #dc2626;

      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-body:    'DM Sans', sans-serif;

      --radius-sm: 6px;
      --radius-md: 14px;
      --radius-lg: 24px;
      --shadow-md: 0 8px 40px rgba(11,31,58,0.16);
      --shadow-lg: 0 20px 60px rgba(11,31,58,0.22);
      --transition: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; font-size: 16px; }

    body {
      font-family: var(--font-body);
      background: var(--cream);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 16px;
      position: relative;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* Fond décoratif */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 0% 0%,   rgba(11,31,58,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 100% 100%, rgba(201,168,76,0.07) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }

    /* Feuille décorative */
    body::after {
      content: '🍁';
      position: fixed;
      bottom: -40px;
      right: -20px;
      font-size: clamp(8rem, 18vw, 16rem);
      opacity: 0.04;
      pointer-events: none;
      z-index: 0;
      line-height: 1;
    }

    /* ── CARTE PRINCIPALE ──────────────────────────────── */
    .upload-card {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 560px;
      background: var(--white);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      animation: cardIn .6s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    @keyframes cardIn {
      from { opacity: 0; transform: translateY(32px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── EN-TÊTE ───────────────────────────────────────── */
    .card-header {
      background: var(--navy);
      padding: 40px 44px 36px;
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    .card-header::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 80% 20%, rgba(201,168,76,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 10% 80%, rgba(30,65,117,0.5) 0%, transparent 60%);
      pointer-events: none;
    }

    .card-header-icon {
      position: relative;
      z-index: 1;
      width: 60px;
      height: 60px;
      background: rgba(201,168,76,0.15);
      border: 2px solid rgba(201,168,76,0.35);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 1.4rem;
      color: var(--gold);
    }

    .card-header h1 {
      position: relative;
      z-index: 1;
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 4vw, 2.2rem);
      font-weight: 600;
      color: var(--white);
      margin-bottom: 10px;
      line-height: 1.2;
    }

    .card-header h1 em {
      font-style: italic;
      color: var(--gold-light);
    }

    .card-header p {
      position: relative;
      z-index: 1;
      font-size: .88rem;
      color: rgba(255,255,255,0.55);
      letter-spacing: .03em;
    }

    /* Séparateur doré */
    .card-header-divider {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      border-radius: 2px;
    }

    /* ── CORPS ─────────────────────────────────────────── */
    .card-body {
      padding: 40px 44px;
    }

    /* ── ALERTES ───────────────────────────────────────── */
    .alert {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 16px 18px;
      border-radius: var(--radius-md);
      margin-bottom: 28px;
      font-size: .9rem;
      line-height: 1.5;
      animation: alertIn .4s ease both;
    }

    @keyframes alertIn {
      from { opacity: 0; transform: translateY(-10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .alert-icon {
      font-size: 1.1rem;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .alert--success {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      color: var(--success);
    }

    .alert--error {
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: var(--error);
    }

    /* ── GRILLE DU FORMULAIRE ──────────────────────────── */
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-group.full { grid-column: 1 / -1; }

    /* ── LABEL ─────────────────────────────────────────── */
    label {
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--navy);
      display: flex;
      align-items: center;
      gap: 7px;
    }

    label i {
      color: var(--gold);
      font-size: .8rem;
    }

    .required-dot {
      width: 5px;
      height: 5px;
      background: var(--gold);
      border-radius: 50%;
      display: inline-block;
      margin-left: auto;
    }

    /* ── INPUTS ────────────────────────────────────────── */
    input[type="text"],
    input[type="number"],
    select,
    textarea {
      width: 100%;
      font-family: var(--font-body);
      font-size: .92rem;
      color: var(--text);
      background: var(--cream);
      border: 1.5px solid rgba(11,31,58,0.12);
      border-radius: var(--radius-sm);
      padding: 12px 16px;
      outline: none;
      transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
      -webkit-appearance: none;
      appearance: none;
    }

    input[type="text"]:focus,
    input[type="number"]:focus,
    select:focus,
    textarea:focus {
      border-color: var(--gold);
      background: var(--white);
      box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
    }

    input::placeholder,
    textarea::placeholder { color: var(--text-light); }

    select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 40px;
      cursor: pointer;
    }

    textarea {
      resize: vertical;
      min-height: 110px;
      line-height: 1.6;
    }

    /* ── ÉTOILES ───────────────────────────────────────── */
    .star-group {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .star-group input[type="radio"] { display: none; }

    .star-group label {
      font-size: 1.7rem;
      color: rgba(201,168,76,0.25);
      cursor: pointer;
      transition: color var(--transition), transform var(--transition);
      text-transform: none;
      letter-spacing: 0;
      font-weight: 400;
      padding: 0;
      gap: 0;
      line-height: 1;
    }

    .star-group label:hover,
    .star-group label:hover ~ label,
    .star-group input[type="radio"]:checked ~ label {
      color: rgba(201,168,76,0.25);
    }

    /* Étoiles sélectionnées – on cible en sens inverse via CSS pur */
    .star-group {
      direction: rtl;
      justify-content: flex-end;
    }

    .star-group label:hover,
    .star-group label:hover ~ label {
      color: var(--gold);
      transform: scale(1.15);
    }

    .star-group input[type="radio"]:checked ~ label {
      color: var(--gold);
    }

    .star-group input[type="radio"]:checked + label {
      color: var(--gold);
    }

    /* Wrapper pour remettre LTR les éléments suivants */
    .star-wrapper {
      direction: rtl;
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .star-wrapper input[type="radio"] { display: none; }

    .star-wrapper label {
      font-size: 1.6rem;
      cursor: pointer;
      color: rgba(201,168,76,0.25);
      transition: color var(--transition), transform var(--transition);
      text-transform: none;
      letter-spacing: 0;
      font-weight: 400;
      line-height: 1;
    }

    .star-wrapper label:hover,
    .star-wrapper label:hover ~ label,
    .star-wrapper input[type="radio"]:checked ~ label {
      color: var(--gold) !important;
    }

    /* ── UPLOAD PHOTO ──────────────────────────────────── */
    .file-drop {
      border: 2px dashed rgba(201,168,76,0.35);
      border-radius: var(--radius-md);
      padding: 28px 20px;
      text-align: center;
      cursor: pointer;
      transition: border-color var(--transition), background var(--transition);
      position: relative;
      background: var(--cream);
    }

    .file-drop:hover,
    .file-drop.drag-over {
      border-color: var(--gold);
      background: var(--gold-pale);
    }

    .file-drop input[type="file"] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
      width: 100%;
      height: 100%;
    }

    .file-drop-icon {
      font-size: 2rem;
      color: var(--gold);
      margin-bottom: 12px;
      display: block;
    }

    .file-drop-text {
      font-size: .88rem;
      color: var(--text-light);
      line-height: 1.6;
    }

    .file-drop-text strong {
      color: var(--gold);
      font-weight: 600;
    }

    .file-drop-hint {
      font-size: .75rem;
      color: rgba(11,31,58,0.35);
      margin-top: 6px;
      display: block;
    }

    #file-name-display {
      margin-top: 10px;
      font-size: .82rem;
      color: var(--navy);
      font-weight: 500;
      display: none;
    }

    #file-name-display.visible {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
    }

    #file-name-display i { color: var(--gold); }

    /* ── BOUTON SUBMIT ─────────────────────────────────── */
    .btn-submit {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: var(--gold);
      color: var(--navy);
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 16px 32px;
      border: 2px solid var(--gold);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: var(--transition);
      margin-top: 8px;
    }

    .btn-submit:hover {
      background: transparent;
      color: var(--gold);
    }

    .btn-submit:active { transform: scale(0.98); }

    /* ── FOOTER MINI ───────────────────────────────────── */
    .card-footer {
      background: var(--cream);
      border-top: 1px solid var(--border);
      padding: 18px 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
    }

    .card-footer a {
      font-size: .82rem;
      color: var(--text-light);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: color var(--transition);
      text-decoration: none;
    }

    .card-footer a:hover { color: var(--gold); }

    .card-footer-logo {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 300;
      color: var(--navy);
    }

    .card-footer-logo strong { color: var(--gold); font-weight: 700; }

    /* ── SÉPARATEUR SECTION ────────────────────────────── */
    .form-section-label {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--gold);
      display: flex;
      align-items: center;
      gap: 12px;
      grid-column: 1 / -1;
      margin-top: 8px;
    }

    .form-section-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    /* ── RESPONSIVE ────────────────────────────────────── */
    @media (max-width: 580px) {
      .card-header  { padding: 32px 24px 28px; }
      .card-body    { padding: 28px 24px; }
      .card-footer  { padding: 16px 24px; }
      .form-grid    { grid-template-columns: 1fr; }
      .form-group.full { grid-column: 1; }
      .form-section-label { grid-column: 1; }
    }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}

.btn-back:hover {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}