/* Don Emilia – rafraîchissement visuel 2026-11-13
 *
 * Feuille purement additive : elle ne modifie ni le HTML ni le JavaScript.
 * Pour revenir à l'ancien aspect, il suffit de retirer la ligne
 * <link rel="stylesheet" href="assets/css/refresh.css..."> des pages.
 *
 * Les valeurs (rayons, ombres, anneau de focus, courbes d'animation)
 * reprennent les jetons du design system Astryx (licence MIT), avec le
 * rouge Don Emilia comme couleur d'accent.
 */
:root {
    --de-accent: #C8102E;
    --de-accent-soft: rgba(200, 16, 46, 0.16);
    --de-radius-inner: 4px;
    --de-radius-element: 8px;
    --de-radius-container: 12px;
    --de-shadow-low: 0 1px 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.07);
    --de-shadow-med: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 12px rgba(0, 0, 0, 0.09);
    --de-ease: cubic-bezier(0.24, 1, 0.4, 1);
    --de-duration-fast: 175ms;
}

/* ---------- Texte plus net et mieux coupé ---------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--de-accent); color: #fff; }

/* ---------- Angles harmonisés (les pages connexion et contact
              avaient des angles vifs, le reste du site est arrondi) ---------- */
.rounded-sm { border-radius: var(--de-radius-element); }
.bg-white.rounded-sm.border,
.bg-white.rounded-sm.shadow-sm,
.bg-white.rounded-sm.shadow-lg { border-radius: var(--de-radius-container); }

/* ---------- Ombres plus douces, en deux couches ---------- */
.bg-white.rounded-sm.shadow-sm { --tw-shadow: var(--de-shadow-low); }
.bg-white.rounded-sm.shadow-lg { --tw-shadow: var(--de-shadow-med); }

/* ---------- Champs de formulaire : état actif clairement visible ---------- */
input.border.border-gray-300,
textarea.border.border-gray-300,
select.border.border-gray-300 {
    transition: border-color var(--de-duration-fast) var(--de-ease),
                box-shadow var(--de-duration-fast) var(--de-ease);
}
input.border.border-gray-300:hover,
textarea.border.border-gray-300:hover,
select.border.border-gray-300:hover { border-color: #9ca3af; }
input.border.border-gray-300:focus,
textarea.border.border-gray-300:focus,
select.border.border-gray-300:focus {
    border-color: var(--de-accent);
    box-shadow: 0 0 0 3px var(--de-accent-soft);
}

/* ---------- Navigation au clavier : anneau de focus toujours visible ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--de-accent) !important;
    outline-offset: 3px !important;
}
.bg-brand-dark a:focus-visible,
.bg-brand-dark button:focus-visible,
.bg-brand-red a:focus-visible,
.bg-brand-red button:focus-visible { outline-color: #fff !important; }

/* ---------- Transitions plus vives ---------- */
.transition,
.transition-all,
.transition-colors,
.transition-transform,
.transition-opacity { transition-timing-function: var(--de-ease); }

button:disabled,
button[disabled] { cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
    .transition,
    .transition-all,
    .transition-colors,
    .transition-transform,
    .transition-opacity { transition-duration: 0.01ms !important; }
}