/* ============================================================
   Demo Carnet — Carnet de Vie v2 (Lot 2, docs/plan-refonte-carnet-vie.md) :
   hub « Aujourd'hui » (anneau de score, highlights, graphe de poids v2),
   FAB + quick-add en bottom sheet, timeline « dossier » (recherche, années
   sticky, provenance, pagination), empty state v2.

   Conventions : variables var(--c-*) SANS fallback hardcodé, tactile ≥ 44px,
   prefers-reduced-motion sur toute animation.
   ============================================================ */

/* ------------------------------------------------------------
   Anneau de Score de Soin (header du dossier)
   ------------------------------------------------------------ */

.carnet-ring {
    position: relative;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.carnet-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.carnet-ring-bg {
    fill: none;
    stroke: var(--c-border-light);
    stroke-width: 4;
}

.carnet-ring-fg {
    fill: none;
    stroke: var(--c-primary-soft);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 125.66;
    stroke-dashoffset: 125.66; /* vide tant que le score n'est pas chargé */
    transition: stroke-dashoffset 700ms cubic-bezier(0.16, 1, 0.3, 1), stroke 300ms;
}

.carnet-ring--high .carnet-ring-fg { stroke: var(--c-success); }
.carnet-ring--low .carnet-ring-fg { stroke: var(--c-accent); }

.carnet-ring-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--c-text);
}

.carnet-ring:not(.carnet-ring--loaded) .carnet-ring-value {
    color: var(--c-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .carnet-ring-fg { transition: none; }
}

/* Drill-down du score (dans la bottom sheet) */
.carnet-score-hint {
    font-size: 0.82rem;
    color: var(--c-text-secondary);
    line-height: 1.5;
    margin: 0 0 12px;
}

.carnet-score-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 52vh;
    overflow-y: auto;
}

.carnet-score-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--c-border-light);
    font-size: 0.86rem;
    color: var(--c-text-muted);
}

.carnet-score-item:last-child { border-bottom: none; }
.carnet-score-item.earned { color: var(--c-text); }

.carnet-score-check {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    color: var(--c-text-muted);
}

.carnet-score-item.earned .carnet-score-check { color: var(--c-success); font-weight: 700; }

.carnet-score-item-label { flex: 1; min-width: 0; }

.carnet-score-item-pts {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-text-muted);
}

/* ------------------------------------------------------------
   Highlights (cartes horizontales scrollables)
   ------------------------------------------------------------ */

.carnet-highlights {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 0 14px;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

/* Piège CSS documenté du projet : display écrase [hidden] → guard explicite. */
.carnet-highlights[hidden] { display: none; }

.carnet-highlights::-webkit-scrollbar { display: none; }

.carnet-hl-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    min-width: 220px;
    max-width: 280px;
    padding: 12px 14px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(19, 21, 22, 0.04);
    animation: carnetHlIn 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Cascade d'entrée : léger décalage entre les 3 cartes max. */
.carnet-hl-card:nth-child(2) { animation-delay: 70ms; }
.carnet-hl-card:nth-child(3) { animation-delay: 140ms; }

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

@media (prefers-reduced-motion: reduce) {
    .carnet-hl-card { animation: none; }
}

.carnet-hl--reminder_overdue { border-color: var(--c-accent-soft); background: var(--c-accent-light); }

.carnet-hl-text {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--c-text);
    line-height: 1.45;
}

.carnet-hl-ico { margin-right: 2px; }

.carnet-hl-actions {
    display: flex;
    gap: 6px;
}

.carnet-hl-btn {
    padding: 9px 14px;
    min-height: 40px; /* cible tactile (revue Lot 2) */
    border-radius: 9999px;
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}

.carnet-hl-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.carnet-hl-btn:disabled { opacity: 0.5; cursor: default; }

.carnet-hl-btn--primary {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-text-inverse);
}

.carnet-hl-btn--primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-text-inverse); }

/* ------------------------------------------------------------
   Graphe de poids v2 (X temporel, corridor race, tooltip, périodes)
   ------------------------------------------------------------ */

.carnet-chart {
    position: relative;
    margin: 0 0 14px;
    padding: 14px 16px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(19, 21, 22, 0.04);
}

.carnet-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

.carnet-chart-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-muted);
}

.carnet-chart-trend { font-size: 0.82rem; font-weight: 700; color: var(--c-text-secondary); }
.carnet-chart-trend.good { color: var(--c-success); }
.carnet-chart-trend.warn { color: var(--c-accent-hover); }

.carnet-chart-hint {
    font-size: 0.82rem;
    color: var(--c-text-muted);
    margin: 8px 0 4px;
}

.carnet-chart-svg { display: block; width: 100%; height: auto; }

.carnet-chart-svg .cc-ideal { fill: var(--c-primary-light); opacity: 0.55; }
.carnet-chart-svg .cc-area { fill: var(--c-primary-light); opacity: 0.4; }
.carnet-chart-svg .cc-line {
    fill: none;
    stroke: var(--c-primary-soft);
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.carnet-chart-svg .cc-dot { fill: var(--c-primary); }
.carnet-chart-svg .cc-hit { fill: transparent; cursor: pointer; }

.carnet-chart-dates {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--c-text-muted);
}

.carnet-chart-tooltip {
    position: absolute;
    top: 8px;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: var(--c-text);
    color: var(--c-bg-card);
    font-size: 0.74rem;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

.carnet-chart-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.carnet-periods { display: flex; gap: 4px; }

.carnet-period {
    position: relative;
    padding: 5px 10px;
    min-height: 30px;
    border-radius: 9999px;
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}

.carnet-period:hover { border-color: var(--c-primary); color: var(--c-primary); }
.carnet-period.active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-text-inverse); }

/* Zone de tap étendue (~44px) sans grossir le visuel (revue Lot 2). */
.carnet-period::before {
    content: '';
    position: absolute;
    inset: -7px;
}

.carnet-ideal-legend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--c-text-muted);
}

.carnet-ideal-swatch {
    width: 14px;
    height: 8px;
    border-radius: 2px;
    background: var(--c-primary-light);
}

/* ------------------------------------------------------------
   Recherche + compteurs de pilules + timeline « dossier »
   ------------------------------------------------------------ */

.carnet-search {
    position: relative;
    margin: 0 0 10px;
}

.carnet-search-ico {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-muted);
    pointer-events: none;
}

.carnet-search-input {
    width: 100%;
    padding: 10px 12px 10px 34px;
    font-size: 16px; /* anti-zoom iOS */
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: var(--c-bg-card);
    color: var(--c-text);
}

.carnet-search-input:focus {
    outline: none;
    border-color: var(--c-primary-soft);
}

.health-pill-count {
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.7;
}

/* Séparateur d'ANNÉE sticky dans la timeline (compact, hors ligne des points) */
.carnet-year-sep {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 0 10px -24px; /* compense le padding-left de .health-timeline */
    padding-left: 24px;
    background: var(--c-bg-chat);
}

.carnet-year-sep span {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--c-text-secondary);
    background: var(--c-bg-warm);
    border: 1px solid var(--c-border-light);
    border-radius: 9999px;
}

/* Badge de provenance IA sur la card repliée */
.health-event-prov { font-size: 0.72rem; }

/* Pagination */
.carnet-load-more {
    display: block;
    margin: 4px auto 0;
    padding: 10px 18px;
    min-height: 44px;
    border-radius: 9999px;
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}

.carnet-load-more:hover { border-color: var(--c-primary); color: var(--c-primary); }
.carnet-load-more:disabled { opacity: 0.6; cursor: default; }

/* ------------------------------------------------------------
   Empty state v2 : card exemple + double CTA
   ------------------------------------------------------------ */

.carnet-empty {
    text-align: center;
    padding: 24px 16px 32px;
}

.carnet-empty-title {
    font-family: var(--f-display);
    font-size: 1.1rem;
    font-weight: 500;
    font-style: italic;
    color: var(--c-text);
    margin: 0 0 16px;
}

.carnet-example {
    position: relative;
    max-width: 340px;
    margin: 0 auto 18px;
    padding: 12px 14px;
    background: var(--c-bg-card);
    border: 1px dashed var(--c-border);
    border-radius: var(--r-md);
    opacity: 0.75;
    text-align: left;
}

.carnet-example-badge {
    position: absolute;
    top: -9px;
    right: 10px;
    padding: 1px 8px;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-muted);
    background: var(--c-bg-warm);
    border: 1px solid var(--c-border-light);
    border-radius: 9999px;
}

.carnet-example-row { display: flex; align-items: center; gap: 10px; }
.carnet-example-ico { font-size: 1.1rem; }
.carnet-example-name { font-size: 0.88rem; font-weight: 600; color: var(--c-text); }
.carnet-example-meta { font-size: 0.72rem; color: var(--c-text-muted); margin-top: 1px; }

.carnet-empty-cta {
    display: block;
    margin: 0 auto 10px;
    padding: 12px 22px;
    min-height: 44px;
    border: none;
    border-radius: 9999px;
    background: var(--c-accent-vivid);
    color: var(--c-text-inverse);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur-fast);
}

.carnet-empty-cta:hover { background: var(--c-accent-vivid-hover); }

.carnet-empty-tell {
    display: block;
    margin: 0 auto;
    padding: 10px 16px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--c-primary);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   Répartition par plateforme (feedback utilisateur) : sur DESKTOP le FAB
   bottom-right est hors du champ de vision → bouton « Ajouter » visible dans
   le header ; sur MOBILE le header est dense → FAB, pattern natif du pouce.
   ------------------------------------------------------------ */

@media (max-width: 767px) {
    .carnet-add-desktop { display: none; }
}

@media (min-width: 768px) {
    .carnet-fab { display: none; }
}

/* ------------------------------------------------------------
   FAB « + » (fixe, au-dessus de la safe-area / tab bar mobile)
   ------------------------------------------------------------ */

.carnet-fab {
    position: fixed;
    right: 20px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: var(--c-accent-vivid);
    color: var(--c-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
    z-index: 60;
    transition: transform var(--dur-fast), background var(--dur-fast);
}

.carnet-fab:hover { background: var(--c-accent-vivid-hover); transform: scale(1.05); }
.carnet-fab:active { transform: scale(0.96); }
.carnet-fab[hidden] { display: none; }

/* Mobile : au-dessus de la bottom tab bar (v2-skin app + web mobile) */
@media (max-width: 767px) {
    body.has-tabbar .carnet-fab {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .carnet-fab { transition: none; }
}

/* ------------------------------------------------------------
   Bottom sheet quick-add (chips → champs minimaux → save 2 taps)
   ------------------------------------------------------------ */

.carnet-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9640; /* sous la modale confirm (9700) — le garde-fou s'affiche AU-DESSUS */
    align-items: flex-end;
    justify-content: center;
}

.carnet-sheet-overlay.active { display: flex; }

.carnet-sheet {
    width: 100%;
    max-width: 560px;
    max-height: 82vh;
    overflow-y: auto;
    overscroll-behavior: contain; /* le scroll de la sheet ne chaîne pas vers la page */
    background: var(--c-bg-card);
    border-radius: 20px 20px 0 0;
    padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.12);
    animation: carnetSheetIn 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes carnetSheetIn {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .carnet-sheet { animation: none; }
}

/* Desktop : sheet centrée façon modale */
@media (min-width: 768px) {
    .carnet-sheet-overlay { align-items: center; padding: 20px; }
    .carnet-sheet { border-radius: 20px; }
}

/* C9 : paysage téléphone (hauteur très réduite) — la sheet à 82vh devient minuscule ; on lui
   redonne de la hauteur (le contenu scrolle déjà via overflow-y: auto). */
@media (orientation: landscape) and (max-height: 500px) {
    .carnet-sheet { max-height: 94vh; }
}

.carnet-sheet-handle {
    width: 44px;
    height: 5px;
    margin: 4px auto 10px;
    border-radius: 9999px;
    background: var(--c-border);
}

@media (min-width: 768px) {
    .carnet-sheet-handle { display: none; }
}

.carnet-sheet-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.carnet-sheet-title {
    flex: 1;
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 500;
    font-style: italic;
    color: var(--c-text);
}

.carnet-sheet-close,
.carnet-sheet-back {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border-light);
    border-radius: 50%;
    background: var(--c-bg-warm);
    color: var(--c-text-secondary);
    cursor: pointer;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}

/* Zone de tap étendue à ~44px sans grossir le visuel (revue Lot 2). */
.carnet-sheet-close::before,
.carnet-sheet-back::before {
    content: '';
    position: absolute;
    inset: -6px;
}

.carnet-sheet-close:hover,
.carnet-sheet-back:hover { color: var(--c-text); border-color: var(--c-border); }

/* Chips de type d'événement */
.carnet-sheet-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-bottom: 6px;
}

.carnet-type-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 76px;
    padding: 10px 6px;
    border: 1px solid var(--c-border-light);
    border-radius: 14px;
    background: var(--c-bg-warm);
    color: var(--c-text);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}

.carnet-type-chip:hover { border-color: var(--c-primary-soft); background: var(--c-primary-light); }
.carnet-type-chip:active { transform: scale(0.97); }

.carnet-type-ico { font-size: 1.4rem; }

@media (max-width: 380px) {
    .carnet-sheet-chips { grid-template-columns: repeat(2, 1fr); }
}

/* Champs du formulaire express */
.carnet-sheet-field { margin-bottom: 12px; }

.carnet-sheet-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-text-secondary);
    margin-bottom: 5px;
}

/* Pesée express : champ numérique géant */
.carnet-weight-express {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 14px;
}

.carnet-weight-input {
    width: 150px;
    padding: 6px 0;
    border: none;
    border-bottom: 2px solid var(--c-border);
    background: transparent;
    font-family: var(--f-display);
    font-size: 2.6rem;
    font-weight: 500;
    color: var(--c-text);
    text-align: center;
}

.carnet-weight-input:focus { outline: none; border-bottom-color: var(--c-primary-soft); }

/* Masquer les spinners natifs du champ number (saisie directe au clavier numérique) */
.carnet-weight-input::-webkit-outer-spin-button,
.carnet-weight-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.carnet-weight-input[type='number'] { -moz-appearance: textfield; }

.carnet-weight-unit {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-text-muted);
}

/* Date avec steppers −1j/+1j */
.carnet-date-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.carnet-date-row .auth-input { flex: 1; min-width: 0; }

.carnet-date-step {
    flex-shrink: 0;
    width: 44px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-bg-warm);
    color: var(--c-text-secondary);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}

.carnet-date-step:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* Suggestion de prochaine échéance */
.carnet-nextdue {
    padding: 10px 12px;
    background: var(--c-bg-warm);
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
}

.carnet-nextdue-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.82rem !important;
    color: var(--c-text) !important;
    margin-bottom: 8px !important;
}

/* Actions de la sheet */
.carnet-sheet-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}

.carnet-sheet-more {
    padding: 10px 4px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--c-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.carnet-sheet-more:hover { color: var(--c-primary); }

.carnet-sheet-save {
    flex: 1;
    max-width: 220px;
    padding: 12px 18px;
    min-height: 48px;
    border: none;
    border-radius: 9999px;
    background: var(--c-accent-vivid);
    color: var(--c-text-inverse);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur-fast);
}

.carnet-sheet-save:hover { background: var(--c-accent-vivid-hover); }
.carnet-sheet-save:disabled { opacity: 0.6; cursor: default; }

/* ------------------------------------------------------------
   Refonte Lot 1 : fiche DÉTAIL d'un événement (dans le bottom-sheet)
   ------------------------------------------------------------ */
.carnet-detail-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2px;
}

.carnet-detail-hero {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.carnet-detail-ico {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.carnet-detail-htxt { flex: 1; min-width: 0; }

.carnet-detail-title {
    font-size: 1.2rem;
    font-weight: 680;
    color: var(--c-text);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.carnet-detail-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--c-text-muted);
}

.carnet-detail-cat {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 9999px;
}

.carnet-detail-verify {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: var(--c-accent-light);
    border: 1px solid var(--c-accent-soft);
    border-radius: 11px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--c-accent-hover);
}

.carnet-detail-verify-btn {
    flex-shrink: 0;
    padding: 7px 13px;
    min-height: 38px;
    border: none;
    border-radius: 9999px;
    background: var(--c-primary);
    color: var(--c-text-inverse);
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
}

.carnet-detail-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--c-text-secondary);
    margin-bottom: 14px;
    white-space: pre-wrap;
}

.carnet-detail-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px 16px;
    margin: 0 0 14px;
    padding: 14px 16px;
    background: var(--c-bg-warm);
    border: 1px solid var(--c-border-light);
    border-radius: 12px;
    font-size: 0.86rem;
}

.carnet-detail-dl dt { color: var(--c-text-muted); font-weight: 500; }
.carnet-detail-dl dd { margin: 0; text-align: right; color: var(--c-text); font-weight: 600; }

.carnet-detail-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.carnet-detail-photo {
    width: 68px;
    height: 68px;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: var(--c-bg-warm);
}

.carnet-detail-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.carnet-detail-doc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    min-height: 44px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-bg-warm);
    color: var(--c-text-secondary);
    font-size: 0.82rem;
    text-decoration: none;
}

.carnet-detail-doc:hover { border-color: var(--c-primary); color: var(--c-primary); }

.carnet-detail-src {
    font-size: 0.76rem;
    color: var(--c-text-muted);
    margin-bottom: 16px;
}

.carnet-detail-acts {
    display: flex;
    gap: 10px;
}

.carnet-detail-btn {
    min-height: 48px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 650;
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.carnet-detail-btn--edit {
    flex: 1;
    border: none;
    background: var(--c-primary);
    color: var(--c-text-inverse);
    padding: 12px 18px;
}

.carnet-detail-btn--edit:hover { background: var(--c-primary-hover); }

.carnet-detail-btn--del {
    flex-shrink: 0;
    padding: 12px 18px;
    background: transparent;
    border: 1px solid var(--c-border);
    color: var(--c-danger);
}

.carnet-detail-btn--del:hover { border-color: var(--c-danger); background: var(--c-bg-warm); }

/* Refonte Lot 4 : liste de la sheet de FILTRE (options catégorie, single-select) */
.carnet-filter-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.carnet-filter-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    min-height: 48px;
    border: 1px solid var(--c-border-light);
    border-radius: 12px;
    background: var(--c-bg-card);
    color: var(--c-text);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}

.carnet-filter-opt:hover { border-color: var(--c-primary-soft); background: var(--c-bg-warm); }

.carnet-filter-opt.active {
    border-color: var(--c-primary);
    background: var(--c-primary-light);
    color: var(--c-primary);
    font-weight: 650;
}

.carnet-filter-opt-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-text-muted);
    background: var(--c-bg-warm);
    padding: 2px 9px;
    border-radius: 9999px;
}

.carnet-filter-opt.active .carnet-filter-opt-count {
    color: var(--c-primary);
    background: var(--c-bg-card);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 480px) {
    .carnet-hl-card { min-width: 200px; }
    .carnet-weight-input { font-size: 2.2rem; width: 130px; }
}

/* ============================================================
   Lot 3 — La boucle IA rendue visible
   Cards in-chat (Ajouté au Carnet de Vie, confirmation de pesée),
   boîte « À vérifier », bandeau ambre timeline, flash deep-link,
   pastille onglet Animaux.
   ============================================================ */

/* ---------- Card in-chat « Ajouté au Carnet de Vie » ---------- */

.carnet-saved-card {
    width: min(520px, calc(100vw - 48px));
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-primary-soft);
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
    animation: carnet-card-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes carnet-card-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.carnet-saved-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

.carnet-saved-ico { font-size: 1.05rem; }

.carnet-saved-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--c-primary);
}

.carnet-saved-pet {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-text-secondary);
    margin: 0.45rem 0 0.15rem;
}

.carnet-saved-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.carnet-saved-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.3rem 0;
}

.carnet-saved-li-ico { flex-shrink: 0; line-height: 1.4; }

/* Corps de ligne : titre (wrap libre pleine largeur) + date en dessous (petit, muté).
   Avant : titre + « · nom » + « (date) » en items flex inline → désalignement quand le
   titre wrappait (date en haut à droite, nom en dessous). */
.carnet-saved-li-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.carnet-saved-li-title {
    font-size: 0.88rem;
    color: var(--c-text);
    line-height: 1.35;
}

.carnet-saved-li-meta {
    font-size: 0.76rem;
    color: var(--c-text-muted);
    margin-top: 1px;
}

.carnet-saved-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.65rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--c-border-light);
}

.carnet-saved-btn {
    padding: 0.42rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text-secondary);
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
    min-height: 34px;
}

.carnet-saved-btn--view {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-text-inverse);
}

.carnet-saved-btn--view:hover { background: var(--c-primary-hover); }
.carnet-saved-btn--undo:hover { border-color: var(--c-danger); color: var(--c-danger); }
.carnet-saved-btn:disabled { opacity: 0.55; cursor: default; }

/* État annulé : contenu barré, actions remplacées par le message */
.carnet-card--undone .carnet-saved-list { opacity: 0.55; text-decoration: line-through; }
.carnet-card--undone .carnet-saved-title { color: var(--c-text-muted); }

.carnet-card-done-msg {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--c-text-muted);
}

.weight-card--saved .carnet-card-done-msg { color: var(--c-success); }

/* ---------- Card de confirmation de pesée (1 tap) ---------- */

.weight-confirm-card {
    width: min(440px, calc(100vw - 48px));
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-accent);
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
    animation: carnet-card-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.weight-confirm-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.weight-confirm-ico { font-size: 1.15rem; }

.weight-confirm-q {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--c-text);
}

.weight-confirm-hint {
    margin: 0.35rem 0 0.6rem;
    font-size: 0.8rem;
    color: var(--c-text-muted);
}

.weight-confirm-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.weight-confirm-btn {
    padding: 0.45rem 0.95rem;
    border-radius: 9999px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text-secondary);
    transition: background var(--dur-fast), color var(--dur-fast);
    min-height: 36px;
}

.weight-confirm-btn--save {
    background: var(--c-accent-vivid);
    border-color: var(--c-accent-vivid);
    color: var(--c-text-inverse);
}

.weight-confirm-btn--save:hover { background: var(--c-accent-vivid-hover); }
.weight-confirm-btn:disabled { opacity: 0.55; cursor: default; }

.weight-card--saved .weight-confirm-hint,
.weight-card--skipped .weight-confirm-hint { display: none; }
.weight-card--skipped .weight-confirm-q { color: var(--c-text-muted); }

/* ---------- Boîte « À vérifier » (hub carnet) ---------- */

.carnet-verify {
    background: var(--c-accent-light);
    border: 1px solid var(--c-accent-soft);
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
    margin: 0 0 1rem;
}

.carnet-verify-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.carnet-verify-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--c-text);
}

.carnet-verify-count {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    background: var(--c-accent);
    color: var(--c-text-inverse);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    line-height: 20px;
}

.carnet-verify-sub {
    margin: 0.25rem 0 0.6rem;
    font-size: 0.8rem;
    color: var(--c-text-secondary);
}

.carnet-verify-item {
    position: relative;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.55rem;
    overflow: hidden;
}

.carnet-verify-item:last-child { margin-bottom: 0; }

.carnet-verify-item-main {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}

.carnet-verify-ico { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

.carnet-verify-item-body { min-width: 0; }

.carnet-verify-item-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--c-text);
}

.carnet-verify-item-meta {
    font-size: 0.78rem;
    color: var(--c-text-muted);
    margin-top: 2px;
}

.carnet-verify-item-desc {
    font-size: 0.82rem;
    color: var(--c-text-secondary);
    margin-top: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carnet-verify-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    color: var(--c-primary-muted);
    text-decoration: underline;
    cursor: pointer;
}

.carnet-verify-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.55rem;
}

.carnet-verify-btn {
    padding: 0.4rem 0.8rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text-secondary);
    transition: background var(--dur-fast), color var(--dur-fast);
    min-height: 34px;
}

.carnet-verify-btn--ok {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-text-inverse);
}

.carnet-verify-btn--ok:hover { background: var(--c-primary-hover); }
.carnet-verify-btn:disabled { opacity: 0.55; cursor: default; }

/* Tampon teal animé à la confirmation (catalogue §6.2 dossier-stamp) */
.carnet-verify-stamp {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    border: 2.5px solid var(--c-primary-soft);
    color: var(--c-primary-soft);
    font-size: 1.35rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}

.carnet-verify-item.stamped .carnet-verify-stamp {
    animation: dossier-stamp 380ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.carnet-verify-item.stamped {
    transition: opacity 260ms ease 340ms, transform 260ms ease 340ms;
    opacity: 0;
    transform: translateY(-4px);
    /* Item décidé : plus aucune interaction pendant le fade (un « Corriger » tardif
       sur un item déjà confirmé ouvrait un formulaire incohérent — revue Lot 3). */
    pointer-events: none;
}

@keyframes dossier-stamp {
    0% { opacity: 0; transform: scale(1.6) rotate(-10deg); }
    60% { opacity: 1; transform: scale(0.96) rotate(-4deg); }
    100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}

/* ---------- Timeline : pastille + bandeau « À vérifier » ---------- */

.health-event-verify {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9999px;
    background: var(--c-accent-soft);
    color: var(--c-accent-hover);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.health-verify-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: var(--c-accent-light);
    border: 1px solid var(--c-accent-soft);
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.6rem;
}

.health-verify-banner-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-text-secondary);
}

.health-verify-banner-actions {
    display: flex;
    gap: 0.4rem;
}

/* ---------- Flash-highlight deep-link (catalogue §6.2 flash-highlight) ---------- */

.health-event.carnet-flash {
    animation: carnet-flash-highlight 1.2s ease-out;
}

@keyframes carnet-flash-highlight {
    0% { box-shadow: 0 0 0 3px var(--c-primary-soft); background: var(--c-primary-light); }
    100% { box-shadow: 0 0 0 3px transparent; background: var(--c-bg-card); }
}

/* ---------- Pastille « À vérifier » sur l'onglet Animaux (tab bar) ---------- */

.app-tab { position: relative; }

.app-tab-badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 6px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    background: var(--c-accent-vivid);
    color: var(--c-text-inverse);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .carnet-saved-card,
    .weight-confirm-card,
    .health-event.carnet-flash,
    .carnet-verify-item.stamped .carnet-verify-stamp { animation: none; }
    .carnet-verify-item.stamped { transition: none; }
}

/* ============================================================
   Lot 4 — Prévention & rappels
   Section échéancier vertical, picker de calendrier préventif,
   card in-chat « plan de prévention ».
   ============================================================ */

/* ---------- Section Prévention (hub carnet) ---------- */

.carnet-prev {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
    margin: 0 0 1rem;
}

.carnet-prev-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.carnet-prev-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--c-text);
}

.carnet-prev-count {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    background: var(--c-primary-light);
    color: var(--c-primary);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    line-height: 20px;
}

.carnet-prev-add {
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-primary);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur-fast);
    min-height: 32px;
}

.carnet-prev-add:hover { background: var(--c-primary-light); }

/* Échéancier vertical : ligne teal continue + pastilles par échéance */
.carnet-prev-list {
    position: relative;
    margin-top: 0.7rem;
    padding-left: 18px;
}

.carnet-prev-list::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: var(--c-primary-light);
}

/* Refonte Lot 5 : item de prévention en COLONNE (label / date / actions pleine largeur)
   — avant : flex row + wrap → sur mobile les 3 boutons ne tenaient pas à côté du titre,
   passaient sous une ligne mal alignée, et l'item devenait très haut. La colonne est
   compacte, prévisible, et laisse toute la largeur au titre (moins de wrap du « 🔁 »). */
.carnet-prev-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    margin-bottom: 0.4rem;
}

.carnet-prev-item:last-child { margin-bottom: 0; }

/* Prochaine échéance : surbrillance peach (plan §Lot 4) */
.carnet-prev-item.next {
    background: var(--c-accent-light);
    border: 1px solid var(--c-accent-soft);
}

.carnet-prev-dot {
    position: absolute;
    left: -18px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--c-primary-soft);
}

.carnet-prev-item.next .carnet-prev-dot { background: var(--c-accent-vivid); }
.carnet-prev-item.overdue .carnet-prev-dot { background: var(--c-accent-hover); }

.carnet-prev-main { min-width: 0; }

.carnet-prev-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--c-text);
}

.carnet-prev-recur { font-size: 0.78rem; }

.carnet-prev-meta {
    font-size: 0.78rem;
    color: var(--c-text-muted);
    margin-top: 2px;
}

.carnet-prev-rel.late { color: var(--c-accent-hover); font-weight: 700; }

.carnet-prev-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.carnet-prev-btn {
    padding: 0.38rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text-secondary);
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
    min-height: 40px; /* C4 : cible tactile agrandie (était 32px) */
}

.carnet-prev-btn--done {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-text-inverse);
}

.carnet-prev-btn--done:hover { background: var(--c-primary-hover); }
.carnet-prev-btn--dismiss { min-width: 32px; padding: 0.38rem 0.55rem; margin-left: auto; }
.carnet-prev-btn--dismiss:hover { border-color: var(--c-danger); color: var(--c-danger); }
.carnet-prev-btn:disabled { opacity: 0.55; cursor: default; }

.carnet-prev-toggle {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.45rem;
    border: none;
    background: none;
    color: var(--c-primary-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.carnet-prev-empty { text-align: center; padding: 0.6rem 0 0.2rem; }

.carnet-prev-empty-text {
    font-size: 0.85rem;
    color: var(--c-text-secondary);
    margin: 0.4rem 0 0.7rem;
}

.carnet-prev-generate {
    padding: 0.55rem 1.1rem;
    border-radius: 9999px;
    border: none;
    background: var(--c-primary);
    color: var(--c-text-inverse);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur-fast);
    min-height: 40px;
}

.carnet-prev-generate:hover { background: var(--c-primary-hover); }

/* ---------- Picker « calendrier préventif » (bottom sheet) ---------- */

.carnet-prev-picker-sub {
    font-size: 0.83rem;
    color: var(--c-text-secondary);
    margin: 0.2rem 0 0.7rem;
}

.carnet-prev-picker-list { margin-bottom: 0.8rem; }

.carnet-prev-picker-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.5rem;
    border-radius: 10px;
    cursor: pointer;
}

.carnet-prev-picker-item:hover { background: var(--c-primary-light); }

.carnet-prev-picker-check {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--c-primary);
    flex-shrink: 0;
}

.carnet-prev-picker-label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--c-text);
}

.carnet-prev-picker-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--c-text-muted);
    margin-top: 4px;
}
.carnet-prev-picker-item { cursor: default; } /* était un <label>, maintenant un <div> */
.carnet-prev-picker-label { cursor: pointer; }
.carnet-prev-picker-date {
    font-size: 0.82rem;
    padding: 3px 7px;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    color: var(--c-text);
    background: var(--c-bg-card);
    font-family: inherit;
    max-width: 150px;
}
.carnet-prev-picker-recur { color: var(--c-text-muted); }
/* iOS : ≥16px pour éviter le zoom au focus (le champ date ouvre un sélecteur natif). */
@media (hover: none) and (pointer: coarse) {
    .carnet-prev-picker-date { font-size: 16px; }
}

/* ---------- Card in-chat « plan de prévention » ---------- */

.prevention-plan-card {
    width: min(560px, calc(100vw - 48px));
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-primary-soft);
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
    animation: carnet-card-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.prevention-plan-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.prevention-plan-ico { font-size: 1.05rem; }

.prevention-plan-title {
    font-weight: 700;
    font-size: 0.93rem;
    color: var(--c-primary);
}

.prevention-plan-hint {
    margin: 0.3rem 0 0.55rem;
    font-size: 0.8rem;
    color: var(--c-text-muted);
}

.prevention-plan-list { margin-bottom: 0.65rem; }

.prevention-plan-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.4rem 0.45rem;
    border-radius: 8px;
    cursor: pointer;
}

.prevention-plan-item:hover { background: var(--c-primary-light); }

.prevention-plan-check {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--c-primary);
    flex-shrink: 0;
}

.prevention-plan-label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--c-text);
}

.prevention-plan-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.77rem;
    color: var(--c-text-muted);
    margin-top: 4px;
}
.prevention-plan-item { cursor: default; } /* était un <label>, maintenant un <div> */
.prevention-plan-label { cursor: pointer; }
.prevention-plan-date {
    font-size: 0.82rem;
    padding: 3px 7px;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    color: var(--c-text);
    background: var(--c-bg-card);
    font-family: inherit;
    max-width: 150px;
}
.prevention-plan-recur { color: var(--c-text-muted); }
@media (hover: none) and (pointer: coarse) {
    .prevention-plan-date { font-size: 16px; }
}

.prevention-plan-actions {
    padding-top: 0.55rem;
    border-top: 1px solid var(--c-border-light);
}

.prevention-plan-btn {
    padding: 0.45rem 1rem;
    border-radius: 9999px;
    border: none;
    background: var(--c-primary);
    color: var(--c-text-inverse);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur-fast);
    min-height: 36px;
}

.prevention-plan-btn:hover { background: var(--c-primary-hover); }
.prevention-plan-btn:disabled { opacity: 0.55; cursor: default; }

.prevention-card--done .prevention-plan-item { opacity: 0.6; }
.prevention-card--done .carnet-card-done-msg { color: var(--c-success); }

/* Responsive : actions sous le libellé quand la ligne est étroite */
@media (max-width: 480px) {
    .carnet-prev-item { padding-right: 0.4rem; }
    .carnet-prev-actions { width: 100%; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
    .prevention-plan-card { animation: none; }
}

/* Revue Lot 4 (m9) : conteneurs texte des items checklist — flex:1 + min-width:0
   pour qu'un libellé long ellipse/wrap au lieu de déborder de la ligne flex. */
.carnet-prev-picker-body,
.prevention-plan-body {
    flex: 1;
    min-width: 0;
}

/* ============================================================
   Lot 5 — L'Éclat (gamification adulte)
   Halo sur la photo, rythmes de soin, défi saisonnier, vitrine
   badges, rétro-crédit, micro-célébrations, mémorial, mode sobre.
   Tout est appliqué par JS UNIQUEMENT quand le flag serveur
   care_gamification_enabled est actif (sauf mémorial : éthique).
   ============================================================ */

/* ---------- Halo Éclat (photo du VRAI animal — jamais punitif) ----------
   Teal du logo (#48b5a8 = rgb(72,181,168)) : couleur d'identité FIGÉE (règle
   logo CLAUDE.md), assumée en dur ici — un halo n'existe qu'en teal Woopets. */

.eclat-halo--high {
    box-shadow: 0 0 0 2px rgba(72, 181, 168, 0.5), 0 0 12px 3px rgba(72, 181, 168, 0.38);
    animation: eclat-breathe 4s ease-in-out infinite;
}

.eclat-halo--mid {
    box-shadow: 0 0 0 2px rgba(72, 181, 168, 0.38), 0 0 7px 2px rgba(72, 181, 168, 0.22);
}

@keyframes eclat-breathe {
    0%, 100% { box-shadow: 0 0 0 2px rgba(72, 181, 168, 0.42), 0 0 10px 2px rgba(72, 181, 168, 0.35); }
    50% { box-shadow: 0 0 0 2.5px rgba(72, 181, 168, 0.6), 0 0 18px 5px rgba(72, 181, 168, 0.55); }
}

/* Hero du profil (v2-skin) : l'anneau blanc intérieur existant (inset) doit SURVIVRE
   au halo — box-shadow est une propriété unique, la déclaration halo l'écraserait
   (revue Lot 5, m7). Variante avec inset inclus, keyframes dédiées. */
.pet-profile-avatar.eclat-halo--mid {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 0 2px rgba(72, 181, 168, 0.38), 0 0 7px 2px rgba(72, 181, 168, 0.22);
}

.pet-profile-avatar.eclat-halo--high { animation-name: eclat-breathe-hero; }

@keyframes eclat-breathe-hero {
    0%, 100% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 0 2px rgba(72, 181, 168, 0.42), 0 0 10px 2px rgba(72, 181, 168, 0.35); }
    50% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 0 2.5px rgba(72, 181, 168, 0.6), 0 0 18px 5px rgba(72, 181, 168, 0.55); }
}

/* Header du carnet : .health-view-card est en overflow:hidden avec 12px de padding
   en mobile — le halo standard (18px au pic) serait tronqué net (revue Lot 5, m6).
   Variante compacte clip-safe (rayon max 8px + 2px de spread ≈ 10px). */
.health-view-avatar.eclat-halo--mid {
    box-shadow: 0 0 0 2px rgba(72, 181, 168, 0.4), 0 0 6px 1px rgba(72, 181, 168, 0.25);
}

.health-view-avatar.eclat-halo--high { animation-name: eclat-breathe-tight; }

@keyframes eclat-breathe-tight {
    0%, 100% { box-shadow: 0 0 0 2px rgba(72, 181, 168, 0.45), 0 0 5px 1px rgba(72, 181, 168, 0.35); }
    50% { box-shadow: 0 0 0 2.5px rgba(72, 181, 168, 0.62), 0 0 8px 2px rgba(72, 181, 168, 0.55); }
}

/* Pastille neutre « à raviver » (score < 50) : un raccourci, jamais un reproche. */
.eclat-revive-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 0.3rem;
    padding: 0.18rem 0.55rem;
    background: var(--c-bg-warm);
    border: 1px solid var(--c-border);
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.eclat-revive-chip:hover { background: var(--c-primary-light); }

/* ---------- Rythmes de soin avec grâce (jamais « perdu ») ---------- */

.carnet-rhythms {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    /* Rythme vertical standard des sections carnet (margin-bottom, comme highlights /
       chart / prev) — un margin-top seul collait la section à la Prévention (bug vécu). */
    margin: 0 0 14px;
}

/* Piège CSS documenté du projet : display écrase [hidden] → guards explicites. */
.carnet-rhythms[hidden],
.carnet-chal-slot[hidden],
.eclat-profile-slot[hidden],
.carnet-ring[hidden] { display: none; }

.carnet-rhythms-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--c-text-secondary);
}

.carnet-rhythms-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.carnet-rhythm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-radius: 12px;
    min-width: 0;
}

.carnet-rhythm-ico { font-size: 1rem; }

.carnet-rhythm-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.carnet-rhythm-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-text);
}

.carnet-rhythm-state {
    font-size: 0.72rem;
    color: var(--c-text-muted);
}

/* Dans le tempo = teal ; fenêtre de rattrapage = peach ; en pause = neutre (JAMAIS rouge). */
.carnet-rhythm--in_tempo { border-color: var(--c-primary-soft); background: var(--c-primary-light); }
.carnet-rhythm--in_tempo .carnet-rhythm-state { color: var(--c-primary); font-weight: 600; }
.carnet-rhythm--grace { border-color: var(--c-accent); background: var(--c-accent-light); }
.carnet-rhythm--grace .carnet-rhythm-state { color: var(--c-accent-hover); font-weight: 600; }

/* ---------- Défi saisonnier (bannière opt-in, dismissable) ---------- */

.carnet-chal-slot { margin: 0 0 14px; }

.carnet-chal {
    position: relative;
    background: linear-gradient(135deg, var(--c-accent-light), var(--c-bg-card) 65%);
    border: 1px solid var(--c-accent-soft);
    border-radius: 14px;
    padding: 0.85rem 1rem;
}

.carnet-chal.joined { background: var(--c-bg-card); border-color: var(--c-border); }
.carnet-chal.completed { background: var(--c-primary-light); border-color: var(--c-primary-soft); }

.carnet-chal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--c-text-muted);
    cursor: pointer;
}
/* C4 : zone de tap étendue à ~44px (bouton icône 28px) — accessibilité tactile. */
.carnet-chal-close::before { content: ''; position: absolute; inset: -8px; }

.carnet-chal-close:hover { background: var(--c-bg-warm); }

.carnet-chal-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-right: 1.8rem;
}

.carnet-chal-ico { font-size: 1.35rem; }

.carnet-chal-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.carnet-chal-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--c-text);
}

.carnet-chal-until {
    font-size: 0.72rem;
    color: var(--c-text-muted);
}

.carnet-chal-desc {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--c-text-secondary);
}

.carnet-chal-join {
    margin-top: 0.65rem;
    padding: 0.45rem 1rem;
    background: var(--c-primary);
    color: var(--c-text-inverse);
    border: none;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.carnet-chal-join:hover { background: var(--c-primary-hover); }
.carnet-chal-join:disabled { opacity: 0.55; cursor: default; }

.carnet-chal-progress {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.carnet-chal-bar {
    flex: 1;
    height: 6px;
    background: var(--c-border-light);
    border-radius: 9999px;
    overflow: hidden;
}

.carnet-chal-bar span {
    display: block;
    height: 100%;
    background: var(--c-primary-soft);
    border-radius: 9999px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.carnet-chal-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--c-text-secondary);
}

/* Hint catégoriel (« une pipette / un vermifuge compte ») sous la description du défi. */
.carnet-chal-hint {
    margin: 0.4rem 0 0;
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--c-text-muted);
}

/* Raccourci direct « + Enregistrer un antiparasitaire » (card défi rejointe). */
.carnet-chal-log {
    margin-top: 0.6rem;
    padding: 0.4rem 0.9rem;
    background: var(--c-bg-card);
    color: var(--c-primary);
    border: 1px solid var(--c-primary-soft);
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.carnet-chal-log:hover { background: var(--c-primary); color: var(--c-text-inverse); }
.carnet-chal-log:active { transform: scale(0.98); }

/* ---------- Pré-choix du quick-add (chips remplissant le champ nom) ---------- */

.carnet-preset-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -0.35rem 0 0.2rem;
}

.carnet-preset-chip {
    padding: 0.32rem 0.7rem;
    min-height: 32px;
    background: var(--c-accent-light);
    color: var(--c-accent-hover);
    border: 1px solid var(--c-accent-soft);
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.carnet-preset-chip:hover { background: var(--c-accent-soft); }
.carnet-preset-chip:active { transform: scale(0.97); }

/* Tactile (pas de hover) : rendu actif d'emblée, jamais d'état hover-only invisible. */
@media (hover: none) and (pointer: coarse) {
    .carnet-preset-chip:active { background: var(--c-accent-soft); }
}

/* ---------- Mémorial (gel bienveillant C1 — sobre, jamais dramatique) ---------- */

.carnet-memorial {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    background: var(--c-bg-warm);
    border: 1px solid var(--c-border-light);
    border-radius: 14px;
    padding: 0.85rem 1rem;
}

.carnet-memorial-ico { font-size: 1.3rem; }

.carnet-memorial-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.carnet-memorial-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--c-text);
}

.carnet-memorial-date {
    font-weight: 500;
    color: var(--c-text-muted);
}

.carnet-memorial-sub {
    font-size: 0.78rem;
    color: var(--c-text-secondary);
    line-height: 1.4;
}

/* Marque mémorial sur les chips vitales / cards de liste. */
.pet-chip-memorial {
    background: var(--c-bg-warm) !important;
    color: var(--c-text-secondary) !important;
}

/* ---------- Drill-down du score : jalons actionnables ---------- */

.carnet-score-item.actionable { padding: 0; }

.carnet-score-item-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.25rem;
    background: none;
    border: none;
    border-radius: 8px;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}

.carnet-score-item-btn:hover { background: var(--c-bg-warm); }

.carnet-score-item-btn .carnet-score-item-label { flex: 1; min-width: 0; }

.carnet-score-chevron {
    vertical-align: -2px;
    color: var(--c-text-muted);
}

.carnet-score-ask-ai {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--c-primary-light);
    border: 1px solid var(--c-primary-soft);
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.carnet-score-ask-ai:hover { background: var(--c-primary-muted); color: var(--c-text-inverse); }

/* ---------- Micro-célébrations ---------- */

/* Pulse de l'anneau + delta « +N » flottant (gain de score). */
.carnet-ring.score-pulse { animation: eclat-score-pulse 350ms ease-out; }

@keyframes eclat-score-pulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.carnet-score-delta {
    position: absolute;
    top: -4px;
    right: -6px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--c-success);
    pointer-events: none;
    animation: eclat-delta-float 600ms ease-out forwards;
}

@keyframes eclat-delta-float {
    0% { opacity: 0; transform: translateY(0); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-12px); }
}

/* Canvas confetti (rafale unique, retiré du DOM à la fin). */
.eclat-confetti {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
}

/* Badge pop (card éphémère bas d'écran, au-dessus de la tab bar). */
.eclat-badge-pop {
    position: fixed;
    left: 50%;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    z-index: 3001;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: min(340px, calc(100vw - 32px));
    padding: 0.65rem 0.95rem;
    background: var(--c-bg-card);
    border: 1px solid var(--c-primary-soft);
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: translateX(-50%) translateY(14px) scale(0.6);
    pointer-events: none;
}

.eclat-badge-pop.in {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease-out;
}

.eclat-badge-pop.no-motion,
.eclat-badge-pop.no-motion.in { transition: none; transform: translateX(-50%); }

.eclat-badge-pop-ico { font-size: 1.5rem; }

.eclat-badge-pop-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.eclat-badge-pop-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-primary-muted);
}

.eclat-badge-pop-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Vitrine badges (profil animal) ---------- */

/* margin bas ajouté : sans lui la vitrine badges collait à l'album photos (retour utilisateur). */
.eclat-profile-slot { margin: 1rem 0; }

.eclat-vitrine {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 0.9rem 1rem;
}

.eclat-vitrine-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.7rem;
}

.eclat-vitrine-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--c-text);
}

.eclat-vitrine-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--c-primary);
    background: var(--c-primary-light);
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
}

.eclat-vitrine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.55rem;
}

.eclat-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 0.4rem;
    border-radius: 12px;
    border: 1px solid var(--c-border-light);
    background: var(--c-bg-card);
    text-align: center;
    min-width: 0;
}

.eclat-badge.earned {
    border-color: var(--c-primary-soft);
    background: var(--c-primary-light);
}

.eclat-badge-ico { font-size: 1.5rem; line-height: 1; }

/* Silhouette : le badge verrouillé montre son critère, sans culpabiliser. */
.eclat-badge.locked .eclat-badge-ico { filter: grayscale(1); opacity: 0.45; }
.eclat-badge.locked .eclat-badge-label { color: var(--c-text-muted); }

.eclat-badge-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.25;
}

.eclat-badge-date {
    font-size: 0.62rem;
    color: var(--c-text-muted);
}

.eclat-badge-hint {
    font-size: 0.62rem;
    color: var(--c-text-muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Rétro-crédit one-shot ---------- */

.eclat-retro-overlay {
    position: fixed;
    inset: 0;
    z-index: 2900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background: rgba(19, 21, 22, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease-out;
}

.eclat-retro-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.eclat-retro {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(400px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--c-bg);
    border-radius: 20px;
    padding: 2rem 1.4rem 1.4rem;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(10px) scale(0.97);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.eclat-retro-overlay.active .eclat-retro { transform: translateY(0) scale(1); }

.eclat-retro-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--c-text-muted);
    cursor: pointer;
}
/* C4 : zone de tap étendue à ~44px (bouton icône 32px) — accessibilité tactile. */
.eclat-retro-close::before { content: ''; position: absolute; inset: -6px; }

.eclat-retro-close:hover { background: var(--c-bg-warm); }

.eclat-retro-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--c-primary-light);
    margin-bottom: 1rem;
}

.eclat-retro-avatar img { width: 100%; height: 100%; object-fit: cover; }
.eclat-retro-avatar-ico { font-size: 2.2rem; }

.eclat-retro-ring {
    position: relative;
    width: 84px;
    height: 84px;
    margin-bottom: 0.9rem;
}

.eclat-retro-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.eclat-retro-ring-bg {
    fill: none;
    stroke: var(--c-border-light);
    stroke-width: 6;
}

.eclat-retro-ring-fg {
    fill: none;
    stroke: var(--c-primary-soft);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.eclat-retro-ring-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--c-text);
}

.eclat-retro-title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--c-text);
}

.eclat-retro-sub {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--c-text-secondary);
}

.eclat-retro-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}

/* Cascade : chaque badge pop avec son animation-delay inline (stagger 120 ms). */
.eclat-retro-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    font-size: 1.4rem;
    background: var(--c-primary-light);
    border: 1px solid var(--c-primary-soft);
    border-radius: 50%;
    opacity: 0;
    animation: eclat-badge-rain 450ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes eclat-badge-rain {
    0% { opacity: 0; transform: scale(0.4) rotate(-8deg); }
    70% { opacity: 1; transform: scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.eclat-retro-cta {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--c-accent-vivid);
    color: var(--c-text-inverse);
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.eclat-retro-cta:hover { background: var(--c-accent-vivid-hover); }

/* ---------- Réglage « affichage sobre » (modale paramètres) ---------- */

.eclat-sober-row {
    position: relative; /* ancre le checkbox absolu (masqué) dans la row */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.45rem;
    cursor: pointer;
}

.eclat-sober-text {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--c-text-secondary);
}

.eclat-sober-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eclat-sober-switch {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 24px;
    background: var(--c-border);
    border-radius: 9999px;
    transition: background 0.18s ease;
}

.eclat-sober-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--c-bg-card);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.eclat-sober-check:checked + .eclat-sober-switch { background: var(--c-primary); }
.eclat-sober-check:checked + .eclat-sober-switch::after { transform: translateX(16px); }
.eclat-sober-check:focus-visible + .eclat-sober-switch { outline: 2px solid var(--c-primary-soft); outline-offset: 2px; }
.eclat-sober-check:disabled + .eclat-sober-switch { opacity: 0.55; }

/* ---------- Reduced motion (désactivation TOTALE des célébrations) ---------- */

@media (prefers-reduced-motion: reduce) {
    /* Sélecteurs contextuels inclus : leur spécificité (0-2-0) battrait la règle générique. */
    .eclat-halo--high,
    .pet-profile-avatar.eclat-halo--high,
    .health-view-avatar.eclat-halo--high { animation: none; }
    .carnet-ring.score-pulse { animation: none; }
    .carnet-score-delta { animation: none; opacity: 0; }
    .eclat-retro-badge { animation: none; opacity: 1; }
    .eclat-retro-ring-fg { transition: none; }
    .eclat-retro-overlay,
    .eclat-retro { transition: none; }
    .carnet-chal-bar span { transition: none; }
}

/* ---------- Tactile / petits écrans ---------- */

@media (max-width: 480px) {
    .eclat-vitrine-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    .carnet-rhythms-row { flex-direction: column; }
    .carnet-rhythm { width: 100%; }
}