/* ============================================================
   STUDIO ALGO — STYLES PROPRES AUX PAGES DU SITE
   ============================================================
   ⚠️ Ce fichier-ci est écrit à la MAIN, contrairement à
   style.css qui est généré par php socle/publier-assets.php.
   On peut donc le modifier librement.

   Il ne contient que ce qui n'existe pas déjà dans le fichier
   partagé avec Club Algo. Tout le reste (boutons, blocs,
   formulaires, tableaux) vient de là-bas.

   Toutes les couleurs passent par les variables du thème :
   --accent, --accent-2, --accent-degrade, --noir-fond…
   ============================================================ */

/* ─── Barre de navigation ─── */
.sa-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sa-nav a {
    color: var(--gris-texte);
    text-decoration: none;
    font-size: .92rem; font-weight: 600;
    padding: 9px 14px; border-radius: 999px;
    transition: color .18s ease, background-color .18s ease;
}
.sa-nav a:hover        { color: var(--blanc); background: rgba(255, 255, 255, .06); }
.sa-nav a.est-actif    { color: var(--accent); background: rgba(var(--accent-rgb), .10); }
.sa-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* La passerelle vers l'autre marque, volontairement à part du menu */
.sa-bascule {
    margin-left: 10px; border: 1px solid var(--gris-fonce);
}
.sa-bascule:hover { border-color: var(--accent); }
.sa-bascule span { font-size: .8em; opacity: .7; }

.logo { height: 34px; width: auto; display: block; }

@media (max-width: 780px) {
    .site-header { flex-direction: column; gap: 10px; padding: 12px 18px; }
    .sa-nav { justify-content: center; }
    .sa-bascule { margin-left: 0; }
}

/* ─── Titres et textes ─── */
.sa-h1 {
    font-family: var(--titre); text-transform: uppercase;
    font-size: clamp(2.1rem, 6vw, 4rem); line-height: 1.02;
    margin: 12px 0 18px; text-wrap: balance;
}
.sa-h1-page { text-align: left; margin-top: 8px; }
.sa-h2 {
    font-family: var(--titre); text-transform: uppercase;
    font-size: clamp(1.5rem, 3.6vw, 2.3rem); line-height: 1.06;
    margin: 6px 0 14px; color: var(--blanc); text-wrap: balance;
}
/* Le dégradé du logo, appliqué au texte */
.sa-degrade {
    background: var(--accent-degrade);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sa-chapeau {
    color: var(--gris-texte); font-size: 1.05rem; line-height: 1.7;
    max-width: 62ch; margin: 0 auto 28px;
}
.sa-chapeau-gauche { margin-left: 0; margin-right: 0; }
.sa-intro { color: var(--gris-texte); max-width: 68ch; margin: 0 0 22px; }
.sa-accroche { color: var(--gris-texte); font-size: 1.02rem; margin: 4px 0 0; max-width: 60ch; }
.sa-note { color: var(--gris-texte); font-size: .86rem; line-height: 1.6; max-width: 60ch; }

.sa-section { padding: 74px 24px; }
.sa-tete-page { padding-bottom: 26px; }
.sa-bande     { background: var(--noir-2); border-block: 1px solid var(--gris-fonce); }

.sa-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.sa-slogan {
    margin: 34px 0 0; color: var(--gris-texte);
    font-size: .76rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
}

.sa-lien-fleche {
    color: var(--accent); font-weight: 700; text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px;
}
.sa-lien-fleche span { transition: transform .2s ease; display: inline-block; }
.sa-lien-fleche:hover span { transform: translateX(4px); }

/* ─── Les quatre prestations, en cartes ─── */
.sa-grille-offres {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px;
}
.sa-offre {
    display: flex; flex-direction: column;
    background: var(--gris-fonce);
    border: 1px solid transparent;
    border-radius: var(--rayon);
    padding: 26px 24px 22px;
    text-decoration: none;
    transition: transform .24s ease, border-color .24s ease;
}
.sa-offre:hover { transform: translateY(-4px); border-color: var(--accent); }
.sa-offre:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sa-offre-icone { font-size: 1.7rem; line-height: 1; }
.sa-offre-format {
    display: inline-block; margin: 12px 0 8px;
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent);
}
.sa-offre h3 { color: var(--blanc); font-size: 1.08rem; margin: 0 0 10px; }
.sa-offre p  { color: var(--gris-texte); font-size: .92rem; line-height: 1.6; margin: 0 0 18px; flex: 1; }

/* ─── Onglets « Vous êtes… » ─── */
.sa-profils-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sa-profil-onglet {
    background: none; border: 1px solid var(--gris-fonce);
    color: var(--gris-texte);
    font-family: var(--texte); font-size: .88rem; font-weight: 700;
    padding: 10px 18px; border-radius: 999px; cursor: pointer;
    transition: var(--transition);
}
.sa-profil-onglet:hover     { color: var(--blanc); border-color: #4a4a48; }
.sa-profil-onglet.est-actif { color: var(--noir-fond); background: var(--accent); border-color: var(--accent); }
.sa-profil-volet p { color: var(--gris-texte); font-size: 1.02rem; line-height: 1.7; max-width: 68ch; margin: 0 0 16px; }
.sa-profil-volet.est-cache { display: none; }
.sa-profil-offres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sa-profil-offres > span { color: var(--gris-texte); font-size: .82rem; margin-right: 4px; }
.sa-profil-offres a { text-decoration: none; }

/* ─── La méthode, en étapes numérotées ─── */
.sa-methode { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sa-methode li {
    display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 20px;
    padding: 22px 0; border-bottom: 1px solid var(--gris-fonce);
}
.sa-methode li:last-child { border-bottom: 0; }
.sa-methode-num {
    font-family: var(--titre); font-size: 2rem; line-height: 1;
    background: var(--accent-degrade, none);
    color: var(--accent);
    -webkit-background-clip: text; background-clip: text;
}
.sa-methode h2, .sa-methode h3 {
    color: var(--blanc); margin: 0 0 6px; font-size: 1.15rem;
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.sa-methode-duree {
    font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent); background: rgba(var(--accent-rgb), .12);
    padding: 3px 10px; border-radius: 999px;
}
.sa-methode p { color: var(--gris-texte); margin: 0; max-width: 68ch; line-height: 1.7; }
.sa-methode-large li { padding: 30px 0; }
.sa-methode-large .sa-methode-num { font-size: 2.6rem; }

/* ─── Listes à coches ─── */
.sa-liste-coches { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sa-liste-coches li {
    color: var(--gris-texte); padding-left: 26px; position: relative; line-height: 1.6;
}
.sa-liste-coches li::before {
    content: "✓"; position: absolute; left: 0; top: 0;
    color: var(--accent); font-weight: 700;
}

/* ─── Aperçu de l'espace client ─── */
.sa-espace { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 900px) { .sa-espace { grid-template-columns: 1fr 1fr; gap: 56px; } }

.sa-apercu {
    background: var(--gris-fonce); border: 1px solid #3a3a38;
    border-radius: var(--rayon); padding: 20px;
}
.sa-apercu-tete {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 14px; margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: var(--blanc); font-size: .95rem;
}
.sa-apercu-pastille {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--accent-degrade, var(--accent)); flex: 0 0 auto;
}
.sa-apercu-tete .badge { margin-left: auto; }
.sa-apercu-etape {
    display: flex; align-items: baseline; gap: 10px;
    padding: 11px 0; color: var(--gris-texte); font-size: .9rem;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.sa-apercu-etape > span { color: #8f8f8a; font-size: .8rem; }
.sa-apercu-etape.faite    { color: #949491; }
.sa-apercu-etape.faite > span   { color: var(--accent); }
.sa-apercu-etape.encours  { color: var(--blanc); }
.sa-apercu-etape.encours > span { color: var(--accent); }
.sa-apercu-etape.encours b { color: var(--accent); font-weight: 700; }
.sa-apercu-note { color: #949491; font-size: .74rem; margin: 14px 0 0; text-align: right; }

/* ─── Passerelle et appel final ─── */
.sa-passerelle {
    display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
    background: var(--gris-fonce); border-radius: var(--rayon); padding: 34px;
}
@media (min-width: 820px) { .sa-passerelle { grid-template-columns: 1fr auto; gap: 40px; } }

.sa-final { text-align: center; padding: 84px 24px; background: var(--noir-2); border-top: 1px solid var(--gris-fonce); }
.sa-final .sa-intro { margin: 0 auto 26px; }

/* ─── Page Prestations ─── */
.sa-ancres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.sa-ancres a {
    color: var(--gris-texte); text-decoration: none; font-size: .84rem; font-weight: 600;
    border: 1px solid var(--gris-fonce); border-radius: 999px; padding: 8px 15px;
    transition: var(--transition);
}
.sa-ancres a:hover { color: var(--accent); border-color: var(--accent); }

.sa-presta-tete { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 30px; }
.sa-presta-tete .sa-offre-icone { font-size: 2.2rem; }
.sa-presta-tete .sa-offre-format { margin-top: 0; }
.sa-presta-tete .sa-h2 { margin-top: 2px; }

.sa-presta-corps { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
@media (min-width: 900px) { .sa-presta-corps { grid-template-columns: 1.6fr 1fr; gap: 44px; } }
.sa-presta-texte h3 { color: var(--accent); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin: 26px 0 8px; }
.sa-presta-texte h3:first-child { margin-top: 0; }
.sa-presta-texte p  { color: var(--gris-texte); line-height: 1.75; max-width: 66ch; margin: 0; }
.sa-presta-cote .bloc h3 { color: var(--blanc); font-size: 1rem; margin: 0 0 14px; }
.sa-presta-cote .btn { width: 100%; text-align: center; }

.sa-etapes { color: var(--gris-texte); padding-left: 22px; margin: 0; line-height: 1.7; }
.sa-etapes li { margin-bottom: 8px; }
.sa-etapes li::marker { color: var(--accent); font-weight: 700; }

/* ─── Page Méthode ─── */
.sa-engagements { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.sa-engagements .bloc { margin: 0; }
.sa-engagements h3 { color: var(--blanc); font-size: 1.02rem; margin: 0 0 10px; }
.sa-engagements p  { color: var(--gris-texte); margin: 0; line-height: 1.65; font-size: .93rem; }

/* ─── Page Contact ─── */
.sa-contact { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; padding-top: 20px; }
@media (min-width: 940px) { .sa-contact { grid-template-columns: 1.5fr 1fr; gap: 34px; } }
.sa-formulaire { margin: 0; }
.sa-champs-2 { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
@media (min-width: 560px) { .sa-champs-2 { grid-template-columns: 1fr 1fr; } }
.sa-contact-cote .bloc h3 { color: var(--blanc); font-size: 1rem; margin: 0 0 12px; }
.sa-contact-cote .bloc p  { color: var(--gris-texte); margin: 0 0 8px; font-size: .93rem; }

/* ─── Pied de page ─── */
.sa-pied { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 34px; }
.sa-pied-logo { height: 40px; width: auto; margin-bottom: 14px; }
.sa-pied-marque p { color: var(--gris-texte); font-size: .88rem; line-height: 1.7; margin: 0; }
.sa-pied-col h3 {
    color: var(--blanc); font-size: .74rem; letter-spacing: .12em;
    text-transform: uppercase; margin: 0 0 14px;
}
.sa-pied-col a {
    display: block; color: var(--gris-texte); text-decoration: none;
    font-size: .89rem; padding: 5px 0; transition: color .16s ease;
}
.sa-pied-col a:hover { color: var(--accent); }
.sa-pied-bas {
    border-top: 1px solid var(--gris-fonce); margin-top: 40px; padding-top: 20px;
}
.sa-pied-bas p { color: #949491; font-size: .8rem; margin: 0; }

/* ─── Mouvement réduit ─── */
@media (prefers-reduced-motion: reduce) {
    .sa-offre:hover { transform: none; }
    .sa-lien-fleche:hover span { transform: none; }
}

/* ============================================================
   ADMINISTRATION
   ============================================================ */

/* Un bouton de formulaire qui doit ressembler à un lien : sert aux
   petites actions (masquer, supprimer) qui doivent passer par un POST
   pour être protégées par le jeton anti-CSRF. */
.lien-bouton {
    background: none; border: 0; padding: 0;
    color: var(--gris-texte); font-family: var(--texte);
    font-size: .88rem; font-weight: 700; cursor: pointer;
    transition: color .16s ease;
}
.lien-bouton:hover { color: var(--blanc); }
.lien-danger        { color: #ff8a8a; }
.lien-danger:hover  { color: #ff5050; }

/* ─── Liste des demandes reçues ─── */
.sa-demandes { display: grid; gap: 14px; }
.sa-demande {
    background: var(--noir-fond);
    border: 1px solid #2f2f2f;
    border-left: 3px solid var(--accent);
    border-radius: var(--rayon);
    padding: 20px 22px;
}
/* Une demande déjà traitée s'efface visuellement, sans disparaître */
.sa-demande.est-traitee { border-left-color: #3a3a3a; opacity: .62; }

.sa-demande-tete {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.sa-demande-tete strong { color: var(--blanc); font-size: 1.02rem; }
.sa-demande-entreprise { color: var(--gris-texte); font-size: .88rem; margin-left: 8px; }
.sa-demande-date { color: var(--gris-texte); font-size: .8rem; margin-left: auto; }

.sa-demande-infos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 20px; margin: 0 0 14px;
}
.sa-demande-infos dt {
    color: var(--gris-texte); font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px;
}
.sa-demande-infos dd { margin: 0; color: var(--blanc); font-size: .9rem; word-break: break-word; }
.sa-demande-infos a  { color: var(--accent); }

.sa-demande-message {
    background: var(--gris-fonce); border-radius: 10px;
    padding: 14px 16px; margin: 0 0 16px;
    color: var(--gris-texte); font-size: .93rem; line-height: 1.65;
    white-space: pre-line;
}
.sa-demande-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sa-demande-actions .btn { padding: 10px 20px; font-size: .82rem; }

/* ─── Page de connexion ─── */
.sa-connexion { max-width: 480px; padding-top: 40px; }
.sa-connexion .bloc { margin: 0; }
.sa-connexion .btn  { width: 100%; }

/* ============================================================
   RÉALISATIONS (côté public)
   ============================================================ */
.sa-realisations { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }

.sa-reali {
    background: var(--gris-fonce); border-radius: var(--rayon);
    overflow: hidden; display: flex; flex-direction: column;
    border: 1px solid transparent; transition: transform .24s ease, border-color .24s ease;
}
.sa-reali:hover { transform: translateY(-4px); border-color: var(--accent); }
.sa-reali-image {
    aspect-ratio: 16 / 10; width: 100%; object-fit: cover; display: block;
    background: var(--noir-2);
}
/* Sans photo, un aplat aux couleurs de la marque plutôt qu'un trou */
.sa-reali-sansimage {
    aspect-ratio: 16 / 10; display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .16), transparent 70%), var(--noir-2);
    color: var(--accent); font-family: var(--titre); font-size: 1.6rem; text-transform: uppercase;
}
.sa-reali-corps { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.sa-reali-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 10px;
}
.sa-reali-meta .annee { color: var(--gris-texte); }
.sa-reali h3 { color: var(--blanc); font-size: 1.1rem; margin: 0 0 4px; }
.sa-reali-client { color: var(--gris-texte); font-size: .84rem; margin: 0 0 12px; }
.sa-reali p { color: var(--gris-texte); font-size: .93rem; line-height: 1.65; margin: 0 0 14px; }
.sa-reali-resultat {
    margin-top: auto; padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: var(--accent); font-weight: 700; font-size: .92rem;
}
.sa-reali-lien { margin-top: 12px; }

/* Filtres par prestation */
.sa-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 34px; }
.sa-filtre {
    background: none; border: 1px solid var(--gris-fonce); color: var(--gris-texte);
    font-family: var(--texte); font-size: .84rem; font-weight: 700;
    padding: 9px 17px; border-radius: 999px; cursor: pointer; transition: var(--transition);
}
.sa-filtre:hover     { color: var(--blanc); border-color: #4a4a48; }
.sa-filtre.est-actif { color: var(--noir-fond); background: var(--accent); border-color: var(--accent); }
.sa-reali.est-cache  { display: none; }

@media (prefers-reduced-motion: reduce) {
    .sa-reali:hover { transform: none; }
}

/* ─── Entrée de l'espace privé ───
   Volontairement moins visible que le menu principal — ce n'est pas
   ce qu'un prospect vient chercher — mais présente là où on la cherche. */
.sa-connexion-lien {
    color: #8a8a8a !important;
    font-size: .86rem !important;
}
.sa-connexion-lien:hover { color: var(--blanc) !important; }
.sa-connexion-lien span { color: var(--accent); font-size: .7em; vertical-align: 1px; }

.sa-pied-connexion {
    display: inline-block !important;
    border: 1px solid var(--gris-fonce); border-radius: 999px;
    padding: 8px 18px !important; margin-top: 4px;
    transition: var(--transition);
}
.sa-pied-connexion:hover { border-color: var(--accent); }

/* ============================================================
   PROJETS — COMMUN À L'ADMIN ET À L'ESPACE CLIENT
   ============================================================ */

/* Barre d'avancement */
.sa-progression { display: flex; align-items: center; gap: 10px; }
.sa-progression > span { color: var(--gris-texte); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.sa-progression-barre {
    flex: 1; min-width: 80px; height: 7px; border-radius: 999px;
    background: rgba(255, 255, 255, .08); overflow: hidden;
}
.sa-progression-barre span {
    display: block; height: 100%; border-radius: 999px;
    background: var(--accent-degrade, var(--accent));
    transition: width .5s ease;
}
.sa-progression-large { min-width: 220px; flex: 1; max-width: 360px; }
.sa-progression-large .sa-progression-barre { height: 9px; }

/* Pastille d'état d'un projet */
.sa-projet-etat {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    background: rgba(255, 255, 255, .07); color: var(--gris-texte);
}
.sa-projet-etat.etat-en_cours { background: rgba(var(--accent-rgb), .14); color: var(--accent); }
.sa-projet-etat.etat-livre,
.sa-projet-etat.etat-termine  { background: rgba(120, 220, 150, .12); color: #8fe0a8; }
.sa-projet-etat.etat-en_pause { background: rgba(255, 180, 90, .12);  color: #ffc07a; }

/* ─── Admin : en-tête d'une fiche projet ─── */
.sa-projet-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.sa-projet-tete .sa-progression { min-width: 220px; }

/* ─── Admin : liste des étapes ─── */
.sa-etapes-admin { display: grid; gap: 8px; margin-bottom: 22px; }
.sa-etape-ligne {
    display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto;
    gap: 12px; align-items: start;
    background: var(--noir-fond); border: 1px solid #2f2f2f; border-radius: 10px;
    padding: 12px 14px;
}
.sa-etape-puce { color: #8f8f8a; font-weight: 700; text-align: center; padding-top: 1px; }
.sa-etape-ligne.etat-faite    .sa-etape-puce { color: var(--accent); }
.sa-etape-ligne.etat-en_cours .sa-etape-puce { color: var(--accent); }
.sa-etape-ligne.etat-bloquee  .sa-etape-puce { color: #ff8a8a; }
.sa-etape-ligne.etat-faite strong { color: var(--gris-texte); }
.sa-etape-corps strong { color: var(--blanc); margin-right: 8px; }
.sa-etape-corps .badge { vertical-align: 1px; }
.sa-etape-corps p { color: var(--gris-texte); font-size: .86rem; margin: 5px 0 0; }
.sa-etape-date { color: var(--gris-texte); font-size: .78rem; margin-left: 6px; }
.sa-etape-actions select { padding: 6px 10px; font-size: .82rem; }

/* Formulaires d'ajout sous une liste */
.sa-ajout { border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 20px; margin-top: 8px; }

/* ─── Admin : les deux façons de donner un accès ─── */
.sa-acces { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.sa-acces-carte {
    background: var(--noir-fond); border: 1px solid #2f2f2f; border-radius: var(--rayon);
    padding: 20px;
}
.sa-acces-carte h3 { color: var(--blanc); font-size: 1rem; margin: 0 0 6px; }
.sa-acces-carte p  { color: var(--gris-texte); font-size: .88rem; margin: 0 0 16px; }

/* ============================================================
   ESPACE CLIENT
   ============================================================ */

/* Liste des projets */
.sa-projets-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.sa-projet-carte {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--gris-fonce); border: 1px solid transparent; border-radius: var(--rayon);
    padding: 24px; text-decoration: none;
    transition: transform .24s ease, border-color .24s ease;
}
.sa-projet-carte:hover { transform: translateY(-3px); border-color: var(--accent); }
.sa-projet-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sa-projet-carte-tete { display: flex; align-items: center; gap: 8px; }
.sa-projet-carte h2 { color: var(--blanc); font-size: 1.15rem; margin: 4px 0 0; }
.sa-projet-type { color: var(--gris-texte); font-size: .85rem; margin: 0; }
.sa-projet-alerte {
    margin: 4px 0 0; padding: 9px 12px; border-radius: 8px;
    background: rgba(var(--accent-rgb), .10); color: var(--accent);
    font-size: .84rem; font-weight: 700;
}
.sa-projet-carte .sa-lien-fleche { margin-top: auto; padding-top: 6px; }

/* En-tête d'un projet */
.sa-projet-resume { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sa-projet-date { color: var(--gris-texte); font-size: .9rem; }

/* Ce qui attend le client : volontairement bien visible */
.sa-alertes {
    border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .07);
    border-radius: var(--rayon); padding: 18px 22px; margin-bottom: 24px;
}
.sa-alertes h2 { color: var(--accent); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; }
.sa-alertes ul { margin: 0; padding-left: 18px; color: var(--blanc); line-height: 1.7; }

.sa-client-grille { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 980px) { .sa-client-grille { grid-template-columns: 1fr 1.35fr; } }
.sa-client-grille .bloc { margin: 0; }

/* La frise des étapes : une ligne verticale qui relie les puces */
.sa-frise { list-style: none; margin: 0; padding: 0; position: relative; }
.sa-frise::before {
    content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px;
    width: 2px; background: rgba(255, 255, 255, .08);
}
.sa-frise li {
    position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px; padding: 0 0 20px;
}
.sa-frise li:last-child { padding-bottom: 0; }
.sa-frise-puce {
    position: relative; z-index: 1;
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--gris-fonce); border: 2px solid #3a3a3a;
    color: #949491; font-size: .75rem; font-weight: 700;
}
.sa-frise li.etat-faite    .sa-frise-puce { background: var(--accent); border-color: var(--accent); color: var(--noir-fond); }
.sa-frise li.etat-en_cours .sa-frise-puce { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .15); }
.sa-frise li.etat-bloquee  .sa-frise-puce { border-color: #ff8a8a; color: #ff8a8a; }
.sa-frise strong { color: var(--blanc); display: inline; margin-right: 8px; }
.sa-frise li.etat-faite strong { color: var(--gris-texte); }
.sa-frise-etat { color: var(--gris-texte); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; }
.sa-frise p { color: var(--gris-texte); font-size: .88rem; margin: 5px 0 0; line-height: 1.6; }
.sa-frise small { display: block; color: #949491; font-size: .78rem; margin-top: 5px; }
.sa-frise li.attend-client strong { color: var(--accent); }

/* Les livrables */
.sa-livrables { display: grid; gap: 16px; }
.sa-livrable {
    background: var(--noir-fond); border: 1px solid #2f2f2f; border-radius: var(--rayon);
    overflow: hidden;
}
.sa-livrable.etat-en_attente { border-color: rgba(var(--accent-rgb), .45); }
.sa-livrable.etat-correction { border-color: rgba(255, 138, 138, .45); }
.sa-livrable-media { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #000; }
.sa-livrable-corps { padding: 18px 20px; }
.sa-livrable-corps h3 { color: var(--blanc); font-size: 1.02rem; margin: 0 0 4px; }
.sa-livrable-etat { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-texte); }
.sa-livrable.etat-en_attente .sa-livrable-etat { color: var(--accent); }
.sa-livrable.etat-correction .sa-livrable-etat { color: #ff9b9b; }
.sa-livrable-corps p { color: var(--gris-texte); font-size: .9rem; margin: 10px 0 0; line-height: 1.6; }
.sa-retour { font-style: italic; }
.sa-valide { color: #8fe0a8 !important; font-weight: 700; }

.sa-livrable-actions { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.sa-livrable-actions .btn { padding: 11px 22px; font-size: .84rem; }
.sa-correction summary {
    cursor: pointer; color: var(--gris-texte); font-weight: 700; font-size: .88rem;
    padding: 11px 0; list-style: none;
}
.sa-correction summary::-webkit-details-marker { display: none; }
.sa-correction summary:hover { color: var(--blanc); }
.sa-correction[open] { flex-basis: 100%; }
.sa-correction form { margin-top: 6px; }

@media (max-width: 640px) {
    .sa-etape-ligne { grid-template-columns: 22px minmax(0, 1fr); }
    .sa-etape-actions, .sa-etape-ligne > form:last-child { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .sa-projet-carte:hover { transform: none; }
    .sa-progression-barre span { transition: none; }
}

/* --- Admin : choisir l acces des la creation d un client --- */
.sa-acces-choix { border-top: 1px solid rgba(255, 255, 255, .07); margin-top: 8px; padding-top: 20px; }
.sa-acces-choix > h3 { color: var(--blanc); font-size: 1rem; margin: 0 0 4px; }
.sa-acces-choix > p  { color: var(--gris-texte); font-size: .88rem; margin: 0 0 14px; }
.sa-acces-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
/* Le champ mot de passe ne sert qu a l option « je cree le compte moi-meme ».
   Sur un vieux navigateur qui ne connait pas :has, il reste simplement visible. */
.sa-acces-choix:has(input[name="acces"][value="aucun"]:checked) .sa-mdp-client,
.sa-acces-choix:has(input[name="acces"][value="invitation"]:checked) .sa-mdp-client { display: none; }
/* Dans les cartes de choix d acces, l aide doit pouvoir passer a la ligne :
   la regle generale des cartes la coupe avec des points de suspension. */
.sa-acces-options .pers-identite small,
.sa-acces-options .pers-identite strong { white-space: normal; overflow: visible; }
.sa-acces-options .pers-carte { align-items: flex-start; }

/* --- Espace client : les demandes de projet --- */
.sa-tete-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.sa-client-section-titre { font-family: var(--titre); text-transform: uppercase; color: var(--blanc); font-size: 1.3rem; margin: 44px 0 16px; }
.sa-demandes-client { display: grid; gap: 14px; }
.sa-demande-client { background: var(--gris-fonce); border-radius: var(--rayon); padding: 22px 24px; }
.sa-demande-client.statut-cloturee { opacity: .6; }
.sa-demande-client-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.sa-demande-client-tete h3 { color: var(--blanc); font-size: 1.05rem; margin: 0; }
.sa-demande-client-meta { color: var(--gris-texte); font-size: .82rem; margin: 0 0 18px; }
/* Le suivi en quatre temps : une barre par etape, allumee au fil de l avancement */
.sa-suivi { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sa-suivi li { position: relative; padding-top: 14px; font-size: .74rem; font-weight: 700; color: #949491; }
.sa-suivi li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.sa-suivi li.est-passee { color: var(--gris-texte); }
.sa-suivi li.est-passee::before { background: var(--accent); }
.sa-suivi li.est-actuelle { color: var(--accent); }
.sa-suivi li.est-actuelle::before { background: var(--accent-degrade, var(--accent)); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.sa-demande-phrase { color: var(--blanc); font-size: .92rem; margin: 0; }
.sa-demande-reponse {
    margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--accent);
    background: rgba(var(--accent-rgb), .06); border-radius: 0 8px 8px 0;
    color: var(--gris-texte); font-size: .9rem; line-height: 1.6;
}
.sa-demande-reponse strong { display: block; color: var(--accent); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
@media (max-width: 560px) { .sa-suivi { grid-template-columns: repeat(2, 1fr); row-gap: 14px; } }

/* Formulaire de demande : les prestations en cartes */
.sa-prestations-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.sa-prestations-choix .pers-identite small,
.sa-prestations-choix .pers-identite strong { white-space: normal; overflow: visible; }
.sa-demande-form { max-width: 820px; }

/* Admin : regler le statut et la reponse d une demande */
.sa-demande-reglage { display: grid; grid-template-columns: 230px minmax(0, 1fr) auto; gap: 12px; align-items: end; margin: 0 0 14px; }
.sa-demande-reglage .champ { margin: 0; }
.sa-demande-reglage textarea { min-height: 46px; }
@media (max-width: 760px) { .sa-demande-reglage { grid-template-columns: 1fr; } }

/* --- Lecteur video et notes minutees --- */
.sa-lecteur { background: #000; }
.sa-yt-cadre { position: relative; aspect-ratio: 16 / 9; }
.sa-yt-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* La frise des reperes, sous la video : un point par note */
.sa-reperes { position: relative; height: 14px; background: var(--noir-2); border-top: 1px solid rgba(255, 255, 255, .06); }
.sa-reperes:empty { display: none; }
.sa-repere {
    position: absolute; top: 3px; width: 8px; height: 8px; margin-left: -4px;
    border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .25);
    transition: transform .15s ease;
}
.sa-repere.est-traitee { background: #5a5a58; box-shadow: none; }
.sa-repere:hover, .sa-repere:focus-visible { transform: scale(1.5); }
.sa-notes-bloc { margin-top: 18px; border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 16px; }
.sa-notes-bloc h4 { color: var(--blanc); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px; }
.sa-notes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.sa-notes li {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
    background: var(--gris-fonce); border-radius: 10px; padding: 10px 12px;
}
.sa-notes li.est-traitee { opacity: .55; }
.sa-notes p { margin: 0; color: var(--blanc); font-size: .9rem; line-height: 1.5; }
.sa-notes small { color: var(--gris-texte); font-size: .74rem; }
.sa-note-tc {
    font-family: ui-monospace, Consolas, monospace; font-weight: 700; font-size: .82rem;
    color: var(--noir-fond); background: var(--accent); border: 0; border-radius: 6px;
    padding: 4px 8px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.sa-note-generale { background: rgba(255, 255, 255, .1); color: var(--gris-texte); cursor: default; font-family: var(--texte); }
.sa-note-form .champ { margin-bottom: 10px; }
.sa-note-moment { color: var(--gris-texte); font-weight: 400; }
.sa-note-moment.est-fixe { color: var(--accent); font-weight: 700; }

/* Admin : livrables et leurs notes, barre d envoi */
.sa-livrables-admin { display: grid; gap: 12px; margin-bottom: 20px; }
.sa-livrable-admin { background: var(--noir-fond); border: 1px solid #2f2f2f; border-radius: 12px; padding: 16px 18px; }
.sa-livrable-admin-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.sa-livrable-admin-tete strong { color: var(--blanc); }
.sa-livrable-admin-tete form { margin-left: auto; }
.sa-livrable-admin .sa-notes { margin: 12px 0 0; }
.sa-envoi { margin: 12px 0 4px; }
.sa-envoi .sa-progression-barre { height: 9px; }
.sa-envoi b { display: block; color: var(--gris-texte); font-size: .82rem; margin-top: 6px; }

/* --- Admin : la video et ses notes, cote a cote --- */
.sa-revue { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 12px; align-items: start; }
@media (min-width: 900px) { .sa-revue { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.sa-revue .sa-lecteur { border-radius: 10px; overflow: hidden; }
.sa-revue .sa-livrable-media { display: block; width: 100%; max-height: 440px; object-fit: contain; background: #000; }
/* La liste des notes defile si elle est plus haute que la video */
.sa-revue-notes { max-height: 460px; overflow-y: auto; }
.sa-revue-notes .sa-notes { margin: 0; }
.sa-revue-vide { color: var(--gris-texte); font-size: .88rem; margin: 0; }

/* ============================================================
   PAGE « PARCS ET LIEUX DE LOISIRS » (loisirs.php)
   ============================================================ */

/* Les lieux qu'on sert : des étiquettes, pour que le visiteur se reconnaisse */
.sa-lieux { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.sa-lieux span {
    padding: 6px 14px;
    border: 1px solid var(--gris-fonce); border-radius: 999px;
    background: #161616; color: var(--gris-texte);
    font-size: .82rem; font-weight: 600;
}

/* Les cartes « problème » : même allure que les offres, mais sans lien */
.sa-grille-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.sa-offre-fixe { cursor: default; }
.sa-offre-fixe:hover { transform: none; }

/* Les quatre moments de la saison */
.sa-saison { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 620px)  { .sa-saison { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .sa-saison { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sa-saison > li { position: relative; padding: 22px 22px 24px; border: 1px solid var(--gris-fonce); border-top: 3px solid var(--accent); border-radius: 14px; background: #121212; }
.sa-saison-periode { display: block; margin-bottom: 8px; color: var(--accent-2); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sa-saison h3 { margin: 0 0 8px; color: var(--blanc); font-size: 1.02rem; }
.sa-saison p { margin: 0; color: #d8d8d8; font-size: .92rem; line-height: 1.6; }

/* Les deux offres d'entrée, côte à côte */
.sa-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; align-items: start; }
.sa-duo-carte { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.sa-duo-carte > .badge { align-self: flex-start; margin-bottom: 6px; }
.sa-duo-carte h3 { margin: 4px 0 0; color: var(--blanc); font-size: 1.24rem; }
.sa-duo-carte .sa-accroche { margin: 0 0 8px; }
.sa-duo-carte .sa-liste-coches { margin-bottom: 8px; }
.sa-duo-carte .sa-actions { margin-top: auto; padding-top: 10px; }

/* Le bandeau de l'accueil qui mene a la page Parcs & loisirs */
.sa-bandeau-secteur { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 16px 20px; border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 14px; background: rgba(var(--accent-rgb), .07); color: #d8d8d8; font-size: .94rem; line-height: 1.5; transition: border-color .2s ease, background .2s ease; }
.sa-bandeau-secteur:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.sa-bandeau-secteur strong { color: var(--blanc); }
.sa-bandeau-secteur > span:first-child { font-size: 1.5rem; line-height: 1; }
.sa-bandeau-secteur > span:nth-child(2) { flex: 1; min-width: 220px; }
.sa-bandeau-secteur .sa-lien-fleche { white-space: nowrap; }

/* ============================================================
   LE FOND ANIMÉ DU SITE (assets/fond-topo.js)
   ============================================================ */
/* La page devient transparente : c'est le fond qui donne le noir */
html.a-fond { background-color: var(--noir-fond); }
body.a-fond-topo { background-color: transparent; }
body.a-fond-topo > *:not(.sa-fond) { position: relative; z-index: 1; }
.sa-fond { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--noir-fond); pointer-events: none; }
.sa-fond canvas { display: block; width: 100%; height: 100%; }
/* Deux voiles pour que le texte reste lisible : dégradé haut/bas, puis coins assombris */
.sa-fond-voile { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(17,17,17,.45) 0%, rgba(17,17,17,0) 30%, rgba(17,17,17,0) 55%, var(--noir-fond) 100%); }
.sa-fond-vignette { position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 0%, rgba(17,17,17,.72) 100%); }
/* Les bandes sombres laissent voir le fond au travers */
body.a-fond-topo .sa-bande { background: rgba(12, 12, 12, .68); }
body.a-fond-topo .sa-final { background: rgba(12, 12, 12, .68); }
body.a-fond-topo .site-footer { background: rgba(12, 12, 12, .82); }
/* Le bandeau d'ouverture laisse voir le fond : on garde son halo, on retire son noir */
body.a-fond-topo .hero { background-color: transparent; }
body.a-fond-topo main > section { position: relative; }

/* ─── Le menu du site sur téléphone : replié derrière un bouton ─── */
.sa-menu-bouton { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 40px; padding: 0 9px;
    border: 1px solid var(--gris-fonce); border-radius: 10px; background: #161616; cursor: pointer; }
.sa-menu-bouton span { display: block; height: 2px; border-radius: 2px; background: var(--blanc); transition: transform .2s ease, opacity .2s ease; }
.sa-menu-bouton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sa-menu-bouton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sa-menu-bouton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) {
    .site-header { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
    .sa-menu-bouton { display: flex; }
    /* Sans JavaScript (pas de classe sur <html>), le menu reste visible sous l'en-tête */
    .a-menu-repliable .sa-nav {
        position: absolute; top: 100%; left: 0; right: 0; display: none;
        flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 14px 16px;
        background: rgba(var(--noir-fond-rgb), .98); border-bottom: 1px solid var(--gris-fonce);
        box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    }
    .a-menu-repliable .sa-nav.est-ouvert { display: flex; }
    .sa-nav a { padding: 12px 14px; font-size: .95rem; text-align: left; }
    .sa-bascule { margin-top: 6px; }
}

/* ============================================================
   L'ENTRÉE DU SITE (assets/entree.js)
   ============================================================ */

/* Le voile d'ouverture : noir, le logo au centre, puis il s'efface.
   Tout en CSS : s'il ne se passe rien d'autre, il disparaît quand même. */
/* Le rideau : le logo monte et sort par le haut, le voile se lève derrière lui. */
@keyframes sa-voile {
    0%   { transform: translateY(0); }
    55%  { transform: translateY(0); }
    100% { transform: translateY(-101%); visibility: hidden; }
}
@keyframes sa-logo {
    0%   { opacity: 0; transform: translateY(14px) scale(.96); }
    28%  { opacity: 1; transform: translateY(0) scale(1); }
    50%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 1; transform: translateY(-62vh) scale(.82); visibility: hidden; }
}
html.a-ouverture::before {
    content: ''; position: fixed; inset: 0; z-index: 2000;
    background: var(--noir-fond); pointer-events: none;
    /* La courbe : lent au départ, franc à la fin — le rideau « part » vraiment */
    animation: sa-voile 1.5s cubic-bezier(.7, 0, .2, 1) .25s forwards;
}
html.a-ouverture::after {
    content: ''; position: fixed; inset: 0; z-index: 2001; pointer-events: none;
    background: url('logo.png') center center / 150px auto no-repeat;
    /* Le logo part un souffle avant le voile : il entraîne le rideau */
    animation: sa-logo 1.45s cubic-bezier(.7, 0, .2, 1) .1s forwards;
}

/* L'ouverture de la page : surtitre, titre, phrase, boutons, slogan */
@keyframes sa-monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero .surtitre, .hero h1, .hero .sa-chapeau, .hero .sa-actions, .hero .sa-slogan {
    animation: sa-monte .85s cubic-bezier(.2, .7, .2, 1) backwards;
}
.hero .surtitre   { animation-delay: .10s; }
.hero h1          { animation-delay: .20s; }
.hero .sa-chapeau { animation-delay: .34s; }
.hero .sa-actions { animation-delay: .46s; }
.hero .sa-slogan  { animation-delay: .58s; }
/* Après le voile, tout démarre un peu plus tard */
html.a-ouverture .hero .surtitre   { animation-delay: .95s; }
html.a-ouverture .hero h1          { animation-delay: 1.05s; }
html.a-ouverture .hero .sa-chapeau { animation-delay: 1.30s; }
html.a-ouverture .hero .sa-actions { animation-delay: 1.42s; }
html.a-ouverture .hero .sa-slogan  { animation-delay: 1.54s; }

/* Le titre mot à mot : chaque mot monte derrière une fenêtre qui le masque */
@keyframes sa-mot { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }
.hero h1.est-decoupe { animation: none; }
.sa-mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.sa-mot > span { display: inline-block; animation: sa-mot .9s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(.22s + var(--i) * .07s); }
html.a-ouverture .sa-mot > span { animation-delay: calc(1.05s + var(--i) * .07s); }

/* Les blocs se révèlent au défilement (la classe « a-anime » vient du script) */
.a-anime .sa-revele { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.a-anime .sa-revele.est-vu { opacity: 1; transform: none; }

/* Moins d'animations : tout est immobile et visible */
@media (prefers-reduced-motion: reduce) {
    html.a-ouverture::before, html.a-ouverture::after { display: none; }
    .hero .surtitre, .hero h1, .hero .sa-chapeau, .hero .sa-actions, .hero .sa-slogan,
    .sa-mot > span { animation: none; }
    .a-anime .sa-revele { opacity: 1; transform: none; transition: none; }
}
/* À l'impression, rien ne reste caché */
@media print { .a-anime .sa-revele { opacity: 1 !important; transform: none !important; } html.a-ouverture::before, html.a-ouverture::after { display: none !important; } }

/* ─── Pages d'information légale ───────────────────────────────
   Confidentialité, conditions d'utilisation, cookies. Des textes
   longs : on privilégie une colonne étroite et un interligne large,
   c'est ce qui rend un paragraphe lisible. Les couleurs utilisées
   ici tiennent le contraste AA (4,5:1) sur le fond du site. */
.sa-chapo {
    max-width: 62ch; margin: 18px auto 0;
    color: var(--gris-texte); font-size: 1.02rem; line-height: 1.7;
}
.sa-tete-page .sa-chapo { text-align: center; }

.sa-liste-sobre {
    max-width: 62ch; margin: 12px 0 0; padding-left: 20px;
    color: var(--gris-texte); font-size: .86rem; line-height: 1.7;
}
.sa-liste-sobre li { margin-bottom: 8px; }
.sa-liste-sobre li strong { color: var(--blanc); font-weight: 700; }
.sa-liste-sobre li::marker { color: var(--accent); }

/* Le sommaire en tête des pages longues */
.sa-sommaire { margin: 0 0 8px; padding: 18px 20px; border: 1px solid var(--gris-fonce); border-radius: var(--rayon); }
.sa-sommaire h2 { margin: 0 0 12px; color: var(--blanc); font-family: var(--texte); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.sa-sommaire ol { margin: 0; padding-left: 20px; color: var(--gris-texte); font-size: .88rem; line-height: 1.9; }
.sa-sommaire a { color: var(--gris-texte); text-decoration: none; }
.sa-sommaire a:hover, .sa-sommaire a:focus-visible { color: var(--accent); text-decoration: underline; }

/* Les liens légaux, en bas de chaque page */
.sa-pied-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px; }
.sa-pied-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sa-pied-legal a { color: #8a8a8a; font-size: .8rem; text-decoration: none; }
.sa-pied-legal a:hover, .sa-pied-legal a:focus-visible { color: var(--blanc); text-decoration: underline; }

/* ─── Le lien d'évitement ───────────────────────────────────────
   Première chose dans la page, invisible tant qu'on ne l'atteint pas
   au clavier. Il permet de sauter le menu, qui se répète sur chaque
   page : sans lui, il faut retraverser tout le menu à chaque fois. */
.sa-evitement {
    position: absolute; left: 12px; top: -60px; z-index: 2000;
    padding: 12px 20px; border-radius: 0 0 var(--rayon) var(--rayon);
    background: var(--accent); color: var(--noir-fond);
    font-weight: 800; text-decoration: none;
    transition: top .18s ease;
}
.sa-evitement:focus { top: 0; }