/* -------------------------------------------------
   style.css – version complète (anciennes règles conservées)
   ------------------------------------------------- */

/* Couleurs & variables */
:root {
    --primary: #8572ab;
    --bg-light: #f9f9fb;
    --text-dark: #222;
}

/* Reset & bases */
*, *::before, *::after { box-sizing:border-box;margin:0;padding:0; }
body {
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.6;
    color:var(--text-dark);
    background-color:var(--bg-light);
}

/* Conteneur */
.container { max-width:960px;margin:0 auto;padding:2rem 1rem; }

/* Header */
header {
    background-color:#d4cce3;
    padding:1.5rem 2rem;
    text-align:center;
    border-radius:0 0 8px 8px;
    color:#fff;
    display:flex;align-items:center;justify-content:center;gap:.8rem;
}
header img{max-height:40px;}
header h1{margin:0;font-size:2rem;}

/* Nav */
nav{margin-top:1rem;text-align:center;}
nav a{
    margin:0 .8rem;
    color:var(--text-dark);
    text-decoration:none;
    font-weight:500;
	font-size: 1.5rem;
    position:relative;
    padding-bottom:.2rem;
}
nav a::after{
    content:"";
    height:2px;
    background:var(--primary);
    width:0;
    transition:width .25s ease;
    position:absolute;left:0;bottom:0;
}
nav a:hover::after{width:100%;}

/* Sections */
section{margin-top:3rem;font-size:1.25rem;}
section h2{margin-bottom:.8rem;color:var(--primary);font-size:1.75rem;}
section h4{margin-bottom:.5rem;margin-top:.8rem;color:var(--primary);}

/* Placeholder images */
.placeholder{
    width:100%;max-height:350px;background:#e0e0e0;border-radius:6px;
    overflow:hidden;display:flex;align-items:center;justify-content:center;
    margin:1.5rem 0;
}
.placeholder img{width:100%;}

.faded{
	color: #9d94ae;
}
.selected {
	color: #6c5894;
}
.site-principal{
    color:#6c5894;
    text-decoration:none;
    font-weight:600;
}

/* Card grid (features) */
.card-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.card{
    background:#fff;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.08);
    padding:1.2rem;transition:transform .15s ease;
}
.card:hover{transform:translateY(-3px);}
.card h3{margin-top:0;color:var(--primary);font-size:1.2rem;}

/* Footer */
footer{margin-top:4rem;text-align:center;font-size:.9rem;color:#666;}

/* -------------------------------------------------
   Animations de scroll (fade‑up)
   ------------------------------------------------- */
[data-fade]{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .6s ease-out, transform .6s ease-out;
}
[data-fade].visible{
    opacity:1;
    transform:none;
}

/* Fade‑in page load (déjà présent) */
.fade-in{animation:fadeIn .4s ease-out;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}