/* ====================================================================== */
/* ======== UI FRONT — FONDATION NEUTRE MULTI-CLIENTS =================== */
/* ======== Tokens --ui_* surchargés par le styles.css de chaque client == */
/* ======== Ordre de chargement : styles_base > ui > blocks > modules > client (styles.css) */
/* ====================================================================== */

:root {
--ui_primaire:#1f2733;
--ui_primaire_contraste:#ffffff;
--ui_primaire_doux:color-mix(in srgb, var(--ui_primaire) 7%, #ffffff);
--ui_accent:#2f5d8a;
--ui_accent_texte:#27506f;
--ui_accent_doux:color-mix(in srgb, var(--ui_accent) 12%, #ffffff);
--ui_texte:#20242b;
--ui_texte_2:#57606f;
--ui_surface:#ffffff;
--ui_surface_2:#f4f5f7;
--ui_erreur:#c0392b;
--ui_valide:#1e7e4e;
--ui_etoile:#e6a817;
--ui_bord_couleur:#e2e5ea;
--ui_bord_epaisseur:1px;
--ui_bord:var(--ui_bord_epaisseur) solid var(--ui_bord_couleur);
--ui_radius_petit:8px;
--ui_radius:14px;
--ui_radius_grand:22px;
--ui_radius_rond:999px;
--ui_ombre:0 1px 2px rgba(15, 20, 30, 0.05), 0 14px 34px -22px rgba(15, 20, 30, 0.35);
--ui_ombre_haute:0 2px 4px rgba(15, 20, 30, 0.06), 0 26px 54px -26px rgba(15, 20, 30, 0.45);
--ui_police_titres:inherit;
--ui_fs:clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
--ui_fs_petit:clamp(0.85rem, 0.82rem + 0.2vw, 0.95rem);
--ui_fs_micro:0.8rem;
--ui_fs_h1:clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
--ui_fs_h2:clamp(1.45rem, 1.2rem + 1.2vw, 2rem);
--ui_fs_h3:clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
--ui_courbe:cubic-bezier(0.22, 0.61, 0.36, 1);
--ui_transition:0.3s var(--ui_courbe);
--ui_transition_rapide:0.18s var(--ui_courbe);
--ui_gap:clamp(1.2rem, 2.5vw, 2rem);
--ui_espace_section:clamp(2.6rem, 6vw, 4.6rem);
--ui_carte_espace:clamp(1.1rem, 1rem + 1vw, 1.6rem);
--ui_grille_min:300px;
--ui_largeur_texte:760px;
--ui_largeur_site:1240px
}

/* ====================================================================== */
/* ======== ACCESSIBILITE =============================================== */
/* ====================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline:2px solid var(--ui_accent);
outline-offset:3px
}

.ui_masque {
position:absolute;
width:1px;
height:1px;
overflow:hidden;
white-space:nowrap;
clip-path:inset(50%);
margin:-1px
}

/* ====================================================================== */
/* ======== STRUCTURE =================================================== */
/* ====================================================================== */

.ui_conteneur {
width:min(var(--ui_largeur_site), 100% - 3rem);
margin:0 auto
}

.ui_section { padding:var(--ui_espace_section) 0 }

.ui_entete {
display:grid;
justify-items:center;
gap:0.7rem;
text-align:center;
margin:0 0 var(--ui_gap)
}

.ui_titre {
font-size:var(--ui_fs_h1);
font-weight:700;
font-family:var(--ui_police_titres);
color:var(--ui_primaire);
line-height:1.15;
text-wrap:balance;
margin:0
}

.ui_sousTitre {
max-width:60ch;
font-size:var(--ui_fs);
color:var(--ui_texte_2);
text-wrap:pretty;
margin:0
}

.ui_grille {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(min(var(--ui_grille_min), 100%), 1fr));
gap:var(--ui_gap);
list-style:none;
margin:0;
padding:0
}

.ui_outils {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:0.8rem 1.2rem;
margin:0 0 var(--ui_gap)
}

/* ====================================================================== */
/* ======== CARTES ====================================================== */
/* ====================================================================== */

.ui_carte {
position:relative;
display:flex;
flex-direction:column;
gap:0.8rem;
overflow:hidden;
background:var(--ui_surface);
border:var(--ui_bord);
border-radius:var(--ui_radius);
box-shadow:var(--ui_ombre);
transition:transform var(--ui_transition), box-shadow var(--ui_transition), border-color var(--ui_transition);
padding:var(--ui_carte_espace)
}

/* ====================================================================== */
/* ======== BOUTONS ===================================================== */
/* ====================================================================== */

.ui_btn {
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.55rem;
min-height:44px;
background:var(--ui_primaire);
border:1px solid var(--ui_primaire);
border-radius:var(--ui_radius_rond);
text-align:center;
text-decoration:none;
font-size:var(--ui_fs_petit);
font-weight:600;
font-family:inherit;
color:var(--ui_primaire_contraste);
cursor:pointer;
transition:background-color var(--ui_transition_rapide), border-color var(--ui_transition_rapide), color var(--ui_transition_rapide), transform var(--ui_transition_rapide), box-shadow var(--ui_transition_rapide);
padding:0.55em 1.6em
}

.ui_btn:hover {
box-shadow:var(--ui_ombre);
transform:translate3d(0, -2px, 0)
}

.ui_btnAccent {
background:var(--ui_accent);
border-color:var(--ui_accent);
color:var(--ui_primaire_contraste)
}

.ui_btnContour {
background:transparent;
color:var(--ui_primaire)
}

.ui_btnContour:hover {
background:var(--ui_primaire);
color:var(--ui_primaire_contraste)
}

.ui_btnDiscret {
background:var(--ui_surface_2);
border-color:var(--ui_bord_couleur);
color:var(--ui_texte)
}

/* ====================================================================== */
/* ======== PILLS / BADGES / ETIQUETTES ================================= */
/* ====================================================================== */

.ui_pills {
display:flex;
flex-wrap:wrap;
gap:0.5rem;
list-style:none;
margin:0;
padding:0
}

.ui_pill {
display:inline-flex;
align-items:center;
gap:0.45rem;
background:var(--ui_surface);
border:var(--ui_bord);
border-radius:var(--ui_radius_rond);
font-size:var(--ui_fs_petit);
font-weight:500;
font-family:inherit;
color:var(--ui_texte);
cursor:pointer;
transition:background-color var(--ui_transition_rapide), border-color var(--ui_transition_rapide), color var(--ui_transition_rapide);
padding:0.4em 1.1em
}

.ui_pill:hover {
border-color:var(--ui_primaire);
color:var(--ui_primaire)
}

.ui_badges {
display:flex;
flex-wrap:wrap;
gap:0.4rem;
list-style:none;
margin:0;
padding:0
}

.ui_badge {
display:inline-flex;
align-items:center;
gap:0.35rem;
background:var(--ui_primaire_doux);
border-radius:var(--ui_radius_rond);
font-size:var(--ui_fs_micro);
font-weight:600;
color:var(--ui_primaire);
letter-spacing:0.02em;
padding:0.3em 0.9em
}

.ui_etiquette {
display:inline-flex;
align-items:center;
gap:0.6rem;
text-transform:uppercase;
font-size:var(--ui_fs_micro);
font-weight:600;
color:var(--ui_accent_texte);
letter-spacing:0.18em;
margin:0
}

.ui_etoiles {
display:inline-flex;
gap:0.15rem;
font-size:var(--ui_fs_petit);
color:var(--ui_etoile)
}

/* ====================================================================== */
/* ======== NAVIGATION DE CONTENU ======================================= */
/* ====================================================================== */

.ui_retour {
display:inline-flex;
align-items:center;
gap:0.5rem;
text-decoration:none;
font-size:var(--ui_fs_petit);
font-weight:600;
color:var(--ui_texte_2);
transition:color var(--ui_transition_rapide)
}

.ui_retour:hover { color:var(--ui_primaire) }

.ui_retour i {
font-size:0.85em;
transition:transform var(--ui_transition_rapide)
}

.ui_retour:hover i { transform:translate3d(-4px, 0, 0) }

.ui_metas {
display:flex;
flex-wrap:wrap;
gap:0.4rem 1.2rem;
list-style:none;
font-size:var(--ui_fs_micro);
color:var(--ui_texte_2);
margin:0;
padding:0
}

.ui_metas i { color:var(--ui_accent_texte) }

.ui_pagination {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:0.45rem;
list-style:none;
margin:var(--ui_espace_section) 0 0;
padding:0
}

.ui_pagination a, .ui_pagination span {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:2.5rem;
height:2.5rem;
background:var(--ui_surface);
border:var(--ui_bord);
border-radius:var(--ui_radius_petit);
text-decoration:none;
font-size:var(--ui_fs_petit);
font-weight:600;
color:var(--ui_texte);
transition:background-color var(--ui_transition_rapide), border-color var(--ui_transition_rapide), color var(--ui_transition_rapide);
padding:0 0.6em
}

.ui_pagination a:hover {
border-color:var(--ui_primaire);
color:var(--ui_primaire)
}

.ui_pagination [aria-current] {
background:var(--ui_primaire);
border-color:var(--ui_primaire);
color:var(--ui_primaire_contraste)
}

/* ====================================================================== */
/* ======== FORMULAIRES ================================================= */
/* ====================================================================== */

.ui_form {
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:1rem 1.2rem
}

.ui_champPlein { grid-column:1 / -1 }

.ui_champ {
display:grid;
gap:0.4rem;
margin:0
}

.ui_champ label {
font-size:var(--ui_fs_micro);
font-weight:600;
color:var(--ui_texte_2)
}

.ui_champ input, .ui_champ select, .ui_champ textarea {
width:100%;
background:var(--ui_surface);
border:var(--ui_bord);
border-radius:var(--ui_radius_petit);
font-size:var(--ui_fs_petit);
font-family:inherit;
color:var(--ui_texte);
transition:border-color var(--ui_transition_rapide), box-shadow var(--ui_transition_rapide);
padding:0.7em 0.9em
}

.ui_champ input:focus-visible, .ui_champ select:focus-visible, .ui_champ textarea:focus-visible {
border-color:var(--ui_accent);
outline:none;
box-shadow:0 0 0 3px var(--ui_accent_doux)
}

.ui_champ textarea {
min-height:140px;
resize:vertical
}

.ui_champErreur input, .ui_champErreur select, .ui_champErreur textarea { border-color:var(--ui_erreur) }

.ui_erreur {
font-size:var(--ui_fs_micro);
font-weight:600;
color:var(--ui_erreur);
margin:0
}

.ui_valide {
font-size:var(--ui_fs_micro);
font-weight:600;
color:var(--ui_valide);
margin:0
}

@media (max-width:720px) {
	.ui_form { grid-template-columns:1fr }
}

/* ====================================================================== */
/* ======== FICHIERS / ETAT VIDE ======================================== */
/* ====================================================================== */

.ui_fichiers {
display:grid;
gap:0.6rem;
list-style:none;
margin:0;
padding:0
}

.ui_fichiers a {
display:flex;
align-items:center;
gap:0.8rem;
background:var(--ui_surface);
border:var(--ui_bord);
border-radius:var(--ui_radius_petit);
text-decoration:none;
font-size:var(--ui_fs_petit);
font-weight:500;
color:var(--ui_texte);
transition:background-color var(--ui_transition_rapide), border-color var(--ui_transition_rapide);
padding:0.8em 1em
}

.ui_fichiers a:hover {
background:var(--ui_surface_2);
border-color:var(--ui_primaire)
}

.ui_fichiers i { color:var(--ui_accent_texte) }

.ui_vide {
display:grid;
justify-items:center;
gap:0.6rem;
background:var(--ui_surface_2);
border:1px dashed var(--ui_bord_couleur);
border-radius:var(--ui_radius);
text-align:center;
color:var(--ui_texte_2);
padding:clamp(2rem, 5vw, 3.5rem)
}

/* ====================================================================== */
/* ======== APPARITIONS AU SCROLL ======================================= */
/* ====================================================================== */

.ui_apparition {
opacity:0;
backface-visibility:hidden;
transition:opacity 0.7s var(--ui_courbe), transform 0.7s var(--ui_courbe);
transform:translate3d(0, 28px, 0)
}

.ui_apparitionVisible {
opacity:1;
transform:translate3d(0, 0, 0)
}

html.sansjs .ui_apparition {
opacity:1;
transform:none
}

@media (prefers-reduced-motion:reduce) {
	.ui_apparition {
	opacity:1;
	transition:none;
	transform:none
	}

	.ui_btn, .ui_pill, .ui_carte, .ui_retour i { transition:none }
}