/* Guiter Carrière · light edition, on top of style.css.
   Same brand (Poppins, the emblem, the Guiter green and gold), drawn the Apple way: white and light grey
   surfaces, a frosted header, big tightly-tracked headlines, rounded tiles without stripes, pill buttons,
   chevron links, hairlines instead of borders. Everything is scoped to .site-div--carriere, so the group
   pages never change. */

.site-div--carriere {
  --ink: #1D1D1F;          /* text */
  --ink-2: #424245;        /* secondary text */
  --muted: #6E6E73;        /* captions */
  --faint: #86868B;
  --hair: rgba(0, 0, 0, .08);
  --tile: #F5F5F7;         /* grey surface */
  --tile-2: #E8E8ED;
  --action: #168212;       /* Guiter green: buttons and links */
  --action-d: #0D5A0D;
  --accent: #A86A00;       /* Guiter Carrière amber: kickers, gauges */
  --laterite: #B4532A;     /* the red earth of Haute-Guinée's tracks: distance and scale */
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;  /* weighbridge tickets */
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --spring: cubic-bezier(.22, 1, .36, 1);
  --sp: clamp(88px, 10vw, 160px);
  background: #FFF;
  color: var(--ink);
  letter-spacing: -.003em;
}
.site-div--carriere .roadline { display: none; }

/* ---------- the survey-map background: contour lines (img/carriere/topo.svg, drawn by tools/topo.py) on a fixed
   layer that drifts at a quarter of the scroll speed (js/carriere.js sets --topo-y); sections let it show through ---------- */
.site-div--carriere::before { content: ''; position: fixed; z-index: -1; left: 0; right: 0; top: -900px; bottom: 0; pointer-events: none;
  background: url(../img/carriere/topo.svg) 0 0 / 1200px 900px repeat; opacity: .14; transform: translate3d(0, var(--topo-y, 900px), 0); will-change: transform; }
.site-div--carriere .page-hero, .site-div--carriere .div-cta { background: transparent; }
.site-div--carriere .div-sec--alt, .site-div--carriere .div-sec--dark { background: rgba(245,245,247,.86); }
.site-div--carriere .footer { background: rgba(245,245,247,.9); }

/* ---------- type ---------- */
.site-div--carriere .eyebrow { font-size: clamp(1rem, .95rem + .25vw, 1.2rem); font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--accent); }
.site-div--carriere .h2 { margin-top: 8px; font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.9rem); font-weight: 600; line-height: 1.06; letter-spacing: -.035em; color: var(--ink); }
.site-div--carriere .h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); letter-spacing: -.03em; line-height: 1.1; }
.site-div--carriere .lead { margin-top: 18px; font-size: clamp(1.08rem, 1rem + .4vw, 1.35rem); line-height: 1.5; letter-spacing: -.01em; color: var(--ink-2); }
.site-div--carriere .section-head { max-width: 820px; margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; }
.site-div--carriere .section-head .lead { margin-inline: auto; }
.site-div--carriere .section-head--row { flex-direction: column; align-items: center; gap: 18px; }

/* ---------- buttons and links ---------- */
.site-div--carriere .btn { min-height: 48px; padding: 0 24px; border-width: 1px; font-weight: 500; font-size: 1rem; letter-spacing: -.01em; transition: transform .3s var(--spring), background-color .2s, color .2s, border-color .2s; }
.site-div--carriere .btn:active { transform: scale(.97); transition-duration: .1s; }
.site-div--carriere .btn--gold, .site-div--carriere .btn--green, .site-div--carriere .div-cta .btn--gold { background: var(--action); color: #FFF; }
.site-div--carriere .btn--gold:hover, .site-div--carriere .btn--green:hover, .site-div--carriere .div-cta .btn--gold:hover { background: var(--action-d); }
.site-div--carriere .btn--ghost, .site-div--carriere .btn--outline, .site-div--carriere .div-sec--dark .btn--ghost { background: transparent; border-color: var(--action); color: var(--action); }
.site-div--carriere .btn--ghost:hover, .site-div--carriere .btn--outline:hover { background: var(--action); color: #FFF; }
.site-div--carriere .link { gap: 2px; padding: 0; border: 0; color: var(--action); font-weight: 500; letter-spacing: -.01em; }
.site-div--carriere .link::after { content: '›'; font-size: 1.25em; line-height: 1; transform: translateY(-.04em); }
.site-div--carriere .link:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-div--carriere .link:hover::after { transform: translate(3px, -.04em); }
.link--muted { color: var(--muted) !important; }
.site-div--carriere :focus-visible { outline: 3px solid rgba(22,130,18,.45); outline-offset: 3px; }

/* ---------- header: a frosted light bar, content scrolls under it ---------- */
.site-div--carriere .header, .site-div--carriere .header.is-solid { height: 56px; color: var(--ink); background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 var(--hair); }
.site-div--carriere .brand--div { color: var(--ink); }
.site-div--carriere .brand--div img { width: 34px; filter: brightness(0); opacity: .86; }
.site-div--carriere .brand--div b { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.site-div--carriere .brand--div small { color: var(--muted); opacity: 1; letter-spacing: 0; }
.site-div--carriere .nav { font-size: .84rem; font-weight: 400; gap: clamp(14px, 1.7vw, 28px); }
.site-div--carriere .nav a { color: var(--ink-2); opacity: 1; transition: color .2s; }
.site-div--carriere .nav a:hover, .site-div--carriere .nav a[aria-current="page"] { color: var(--ink); box-shadow: none; }
.site-div--carriere .nav a[aria-current="page"] { font-weight: 600; }
.site-div--carriere .nav .nav__back { color: var(--faint); opacity: 1 !important; }
.site-div--carriere .nav .nav__cta { padding: 7px 16px; background: var(--action); color: #FFF; font-weight: 500; }
.site-div--carriere .nav .nav__cta:hover { background: var(--action-d); color: #FFF; }
/* the open menu is position: fixed inside the header, so the header must not create a containing block */
.site-div--carriere.menu-open .header { background: #FFF; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- home hero: centred words, then the photograph as a large rounded tile ---------- */
.ahero { padding: calc(56px + clamp(56px, 8vw, 112px)) 0 clamp(64px, 8vw, 120px); text-align: center; }
.ahero__kicker { font-size: clamp(1rem, .95rem + .3vw, 1.25rem); font-weight: 600; color: var(--accent); letter-spacing: -.01em; }
.ahero__title { margin: 10px auto 0; font-size: clamp(2.5rem, 1.1rem + 5.2vw, 5.8rem); font-weight: 600; line-height: 1.02; letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.ahero__title span { display: block; color: var(--faint); }
.ahero__lead { margin: 24px auto 0; max-width: 34em; font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); line-height: 1.45; letter-spacing: -.012em; color: var(--ink-2); }
.ahero__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }
.ahero__ctas .link { font-size: 1.1rem; }
.ahero__media { position: relative; overflow: hidden; margin: clamp(48px, 6vw, 80px) auto 0; width: min(100% - 2 * var(--g), 1320px); aspect-ratio: 21 / 9; border-radius: var(--r-lg); background: var(--tile); isolation: isolate; }
.ahero__media img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; }
/* search bar floating over the bottom of the photograph, like a material on top of the content */
.finder-mini { position: relative; z-index: 2; margin: -44px auto 0; width: min(100% - 2 * var(--g), 720px); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 26px; border-radius: 999px; text-align: left;
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 50px -12px rgba(0,0,0,.25), 0 0 0 1px var(--hair); }
.finder-mini label { flex: none; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.finder-mini select { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--tile); color: var(--ink); font-size: 1rem; }
.finder-mini .btn { flex: none; }
.finder-mini__alt { display: inline-block; margin-top: 18px; font-size: .95rem; }
.ahero__stats { margin: clamp(56px, 7vw, 96px) auto 0; width: min(100% - 2 * var(--g), 980px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ahero__stats div + div { border-left: 1px solid var(--hair); }
.ahero__stats b { display: block; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.8rem); font-weight: 600; line-height: 1; letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ahero__stats span { display: block; margin-top: 10px; font-size: .95rem; color: var(--muted); }

/* ---------- inner page heroes: light and centred ---------- */
.site-div--carriere .page-hero { padding: calc(56px + clamp(56px, 8vw, 110px)) 0 clamp(40px, 5vw, 72px); background: #FFF; color: var(--ink); text-align: center; overflow: visible; }
.site-div--carriere .page-hero::after, .site-div--carriere .page-hero::before { display: none; }
.site-div--carriere .page-hero__title { margin: 12px auto 0; max-width: 15em; font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.6rem); line-height: 1.03; letter-spacing: -.045em; }
.site-div--carriere .page-hero__lead { margin: 22px auto 0; max-width: 36em; font-size: clamp(1.08rem, 1rem + .45vw, 1.4rem); line-height: 1.45; letter-spacing: -.012em; color: var(--ink-2); }
.site-div--carriere .crumbs { color: var(--muted); font-size: .9rem; }
.site-div--carriere .crumbs a { color: var(--accent); font-weight: 600; }
.site-div--carriere .jump { justify-content: center; margin-top: 36px; gap: 8px; }
.site-div--carriere .jump a { padding: 10px 18px; border: 0; background: var(--tile); color: var(--ink); font-size: .92rem; transition: background-color .2s, transform .3s var(--spring); }
.site-div--carriere .jump a:hover { background: var(--tile-2); border: 0; }
.site-div--carriere .jump b { color: var(--accent); font-size: .78rem; letter-spacing: .04em; }
/* a hero with a photograph: the photograph becomes a rounded tile under the words */
.site-div--carriere .page-hero--image { display: flex; flex-direction: column; min-height: 0; }
.site-div--carriere .page-hero--image::before { display: none; }
.site-div--carriere .page-hero--image .page-hero__img { order: 2; position: static; z-index: 0; width: min(100% - 2 * var(--g), 1320px); height: auto; aspect-ratio: 21 / 9; margin: clamp(40px, 5vw, 64px) auto 0; border-radius: var(--r-lg); transform: none !important; }

/* ---------- sections ---------- */
.site-div--carriere .div-sec { padding-block: var(--sp); }
.site-div--carriere .div-sec--alt, .site-div--carriere .div-sec--dark { background: var(--tile); color: var(--ink); }
.site-div--carriere .div-sec--dark::before, .site-div--carriere .div-cta::before, .site-div--carriere .footer::before { display: none; }
.site-div--carriere .div-sec .eyebrow, .site-div--carriere .eyebrow--light, .site-div--carriere .div-sec--dark .eyebrow { color: var(--accent); }
.lead--light { color: var(--ink-2); }
.site-div--carriere .two-col { gap: clamp(32px, 6vw, 96px); }
.site-div--carriere .two-col > img, .site-div--carriere .two-col > .ph { border-radius: var(--r-lg); }
.two-col .btn, .two-col .link, .cards2 .link { margin-top: 26px; }

/* tiles: one surface, generous radius, no stripes */
.site-div--carriere .cards4, .site-div--carriere .cards2 { gap: 20px; }
.site-div--carriere .cards4 article, .site-div--carriere .cards2 article { padding: 32px 28px; border: 0; border-radius: var(--r-md); background: var(--tile); }
.site-div--carriere .div-sec--alt .cards4 article, .site-div--carriere .div-sec--alt .cards2 article { background: #FFF; }
.site-div--carriere .cards4 h3, .site-div--carriere .cards2 h3 { font-size: 1.3rem; letter-spacing: -.02em; }
.site-div--carriere .cards4 p, .site-div--carriere .cards2 p { color: var(--ink-2); font-size: 1rem; }

/* the closing call to action: centred, quiet */
.site-div--carriere .div-cta { padding-block: clamp(88px, 10vw, 150px); background: #FFF; color: var(--ink); border-top: 1px solid var(--hair); }
.site-div--carriere .div-cta__in { flex-direction: column; justify-content: center; text-align: center; gap: 28px; }

/* footer: light grey, small type */
.site-div--carriere .footer { background: var(--tile); color: var(--muted); font-size: .84rem; }
.site-div--carriere .footer img { width: 150px; filter: brightness(0); opacity: .75; }
.site-div--carriere .footer__sig { color: var(--accent); }
.site-div--carriere .footer__h { color: var(--ink); letter-spacing: 0; text-transform: none; font-size: .84rem; }
.site-div--carriere .footer nav a, .site-div--carriere .footer__grid > div > a { color: var(--ink-2); }
.site-div--carriere .footer a:hover { color: var(--ink); text-decoration: underline; }
.site-div--carriere .footer__addr { color: var(--muted); }
.site-div--carriere .footer__base { border-top-color: var(--hair); color: var(--faint); }

/* ---------- placeholders and "to supply" notes: visible, but quiet ---------- */
.ph { position: relative; display: grid; place-content: center; gap: 6px; aspect-ratio: 4 / 3; padding: 28px; border: 1.5px dashed #D2D2D7; border-radius: var(--r-lg); text-align: center; color: var(--muted);
  background: radial-gradient(120% 90% at 30% 0%, #FFF 0%, #F5F5F7 55%, #ECECF0 100%); }
.div-sec--alt .ph { background: radial-gradient(120% 90% at 30% 0%, #FFF 0%, #FAFAFC 60%, #F0F0F3 100%); }
.ph b { font-size: 1.1rem; font-weight: 600; color: var(--ink-2); letter-spacing: -.01em; }
.ph small { max-width: 26em; font-size: .88rem; }
.ph__tag { position: absolute; top: 16px; left: 16px; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: #FFD27A; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ph--wide { aspect-ratio: 16 / 9; }
.site-div--carriere .todo--inline { margin-top: 14px; padding: 9px 14px; border: 1px dashed #D2D2D7; border-radius: 12px; background: rgba(255,255,255,.6); color: var(--faint); font-size: .8rem; font-weight: 500; }
.site-div--carriere .div-sec--alt .todo--inline { margin-top: 24px; }
.tbc { display: inline-block; margin-left: 4px; padding: 1px 9px; border: 1px dashed #D2D2D7; border-radius: 999px; color: var(--faint); font-size: .74rem; font-weight: 500; white-space: nowrap; }

/* ---------- maps: Guinea, one quarry in focus (build.py, carriere_map) ---------- */
.cmap { display: block; width: 100%; height: auto; overflow: hidden; }
.cmap__land { fill: #FFF; stroke: #CFCFD4; stroke-width: 1.2; }
.cmap__town { fill: #A1A1A6; }
.cmap__tlabel { fill: var(--muted); font-family: Poppins, system-ui, sans-serif; font-weight: 500; }
.cmap__other { fill: var(--accent); opacity: .45; }
.cmap__pin { fill: var(--action); stroke: #FFF; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cmap__halo { fill: var(--action); opacity: .16; transform-box: fill-box; transform-origin: center; animation: cmap-halo 2.8s var(--spring) infinite; }
@keyframes cmap-halo { 0% { transform: scale(.55); opacity: .32; } 100% { transform: scale(1.5); opacity: 0; } }
.cmap__plabel { fill: var(--ink); font-family: Poppins, system-ui, sans-serif; font-weight: 600; letter-spacing: -.02em; }
.cmap__zone { fill: rgba(168,106,0,.08); stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 5 4; }
.cmap__zlabel { fill: var(--accent); font-family: Poppins, system-ui, sans-serif; font-weight: 600; }
.cmap-wrap { margin: 0; padding: 6% 6% 18px; border-radius: var(--r-lg); background: var(--tile); }
.cmap-wrap figcaption { margin-top: 14px; font-size: .8rem; color: var(--faint); text-align: center; }
.cmap-wrap--zoom { padding: 0 0 16px; overflow: hidden; }
.cmap-wrap--zoom .cmap { aspect-ratio: 4 / 3; }
.qcard__map { margin: -6px -4px 18px; }
.qcard__map .cmap__land { fill: #FFF; }

/* product close-ups rendered at true scale (tools/render_carriere.py) */
.render-wrap { margin: 0; }
.render-wrap img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
.render-wrap figcaption { margin-top: 12px; font-size: .8rem; color: var(--faint); text-align: center; }
.pcard__img { position: relative; margin: -12px -10px 22px; overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 4 / 3; background: var(--tile-2); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--spring); }
.pcard:hover .pcard__img img { transform: scale(1.04); }
.pcard__img figcaption { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .7rem; font-weight: 600; color: var(--ink-2); }

/* ---------- home: quarries, products, sectors ---------- */
.qcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.qcard { display: flex; flex-direction: column; min-height: 300px; padding: 30px 28px; border-radius: var(--r-md); background: var(--tile); color: inherit; text-decoration: none; transition: transform .5s var(--spring), box-shadow .5s var(--spring); }
.qcard:hover, .card-link:hover, .res__card:hover { transform: scale(1.015); box-shadow: 0 24px 48px -28px rgba(0,0,0,.28); }
.qcard__n { font-size: .85rem; font-weight: 600; color: var(--accent); }
.qcard h3 { margin-top: 10px; font-size: clamp(1.6rem, 1.3rem + .8vw, 2.1rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.qcard__region { margin-top: 4px; font-size: .92rem; color: var(--muted); }
.qcard p:not([class]) { margin-top: 16px; font-weight: 500; color: var(--ink-2); }
.qcard__cap { margin-top: auto; padding-top: 22px; font-size: .9rem; color: var(--muted); }
.qcard__cap b { display: block; font-size: 1.7rem; font-weight: 600; letter-spacing: -.035em; color: var(--ink); }
.card-link { display: flex; flex-direction: column; padding: 32px 28px; border-radius: var(--r-md); background: #FFF; color: inherit; text-decoration: none; transition: transform .5s var(--spring), box-shadow .5s var(--spring); }
.card-link h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; }
.card-link p { margin: 10px 0 22px; color: var(--ink-2); font-size: 1rem; }
.card-link .link { margin-top: auto; align-self: flex-start; }
.sectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sectors li { padding: 30px 28px; border-radius: var(--r-md); background: #FFF; }
.sectors b { display: block; font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.sectors span { display: block; margin-top: 10px; color: var(--ink-2); }

/* ---------- quarries page ---------- */
.quarries { display: grid; gap: clamp(72px, 9vw, 140px); }
.quarry { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 88px); align-items: center; scroll-margin-top: 80px; }
.quarry:nth-child(even) { grid-template-columns: 5fr 7fr; }
.quarry:nth-child(even) .quarry__media { order: 2; }
.quarry__media img, .quarry__media .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
.quarry .h3 { margin-top: 8px; }
.quarry__role { margin-top: 8px; font-size: 1.2rem; font-weight: 500; letter-spacing: -.015em; color: var(--muted); }
.quarry__body > p:not([class]) { margin-top: 16px; color: var(--ink-2); font-size: 1.05rem; }
.quarry__facts { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
.quarry__facts div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hair); }
.quarry__facts .quarry__wide { grid-column: 1 / -1; }
.quarry__facts dt { font-size: .8rem; color: var(--muted); }
.quarry__facts dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; }
.quarry__facts dd.todo { margin-top: 6px; font-size: .8rem; letter-spacing: 0; }
.quarry__links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.finder { scroll-margin-top: 40px; }
.finder__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 5vw, 88px); align-items: start; }
.finder__form { margin-top: 28px; max-width: 420px; }
.finder__form label { display: block; margin-bottom: 8px; font-size: .9rem; font-weight: 600; }
.finder__form select { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid #D2D2D7; border-radius: var(--r-sm); background: #FFF; font-size: 1.05rem; }
.finder__list { display: grid; gap: 12px; }
.finder__empty { padding: 32px; border-radius: var(--r-md); background: #FFF; color: var(--muted); }
.finder__item { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 20px; padding: 22px 26px; border-radius: var(--r-md); background: #FFF; }
.finder__item.is-best { padding-top: 48px; box-shadow: 0 0 0 2px var(--action), 0 24px 48px -30px rgba(0,0,0,.35); }
.finder__badge { position: absolute; top: 16px; left: 26px; font-size: .8rem; font-weight: 600; color: var(--action); }
.finder__item b { font-size: 1.4rem; font-weight: 600; letter-spacing: -.03em; }
.finder__meta, .finder__km { grid-column: 1; font-size: .92rem; color: var(--muted); }
.finder__km { color: var(--ink-2); }
.finder__links { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: flex; gap: 20px; }

/* ---------- products ---------- */
.spec-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.site-div--carriere .spec { background: transparent; border-radius: 0; }
.site-div--carriere .spec th, .site-div--carriere .spec td { padding: 16px 18px 16px 0; border-bottom: 1px solid var(--hair); }
.site-div--carriere .spec th { background: none; font-size: .8rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.site-div--carriere .spec td:last-child { color: var(--ink); }
.pfam { scroll-margin-top: 40px; }
.pcards { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.pcards > .pcard { flex: 0 1 calc((100% - 60px) / 4); min-width: 0; }
.pcard { display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--r-md); background: var(--tile); scroll-margin-top: 90px; transition: box-shadow .4s var(--spring); }
.div-sec--alt .pcard { background: #FFF; }
.pcard:target { box-shadow: 0 0 0 2px var(--action); }
.pcard__head h3 { font-size: 2.2rem; font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.pcard__head small { display: block; margin-top: 6px; font-size: .9rem; color: var(--muted); }
.pcard .gauge { margin-top: 22px; }
.pcard__traits { margin-top: 18px; display: grid; gap: 7px; }
.pcard__traits li { position: relative; padding-left: 20px; font-size: .95rem; color: var(--ink-2); }
.pcard__traits li::before { content: '✓'; position: absolute; left: 0; top: 0; font-size: .85rem; font-weight: 700; color: var(--action); }
.pcard__uses { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: .92rem; color: var(--ink-2); }
.pcard__uses b { display: block; margin-bottom: 2px; font-size: .8rem; font-weight: 500; color: var(--muted); }
.pcard__tbc { margin-top: 10px; }
.pcard__links { margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.two-col .pcard__links { margin-top: 28px; padding-top: 0; }
.two-col .pcard__links .btn, .two-col .pcard__links .link { margin-top: 0; }
.gauge { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--tile-2); }
.gauge i { position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); min-width: 6px; border-radius: 3px; background: linear-gradient(90deg, #D9A441, var(--accent)); }
.gauge-scale { position: relative; display: block; height: 1.2em; margin-top: 6px; font-size: .68rem; color: var(--faint); }
.gauge-scale span { position: absolute; top: 0; transform: translateX(-50%); }
.gauge-scale span:nth-child(1) { left: 0; transform: none; }
.gauge-scale span:nth-child(2) { left: 36%; }
.gauge-scale span:nth-child(3) { left: 72%; }
.gauge-scale span:nth-child(4) { left: auto; right: 0; transform: none; }
.guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.guide li { padding: 28px; border-radius: var(--r-md); background: #FFF; }
.guide b { display: block; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.guide span { display: block; margin-top: 6px; color: var(--ink-2); }
.guide a, .faq a { color: var(--action); font-weight: 500; text-decoration: none; }
.guide a:hover, .faq a:hover { text-decoration: underline; }
.facts-list { margin-top: 26px; border-top: 1px solid var(--hair); text-align: left; }
.facts-list div { display: grid; grid-template-columns: 8em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.facts-list dt { font-size: .85rem; color: var(--muted); padding-top: 1px; }
.facts-list dd { margin: 0; font-weight: 500; }

/* ---------- customer resources ---------- */
.res__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.res__card { display: flex; flex-direction: column; min-height: 260px; padding: 30px 28px; border-radius: var(--r-md); background: var(--tile); color: var(--ink); text-decoration: none; transition: transform .5s var(--spring), box-shadow .5s var(--spring); }
.div-sec--alt .res__card { background: #FFF; }
.res__k { font-size: .85rem; font-weight: 600; color: var(--accent); }
.res__card h3 { margin-top: 10px; font-size: 1.35rem; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.res__card p { margin: 10px 0 22px; font-size: .97rem; color: var(--ink-2); }
.res__card .link { margin-top: auto; align-self: flex-start; }

/* ---------- calculator ---------- */
.calc__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: start; }
.calc__dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.calc__dims legend { grid-column: 1 / -1; }
.calc__note { font-size: .85rem; color: var(--muted); }
.calc__result { position: sticky; top: 80px; padding: clamp(28px, 3vw, 40px); border-radius: var(--r-lg); background: var(--tile); color: var(--ink); }
.calc__out { margin-top: 12px; border-top: 1px solid var(--hair); }
.calc__out div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.calc__out div[hidden] { display: none; }
.calc__out dt, .calc__out dd { margin: 0; color: var(--muted); }
.calc__out b { font-size: 1.8rem; font-weight: 600; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__out .calc__main b { font-size: clamp(3rem, 2.2rem + 2.4vw, 4.4rem); color: var(--ink); letter-spacing: -.05em; }
.calc__fine { margin: 16px 0 24px; font-size: .82rem; color: var(--muted); }
.field[hidden] { display: none; }

/* ---------- forms ---------- */
.site-div--carriere .form { gap: 18px; padding: 0; background: transparent; box-shadow: none; }
.site-div--carriere .calc__form { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: #FFF; box-shadow: 0 0 0 1px var(--hair); }
.site-div--carriere .field label, fieldset.field legend { font-size: .85rem; font-weight: 600; color: var(--ink); }
.site-div--carriere .field label span { color: var(--faint); font-weight: 400; }
.site-div--carriere .field input, .site-div--carriere .field select, .site-div--carriere .field textarea { min-height: 52px; padding: 12px 16px; border: 1px solid #D2D2D7; border-radius: var(--r-sm); background: #FFF; font-size: 1.02rem; transition: border-color .2s, box-shadow .2s; }
.site-div--carriere .field input:focus, .site-div--carriere .field select:focus, .site-div--carriere .field textarea:focus { border-color: var(--action); box-shadow: 0 0 0 4px rgba(22,130,18,.14); }
.site-div--carriere .field.is-invalid input, .site-div--carriere .field.is-invalid textarea { border-color: #D70015; }
.site-div--carriere .form__status { color: #D70015; }
.site-div--carriere .contact { padding-block: clamp(48px, 6vw, 96px) var(--sp); }
.site-div--carriere .contact__list { border-top: 1px solid var(--hair); padding-top: 20px; }
.site-div--carriere .contact__list dt { font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.site-div--carriere .contact__list a { color: var(--action); font-weight: 500; text-decoration: none; }
fieldset.field { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.field legend { margin-bottom: 10px; padding: 0; }
fieldset.field.is-invalid .checks { outline: 1.5px solid #D70015; outline-offset: 6px; border-radius: 12px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check { position: relative; cursor: pointer; }
.check input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.check span { display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 9px 16px; border: 1px solid #D2D2D7; border-radius: 999px; background: #FFF; font-size: .92rem; font-weight: 600; transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--spring); }
.check:active span { transform: scale(.96); }
.check--other span { border-style: dashed; }
.contact__list--wa { margin-top: 12px !important; border-top: 0 !important; padding-top: 0 !important; }
.check small { font-size: .75rem; font-weight: 400; color: var(--muted); }
.check input:checked + span { background: var(--ink); border-color: var(--ink); color: #FFF; }
.check input:checked + span small { color: rgba(255,255,255,.65); }
.check input:focus-visible + span { outline: 3px solid rgba(22,130,18,.45); outline-offset: 2px; }
.form__demo { padding: 12px 16px; border-radius: var(--r-sm); background: #FFF8E6; font-size: .88rem; font-weight: 500; color: #7A5A12; }
.quote__need { margin-top: 28px; display: grid; gap: 12px; counter-reset: n; }
.quote__need li { display: grid; grid-template-columns: 2.2em 1fr; column-gap: 10px; color: var(--ink-2); counter-increment: n; }
.quote__need li::before { content: counter(n); grid-row: span 2; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--tile); color: var(--accent); font-size: .85rem; font-weight: 700; }
.quote__need b { color: var(--ink); }
.qform .contact__list { margin-top: 36px; }
.quote__done { grid-column: 1 / -1; padding: 24px; border-radius: var(--r-md); background: #EEF7ED; }
.quote__done h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: var(--action-d); }
.quote__done dl { margin-top: 12px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: .92rem; }
.quote__done dt { color: var(--muted); }
.quote__done dd { margin: 0; font-weight: 600; }
.quote__done p { margin-top: 12px; font-size: .88rem; color: var(--ink-2); }

/* ---------- clients page ---------- */
.segs { display: grid; gap: clamp(72px, 9vw, 140px); }
.seg { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 5vw, 88px); align-items: center; scroll-margin-top: 80px; }
.seg:nth-child(even) { grid-template-columns: 5fr 6fr; }
.seg:nth-child(even) .seg__media { order: 2; }
.seg__media img, .seg__media .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
.seg .h3 { margin-top: 8px; }
.seg__body > p:not([class]) { margin-top: 16px; color: var(--ink-2); font-size: 1.05rem; }
.seg__prod { margin-top: 20px; padding: 14px 18px; border-radius: var(--r-sm); background: var(--tile); font-size: .95rem; }
.seg__prod b { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); }
.seg .link { margin-top: 22px; }

/* ---------- quality page, steps ---------- */
.two-col--top { align-items: start; }
.site-div--carriere .steps-list { gap: 12px; }
.site-div--carriere .steps-list li { padding: 20px 24px; border: 0; border-radius: var(--r-md); background: var(--tile); color: var(--ink-2); }
.site-div--carriere .div-sec--alt .steps-list li { background: #FFF; }
.steps-list b { display: block; margin-bottom: 2px; color: var(--ink); }
.cert { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: center; }
.cert h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 2rem); font-weight: 600; letter-spacing: -.03em; }

/* ---------- resources page: FAQ and documents ---------- */
.faq { border-top: 1px solid var(--hair); text-align: left; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { position: relative; padding: 22px 44px 22px 0; font-weight: 600; font-size: 1.1rem; letter-spacing: -.015em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 16px; font-size: 1.6rem; font-weight: 300; color: var(--action); transition: transform .35s var(--spring); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { padding: 0 0 20px; color: var(--ink-2); line-height: 1.6; }
.faq details > p.todo--inline { margin: -8px 0 20px; padding: 8px 12px; }
.spec--docs th[scope="row"] { font-size: 1rem; color: var(--ink); white-space: nowrap; }
.spec--docs th[scope="row"] b { display: block; font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; }
.spec--docs th[scope="row"] small { display: block; font-size: .8rem; color: var(--muted); }
.doc--missing { display: inline-block; padding: 5px 12px; border: 1px dashed #D2D2D7; border-radius: 999px; font-size: .8rem; font-weight: 500; color: var(--faint); }

/* ---------- the shared quarry story, on white ---------- */
.site-div--carriere .story { background: #FFF; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .qcards, .sectors, .res__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcards > .pcard { flex-basis: calc((100% - 20px) / 2); }
  .guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-div--carriere .nav { gap: 12px; font-size: .8rem; }
}
@media (max-width: 899px) {
  .site-div--carriere .nav { background: #FFF; font-size: 1.7rem; font-weight: 600; letter-spacing: -.03em; gap: 4px; }
  .site-div--carriere .nav a { color: var(--ink); }
  .site-div--carriere .nav .nav__back { margin-top: 14px; font-size: 1.05rem; font-weight: 500; letter-spacing: 0; }
  .site-div--carriere .nav .nav__cta { margin-top: 18px; padding: 12px 26px; font-size: 1.05rem; letter-spacing: 0; }
  .site-div--carriere .menu-toggle { color: var(--ink); }
  .qcards, .sectors, .res__grid, .guide { grid-template-columns: minmax(0, 1fr); }
  .pcards > .pcard { flex-basis: 100%; }
  .qcard { min-height: 0; }
  .quarry, .quarry:nth-child(even), .seg, .seg:nth-child(even), .cert, .finder__grid, .calc__grid { grid-template-columns: minmax(0, 1fr); }
  .quarry:nth-child(even) .quarry__media, .seg:nth-child(even) .seg__media { order: 0; }
  .ahero__media { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
  .finder-mini { flex-direction: column; align-items: stretch; margin-top: -32px; padding: 18px; border-radius: var(--r-md); }
  .finder-mini select { width: 100%; }
  .ahero__stats { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ahero__stats div + div { border-left: 0; border-top: 1px solid var(--hair); padding-top: 28px; }
  .site-div--carriere .page-hero--image .page-hero__img { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
  .site-div--carriere .div-cta .h2 { font-size: 2rem; }
  .facts-list div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .calc__result { position: static; }
  .finder__item { grid-template-columns: minmax(0, 1fr); }
  .finder__links { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .spec--docs, .spec--docs tbody { display: block; }
  .spec--docs thead { display: none; }
  .spec--docs tbody tr { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
  .site-div--carriere .spec--docs th[scope="row"], .site-div--carriere .spec--docs td { padding: 0; border: 0; }
}
/* ================================================================
   Signature pieces: the opening quarry, the zoom from sand to block, the coverage map, the weighbridge tickets
   ================================================================ */

/* the opening photograph: a framed tile that opens to the full width as the page scrolls (js sets --hx from 1 to 0) */
.ahero__media { width: 100%; margin-inline: 0; aspect-ratio: auto; height: clamp(320px, 52vw, 760px); border-radius: 0;
  clip-path: inset(0 calc(var(--hx, 1) * max(var(--g), (100vw - 1320px) / 2)) round calc(var(--hx, 1) * 28px)); }

/* the zoom: each step is a true-scale render and its calibre; pinned and crossfaded while scrolling */
.zoom { padding-block: var(--sp); }
.zoom__head { text-align: center; max-width: 860px; }
.zoom__head .lead { margin-inline: auto; }
.zoom__steps { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.zoom__step { display: grid; gap: 16px; align-content: start; }
.zoom__frame { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-md); background: var(--tile-2); }
.zoom__frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.zoom__frame figcaption { position: absolute; left: 14px; top: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 .75rem/1.3 var(--mono); color: var(--ink); }
.zoom__n { font-size: .85rem; font-weight: 600; color: var(--laterite); }
.zoom__text h3 { margin-top: 10px; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.zoom__uses { margin-top: 10px; color: var(--ink-2); }
.zoom__text .link { margin-top: 12px; }
.zoom__ruler { display: none; }
.zoom__all { margin-top: 36px; text-align: center; }
.zoom.is-scrub { padding-block: 0; }
.zoom.is-scrub .zoom__track { height: calc(var(--steps) * 62svh + 100svh); }
.zoom.is-scrub .zoom__pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 56px; }
.zoom.is-scrub .zoom__head .lead { display: none; }
.zoom.is-scrub .zoom__head .h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); }
.zoom.is-scrub .zoom__steps { position: relative; display: block; height: min(54svh, 560px); margin-top: clamp(20px, 3vh, 40px); }
.zoom.is-scrub .zoom__step { position: absolute; inset: 0; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: center; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.zoom.is-scrub .zoom__step.is-active { opacity: 1; pointer-events: auto; }
.zoom.is-scrub .zoom__frame { order: 2; height: 100%; }
.zoom.is-scrub .zoom__frame img { height: 100%; aspect-ratio: auto; transform: scale(1.18); transition: transform 1.4s var(--spring); }
.zoom.is-scrub .zoom__step.is-active .zoom__frame img { transform: scale(1); }
.zoom.is-scrub .zoom__step.is-past .zoom__frame img { transform: scale(.9); }
.zoom.is-scrub .zoom__text h3 { font-size: clamp(3.4rem, 1.6rem + 6vw, 8rem); transform: translateY(18px); transition: transform 1s var(--spring); }
.zoom.is-scrub .zoom__step.is-active .zoom__text h3 { transform: none; }
.zoom.is-scrub .zoom__ruler { display: block; position: relative; height: 46px; margin-top: clamp(20px, 3vh, 36px); border-top: 1px solid var(--tile-2); }
.zoom__band { position: absolute; top: -3px; height: 5px; left: var(--za, 0%); right: calc(100% - var(--zb, 1%)); min-width: 6px; border-radius: 3px; background: var(--laterite); transition: left .8s var(--spring), right .8s var(--spring); }
.zoom__tick { position: absolute; top: 10px; transform: translateX(-50%); font: 500 .72rem var(--mono); color: var(--muted); white-space: nowrap; }
.zoom__tick:first-of-type { transform: none; }
.zoom__tick:last-of-type { transform: translateX(-100%); }
.zoom__tick::before { content: ''; position: absolute; left: 50%; top: -10px; width: 1px; height: 7px; background: var(--muted); }

/* the coverage map: a 100 km circle opens around each quarry when the map comes into view */
.coverage { margin: 0 auto clamp(40px, 5vw, 64px); max-width: 980px; padding: clamp(16px, 3vw, 40px); border-radius: var(--r-lg); background: var(--tile); }
.coverage figcaption { margin-top: 14px; text-align: center; font-size: .82rem; color: var(--faint); }
.cmap__ring { fill: rgba(180,83,42,.08); stroke: var(--laterite); stroke-width: 1.2; stroke-opacity: .55; transform-box: fill-box; transform-origin: center; }
.coverage.is-armed .cmap__ring { transform: scale(.08); opacity: 0; transition: transform 1.6s var(--spring), opacity .6s ease; }
.coverage.is-armed .cmap__ring:nth-of-type(2) { transition-delay: .12s; }
.coverage.is-armed .cmap__ring:nth-of-type(3) { transition-delay: .24s; }
.coverage.is-armed .cmap__ring:nth-of-type(4) { transition-delay: .36s; }
.coverage.is-drawn .cmap__ring { transform: none; opacity: 1; }

/* weighbridge tickets: every truck leaves the quarry with one */
.ticket { padding: 0; overflow: hidden;
  -webkit-mask: radial-gradient(circle 10px at 0 calc(100% - 58px), transparent 96%, #000 100%) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% calc(100% - 58px), transparent 96%, #000 100%) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 10px at 0 calc(100% - 58px), transparent 96%, #000 100%) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% calc(100% - 58px), transparent 96%, #000 100%) right / 51% 100% no-repeat; }
.ticket .pcard__img { margin: 0; border-radius: 0; }
.ticket__body { padding: 20px 24px 22px; display: flex; flex-direction: column; flex: 1; }
.ticket__brand { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px dashed var(--tile-2); font: 600 .66rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ticket__fields { margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ticket__fields dt { font: 500 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ticket__fields dd { margin: 2px 0 0; font: 500 .9rem var(--mono); color: var(--ink); }
.ticket__stub { margin: 0; padding: 18px 24px; border-top: 2px dashed var(--tile-2); min-height: 58px; }
.ticket-form { padding: clamp(22px, 3vw, 40px) !important; border-radius: 22px; background: #FFF !important; box-shadow: 0 0 0 1px var(--hair), 0 40px 80px -50px rgba(0,0,0,.35) !important; }
.ticket-form .ticket__brand { margin-bottom: 4px; }

@media (max-width: 899px) {
  .zoom__steps { grid-template-columns: minmax(0, 1fr); }
  .zoom.is-scrub .zoom__step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 18px; }
  .zoom.is-scrub .zoom__frame { order: 0; height: auto; }
  .zoom.is-scrub .zoom__frame img { aspect-ratio: 4 / 3; height: auto; }
  .zoom.is-scrub .zoom__steps { height: 60svh; margin-top: 12px; }
  .zoom.is-scrub .zoom__head .eyebrow, .zoom.is-scrub .zoom__all { display: none; }
  .zoom.is-scrub .zoom__head .h2 { font-size: 1.6rem; }
  .zoom.is-scrub .zoom__ruler { margin-top: 12px; }
  .zoom__tick { font-size: .64rem; }
  .zoom.is-scrub .zoom__text h3 { font-size: 3rem; }
  .zoom.is-scrub .zoom__uses { font-size: .92rem; }
  .ahero__media { height: 62vw; }
}


/* ================================================================
   Corporate layer: value proposition, client portal, news, social handles, materials page
   ================================================================ */

/* the client portal sits in the navigation as a quiet outlined pill */
.site-div--carriere .nav a[href="espace-client.html"] { padding: 6px 14px; border: 1px solid var(--tile-2); border-radius: 999px; color: var(--ink); }
.site-div--carriere .nav a[href="espace-client.html"]:hover { border-color: var(--ink-2); }
@media (max-width: 1320px) and (min-width: 900px) { .site-div--carriere .nav .nav__back { display: none; } }

/* value proposition: four (or three) claims on a hairline grid */
.vp__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hair); }
.vp__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vp__grid li { padding: 26px 26px 30px 0; border-bottom: 1px solid var(--hair); }
.vp__grid li + li { padding-left: 26px; border-left: 1px solid var(--hair); }
.vp__grid b { display: block; font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; }
.vp__grid span { display: block; margin-top: 10px; color: var(--ink-2); }
.vp__more { margin-top: 30px; text-align: center; }
.bigfigs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; }
.bigfigs > div { padding: 30px 26px; border-radius: var(--r-md); background: var(--tile); }
.bigfigs dt { font-size: .85rem; color: var(--muted); }
.bigfigs dd { margin: 10px 0 0; font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.2rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.bigfigs dd small { font-size: .4em; letter-spacing: 0; color: var(--muted); }
.bigfigs p { margin-top: 12px; font-size: .92rem; color: var(--ink-2); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pillars article { display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--r-md); background: #FFF; }
.pillars__n { font: 600 .8rem var(--mono); color: var(--laterite); }
.pillars h3 { margin-top: 12px; font-size: 1.3rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.pillars p { margin-top: 10px; color: var(--ink-2); }
.pillars .link { margin-top: auto; padding-top: 16px; }
.chainline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: c; }
.chainline li { position: relative; padding: 26px 22px 0 0; border-top: 3px solid var(--laterite); }
.chainline li:last-child { border-top-color: var(--action); }
.chainline b { display: block; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.chainline span { display: block; margin-top: 6px; color: var(--ink-2); }
.chainline li::before { content: ''; position: absolute; left: 0; top: -9px; width: 15px; height: 15px; border-radius: 50%; background: #FFF; border: 3px solid var(--laterite); }
.chainline li:last-child::before { border-color: var(--action); }

/* the DG's words: her quote, set large, with her signature */
.dgword__t { margin-top: 10px; font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); font-weight: 600; line-height: 1.08; letter-spacing: -.04em; }
.dgword__q { margin-top: 22px; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.5; letter-spacing: -.015em; color: var(--ink-2); }
.dgword__q::before { content: ''; display: block; width: 44px; height: 3px; margin-bottom: 20px; border-radius: 2px; background: var(--laterite); }
.dgword__sig { margin-top: 20px; font-size: .95rem; color: var(--muted); }
.dgword__sig b { display: block; color: var(--ink); font-weight: 600; }
.dgword img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-lg); }
.pullquote { margin: clamp(40px, 5vw, 64px) auto 0; max-width: 860px; text-align: center; }
.pullquote p { font-size: clamp(1.3rem, 1.1rem + 1vw, 2rem); font-weight: 600; line-height: 1.3; letter-spacing: -.03em; }
.pullquote footer { margin-top: 16px; font-size: .9rem; color: var(--muted); }
.pullquote footer b { color: var(--ink); }

/* the Guiter method (valeur.html): principles, the DG's word, the ways of selling and producing, commitments */
.site-div--carriere .page-hero .eyebrow { margin-top: 14px; }
.tenets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: t; }
.tenets li { padding: 32px 28px; border-radius: var(--r-md); background: #FFF; }
.tenets span { font: 600 .8rem var(--mono); color: var(--laterite); }
.tenets b { display: block; margin-top: 14px; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.tenets p { margin-top: 12px; color: var(--ink-2); }
.dgword { margin: clamp(40px, 5vw, 72px) 0 0; display: grid; grid-template-columns: 4fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.ph--portrait { aspect-ratio: 4 / 5; }
.dgword blockquote { margin: 0; }
.dgword blockquote footer { margin-top: 18px; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.way__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.way__head { position: sticky; top: 96px; }
.way__items { display: grid; gap: 20px; }
.way__items article { padding: clamp(28px, 3vw, 40px); border-radius: var(--r-md); background: var(--tile); }
.div-sec--alt .way__items article { background: #FFF; }
.way__items h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); font-weight: 600; letter-spacing: -.035em; }
.way__items p { margin-top: 12px; color: var(--ink-2); font-size: 1.04rem; line-height: 1.6; }
.way__items .link { margin-top: 16px; }
.commit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.commit article { display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--r-md); background: var(--tile); border-top: 3px solid var(--laterite); }
.commit h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.025em; }
.commit p { margin-top: 10px; color: var(--ink-2); }
.commit .link { margin-top: auto; padding-top: 16px; }
@media (max-width: 899px) {
  .tenets, .dgword, .way__grid, .commit { grid-template-columns: minmax(0, 1fr); }
  .way__head { position: static; }
  .ph--portrait { aspect-ratio: 4 / 3; }
}

/* materials page: the seven concrete classes under the concrete block */
.pfam__more { margin-top: clamp(40px, 5vw, 64px); }
.pfam__k { margin-bottom: 20px; text-align: center; color: var(--muted); font-size: .92rem; }

/* materials page: advantages and further services */
.adv__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.adv__grid li { display: flex; flex-direction: column; padding: 28px 26px; border-radius: var(--r-md); background: var(--tile); }
.adv__grid b { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.adv__grid span { margin: 10px 0 18px; color: var(--ink-2); }
.adv__grid .link { margin-top: auto; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cards3 article { padding: 30px 28px; border-radius: var(--r-md); background: var(--tile); }
.cards3 h3 { margin-top: 12px; font-size: 1.3rem; font-weight: 600; letter-spacing: -.025em; }
.cards3 p:not(.tbc) { margin-top: 10px; color: var(--ink-2); }
.cards3 .tbc { margin-left: 0; }

/* home: the portal band and its preview */
.portal-band__in { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.portal-band__list { margin: 22px 0 28px; display: grid; gap: 8px; }
.portal-band__list li { position: relative; padding-left: 22px; color: var(--ink-2); }
.portal-band__list li::before { content: '✓'; position: absolute; left: 0; color: var(--action); font-weight: 700; }
.pprev { padding: 22px; border-radius: var(--r-lg); background: #FFF; box-shadow: 0 0 0 1px var(--hair), 0 50px 90px -50px rgba(0,0,0,.4); transform: rotate(-1.2deg); }
.pprev__bar { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--hair); font-size: .9rem; }
.pprev__bar span { color: var(--muted); }
.pprev__kpis { margin: 16px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pprev__kpis div { padding: 14px; border-radius: 14px; background: var(--tile); }
.pprev__kpis span { display: block; font-size: .72rem; color: var(--muted); }
.pprev__kpis b { display: block; margin-top: 4px; font-size: 1.4rem; font-weight: 600; letter-spacing: -.03em; }
.pprev__row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--hair); font-size: .82rem; }
.pprev__row i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--action) calc(var(--v) * 100%), var(--tile-2) 0); }
.pprev__row b, .pprev__ticket b { font: 600 .8rem var(--mono); }
.pprev__ticket { display: flex; justify-content: space-between; margin-top: 8px; padding: 12px 14px; border: 1.5px dashed var(--tile-2); border-radius: 12px; font: 500 .78rem var(--mono); color: var(--ink-2); }
.pprev__note { margin-top: 12px; font-size: .72rem; color: var(--faint); text-align: right; }

/* news */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#main > .div-sec .news-grid { margin-top: 24px; }
.news { display: flex; flex-direction: column; padding: 28px 26px; border-radius: var(--r-md); background: #FFF; box-shadow: 0 0 0 1px var(--hair); scroll-margin-top: 90px; }
.news:target { box-shadow: 0 0 0 2px var(--action); }
.news__meta { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; }
.news__meta span { font-weight: 600; color: var(--laterite); }
.news__meta time { color: var(--muted); font-family: var(--mono); }
.news h3 { margin-top: 14px; font-size: 1.3rem; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.news p:not(.news__meta) { margin-top: 10px; color: var(--ink-2); }
.news .link { margin-top: auto; padding-top: 16px; }
.news-grid:has(.news:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* social handles above the footer */
.social { padding-block: clamp(56px, 7vw, 96px); background: #FFF; border-top: 1px solid var(--hair); }
.social__in { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.social__t { margin-top: 8px; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.social__note { margin-top: 12px; font-size: .82rem; color: var(--faint); }
.social__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.social__link { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 16px; background: var(--tile); color: var(--ink); text-decoration: none; transition: background-color .2s, transform .3s var(--spring); }
.social__link:hover { background: var(--tile-2); transform: translateY(-2px); }
.social__link b { font-weight: 600; }
.social__link span { font: 500 .78rem var(--mono); color: var(--muted); }

/* the client portal (demo) */
.portal-sec { padding-block: 8px var(--sp); }
.portal-demo { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 20px; padding: 12px 16px; border-radius: 14px; background: #FFF8E6; color: #7A5A12; font-size: .9rem; }
.portal-demo b { font-weight: 700; }
.portal-gate { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(28px, 5vw, 72px); padding: clamp(28px, 4vw, 52px); border-radius: var(--r-lg); background: #FFF; box-shadow: 0 0 0 1px var(--hair), 0 40px 80px -50px rgba(0,0,0,.3); }
.portal-gate p { margin-top: 12px; color: var(--ink-2); }
.portal-gate__actions { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.portal-gate__list { display: grid; gap: 4px; border-top: 1px solid var(--hair); }
.portal-gate__list li { padding: 12px 0; border-bottom: 1px solid var(--hair); color: var(--ink-2); }
.portal-gate__list b { display: block; color: var(--ink); }
.portal { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 560px; border-radius: var(--r-lg); background: #FFF; box-shadow: 0 0 0 1px var(--hair), 0 40px 80px -50px rgba(0,0,0,.3); overflow: hidden; }
.portal[hidden] { display: none; }
.portal__nav { display: flex; flex-direction: column; gap: 2px; padding: 20px 14px; background: var(--tile); }
.portal__who { padding: 6px 10px 16px; }
.portal__who b { display: block; font-weight: 600; }
.portal__who span { font-size: .78rem; color: var(--muted); }
.portal__nav button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: .92rem; color: var(--ink-2); cursor: pointer; }
.portal__nav button:hover { background: var(--tile-2); }
.portal__nav button[aria-pressed="true"] { background: #FFF; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.portal__main { padding: clamp(20px, 3vw, 36px); min-width: 0; }
.portal__main h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; }
.portal__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; }
.portal__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.portal__kpis div { padding: 18px; border-radius: 16px; background: var(--tile); }
.portal__kpis span { display: block; font-size: .78rem; color: var(--muted); }
.portal__kpis b { display: block; margin-top: 6px; font-size: 1.6rem; font-weight: 600; letter-spacing: -.035em; }
.portal__kpis div.is-wide b { font-size: 1rem; letter-spacing: -.01em; line-height: 1.3; }
.ptable-wrap { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ptable th { padding: 10px 12px 10px 0; text-align: left; font-size: .75rem; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--hair); }
.ptable td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.ptable .num { font-family: var(--mono); text-align: right; }
.pbar { display: block; width: 140px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--action) calc(var(--v) * 100%), var(--tile-2) 0); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--tile); color: var(--ink-2); }
.pill--ok { background: #EAF5E9; color: var(--action-d); }
.pill--due { background: #FFF3E0; color: #9A5200; }
.portal__sub { margin: 26px 0 10px; font-size: 1rem; font-weight: 600; }
.portal__docs { display: grid; gap: 8px; }
.portal__docs li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--tile); }
.portal__docs span { color: var(--muted); font-size: .85rem; }
.btn--small { min-height: 38px !important; padding: 0 16px !important; font-size: .88rem !important; }

@media (max-width: 1100px) {
  .vp__grid, .adv__grid, .bigfigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp__grid li:nth-child(3) { padding-left: 0; border-left: 0; }
  .pillars, .news-grid, .cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .vp__grid, .vp__grid--3, .adv__grid, .bigfigs, .pillars, .news-grid, .news-grid:has(.news:nth-child(4)), .cards3, .chainline,
  .portal-band__in, .social__in, .portal-gate { grid-template-columns: minmax(0, 1fr); }
  .vp__grid li + li { padding-left: 0; border-left: 0; }
  .chainline { gap: 28px; }
  .social__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pprev { transform: none; }
  .portal { grid-template-columns: minmax(0, 1fr); }
  .portal__nav { flex-direction: row; overflow-x: auto; padding: 10px; }
  .portal__nav button { flex: none; }
  .portal__who { display: none; }
  .site-div--carriere .nav a[href="espace-client.html"] { padding: 6px 0; border: 0; }
}

/* ---------- home: material tiles, "Une base solide", brand cards (value proposition, careers) ---------- */
.mat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mat-tile { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--ink); color: #FFF; text-decoration: none; isolation: isolate; }
.mat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.2); transform-origin: 50% 0; transition: transform .9s var(--spring); }
/* the renders carry a scale bar in their bottom-left corner: the zoom above keeps it out of the tile, under the label */
.mat-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%); }
.mat-tile span { position: absolute; left: 18px; right: 18px; bottom: 16px; font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.mat-tile span::after { content: ' ›'; color: var(--gold); }
.mat-tile:hover img { transform: scale(1.26); }
.found__text { margin-top: clamp(32px, 4vw, 52px); max-width: 860px; }
.found__text .lead { max-width: none; }
.found__text .btn { margin-top: 26px; }
.brandcard { position: relative; overflow: hidden; isolation: isolate; padding: clamp(32px, 5vw, 72px); border-radius: var(--r-lg); background: var(--green-d); color: #FFF; }
.brandcard::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(../img/carriere/topo.svg) 0 0 / 900px 675px; opacity: .22; mix-blend-mode: screen; }
.brandcard--dark { background: var(--ink); }
.brandcard--dark::before { opacity: .16; }
.site-div--carriere .brandcard .eyebrow { color: var(--gold); }
.site-div--carriere .brandcard .h2 { color: #FFF; max-width: 16em; }
.brandcard__lead { margin-top: 18px; max-width: 40em; font-size: clamp(1.08rem, 1rem + .4vw, 1.35rem); line-height: 1.5; color: rgba(255,255,255,.86); }
.brandcard__claims { margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.18); }
.brandcard__claims li { padding: 18px 18px 0 0; }
.brandcard__claims b { display: block; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); font-weight: 600; letter-spacing: -.03em; color: var(--gold); }
.brandcard__claims span { display: block; margin-top: 4px; font-size: .92rem; color: rgba(255,255,255,.75); }
.brandcard__chips { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.brandcard__chips li { padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: .9rem; }
.brandcard .btn { margin-top: 34px; }
.site-div--carriere .btn--amber { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.site-div--carriere .btn--amber:hover { background: #FFC75E; }
.site-div--carriere .btn--amber::after { content: '→'; margin-left: 4px; transition: transform .3s var(--spring); }
.site-div--carriere .btn--amber:hover::after { transform: translateX(3px); }
@media (max-width: 1100px) { .mat-tiles, .brandcard__claims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .mat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mat-tile span { left: 14px; bottom: 12px; font-size: 1.05rem; }
  .brandcard__claims { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; }
  .brandcard .btn { width: 100%; }
}

/* ================================================================
   Rhythm: one vertical scale for the whole site
   ================================================================ */
.site-div--carriere { --sp: clamp(56px, 6.5vw, 104px); }
.site-div--carriere .section-head { margin-bottom: clamp(28px, 3.5vw, 52px); }
/* two sections on the same background read as one surface: the second one does not add its own top padding */
.site-div--carriere main > :is(.div-sec:not(.div-sec--alt):not(.div-sec--dark), .zoom:not(.is-scrub), .contact) + :is(.div-sec:not(.div-sec--alt):not(.div-sec--dark), .zoom:not(.is-scrub)),
.site-div--carriere main > :is(.div-sec--alt, .div-sec--dark) + :is(.div-sec--alt, .div-sec--dark) { padding-top: 0; }
/* an inner page's first white section follows its hero closely */
.site-div--carriere main > .page-hero + :is(.div-sec:not(.div-sec--alt):not(.div-sec--dark), .contact, .portal-sec) { padding-top: clamp(8px, 1.5vw, 24px); }
.site-div--carriere .page-hero { padding-bottom: clamp(36px, 4.5vw, 64px); }
.ahero { padding-bottom: clamp(48px, 6vw, 96px); }
.site-div--carriere .div-cta { padding-block: clamp(56px, 6.5vw, 104px); }
.site-div--carriere main > :is(.div-sec:not(.div-sec--alt):not(.div-sec--dark), .contact) + .div-cta { padding-top: clamp(40px, 4.5vw, 72px); }
.site-div--carriere .div-cta + .social, .site-div--carriere main + .social { border-top: 1px solid var(--hair); }
.social { padding-block: clamp(48px, 5.5vw, 88px); }
.site-div--carriere .footer { padding-top: clamp(48px, 5.5vw, 80px); }
/* the social band above the footer replaces the footer's own "Suivez-nous" column */
.site-div--carriere .footer__grid > div:last-child { display: none; }
.site-div--carriere .footer__grid { grid-template-columns: 2fr 1fr 1fr; }
.site-div--carriere .todo--inline { margin-top: 18px; }
.vp__more, .zoom__all { margin-top: 28px; }
.coverage { margin-bottom: clamp(28px, 3.5vw, 48px); }
@media (max-width: 899px) {
  .site-div--carriere { --sp: 56px; }
  .site-div--carriere .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-div--carriere::before { transform: none; top: 0; }
  .cmap__halo { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-div--carriere .header, .finder-mini { background: #FFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .site-div--carriere { --muted: #424245; --faint: #57575C; --hair: rgba(0,0,0,.25); }
}