/* =============================================================
   CAVAGNO AGENCY — inner.css
   Styles partagés par les pages internes (Live Safety, Knowledge
   Hub, Candidature...). S'appuie sur tokens + components.
   ============================================================= */

/* ---- PAGE HERO (en-tête de page interne) ---- */
.page-hero { position: relative; padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-8); }
.page-hero__inner { max-width: 760px; }
.page-hero h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: var(--sp-4) 0 var(--sp-5); }
.page-hero__lead { font-size: var(--fs-lead); color: var(--text-soft); }
.breadcrumb { display: flex; gap: 0.5rem; align-items: center; font-size: var(--fs-xs); color: var(--text-mute); margin-bottom: var(--sp-2); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb i { font-size: 0.9rem; }

/* Légende de gravité (réutilisable) */
.risk-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
.risk-legend span { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--text-soft); }
.risk-legend .dot { width: 12px; height: 12px; border-radius: 50%; }
.risk-legend .dot.low { background: var(--ok); }
.risk-legend .dot.mid { background: var(--warn); }
.risk-legend .dot.high { background: var(--danger); }

/* ---- CARTE INTERDIT (compliance) ---- */
.interdit { position: relative; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); padding: var(--sp-6); border-left-width: 4px; }
.interdit--high { border-left-color: var(--danger); }
.interdit--mid { border-left-color: var(--warn); }
.interdit--low { border-left-color: var(--ok); }
.interdit__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.interdit__head h3 { font-family: var(--font-display); font-size: var(--fs-h3); display: flex; align-items: center; gap: 0.6rem; }
.interdit__head h3 i { font-size: 1.4rem; }
.interdit--high h3 i { color: var(--danger); }
.interdit--mid h3 i { color: var(--warn); }
.interdit--low h3 i { color: var(--ok); }
.interdit__protect { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px dashed var(--border); }
.interdit__protect strong { color: var(--text); }
.interdit__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.interdit__cols > div h4 { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--sp-3); }
.interdit__ok h4 { color: var(--ok); }
.interdit__no h4 { color: var(--danger); }
.interdit__cols li { display: flex; gap: 0.5rem; font-size: var(--fs-sm); color: var(--text-soft); padding: 0.35rem 0; }
.interdit__ok li i { color: var(--ok); flex-shrink: 0; margin-top: 0.15rem; }
.interdit__no li i { color: var(--danger); flex-shrink: 0; margin-top: 0.15rem; }
.interdit__sanction { margin-top: var(--sp-5); display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-xs); color: var(--text-mute); }
.interdit__sanction i { color: var(--danger); }
@media (max-width: 620px) { .interdit__cols { grid-template-columns: 1fr; } }

/* ---- FAUX ÉCRAN TIKTOK (mockup pédagogique) ---- */
.phone-mock { width: 100%; max-width: 260px; aspect-ratio: 9/19; border-radius: 28px; border: 6px solid #1c1f33; background: linear-gradient(160deg, #14172a, #0b0d18); position: relative; overflow: hidden; box-shadow: var(--shadow-lg); margin-inline: auto; }
.phone-mock__live { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: var(--r-full); background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 700; }
.phone-mock__verdict { position: absolute; inset: auto 14px 14px; padding: 0.6rem 0.8rem; border-radius: var(--r-md); font-size: 0.78rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.phone-mock__verdict.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok); }
.phone-mock__verdict.no { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }
.phone-mock__center { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-mute); font-size: 2.5rem; }
.phone-mock__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Exemple visuel : captures de live (l'image contient déjà son UI de téléphone) */
.live-example { max-width: 280px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.live-example img { width: 100%; height: auto; display: block; border-radius: 26px; box-shadow: var(--shadow-lg); }
.live-example__verdict { display: flex; align-items: flex-start; gap: 0.45rem; padding: 0.6rem 0.85rem; border-radius: var(--r-md); font-size: 0.82rem; font-weight: 600; line-height: 1.3; }
.live-example__verdict i { font-size: 1.05rem; flex-shrink: 0; }
.live-example__verdict.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok); }
.live-example__verdict.no { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }

/* ---- CHECKLIST ---- */
.checklist { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); }
.checklist h3 { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: var(--sp-5); }
.checklist label { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.7rem 0; border-bottom: 1px solid var(--border); cursor: pointer; font-size: var(--fs-sm); color: var(--text-soft); }
.checklist label:last-child { border-bottom: none; }
.checklist input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; flex-shrink: 0; border: 2px solid var(--border-strong); border-radius: 6px; margin-top: 1px; display: grid; place-items: center; transition: background var(--t-fast), border-color var(--t-fast); }
.checklist input::after { content: '\2713'; color: #fff; font-size: 0.85rem; font-weight: 700; opacity: 0; }
.checklist input:checked { background: var(--ok); border-color: var(--ok); }
.checklist input:checked::after { opacity: 1; }
.checklist input:checked + span { color: var(--text-mute); text-decoration: line-through; }

/* ---- ÉCHELLE DE SANCTIONS ---- */
.sanctions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); counter-reset: s; }
.sanction-step { position: relative; padding: var(--sp-5); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--warn); }
.sanction-step:nth-child(1) { border-top-color: var(--info); }
.sanction-step:nth-child(2) { border-top-color: var(--warn); }
.sanction-step:nth-child(3) { border-top-color: #ff7a3c; }
.sanction-step:nth-child(4) { border-top-color: var(--danger); }
.sanction-step h4 { font-family: var(--font-display); font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.sanction-step p { font-size: var(--fs-xs); color: var(--text-soft); }
.sanction-step .lvl { font-size: var(--fs-xs); color: var(--text-mute); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- ANCRES / SOMMAIRE LATÉRAL ---- */
.with-toc { display: grid; grid-template-columns: 220px 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 1.5rem); border-left: 1px solid var(--border); padding-left: var(--sp-4); }
.toc h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-mute); margin-bottom: var(--sp-3); }
.toc a { display: block; padding: 0.4rem 0; font-size: var(--fs-sm); color: var(--text-soft); transition: color var(--t-fast); }
.toc a:hover { color: var(--text); }
@media (max-width: 880px) { .with-toc { grid-template-columns: 1fr; } .toc { display: none; } }

/* ---- BLOCS PÉDAGOGIQUES (Knowledge Hub) ---- */
.lesson { border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); padding: var(--sp-6); }
.lesson__num { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--border-strong); margin-bottom: var(--sp-3); }
.lesson h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.lesson p { font-size: var(--fs-sm); color: var(--text-soft); }
.lesson ul.bullets { margin-top: var(--sp-4); }
.lesson ul.bullets li { display: flex; gap: 0.6rem; padding: 0.35rem 0; font-size: var(--fs-sm); color: var(--text-soft); }
.lesson ul.bullets li i { color: var(--magenta); flex-shrink: 0; margin-top: 0.15rem; }

/* Barre de rétention (schéma) */
.retention { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); }
.retention__bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; margin-top: var(--sp-5); }
.retention__bars .bar { flex: 1; border-radius: 6px 6px 0 0; background: var(--grad-cool); opacity: 0.9; }
.retention__bars .bar.drop { background: var(--danger); }
.retention__legend { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-mute); margin-top: var(--sp-3); }

/* ---- FORMULAIRE CANDIDATURE ---- */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, var(--sp-7)); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field label .req { color: var(--magenta); }
.field input, .field select, .field textarea {
    width: 100%; padding: 0.85rem 1rem; border-radius: var(--r-sm);
    background: var(--bg); border: 1px solid var(--border-strong); color: var(--text);
    font-family: inherit; font-size: 16px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 22%, transparent); }
.field .hint { font-size: var(--fs-xs); color: var(--text-mute); }
.choice-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: inline-block; padding: 0.6rem 1rem; border-radius: var(--r-full); border: 1px solid var(--border-strong); font-size: var(--fs-sm); color: var(--text-soft); transition: all var(--t-fast); cursor: pointer; }
.choice input:checked + span { background: var(--magenta); border-color: transparent; color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.form-aside { display: flex; flex-direction: column; gap: var(--sp-4); }
.form-step { display: flex; gap: var(--sp-4); }
.form-step__n { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface-glass); border: 1px solid var(--border-strong); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); }
.form-step h4 { font-family: var(--font-display); font-size: var(--fs-h4); }
.form-step p { font-size: var(--fs-sm); color: var(--text-soft); }
.candidature-grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (max-width: 860px) { .candidature-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } }

/* =============================================================
   À PROPOS — équipe, valeurs, histoire
   ============================================================= */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-5); }
.member { text-align: center; padding: var(--sp-6) var(--sp-5); }
/* Vignettes équipe : anneau néon rotatif + balayage brillant */
.member__avatar { position: relative; display: grid; place-items: center; width: 118px; height: 118px; margin: 0 auto var(--sp-4); border-radius: 50%; isolation: isolate; }
.member__avatar::before { /* anneau dégradé rotatif + halo coloré */
    content: ""; position: absolute; inset: -4px; border-radius: 50%; z-index: 0;
    background: conic-gradient(from 0deg, var(--magenta), var(--violet), var(--cyan), var(--magenta));
    filter: drop-shadow(0 0 10px rgba(124, 92, 255, 0.55));
    animation: avatar-spin 6s linear infinite;
    transition: filter .4s ease;
}
.member__photo { position: relative; z-index: 1; width: 110px; height: 110px; margin: 0; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface-2); background: var(--surface-2); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.member__avatar::after { /* éclat qui balaye la photo */
    content: ""; position: absolute; inset: 4px; border-radius: 50%; z-index: 2; pointer-events: none; mix-blend-mode: screen;
    background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.85) 50%, transparent 65%);
    background-size: 300% 300%; background-position: 200% 0%;
    animation: avatar-shine 5s ease-in-out infinite;
}
.member:hover .member__avatar::before { animation-duration: 2.4s; filter: drop-shadow(0 0 16px var(--magenta)); }
.member:hover .member__photo { transform: scale(1.06); }
@keyframes avatar-spin { to { transform: rotate(360deg); } }
@keyframes avatar-shine { 0% { background-position: 200% 0%; } 40%, 100% { background-position: -100% 100%; } }
/* Désynchronisation : chaque vignette s'anime à son propre rythme */
.team-grid .member:nth-child(1) .member__avatar::after { animation-duration: 4.3s; animation-delay: -0.5s; }
.team-grid .member:nth-child(1) .member__avatar::before { animation-duration: 6.5s; animation-delay: -1.2s; }
.team-grid .member:nth-child(2) .member__avatar::after { animation-duration: 5.6s; animation-delay: -3.1s; }
.team-grid .member:nth-child(2) .member__avatar::before { animation-duration: 5.4s; animation-delay: -3.8s; }
.team-grid .member:nth-child(3) .member__avatar::after { animation-duration: 4.8s; animation-delay: -1.4s; }
.team-grid .member:nth-child(3) .member__avatar::before { animation-duration: 7.2s; animation-delay: -0.4s; }
.team-grid .member:nth-child(4) .member__avatar::after { animation-duration: 6.2s; animation-delay: -4.5s; }
.team-grid .member:nth-child(4) .member__avatar::before { animation-duration: 6.0s; animation-delay: -2.6s; }
.team-grid .member:nth-child(5) .member__avatar::after { animation-duration: 5.1s; animation-delay: -2.2s; }
.team-grid .member:nth-child(5) .member__avatar::before { animation-duration: 6.8s; animation-delay: -5.1s; }
@media (prefers-reduced-motion: reduce) {
    .member__avatar::before, .member__avatar::after { animation: none; }
}
.member__name { font-family: var(--font-display); font-size: var(--fs-h4); margin-bottom: 0.2rem; }
.member__role { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--magenta); margin-bottom: var(--sp-3); }
.member p { font-size: var(--fs-sm); color: var(--text-soft); }

.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-5); }
.value { padding: var(--sp-6); }
.value i { font-size: 1.9rem; color: var(--cyan); margin-bottom: var(--sp-4); display: block; }
.value h3 { font-family: var(--font-display); font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.value p { font-size: var(--fs-sm); color: var(--text-soft); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split__media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* =============================================================
   EVENTS — galerie communauté
   ============================================================= */
.event-gallery { columns: 3 260px; column-gap: var(--sp-5); }
.event-card { break-inside: avoid; margin-bottom: var(--sp-5); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); position: relative; transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid); }
.event-card:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.event-card img { width: 100%; display: block; transition: transform 0.55s var(--ease-out); }
.event-card:hover img { transform: scale(1.05); }
.event-card__body { padding: var(--sp-5); }
.event-card__tag { position: absolute; top: 12px; left: 12px; }
.event-card h3 { font-family: var(--font-display); font-size: var(--fs-h4); margin-bottom: 0.3rem; }
.event-card p { font-size: var(--fs-sm); color: var(--text-soft); }

.event-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--sp-5); }
.event-type { padding: var(--sp-6); }
.event-type i { font-size: 1.8rem; color: var(--magenta); margin-bottom: var(--sp-4); display: block; }
.event-type h3 { font-family: var(--font-display); font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.event-type p { font-size: var(--fs-sm); color: var(--text-soft); }

.discord-banner { display: flex; align-items: center; gap: var(--sp-6); padding: clamp(1.5rem,4vw,var(--sp-7)); border-radius: var(--r-xl); background: linear-gradient(120deg, #5865F2 0%, #7C5CFF 100%); color: #fff; }
.discord-banner i.big { font-size: 3.5rem; flex-shrink: 0; }
.discord-banner h2 { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: 0.4rem; }
.discord-banner p { opacity: 0.9; font-size: var(--fs-sm); margin-bottom: var(--sp-4); max-width: 50ch; }
.discord-banner .btn { background: #fff; color: #2a2151; }
.discord-banner .btn:hover { background: #f0f0ff; transform: translateY(-2px); }
@media (max-width: 640px) { .discord-banner { flex-direction: column; text-align: center; } .event-gallery { columns: 1; } }

/* =============================================================
   ASSISTANT IA — outils, générateur, mockup chat
   ============================================================= */
.tool-card { padding: var(--sp-6); height: 100%; }
.tool-card i.tool-ico { font-size: 1.8rem; display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 13px; background: var(--surface-glass); border: 1px solid var(--border-strong); margin-bottom: var(--sp-4); }
.tool-card h3 { font-family: var(--font-display); font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.tool-card p { font-size: var(--fs-sm); color: var(--text-soft); }

/* Générateur interactif */
.generator { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-xl); padding: clamp(1.5rem, 4vw, var(--sp-7)); position: relative; overflow: hidden; }
.generator::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--grad-signal); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.5; pointer-events: none; }
.generator__controls { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin-bottom: var(--sp-5); }
.generator__controls .field { flex: 1 1 200px; }
.generator__out { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 60px; }
.hook-result { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); animation: fade-up 0.45s var(--ease-out) backwards; }
.hook-result:nth-child(2) { animation-delay: 0.06s; }
.hook-result:nth-child(3) { animation-delay: 0.12s; }
.hook-result:nth-child(4) { animation-delay: 0.18s; }
/* état vide du générateur */
.generator__out:empty::before,
.generator__out .gen-empty { display: block; color: var(--text-mute); font-style: italic; font-size: var(--fs-sm); padding: var(--sp-2) 0; }
.hook-result i { color: var(--magenta); font-size: 1.2rem; margin-top: 0.15rem; flex-shrink: 0; }
.hook-result span { font-size: var(--fs-body); }
.hook-result .copy { margin-left: auto; background: none; border: 1px solid var(--border-strong); color: var(--text-mute); border-radius: 8px; padding: 0.3rem 0.5rem; font-size: var(--fs-xs); transition: all var(--t-fast); flex-shrink: 0; }
.hook-result .copy:hover { color: var(--text); border-color: var(--cyan); }

/* Mockup chat IA */
.chat-mock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.chat-bubble { max-width: 85%; padding: 0.8rem 1rem; border-radius: 16px; font-size: var(--fs-sm); line-height: 1.5; }
.chat-bubble.user { align-self: flex-end; background: var(--magenta); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.ai { align-self: flex-start; background: var(--bg); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-bubble.ai strong { color: var(--cyan); }
.chat-mock__head { display: flex; align-items: center; gap: 0.6rem; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; }
.chat-mock__head i { color: var(--violet); font-size: 1.3rem; }

/* =============================================================
   IMPRESSION (utile surtout pour les mentions légales)
   ============================================================= */
@media print {
    .site-header, .nav-mobile, .site-footer, .aurora, .grain, .cursor-glow,
    .read-progress, .lang-toggle, .theme-toggle, .breadcrumb, .cta-banner,
    .page-hero .pill, .fx-particles { display: none !important; }
    html, body, .section, .page-hero { background: #fff !important; color: #000 !important; }
    .section { padding-block: 1rem !important; }
    a { color: #000 !important; text-decoration: underline; }
    .gradient-text { -webkit-text-fill-color: #000 !important; color: #000 !important; background: none !important; }
    * { box-shadow: none !important; text-shadow: none !important; }
}