/* Mano — styles des outils : « Créer mon CV », espace chiffré, coffre-fort.
   Même vocabulaire que soleil.css : cartes blanches, filets fins, orange pour l'action. */

/* ---------- CV ---------- */
.cv-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 6px 0 2px; }
.cv-hero-ico { width: 76px; height: 76px; border-radius: 50%; background: var(--green-tint); color: var(--green); display: flex; align-items: center; justify-content: center; }
.cv-hero-t { font-family: var(--font-d); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1.25; text-wrap: balance; }
.cv-hero-s { font-size: 0.96875rem; color: var(--muted); line-height: 1.5; text-wrap: balance; }
.cv-aide { font-size: 0.90625rem; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.cv-etape .dem-field { display: flex; flex-direction: column; gap: 7px; }
.screen-cv .dem-field { display: flex; flex-direction: column; gap: 7px; }
.cv-zone { height: auto; min-height: 96px; padding: 12px 15px; line-height: 1.45; resize: vertical; }
.cv-pied { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 18px 0 calc(var(--bot-inset) + 22px); }
.cv-pied .btn.primary { width: 100%; }
.cv-pied .btn.primary:disabled { opacity: .45; box-shadow: none; }
.cv-passer { align-self: center; }
.cv-ok { height: 50px !important; border-radius: 100px; box-shadow: 0 0 0 1.5px var(--border); color: var(--ink) !important; font-size: 0.96875rem; }
.cv-lien { background: none; border: 0; font: inherit; font-size: 0.90625rem; color: var(--muted); text-decoration: underline; padding: 8px 0; align-self: center; }

.cv-ligne { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-card); color: var(--muted); }
.cv-ligne-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cv-ligne-t b { font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.cv-ligne-t small { font-size: 0.84375rem; color: var(--muted); line-height: 1.35; }
.cv-mini { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--chipbg); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.cv-ajout { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; border-radius: 18px; border: 1.5px dashed rgba(23, 18, 14, .22); background: transparent; font: inherit; font-size: 0.96875rem; font-weight: 600; color: var(--terra-text); }
.cv-carte { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-card); }
.cv-lg { font-size: 0.96875rem; font-weight: 600; color: var(--ink); }
.cv-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cv-deux > .dem-field:only-child { grid-column: 1 / -1; }
.cv-acc { text-align: left; font-size: 0.96875rem !important; font-weight: 500 !important; line-height: 1.45; min-height: 0 !important; }

.cv-photo { align-self: center; width: 136px; height: 136px; border-radius: 50%; overflow: hidden; background: var(--chipbg); color: var(--gray); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--card), var(--shadow-soft); }
.cv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-photo-btn { align-self: center; height: 48px; padding: 0 20px; border-radius: 100px; box-shadow: 0 0 0 1.5px var(--border); color: var(--ink) !important; font-size: 0.96875rem; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

.cv-pages { display: flex; flex-direction: column; gap: 12px; min-height: 200px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; }
.cv-page { display: block; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 14px 30px -18px rgba(120, 50, 10, .55); }
.cv-attente { display: flex; align-items: center; justify-content: center; min-height: 240px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-card); font-size: 0.9375rem; color: var(--muted); text-align: center; padding: 20px; }
.cv-alerte { padding: 12px 14px; border-radius: 14px; background: var(--amber-tint); color: var(--ink); font-size: 0.90625rem; line-height: 1.45; }

[dir="rtl"] .cv-ligne, [dir="rtl"] .cv-rub, [dir="rtl"] .cv-acc, [dir="rtl"] .cv-format { text-align: right; }
.phone.hc .cv-ligne, .phone.hc .cv-carte, .phone.hc .cv-rub, .phone.hc .cv-vign { box-shadow: 0 0 0 1.5px var(--ink); }

/* ---------- Mon espace et coffre-fort ---------- */
.esp-hero-ico { background: var(--peach); color: var(--terra-text); }
.esp-badge { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 18px; background: var(--green-tint); color: var(--green); }
.esp-badge span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.esp-badge b { font-size: 1rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.esp-badge small { font-size: 0.8125rem; color: var(--green); }
.esp-fermer { flex: none; height: 38px; padding: 0 14px; border-radius: 100px; border: 0; background: var(--card); font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.esp-carte { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-card); color: var(--muted); }
.esp-ic { flex: none; width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
.esp-ic.peach { background: var(--peach); color: var(--terra-text); }
.esp-ic.mint { background: var(--green-tint); color: var(--green); }
.esp-ic.petit { width: 40px; height: 40px; border-radius: 12px; }
.esp-t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.esp-t b { font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.esp-t small { font-size: 0.875rem; color: var(--muted); }
.esp-jauge { height: 8px; border-radius: 100px; background: var(--border); overflow: hidden; margin-top: 6px; }
.esp-jauge i { display: block; height: 100%; border-radius: 100px; background: var(--terra); min-width: 4px; }
.esp-tirage { display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 16px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1.5px var(--border); }
.esp-tirage b { flex: 1; font-size: 1.1875rem; font-weight: 600; color: var(--ink); letter-spacing: .01em; overflow-wrap: anywhere; }
.esp-code { padding: 18px 14px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 2px var(--terra); text-align: center; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 1.1875rem; font-weight: 600; letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.esp-cles { display: grid; gap: 8px; }
.esp-cles div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-card); }
.esp-cles small { font-size: 0.78125rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.esp-cles b { font-size: 1rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.esp-occupe { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 280px; font-size: 1rem; color: var(--muted); text-align: center; }
.esp-roue { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--peach); border-top-color: var(--terra); animation: esp-tour 0.9s linear infinite; }
@keyframes esp-tour { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .esp-roue { animation-duration: 2.4s; } }
.esp-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.esp-page { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.esp-page img { width: 100%; height: 100%; object-fit: cover; display: block; }
.esp-page > span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; }
.esp-page .cv-mini { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; background: rgba(255, 255, 255, .92); }
.esp-choix { display: flex !important; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.esp-vue { display: flex; flex-direction: column; gap: 12px; }
.esp-img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--hair), 0 14px 30px -18px rgba(120, 50, 10, .5); background: #fff; }
.esp-pdf { display: flex; align-items: center; gap: 10px; padding: 16px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card); color: var(--ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.btn.primary.esp-danger { background: var(--card); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
[dir="rtl"] .esp-carte { text-align: right; }

/* ---------- Fiche lieu : horaires exceptionnels et événements de la structure ---------- */
.d-exc { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px; border-radius: 16px; background: var(--amber-tint); color: var(--amber-text); }
.d-exc > svg { flex: none; margin-top: 2px; }
.d-exc p { margin: 0; font-size: 0.90625rem; line-height: 1.45; color: var(--ink); }
.d-exc p + p { margin-top: 6px; }
.d-exc b { font-weight: 600; }
.d-exc p span { display: block; font-size: 0.875rem; color: var(--muted); }
.d-exc p .d-exc-d { color: var(--amber-text); font-weight: 600; }
.d-evt { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card); margin-bottom: 8px; }
.d-evt b { font-size: 0.96875rem; font-weight: 600; color: var(--ink); }
.d-evt span { font-size: 0.90625rem; line-height: 1.45; color: var(--ink); }
.d-evt small { font-size: 0.8125rem; font-weight: 600; color: var(--terra-text); }
.screen-pro .esp-carte { flex: none; }
.histo-l { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 0.875rem; line-height: 1.4; color: var(--ink); }
.histo-l small { color: var(--muted); font-size: 0.8125rem; }
.esp-fort { color: var(--ink); font-weight: 500; }

/* ---------- CV v2 : galerie, « Mon CV », téléchargement ---------- */
.cv-vitrine { position: relative; width: 210px; height: 150px; margin: 4px auto 6px; }
.cv-vitrine img { position: absolute; top: 6px; left: 50%; width: 96px; aspect-ratio: 210 / 297; object-fit: cover; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 12px 24px -14px rgba(120, 50, 10, .55); transform: translateX(-50%) rotate(calc((var(--k) - 1) * 9deg)) translateX(calc((var(--k) - 1) * 62px)); }
.cv-vitrine img:nth-child(2) { z-index: 1; top: 0; }
.cv-sep { height: 1px; background: var(--hair); margin: 4px 0; }
.cv-libre { display: flex; gap: 8px; align-items: center; }
.cv-libre .dem-in { flex: 1; height: 46px; }
.cv-mini-plus { width: 46px; height: 46px; background: var(--peach); color: var(--terra-text); }

.cv-filtres { flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 8px; scrollbar-width: none; }
.cv-filtres::-webkit-scrollbar { display: none; }
.cv-filtre { flex: none; height: 38px; padding: 0 15px; border-radius: 100px; border: 1.5px solid var(--border); background: var(--card); font: inherit; font-size: 0.90625rem; font-weight: 600; color: var(--muted); }
.cv-filtre.on { background: var(--terra); border-color: var(--terra); color: #17120E; }
.cv-galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.cv-vign { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); }
.cv-vign-img { display: block; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 14px 26px -18px rgba(120, 50, 10, .55); outline: 3px solid transparent; outline-offset: 2px; transition: outline-color .15s var(--ease), transform .15s var(--ease); }
.cv-vign-img img { display: block; width: 100%; aspect-ratio: 210 / 297; object-fit: cover; }
.cv-vign:active .cv-vign-img { transform: scale(.98); }
.cv-vign.on .cv-vign-img { outline-color: var(--terra); }
.cv-vign b { font-size: 0.90625rem; font-weight: 600; padding: 0 2px; }
.cv-vign small { display: flex; align-items: center; gap: 4px; font-size: 0.78125rem; color: var(--muted); padding: 0 2px; margin-top: -4px; }

.cv-modele-actuel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card); font-size: 0.9375rem; color: var(--muted); }
.cv-modele-actuel b { color: var(--ink); font-weight: 600; }
.cv-chg { height: 38px; padding: 0 14px; border-radius: 100px; border: 0; background: var(--peach); font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--terra-text); }
.cv-rubs { display: flex; flex-direction: column; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-card); overflow: hidden; }
.cv-rub { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-top: 1px solid var(--hair); background: none; text-align: left; font: inherit; color: var(--gray); }
.cv-rub:first-child { border-top: 0; }
.cv-rub-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--chipbg); color: var(--terra-text); display: flex; align-items: center; justify-content: center; }
.cv-rub-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cv-rub-t b { font-size: 0.96875rem; font-weight: 600; color: var(--ink); }
.cv-rub-t small { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-barre { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 14px 16px calc(var(--bot-inset) + 16px); background: linear-gradient(to top, var(--paper) 62%, rgba(255, 248, 241, 0)); }
.cv-barre .btn { width: 100%; }
.cv-voile { position: absolute; inset: 0; z-index: 20; background: rgba(23, 18, 14, .32); }
.cv-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px calc(var(--bot-inset) + 20px); border-radius: 26px 26px 0 0; background: var(--paper); box-shadow: var(--shadow-sheet); animation: cv-monte .22s var(--ease) both; }
@keyframes cv-monte { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cv-sheet { animation: none; } }
.cv-sheet-t { font-size: 1.125rem; font-weight: 700; color: var(--ink); padding: 0 4px 4px; }
.cv-format { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 18px; border: 0; background: var(--card); box-shadow: var(--shadow-card); text-align: left; font: inherit; }
.cv-format b { font-size: 1.03125rem; font-weight: 700; color: var(--ink); }
.cv-format span { font-size: 0.875rem; color: var(--muted); line-height: 1.35; }
.cv-format:active { box-shadow: 0 0 0 2px var(--terra); }
.cv-zoom { position: absolute; inset: 0; z-index: 30; overflow: auto; background: rgba(60, 38, 22, .74); padding: calc(var(--top-inset) + 56px) 0 40px; -webkit-overflow-scrolling: touch; }
.cv-zoom-pages { display: flex; flex-direction: column; gap: 14px; width: 160%; max-width: 900px; padding: 0 16px; }
.cv-zoom-pages .cv-page { box-shadow: none; }
.cv-zoom-x { position: fixed; top: calc(var(--top-inset) + 10px); right: 16px; z-index: 31; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.cv-format.attente { opacity: .55; }
.cv-format.attente b::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px; border-radius: 50%; border: 2px solid var(--peach); border-top-color: var(--terra); animation: esp-tour .9s linear infinite; }