/* ============================================================
   OCIAPE — temoigner.css
   Page /temoigner : explications repliables + formulaire de recueil.
   Reprend les tokens de base.css (accent terracotta, Fraunces/Poppins).
   ============================================================ */

/* ── Utilitaire d'accessibilité : masquer visuellement, garder pour
      les lecteurs d'écran ─────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Honeypot anti-bot : hors écran, non focusable ──────── */
.tem-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Mise en page générale ──────────────────────────────── */
.tem {
    padding-block: clamp(3rem, 8vw, 5rem);
}

.tem__inner {
    max-width: 720px;
}

.tem__eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.9rem;
}

.tem__title {
    font-size: clamp(1.9rem, 4.5vw, 2.8rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.12;
    margin-bottom: 1.1rem;
}

.tem__lead {
    font-size: 1.02rem;
    color: var(--text-muted);
    line-height: 1.75;
}

/* Synthèse toujours visible (chips) */
.tem__synthese {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.tem__synthese li {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--accent-dark);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 100px;
    padding: 0.25rem 0.8rem;
}

/* ── Encart urgence : toujours visible, marqué ──────────── */
.tem__urgence {
    margin-top: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid #c0392b;
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.7;
}

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

.tem__urgence a {
    color: #c0392b;
    text-decoration: none;
}

/* ── Accordéons explicatifs ─────────────────────────────── */
.tem__accordeons {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tem__det {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    overflow: hidden;
}

.tem__det > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.9rem 1.1rem;
    font-family: var(--font-title);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text);
    position: relative;
    padding-right: 2.5rem;
    transition: color var(--transition);
}

.tem__det > summary::-webkit-details-marker { display: none; }

.tem__det > summary::after {
    content: "+";
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--accent);
    transition: transform var(--transition);
}

.tem__det[open] > summary::after {
    content: "–";
}

.tem__det > summary:hover { color: var(--accent-dark); }

.tem__det-body {
    padding: 0 1.1rem 1.1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.8;
}

.tem__det-body p { margin-bottom: 0.7rem; }
.tem__det-body p:last-child { margin-bottom: 0; }
.tem__det-body strong { color: var(--text); }

.tem__det-body ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tem__det-body li {
    padding-left: 1.1rem;
    position: relative;
}

.tem__det-body li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

/* ── Repli texte du flash (si JS désactivé) ─────────────── */
.tem__flash {
    margin-top: 2rem;
    padding: 0.9rem 1.2rem;
    border-radius: var(--radius);
    font-size: 0.92rem;
    line-height: 1.6;
}

.tem__flash--success {
    background: color-mix(in srgb, #1e5c4b 10%, #fff);
    border: 1px solid color-mix(in srgb, #1e5c4b 30%, #fff);
    color: color-mix(in srgb, #1e5c4b 80%, #000);
}

.tem__flash--error {
    background: color-mix(in srgb, #c0392b 8%, #fff);
    border: 1px solid color-mix(in srgb, #c0392b 30%, #fff);
    color: color-mix(in srgb, #c0392b 80%, #000);
}

/* ── Formulaire ─────────────────────────────────────────── */
.tem-form {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tem-form__req-note {
    font-size: 0.85rem;
    color: var(--text-subtle);
}

.req {
    color: #c0392b;
    font-weight: 700;
}

.tem-field {
    display: flex;
    flex-direction: column;
}

.tem-field__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.tem-field__hint {
    display: block;
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--text-subtle);
    margin-top: 0.2rem;
}

.tem-field select,
.tem-field textarea,
.tem-contact-wrap input,
.tem-natures__autre-wrap input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--transition);
}

.tem-field select:focus,
.tem-field textarea:focus,
.tem-contact-wrap input:focus,
.tem-natures__autre-wrap input:focus {
    outline: none;
    border-color: var(--accent);
}

.tem-field textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* Compteur de caractères */
.tem-field__count {
    align-self: flex-end;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-subtle);
}

.tem-field__count.is-near {
    color: #c0392b;
    font-weight: 600;
}

/* ── Natures (cases) ────────────────────────────────────── */
.tem-natures {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.2rem;
}

.tem-natures__list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.8rem;
}

.tem-natures__autre-check {
    margin-top: 0.6rem;
}

.tem-natures__autre-wrap {
    margin-top: 0.6rem;
}

/* ── Cases à cocher (commun) ────────────────────────────── */
.tem-check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.45rem 0;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.55;
    cursor: pointer;
}

.tem-check input[type="checkbox"] {
    margin-top: 0.15rem;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.tem-check span strong { color: var(--text); }
.tem-check a { color: var(--accent); text-decoration: none; }

/* Bloc des consentements */
.tem-checks {
    border-top: 1px solid var(--border);
    padding-top: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.tem-contact-wrap__note {
    font-size: 0.82rem;
    color: var(--text-subtle);
    line-height: 1.6;
    margin-top: 0.4rem;
}

/* ── Bouton d'envoi ─────────────────────────────────────── */
.tem-form__submit {
    align-self: flex-start;
    padding: 0.85rem 1.8rem;
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition);
}

.tem-form__submit:hover { background: var(--accent-dark); }

/* ── Toasts ─────────────────────────────────────────────── */
.tem-toasts {
    position: fixed;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: min(92vw, 440px);
    pointer-events: none;
}

.tem-toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.95rem 1.15rem 0.95rem 1.1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text);
    box-shadow: 0 10px 34px rgba(26, 26, 26, 0.12),
        0 2px 8px rgba(26, 26, 26, 0.06);
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.tem-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Pastille + pictogramme */
.tem-toast::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 0.1rem;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 11px 11px;
}

.tem-toast__body {
    flex: 1;
    min-width: 0;
}

/* Variante succès — vert profond de la palette OCIAPE */
.tem-toast--success {
    border-left-color: #1e5c4b;
}

.tem-toast--success::before {
    background-color: color-mix(in srgb, #1e5c4b 14%, #fff);
    /* coche */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e5c4b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Variante erreur — bordeaux/terre cuite, pas de rouge criard */
.tem-toast--error {
    border-left-color: #a3372b;
}

.tem-toast--error::before {
    background-color: color-mix(in srgb, #a3372b 14%, #fff);
    /* point d'exclamation */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3372b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    .tem-toast {
        transition: opacity 0.2s ease;
        transform: none;
    }
    .tem-toast.is-visible {
        transform: none;
    }
}

/* ── Puces des accordéons : décollées de la bordure gauche ──
   Le souci venait du padding-left trop faible sur la liste ET
   du fait que la puce était calée à left:0 contre le bord. */
.tem__det-body ul {
    padding-left: 0.5rem;   /* respire par rapport au bord de la carte */
}

.tem__det-body li {
    padding-left: 1.4rem;   /* place pour la puce + un vrai blanc */
}

.tem__det-body li::before {
    left: 0.25rem;          /* la puce n'est plus collée au bord */
}

/* ── Chevron (+/–) des accordéons : décollé du bord droit ── */
.tem__det > summary {
    padding-right: 2.8rem;  /* plus d'air avant le +/- */
}

.tem__det > summary::after {
    right: 1.3rem;          /* le +/- respire par rapport au bord */
}

/* ── Bloc « Nature du fait » : légende + aide + liste ─────── */
.tem-natures__legend {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    padding: 0;             /* les <legend> ont un padding par défaut */
}

.tem-natures__hint {
    font-size: 0.82rem;
    color: var(--text-subtle);
    margin-top: 0.15rem;
    margin-bottom: 0.9rem;  /* AIR entre l'intitulé et la 1re case */
}

/* La liste des cases : un peu plus d'espace entre chaque ligne */
.tem-natures__list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;           /* était 0.2rem : trop serré */
    margin-top: 0;
}

/* ── Bloc « Autre » : aligné comme les autres cases ────────
   Avant, la case « Autre » avait une marge propre qui la
   désalignait. On la traite comme une case normale, avec un
   filet de séparation discret au-dessus. */
.tem-natures__autre {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
}

/* Le champ « Autre » s'aligne sous le texte de la case,
   pas sous la case à cocher (retrait = largeur case + gap). */
.tem-natures__autre-wrap {
    margin-top: 0.4rem;
}

@media (max-width: 600px) {
    .tem-natures__autre-wrap {
        margin-left: 0;
    }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .tem-contact-wrap {
        margin-left: 0;
    }
    .tem-form__submit {
        align-self: stretch;
        text-align: center;
    }
}