/* ================================================================
   NecroPop IA — Feuille de style principale
   ================================================================ */

/* ---------- Reset & variables ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --blue:        #1877f2;
    --blue-hover:  #166fe5;
    --bg-page:     #f0f2f5;
    --bg-card:     #ffffff;
    --text:        #1c1e21;
    --text-muted:  #65676b;
    --border:      #dde0e4;
    --shadow:      0 2px 10px rgba(0,0,0,0.10);
    --radius:      12px;
    --radius-sm:   8px;
    --font:        'Poppins', 'Segoe UI', Arial, sans-serif;
    --footer-h:    140px;   /* hauteur réservée pour le footer fixe */
}

body {
    font-family: var(--font);
    font-size: 15px;
    background-color: var(--bg-page);
    color: var(--text);
    padding-bottom: var(--footer-h);
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Titre principal ---------- */
h2 {
    font-family: 'Audiowide', var(--font);
    text-align: center;
    color: var(--blue);
    font-size: 1.5rem;
    padding: 28px 16px 14px;
    letter-spacing: 0.4px;
}

/* ---------- En-tête avec image ---------- */
.header_avec_image {
    display: block;
    width: min(720px, 92%);
    height: 240px;
    margin: 0 auto 24px;
    background-image: url("../img/family_tree_3.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.header_sans_image {
    display: block;
    width: min(720px, 92%);
    margin: 0 auto 24px;
}

/* ---------- Barre de navigation ---------- */
.les_buttons {
    width: min(760px, 92%);
    margin: 0 auto 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* Tous les boutons de la nav */
.les_buttons button,
.soumettre {
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    padding: 8px 14px;
    margin: 0;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    white-space: nowrap;
    background: var(--bg-page);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.les_buttons button:hover,
.soumettre:hover {
    background: var(--blue);
    color: white;
    border-color: var(--blue);
}

.les_buttons button a,
.soumettre a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

/* ---------- Paragraphe principe / instructions ---------- */
.principe {
    display: block;
    width: min(720px, 92%);
    margin: 0 auto 20px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-muted);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--blue);
    padding: 16px 20px;
    box-shadow: var(--shadow);
}

.principe strong { color: var(--text); }

/* ---------- Formulaire ---------- */
form {
    width: min(720px, 92%);
    margin: 0 auto 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 28px;
}

/* Bouton "Ouvrir le site" dans le formulaire */
form button[type="button"] {
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    padding: 9px 20px;
    margin: 0 0 20px 0;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    background: var(--bg-page);
    border: 1.5px solid var(--blue);
    color: var(--blue);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

form button[type="button"]:hover {
    background: var(--blue);
    color: white;
}

form button[type="button"] a {
    color: inherit;
    text-decoration: none;
}

/* Label */
label {
    display: block;
    width: 100%;
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

/* Textarea */
textarea, #prompt {
    display: block;
    width: 100%;
    min-height: 150px;
    font-size: 14px;
    font-family: var(--font);
    line-height: 1.65;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-page);
    color: var(--text);
    resize: vertical;
    margin: 0 0 20px 0;
    transition: border-color 0.15s, background 0.15s;
}

textarea:focus, #prompt:focus {
    outline: none;
    border-color: var(--blue);
    background: white;
    box-shadow: 0 0 0 3px rgba(24,119,242,0.12);
}

/* Input URL */
input[type="text"] {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font);
    background: var(--bg-page);
    color: var(--text);
    margin: 0 0 16px 0;
    transition: border-color 0.15s, background 0.15s;
}

input[type="text"]:focus {
    outline: none;
    border-color: var(--blue);
    background: white;
    box-shadow: 0 0 0 3px rgba(24,119,242,0.12);
}

/* Bouton principal "Lancer / Continuer vers l'Étape 5" */
.button_exec,
button[type="submit"] {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--blue);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.15s;
    margin: 0;
    min-height: 0;
    min-width: 0;
    height: auto;
}

.button_exec:hover,
button[type="submit"]:hover {
    background: var(--blue-hover);
}

/* ---------- Bloc de réponse de l'assistant ---------- */
.reponse_assistant {
    display: block;
    width: min(720px, 92%);
    margin: 0 auto 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 28px;
    color: var(--text);
}

.reponse_assistant > div:first-child {
    height: 400px;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    background: var(--bg-page);
}

.image_arbre {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.reponse_assistant > div:last-child {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.reponse_assistant button {
    flex: 1;
    min-width: 140px;
    min-height: 0;
    height: auto;
    padding: 10px 16px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    background: var(--bg-page);
    border: 1.5px solid var(--blue);
    border-radius: var(--radius-sm);
    color: var(--blue);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.reponse_assistant button:hover {
    background: var(--blue);
    color: white;
}

.reponse_assistant button a {
    color: inherit;
    text-decoration: none;
}

/* ---------- Vidéos ---------- */
video {
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: block;
    margin-bottom: 16px;
}

iframe {
    width: 100%;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- Footer fixe ---------- */
footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1c1e21;
    text-align: center;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 11px;
    line-height: 1.65;
    z-index: 200;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
}

footer a { color: rgba(255,255,255,0.85); }
footer a:hover { color: white; }

/* ---------- Divers ---------- */
.message_contrainte, .button_ok { visibility: hidden; }

.sous_section {
    text-align: center;
    color: var(--blue);
    margin: 0 auto 10px;
}

.equipe { text-align: left; margin: auto; color: white; }

/* ---------- Responsive ≤ 600px ---------- */
@media (max-width: 600px) {
    h2 { font-size: 1.15rem; padding: 20px 12px 10px; }

    .les_buttons { gap: 6px; padding: 8px; }
    .les_buttons button, .soumettre { font-size: 12px; padding: 7px 11px; }

    .principe { font-size: 13px; }

    form { padding: 18px 16px; }

    .button_exec, button[type="submit"] { font-size: 15px; }

    .reponse_assistant > div:first-child { height: 260px; }

    :root { --footer-h: 160px; }
}