/* ============================================================
   bandes-accueil.css — les bandes communes aux deux accueils
   ============================================================
   L'accueil gratuit (index.html) et l'accueil abonné (loggedinapp.html)
   racontent la même chose à partir de « Le spiKto et l'app » : ce qu'est
   l'interface, le sport-neuronal®, la preuve, la boutiK.

   Ces règles vivaient dans le <style> d'index.html. Les recopier dans la
   page abonné aurait créé deux vérités qui se seraient éloignées au
   premier ajustement. Elles sont ici, et les deux pages les chargent.

   Ce que ce fichier NE contient PAS : l'enKodeur, la grille des exercices
   et les cartes d'abonnement, qui n'existent que sur la page gratuite.
   ============================================================ */

/* Les couleurs de la marque. Elles vivaient dans le <style> d'index.html ;
   les règles ci-dessous en dépendent, donc elles voyagent avec. */
:root {
    --spikto-k-color: #0089D4; --framboise: #C8267D; --bleu: #0089D4; --bois: #7B4F2E;
    --creme: #ffffff; --ciel: #e8f4fb; --sable-clair: #fdf8f0;
}

.mot { white-space: nowrap; }
/* Le ® par défaut est trop gros et trop haut : il prend le pas sur le
   mot qu'il accompagne. */
sup { font-size: 0.52em; vertical-align: super; line-height: 0; margin-left: 0.04em; }

/* ===== LES BANDES =====
   Le fond de sable en continu donnait une seule page qui n'en finit
   pas. Chaque sujet reçoit maintenant sa bande, sur toute la largeur
   et avec son propre fond : on sent qu'on change de sujet comme on
   sentirait qu'on change de page. */
.bande { width: 100%; }
.bande-blanche { background: var(--creme); }
.bande-ardoise { background: linear-gradient(160deg, #24374d 0%, #16283c 100%); }
.bande-ciel    { background: linear-gradient(170deg, #e8f4fb 0%, #dceefa 100%); }
.bande-sable   { background: transparent; }
.bloc { width: 92%; max-width: 1000px; margin: 0 auto; }
/* L'en-tête est collant : sans cette marge de défilement, une ancre
   amène le titre de section juste dessous, donc invisible. */
[id] { scroll-margin-top: 6.5rem; }
.bande .bloc { padding: 3.2rem 0; }

.section-titre { text-align: center; font-size: clamp(1.45rem, 4.2vw, 2rem); color: var(--bleu); font-weight: 800; margin-bottom: 0.5rem; }
.section-chapo { text-align: center; color: #555; font-size: 1.02rem; max-width: 680px; margin: 0 auto 2rem; line-height: 1.7; }

.preuve .section-titre { color: #fff; }
.preuve .section-chapo { color: rgba(255,255,255,0.82); }


/* ===== 2. Ce qu'est l'app ===== */
.presentation { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.4rem; align-items: center; }
.presentation p { font-size: 1.05rem; color: #555; line-height: 1.8; margin: 0 0 1rem; text-align: left; }
.presentation p:last-child { margin-bottom: 0; }
.presentation .question { color: var(--framboise); font-weight: 700; font-size: 1.15rem; line-height: 1.5; text-align: left; border-left: 3px solid var(--framboise); padding-left: 1rem; margin-top: 1.4rem; }
.interface-33 { text-align: center; margin: 0; }
.interface-33 img { width: 100%; max-width: 100%; height: auto; }
@media (max-width: 720px) { .presentation { grid-template-columns: 1fr; gap: 1.4rem; } }

/* ===== 4 bis. LA PREUVE =====
   Une bande sombre, au milieu de pages claires : on ralentit, on
   change de registre. Ce n'est plus l'app qui parle d'elle-même,
   c'est une neuropsychologue qui a regardé. */
.preuve-entete { text-align: center; margin-bottom: 2rem; }
.preuve-oeil {
    display: inline-block; font-size: 0.7rem; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 800; color: #ff9ecb;
    border: 1px solid rgba(255,158,203,0.45); background: rgba(255,255,255,0.08);
    border-radius: 50px; padding: 0.25rem 0.9rem; margin-bottom: 0.9rem;
}
.groupe {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px; padding: 1.4rem 1.5rem; margin: 0 auto 1.8rem;
    max-width: 520px; text-align: center;
}
.groupe-titre { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,0.6); margin-bottom: 0.6rem; }
.groupe-resume { font-size: 0.98rem; color: #fff; margin-bottom: 0.7rem; }
.groupe-liste { list-style: none; padding: 0; margin: 0; display: inline-flex; flex-direction: column; gap: 0.35rem; text-align: left; }
.groupe-liste li { font-size: 0.92rem; color: rgba(255,255,255,0.8); padding-left: 1.1rem; position: relative; line-height: 1.5; }
.groupe-liste li::before { content: '·'; position: absolute; left: 0.25rem; color: #ff9ecb; font-weight: 900; }

.constats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.constat { background: #fff; color: #333; border-radius: 16px; padding: 1.4rem 1.3rem; border: none; box-shadow: 0 6px 22px rgba(0,0,0,0.28); }
.constat h3 { font-size: 1.02rem; color: #0f3a5f; margin: 0 0 0.5rem; }
.constat p { font-size: 0.9rem; color: #55616b; line-height: 1.6; margin: 0 0 0.6rem; }
.constat p:last-child { margin-bottom: 0; }
/* Les mots de la neuropsychologue, tels qu'elle les a écrits. */
.verbatim {
    font-style: italic; color: #6b7a87; font-size: 0.87rem !important;
    border-left: 3px solid #cbd8e3; padding-left: 0.8rem;
}
/* Le numéro du point : petit, gris bleuté, il se lit sans crier. */
.cle {
    display: block; font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase;
    font-weight: 800; color: #8fa3b5; margin-bottom: 0.3rem;
}

.preuve-pied { text-align: center; margin-top: 1.8rem; font-size: 0.85rem; color: rgba(255,255,255,0.72); line-height: 1.7; }
.preuve-pied a { color: #ff9ecb; font-weight: 800; }


/* ===== 2 bis. LE SPORT-NEURONAL® =====
   Reprise de la section de spikto.com (sport-neuronal-embed.html),
   en natif et non plus en iframe : c'est ce qui permet de corriger
   le texte ici, et d'éviter un chargement distant sur la page
   d'accueil. Si la section change là-bas, elle est à reporter ici.

   .no-break est essentiel : sport-neuronal® et spiKto® ne doivent
   jamais se couper en fin de ligne. */
.no-break { white-space: nowrap; }
.k-tilt { display: inline-block; transform: rotate(-10deg); color: var(--framboise); font-weight: bold; }
.k-tilt.header-bleu { color: var(--bleu); }

/* Plus de cadre framboise ni d'effet néon : la section n'est plus
   un encart rapporté d'un autre site, c'est une section de la page.
   Elle emprunte le vocabulaire des autres bandes — cartes blanches
   à coins ronds, ombre douce, titre centré. */
.sn-titre { text-align: center; font-size: clamp(1.9rem, 7vw, 3rem); font-weight: 800; color: var(--framboise); margin-bottom: 0.2rem; line-height: 1.1; }
.sn-sous { text-align: center; font-size: clamp(0.95rem, 3.2vw, 1.2rem); font-style: italic; color: var(--framboise); margin: 0 0 1.6rem; }
.sn-texte { font-size: 1.03rem; line-height: 1.8; color: #4a4a4a; max-width: 620px; margin: 0 auto 0.9rem; text-align: center; }
.sn-trois {
    text-align: center; font-size: clamp(1.05rem, 3.4vw, 1.3rem); font-weight: 800;
    color: var(--bleu); letter-spacing: 0.02em; margin: 0 auto 2.4rem;
}
.sn-light { font-weight: 300; }

/* Les deux cerveaux, face à face. Un tableau à bordures grises
   ne dit rien ; deux panneaux qui s'opposent, si. */
.cerveaux { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 720px; margin: 0 auto 2.4rem; }
.cerveau { border-radius: 18px; padding: 1.5rem 1.3rem; }
.cerveau h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 1rem; text-align: center; line-height: 1.3; }
.cerveau ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.cerveau li { font-size: 0.93rem; line-height: 1.4; padding-left: 1.5rem; position: relative; }
.cerveau li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.essouffle { background: #fdf0f5; border: 1px solid #f3d8e5; }
.essouffle h3 { color: #880e4f; }
.essouffle li { color: #8a6376; }
.essouffle li::before { content: '✗'; color: #d48aa9; }
.entraine { background: #eef7ef; border: 1px solid #d3e8d6; }
.entraine h3 { color: #2e7d32; }
.entraine li { color: #4e6b53; }
.entraine li::before { content: '✓'; color: #4caf50; }
@media (max-width: 560px) { .cerveaux { grid-template-columns: 1fr; gap: 0.9rem; } }

/* La formule : plus un encadré parmi d'autres, une affirmation. */
.formule { text-align: center; max-width: 620px; margin: 0 auto; }
.formule-haut { font-size: clamp(1.1rem, 4vw, 1.5rem); font-weight: 800; color: #4a3728; line-height: 1.5; }
.formule-egal { display: block; font-size: 1.4rem; color: var(--framboise); font-weight: 900; margin: 0.3rem 0; }
.kognitif { position: relative; display: inline-block; isolation: isolate; }
.k-transparent {
    display: inline-block; opacity: 0.5; position: absolute; left: 0.1rem; top: 50%;
    transform: rotate(-10deg) translateY(-50%) scale(1.1); color: var(--bleu); font-weight: bold;
    pointer-events: none; z-index: 1; text-shadow: 0 0 8px rgba(0,137,212,0.6);
}
.c-overlay { position: relative; opacity: 0.9; color: #555; z-index: 2; }

/* ===== 5. La boutiK ===== */
.boutik-titre { text-align: center; font-size: clamp(1.6rem, 5.5vw, 2.2rem); font-weight: 800; color: var(--bois); margin-bottom: 0.3rem; }
.boutik-sous { text-align: center; color: #6b5a45; font-size: 1rem; max-width: 560px; margin: 0 auto 0.8rem; line-height: 1.6; }
.boutik-remise {
    display: block; width: fit-content; margin: 0 auto 2rem;
    background: #FFFDE7; border: 1px solid #FFD600; color: #7a5c00;
    font-size: 0.82rem; font-weight: 800; padding: 0.35rem 1rem; border-radius: 50px;
}
.vitrine { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.2rem; max-width: 720px; margin: 0 auto 2rem; }
.vitrine a {
    display: block; background: #fff; border-radius: 18px; overflow: hidden;
    text-decoration: none; box-shadow: 0 5px 20px rgba(123,79,46,0.12);
    transition: transform 0.2s, box-shadow 0.2s;
}
.vitrine a:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(123,79,46,0.22); }
.vitrine img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.v-corps { padding: 0.9rem 1rem 1.1rem; text-align: center; }
.v-nom { display: block; font-size: 0.95rem; font-weight: 700; color: #4a3d2d; margin-bottom: 0.25rem; line-height: 1.3; }
.v-prix { display: block; font-size: 1.1rem; font-weight: 900; color: var(--framboise); }
/* Le ruban : de petites cartes qui défilent au doigt, une ligne sur le
   téléphone, centrées sur l'ordinateur quand elles tiennent. */
.vitrine-defile {
    display: flex; grid-template-columns: none; gap: 0.7rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0.3rem 0.3rem 0.9rem; margin: 0 auto 1.4rem; max-width: 720px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vitrine-defile::-webkit-scrollbar { display: none; }
.vitrine-defile[hidden] { display: none; }
@media (min-width: 769px) { .vitrine-defile { justify-content: safe center; } }
.vitrine-defile a { flex: 0 0 140px; scroll-snap-align: start; border-radius: 14px; }
.vitrine-defile .v-img {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden;
    background: linear-gradient(140deg, #fdf8f0, #efe2cd);
}
.vitrine-defile .v-img img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; padding: 6px; box-sizing: border-box; }
.vitrine-defile .v-mot { font-weight: 900; color: var(--bois); opacity: 0.55; font-size: 0.95rem; text-align: center; padding: 0 0.4rem; line-height: 1.2; }
.vitrine-defile .v-corps { padding: 0.5rem 0.5rem 0.65rem; }
.vitrine-defile .v-nom { font-size: 0.78rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.vitrine-defile .v-prix { font-size: 0.95rem; }
.boutik-go {
    display: block; width: fit-content; margin: 0 auto;
    background: var(--bois); color: #fff; font-weight: 800; font-size: 1rem;
    padding: 0.9rem 2rem; border-radius: 50px; text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.boutik-go:hover { background: #5d3a20; transform: translateY(-2px); }
/* Le K bleu ne tient pas sur le brun : ici il reste blanc. */
.boutik-go .spikto-k-style { color: #fff !important; }

/* ===== Korian, l'essentiel ; et « Ce que dit la science » ===== */
.preuve-essentiel { list-style: none; padding: 0; margin: 0 auto 1.4rem; max-width: 560px; display: flex; flex-direction: column; gap: 0.7rem; }
.preuve-essentiel li { color: #fff; font-size: 1rem; line-height: 1.55; padding-left: 1.4rem; position: relative; }
.preuve-essentiel li::before { content: '✓'; position: absolute; left: 0; color: #ff9ecb; font-weight: 900; }
.preuve-lire { text-align: center; margin: 0; }
.preuve-lire a { color: #ff9ecb; font-weight: 800; text-decoration: none; font-size: 1rem; }
.preuve-lire a:hover { text-decoration: underline; }
.science .section-chapo { margin-bottom: 1.6rem; }
.sci-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; max-width: 900px; margin: 0 auto; }
/* Sur la texture de la page, un filet sable clair ne se voyait pas : fond
   blanc, filet plus franc et une ombre douce — la carte se détache. */
.sci-carte { background: #fff; border: 1.5px solid #d3c5ad; border-radius: 16px; padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; box-shadow: 0 4px 14px rgba(60, 40, 20, 0.08); }
.sci-oeil { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; color: #8a7458; margin-bottom: 0.5rem; }
.sci-carte h3 { font-size: 1.05rem; color: #333; margin: 0 0 0.5rem; line-height: 1.3; }
.sci-carte p { font-size: 0.92rem; color: #555; line-height: 1.6; margin: 0 0 0.6rem; }
.sci-fleche { margin-top: auto !important; color: var(--bleu, #0089D4) !important; font-weight: 700; }
.sci-fleche::before { content: '→ '; }
.sci-cloture { max-width: 640px; margin: 2rem auto 0; background: #FFFDE7; border: 2px solid #FFD600; border-radius: 16px; padding: 1.2rem 1.4rem; }
.sci-cloture-titre { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: #7a5c00; margin: 0 0 0.5rem; }
.sci-cloture p { font-size: 0.95rem; color: #5D3A00; line-height: 1.7; margin: 0 0 0.6rem; }
.sci-cloture p:last-child { margin-bottom: 0; }
.sci-cloture a { color: #B21553; font-weight: 800; }

/* Trois pépites : des cartes qui se touchent, et une carte en avant-plan. */
.sci-trois { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
button.sci-carte { font: inherit; text-align: left; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
button.sci-carte:hover, button.sci-carte:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(123,79,46,0.16); border-color: #d9cdb8; outline: none; }
.sci-lire { display: inline-block; margin-top: 0.7rem; font-size: 0.85rem; font-weight: 800; color: var(--framboise, #B21553); }
.sci-voile { position: fixed; inset: 0; z-index: 1200; background: rgba(40, 28, 18, 0.55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.sci-voile[hidden] { display: none; }
.sci-modale { position: relative; background: #fff; border-radius: 18px; width: min(600px, 100%); max-height: min(88vh, 88svh); overflow-y: auto; padding: 1.6rem 1.4rem 1.4rem; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.sci-fermer { position: absolute; top: 0.6rem; right: 0.7rem; width: 38px; height: 38px; border-radius: 50%; border: none; background: #f3efe7; color: #4a3f31; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.sci-fermer:hover { background: #e8e1d4; }
.sci-m-oeil { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; color: #8a7458; margin: 0 2.4rem 0.5rem 0; }
.sci-modale-corps h3 { font-size: 1.25rem; color: #333; margin: 0 2.4rem 0.9rem 0; line-height: 1.3; }
.sci-modale-corps p { font-size: 0.97rem; color: #444; line-height: 1.7; margin: 0 0 0.8rem; }
.sci-m-pour { background: #f5f9fc; border-left: 4px solid var(--bleu, #0089D4); border-radius: 0 12px 12px 0; padding: 0.9rem 1rem; margin: 1rem 0 1.1rem; }
.sci-m-pour p { margin: 0; color: #2f3f4c; }
.sci-m-pour p::before { content: '→ '; color: var(--bleu, #0089D4); font-weight: 900; }
.sci-m-ref { font-size: 0.82rem !important; color: #777 !important; line-height: 1.55 !important; word-break: break-word; }
.sci-m-ref a { color: var(--bleu, #0089D4); font-weight: 700; white-space: nowrap; }

/* La carte suivante de la mosaïque : la suite est annoncée, à la place
   du prochain exercice, en pointillé — sans promesse de date. */
.exercise-card.exercise-card-bientot {
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: rgba(255,255,255,0.45); border: 2px dashed #d9cdb8; box-shadow: none; cursor: default;
    color: #8b7d6f; font-style: italic; font-weight: 700; font-size: 1rem; line-height: 1.35; min-height: 120px;
}
.exercise-card.exercise-card-bientot:hover { transform: none; box-shadow: none; border-color: #d9cdb8; }

/* Korian : les trois constats dans un encadré plus foncé, à part du reste. */
.preuve-encadre { background: rgba(0, 0, 0, 0.26); border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 1rem 1.1rem 1.05rem; max-width: 560px; margin: 0 auto 1.2rem; }
.preuve-encadre .preuve-essentiel { margin-bottom: 0; }
/* Le kicker d'une pépite tient sur une ligne. */
.sci-oeil { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* La source, en subtil, sous la formule des dix minutes. */
.formule-source { display: block; margin-top: 0.55rem; font-size: 0.8rem; font-weight: 400; font-style: italic; color: #9a8b74; letter-spacing: 0.01em; }

/* Korian : les constats en citation, signée. */
.preuve-citation { position: relative; margin: 0 auto 1.2rem; padding: 1.2rem 1.2rem 1rem 1.4rem; font-style: italic; }
.preuve-citation::before { content: '«'; position: absolute; left: 0.55rem; top: 0.2rem; font-size: 2.6rem; line-height: 1; color: #ff9ecb; opacity: 0.7; font-family: Georgia, serif; }
.preuve-citation .preuve-essentiel li { padding-left: 0; }
.preuve-citation .preuve-essentiel li::before { content: none; }
.preuve-auteur { margin-top: 0.8rem; text-align: right; font-style: normal; font-size: 0.82rem; color: #ff9ecb; font-weight: 700; }

/* Les trois pépites, redessinées : carte blanche, un liseré de couleur en
   tête, l'auteur et l'année en pastille, le lien au spiKto dans un cadre,
   « Lire » en bouton. */
.sci-trois .sci-carte { position: relative; background: #fff; border: 1px solid #e9e1d3; border-radius: 20px; padding: 1.35rem 1.25rem 1.1rem; box-shadow: 0 6px 22px rgba(60, 40, 20, 0.07); overflow: hidden; }
.sci-trois .sci-carte::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 5px; background: var(--sci, #0089D4); }
.sci-carte[data-sci="paivio"] { --sci: #0089D4; --sci-pale: #e6f3fb; }
.sci-carte[data-sci="ribot"]  { --sci: #C8267D; --sci-pale: #fbe7f0; }
.sci-carte[data-sci="bor"]    { --sci: #2e7d32; --sci-pale: #e8f4e9; }
.sci-trois .sci-oeil { display: inline-block; width: auto; max-width: 100%; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: none; font-weight: 800; color: var(--sci); background: var(--sci-pale); border-radius: 50px; padding: 0.28rem 0.75rem; margin: 0 0 0.75rem; }
.sci-trois .sci-carte h3 { font-size: 1.18rem; color: #2f2820; margin: 0 0 0.5rem; line-height: 1.25; }
.sci-trois .sci-carte p { font-size: 0.93rem; color: #5a4f43; line-height: 1.6; }
.sci-trois .sci-fleche { background: #faf7f1; border-left: 4px solid var(--sci); border-radius: 0 12px 12px 0; padding: 0.7rem 0.9rem; color: #2f2820 !important; font-weight: 600; margin: 0.5rem 0 0.9rem !important; }
.sci-trois .sci-fleche::before { color: var(--sci); font-weight: 900; }
.sci-trois .sci-lire { align-self: flex-end; margin-top: 0; background: #fff; border: 1.5px solid #e6dccb; border-radius: 50px; padding: 0.42rem 1rem; color: var(--sci); font-size: 0.85rem; }
.sci-trois .sci-carte:hover .sci-lire { background: var(--sci); color: #fff; border-color: var(--sci); }

/* L'ouverture d'une pépite : le fond se fond, la carte arrive d'un bond
   léger et emporte la couleur de sa pépite en tête ; à la fermeture, elle
   repart en fondu. */
.sci-voile { animation: sci-voile-entre 0.25s ease-out both; }
.sci-modale { animation: sci-modale-entre 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; transform-origin: center 60%; }
.sci-modale::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--sci, #0089D4); }
.sci-voile[data-sci="paivio"] .sci-modale { --sci: #0089D4; }
.sci-voile[data-sci="ribot"]  .sci-modale { --sci: #C8267D; }
.sci-voile[data-sci="bor"]    .sci-modale { --sci: #2e7d32; }
.sci-voile .sci-m-oeil { color: var(--sci, #8a7458); }
.sci-voile.sci-part { animation: sci-voile-sort 0.22s ease-in both; }
.sci-voile.sci-part .sci-modale { animation: sci-modale-sort 0.22s ease-in both; }
@keyframes sci-voile-entre { from { opacity: 0; } to { opacity: 1; } }
@keyframes sci-voile-sort  { from { opacity: 1; } to { opacity: 0; } }
@keyframes sci-modale-entre { from { opacity: 0; transform: translateY(28px) scale(0.92); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes sci-modale-sort  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px) scale(0.96); } }
/* Le bouton « Lire » répond au doigt : il s'enfonce d'un rien. */
.sci-trois .sci-carte:active { transform: translateY(0) scale(0.985); }
@media (prefers-reduced-motion: reduce) { .sci-voile, .sci-modale, .sci-voile.sci-part, .sci-voile.sci-part .sci-modale { animation: none; } }

/* ============================================================
   L'équipe (25 sept. 2026) — quatre portraits, deux par ligne (iaGO,
   l'agent IA, ferme la marche avec un emoji), dans leur propre section,
   avant les abonnements
   ============================================================ */
.equipe { text-align: center; }
.equipe-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; max-width: 520px; margin: 1.4rem auto 1.2rem; }
.membre { margin: 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* Le rond rogne la photo : c'est lui qui permet d'en agrandir une. */
.membre-photo {
    display: block; width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
    border: 4px solid #fff; box-shadow: 0 8px 22px rgba(60, 40, 20, 0.16); background: #ece5d8;
    transition: transform 0.3s ease;
}
.membre-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; filter: grayscale(100%); }
.membre-photo.zoom img { transform: scale(1.22); transform-origin: center 35%; }
/* iaGO n'a pas de visage : un emoji, passé en noir et blanc comme les photos. */
.membre-photo.membre-emoji { display: grid; place-items: center; font-size: 4.4rem; line-height: 1; filter: grayscale(100%); }
.membre:hover .membre-photo { transform: translateY(-3px); }   /* noir et blanc, même au survol */
.membre figcaption { margin-top: 0.7rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.membre figcaption b { font-size: 1.08rem; color: #3f362b; }
.membre figcaption > span { font-size: 0.88rem; color: #6b5c4a; line-height: 1.35; }
/* LinkedIn : le logo et le mot, en bleu, discrets — un lien qui dit son nom. */
.membre-in {
    display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.45rem;
    font-size: 0.78rem; font-weight: 700; color: #0A66C2; text-decoration: none;
}
.membre-in:hover span { text-decoration: underline; }
@media (max-width: 480px) {
    .equipe-grille { gap: 1.2rem 0.6rem; }
    .membre-photo { width: 104px; height: 104px; border-width: 3px; }
    .membre-photo.membre-emoji { font-size: 3.4rem; }
    .membre figcaption b { font-size: 0.98rem; }
    .membre figcaption > span { font-size: 0.8rem; }
    .membre-in { font-size: 0.74rem; }
}

/* ---- Le soutien de la Région, au pied des deux accueils ----------------
   Le bandeau Le Perqo | Région Île-de-France (l'incubateur), sur le blanc du
   pied de page — son propre fond est blanc, il s'y fond. */
footer .soutien { margin: 0 0 1.2rem; }
footer .soutien img { width: 340px; max-width: 82%; height: auto; }