/* WordPress build: a few links replace the prototype's <button>s (real URLs) — keep them looking identical. */
a.btn, a.lift, a.svc-tile, a.link-back, a.hdr-cta, a.chip, .lang-switch a { text-decoration: none; }
a.svc-tile { color: var(--ink); }
a.lift:hover, a.svc-tile:hover { color: var(--ink); }
a.btn-primary:hover, a.btn-dark:hover { color: var(--btn-fg-h); }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
@media (max-width: 760px) { .lang-switch a { min-height: 38px; min-width: 44px; } }
.lang-switch a:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
[hidden] { display: none !important; }
/* Generic pages (e.g. privacy policy) written in the block editor */
.page-generic { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 7vw, 96px); }
.page-generic h1 { font-size: clamp(38px, 6vw, 72px); margin-bottom: 24px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Resource text written in the editor */
.prose blockquote p { font: inherit; color: inherit; max-width: none; }
.prose h3 { font-size: clamp(20px, 2.4vw, 26px); margin-top: 10px; }
.prose img { max-width: 100%; height: auto; border-radius: 18px; }
.prose ol { margin: 0; padding-left: 22px; font-size: 16.5px; line-height: 1.6; }
/* Logged-in editors: keep the floating header below the WordPress admin bar */
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* "ma voie." period that becomes the path's dot (motion.js) */
.hero-period { position: relative; transition: color .2s ease; }
.hero-baseline { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
/* Homepage Boîte à outils tabs: default view keeps the chosen order */
[data-home-grid].is-default [data-pick="1"] { order: 1; }
[data-home-grid].is-default [data-pick="2"] { order: 2; }
[data-home-grid].is-default [data-pick="3"] { order: 3; }
/* Client feedback 2026-10: visible ↗ on homepage Liens utiles links */
.home-lk::after { display: none; }
.home-lk { padding-right: 28px !important; }
.home-lk-ico { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: inline-flex; opacity: .55; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.home-lk:hover .home-lk-ico, .home-lk:focus-visible .home-lk-ico { opacity: 1; transform: translate(2px, calc(-50% - 2px)); }
[data-j="start"] a.lift:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 4px;
}
/* One image hover language across the site: teal wash above the photo, UI stays crisp. */
[data-j="start"] a.lift > div:first-child,
.res-card .res-media,
.vid-card .vid-thumb,
.vf-main .vf-thumb,
.vf-row .vf-rthumb,
.lk-vid .lk-thumb {
  isolation: isolate;
}
[data-j="start"] a.lift > div:first-child::before,
.res-card .res-media::before,
.vid-card .vid-thumb::before,
.vf-main .vf-thumb::before,
.vf-row .vf-rthumb::before,
.lk-vid .lk-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(135deg, rgba(33,172,174,.10), rgba(20,123,128,.38));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  transition: opacity .32s ease;
}
[data-j="start"] a.lift:is(:hover, :focus-visible) > div:first-child::before,
.res-card:is(:hover, :focus-visible) .res-media::before,
.vid-card:is(:hover, :focus-visible) .vid-thumb::before,
.vf-main:is(:hover, :focus-visible) .vf-thumb::before,
.vf-row:is(:hover, :focus-visible) .vf-rthumb::before,
.lk-vid:is(:hover, :focus-visible) .lk-thumb::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .lift .media-img { transition: none; }
  .lift:hover .media-img { transform: none; filter: none; }
  [data-j="start"] a.lift > div:first-child::before,
  .res-card .res-media::before,
  .vid-card .vid-thumb::before,
  .vf-main .vf-thumb::before,
  .vf-row .vf-rthumb::before,
  .lk-vid .lk-thumb::before { transition: none; }
}
/* TEMP DEMO version B (?v=b): cream page, white cards. Remove block + tvtc_variant_b() in inc/helpers.php to drop it. */
body.v-b { background: #fdf8ef; }
.v-b .journey-host [data-j="tools"] .three-card-grid::before, .v-b .journey-host [data-j="facts"] .stat-grid::before { background: #fdf8ef; }
.v-b .vid-card, .v-b .res-card, .v-b .org-sec, .v-b .org-note, .v-b .lk-panel-vid, .v-b .res-empty { background: #ffffff; box-shadow: 0 0 0 1px rgba(36,28,16,.06), 0 2px 10px rgba(36,28,16,.04); }
.v-b .stat-card:not([style*="--tint"]) { background: #ffffff; }
/* TEMP DEMO (?fx=1): masked words for the title reveal */
.fx .fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .08em .16em; margin: -.12em -.08em -.16em; }
.fx .fx-w.is-revealed { overflow: visible; }
.fx .fx-wi { display: inline-block; }
/* TEMP DEMO (?fx=1): stronger journey path: bolder drawn line with a soft glow, fainter ghost so the drawn part reads, bigger nodes */
.fx .journey-line { stroke: var(--teal); stroke-opacity: 1; stroke-width: 3.5; filter: none; }
.fx .journey-ghost { stroke-opacity: .22; stroke-width: 2.5; }
.fx .journey-branch { stroke-width: 2; }
.fx .journey-node { stroke-width: 2; }
.fx .journey-node.is-on { filter: drop-shadow(0 0 6px rgba(231,149,0,.55)); }
.fx .journey-dot .halo { opacity: .28; }
@media (max-width: 700px) { .fx .journey-line { stroke-opacity: .9; stroke-width: 2; filter: none; } .fx .journey-ghost { stroke-opacity: .2; stroke-width: 2; } }
/* TEMP DEMO (?fx=1) phones: the eyebrow dot is the path's stop — grey until the line reaches it, then orange with a pop; short connector from the line */
@media (max-width: 700px) {
  .fx .journey-branch { display: block; stroke-opacity: 0; stroke-width: 2; }
  .fx .journey-branch.is-on { stroke: var(--orange); stroke-opacity: .9; }
  .fx section[data-j] .kicker.j-stop:not(.kicker-light)::before { background: #fff; box-shadow: 0 0 0 1.5px rgba(20,123,128,.45); transition: background .35s var(--ease), box-shadow .35s var(--ease); }
  .fx section[data-j] .kicker.is-reached:not(.kicker-light)::before { background: var(--orange); box-shadow: 0 0 0 4px rgba(231,149,0,.22); animation: jpop .8s var(--ease); }
}
/* TEMP DEMO (?fx=1): featured video + compact list */
.vid-grid.vid-feat { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; margin: 0; overflow: visible; padding: 0; }
.vid-feat::before, .vid-feat::after { content: none; }
.vf-main { display: flex; flex-direction: column; text-align: left; background: var(--sand); border: 0; border-radius: 22px; padding: 0; overflow: hidden; cursor: pointer; color: var(--ink); font-family: var(--font-body); }
.vf-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sand-2); }
.vf-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(20,14,6,.28)); pointer-events: none; }
.vf-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--ink); box-shadow: 0 12px 30px rgba(36,28,16,.3); transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.vf-play svg, .vf-rplay svg { margin-left: 3px; fill: currentColor; }
.vf-main:hover .vf-play { transform: scale(1.08); background: var(--teal-deep); color: var(--paper); }
.vf-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.vf-tag { align-self: flex-start; background: #fdf8ef; color: #6b5c45; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; font-weight: 500; }
.vf-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2vw, 26px); line-height: 1.1; letter-spacing: -0.025em; }
.vf-list { display: flex; flex-direction: column; gap: 10px; }
.vf-row { flex: 1; display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 14px; align-items: center; text-align: left; background: var(--sand); border: 0; border-radius: 18px; padding: 10px; cursor: pointer; color: var(--ink); font-family: var(--font-body); transition: background .25s var(--ease); }
.vf-row:hover { background: var(--sand-2); }
.vf-main:focus-visible, .vf-row:focus-visible { outline: 2.5px solid var(--teal); outline-offset: 3px; }
.vf-rthumb { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--sand-2); }
.vf-rplay { position: absolute; left: 8px; bottom: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--ink); transition: background .25s var(--ease), color .25s var(--ease); }
.vf-row:hover .vf-rplay { background: var(--teal-deep); color: var(--paper); }
.vf-rbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vf-rtitle { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.15; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) {
  .vid-grid.vid-feat { grid-template-columns: 1fr; }
  .vf-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .vf-row { grid-template-columns: 120px minmax(0, 1fr); }
}
/* TEMP DEMO (?fx=1): page-header paths (Liens utiles, Boîte à outils) match the home journey line: 3.5px desktop / 2px phone */
.fx .hp-line { vector-effect: non-scaling-stroke; stroke-width: 3.5; filter: drop-shadow(0 0 6px rgba(33,172,174,.45)); }
.fx .hp-ghost { vector-effect: non-scaling-stroke; stroke-width: 2.5; }
@media (max-width: 700px) { .fx .hp-line { stroke-width: 2; stroke-opacity: .9; filter: none; } .fx .hp-ghost { stroke-width: 2; stroke-opacity: .2; } }

/* Boîte à outils: testimonial videos shared with Liens utiles */
.tools-vids { padding-bottom: clamp(56px, 7vw, 96px); }
.tools-vids h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 8px 0 22px; }
.tools-vids-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tools-vids-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--ink); }
.tools-vids-head .goal-ico { width: 32px; height: 32px; background: var(--col); }
@media (max-width: 900px) { .tools-vids-grid { grid-template-columns: 1fr; } }

/* footer: terms / privacy links next to the copyright */
.sf-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(253,248,239,.35); }
.sf-legal a:hover { color: #fdf8ef; text-decoration-color: currentColor; }