/* Charte CWAY (Vincent, 2026-10-12) : JAMAIS de bordure colorée sur un seul côté d'un bloc (barre d'accent à
   gauche, « inset 4px 0 0 ») — un statut se dit par une fine bordure tout autour, une pastille ou la couleur du texte. */
/* Guides Népal — feuille de styles
   Charte Cause We Are Young (2026-10-10), même mise en page que Visa, Trek et Visit Népal :
   barre du haut claire et collante (tampon + nom), bandeau bleu nuit avec montagnes, rouge népalais pour
   les actions, fond gris froid, cartes blanches à filet, pied de page bleu nuit signé CWAY.
   Sous-marque Guides : safran #B5661A (« Safran des moines », choisi par Vincent le 2026-10-13, remplace la prune) ;
   textes, liens et boutons en #A35C17 (même safran assombri de 10 % : contraste 5,1 sur blanc, 4,7 sur le fond).
   Polices Archivo / Atkinson Hyperlegible / IBM Plex Mono. Clair / sombre via prefers-color-scheme. */

:root {
  --red: #C0122F;
  --red-deep: #9C0E26;
  --site: #A35C17;          /* safran Guides (#B5661A assombri pour la lisibilité) */
  --site-deep: #10233F;
  --night: #10233F;
  --paper: #F4F6F8;         /* fond de page */
  --mist: #E6EBF1;
  --surface: #FFFFFF;       /* cartes */
  --ink: #121A26;
  --ink-2: #4E5968;
  --ink-3: #5B6675;
  --line: #D5DBE2;
  --on-red: #FFFFFF;
  --on-site: #FFFFFF;
  --site-soft: #F6EDE4;
  --link: #A35C17;
  --link-hover: #703F10;
  --site-ink: #8F5014;      /* texte safran sur fond --site-soft (5,4:1) ; --site y serait à 4,4 */
  /* Refonte du 2026-10-14 : ombres douces et coins plus ronds (maquette validée par Vincent) */
  --shadow: 0 0 0 1px rgba(16, 35, 63, .05), 0 1px 2px rgba(16, 35, 63, .06), 0 6px 18px rgba(16, 35, 63, .06);
  --hover-shadow: 0 0 0 1px rgba(16, 35, 63, .05), 0 14px 32px rgba(16, 35, 63, .14);
  --radius: 16px;
  --radius-s: 8px;
  --font-head: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --hero-bg: linear-gradient(160deg, #0B1A30 0%, #10233F 55%, #1A3560 100%);
  --hero-ink: #F4F6F8;
  --hero-accent: #E3C5A8;   /* safran clair : accents et anneau de focus sur les fonds bleu nuit */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E141C; --mist: #1E2834; --surface: #18202B; --ink: #E8EDF3; --ink-2: #A3AEBB; --ink-3: #8F9AA8; --line: #2B3542;
    --red: #F2596E; --red-deep: #F47A8B; --site: #D6AB81; --on-red: #0E141C; --on-site: #0E141C; --site-soft: #33261C;
    --link: #D6AB81; --link-hover: #E5C9AF; --site-ink: #D6AB81; --hover-shadow: 0 0 0 1px var(--line), 0 14px 32px rgba(0, 0, 0, .5);
    --shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0, 0, 0, .3);
    --hero-bg: linear-gradient(160deg, #080F18 0%, #0E1B30 55%, #142849 100%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0E141C; --mist: #1E2834; --surface: #18202B; --ink: #E8EDF3; --ink-2: #A3AEBB; --ink-3: #8F9AA8; --line: #2B3542;
  --red: #F2596E; --red-deep: #F47A8B; --site: #D6AB81; --on-red: #0E141C; --on-site: #0E141C; --site-soft: #33261C;
  --link: #D6AB81; --link-hover: #E5C9AF; --site-ink: #D6AB81; --hover-shadow: 0 0 0 1px var(--line), 0 14px 32px rgba(0, 0, 0, .5);
  --shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0, 0, 0, .3);
  --hero-bg: linear-gradient(160deg, #080F18 0%, #0E1B30 55%, #142849 100%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); overflow-wrap: break-word; }   /* un nom fait d'un seul mot très long ne déborde pas sur téléphone (espace guide, messagerie) */
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--site); outline-offset: 2px; }
.hero :focus-visible, .pagehead :focus-visible, .footer :focus-visible, .beta :focus-visible { outline-color: var(--hero-accent); }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
img { max-width: 100%; }
.data { font-family: var(--font-data); font-weight: 500; font-variant-numeric: tabular-nums; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--red); color: var(--on-red); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- Bandeau bêta (tant que le site est en noindex) ---------- */
.beta { background: var(--night); color: #D9DEE8; font-size: .88rem; text-align: center; padding: 6px 16px; }
.beta__tag { font-family: var(--font-head); font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; background: var(--red); color: var(--on-red); border-radius: 999px; padding: 2px 9px; margin-right: 8px; vertical-align: 1px; }
.beta a { color: #fff; text-decoration: underline; overflow-wrap: anywhere; }

/* ---------- Barre du haut ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__in { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; letter-spacing: -.01em; font-size: 1.2rem; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand em { font-style: normal; color: var(--site); }
.brand__mark { width: 32px; height: 32px; display: block; }
/* Tampon : version claire, inverse (anneaux blancs) en thème sombre */
.stamp-inverse { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stamp { display: none; } :root:not([data-theme="light"]) .stamp-inverse { display: block; } }
:root[data-theme="dark"] .stamp { display: none; }
:root[data-theme="dark"] .stamp-inverse { display: block; }
.nav { display: none; gap: 22px; margin-left: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--red); }
@media (min-width: 900px) { .nav { display: flex; } }
.lang { display: inline-flex; margin-left: auto; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.nav + .lang { margin-left: 0; }
.lang a { display: inline-block; color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: .85rem; padding: 6px 12px; }
.lang a[aria-current="true"] { background: var(--site); color: var(--on-site); }

/* ---------- Bandeau d'accueil ---------- */
.hero { position: relative; background: var(--hero-bg); color: var(--hero-ink); overflow: hidden; }
.hero__in { position: relative; z-index: 2; padding: clamp(56px, 9vw, 120px) 0 clamp(110px, 14vw, 180px); max-width: 800px; }
.eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--hero-accent); margin-bottom: 18px; }
.hero h1 span { color: var(--hero-accent); }
.lead { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: #D9DEE8; max-width: 660px; }

/* En-tête des pages intérieures */
.pagehead { background: var(--hero-bg); color: var(--hero-ink); padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 56px); }
.pagehead h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); max-width: 860px; }
.pagehead .lead { max-width: 720px; margin-bottom: 0; }
/* Recherche par métier (2026-10-21) : les deux autres métiers sous l'introduction */
.dir__trades { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 20px 0 0; font-size: .92rem; }
.dir__trades .chip { color: var(--ink); text-decoration: none; font-weight: 600; }
.dir__trades .chip:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: var(--radius-s); font-family: var(--font-head); font-weight: 700; text-decoration: none; font-size: 1rem; border: 2px solid transparent; transition: transform .15s, background .15s; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--red); color: var(--on-red); }
.btn--primary:hover { background: var(--red-deep); color: var(--on-red); }
.btn--ghost { border-color: rgba(255, 255, 255, .4); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.btn--site { background: var(--site); color: var(--on-site); }
.btn--site:hover { background: var(--site-deep); color: #fff; }
.btn--small { padding: 9px 16px; font-size: .92rem; }

/* ---------- Sections et cartes ---------- */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section--tint { background: var(--mist); }
.section__title { max-width: 820px; }
.section__intro { color: var(--ink-2); max-width: 720px; font-size: 1.08rem; margin-bottom: 32px; }
.grid2 { display: grid; gap: 18px; }
@media (min-width: 860px) { .grid2 { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; display: flex; flex-direction: column; }
.card h3 { font-size: 1.15rem; }
.card p { color: var(--ink-2); font-size: .97rem; }
.card p:last-child { margin-bottom: 0; }
.card__label { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--site); margin-bottom: 8px; }
.card--site { background: var(--site-soft); box-shadow: none; }
.card--site .card__label, .review__reply .card__label { color: var(--site-ink); }   /* lisible sur le fond safran clair */
.tag { display: inline-block; align-self: flex-start; margin-top: auto; font-size: .82rem; font-weight: 700; color: var(--ink-2); background: var(--mist); padding: 3px 10px; border-radius: 999px; }   /* neutre : un safran clair se confondait avec .tag--warn */

/* ---------- 404 ---------- */
.notfound__code { font-family: var(--font-data); color: var(--hero-accent); letter-spacing: .1em; }

/* ---------- Pied de page ---------- */
.footer { background: var(--site-deep); color: #B9C2D3; padding: 48px 0 36px; font-size: .9rem; }
.footer a { color: var(--hero-accent); }
.footer__disclaimer { max-width: 780px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 18px 0 6px; }
.footer__nav a { color: #F4F6F8; font-weight: 600; }
.footer__navlabel { color: #8C97AB; }
.footer__brand { margin: 22px 0 14px; }
.footer__brand a { display: inline-flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; font-family: var(--font-head); font-weight: 800; letter-spacing: -.01em; }
.footer__brand a:hover { color: var(--hero-accent); }
.footer__meta { margin: 0; color: #8C97AB; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* ---------- Comptes (jalon 2) ---------- */
.usernav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.usernav a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.usernav a:hover, .usernav a[aria-current="page"] { color: var(--red); }
.usernav + .lang { margin-left: 0; }
/* « Créer ma fiche » : bouton rouge compact dans la barre (les couleurs des liens de la barre ne s'y appliquent pas) */
.usernav a.usernav__cta { padding: 7px 14px; font-size: .9rem; font-weight: 700; color: var(--on-red); }
.usernav a.usernav__cta:hover { color: var(--on-red); }
/* Petits écrans (jusqu'au téléphone en paysage) : marque + langue sur la 1re ligne, liens du compte et « Créer ma fiche »
   sur la 2e (sans débordement entre 560 et 720 px depuis l'ajout du bouton) */
@media (max-width: 719px) {
  .topbar__in { flex-wrap: wrap; height: auto; min-height: 56px; padding-block: 8px; gap: 6px 14px; }
  .brand { font-size: 1.05rem; }
  .usernav { order: 3; width: 100%; margin-left: 0; gap: 14px; flex-wrap: wrap; }
  .usernav a.usernav__cta { margin-left: auto; }   /* 2e ligne, à droite de « Se connecter » */
  .usernav + .lang { margin-left: auto; }
}

.flashbar { padding-top: 20px; }
.alert { border-radius: var(--radius-s); padding: 12px 16px; margin: 0 0 16px; font-size: .97rem; border: 1px solid; }
.alert p { margin: 0 0 10px; }
.alert--success { background: #E4F3EA; color: #1F5C3B; border-color: #1F7A4D; }
.alert--error { background: #FBE5E8; color: #8A0D22; border-color: var(--red); }
.alert--info { background: var(--mist); color: var(--ink-2); border-color: var(--ink-3); }
.alert--warn { background: #FFF3DC; color: #7A4700; border-color: #C98A1A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .alert--success { background: #163224; color: #A7E3C0; } :root:not([data-theme="light"]) .alert--error { background: #3A1A20; color: #F7B3BE; } :root:not([data-theme="light"]) .alert--warn { background: #3A2A10; color: #F0C987; } }
:root[data-theme="dark"] .alert--success { background: #163224; color: #A7E3C0; }
:root[data-theme="dark"] .alert--error { background: #3A1A20; color: #F7B3BE; }
:root[data-theme="dark"] .alert--warn { background: #3A2A10; color: #F0C987; }

.auth { padding-top: clamp(32px, 5vw, 56px); }
.auth__box { max-width: 460px; }
.auth__box h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.auth__intro { color: var(--ink-2); }
.auth__switch { margin-top: 22px; color: var(--ink-2); text-align: center; }

.form { display: grid; gap: 16px; }
.card.form { gap: 14px; }
.field { display: grid; gap: 6px; align-content: start; }   /* pas d'étirement quand la case voisine a une aide */
.field > span:not(.nsel) { font-family: var(--font-head); font-weight: 600; font-size: .9rem; letter-spacing: 0; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: var(--radius-s); padding: 11px 12px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--site); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site) 25%, transparent); }
.field input:disabled { background: var(--mist); color: var(--ink-2); }
.field__hint { color: var(--ink-3); font-size: .85rem; }
.field__err { color: var(--red); font-size: .88rem; font-weight: 700; }
.field.has-error input { border-color: var(--red); }
.form__aside { margin: -6px 0 0; font-size: .92rem; text-align: right; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn--block { width: 100%; justify-content: center; }
.btn--outline { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn--outline:hover { border-color: var(--site); color: var(--site); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
button.btn { cursor: pointer; }
.oauth { display: grid; gap: 10px; margin: 8px 0 4px; }
.btn--oauth { justify-content: center; background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); font-family: var(--font-body); }
.btn--oauth:hover { border-color: var(--ink-3); color: var(--ink); }
/* Formulaire d'avis sans connexion : « Continuer avec Google » mis en avant (v1.61.0) */
.quickauth { border: 2px solid var(--site); border-radius: var(--radius-s); padding: 14px 16px; margin: 6px 0 4px; display: grid; gap: 10px; }
.quickauth__title { margin: 0; font-weight: 700; font-size: .95rem; }
.quickauth .note { margin: 0; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: .88rem; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 18px; }
.roles__opt { display: grid; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; }
.roles__opt span { color: var(--ink-2); font-size: .86rem; line-height: 1.35; }
.roles__opt:hover { border-color: var(--site); color: var(--ink); }
.roles__opt.is-on { border-color: var(--site); box-shadow: inset 0 0 0 1px var(--site); background: var(--site-soft); }

.h3 { font-size: 1.2rem; }
.note { color: var(--ink-3); font-size: .92rem; }
.account { display: grid; gap: 18px; }
.account__next { margin: 0; }
.connections { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.connections li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.connections .tag { margin-top: 0; }
.connections form, .connections .btn { margin-left: auto; }
.account__logout { margin-top: 8px; }

/* ---------- Espace guide (jalon 3) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pagehead--slim { padding: clamp(28px, 4vw, 44px) 0 clamp(22px, 3vw, 32px); }
.pagehead--slim h1 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin-bottom: .3em; }
.eyebrow a { color: inherit; }
.status { display: inline-block; font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: 3px 12px; margin: 0; vertical-align: middle; }
.status--draft { background: rgba(255,255,255,.14); color: #E8EDF3; }
.status--pending { background: #FFF3DC; color: #7A4700; }
.status--published { background: #E4F3EA; color: #1F5C3B; }
.status--rejected, .status--suspended { background: #FBE5E8; color: #8A0D22; }
.card .status--draft { background: var(--mist); color: var(--ink-2); }

.tabs { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 64px; z-index: 40; }
.tabs__in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 14px 14px 12px; color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: .95rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--site); border-bottom-color: var(--site); }

.section--form { padding-top: 28px; }
.listing { display: grid; gap: 18px; max-width: 880px; }
.listing__form { gap: 18px; }
.listing .card { gap: 14px; }
fieldset.card { border: 0; margin: 0; min-width: 0; display: grid; gap: 14px; }
fieldset.card > legend { float: left; width: 100%; padding: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; margin-bottom: 4px; }
.checklist ul { margin: 0; }
.listing__actions { display: flex; flex-wrap: wrap; gap: 12px; position: sticky; bottom: 0; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); padding: 12px 0; border-top: 1px solid var(--line); }
.auth__box--wide { max-width: 640px; }

.choices { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--site); background: var(--site-soft); }
.choice input { margin-top: 4px; accent-color: var(--site); }
.choice span { display: grid; gap: 2px; }
.choice small { color: var(--ink-2); }

.grid2--tight { gap: 14px; }
.grid3 { display: grid; gap: 14px; }
@media (min-width: 640px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
.fr-block { display: grid; gap: 14px; padding: 14px; border-radius: var(--radius); background: var(--site-soft); }
.fr-block[hidden] { display: none; }
.autotr { background: var(--mist); border-radius: var(--radius-s); padding: 10px 14px; }
.autotr summary { cursor: pointer; font-weight: 700; font-size: .95rem; }
.autotr p { margin: 10px 0 0; color: var(--ink-2); font-size: .95rem; }
.review .autotr { margin-top: 10px; }
.review .autotr .prose { margin-top: 8px; color: var(--ink-2); }
.autotr-admin { background: var(--mist); border-radius: var(--radius-s); padding: 8px 12px; margin: 8px 0; }
.autotr-admin p { margin: 4px 0; }
.field__count { color: var(--ink-3); font-size: .82rem; font-family: var(--font-data); }
.field__count.is-ok { color: #1F7A4D; }

.langs { display: grid; gap: 8px 18px; }
@media (min-width: 640px) { .langs { grid-template-columns: 1fr 1fr; } }
.langrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.langrow select { font: inherit; font-size: .9rem; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); }
.langrow select:disabled { opacity: .45; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--site); }
.listing__also { margin-top: -6px; font-size: .95rem; display: flex; flex-direction: column; gap: 6px; }   /* « j’exerce aussi… » sous le type (046, 052) : une case par métier */
.listing__also .check[hidden] { display: none; }
.listing__also[hidden] { display: none; }
.listing__also-title { margin: 0; font-weight: 700; }   /* agence : « Nous organisons : » (2026-10-22) */
.listing__also-title[hidden] { display: none; }
.listing__also.has-error .listing__also-title { color: var(--red); }
.listing__form [data-trades][hidden], .listing__form [data-price-trade][hidden], .listing__form [data-pspec-extra][hidden] { display: none; }
/* Tarifs par métier (2026-10-21) : un sous-bloc par métier, titré, dans la carte « Tarifs » */
.pricegroup { display: grid; gap: 12px; border: 0; border-top: 1px solid var(--line); padding: 14px 0 0; margin: 4px 0 0; min-width: 0; }
.pricegroup > legend { float: left; width: 100%; padding: 0; font-family: var(--font-head); font-weight: 800; font-size: 1rem; }
.checkgroup { display: flex; flex-wrap: wrap; gap: 8px 20px; border: 0; padding: 0; margin: 0; }
.checkgroup__title { width: 100%; margin: 6px 0 0; font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.profilephoto { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.profilephoto img, .profilephoto__empty { width: 160px; height: 160px; border-radius: var(--radius); object-fit: cover; flex: none; }
.profilephoto__empty { display: grid; place-items: center; background: var(--site-soft); color: var(--site); font-family: var(--font-head); font-size: 3rem; font-weight: 800; }
.profilephoto form { flex: 1; min-width: 240px; }
/* Recadrage de la photo de profil (assets/js/cropper.js) : carré = ce que le serveur garde, cercle = résultats de recherche */
.cropper { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-start; margin: 4px 0 16px; }
.cropper[hidden] { display: none; }
.cropper__main { display: grid; gap: 10px; width: min(280px, 100%); }
.cropper__stage { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-s); background: #fff;   /* blanc = marges d’un logo dézoomé, comme sur le serveur */
                  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.cropper__stage:active { cursor: grabbing; }
.cropper__stage:focus-visible { outline: 2px solid var(--focus, var(--site)); outline-offset: 2px; }
.cropper__img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.cropper__ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(16, 35, 63, .5); border: 2px solid rgba(255, 255, 255, .9); pointer-events: none; }
.cropper__zoom { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 700; }
.cropper__zoom input { flex: 1; accent-color: var(--site); }
.cropper__side { display: grid; gap: 8px; justify-items: start; flex: 1; min-width: 160px; }
.cropper__mini { width: 72px; height: 72px; border-radius: 50%; background: var(--mist); }
.cropper__side .note { margin: 0; }
.gallery-edit { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.gallery-edit li { display: grid; gap: 8px; align-content: start; min-width: 0; }
.gallery-edit img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); background: var(--mist); }
.gallery-edit p { margin: 0; font-size: .85rem; color: var(--ink-2); }

.badgecard { border: 1px solid var(--line); }
.badgecard--verified { border-color: #1F7A4D; }
.badgecard--pending { border-color: #C98A1A; }
.badgecard--rejected, .badgecard--expired { border-color: var(--red); }

.rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rows li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rows .tag { margin-top: 0; }
.rows form { margin-left: auto; display: flex; gap: 8px; }
.avatar { border-radius: 50%; object-fit: cover; }
.form--inline { grid-template-columns: 1fr auto; align-items: end; }
@media (max-width: 560px) { .form--inline { grid-template-columns: 1fr; } }

/* ---------- Back-office (jalon 4) ---------- */
.tabs .count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: var(--on-red); font-size: .75rem; text-align: center; }
.admin { display: grid; gap: 18px; }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.stat { display: grid; gap: 2px; padding: 16px 18px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink-2); text-decoration: none; }
.stat .data { font-size: 1.9rem; color: var(--ink); line-height: 1.1; }
.stat--todo { box-shadow: 0 0 0 1px var(--red), var(--shadow); }
.stat--todo .data { color: var(--red); }
.stat:hover { box-shadow: var(--hover-shadow); color: var(--ink); }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.filters .field { min-width: 200px; }
.table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.table tr.is-off td { opacity: .6; }
.tag--warn { background: #FFF3DC; color: #7A4700; }
.btn--danger { color: var(--red); }
.btn--danger:hover { border-color: var(--red); color: var(--red); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.admin__summary { gap: 12px; }
.admin__summary p { margin: 0; }
.pre { white-space: pre-line; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.facts dt { font-weight: 700; color: var(--ink-2); }
.facts dd { margin: 0; }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: 8px; } }
.licencedoc img { max-width: 100%; max-height: 520px; border: 1px solid var(--line); border-radius: var(--radius-s); }
.gallery-edit figure { margin: 0; display: grid; gap: 4px; }
.gallery-edit figcaption { font-size: .82rem; color: var(--ink-3); }
.switch { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.switch input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--site); flex: none; }
.switch > span { display: grid; gap: 2px; }
.switch strong { font-family: var(--font-head); font-weight: 600; }
.switch small { color: var(--ink-2); }
.report { align-items: flex-start; }
.report > div { flex: 1; min-width: 240px; }

/* ---------- Annuaire public (jalon 5) ---------- */

.pgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* Carte de fiche (refonte du 2026-10-14) : bande photo, avatar qui la chevauche, lignes à icônes */
.pcard { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.pcard:hover { box-shadow: var(--hover-shadow); transform: translateY(-2px); }
.pcard__link { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; height: 100%; }
.pcard__link:hover { color: var(--ink); }
.pcard__link:focus-visible { outline-offset: -3px; }
.pcard__cover { height: 112px; background: var(--mist); }
.pcard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 0 18px 16px; flex: 1; }
.pcard__body p { margin: 0; }
.pcard__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface); border: 4px solid var(--surface); margin-top: -36px; position: relative; }
.pcard__photo--empty { display: grid; place-items: center; background: var(--site-soft); color: var(--site-ink); font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; }
.pcard .card__label { margin: 4px 0 0; }
.pcard__name { font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 6px; }
.pcard__nametxt { min-width: 0; overflow-wrap: anywhere; text-wrap: wrap; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* nom long : 2 lignes au plus (v1.63.0) */
.pcard__check, .phead__check { width: 18px; height: 18px; flex: none; }
.pcard__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .9rem; }
.pcard__rating .badge { margin: 0; }
.pcard__stars { display: inline-flex; align-items: center; gap: 5px; }
.pcard__muted { color: var(--ink-3); }
.pcard__headline { color: var(--ink-2); font-size: .93rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__facts { display: grid; gap: 4px; font-size: .88rem; color: var(--ink-2); }
.pcard__facts > span { display: flex; align-items: center; gap: 8px; }
.pcard__facts .icon { width: 16px; height: 16px; color: var(--ink-3); }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .9rem; }
.pcard__body .pcard__foot { margin-top: auto; }
.pcard__price { font-weight: 700; font-size: .86rem; line-height: 1.35; color: var(--ink); }
.pcard__more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; color: var(--site); white-space: nowrap; }
.pcard__more .icon { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .pcard { transition: none; } .pcard:hover { transform: none; } }
.badge { display: inline-block; margin: 4px 0 0; font-size: .78rem; font-weight: 700; color: #1F5C3B; background: #E4F3EA; border-radius: 999px; padding: 1px 9px; }
.stars { color: #A86F0E; }   /* contraste ≥ 3:1 sur blanc (WCAG 1.4.11) */

.dir { display: grid; gap: 22px; }
@media (min-width: 980px) { .dir { grid-template-columns: 280px 1fr; align-items: start; } .dir__filters { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; } }
/* Téléphone et tablette (v1.69.1, demande de Vincent) : filtres masqués par défaut ; le lien « Filtres » en tête des
   résultats les ouvre AU-DESSUS des résultats (assets/js/directory.js). Sans JavaScript : filtres affichés, au-dessus. */
@media (max-width: 979px) { .dir.is-collapsible .dir__filters:not(.is-open) { display: none; } }
.dir__tofilters[aria-expanded] { cursor: pointer; }
.dir__tofilters { font-weight: 600; font-size: .9rem; }
@media (min-width: 980px) { .dir__tofilters { display: none; } }
.dir__filters { gap: 12px; }
.dir__filters select { width: 100%; font: inherit; padding: 9px 10px; border: 1.5px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); }
.dir__checks { display: grid; gap: 8px; }
.dir__submit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dir__submit a { font-size: .92rem; }
.dir__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dir__count { margin: 0; font-weight: 700; }
.dir__sort { display: flex; gap: 4px; flex-wrap: wrap; }
.dir__sort a { padding: 5px 12px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-size: .9rem; font-weight: 600; }
.dir__sort a[aria-current="true"] { background: var(--site); color: var(--on-site); }
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.pager a { min-width: 38px; padding: 6px 10px; text-align: center; border-radius: var(--radius-s); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; font-weight: 700; }
.pager a[aria-current="page"] { background: var(--site); color: var(--on-site); }
.empty { text-align: center; }

.previewbar { background: #FFF3DC; color: #7A4700; font-weight: 700; padding: 10px 0; }
.profile { display: grid; gap: 22px; }
@media (min-width: 960px) { .profile { grid-template-columns: 1fr 340px; align-items: start; } .profile__side { position: sticky; top: 84px; } }
.profile__main, .profile__side { display: grid; gap: 18px; min-width: 0; }
/* Téléphone et tablette (v1.65.0, demande de Vincent) : prix et contact AVANT les avis — les deux colonnes se fondent
   dans la grille de .profile et l'ordre est donné ici : fiche, prix et contact, avis, badge, date de mise à jour */
@media (max-width: 959px) {
  .profile { gap: 18px; }
  .profile__main, .profile__side { display: contents; }
  .profile__main > * { order: 1; }
  .profile__side > .contactcard { order: 2; }
  .profile__main > #reviews { order: 3; }
  .profile__side > .badgecard { order: 4; }
  .profile__side > .profile__updated { order: 5; }
  /* Avis : les 3 premiers, puis « Voir tous les avis (N) » (profile.js ; sans JavaScript, tout reste visible) */
  .reviews.is-collapsed > li:nth-child(n+4) { display: none; }
}
.reviews__more { display: none; }
@media (max-width: 959px) { .reviews.is-collapsed + .reviews__more { display: inline-flex; } }
.prose { line-height: 1.7; }
/* Présentation longue repliée (profile.js) : ~10 lignes et un fondu ; sans JavaScript, tout le texte s'affiche */
.prose.is-clamped { max-height: 17em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.readmore { margin: 6px 0 0; text-align: center; }
.readmore .linkbtn { color: var(--red); font-weight: 700; text-decoration: none; }
.readmore .linkbtn:hover { text-decoration: underline; }
.chips-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 4px 12px; border-radius: 999px; font-size: .88rem; background: var(--mist); }
.chip--certification { background: #E4F3EA; color: #1F5C3B; }
/* Fiche : spécialités en tête, puis treks regroupés par région (2026-10-14) */
.contactcard__trade { margin: 10px 0 0; font-weight: 700; font-size: .9rem; color: var(--ink-2); }   /* tarifs : nom du métier (2026-10-21) */
.specialties { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
@media (min-width: 640px) { .specialties { grid-template-columns: repeat(3, 1fr); } }
/* Treks phares en cartes photo (2026-10-17, version A choisie par Vincent) : photo du trek (Trek Népal), numéro dans
   l'ordre choisi par le guide, nom, région ; toute la carte est le lien. Mobile : vignette à gauche, carte basse. */
.specialty { display: grid; height: 100%; border-radius: var(--radius-s); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.specialty:hover, .specialty:focus-visible { box-shadow: 0 0 0 1.5px var(--red), var(--shadow); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .specialty, .specialty:hover, .specialty:focus-visible { transition: none; transform: none; } }
.specialty__ph { position: relative; display: block; }
.specialty__ph img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* Lieu sans photo sur Visit Népal (migration 062) : aplat safran clair et icône, même format 3:2 */
.specialty__ph--none { display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--site-soft); color: var(--site-ink); }
.specialty__ph--none .icon { width: 36px; height: 36px; }
span.specialty:hover { box-shadow: var(--shadow); transform: none; }   /* carte sans lien (lieu sans page) */
.specialty__n { position: absolute; top: 8px; left: 8px; min-width: 24px; padding: 2px 8px; border-radius: 999px; background: var(--red); color: var(--on-red); font-weight: 800; font-size: .8rem; text-align: center; }
.specialty__body { display: grid; gap: 2px; padding: 10px 12px 12px; }
.specialty__name { font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; line-height: 1.25; }
.specialty__name span { color: var(--ink-3); font-weight: 400; font-size: .85em; }
.specialty__meta { font-size: .85rem; color: var(--ink-3); }
@media (max-width: 639px) {
  /* la photo suit la hauteur de la carte quand le nom tient sur plusieurs lignes (revue du 2026-10-18) */
  .specialty { grid-template-columns: 112px 1fr; align-items: stretch; }
  .specialty__ph { height: 100%; }
  .specialty__ph img { height: 100%; min-height: 76px; aspect-ratio: auto; }
  .specialty__ph--none { height: 100%; min-height: 76px; aspect-ratio: auto; }
  .specialty__body { align-content: center; }
}
.trekgroups { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.trekgroups li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.trekgroups strong { margin-right: 4px; }
.trekgroups .chip { text-decoration: none; color: var(--ink); }
.trekgroups .chip:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.pgallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pgallery figure { margin: 0; }
.pgallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); display: block; }
.pgallery figcaption { font-size: .82rem; color: var(--ink-3); margin-top: 4px; }
.pgallery a { display: block; cursor: zoom-in; }
/* Photo en surimpression (assets/js/lightbox.js) : fond sombre, photo entière, boutons blancs sur disque sombre */
.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.lightbox::backdrop { background: rgba(8, 14, 24, .92); }
.lightbox__fig { margin: 0; width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 10px; padding: 56px 16px; box-sizing: border-box; }
.lightbox__img { max-width: min(100%, 1600px); max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); object-fit: contain; border-radius: var(--radius-s); background: #0e141c; }
.lightbox__cap { font-size: .95rem; color: #E8EDF3; text-align: center; max-width: 60ch; }
.lightbox__count { position: absolute; top: 16px; left: 16px; margin: 0; font-size: .9rem; color: #E8EDF3; }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lightbox__btn:hover { background: rgba(255, 255, 255, .26); }
.lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__btn[hidden] { display: none; }
.lightbox__close { top: 10px; right: 10px; }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 10px; }
.lightbox__next { right: 10px; }
.lightbox-open { overflow: hidden; }
.people { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.people a, .people__plain { display: flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; }
.people img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.people span span, .people a > span { display: grid; }
.people small { color: var(--ink-3); }
.contactcard { gap: 10px; }
.contactcard__price { font-family: var(--font-data); font-weight: 500; font-size: 1.3rem; margin: 0; }
.contactcard__links { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; }
.badgecard--none { border-color: var(--line); }
.profile__updated { margin: 0; text-align: center; }

/* ---------- Messagerie (jalon 6) ---------- */
.usernav { display: flex; gap: 16px; align-items: center; }
.usernav .count, .convlist .count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: var(--on-red); font-size: .75rem; text-align: center; font-weight: 700; }
.eyebrow--dark, .eyebrow--dark a { color: var(--site); }
.inbox, .thread { max-width: 820px; }
.convlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.convlist a { display: grid; gap: 4px; padding: 14px 18px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.convlist a:hover { box-shadow: var(--hover-shadow); color: var(--ink); }
.convlist .is-unread a { box-shadow: 0 0 0 1px var(--site), var(--shadow); }
.convlist__who { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.convlist__who small { color: var(--ink-3); }
.convlist__last { color: var(--ink-2); font-size: .95rem; }
.convlist__meta { display: flex; gap: 10px; align-items: center; font-size: .82rem; color: var(--ink-3); }
.convlist .tag { margin: 0; }
.msgs { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.msg { max-width: 82%; justify-self: start; }
.msg--mine { justify-self: end; }
.msg__body { padding: 12px 16px; border-radius: 14px 14px 14px 4px; background: var(--surface); box-shadow: var(--shadow); white-space: normal; overflow-wrap: anywhere; }
.msg--mine .msg__body { background: var(--site-soft); border-radius: 14px 14px 4px 14px; box-shadow: none; }
.msg__meta { display: flex; gap: 10px; align-items: center; font-size: .78rem; color: var(--ink-3); margin-top: 4px; padding: 0 6px; }
.msg--mine .msg__meta { justify-content: flex-end; }
.msg__meta form { display: inline; }
.msg__meta .tag { margin: 0; font-size: .72rem; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-3); text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--red); }
.replyform { position: sticky; bottom: 0; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); padding: 12px 0; }
.thread__tools { margin-top: 18px; text-align: right; font-size: .88rem; }

/* ---------- Avis (jalon 7) ---------- */
.rating { border: 0; padding: 0; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.rating legend { float: left; font-family: var(--font-head); font-weight: 600; padding: 0; }
.rating__stars { display: inline-flex; flex-direction: row-reverse; }
.rating__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating__stars label { font-size: 1.7rem; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 0 2px; }
.rating__stars input:checked ~ label, .rating__stars label:hover, .rating__stars label:hover ~ label { color: #A86F0C; }
.rating__stars input:focus-visible + label { outline: 2px solid var(--site); outline-offset: 2px; border-radius: 4px; }
.rating.has-error legend { color: var(--red); }
.rating .field__err { width: 100%; }
.ratings { display: grid; gap: 10px; margin-bottom: 18px; }
@media (min-width: 640px) { .ratings { grid-template-columns: 180px 1fr; align-items: center; } }
.ratings__avg { margin: 0; font-size: 1.1rem; }
.ratings__avg .data { font-size: 1.6rem; }
.ratings__crit { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: .9rem; align-items: center; }
.ratings__crit dd { margin: 0; display: flex; gap: 8px; align-items: center; }
.bar { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #C98A1A var(--w, 0%), var(--mist) var(--w, 0%)); max-width: 220px; }
.bar--0 { --w: 0%; } .bar--1 { --w: 10%; } .bar--2 { --w: 20%; } .bar--3 { --w: 30%; } .bar--4 { --w: 40%; } .bar--5 { --w: 50%; }
.bar--6 { --w: 60%; } .bar--7 { --w: 70%; } .bar--8 { --w: 80%; } .bar--9 { --w: 90%; } .bar--10 { --w: 100%; }
.reviews { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 18px; }
.review { border-top: 1px solid var(--line); padding-top: 14px; }
.review__head { margin: 0 0 2px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.review__meta { margin: 0 0 8px; font-size: .88rem; color: var(--ink-3); }
.review__meta .badge { margin: 0; }
.stars--off { color: var(--ink-3); opacity: .55; }
.review__reply { margin-top: 10px; padding: 10px 14px; background: var(--site-soft); border-radius: var(--radius-s); }
.review__reply .card__label { margin-bottom: 4px; }
.review__replyform { margin-top: 10px; }
.review__replyform summary { cursor: pointer; color: var(--site); font-weight: 700; font-size: .92rem; }
.review__replyform textarea { width: 100%; font: inherit; padding: 10px; border: 1.5px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); }

/* ---------- Pages légales et compte (jalon 8) ---------- */
.legal { max-width: 780px; }
.legal h2 { font-size: 1.35rem; margin-top: 1.6em; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: .5em; }
.check--terms { align-items: flex-start; font-size: .92rem; }
.check--terms input { margin-top: 3px; flex: none; }
.check--terms.has-error span { color: var(--red); }
.oauth__terms { margin: 4px 0 0; font-size: .82rem; text-align: center; }
.account__delete summary { cursor: pointer; font-weight: 700; color: var(--red); }
.account__delete[open] { gap: 12px; }

/* Agence : formulaire de certificat replié (voie de secours hors TAAN) */
.dotfold > summary { cursor: pointer; margin: 0; list-style: revert; }
.dotfold[open] > summary { margin-bottom: 14px; }

/* Champ mot de passe avec bouton « œil » (assets/js/password.js) */
.pwfield { position: relative; display: block; }
.pwfield input { width: 100%; padding-right: 46px; }
.pwfield__toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--ink-3); cursor: pointer; }
.pwfield__toggle:hover, .pwfield__toggle[aria-pressed="true"] { color: var(--site); }
.pwfield__toggle:focus-visible { outline: 2px solid var(--site); outline-offset: 1px; }

/* Mode maintenance (admin) */
.maintbar { background: #B3261E; color: #fff; text-align: center; font-weight: 600; font-size: .9rem; padding: 8px 16px; }
.maintbar a { color: #fff; text-decoration: underline; }
.maintcard { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.maintcard p { margin: 0; }
.maintcard--on { border: 2px solid #B3261E; }

/* Choix de la langue de rédaction (fiche) : même allure qu'un champ, sans cadre */
.textlang { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.textlang legend { padding: 0; margin-bottom: 6px; font-family: var(--font-head); font-weight: 600; font-size: .9rem; width: 100%; }
.textlang .field__hint { width: 100%; }

/* Champs d'une ligne et menus déroulants : même hauteur partout (alignement des formulaires en colonnes) */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select { height: 46px; box-sizing: border-box; }

/* « Améliorer mon texte » : propositions de Claude, côte à côte, changements surlignés */
.improve { display: grid; gap: 10px; padding: 14px; border: 1.5px dashed var(--line); border-radius: var(--radius-s); background: var(--paper); }
.improve .note { margin: 0; }
.improve__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.improve__result { display: grid; gap: 14px; }
.improve__field h4, .improve__title { font-size: .9rem; margin: 0 0 6px; }
.improve__cols { display: grid; gap: 10px; }
@media (min-width: 760px) { .improve__cols { grid-template-columns: 1fr 1fr; } }
.improve__col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; }
.improve__col p { margin: 0 0 6px; font-family: var(--font-head); font-weight: 600; font-size: .8rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.improve del { background: #FBE5E8; color: #8A0D22; text-decoration: line-through; }
.improve ins { background: #E4F3EA; color: #1F5C3B; text-decoration: none; }
.improve__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Téléphones : formulaires confortables au doigt (audit mobile du 2026-10-11) */
@media (max-width: 760px) {
  /* 16 px minimum : en dessous, iOS zoome toute la page quand on touche un champ */
  .field input, .field select, .field textarea, .langrow select, .pwfield input, .dir__filters select { font-size: 16px; }
  .check input, .switch input, .textlang input { width: 22px; height: 22px; }
  .check { gap: 10px; min-height: 36px; }
  .langrow { padding: 8px 0; }
  .langrow select { min-height: 38px; }
}
@media (max-width: 560px) {
  /* Onglets de l'espace guide : les 4 tiennent sans être coupés */
  .tabs a { padding: 13px 9px 11px; font-size: .88rem; }
  .tabs__in { gap: 0; }
}
@media (max-width: 560px) {
  /* Barre « Enregistrer / Soumettre » : deux boutons côte à côte, compacts (131 px → ~70 px de haut) */
  .listing__actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; padding: 8px 0; }
  .listing__actions .btn { justify-content: center; padding: 11px 10px; font-size: .9rem; line-height: 1.2; text-align: center; }
}

/* Compte à deux fiches (agence + fiche guide) : sélecteur dans l'en-tête de l'espace guide */
.switcher { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.switcher a { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; }
.switcher a small { font-weight: 400; opacity: .8; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.switcher a[aria-current="page"] { background: #fff; color: var(--site); border-color: #fff; }
.account__listing + .account__listing { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.account__listing .eyebrow { margin: 0 0 4px; }
.card.second { margin-top: 18px; }

/* Accessibilité (revue n° 2) : anneau de focus DANS l'élément là où le parent coupe ce qui dépasse
   (sélecteur EN | FR en overflow:hidden, onglets en overflow-x:auto) */
.lang a:focus-visible, .tabs a:focus-visible { outline-offset: -3px; }

/* Back-office : santé du site (tuiles et voyants) */
.admin__h { margin: 26px 0 10px; }
.health { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.health__tile { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.health__tile .note { margin: 4px 0 0; font-size: .85rem; overflow-wrap: anywhere; }
.health__label { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.health__value { margin: 4px 0 0; font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; color: var(--ink); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
.health--ok .dot, .dot--ok { background: #2E8B57; }
.health--warn .dot, .dot--warn { background: #C98A1A; }
.health--bad .dot, .dot--bad { background: var(--red); }
.health--bad { box-shadow: 0 0 0 1px var(--red), var(--shadow); }
.cronsteps { margin-top: 12px; } .cronsteps summary { cursor: pointer; font-weight: 700; }
.cronsteps .rows li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
/* Bandeau « maintenance » sur toutes les pages du back-office */
.adminmaint { background: #FFF3DC; color: #7A4700; border-bottom: 2px solid #C98A1A; }
.adminmaint .wrap { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 10px 0; }
.adminmaint p { margin: 0; }
.filters--inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chips a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); font-weight: 700; font-size: .88rem; background: var(--surface); }
.chips a[aria-current="true"] { background: var(--site); color: var(--on-site); border-color: var(--site); }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--mist); color: var(--ink-2); }
.pill--bad { background: #FBE5E8; color: #8A0D22; } .pill--ok { background: #E4F3EA; color: #1F5C3B; } .pill--warn { background: #FFF3DC; color: #7A4700; }
.pill .flag { width: 16px; height: 12px; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }   /* drapeau du pays d'envoi d'un avis (admin_country) */
.person__counts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 14px 0; }
.dangerzone { border: 1.5px solid var(--red); }

/* Back-office : paires libellé / valeur (fiche personne) */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0; }
.kv dt { font-weight: 700; color: var(--ink-3); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: 6px; } }

/* Back-office : modifications d'une fiche depuis sa dernière validation (includes/snapshots.php) */
.diff { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 10px 18px; margin: 12px 0 0; }
.diff dt { font-weight: 700; color: var(--ink-2); }
.diff dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.diff__text { margin: 0; white-space: pre-line; }
.diff__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.diff__thumb { width: 48px; height: 36px; border-radius: 3px; object-fit: cover; vertical-align: middle; }
.diff__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px; }
.diff-del { background: rgba(192, 18, 47, .14); text-decoration: line-through; text-decoration-thickness: 1px; border-radius: 3px; padding: 0 2px; }
.diff-ins { background: rgba(31, 122, 77, .2); text-decoration: none; border-radius: 3px; padding: 0 2px; }
@media (max-width: 640px) { .diff { grid-template-columns: 1fr; gap: 4px; } .diff dd { margin-bottom: 10px; } }

/* Back-office : journal des erreurs du site (pages/admin/errors.php) */
.errlog { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.errlog__item { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px; }
.errlog--fatal { box-shadow: 0 0 0 1px var(--red), var(--shadow); }
.errlog__head { margin: 0 0 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .88rem; }
.errlog__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82rem; line-height: 1.45; color: var(--ink-2); }

/* ===================== Back-office : cadre (refonte du 2026-10-13, d'après GharKhoji) =====================
   Menu latéral bleu nuit groupé, barre du haut, contenu pleine largeur. Charte CWAY : pas de barre latérale colorée,
   l'entrée courante se dit par un fond et la couleur du texte. */
.adm { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; background: var(--paper); }
.adm__side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: #10233F; color: #C9D4E3; display: flex; flex-direction: column; padding: 14px 10px; gap: 6px; }
.adm__brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; color: #fff; text-decoration: none; font-family: var(--font-head); font-weight: 800; line-height: 1.15; }
.adm__brand small { display: block; font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #8FA3BE; }
.adm__nav { display: grid; gap: 2px; flex: 1; align-content: start; }
.adm__group { margin-top: 10px; }
.adm__group > summary { list-style: none; cursor: pointer; padding: 6px 10px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8FA3BE; display: flex; justify-content: space-between; align-items: center; border-radius: 6px; }
.adm__group > summary::-webkit-details-marker { display: none; }
.adm__group > summary::after { content: "▾"; font-size: .8rem; transition: transform .15s; }
.adm__group:not([open]) > summary::after { transform: rotate(-90deg); }
.adm__group > summary:hover { color: #fff; }
.adm__link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; color: #C9D4E3; text-decoration: none; font-weight: 600; font-size: .92rem; background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left; }
.adm__link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.adm__link[aria-current="page"] { background: rgba(255, 255, 255, .12); color: #fff; }
.adm__link[aria-current="page"] .ico { color: #FF8A9B; }
.adm__link:focus-visible, .adm__group > summary:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.adm__link .ico { flex: none; color: #8FA3BE; }
.adm__link span:first-of-type { flex: 1; }
.adm__count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--red); color: var(--on-red, #fff); font-size: .75rem; font-weight: 800; text-align: center; }
.adm__sidefoot { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 8px; display: grid; gap: 2px; }
.adm__sidefoot form { margin: 0; }
.adm__main { min-width: 0; display: flex; flex-direction: column; }
.adm__top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px clamp(16px, 3vw, 32px); background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.adm__title { margin: 0; font-size: 1.25rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm__topright { display: flex; align-items: center; gap: 14px; }
.adm__maint { display: flex; align-items: center; gap: 10px; margin: 0; }
.adm__me { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.adm__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #10233F; color: #fff; font-weight: 800; }
.adm__burger { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.adm__burger[hidden] { display: none; }
.adm__content { flex: 1; }
.adm__content .section { padding: 22px 0 48px; }
.adm__content .wrap { width: auto; max-width: 1280px; margin: 0; padding: 0 clamp(16px, 3vw, 32px); }
.adm__content .flashbar { padding: 16px clamp(16px, 3vw, 32px) 0; }
@media (min-width: 900px) { .adm__burger { display: none; } }
@media (max-width: 899px) {
  .adm { grid-template-columns: 1fr; }
  .adm__side { position: static; height: auto; }                       /* sans JavaScript : menu au-dessus */
  .adm-js .adm__side { position: fixed; inset: 0 auto 0 0; width: min(280px, 85vw); height: auto; z-index: 60; transform: translateX(-102%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
  .adm-nav-open .adm__side { transform: none; visibility: visible; transition-delay: 0s; }   /* fermé : hors du parcours clavier */
  .adm-nav-open .adm__main::before { content: ""; position: fixed; inset: 0; background: rgba(8, 14, 24, .5); z-index: 50; }
  .adm__mename { display: none; }
}
@media (prefers-reduced-motion: reduce) { .adm-js .adm__side { transition: none; } }

/* Back-office : tableau de bord (refonte du 2026-10-13) */
.dash { gap: 20px; }
.dash__state { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 0; padding: 12px 18px; border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 0 1px #2E8B57, var(--shadow); }
.dash__state--maint { box-shadow: 0 0 0 1px #C98A1A, var(--shadow); }
.dash__state p { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash__pulse { width: 10px; height: 10px; border-radius: 50%; background: #2E8B57; box-shadow: 0 0 0 4px rgba(46, 139, 87, .18); flex: none; }
.dash__state--maint .dash__pulse { background: #C98A1A; box-shadow: 0 0 0 4px rgba(201, 138, 26, .2); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.kpi:hover { box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(16, 35, 63, .12); }
.kpi:focus-visible { outline: 2px solid var(--focus, var(--site)); outline-offset: 2px; }
.kpi__ico { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--mist); color: var(--ink); }
.kpi__n { font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.kpi__label { font-size: .85rem; color: var(--ink-2); }
.kpi--todo { box-shadow: 0 0 0 1px var(--red), var(--shadow); }
.kpi--todo .kpi__ico { background: #FBE5E8; color: #8A0D22; }
.kpi--todo .kpi__n { color: var(--red); }
.kpi__ico--online { background: #E4F3EA; color: #1F5C3B; }
.cronsgrid { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cronsgrid__item { padding: 10px 12px; border-radius: var(--radius-s); background: var(--paper); }
.cronsgrid__item.health--bad { box-shadow: 0 0 0 1px var(--red); }
.cronsgrid__name { margin: 0 0 2px; font-weight: 700; display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.cronsgrid__item .note { margin: 0; font-size: .8rem; overflow-wrap: anywhere; }
/* Historique de la tâche quotidienne (admin/cron) */
.cronrun { margin-bottom: 14px; }
.cronrun__head { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cronrun__mails { margin-top: 12px; box-shadow: none; border: 1px solid var(--line); }
.cronsgrid__secs { margin-left: auto; font-weight: 400; font-size: .78rem; color: var(--ink-3); white-space: nowrap; }
.cronsgrid__secs.is-longest { font-weight: 700; color: var(--ink); }
.budget { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-variant-numeric: tabular-nums; }
.budget__bar { width: 90px; height: 10px; }   /* <meter> : couleurs natives vert / orange / rouge (low, high, optimum) */
.dash__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; align-items: start; }
.dash__h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.table--compact td, .table--compact th { padding: 8px 10px; font-size: .9rem; }
.decisions { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.decisions li { line-height: 1.5; font-size: .92rem; }
.decisions .note { font-size: .82rem; }
@media (max-width: 520px) { .dash__cols { grid-template-columns: 1fr; } .kpis { grid-template-columns: 1fr 1fr; } }

/* Statistiques des comptes (v1.17.0) : barres par jour, hauteur par classe bar--hN (N × 5 %) */
.periods { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.bars { list-style: none; margin: 12px 0 0; padding: 0; height: 120px; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); }
.bars__bar { flex: 1 1 0; min-width: 2px; background: var(--site); border-radius: 2px 2px 0 0; height: 0; }
.bars__axis { display: flex; justify-content: space-between; margin: 4px 0 0; font-size: .8rem; }
.bar--h1 { height: 5%; }
.bar--h2 { height: 10%; }
.bar--h3 { height: 15%; }
.bar--h4 { height: 20%; }
.bar--h5 { height: 25%; }
.bar--h6 { height: 30%; }
.bar--h7 { height: 35%; }
.bar--h8 { height: 40%; }
.bar--h9 { height: 45%; }
.bar--h10 { height: 50%; }
.bar--h11 { height: 55%; }
.bar--h12 { height: 60%; }
.bar--h13 { height: 65%; }
.bar--h14 { height: 70%; }
.bar--h15 { height: 75%; }
.bar--h16 { height: 80%; }
.bar--h17 { height: 85%; }
.bar--h18 { height: 90%; }
.bar--h19 { height: 95%; }
.bar--h20 { height: 100%; }
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.funnel li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 10px; align-items: baseline; }
.funnel progress { grid-column: 1 / -1; width: 100%; height: 10px; accent-color: var(--site); }
/* Back-office : avis en tableau, texte au survol (2026-10-13) */
.revtable td { vertical-align: top; }
.revtable__text { min-width: 200px; max-width: 320px; }
.revtip { position: relative; display: inline-block; cursor: pointer; border-bottom: 1px dotted var(--ink-3); }
.revtip:focus-visible { outline: 2px solid var(--focus, var(--site)); outline-offset: 2px; }
.revtip__pop { display: none; position: absolute; z-index: 31; left: 0; top: calc(100% + 6px); width: min(520px, 80vw); max-height: 60vh; overflow-y: auto; padding: 12px 14px; background: var(--surface); color: var(--ink); border-radius: var(--radius-s); box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(16, 35, 63, .22); font-weight: 400; }
.revtip:hover .revtip__pop, .revtip:focus .revtip__pop, .revtip:focus-within .revtip__pop { display: block; }
.revtip__pop p { margin: 0 0 8px; }
.actions--stack { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 150px; }
.actions--stack input { width: 100%; }
/* Bulle des avis (revue) : pont invisible entre le titre et la bulle, bulle vers le haut pour les dernières lignes, le tableau ne la coupe pas sur grand écran */
.revtip__pop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.revtable tbody tr:nth-last-child(-n+3):not(:nth-child(-n+3)) .revtip__pop { top: auto; bottom: calc(100% + 6px); }
.revtable tbody tr:nth-last-child(-n+3):not(:nth-child(-n+3)) .revtip__pop::before { top: auto; bottom: -10px; }
@media (min-width: 900px) { .table-wrap--pop { overflow: visible; } }
/* Liste des fiches (2026-10-13) : onglets avec compteurs, vignettes, remplissage */
.admtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.admtabs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .9rem; }
.admtabs a[aria-current="page"] { background: var(--site); color: var(--on-site); box-shadow: none; }
.admtabs__n { font-size: .78rem; padding: 0 7px; border-radius: 999px; background: var(--mist); color: var(--ink-2); }
.admtabs__n--todo { background: #FBE5E8; color: #8A0D22; }
.admtabs a[aria-current="page"] .admtabs__n { background: rgba(255,255,255,.22); color: inherit; }
.plist td { vertical-align: top; }
.plist__photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.plist__photo--none { display: grid; place-items: center; background: var(--mist); color: var(--ink-3); font-weight: 700; }
.plist__actions { min-width: 170px; }
.fill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.fill--ok { background: #E4F3EA; color: #1F5C3B; } .fill--mid { background: #FFF3DC; color: #7A4700; } .fill--low { background: #FBE5E8; color: #8A0D22; }
/* Réglages (2026-10-13) : sections, dernière modification, nombres, bouton d'enregistrement toujours visible */
.setform fieldset { border: 0; margin: 0 0 18px; scroll-margin-top: 80px; }
.setform legend { padding: 0; margin-bottom: 10px; }
.setform .h4 { margin: 18px 0 8px; font-size: 1rem; }
.setmeta { display: block; margin-top: 3px; font-size: .78rem; color: var(--ink-3); }
.setnum { display: inline-flex; align-items: center; gap: 8px; }
.setnum input { width: 6.5em; }
.setform__save { position: sticky; bottom: 0; z-index: 5; margin: 0; padding: 12px 0; background: linear-gradient(to top, var(--paper) 70%, transparent); }
/* Page « Pourquoi s'inscrire » (2026-10-14) */
.joincta { margin: 22px 0 0; }
.joingrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.joingrid .card h2 { margin-top: 0; }
.joingrid .card p { margin-bottom: 0; color: var(--ink-2); }
.joinsteps { margin: 0 0 22px; padding-left: 1.3em; display: grid; gap: 12px; }
.faq { display: grid; gap: 8px; }
.faq__item { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; }
.faq__item summary { cursor: pointer; font-family: var(--font-head); font-weight: 700; }
.faq__item p { margin: 8px 0 0; color: var(--ink-2); }
/* Remplissage de la fiche (2026-10-14) */
.fillbar { display: grid; gap: 6px; margin: 0 0 12px; font-family: var(--font-head); font-weight: 700; }
.fillbar progress { width: 100%; height: 10px; accent-color: var(--site); }

/* ===================== Refonte du design (2026-10-14, maquette validée par Vincent) =====================
   Bandeau photo, barre de recherche arrondie, cartes photo des types et des régions, « Comment ça marche »,
   fiche avec couverture, avatar qui chevauche, pastilles. Icônes au trait : sprite assets/img/icons.svg, icon() en PHP. */
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.icon--star { color: #C98A1A; width: 16px; height: 16px; }
.pcard__body .pcard__facts { margin: 2px 0 8px; }

/* Drapeau flottant de l'accueil (comme Visa Népal) : écrans larges seulement, dans la marge droite du bloc de 800 px */
.hero__flag { display: none; position: absolute; left: calc(100% + 24px); top: 48px; width: clamp(150px, 14vw, 220px); pointer-events: none; }
.hero__flag svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35)); }
@media (min-width: 1260px) { .hero__flag { display: block; } }
/* version canvas (assets/js/flag.js) : remplace le SVG, même cadre */
.hero__flag.is-live svg { display: none; }
.hero__flag canvas { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35)); }
@media (prefers-reduced-motion: reduce) {
  .hero__flag .flag__body { filter: none; }
  .hero__flag .flag__shade { display: none; }
}
/* Bandeau de l'accueil : photo + voile bleu nuit (texte lisible à gauche) */
.hero--photo { background: #0B1A30; min-height: clamp(520px, 62vw, 640px); display: flex; align-items: flex-end; }
.hero--photo > .wrap { position: relative; z-index: 2; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; }
.hero--photo::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(8, 18, 34, .86) 0%, rgba(8, 18, 34, .62) 48%, rgba(8, 18, 34, .12) 85%), linear-gradient(0deg, rgba(8, 18, 34, .6), transparent 55%); }
.hero--photo .hero__in { padding: clamp(56px, 8vw, 96px) 0 clamp(44px, 6vw, 64px); max-width: 760px; }
.hero--photo h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -.02em; }
.hero--photo .lead { color: rgba(255, 255, 255, .88); font-size: clamp(1rem, 1.6vw, 1.12rem); }
@media (max-width: 640px) { .hero--photo::after { background: linear-gradient(0deg, rgba(8, 18, 34, .92) 0%, rgba(8, 18, 34, .7) 60%, rgba(8, 18, 34, .45) 100%); } }
.hero__facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .92rem; color: #C5CDDC; }
.hero__facts li { display: inline-flex; align-items: center; gap: 7px; }
.hero__facts .icon { color: var(--hero-accent); width: 17px; height: 17px; }

/* Recherche : une seule barre arrondie (trek, langue, bouton) ; empilée sur téléphone */
.quicksearch { color-scheme: light; display: flex; align-items: center; gap: 4px; margin: 24px 0 22px; max-width: 680px; padding: 6px; background: #fff; color: #121A26; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.quicksearch label { display: flex; align-items: center; gap: 8px; padding-left: 14px; min-width: 0; }
.quicksearch__trek { flex: 1 1 auto; }
.quicksearch__lang { flex: 0 1 220px; border-left: 1px solid #D5DBE2; }
.quicksearch .icon { color: #5B6675; }
.quicksearch select { width: 100%; min-width: 0; font: inherit; font-size: 1rem; padding: 10px 6px; border: 0; background: transparent; color: #121A26; cursor: pointer; }
.quicksearch select:focus-visible { outline: 2px solid #A35C17; outline-offset: 2px; border-radius: 6px; }
.hero .quicksearch :focus-visible { outline-color: #A35C17; }   /* fond blanc : pas le safran clair du bandeau */
.quicksearch .btn { border-radius: 999px; flex: none; }
@media (max-width: 640px) {
  .quicksearch { flex-direction: column; align-items: stretch; border-radius: 18px; padding: 8px; gap: 2px; }
  .quicksearch__lang { flex: none; border-left: 0; border-top: 1px solid #D5DBE2; }
  .quicksearch .btn { justify-content: center; margin-top: 6px; }
}

/* En-tête de section : sur-titre + titre à gauche, lien « voir tout » à droite */
.sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 22px; }
.sechead .eyebrow { margin-bottom: 6px; }
.sechead .section__title { margin: 0; }
.sechead + .section__intro { margin-top: -10px; }
.seemore { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: .92rem; text-decoration: none; }
.seemore:hover { color: var(--site); box-shadow: var(--hover-shadow); }
.seemore .icon { width: 16px; height: 16px; }

/* Cartes photo (types de guides, régions) */
.photogrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.photogrid--types { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }   /* 3 cartes (trek, culturel, naturaliste) sur toute la largeur, 2026-10-16 */
.photogrid--regions { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.photocard { position: relative; display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; color: #fff; text-decoration: none; box-shadow: var(--shadow); background: #10233F; }
.photocard--square { aspect-ratio: 1 / 1.05; }
.photocard img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.photocard:hover img { transform: scale(1.04); }
.photocard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 18, 32, .86) 0%, rgba(8, 18, 32, .2) 55%, transparent); }
.photocard:hover { color: #fff; }
.photocard:focus-visible { outline: 3px solid var(--site); outline-offset: 3px; }
.photocard__txt { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: grid; gap: 2px; }
.photocard__title { font-family: var(--font-head); font-weight: 800; font-size: 1.12rem; line-height: 1.2; }
.photocard__sub { font-size: .84rem; color: rgba(255, 255, 255, .86); line-height: 1.35; }
.photocard__count { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .93); color: #121A26; font-family: var(--font-head); font-weight: 700; font-size: .76rem; }
.photonote { margin: 14px 0 0; font-size: .85rem; text-align: right; }
.photonote a { color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .photocard img { transition: none; } .photocard:hover img { transform: none; } }

/* Comment ça marche */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.step { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.step h3 { font-size: 1.1rem; margin-bottom: 4px; }
.step p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.step__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--site-soft); color: var(--site-ink); margin-bottom: 12px; }
.step__ico .icon { width: 22px; height: 22px; }

/* Appel aux guides : bloc bleu nuit, bouton rouge */
.proband { background: var(--night); color: #fff; box-shadow: none; }
.proband p { color: #C9D3DF; }
.proband .card__label { color: var(--hero-accent); }
.proband a:not(.btn) { color: #fff; }
.proband :focus-visible { outline-color: var(--hero-accent); }
.proband__cta { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 6px; }

/* Fiche : fil d'Ariane, couverture, en-tête, pastilles */
.crumbs { padding-top: 16px; padding-bottom: 12px; font-size: .88rem; color: var(--ink-3); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--site); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.cover { position: relative; height: clamp(200px, 32vw, 360px); border-radius: 18px; overflow: hidden; background: var(--mist); }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover__btn { position: absolute; right: 14px; bottom: 14px; z-index: 2; background: rgba(255, 255, 255, .95); color: #121A26; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.cover__btn:hover { background: #fff; color: #121A26; }
.phead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 22px; align-items: start; padding: 16px clamp(8px, 3vw, 32px) 0; position: relative; }
.phead__photo { width: 132px; height: 132px; margin-top: -82px; border-radius: 50%; object-fit: cover; border: 6px solid var(--paper); background: var(--surface); box-shadow: var(--shadow); }
.phead__photo--empty { display: grid; place-items: center; background: var(--site-soft); color: var(--site-ink); font-family: var(--font-head); font-size: 3rem; font-weight: 800; }
.phead__txt { min-width: 0; }
.phead__txt .eyebrow { margin-bottom: 6px; }
.phead h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; overflow-wrap: anywhere; min-width: 0; }
.phead .phead__check { width: 26px; height: 26px; }
.phead__lead { margin: 6px 0 0; color: var(--ink-2); font-size: 1.05rem; }
.phead__acts { padding-top: 4px; }
.phead__acts .btn[hidden] { display: none; }
@media (max-width: 720px) {
  .phead { grid-template-columns: 1fr; padding: 0 4px; }
  .phead__photo { width: 104px; height: 104px; margin-top: -56px; }
  .phead__acts { padding-top: 0; }
}
.pchips { list-style: none; margin: 18px 0 0; padding: 0 clamp(8px, 3vw, 32px); display: flex; flex-wrap: wrap; gap: 8px; }
.pchip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-size: .9rem; color: var(--ink-2); }
.pchip .icon { width: 16px; height: 16px; color: var(--site); }
.pchip .icon--star { color: #C98A1A; }
.pchip strong { color: var(--ink); }
.pchip--ok { background: #E4F3EA; color: #1F5C3B; box-shadow: none; }
.pchip--ok .icon { color: #1F7A4D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pchip--ok, :root:not([data-theme="light"]) .badge { background: #163224; color: #A7E3C0; } :root:not([data-theme="light"]) .pchip--ok .icon { color: #A7E3C0; } }
:root[data-theme="dark"] .pchip--ok, :root[data-theme="dark"] .badge { background: #163224; color: #A7E3C0; }
:root[data-theme="dark"] .pchip--ok .icon { color: #A7E3C0; }   /* thème choisi à la main : même rendu */
.section--profile { padding-top: 28px; }

/* Crédits des photos */
.creditlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.creditlist li { display: flex; gap: 14px; align-items: center; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; }
.creditlist img { width: 112px; height: 75px; object-fit: cover; border-radius: var(--radius-s); flex: none; }
.creditlist span { display: grid; gap: 4px; font-size: .92rem; }
.creditlist small { color: var(--ink-3); font-size: .84rem; }

/* Choix de la couverture (espace guide, Photos) : la photo entière avec les rectangles visibles (assets/js/cover.js) */
.coverpick__stage { position: relative; display: block; width: fit-content; max-width: 100%; justify-self: start; align-self: start; margin: 4px 0 12px; cursor: move; touch-action: none; border-radius: var(--radius-s); overflow: hidden; line-height: 0; }
.coverpick__stage:focus-visible { outline: 2px solid var(--site); outline-offset: 2px; }
.coverpick__img { max-width: 100%; max-height: min(460px, 60vh); display: block; user-select: none; }   /* téléphone : de la place pour faire défiler la page (touch-action: none sur la photo) */
/* Cadre « Partie visible » : le reste de la photo est grisé */
.coverpick__frame { position: absolute; box-sizing: border-box; pointer-events: none; line-height: 1.2; border: 3px solid #fff; border-radius: 4px; box-shadow: 0 0 0 9999px rgba(10, 16, 24, .55), 0 0 0 1px rgba(0,0,0,.35) inset; }
.coverpick__tag { position: absolute; top: 6px; left: 6px; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; background: #fff; color: #121A26; }

/* Point de cadrage des couvertures (migration 045, focus_class()) : object-position par pas de 10 %. Généré. */
.fp-0-0{object-position:0% 0%}.fp-0-10{object-position:0% 10%}.fp-0-20{object-position:0% 20%}.fp-0-30{object-position:0% 30%}.fp-0-40{object-position:0% 40%}.fp-0-50{object-position:0% 50%}.fp-0-60{object-position:0% 60%}.fp-0-70{object-position:0% 70%}.fp-0-80{object-position:0% 80%}.fp-0-90{object-position:0% 90%}.fp-0-100{object-position:0% 100%}
.fp-10-0{object-position:10% 0%}.fp-10-10{object-position:10% 10%}.fp-10-20{object-position:10% 20%}.fp-10-30{object-position:10% 30%}.fp-10-40{object-position:10% 40%}.fp-10-50{object-position:10% 50%}.fp-10-60{object-position:10% 60%}.fp-10-70{object-position:10% 70%}.fp-10-80{object-position:10% 80%}.fp-10-90{object-position:10% 90%}.fp-10-100{object-position:10% 100%}
.fp-20-0{object-position:20% 0%}.fp-20-10{object-position:20% 10%}.fp-20-20{object-position:20% 20%}.fp-20-30{object-position:20% 30%}.fp-20-40{object-position:20% 40%}.fp-20-50{object-position:20% 50%}.fp-20-60{object-position:20% 60%}.fp-20-70{object-position:20% 70%}.fp-20-80{object-position:20% 80%}.fp-20-90{object-position:20% 90%}.fp-20-100{object-position:20% 100%}
.fp-30-0{object-position:30% 0%}.fp-30-10{object-position:30% 10%}.fp-30-20{object-position:30% 20%}.fp-30-30{object-position:30% 30%}.fp-30-40{object-position:30% 40%}.fp-30-50{object-position:30% 50%}.fp-30-60{object-position:30% 60%}.fp-30-70{object-position:30% 70%}.fp-30-80{object-position:30% 80%}.fp-30-90{object-position:30% 90%}.fp-30-100{object-position:30% 100%}
.fp-40-0{object-position:40% 0%}.fp-40-10{object-position:40% 10%}.fp-40-20{object-position:40% 20%}.fp-40-30{object-position:40% 30%}.fp-40-40{object-position:40% 40%}.fp-40-50{object-position:40% 50%}.fp-40-60{object-position:40% 60%}.fp-40-70{object-position:40% 70%}.fp-40-80{object-position:40% 80%}.fp-40-90{object-position:40% 90%}.fp-40-100{object-position:40% 100%}
.fp-50-0{object-position:50% 0%}.fp-50-10{object-position:50% 10%}.fp-50-20{object-position:50% 20%}.fp-50-30{object-position:50% 30%}.fp-50-40{object-position:50% 40%}.fp-50-50{object-position:50% 50%}.fp-50-60{object-position:50% 60%}.fp-50-70{object-position:50% 70%}.fp-50-80{object-position:50% 80%}.fp-50-90{object-position:50% 90%}.fp-50-100{object-position:50% 100%}
.fp-60-0{object-position:60% 0%}.fp-60-10{object-position:60% 10%}.fp-60-20{object-position:60% 20%}.fp-60-30{object-position:60% 30%}.fp-60-40{object-position:60% 40%}.fp-60-50{object-position:60% 50%}.fp-60-60{object-position:60% 60%}.fp-60-70{object-position:60% 70%}.fp-60-80{object-position:60% 80%}.fp-60-90{object-position:60% 90%}.fp-60-100{object-position:60% 100%}
.fp-70-0{object-position:70% 0%}.fp-70-10{object-position:70% 10%}.fp-70-20{object-position:70% 20%}.fp-70-30{object-position:70% 30%}.fp-70-40{object-position:70% 40%}.fp-70-50{object-position:70% 50%}.fp-70-60{object-position:70% 60%}.fp-70-70{object-position:70% 70%}.fp-70-80{object-position:70% 80%}.fp-70-90{object-position:70% 90%}.fp-70-100{object-position:70% 100%}
.fp-80-0{object-position:80% 0%}.fp-80-10{object-position:80% 10%}.fp-80-20{object-position:80% 20%}.fp-80-30{object-position:80% 30%}.fp-80-40{object-position:80% 40%}.fp-80-50{object-position:80% 50%}.fp-80-60{object-position:80% 60%}.fp-80-70{object-position:80% 70%}.fp-80-80{object-position:80% 80%}.fp-80-90{object-position:80% 90%}.fp-80-100{object-position:80% 100%}
.fp-90-0{object-position:90% 0%}.fp-90-10{object-position:90% 10%}.fp-90-20{object-position:90% 20%}.fp-90-30{object-position:90% 30%}.fp-90-40{object-position:90% 40%}.fp-90-50{object-position:90% 50%}.fp-90-60{object-position:90% 60%}.fp-90-70{object-position:90% 70%}.fp-90-80{object-position:90% 80%}.fp-90-90{object-position:90% 90%}.fp-90-100{object-position:90% 100%}
.fp-100-0{object-position:100% 0%}.fp-100-10{object-position:100% 10%}.fp-100-20{object-position:100% 20%}.fp-100-30{object-position:100% 30%}.fp-100-40{object-position:100% 40%}.fp-100-50{object-position:100% 50%}.fp-100-60{object-position:100% 60%}.fp-100-70{object-position:100% 70%}.fp-100-80{object-position:100% 80%}.fp-100-90{object-position:100% 90%}.fp-100-100{object-position:100% 100%}

/* Galerie de l'espace guide (2026-10-15, modèle GharKhoji) : vignettes 4:3, poignée ⠿ (glisser), ★ couverture, × supprimer,
   légende sous la vignette ; zone de dépôt. Sans JavaScript : boutons Enregistrer / Ajouter et flèches visibles. */
.gal { list-style: none; padding: 0; margin: 4px 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.gal__item { display: grid; gap: 6px; align-content: start; min-width: 0; }
.gal__media { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--mist); border: 1px solid var(--line); }
.gal__media img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.gal__media form { margin: 0; }
.gal__handle, .gal__star, .gal__del { position: absolute; top: 6px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 8px; background: rgba(10, 16, 24, .6); color: #fff; cursor: pointer; transition: background .15s, color .15s; }
.gal__handle { left: 6px; cursor: grab; touch-action: none; }
.gal__handle:active { cursor: grabbing; }
.gal__star { right: 40px; font-size: 15px; line-height: 1; }
.gal__star[aria-pressed="true"] { background: #F5B04A; color: #121A26; }
.gal__del { right: 6px; border-radius: 50%; }
.gal__del:hover { background: rgba(192, 18, 47, .9); }
.gal__handle:hover, .gal__star:hover { background: rgba(10, 16, 24, .82); }
.gal__star[aria-pressed="true"]:hover { background: #F5B04A; }
.gal__handle:focus-visible, .gal__star:focus-visible, .gal__del:focus-visible { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 4px var(--site); }
.gal__badge { position: absolute; left: 6px; bottom: 6px; padding: 1px 7px; border-radius: 6px; background: #F5B04A; color: #121A26;
  font-size: .72rem; font-weight: 700; pointer-events: none; display: none; }
.gal__item.is-cover .gal__badge { display: block; }
.gal__item.is-cover .gal__media { box-shadow: 0 0 0 2px #F5B04A; }
.gal__item.is-dragging { opacity: .45; }
.gal__item.is-uploading .gal__media::after, .gal__item.is-busy .gal__media::after { content: ''; position: absolute; inset: 0;
  background: rgba(255, 255, 255, .55) no-repeat center / 28px; animation: galpulse 1s ease-in-out infinite alternate; }
.gal__item.is-uploading .gal__handle, .gal__item.is-uploading .gal__star, .gal__item.is-uploading .gal__del, .gal__item.is-uploading .gal__caption { visibility: hidden; }
@keyframes galpulse { from { opacity: .35; } to { opacity: .75; } }
.gal__caption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.gal__caption input { flex: 1 1 100%; min-width: 0; font-size: .85rem; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); }
.gal__caption input:hover { border-color: var(--line); }
.gal__caption input:focus { border-color: var(--site); background: var(--surface); outline: none; }
.gal__status { font-size: .75rem; color: #2E8B57; min-height: 1em; }
.is-js .gal__capsave, .is-js .gal__dropsubmit { display: none; }
.gal__moves { display: flex; gap: 6px; flex-wrap: wrap; }
.gal__error { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #FBE5E8; color: #8A0D22; font-size: .9rem; }
.gal__error[hidden], .gal[hidden], .gal__drop[hidden], .gal__handle[hidden], .coverpick[hidden], .coverpick__none[hidden] { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gal__error { background: #3A1A20; color: #F7B3BE; } :root:not([data-theme="light"]) .gal__status { color: #A7E3C0; } }
:root[data-theme="dark"] .gal__error { background: #3A1A20; color: #F7B3BE; }
:root[data-theme="dark"] .gal__status { color: #A7E3C0; }
.gal__drop { display: grid; gap: 10px; margin: 0; }
.gal__dropzone { position: relative; display: grid; justify-items: center; gap: 4px; padding: 26px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--line); border-radius: 12px; color: var(--ink-3); transition: border-color .15s, background .15s, color .15s; }
.gal__dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gal__dropzone:hover, .gal__dropzone.is-over, .gal__dropzone:focus-within { border-color: var(--site); color: var(--site); background: var(--site-soft); }
.gal__dropzone.is-over { border-style: solid; }
.gal__droptitle { font-weight: 700; color: var(--ink); }

/* Réglages en lecture seule (rôles du back-office, v1.58.0) : un seul fieldset autour de tout le formulaire */
.setform .setform__all { padding: 0; margin: 0; min-width: 0; }

/* Listes déroulantes aux couleurs du site (v1.62.0, reprises de Buddies ; assets/js/selects.js) — ordinateur seulement.
   Le bouton prend l'allure de la liste qu'il remplace : case de formulaire, filtre de la recherche, barre de l'accueil,
   niveau d'une langue. */
.nsel { position: relative; display: block; min-width: 0; }
.langrow .nsel { display: inline-block; }
.quicksearch .nsel { display: flex; width: 100%; }
.nsel__native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.nsel__btn { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 0 22px 0 0; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; position: relative; }
.nsel__btn::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid currentColor;
  border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: .7; transition: transform .15s; }
.nsel.is-open .nsel__btn::after { transform: rotate(-135deg); margin-top: -2px; }
.nsel__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Case de formulaire et filtres de la recherche : même cadre que les champs voisins */
.field .nsel__btn, .dir__filters .nsel__btn { color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-s); padding: 0 36px 0 12px; }
.field .nsel__btn { height: 46px; }
.dir__filters .nsel__btn { min-height: 42px; padding-left: 10px; }
.field .nsel__btn::after, .dir__filters .nsel__btn::after { right: 15px; }
.field .nsel__btn:focus-visible, .dir__filters .nsel__btn:focus-visible, .field .nsel.is-open .nsel__btn, .dir__filters .nsel.is-open .nsel__btn {
  outline: none; border-color: var(--site); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site) 25%, transparent); }
.field.has-error .nsel__btn { border-color: var(--red); }
.field .nsel__btn:disabled, .dir__filters .nsel__btn:disabled { background: var(--mist); color: var(--ink-2); }
/* Niveau d'une langue (fiche du guide) : petite case */
.langrow .nsel__btn { font-size: .9rem; padding: 4px 24px 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); }
.langrow .nsel__btn::after { right: 9px; width: 6px; height: 6px; margin-top: -5px; }
.langrow .nsel__btn:focus-visible { outline: 2px solid var(--site); outline-offset: 1px; }
/* Barre de recherche de l'accueil (fond blanc dans les deux thèmes) */
.quicksearch .nsel__btn { padding: 10px 26px 10px 6px; color: #121A26; }
.quicksearch .nsel__btn:focus-visible { outline: none; }
.quicksearch label:has(.nsel__btn:focus-visible) { border-radius: 999px; outline: 2px solid #A35C17; outline-offset: -2px; }
.nsel__btn:disabled { cursor: default; opacity: .6; }
/* La liste : position fixe calée par le script (jamais rognée par un bloc qui masque ce qui dépasse) */
.nsel__list { position: fixed; z-index: 45; min-width: 220px; max-width: min(360px, 90vw); max-height: 320px;
  overflow: auto; padding: 6px; background: var(--surface); color: var(--ink); border-radius: 14px; box-shadow: var(--hover-shadow); outline: none;
  font-size: .95rem; font-weight: 400; text-align: left; overscroll-behavior: contain; }
.nsel__search { position: sticky; top: -6px; z-index: 1; display: block; width: 100%; margin: -6px 0 6px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; box-shadow: 0 -6px 0 var(--surface); }
.nsel__search:focus { outline: none; border-color: var(--site); }
.nsel__empty { padding: 9px 12px; color: var(--ink-3); }
.nsel__opt[hidden] { display: none; }
.nsel__opt { position: relative; padding: 9px 34px 9px 12px; border-radius: 9px; cursor: pointer; line-height: 1.35; }
.nsel__opt.is-active { background: var(--site-soft); }
.nsel__list.is-kbd .nsel__opt.is-active { box-shadow: inset 0 0 0 1.5px var(--site); }   /* choix atteint au clavier : liseré en plus (relecture v1.62.0) */
.nsel__opt.is-selected { color: var(--site-ink); font-weight: 700; }
.nsel__opt.is-selected::after { content: ""; position: absolute; right: 14px; top: 50%; width: 5px; height: 10px; margin-top: -7px;
  border: solid var(--site); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nsel__opt--all { color: var(--ink-2); }
.nsel__opt.is-disabled { color: var(--ink-3); cursor: default; }
.nsel__group { padding: 10px 12px 4px; font: 700 .7rem var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.nsel__group:first-child { padding-top: 4px; }

/* « Une idée, un bug ? » (v1.66.0) : choix du type en pastilles, bulle flottante (ordinateur seulement), back-office */
.fbkinds { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fbkinds legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.fbkind { position: relative; cursor: pointer; }
.fbkind input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fbkind span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 600; }
.fbkind:hover span { border-color: var(--site); }
.fbkind input:checked + span { border-color: var(--site); background: var(--site-soft); color: var(--site-ink); }
.fbkind input:focus-visible + span { outline: 2px solid var(--site); outline-offset: 2px; }
.fbkinds .field__err { flex-basis: 100%; }
.account__feedback { margin: 8px 0 0; }
.fbbubble { display: none; }
@media (min-width: 960px) and (pointer: fine) {
  .fbbubble { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 20px; bottom: 20px; z-index: 40;
    padding: 10px 14px; border-radius: 999px; background: var(--night); color: #F4F6F8; font-weight: 700; font-size: .92rem;
    text-decoration: none; box-shadow: var(--hover-shadow); }
  .fbbubble:hover, .fbbubble:focus-visible { background: var(--site); color: var(--on-site); text-decoration: none; }
  .fbbubble__txt { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .25s ease; }
  .fbbubble:hover .fbbubble__txt, .fbbubble:focus-visible .fbbubble__txt { max-width: 200px; }
}
/* Mode sombre : --night se confondrait avec le fond de page (revue du 2026-10-23) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fbbubble { background: var(--surface); box-shadow: 0 0 0 1.5px var(--site), var(--hover-shadow); } }
:root[data-theme="dark"] .fbbubble { background: var(--surface); box-shadow: 0 0 0 1.5px var(--site), var(--hover-shadow); }
@media print { .fbbubble { display: none !important; } }
.fbcard { gap: 10px; }
.fbcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fbcard__body { white-space: normal; color: var(--ink) !important; margin: 0; }
.fbcard__shot img { max-width: min(100%, 480px); max-height: 320px; border: 1px solid var(--line); border-radius: var(--radius-s); }
.fbcard__ctx { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: .92rem; }
.fbcard__ctx dt { font-weight: 700; color: var(--ink-2); }
.fbcard__ctx dd { margin: 0; overflow-wrap: anywhere; }
.fbcard__form { border-top: 1px solid var(--line); padding-top: 12px; gap: 10px; }
.fbcard__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.fbcard__note { flex: 1 1 260px; }
.fbcard__notify summary { cursor: pointer; font-weight: 600; color: var(--link); }
.fbcard__notify[open] { display: grid; gap: 8px; }

/* Calendrier des disponibilités (v1.67.0) : 12 mini-mois, jours pris barrés ; sur téléphone 4 mois (2 × 2) puis « Voir toute l'année » */
.cal__months { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px 14px; }
.cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .74rem; }
.cal__grid caption { font: 700 .88rem var(--font-head); text-align: left; padding-bottom: 6px; color: var(--ink); }
.cal__grid th { font-weight: 600; color: var(--ink-3); padding: 2px 0 4px; font-size: .72rem; }
.cal__grid td { text-align: center; padding: 0; height: 22px; font-variant-numeric: tabular-nums; }
.cal__grid td.is-free { background: #E4F3EA; color: #1F5C3B; }
.cal__grid td.is-busy { background: var(--mist); color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1.5px; box-shadow: inset 0 0 0 1px var(--ink-3); }
.cal__grid td.is-past { color: var(--ink-3); opacity: .55; }
.cal__grid td.is-today { outline: 2px solid var(--site); outline-offset: -2px; font-weight: 700; }
.cal__grid td.is-free, .cal__grid td.is-busy { border: 1.5px solid var(--surface); border-radius: 5px; }
.cal__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 0 0; font-size: .88rem; color: var(--ink-2); }
.cal__key { display: inline-block; width: 16px; height: 16px; border-radius: 4px; vertical-align: middle; }
.cal__key--free { background: #E4F3EA; }
.cal__key--busy { background: var(--mist); box-shadow: inset 0 0 0 1px var(--ink-3); margin-left: 10px; }
.cal__more { display: none; margin-top: 12px; }
@media (max-width: 959px) {
  .cal.is-collapsed .cal__month:nth-child(n+5) { display: none; }
  .cal.is-collapsed .cal__more:not([hidden]) { display: inline-flex; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cal__grid td.is-free, :root:not([data-theme="light"]) .cal__key--free { background: #1E3A2B; color: #9FD8B5; } }
:root[data-theme="dark"] .cal__grid td.is-free, :root[data-theme="dark"] .cal__key--free { background: #1E3A2B; color: #9FD8B5; }
/* Grille cliquable de l'onglet « Disponibilités » (v1.70.0) : le jour est un bouton qui remplit sa case */
.cal--pick .cal__grid td { height: 30px; }
.cal__day { all: unset; box-sizing: border-box; display: block; width: 100%; height: 100%; text-align: center; cursor: pointer; border-radius: 4px; }
.cal__day:hover { box-shadow: inset 0 0 0 2px var(--site); }
.cal__day:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* :root en tête : passe devant les règles du mode sombre de td.is-free (sinon la sélection reste verte, invisible) */
:root .cal__grid td.is-sel.is-sel.is-sel { background: var(--site); color: var(--on-site); text-decoration: none; box-shadow: none; }
.calvis .btn[hidden] { display: none; }
.calbar { position: sticky; bottom: 0; z-index: 5; margin-top: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); }
.calbar__label { margin: 0 0 8px; font-weight: 600; }
.calbar__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.calbar__form .field { flex: 1 1 100%; margin: 0; }
#calendar { scroll-margin-top: 90px; }   /* retour après un ajout : le titre sous les onglets collés en haut */
.calbar__form[hidden], .calbar[hidden], .calbar__form .field[hidden] { display: none; }
.calvis { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 6px 0 4px; }
.calform { gap: 10px; }
.calform__row { display: flex; flex-wrap: wrap; gap: 12px; }
.calform__row .field { flex: 1 1 180px; }
.calperiods { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.calperiods li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); }

/* « Mes emails » (v1.68.0) : une case par catégorie, avec sa description */
.emailprefs { gap: 12px; }
.emailpref { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); cursor: pointer; }
.emailpref input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--site); }
.emailpref span { display: grid; gap: 3px; }
.emailpref small { color: var(--ink-2); font-size: .9rem; }
.emailpref .emailpref__warn { color: #7A4700; }
.emailpref:has(input:checked) { border-color: var(--site); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .emailpref .emailpref__warn { color: #F0C987; } }
:root[data-theme="dark"] .emailpref .emailpref__warn { color: #F0C987; }

/* Newsletters (v1.68.0) : aperçus côte à côte, actions, progression */
.nlpreview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.emailpref:has(input:focus-visible) { outline: 2px solid var(--site); outline-offset: 2px; }
.nlpreview figure { margin: 0; display: grid; gap: 6px; }
.nlpreview iframe { width: 100%; height: 620px; border: 1px solid var(--line); border-radius: var(--radius-s); background: #F4F6F8; }
.nlactions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.nlprogress { width: 100%; height: 12px; accent-color: var(--site); }

/* Recherche en direct (v1.69.0, assets/js/directory.js) : résultats estompés pendant le chargement */
.dir__results { transition: opacity .15s ease; }
.dir__results.is-loading { pointer-events: none; }   /* estompage : voir plus bas (après 150 ms) */
@media (prefers-reduced-motion: reduce) { .dir__results { transition: none; } }
/* Recherche en direct, revue 2 (accessibilité) : bouton masqué sur ordinateur (résultats déjà à côté), focus visible
   quand il est sur le titre des résultats (titre caché à l'écran), état « mise à jour » du bouton, estompage seulement si la réponse tarde */
@media (min-width: 980px) { .dir__filters.is-live .dir__submit button { display: none; } }
.dir__bar:focus-within { outline: 2px solid var(--site); outline-offset: 4px; border-radius: var(--radius-s); }
.dir__submit button.is-loading { opacity: .7; }
.dir__results.is-loading { opacity: .6; transition-delay: .15s; }