/* --- VARIABLES --- */
:root {
  --primary: #e5006d;      /* Rose SDN */
  --primary-hover: #c4005d;
  --sdn-blue: #3369a9;    /* Bleu SDN */
  --white: #ffffff;
  --text-dark: #111;
  --text-light: #666;
  --border: #ddd;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* --- BASE --- */
* { box-sizing: border-box; }

body { 
    font-family: "Inter", sans-serif; 
    background-color: transparent; 
    margin: 0;
    padding: 0;
    color: var(--text-dark);
    display: flex;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 100%;
    max-width: 850px;
    padding: 10px;
}

.configurator {
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    text-align: center;
}

/* TYPO BEBAS AFFINÉE SANS ESPACEMENT */
.main-title {
    font-family: "Bebas Neue", sans-serif;
    font-size: 2.8rem;
    font-weight: 100 !important;
    letter-spacing: 0 !important;
    color: var(--text-dark);
    margin-bottom: 10px;
    text-transform: uppercase;
    line-height: 1;
}

.warning-subtitle {
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.success-instruction {
    font-weight: 600; 
    color: var(--primary); 
    margin-bottom: 25px;
    font-size: 0.85rem;
    text-transform: uppercase;
}

/* PROCÉDURE */
.procedure-box {
    background: #f8f8f8;
    border-radius: 8px;
    border: 1px solid #eee;
    padding: 20px;
    margin-bottom: 30px;
    text-align: left;
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.step { margin-bottom: 12px; display: flex; align-items: flex-start; }
.step-number {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    background: var(--sdn-blue);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    font-size: 11px;
    margin-right: 10px;
}

.success-procedure {
    margin-bottom: 30px;
    background: #fff;
    border: 1px solid var(--sdn-blue);
}

/* MENU & ÉDITION */
.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
    text-align: left;
}
label { font-size: 0.8rem; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; color: #444; display: block;}

select {
  width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 6px;
  font-family: "Inter", sans-serif; font-size: 16px; background: #fff;
}

.edit-zone {
    background-color: #fff3bf; border-bottom: 2px solid #ff922b;
    padding: 0 4px; border-radius: 4px; cursor: text; display: inline-block; outline: none;
}
.edit-zone:focus { border-bottom-color: var(--primary); }

#signature-to-copy { 
    background: white; padding: 25px; border: 2px dashed var(--sdn-blue); 
    border-radius: 8px; display: inline-block; text-align: left; margin-bottom: 30px;
}

/* BOUTONS SDN */
.btn-submit {
  background-color: var(--primary); color: white;
  font-family: "Bebas Neue", sans-serif; font-size: 1.6rem;
  font-weight: 100 !important; letter-spacing: 0 !important;
  border: none; border-radius: 8px; padding: 15px 40px; cursor: pointer; 
  width: 100%; transition: all 0.3s; display: flex; justify-content: center; align-items: center; text-transform: uppercase;
}
.btn-submit:hover { background-color: var(--primary-hover); }

/* SUCCÈS */
.modal-content { text-align: center; padding: 40px 20px; border-top: 6px solid var(--primary); display: none; animation: fadeIn 0.4s ease; }
.modal-icon { color: var(--primary); margin-bottom: 20px; }
.modal-icon svg { width: 96px; height: 96px; }
.modal-content h2 { font-family: "Bebas Neue", sans-serif; font-size: 3rem; font-weight: 100 !important; color: var(--text-dark); margin: 0 0 10px 0; text-transform: uppercase; }

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

/* COPIE GMAIL */
.copy-mode .edit-zone { background-color: transparent !important; border-bottom: none !important; padding: 0 !important; }
.copy-mode #signature-to-copy { border: none !important; padding: 0 !important; }

@media (max-width: 600px) { .procedure-box, .menu-grid { grid-template-columns: 1fr; } }