* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 0 0 var(--space-2) 0;
}

a {
    color: var(--color-accent);
}

.eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: var(--space-1);
}

/* ---- Boutons : sobres, contour fin, majuscules espacees ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-text);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn:hover {
    background: var(--color-text);
    color: var(--color-surface);
}

.btn--primary {
    background: var(--color-text);
    color: var(--color-surface);
}

.btn--primary:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.btn--accent {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn--accent:hover {
    background: var(--color-accent);
    color: var(--color-surface);
}

.btn--danger {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.btn--danger:hover {
    background: var(--color-danger);
    color: var(--color-surface);
}

.btn--quiet {
    border-color: transparent;
    color: var(--color-muted);
    padding: 6px 10px;
}

.btn--quiet:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

/* ---- Cartes (dossiers / activites) ---- */
.surface-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.surface-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 12px 24px -16px rgba(32, 30, 27, 0.25);
}

/* ---- Fil d'ariane ---- */
.breadcrumb {
    font-size: 12px;
    letter-spacing: 0.03em;
    color: var(--color-muted);
}

.breadcrumb a {
    color: var(--color-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--color-accent);
}

/* ---- Bandeau d'activite ---- */
.activity-banner {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-primary);
    color: var(--color-surface);
    padding: 10px var(--space-3);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 20px;
}

.activity-banner__number {
    border: 1px solid var(--color-accent);
    color: var(--color-accent-soft);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* ---- Badge de competence ---- */
.badge {
    display: inline-block;
    width: fit-content;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}

/* ---- Pastille numero de question ---- */
.question-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--color-text);
    color: var(--color-text);
    font-family: var(--font-display);
    margin-right: var(--space-2);
}

/* ---- Encart "coup de pouce" ---- */
.hint-box {
    background: var(--color-hint-soft);
    border-left: 2px solid var(--color-hint);
    padding: var(--space-2) var(--space-3);
}

/* ---- Encart "je retiens" ---- */
.recap-box {
    background: var(--color-accent-soft);
    border-left: 2px solid var(--color-accent);
    padding: var(--space-2) var(--space-3);
}

/* ---- Formulaires ---- */
input[type="text"],
input[type="password"],
select,
textarea {
    font-family: var(--font-body);
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
}

input[type="text"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

label {
    font-size: 12px;
    letter-spacing: 0.03em;
    color: var(--color-muted);
}

.field-label {
    display: block;
    margin-bottom: var(--space-4);
}

.field-label input,
.field-label select {
    display: block;
    width: 100%;
    margin-top: var(--space-2);
}

.form-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.center-panel {
    max-width: 380px;
    margin: 100px auto;
    padding: 0 var(--space-3);
}

/* Variante pour un formulaire qui doit accueillir une galerie de cartes (voir
   creer_activite.html) — .center-panel seul (380px, pense pour un simple titre+matiere)
   serait beaucoup trop etroit pour montrer plusieurs cartes de modele cote a cote. */
.center-panel--wide {
    max-width: 900px;
}

/* ---- Galerie de modeles (creer_activite.html) ---- */
.template-gallery__title {
    margin-top: var(--space-4);
}

.template-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

/* Le radio natif reste dans le flux normal (focusable au clavier/lecteur d'ecran),
   simplement retire visuellement — jamais display:none, qui le sortirait aussi de la
   navigation au clavier. */
.template-card__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.template-card {
    display: block;
    position: relative;
    cursor: pointer;
}

.template-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    height: 100%;
    box-sizing: border-box;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.template-card:hover .template-card__body {
    border-color: var(--color-accent-soft);
}

/* Etat "carte choisie" : suit le radio cache via :has() plutot qu'un peu de JS pour
   (re)basculer une classe — un seul radio est jamais coche a la fois (meme `name` sur
   tout le groupe), donc l'etat visuel reste toujours coherent avec la vraie valeur
   soumise, sans jamais pouvoir diverger. */
.template-card:has(.template-card__radio:checked) .template-card__body {
    border-color: var(--color-accent);
    box-shadow: 0 12px 24px -16px rgba(32, 30, 27, 0.35);
}

.template-card__radio:focus-visible ~ .template-card__body {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.template-card__swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: var(--color-surface);
    font-size: 15px;
    margin-bottom: var(--space-1);
}

.template-card__swatch--vierge {
    background: var(--color-surface-alt);
    color: var(--color-muted);
    border: 1.5px dashed var(--color-border);
}

/* Vraie miniature (voir tpl.apercu_image, apps/courses/views.py:creer_activite) — meme
   ratio A4/meme object-fit:contain que .lp-template-card__vignette sur le landing page
   (voir templates/accounts/home.html), jamais recadree : cette galerie affiche
   desormais aussi de vraies previsualisations, plus seulement le swatch colore + icone
   (qui reste le repli quand aucune image n'a encore ete generee). */
.template-card__vignette {
    position: relative;
    width: 100%;
    aspect-ratio: 210 / 297;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    overflow: hidden;
}

.template-card__vignette img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
}

/* Attribution auteur (modele communautaire uniquement, voir tpl.auteur_nom) — retour
   direct : un badge permanent (pastille blanche+ombre en permanence sur l'image) etait
   "trop visible", pas assez subtil. Revelee au SURVOL uniquement, meme mecanique que
   .lp-template-card__overlay/-auteur sur le landing page (bandeau degrade au survol),
   jamais un badge fixe. */
.template-card__vignette-auteur {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 8px 6px;
    background: linear-gradient(0deg, rgba(20, 19, 17, 0.78), rgba(20, 19, 17, 0));
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.template-card:hover .template-card__vignette-auteur {
    opacity: 1;
    transform: translateY(0);
}

/* Meme attribution, version texte simple — repli quand aucune miniature n'existe encore
   pour ce modele (pas de vignette a superposer, donc pas de bandeau au survol possible :
   reste discrete par sa taille/son poids reduits plutot que par un mecanisme de survol). */
.template-card__nom-auteur {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 400;
    color: var(--color-muted);
}

.template-card__nom-auteur i {
    color: var(--color-muted);
    font-size: 9px;
}

.template-card__nom {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--color-text);
}

.template-card__description {
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-muted);
}

.template-card__matiere {
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
}