/* ===========================================================
   Site public (accueil, /fonctionnalites et pages fonctionnalité)
   Feuille autonome : ces pages ne chargent pas app.css.
   Même palette et mêmes polices que l'application ; les deux
   couleurs d'appui sont celles du logo.
   =========================================================== */

:root {
  --ws-bg: #f7f1e8;
  --ws-card: #fffdf9;
  --ws-soft: #f3ebdf;
  --ws-border: #e9dfd2;
  --ws-border2: #e2d5c2;
  --ws-ink: #2b2622;
  --ws-text: #4f463d;
  --ws-muted: #6f6355;
  --ws-accent: #f37442;
  /* Boutons d'action : l'orange du logo, assombri pour porter un texte blanc
     lisible (contraste 4,6:1). Une seule couleur pour l'action principale,
     de l'en-tête au bandeau de fin de page. */
  --ws-cta: #cc4a14;
  --ws-cta-hover: #b03d0e;
  --ws-deep: #0b6262;
  --ws-rust: #a8502e;
  --ws-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --ws-body: 'Albert Sans', 'Segoe UI', system-ui, sans-serif;
  --ws-head-h: 82px;
}

/* Teintes des familles (pictogrammes, pastilles, numéros). */
.t-peach  { --t-bg: #fdf0e8; --t-fg: #a8502e; }
.t-green  { --t-bg: #e9efe9; --t-fg: #344c3e; }
.t-yellow { --t-bg: #f5ecd8; --t-fg: #6b5320; }
.t-purple { --t-bg: #efe7f0; --t-fg: #5b3f63; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ws-head-h) + 12px); }
body.ws {
  margin: 0; background: var(--ws-soft); color: var(--ws-ink);
  font-family: var(--ws-body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--ws-display); font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }
svg { flex: none; }
:focus-visible { outline: 3px solid var(--ws-deep); outline-offset: 2px; border-radius: 6px; }

.ws-page { display: block; background: var(--ws-bg); }
.ws-wrap { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.ws-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--ws-ink); color: var(--ws-card); border-radius: 0 0 10px 0; }
.ws-skip:focus { left: 0; }

/* ---------- Boutons et liens ---------- */
.ws-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 20px; border: 0; border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.ws-btn:active { transform: translateY(1px); }
.ws-btn-lg { min-height: 56px; padding: 0 28px; border-radius: 15px; font-size: 17px; }
/* Action principale (essayer, envoyer) : pleine, orange. */
.ws-btn-accent { background: var(--ws-cta); color: #fff; box-shadow: 0 12px 22px -14px rgba(204, 74, 20, 0.95); }
.ws-btn-accent:hover { background: var(--ws-cta-hover); box-shadow: 0 14px 26px -14px rgba(176, 61, 14, 1); }
/* Action secondaire (nous contacter) : contour, couleur de la marque. */
.ws-btn-line { background: transparent; color: var(--ws-deep); box-shadow: inset 0 0 0 2px var(--ws-deep); }
.ws-btn-line:hover { background: rgba(11, 98, 98, 0.08); }
/* Accès à l'application (compte connecté). */
.ws-btn-deep { background: var(--ws-deep); color: var(--ws-card); }
.ws-btn-deep:hover { background: #094f4f; }
.ws-arrow { width: 18px; height: 18px; }
.ws-textlink {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600;
  text-decoration: underline; text-decoration-color: #c9b9a3; text-underline-offset: 4px;
}
.ws-textlink:hover { text-decoration-color: currentColor; }
.ws-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 16px; font-weight: 700; color: var(--ws-rust); text-decoration: underline; text-underline-offset: 4px;
}
.ws-more:hover { color: #7e3520; }
.ws-more .ws-arrow { width: 16px; height: 16px; }

/* ---------- Pictogrammes, pastilles, coches ---------- */
.ws-ico {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--t-bg); color: var(--t-fg);
}
.ws-ico svg { width: 18px; height: 18px; }
.ws-ico-lg { width: 44px; height: 44px; border-radius: 13px; }
.ws-ico-lg svg { width: 20px; height: 20px; }
.ws-pill {
  flex: none; display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; line-height: 1.4; white-space: nowrap;
  background: var(--t-bg); color: var(--t-fg);
}
.ws-tick { width: 22px; height: 22px; margin-top: 1px; }
.ws-tick circle { fill: #e9efe9; }
.ws-tick path { stroke: #344c3e; }
.ws-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ws-deep); }
.ws-eyebrow-ico { display: flex; align-items: center; gap: 12px; color: var(--t-fg); }
.ws-eyebrow-ico .ws-ico { width: 40px; height: 40px; border-radius: 12px; }
.ws-num { font-family: var(--ws-display); font-size: 15px; font-weight: 700; color: var(--t-fg); }
.ws-lead { max-width: 580px; font-size: 19px; line-height: 1.55; color: var(--ws-text); text-wrap: pretty; }

/* ===========================================================
   En-tête et méga-menu
   =========================================================== */
.ws-head { position: sticky; top: 0; z-index: 40; background: var(--ws-bg); border-bottom: 1px solid transparent; }
.ws-head.is-stuck { border-bottom-color: var(--ws-border); }
.ws-bar { display: flex; align-items: center; gap: 12px 20px; min-height: var(--ws-head-h); padding: 18px 0; }
.ws-logo { flex: none; display: flex; align-items: center; min-height: 46px; text-decoration: none; }
.ws-logo img { display: block; height: 46px; width: auto; }
.ws-logo-txt { font-family: var(--ws-display); font-size: 26px; font-weight: 700; color: var(--ws-deep); }

.ws-burger {
  display: none; margin-left: auto; width: 48px; height: 48px; padding: 0; place-items: center;
  border: 1px solid var(--ws-border2); border-radius: 13px; background: var(--ws-card); color: var(--ws-ink); cursor: pointer;
}
.ws-burger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ws-burger-close, .ws-head.is-nav .ws-burger-open { display: none; }
.ws-head.is-nav .ws-burger-close { display: block; }

.ws-nav { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-left: 20px; }
.ws-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.ws-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 10px;
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ws-link:hover, .ws-head.is-mega .ws-mega-btn { background: var(--ws-soft); }
.ws-link[aria-current="page"] { color: var(--ws-rust); }
.ws-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.ws-head.is-mega .ws-mega-btn .ws-chev { transform: rotate(180deg); }
.ws-actions { display: flex; align-items: center; gap: 10px; }

.ws-mega {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - var(--ws-head-h)); overflow-y: auto;
  background: var(--ws-card); border-top: 1px solid var(--ws-border);
  box-shadow: 0 40px 60px -36px rgba(43, 38, 34, 0.5);
}
.ws-head.is-mega .ws-mega { display: block; }
.ws-mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 36px; padding: 30px 0 24px; }
.ws-group { min-width: 0; }
.ws-group-title { padding-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-fg); }
.ws-group-toggle { display: none; }
.ws-group-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-item { display: flex; align-items: center; gap: 12px; margin: 0 -10px; padding: 8px 10px; border-radius: 12px; text-decoration: none; }
.ws-item:hover, .ws-item[aria-current="page"] { background: var(--ws-bg); }
.ws-item-txt { min-width: 0; }
.ws-item-t { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.ws-item-d { display: block; font-size: 13px; line-height: 1.35; color: var(--ws-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-mega-foot { background: var(--ws-bg); border-top: 1px solid var(--ws-border); border-bottom: 1px solid var(--ws-border2); }
.ws-mega-foot .ws-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding: 6px 0; font-size: 14.5px; color: var(--ws-text); }
.ws-mega-foot .ws-more { font-size: 15px; text-decoration: none; }

.ws-dim { display: none; position: fixed; inset: 0; z-index: 30; background: rgba(43, 38, 34, 0.3); }
.ws-dim.is-on { display: block; }

/* Sélecteur de langue (en-tête et pied de page). */
.ws-langs { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--ws-soft); }
.ws-langs a { display: grid; place-items: center; min-width: 38px; min-height: 36px; padding: 0 6px; border-radius: 8px; text-decoration: none; }
.ws-langs a:hover { background: rgba(255, 253, 249, 0.7); }
.ws-langs a[aria-current] { background: var(--ws-card); box-shadow: 0 1px 2px rgba(43, 38, 34, 0.14); }
/* Drapeau d'une langue : le dessin vient de flag_svg(), le nom de la langue est dans aria-label. */
.ws-flag { display: block; flex: none; width: 24px; height: 16px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(43, 38, 34, 0.16); }
.ws-flag svg { display: block; width: 100%; height: 100%; }

/* Sous 1120 px (largeur qu’il faut aux quatre entrées, aux drapeaux et aux deux
   boutons dans la langue la plus longue) : bouton ☰, menu en accordéon.
   Même seuil dans site.js et dans le style « noscript » de layout_site.php. */
@media (max-width: 1120px) {
  .ws-burger { display: grid; }
  .ws-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    max-height: calc(100vh - var(--ws-head-h)); max-height: calc(100dvh - var(--ws-head-h)); overflow-y: auto;
    padding: 4px 20px 24px; background: var(--ws-card);
    border-top: 1px solid var(--ws-border); border-bottom: 1px solid var(--ws-border2);
    box-shadow: 0 30px 40px -30px rgba(43, 38, 34, 0.5);
  }
  .ws-head.is-nav .ws-nav { display: flex; }
  .ws-links { flex-direction: column; align-items: stretch; gap: 0; }
  .ws-mega-btn { display: none; }
  .ws-mega, .ws-head.is-mega .ws-mega { display: block; position: static; max-height: none; overflow: visible; border: 0; box-shadow: none; background: none; }
  .ws-mega .ws-wrap { width: auto; }
  .ws-mega-grid { display: block; padding: 0; }
  .ws-group { border-bottom: 1px solid var(--ws-soft); }
  .ws-group-title { display: none; }
  .ws-group-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 56px; padding: 0; border: 0; background: none; color: var(--ws-ink);
    font-family: var(--ws-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; text-align: left; cursor: pointer;
  }
  .ws-group-name { display: flex; align-items: center; gap: 12px; }
  .ws-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--t-fg); }
  .ws-group-toggle .ws-chev { width: 16px; height: 16px; }
  .ws-group.is-open .ws-group-toggle .ws-chev { transform: rotate(180deg); }
  .ws-group-list { display: none; padding-bottom: 10px; }
  .ws-group.is-open .ws-group-list { display: flex; }
  .ws-item { margin: 0; min-height: 48px; padding: 3px 0; }
  .ws-item:hover, .ws-item[aria-current="page"] { background: none; }
  .ws-item[aria-current="page"] .ws-item-t { color: var(--ws-rust); }
  .ws-item .ws-ico { width: 36px; height: 36px; }
  .ws-item-t { font-size: 16px; font-weight: 600; }
  .ws-item-d, .ws-mega-foot span { display: none; }
  .ws-mega-foot { background: none; border: 0; }
  .ws-mega-foot .ws-wrap { padding: 0; }
  .ws-mega-foot .ws-more { min-height: 54px; font-size: 16px; }
  .ws-links > li > .ws-link { min-height: 54px; padding: 0; font-size: 16px; }
  .ws-links > li > .ws-link:hover { background: none; }
  .ws-actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .ws-langs { align-self: flex-start; margin: 6px 0; }
  .ws-langs a { min-width: 44px; min-height: 44px; }
  .ws-actions .ws-link { min-height: 54px; padding: 0; font-size: 16px; }
  .ws-actions .ws-link:hover { background: none; }
  .ws-actions .ws-btn { min-height: 54px; border-radius: 14px; font-size: 16px; }
  .ws-dim { display: none !important; }
}

/* ===========================================================
   Accroche (accueil et pages fonctionnalité)
   =========================================================== */
.ws-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; padding: 32px 0 104px; }
.ws-hero-txt { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ws-hero h1 { font-size: clamp(40px, 5vw, 70px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.ws-hero h1 span { color: var(--ws-deep); }
.ws-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 8px; }
.ws-hero-note { font-size: 14.5px; color: var(--ws-muted); }
.ws-hero-feature { gap: 56px 64px; padding: 20px 0 96px; }
.ws-hero-feature .ws-hero-txt { flex-basis: 460px; gap: 22px; }
.ws-hero-feature h1 { font-size: clamp(34px, 4.1vw, 58px); line-height: 1.05; letter-spacing: -0.028em; }

/* Écran dessiné de l'accueil (données d'exemple). */
.ws-shot { flex: 1 1 480px; min-width: 0; margin: 0; position: relative; }
.ws-app { display: flex; overflow: hidden; background: var(--ws-card); border: 1px solid var(--ws-border2); border-radius: 22px; box-shadow: 0 34px 70px -34px rgba(43, 38, 34, 0.45); }
.ws-app-side { flex: 0 1 172px; min-width: 0; overflow: hidden; white-space: nowrap; display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; border-right: 1px solid var(--ws-border); }
.ws-app-brand { display: flex; align-items: center; gap: 9px; padding: 0 6px 6px; font-family: var(--ws-display); font-size: 13px; font-weight: 700; line-height: 1.15; }
.ws-app-logo { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fdf0e8; color: var(--ws-rust); }
.ws-app-sec { padding: 10px 10px 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ws-muted); }
.ws-app-nav { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--ws-muted); }
.ws-app-nav svg { width: 15px; height: 15px; }
.ws-app-nav.is-on { background: #fdf0e8; color: var(--ws-rust); font-weight: 700; }
.ws-app-main { flex: 1 0 270px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 22px; background: var(--ws-bg); }
.ws-app-h { display: flex; align-items: baseline; gap: 10px; }
.ws-app-h b { font-family: var(--ws-display); font-size: 21px; letter-spacing: -0.01em; }
.ws-app-h span { font-size: 12.5px; color: var(--ws-muted); }
.ws-list { background: var(--ws-card); border: 1px solid var(--ws-border); border-radius: 16px; }
.ws-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.ws-row + .ws-row { border-top: 1px solid var(--ws-soft); }
.ws-ava { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--t-bg); color: var(--t-fg); font-size: 15px; font-weight: 700; }
.ws-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ws-row-txt b { font-size: 14px; }
.ws-row-txt small { font-size: 12px; color: var(--ws-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.ws-tile { flex: 1 1 110px; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; background: var(--ws-card); border: 1px solid var(--ws-border); border-radius: 14px; font-size: 12px; color: var(--ws-muted); }
.ws-tile small { font-size: 11.5px; }
.ws-tile-row { display: flex; justify-content: space-between; align-items: baseline; }
.ws-tile-row b { color: var(--ws-ink); }
.ws-meter { height: 7px; overflow: hidden; border-radius: 4px; background: var(--ws-soft); }
.ws-meter span { display: block; height: 100%; border-radius: 4px; background: var(--ws-deep); }
.ws-tile-deep { gap: 0; background: var(--ws-deep); border-color: var(--ws-deep); color: #d5e6e3; }
.ws-tile-deep b { font-family: var(--ws-display); font-size: 24px; line-height: 1.15; color: var(--ws-card); }
.ws-note { position: absolute; display: flex; align-items: center; gap: 12px; max-width: 262px; padding: 12px 16px 13px; background: var(--ws-card); border: 1px solid var(--ws-border2); border-radius: 16px; box-shadow: 0 18px 36px -18px rgba(43, 38, 34, 0.45); }
.ws-note .ws-ico { width: 36px; height: 36px; }
.ws-note small { display: block; font-size: 11.5px; font-weight: 700; color: var(--t-fg); }
.ws-note b { display: block; font-size: 13.5px; }
.ws-note-top { right: -14px; top: -24px; }
.ws-note-bottom { left: -14px; bottom: -36px; }

/* ===========================================================
   Bandeaux « en bref », sections, panneaux des fonctionnalités
   =========================================================== */
.ws-facts { background: var(--ws-card); border-block: 1px solid var(--ws-border); }
.ws-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 28px 40px; padding: 38px 0; }
.ws-facts-grid b { display: block; margin-bottom: 6px; font-family: var(--ws-display); font-size: 22px; letter-spacing: -0.01em; }
.ws-facts-grid p { font-size: 15px; color: var(--ws-muted); }
.ws-points { list-style: none; margin-block: 0; padding: 34px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px 32px; }
.ws-points li, .ws-ticks li { display: flex; align-items: flex-start; gap: 12px; }
.ws-points li { font-weight: 600; line-height: 1.4; }

.ws-section { display: flex; flex-direction: column; gap: 56px; padding: 104px 0 40px; }
.ws-section-first { padding: 24px 0 8px; }
.ws-section-tight { gap: 40px; padding: 96px 0 0; }
.ws-section-head { display: flex; flex-direction: column; gap: 18px; }
.ws-section-head h2, .ws-h1-hub { max-width: 860px; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.ws-section-head .ws-lead { max-width: 700px; font-size: 18px; }
.ws-h2 { max-width: 780px; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }

.ws-panels { display: flex; flex-direction: column; gap: 20px; }
.ws-panel { display: flex; flex-wrap: wrap; gap: 32px 40px; padding: 40px; background: var(--ws-card); border: 1px solid var(--ws-border); border-radius: 26px; }
.ws-panel-head { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ws-panel-title { font-size: 28px; line-height: 1.1; }
.ws-panel-head p { font-size: 15px; color: var(--ws-muted); }
.ws-panel-grid { flex: 999 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 36px 32px; }
.ws-feat { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ws-feat .ws-ico { margin-bottom: 6px; }
.ws-feat-title { font-size: 18px; line-height: 1.25; letter-spacing: -0.015em; }
.ws-feat-title a { display: inline-block; margin: -10px 0; padding: 10px 0; text-decoration: underline; text-decoration-color: #d9cdbd; text-underline-offset: 4px; }
.ws-feat-title a:hover { color: var(--ws-rust); text-decoration-color: currentColor; }
.ws-feat p { font-size: 15px; color: var(--ws-muted); }

/* ===========================================================
   Zooms de l'accueil (adoptions, registre, dons) et écrans dessinés
   =========================================================== */
.ws-spot { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; padding: 104px 0; }
.ws-spot-rev { flex-direction: row-reverse; }
.ws-spot-txt { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ws-spot-txt h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.ws-spot-txt .ws-lead { max-width: none; font-size: 17px; line-height: 1.6; }
.ws-ticks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ws-spot-fig { flex: 1 1 420px; min-width: 0; margin: 0; }
.ws-spot-fig-wide { flex: 1.25 1 460px; }

.ws-deep { background: var(--ws-deep); color: var(--ws-card); }
.ws-deep .ws-eyebrow { color: #f9c9ae; }
.ws-deep .ws-lead { color: #d5e6e3; }
.ws-deep .ws-more, .ws-deep .ws-more:hover { color: var(--ws-card); }
.ws-deep .ws-tick circle { fill: rgba(255, 253, 249, 0.16); }
.ws-deep .ws-tick path { stroke: var(--ws-card); }
.ws-deep :focus-visible { outline-color: var(--ws-card); }

.ws-mock { display: flex; flex-direction: column; gap: 16px; padding: 24px 26px; background: var(--ws-card); color: var(--ws-ink); border: 1px solid var(--ws-border2); border-radius: 22px; box-shadow: 0 34px 70px -38px rgba(43, 38, 34, 0.45); }
.ws-deep .ws-mock { border-color: transparent; box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.55); }
.ws-mock-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ws-mock-head small { font-size: 13px; color: var(--ws-muted); }
.ws-mock-title { display: block; font-family: var(--ws-display); font-size: 20px; letter-spacing: -0.01em; }
.ws-mock .ws-over { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ws-muted); }

.ws-steps { list-style: none; margin: 0; padding: 0; }
.ws-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 11px 0; border-top: 1px solid var(--ws-soft); }
.ws-step-dot { flex: none; width: 22px; height: 22px; border: 2px solid #c9b9a3; border-radius: 50%; }
.ws-step-t { flex: 1 1 140px; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--ws-muted); }
.ws-step-m { margin-left: auto; font-size: 12.5px; color: var(--ws-muted); white-space: nowrap; }
.ws-steps .is-done .ws-step-t, .ws-steps .is-now .ws-step-t { color: var(--ws-ink); }
.ws-steps .is-done .ws-step-dot {
  border-color: var(--ws-deep);
  background: var(--ws-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.4l3 3L15 6.8' fill='none' stroke='%23fffdf9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.ws-steps .is-now { margin: 0 -12px; padding: 11px 12px; border-top-color: transparent; border-radius: 12px; background: #fdf0e8; }
.ws-steps .is-now + li { border-top-color: transparent; }
.ws-steps .is-now .ws-step-dot { border-color: var(--ws-rust); background: var(--ws-rust); box-shadow: inset 0 0 0 4px var(--ws-card); }
.ws-steps .is-now .ws-step-t { font-weight: 700; }
.ws-steps .is-now .ws-step-m { font-weight: 700; color: var(--ws-rust); }

.ws-vote { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: var(--ws-bg); border-radius: 16px; }
.ws-vote-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: 13px; color: var(--ws-text); }
.ws-vote-row b { font-size: 14.5px; color: var(--ws-ink); }
.ws-vote-bar { display: flex; gap: 3px; height: 12px; }
.ws-vote-bar span { border-radius: 2px; }
.ws-vote-bar .v-yes { background: var(--ws-deep); border-radius: 6px 2px 2px 6px; }
.ws-vote-bar .v-no { background: var(--ws-accent); }
.ws-vote-bar .v-abs { background: #d9cdbd; border-radius: 2px 6px 6px 2px; }

.ws-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-tabs span { padding: 6px 13px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ws-muted); }
.ws-tabs .is-on { background: #fdf0e8; color: var(--ws-rust); font-weight: 700; }
.ws-scroll { overflow-x: auto; }
.ws-table { width: 100%; min-width: 500px; border-collapse: collapse; font-size: 13.5px; text-align: left; }
.ws-table th { padding: 8px 10px; border-bottom: 1px solid var(--ws-border); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ws-muted); }
.ws-table td { padding: 12px 10px; border-bottom: 1px solid var(--ws-soft); color: var(--ws-text); }
.ws-table td b { color: var(--ws-ink); }
.ws-table .ws-dimmed { color: var(--ws-muted); }
.ws-table tr:last-child td { padding-bottom: 4px; border-bottom: 0; }
.ws-table th:first-child, .ws-table td:first-child { padding-left: 0; white-space: nowrap; }
.ws-table th:last-child, .ws-table td:last-child { padding-right: 0; }

.ws-stack { display: flex; flex-direction: column; }
.ws-mock-flat { gap: 4px; padding: 20px 22px 38px; border-color: var(--ws-border); border-radius: 20px; box-shadow: none; }
.ws-mock-flat .ws-mock-title { margin-bottom: 6px; font-size: 18px; }
.ws-mock-flat .ws-row { padding: 10px 0; border-top: 1px solid var(--ws-soft); }
.ws-amount { font-size: 14px; white-space: nowrap; }
.ws-receipt { align-self: flex-end; width: min(100%, 440px); margin-top: -22px; }
.ws-receipt-num { display: block; font-family: var(--ws-display); font-size: 24px; letter-spacing: -0.01em; }
.ws-receipt-law { font-size: 13px; color: var(--ws-muted); }
.ws-receipt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 14px 20px; margin: 0; padding: 16px 0; border-block: 1px solid var(--ws-soft); }
.ws-receipt-grid dt { font-size: 12px; color: var(--ws-muted); }
.ws-receipt-grid dd { margin: 0; font-size: 15px; font-weight: 700; }
.ws-receipt-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-fake-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--ws-border2); border-radius: 11px; font-size: 14px; font-weight: 600; }
.ws-fake-btn.is-deep { background: var(--ws-deep); border-color: var(--ws-deep); color: var(--ws-card); font-weight: 700; }

/* Aperçu d'écran d'une page fonctionnalité. */
.ws-preview { gap: 0; padding: 22px 24px 10px; }
.ws-preview .ws-mock-head { padding-bottom: 14px; }
.ws-preview .ws-row { gap: 14px; padding: 14px 0; border-top: 1px solid var(--ws-soft); }
.ws-preview .ws-ico { width: 40px; height: 40px; border-radius: 12px; }
.ws-preview .ws-row-txt b { font-size: 15px; }
.ws-preview .ws-row-txt small { font-size: 13px; }
.ws-preview .ws-pill { padding: 4px 11px; font-size: 12px; }

/* ===========================================================
   Sécurité, pages fonctionnalité, appel final, pied de page
   =========================================================== */
.ws-secu { background: var(--ws-soft); border-top: 1px solid var(--ws-border); }
.ws-secu > .ws-wrap { display: flex; flex-direction: column; gap: 48px; padding: 96px 0; }
.ws-secu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 36px 32px; }
.ws-secu-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ws-secu-grid .ws-ico { margin-bottom: 6px; background: var(--ws-card); color: var(--ws-deep); }
.ws-secu-grid h3 { font-size: 18px; line-height: 1.25; letter-spacing: -0.015em; }
.ws-secu-grid p { font-size: 15px; color: #5f5448; }

.ws-crumbs { padding-top: 4px; }
.ws-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 14px; color: var(--ws-muted); }
.ws-crumbs li { display: inline-flex; align-items: center; min-height: 32px; }
.ws-crumbs li + li::before { content: "/"; margin-right: 10px; color: #b9a78f; }
.ws-crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: #c9b9a3; text-underline-offset: 3px; }
.ws-crumbs a:hover { color: var(--ws-ink); }
.ws-crumbs [aria-current] { font-weight: 700; color: var(--ws-ink); }

.ws-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.ws-block { display: flex; flex-direction: column; gap: 12px; padding: 30px 30px 32px; background: var(--ws-card); border: 1px solid var(--ws-border); border-radius: 22px; }
.ws-block h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; }
.ws-block p { line-height: 1.55; color: #5f5448; text-wrap: pretty; }

.ws-faq { width: min(820px, calc(100% - 40px)); display: flex; flex-direction: column; gap: 20px; padding-top: 96px; }
.ws-faq-list { border-bottom: 1px solid var(--ws-border2); }
.ws-faq details { border-top: 1px solid var(--ws-border2); }
.ws-faq summary { padding: 18px 0; font-family: var(--ws-display); font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; cursor: pointer; }
.ws-faq summary:hover { color: var(--ws-rust); }
.ws-faq details p { max-width: 720px; padding-bottom: 22px; font-size: 16.5px; line-height: 1.6; color: var(--ws-text); text-wrap: pretty; }

.ws-related { gap: 28px; padding-bottom: 8px; }
.ws-rel { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; background: var(--ws-card); border: 1px solid var(--ws-border); border-radius: 20px; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.ws-rel:hover { border-color: #c9b9a3; transform: translateY(-2px); }
.ws-rel-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ws-rel-txt b { font-family: var(--ws-display); font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.ws-rel-txt span { font-size: 15px; line-height: 1.45; color: var(--ws-muted); }
.ws-rel .ws-arrow { margin-top: 4px; color: var(--ws-rust); }

/* Sans bandeau final (essai fermé et aucune adresse de contact, ou page
   d'essai) : la page garde sa marge basse. */
.ws-no-cta .ws-page > :last-child:not(.ws-secu) { padding-bottom: 104px; }

.ws-cta-band { padding: 96px 0; background: var(--ws-bg); }
.ws-cta { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: clamp(36px, 6vw, 84px); background: var(--ws-ink); color: var(--ws-card); border-radius: 32px; }
.ws-cta-deco { position: absolute; right: -40px; bottom: -70px; width: 340px; height: 340px; fill: var(--ws-accent); opacity: 0.22; }
.ws-cta h2 { position: relative; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.03em; }
.ws-cta p { position: relative; max-width: 600px; font-size: 18px; line-height: 1.55; text-wrap: pretty; color: #e6dccd; }
.ws-cta-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 8px; }
.ws-cta .ws-btn-accent { box-shadow: none; }
.ws-cta-mail { font-weight: 600; }
.ws-cta-mail a { text-underline-offset: 3px; overflow-wrap: anywhere; }
.ws-cta :focus-visible { outline-color: var(--ws-card); }

.ws-foot { background: var(--ws-soft); border-top: 1px solid var(--ws-border); }
.ws-foot > .ws-wrap { display: flex; flex-direction: column; gap: 40px; padding: 56px 0 36px; }
.ws-foot-top { display: flex; flex-wrap: wrap; gap: 40px 56px; }
.ws-foot-brand { flex: 1 1 230px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ws-foot-brand .ws-logo img { height: 40px; }
.ws-foot-brand p { max-width: 300px; font-size: 15px; color: #5f5448; }
.ws-foot-login { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--ws-rust); text-underline-offset: 4px; }
.ws-foot-nav { flex: 999 1 640px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 28px; }
.ws-foot-title { padding-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5f5448; }
.ws-foot-nav ul { list-style: none; margin: 0; padding: 0; }
.ws-foot-nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; text-decoration: none; }
.ws-foot-nav a:hover { color: var(--ws-rust); text-decoration: underline; }
.ws-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; border-top: 1px solid var(--ws-border2); font-size: 14px; color: #5f5448; }

/* ---------- Petits écrans ---------- */
@media (max-width: 700px) {
  .ws-hero { gap: 76px; padding: 16px 0 88px; }
  .ws-hero-feature { gap: 40px; padding: 8px 0 64px; }
  .ws-lead { font-size: 17.5px; }
  /* Écran dessiné : la barre latérale se réduit à ses pictogrammes, et la
     vignette du haut se pose au-dessus de la fenêtre au lieu de couvrir son titre. */
  .ws-app-side { flex: 0 0 52px; padding: 16px 8px; }
  .ws-app-brand { justify-content: center; padding: 0 0 8px; font-size: 0; gap: 0; }
  .ws-app-logo { font-size: 13px; }
  .ws-app-sec { display: none; }
  .ws-app-nav { justify-content: center; gap: 0; padding: 9px 0; font-size: 0; }
  .ws-app-main { flex-basis: 220px; padding: 18px 14px 20px; }
  .ws-note-top { right: -6px; top: -48px; }
  .ws-note-bottom { left: -6px; }
  .ws-section { gap: 40px; padding-top: 72px; }
  .ws-section-first { padding-top: 12px; }
  .ws-section-tight, .ws-faq { padding-top: 72px; }
  .ws-spot { padding: 72px 0; }
  .ws-secu > .ws-wrap { padding: 72px 0; }
  .ws-cta-band { padding: 72px 0; }
  .ws-panel { padding: 28px 22px; border-radius: 22px; }
  .ws-block { padding: 26px 22px 28px; }
  .ws-mock { padding: 20px; }
  .ws-foot-nav a { min-height: 44px; }
  .ws-btn-lg { white-space: normal; text-align: center; }
}

/* ===========================================================
   Illustrations des pages fonctionnalité (app/views/site/visual/)
   Briques communes d'abord, puis ce qui est propre à une page.
   =========================================================== */
.ws-fig figcaption { margin-top: 12px; font-size: 12.5px; color: var(--ws-muted); text-align: right; }
.ws-mock small { color: var(--ws-muted); }
.ws-mock-title-sm { font-size: 17px; }
.ws-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ws-who small { display: block; font-size: 13px; }
.ws-ava-lg { width: 48px; height: 48px; border-radius: 15px; font-size: 18px; }
.ws-under { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ws-muted); }
.ws-note-line { font-size: 14px; line-height: 1.5; color: var(--ws-text); }
.ws-rows .ws-row { padding: 10px 0; }
.ws-rows .ws-row + .ws-row, .ws-fam + .ws-fam { border-top: 1px solid var(--ws-soft); }
.ws-row-wrap small { white-space: normal; }
.ws-sub-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--ws-bg); border-radius: 14px; }
.ws-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.ws-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: 13.5px; }
.ws-line b { font-size: 13.5px; }
.ws-line > span:last-child { color: var(--ws-text); }
.ws-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ws-chip { padding: 5px 11px; border: 1px solid var(--ws-border2); border-radius: 20px; background: var(--ws-card); font-size: 12.5px; font-weight: 600; color: var(--ws-text); }
.ws-chip.is-on { border-color: var(--ws-deep); background: var(--ws-deep); color: var(--ws-card); }
.ws-chip-on { border-color: transparent; background: #e9efe9; color: #344c3e; }
.ws-chip-drag { border-style: dashed; cursor: grab; }
.ws-hint { font-size: 12px; }
.ws-btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-fake-sm { min-height: 32px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; }
.ws-checkline { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ws-text); }
.ws-checkline svg { width: 14px; height: 14px; color: var(--ws-muted); }
.ws-checkline small { margin-left: auto; font-size: 12px; }
.ws-checkbox { flex: none; width: 17px; height: 17px; border: 1.5px solid #c9b9a3; border-radius: 5px; background: var(--ws-card); }
.ws-checkbox.is-on {
  border-color: var(--ws-deep);
  background: var(--ws-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.4l3 3L15 6.8' fill='none' stroke='%23fffdf9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.ws-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 14px; border: 1px solid #f0d9c9; border-radius: 12px; background: #fdf0e8; font-size: 13px; color: #7e3520; }
.ws-banner-col { flex-direction: column; align-items: flex-start; gap: 2px; }
.ws-banner .ws-fake-btn { background: var(--ws-card); color: var(--ws-ink); }
.ws-input { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--ws-border2); border-radius: 10px; background: var(--ws-card); font-size: 13.5px; color: var(--ws-ink); }
.ws-input svg { width: 14px; height: 14px; color: var(--ws-muted); }
.ws-input-sm { color: var(--ws-text); }
.ws-input-area { display: block; margin: 0; padding: 10px 12px; line-height: 1.5; }
.ws-fields { display: flex; flex-direction: column; gap: 8px; }
.ws-field { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; }
.ws-field small { font-size: 12.5px; }
.ws-field-inline { grid-template-columns: auto minmax(0, 200px); }
.ws-table-sm { min-width: 380px; }
.ws-table .ws-cell-end { text-align: right; }
.ws-yes { width: 20px; height: 20px; }
.ws-yes circle { fill: #e9efe9; }
.ws-yes path { fill: none; stroke: #344c3e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ws-no { display: inline-block; width: 14px; height: 2px; border-radius: 1px; background: #c9b9a3; vertical-align: middle; }
.ws-bars { display: flex; flex-direction: column; gap: 10px; }
.ws-hbar { display: grid; grid-template-columns: minmax(90px, 0.9fr) minmax(0, 2fr) auto; align-items: center; gap: 10px; font-size: 13px; color: var(--ws-text); }
.ws-hbar b { font-size: 13px; color: var(--ws-ink); white-space: nowrap; }
.ws-bar-track { height: 10px; overflow: hidden; border-radius: 5px; background: var(--ws-soft); }
.ws-sub-card .ws-bar-track { background: #ebe1d3; }
.ws-bar-track i { display: block; height: 100%; border-radius: 5px; }
.ws-bar-track .v-yes { background: var(--ws-deep); }
.ws-bar-track .v-no { background: var(--ws-accent); }
.ws-bar-track .v-abs { background: #b9a78f; }
.ws-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ws-text); }
.ws-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Fiche animal : indicateurs, courbe de poids. */
.ws-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.ws-kpis > div { padding: 10px 12px; border: 1px solid var(--ws-border); border-radius: 12px; }
.ws-kpis small { display: block; font-size: 11.5px; }
.ws-kpis b { font-size: 14.5px; }
.ws-spark { width: 100%; max-width: 180px; height: 44px; }
.ws-spark polyline { fill: none; stroke: var(--ws-deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ws-spark circle { fill: var(--ws-deep); }

/* Hébergement : les box d'un secteur. */
.ws-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.ws-box { display: flex; flex-direction: column; gap: 6px; min-height: 84px; padding: 10px 12px; border: 1px solid var(--ws-border2); border-radius: 13px; }
.ws-box small { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; }
.ws-box.is-free { border-style: dashed; background: var(--ws-bg); }
.ws-occ { align-self: flex-start; padding: 3px 10px; border-radius: 20px; background: #fdf0e8; font-size: 12.5px; font-weight: 700; color: var(--ws-rust); }
.ws-free { font-size: 12.5px; color: var(--ws-muted); }

/* Rapatriements : le trajet et ses escales. */
.ws-route { list-style: none; display: flex; margin: 4px 0; padding: 0; }
.ws-route li { position: relative; flex: 1; min-width: 0; padding-top: 22px; text-align: center; }
.ws-route li::before { content: ""; position: absolute; top: 3px; left: 50%; z-index: 1; width: 12px; height: 12px; margin-left: -6px; border: 3px solid var(--ws-deep); border-radius: 50%; background: var(--ws-card); }
.ws-route li.is-start::before { background: var(--ws-deep); }
.ws-route li + li::after { content: ""; position: absolute; top: 8px; right: 50%; width: 100%; height: 2px; background: var(--ws-deep); }
.ws-route b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.ws-route small { display: block; font-size: 11.5px; }

/* Familles d'accueil : les places d'une famille. */
.ws-fam { display: flex; flex-direction: column; gap: 9px; padding: 12px 0; }
.ws-fam-top { display: flex; align-items: center; gap: 12px; }
.ws-seats { display: flex; gap: 4px; }
.ws-seats i { width: 11px; height: 11px; border: 2px solid var(--ws-deep); border-radius: 50%; }
.ws-seats .is-used { background: var(--ws-deep); }

/* Planning : la semaine en sept colonnes. */
.ws-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; min-width: 440px; }
.ws-day { display: flex; flex-direction: column; gap: 5px; min-height: 150px; padding: 8px 4px; border-radius: 11px; background: var(--ws-bg); }
.ws-day.is-today { box-shadow: inset 0 0 0 2px var(--ws-deep); }
.ws-day-name { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
.ws-slot { display: flex; flex-direction: column; gap: 1px; padding: 6px 5px; border-radius: 8px; background: var(--t-bg); color: var(--t-fg); font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.ws-slot small { font-size: 10px; color: inherit; }
.ws-slot b { font-size: 11px; }
.ws-slot.is-open { border: 1.5px dashed var(--ws-accent); background: var(--ws-card); color: var(--ws-rust); }

/* Carte : fond de carte, zone de recherche, personnes. */
.ws-searchbar { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-searchbar .ws-input:first-child { flex: 1 1 140px; }
.ws-map-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 16px; }
.ws-map { display: block; width: 100%; height: auto; }
.ws-map-land { fill: #f3ebdf; stroke: #c9b9a3; stroke-width: 3; stroke-linejoin: round; }
.ws-map-zone { fill: rgba(11, 98, 98, 0.12); stroke: var(--ws-deep); stroke-width: 3; stroke-dasharray: 10 8; }
.ws-map-center { fill: var(--ws-ink); stroke: var(--ws-card); stroke-width: 3; }
.ws-pin { stroke: var(--ws-card); stroke-width: 3; }
.ws-pin.is-adopter, .ws-dot-key.is-adopter { fill: #2a72b5; background: #2a72b5; }
.ws-pin.is-volunteer, .ws-dot-key.is-volunteer { fill: #0e8a66; background: #0e8a66; }
.ws-pin.is-foster, .ws-dot-key.is-foster { fill: #d9642a; background: #d9642a; }
.ws-dot-key { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.ws-map-side { display: flex; flex-direction: column; gap: 8px; }
.ws-near { display: flex; align-items: center; gap: 10px; }
.ws-km { font-size: 13px; color: var(--ws-rust); white-space: nowrap; }

/* Discussions : canaux et fil. */
.ws-chat { flex-direction: row; gap: 0; padding: 0; overflow: hidden; }
.ws-chat-side { flex: 0 0 122px; display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; border-right: 1px solid var(--ws-border); background: var(--ws-bg); }
.ws-chan { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 9px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--ws-muted); }
.ws-chan.is-on { background: #fdf0e8; color: var(--ws-rust); font-weight: 700; }
.ws-chan i { min-width: 18px; padding: 1px 5px; border-radius: 10px; background: var(--ws-rust); font-size: 11px; font-style: normal; font-weight: 700; color: var(--ws-card); text-align: center; }
.ws-chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.ws-chat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ws-soft); }
.ws-chat-head small { font-size: 12px; }
.ws-msg { display: flex; align-items: flex-start; gap: 10px; }
.ws-msg small { font-size: 12px; }
.ws-msg small b { color: var(--ws-ink); }
.ws-msg p { font-size: 14px; line-height: 1.45; }
.ws-msg mark { padding: 1px 5px; border-radius: 6px; background: #e9efe9; font-weight: 700; color: #344c3e; }
.ws-chat-new { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; color: var(--ws-rust); }
.ws-chat-new::before, .ws-chat-new::after { content: ""; flex: 1; height: 1px; background: #f0d9c9; }
.ws-chat-input { display: flex; color: var(--ws-muted); }

/* Vote : bulletins. */
.ws-ballot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; }
.ws-ballot > span:last-child:not(.ws-pill) { flex: 1 1 100%; color: var(--ws-text); }

/* Signature : le document et le paraphe. */
.ws-paper { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border: 1px solid var(--ws-border); border-radius: 14px; }
.ws-paper-title { font-family: var(--ws-display); font-size: 17px; letter-spacing: -0.01em; }
.ws-paper p { font-size: 13.5px; line-height: 1.5; color: var(--ws-text); }
.ws-sign { align-self: flex-end; text-align: center; }
.ws-sign svg { display: block; width: 190px; height: 56px; border-bottom: 1px solid #c9b9a3; }
.ws-sign path { fill: none; stroke: #1c3f66; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Page publique : la page vue par un visiteur. */
.ws-browser { gap: 0; padding: 0; overflow: hidden; }
.ws-browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--ws-border); background: var(--ws-soft); }
.ws-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d9cdbd; }
.ws-browser-bar span { flex: 1; min-width: 0; margin-left: 8px; padding: 4px 12px; border-radius: 8px; background: var(--ws-card); font-size: 12px; color: var(--ws-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-browser-body { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; background: var(--ws-bg); }
.ws-pets { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.ws-pet { display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--ws-border); border-radius: 14px; background: var(--ws-card); }
.ws-pet b { font-size: 14px; }
.ws-pet small { font-size: 11.5px; line-height: 1.35; }
.ws-pet-photo { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 5px; border-radius: 10px; background: repeating-linear-gradient(135deg, var(--t-bg) 0 8px, var(--ws-card) 8px 16px); font-family: var(--ws-display); font-size: 24px; font-weight: 700; color: var(--t-fg); }

/* Rôles : la grille des droits. */
.ws-matrix { min-width: 420px; }
.ws-matrix th[scope="row"] { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--ws-soft); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ws-ink); }
.ws-matrix th[scope="col"], .ws-matrix td { text-align: center; }
.ws-matrix tr:last-child th { border-bottom: 0; }

/* Statistiques : indicateurs et graphique. */
.ws-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ws-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--ws-border); border-radius: 14px; }
.ws-stat small { font-size: 12px; }
.ws-stat b { font-family: var(--ws-display); font-size: 26px; line-height: 1.15; }
.ws-stat.is-deep { border-color: var(--ws-deep); background: var(--ws-deep); color: var(--ws-card); }
.ws-stat.is-deep small { color: #d5e6e3; }
.ws-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.ws-key { width: 10px; height: 10px; border-radius: 3px; }
.ws-key.is-in, .ws-chart-bars .is-in { background: var(--ws-deep); }
.ws-key.is-out, .ws-chart-bars .is-out { background: var(--ws-accent); }
.ws-chart { display: flex; align-items: flex-end; gap: 8px; height: 132px; padding-top: 6px; }
.ws-chart-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.ws-chart-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; border-bottom: 1px solid #d9cdbd; }
.ws-chart-bars i { width: min(14px, 38%); border-radius: 4px 4px 0 0; }
.ws-chart-col small { font-size: 11px; }

/* Connexions : les services reliés. */
.ws-conns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 10px; }
.ws-conn { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--ws-border2); border-radius: 14px; }
.ws-conn-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ws-conn b { font-size: 15px; }
.ws-conn small { font-size: 12.5px; }
.ws-conn-last { color: var(--ws-text) !important; }
.ws-conn.is-add { align-items: center; justify-content: center; border-style: dashed; background: var(--ws-bg); text-align: center; }
.ws-plus { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ws-deep); font-size: 20px; font-weight: 700; line-height: 1; color: var(--ws-card); }

/* ===========================================================
   Page fonctionnalité : précisions, encart de demande
   =========================================================== */
.ws-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 28px 40px; margin: 0; }
.ws-details dt { display: flex; align-items: flex-start; gap: 10px; font-family: var(--ws-display); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.ws-details dd { margin: 6px 0 0 32px; font-size: 15.5px; line-height: 1.55; color: var(--ws-muted); }
.ws-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(26px, 4vw, 44px); border-radius: 26px; background: var(--ws-deep); color: var(--ws-card); }
.ws-ask > div { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ws-ask h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.02em; }
.ws-ask p { max-width: 620px; font-size: 16.5px; line-height: 1.55; color: #d5e6e3; }
.ws-ask .ws-btn-deep { background: var(--ws-card); color: var(--ws-ink); }
.ws-ask .ws-btn-deep:hover { background: var(--ws-soft); }
.ws-ask :focus-visible { outline-color: var(--ws-card); }

/* ===========================================================
   Tarifs
   =========================================================== */
/* Deux encarts, sans grille de prix : l'essai gratuit, la version pro sur demande. */
.ws-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; max-width: 940px; }
.ws-plan { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3.4vw, 38px); background: var(--ws-card); border: 1px solid var(--ws-border); border-radius: 26px; }
.ws-plan.is-main { border-color: var(--ws-border2); box-shadow: 0 34px 70px -40px rgba(43, 38, 34, 0.45); }
.ws-plan h2 { font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ws-rust); }
.ws-price { display: flex; flex-direction: column; gap: 4px; }
.ws-price b { font-family: var(--ws-display); font-size: clamp(38px, 4.2vw, 50px); line-height: 1.05; letter-spacing: -0.025em; }
.ws-price span { font-size: 16px; color: var(--ws-muted); }
.ws-plan .ws-ticks { margin: 8px 0 14px; }
/* Pied d'encart de même hauteur des deux côtés : les deux boutons restent alignés,
   que l'adresse de contact s'affiche sous le second ou non. */
.ws-plan-cta { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
@media (min-width: 701px) { .ws-plan-cta { min-height: 90px; } }
.ws-plan .ws-btn { white-space: normal; text-align: center; }
.ws-plan-mail { font-size: 14.5px; color: var(--ws-muted); text-align: center; overflow-wrap: anywhere; }
.ws-plan-mail a { text-underline-offset: 3px; }

/* ===========================================================
   Essai gratuit
   =========================================================== */
.ws-trial { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 72px; padding: 24px 0 8px; }
.ws-trial-txt { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.ws-trial h1 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.06; letter-spacing: -0.028em; text-wrap: balance; }
.ws-next { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; padding-top: 26px; border-top: 1px solid var(--ws-border2); }
.ws-next h2 { font-size: 22px; }
.ws-next ol { list-style: none; counter-reset: etape; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
.ws-next li { counter-increment: etape; position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 44px; }
.ws-next li::before { content: counter(etape); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e9efe9; font-family: var(--ws-display); font-size: 15px; font-weight: 700; color: #344c3e; }
.ws-next li span { font-size: 15px; color: var(--ws-muted); }
.ws-trial-form { flex: 1 1 400px; min-width: 0; }
.ws-form { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3.4vw, 36px); background: var(--ws-card); border: 1px solid var(--ws-border2); border-radius: 26px; box-shadow: 0 34px 70px -40px rgba(43, 38, 34, 0.45); }
.ws-form h2 { font-size: 26px; }
.ws-form-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 16px; }
.ws-form-field { display: flex; flex-direction: column; gap: 6px; }
.ws-form-field label { font-size: 14.5px; font-weight: 600; }
.ws-form-field label small { font-weight: 400; color: var(--ws-muted); }
.ws-form-field > small { font-size: 13px; color: var(--ws-muted); }
.ws-form-field input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #c9b9a3; border-radius: 12px; background: #fff; font: inherit; color: var(--ws-ink); }
.ws-form-field input:focus-visible { outline: 3px solid var(--ws-deep); outline-offset: 1px; border-color: var(--ws-deep); }
.ws-form-field.has-error input { border-color: #a8433a; }
.ws-form-error { font-size: 14px; font-weight: 600; color: #a8433a; }
.ws-form > .ws-form-error { padding: 12px 14px; border-radius: 12px; background: #f8e5e2; }
.ws-form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ws-form .ws-btn { width: 100%; }
.ws-form-foot { font-size: 14.5px; color: var(--ws-muted); text-align: center; }
.ws-form-foot a { font-weight: 700; color: var(--ws-rust); }

/* ===========================================================
   « Pour qui ? », guides, pages légales
   =========================================================== */
/* Cartes d'entrée d'une rubrique : toute la carte se clique par le lien du titre. */
.ws-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.ws-door { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 30px 30px 28px; background: var(--ws-card); border: 1px solid var(--ws-border); border-radius: 24px; transition: border-color 0.15s, transform 0.15s; }
.ws-door:hover { border-color: #c9b9a3; transform: translateY(-2px); }
.ws-door-title { margin-top: 6px; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.ws-door-title a { text-decoration: none; }
.ws-door-title a::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.ws-door p { line-height: 1.55; color: #5f5448; text-wrap: pretty; }
.ws-door > .ws-arrow { margin-top: auto; padding-top: 0; color: var(--ws-rust); }

/* « En bref », à droite du titre d'une page « Pour qui ? ». */
.ws-brief { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3.2vw, 36px); background: var(--ws-card); border: 1px solid var(--ws-border2); border-radius: 26px; box-shadow: 0 34px 70px -40px rgba(43, 38, 34, 0.45); }
.ws-brief h2 { font-size: 20px; letter-spacing: -0.01em; color: var(--ws-rust); }
.ws-brief .ws-ticks { margin: 0; }

/* Texte long : même largeur de lecture que les questions fréquentes. */
.ws-article { width: min(820px, calc(100% - 40px)); display: flex; flex-direction: column; gap: 40px; padding: 20px 0 8px; }
.ws-article-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ws-article-head h1 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.06; letter-spacing: -0.028em; text-wrap: balance; }
.ws-article-head .ws-lead { max-width: none; }
.ws-article-meta { font-size: 14.5px; color: var(--ws-muted); }
.ws-keybox { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 32px); background: var(--ws-card); border: 1px solid var(--ws-border2); border-radius: 22px; }
.ws-keybox h2 { font-size: 20px; letter-spacing: -0.01em; color: var(--ws-rust); }
.ws-keybox .ws-ticks { margin: 0; }
.ws-prose { display: flex; flex-direction: column; gap: 44px; }
.ws-prose section { display: flex; flex-direction: column; gap: 14px; }
.ws-prose h2 { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.ws-prose p, .ws-prose li { font-size: 17px; line-height: 1.65; color: var(--ws-text); text-wrap: pretty; }
.ws-prose ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.ws-prose li::marker { color: var(--ws-rust); }
.ws-with { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(26px, 3.4vw, 40px); background: #e6f0ef; border-radius: 26px; }
.ws-with h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.ws-with > p { font-size: 17px; line-height: 1.6; color: var(--ws-text); text-wrap: pretty; }
.ws-with-links { align-self: stretch; display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.ws-sources { display: flex; flex-direction: column; gap: 14px; padding-top: 32px; border-top: 1px solid var(--ws-border2); }
.ws-sources h2 { font-size: 20px; letter-spacing: -0.01em; }
.ws-sources ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.ws-sources a { display: inline-block; padding: 5px 0; font-size: 15.5px; color: var(--ws-rust); text-underline-offset: 3px; overflow-wrap: anywhere; }
.ws-disclaimer { font-size: 14.5px; line-height: 1.55; color: var(--ws-muted); }
.ws-article-foot { margin-top: -8px; }

/* Mentions légales : identité de l'éditeur, et avertissement tant qu'elle est incomplète. */
.ws-idcard { display: flex; flex-direction: column; margin: 0; padding: 6px 26px; background: var(--ws-card); border: 1px solid var(--ws-border); border-radius: 22px; }
.ws-idcard > div { display: grid; grid-template-columns: minmax(150px, 0.4fr) 1fr; gap: 6px 20px; padding: 14px 0; border-top: 1px solid var(--ws-soft); }
.ws-idcard > div:first-child { border-top: 0; }
.ws-idcard dt { font-size: 14.5px; color: var(--ws-muted); }
.ws-idcard dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ws-idcard a { text-underline-offset: 3px; }
.ws-draft { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; border: 1.5px dashed var(--ws-cta); border-radius: 18px; background: #fdf0e8; }
.ws-draft ul { margin: 0; padding-left: 20px; }

.ws-section-doors { padding-bottom: 104px; }
.ws-foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.ws-foot-legal a { display: inline-flex; align-items: center; min-height: 32px; text-underline-offset: 3px; }

.ws-foot-site { list-style: none; margin: 0; padding: 0; }
.ws-foot-site a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; font-weight: 700; color: var(--ws-rust); text-underline-offset: 4px; }
.ws-foot-langs { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ws-foot-langs a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; text-underline-offset: 3px; }
.ws-foot-langs .ws-flag { width: 21px; height: 14px; }
.ws-foot-langs a[aria-current] { font-weight: 700; color: var(--ws-ink); text-decoration: none; }

@media (max-width: 700px) {
  .ws-map-wrap { grid-template-columns: minmax(0, 1fr); }
  .ws-chat-side { flex-basis: 96px; padding: 12px 6px; }
  .ws-chat-main { padding: 14px; }
  .ws-field { grid-template-columns: 1fr; gap: 3px; }
  .ws-details dd { margin-left: 0; }
  .ws-trial { padding-top: 12px; }
  .ws-foot-site a, .ws-foot-langs a, .ws-foot-legal a { min-height: 44px; }
  .ws-idcard { padding-inline: 20px; }
  .ws-idcard > div { grid-template-columns: 1fr; gap: 2px; }
  .ws-article { gap: 32px; }
}

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