/* Bandeau, pied de page et composants communs au site et aux outils.
   Classes .syp-* (bandeau, pied de page) et lignes .tasks / .task (liste à filets,
   reprise de la maquette du simulateur). Valeurs en dur : ce fichier ne dépend
   ni de style.css ni des styles des outils. */

.syp-nav,
.syp-footer {
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
    line-height: 1.5;
    background: #000000;
    color: #FFFFFF;
}

.syp-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* ===== BANDEAU ===== */
.syp-nav .syp-inner {
    height: 84px;
}

.syp-brand {
    color: #FFFFFF;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.syp-brand span { color: #FF9A00; }

.syp-links {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 16px;
}

.syp-links a {
    color: #FFFFFF;
    text-decoration: none;
}

.syp-links a:hover { color: #FF9A00; }

.syp-links a.syp-btn {
    font-weight: 700;
    border-bottom: 2px solid #FF9A00;
    padding-bottom: 2px;
}

/* ===== PIED DE PAGE ===== */
.syp-footer {
    color: #A8A8A8;
    font-size: 14px;
    border-top: 1px solid #333333;
}

.syp-footer .syp-inner {
    padding-top: 30px;
    padding-bottom: 30px;
    flex-wrap: wrap;
}

.syp-footer a {
    color: #A8A8A8;
    text-decoration: none;
}

.syp-footer a:hover { color: #FFFFFF; }

/* ===== LIGNES À FILETS (.tasks / .task) ===== */
.tasks { border-top: 1px solid #FFFFFF; }

.task {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 6px;
    border-bottom: 1px solid #333333;
    cursor: pointer;
    color: #FFFFFF;
    text-decoration: none;
}

.task .t-label { font-size: 19px; font-weight: 500; }
.task .t-tag { margin-left: auto; font-size: 14px; color: #A8A8A8; text-align: right; flex: none; }
.task:hover .t-label,
.task.on .t-label { font-weight: 700; }
.task:hover { background: #0A0A0A; }

/* ===== MOBILE ===== */
@media (max-width: 640px) {
    .syp-inner { padding: 0 18px; gap: 12px; }
    .syp-nav .syp-inner { height: auto; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }   /* logo puis liens : le libellé du RDV est long */
    .syp-brand { font-size: 18px; }
    .syp-links { gap: 16px; font-size: 15px; }
    .syp-footer .syp-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
}