/* ==========================================================================
   Closing footer (homepage)
   ==========================================================================
   One ink block that ends the page: the wordmark and the navigation in five
   columns, the legal row, then the CII agreement centred at the foot with the
   copyright, the way Galadrim closes its page (Hulusi's reference, 15
   September). The invitation itself lives in the contact section above.

   It is the page's fixed layer: the contact section above slides over it
   (rules below, script in assets/js/closing-reveal.js). Without JavaScript,
   or with reduced motion, it is a normal footer in the flow.

   LINK INVENTORY: the same families as before (Menu, Expertises,
   Technologies, Agences, Contact, legal, certifications). Old paths keep their
   trailing slashes; read docs/SEO.md before touching a destination.
   ========================================================================== */

.footer--closing {
  --footer-fg: #fdfdfe;        /* the canvas white, restated: see the override below */
  --footer-muted: #a3a9b3;     /* 7.7:1 on the ink */
  --footer-line: rgb(255 255 255 / .14);
  position: relative;
  background: var(--ed-ink);
  color: var(--footer-fg);
  overflow: clip;
}
/* method-human.css paints every section after the method white, the footer
   included (".home-editorial > .footer"), and rewrites --ed-canvas while it is
   at it. Same specificity, later in the cascade: the closing footer keeps its
   ink, and its foreground does not read that variable. */
.home-editorial > .footer--closing { background: var(--ed-ink); }

/* The fixed layer. main carries the higher z-index and an opaque canvas, so
   the footer stays hidden until the last section lifts past the fold.
   closing-reveal.js sets data-reveal on the wrapper from what fits below the
   sticky navbar:

     bottom  the footer fits: stuck to the fold, uncovered from its bottom
             edge up, like a classic fixed footer
     top     the footer is taller (phones): stuck under the navbar while the
             page lifts off its first screenful, then scrolling on to the foot

   The pin sits under the navbar (80px, 72px on phones, the figures the
   showreel and the method use), so a pinned footer never hides its first row
   behind the bar. */
.home-editorial { --closing-pin-top: 81px; }
.closing-wrap { position: relative; }
.footer--closing { position: relative; z-index: 0; overflow: clip; }
.home-editorial main { position: relative; z-index: 2; background: var(--ed-canvas); }

/* Sticky can only move the footer within its wrapper, and a wrapper exactly
   the footer's height gives it no room at all (the bug Hulusi caught on 15
   September: "the footer needs to reveal"). Each mode gets a screenful of
   room on the side it needs, hidden under main, with a negative margin
   keeping the page's length.

   Bottom mode: the room is above. The footer keeps its natural place at the
   end of the page and sticky lifts it to the fold from there. */
.closing-wrap[data-reveal="bottom"] { margin-top: calc(-100vh + var(--closing-pin-top)); }
.closing-wrap[data-reveal="bottom"]::before { content: ""; display: block; height: calc(100vh - var(--closing-pin-top)); }
.closing-wrap[data-reveal="bottom"] > .footer--closing { position: sticky; bottom: 0; }

/* Top mode: the room is below. The footer starts one screenful early, under
   main, and sticky holds it under the navbar until the page has lifted off
   its first screenful. */
.closing-wrap[data-reveal="top"] > .footer--closing { position: sticky; top: var(--closing-pin-top); margin-top: calc(-100vh + var(--closing-pin-top)); }
.closing-wrap[data-reveal="top"]::after { content: ""; display: block; height: calc(100vh - var(--closing-pin-top)); }

/* Inner parallax: closing-reveal.js writes a transform on this wrapper while
   the page uncovers the footer, so the content trails the scroll over the
   footer's own ink. The layer is only promoted while a mode is set. */
.closing-wrap[data-reveal] > .footer--closing > .reveal__inner { will-change: transform; }

@media (max-width: 767px) { .home-editorial { --closing-pin-top: 73px; } }

@media (prefers-reduced-motion: reduce) {
  .closing-wrap[data-reveal] { margin-top: 0; }
  .closing-wrap[data-reveal] > .footer--closing { position: relative; margin-top: 0; }
  .closing-wrap[data-reveal]::before,
  .closing-wrap[data-reveal]::after { content: none; }
}

/* One column for every band, the editorial container. */
.footer__col {
  width: min(100% - var(--ed-gutter) * 2, var(--ed-container));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   1. Navigation
   -------------------------------------------------------------------------- */
.footer__nav-band { padding-top: clamp(2.5rem, 4vw, 3.5rem); }
.footer__nav-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 2.5rem;
}
.footer__brand { grid-column: 1 / span 3; }

/* The one display moment of the block: the wordmark on two lines. */
.footer__wordmark {
  display: inline-block;
  width: fit-content;
  font-size: clamp(3rem, 5.5vw, 5.25rem);
  line-height: .93;
  letter-spacing: -.045em;
  font-weight: 500;
  color: var(--footer-fg);
  text-decoration: none;
}

.footer__nav { grid-column: 4 / -1; min-width: 0; }
/* Columns size to their longest link and the leftover goes between them, so
   "Toutes les technologies" keeps to one line and nothing overflows when the
   space is short: auto tracks shrink toward their longest word first. */
.footer__columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: space-between;
  column-gap: 1.5rem;
  row-gap: 2rem;
}
.footer__col-label { font-size: var(--ed-label); line-height: 1.4; font-weight: 500; color: var(--footer-muted); }
.footer__col-label + .footer__col-label,
.footer__col-links + .footer__col-label { margin-top: 1.25rem; }
.footer__col-links { margin-top: .625rem; display: flex; flex-direction: column; gap: .25rem; }
.footer__col-links a {
  display: inline-block;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--footer-fg);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.footer__col-links a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   2. Legal row
   -------------------------------------------------------------------------- */
.footer__legal {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 2rem;
  row-gap: .75rem;
  border-top: 1px solid var(--footer-line);
  padding-block: 1.25rem;
  font-size: var(--ed-label);
  line-height: 1.4;
  color: var(--footer-muted);
}
.footer__legal ul { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.5rem; row-gap: .5rem; }
.footer__legal a { color: var(--footer-muted); text-decoration: none; text-underline-offset: 4px; }
.footer__legal a:hover { color: var(--footer-fg); text-decoration: underline; }
.footer__sep { display: none; }
@media (min-width: 640px) { .footer__sep { display: block; } }

/* --------------------------------------------------------------------------
   3. Certification, centred at the foot
   -------------------------------------------------------------------------- */
.footer__cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  border-top: 1px solid var(--footer-line);
  padding-block: 2.5rem 2rem;
  text-align: center;
}
/* The badge in the footer's own grey: a mark, not a colour event. */
.footer__cert img { width: 4.5rem; height: 4.5rem; filter: grayscale(1); opacity: .72; }
.footer__cert-title { font-size: var(--ed-label); line-height: 1.4; font-weight: 500; color: var(--footer-fg); }
.footer__cert-body { max-width: 62ch; font-size: var(--ed-label); line-height: 1.45; color: var(--footer-muted); }
.footer__copyright { margin-top: .75rem; font-size: var(--ed-label); line-height: 1.4; color: var(--footer-muted); }

.footer--closing :where(a, button):focus-visible { outline: 2px solid var(--footer-fg); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .footer__brand { grid-column: 1 / -1; }
  .footer__nav { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__legal { flex-direction: column; align-items: flex-start; }
}

/* The same footer on every page (24 Sept): off the homepage the wrapper
   carries .editorial for the tokens, so the ink band and column width match. */
.closing-wrap.editorial { background: transparent; }
.closing-wrap.editorial > .footer--closing { background: var(--ed-ink); }
/* Pages that paint every section white (service pages) must not paint the
   footer's own bands. */
.footer--closing section { background: transparent; }

/* Certifications as stickers (7 Oct 2026, Hulusi: overlap them, sticker
   on hover). Each badge sits on a white die-cut edge with a soft shadow and
   its own small tilt; they overlap like stickers slapped on a laptop. Under
   the pointer the stack spreads; the hovered one lifts, straightens, grows
   and a light sheen crosses it. Used in the footer and the About count tile.
   Round seals: .sticker. The old site's square badges: .sticker--tile. */
.stickers { --s: 2.75rem; display: flex; align-items: center; padding: .5rem .25rem; }
.sticker { position: relative; flex: none; width: var(--s); height: var(--s); padding: 3px; border-radius: 50%; background: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / .25), 0 6px 14px -6px rgb(0 0 0 / .5); transform: rotate(var(--r, 0deg));
  transition: transform 450ms cubic-bezier(.2, .8, .2, 1), margin 450ms cubic-bezier(.2, .8, .2, 1), box-shadow 300ms ease; }
.sticker--tile { border-radius: 24%; }
.sticker img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; filter: none; opacity: 1; }
.sticker::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .7) 48%, transparent 66%); transform: translateX(-130%); }
.sticker + .sticker { margin-left: calc(var(--s) * -.3); }
@media (hover: hover) and (pointer: fine) {
  .stickers:hover .sticker + .sticker { margin-left: .375rem; }
  .sticker:hover { z-index: 3; transform: translateY(-.375rem) rotate(0deg) scale(1.2); box-shadow: 0 2px 4px rgb(0 0 0 / .2), 0 18px 30px -12px rgb(0 0 0 / .6); }
  .sticker:hover::after { transform: translateX(130%); transition: transform 750ms cubic-bezier(.2, .8, .2, 1); }
}
@media (prefers-reduced-motion: reduce) { .sticker, .sticker::after { transition: none; } .sticker:hover::after { transform: translateX(-130%); } }

.footer__seals { display: grid; gap: .5rem; justify-items: start; margin: 1.25rem 0 .25rem; color: rgb(255 255 255 / .72); font-size: .875rem; text-decoration: none; }
.footer__seals-text { color: #fff; font-weight: 500; }
.footer__seals:hover .footer__seals-text { text-decoration: underline; text-underline-offset: .2em; }
.footer__seals:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* 15 Oct, round 3 (Hulusi: "how can we make it more wow"). The two
   credentials become two sharp cards, each led by one big sign: "20 %" in
   cobalt for the CII, the [N] mark for France Num. The card's dream plate
   wakes up on hover (soft light), the France Num card carries the site's
   corner arrow because it links out. Short lines, no paragraph. */
.footer__creds { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; max-width: 36rem; }
.footer__cred { position: relative; isolation: isolate; overflow: hidden; background: #1b1e22; }
.footer__cred::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url('../../img/backgrounds/dream/figma/card/ai-bg-096.webp') center / cover; mix-blend-mode: soft-light; opacity: .18; transition: opacity 500ms ease; }
.footer__cred--fn::before { background-image: url('../../img/backgrounds/dream/figma/card/ai-bg-043.webp'); }
.footer__cred:hover::before, .footer__cred:focus-within::before { opacity: .55; }
.footer__cred, .footer__cred-link { display: flex; flex-direction: column; min-height: 15rem; padding: 1.25rem 1.25rem 1.375rem; color: inherit; text-decoration: none; }
.footer__cred:has(> .footer__cred-link) { padding: 0; }
.footer__cred-link { flex: 1; }
.footer__cred-top { display: flex; justify-content: flex-end; height: 2.25rem; }
.footer__cred-top img { width: 2.25rem; height: 2.25rem; filter: grayscale(1); opacity: .7; }
.footer__cred-arrow { width: 1.375rem; height: 1.375rem; color: var(--brand); transition: transform 300ms ease; }
.footer__cred-link:hover .footer__cred-arrow { transform: translate(2px, -2px); }
.footer__cred-big { margin-top: auto; font-size: clamp(2.75rem, 4vw, 3.5rem); line-height: .9; font-weight: 500; letter-spacing: -.045em; color: var(--brand); }
.footer__cred-big--mark { width: 4.25rem; height: auto; filter: brightness(0) invert(1); }
.footer__cred-text { display: grid; gap: .25rem; margin-top: .875rem; font-size: var(--ed-label); line-height: 1.4; color: var(--footer-muted); }
.footer__cred-text b { font-weight: 500; color: var(--footer-fg); }
@media (max-width: 479px) { .footer__creds { grid-template-columns: 1fr; } .footer__cred, .footer__cred-link { min-height: 12rem; } }
@media (prefers-reduced-motion: reduce) { .footer__cred::before, .footer__cred-arrow { transition: none; } }
/* Win over the older `.footer__cert img` badge rule. */
.footer__cert .footer__cred-top img { width: 2.25rem; height: 2.25rem; filter: grayscale(1); opacity: .7; }
.footer__cert img.footer__cred-big--mark { width: 4.25rem; height: auto; filter: brightness(0) invert(1); opacity: 1; }

/* 20 Oct (Hulusi: "these two cards should match"). One grid for both cards,
   row by row: a 2.25rem top row (badge / arrow, both 2.25rem, right), a
   3.5rem sign row (the "20 %" and the [N] mark sit on the same baseline at
   the same height), then title and line. Same padding, same height. */
.footer__cred, .footer__cred-link { display: grid; grid-template-rows: 2.25rem 1fr auto; min-height: 15rem; }
.footer__cred:has(> .footer__cred-link) { display: block; }
.footer__cred-top { align-items: center; }
.footer__cred-arrow { width: 2.25rem; height: 2.25rem; padding: .375rem; }
.footer__cred-big { margin: 0; align-self: end; height: 3.5rem; display: flex; align-items: flex-end; font-size: 3.5rem; line-height: .8; }
.footer__cert img.footer__cred-big--mark { height: 2.6rem; width: auto; align-self: end; margin-bottom: .1rem; }
.footer__cred-text { margin-top: .875rem; min-height: 4.2em; }
/* Fixed rows, so the two cards line up exactly: top 36px, free space, the
   sign in a 56px row (both bottom-aligned), the text block in a fixed
   4-line row (titles on the same line in both cards). */
.footer__creds .footer__cred, .footer__creds .footer__cred-link { grid-template-rows: 2.25rem 1fr 3.5rem 6.75rem; min-height: 16.5rem; }
.footer__creds .footer__cred:has(> .footer__cred-link) { display: block; min-height: 0; }
.footer__creds .footer__cred-big { grid-row: 3; align-self: end; }
.footer__creds .footer__cred-text { grid-row: 4; align-self: start; min-height: 0; }
/* 20 Oct: the CII badge larger (Hulusi), the top row grows with it in both
   cards so they stay aligned; the arrow stays its size, top right. */
.footer__creds .footer__cred, .footer__creds .footer__cred-link { grid-template-rows: 4rem 1fr 3.5rem 6.75rem; min-height: 18rem; }
.footer__creds .footer__cred:has(> .footer__cred-link) { min-height: 0; }
.footer__cred-top { height: 4rem; align-items: flex-start; }
.footer__cert .footer__cred-top img { width: 4rem; height: 4rem; opacity: .85; }
.footer__creds .footer__cred, .footer__creds .footer__cred-link { grid-template-rows: 4rem 1fr 3.5rem 5rem; min-height: 16.5rem; }
.footer__creds .footer__cred:has(> .footer__cred-link) { min-height: 0; }
/* 20 Oct: the CII badge sits top left, on the text's left edge (Hulusi); the
   France Num arrow stays top right (it marks the link). */
.footer__cred--cii .footer__cred-top { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   SEO link groups (21 Oct 2026). The live footer's six folded groups, same
   titles and links. One row per group, title and chevron, the links in
   columns once open. No rules between rows: spacing only.
   -------------------------------------------------------------------------- */
.footer__more { margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.footer__more-group summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: .875rem; cursor: pointer; list-style: none;
  font-size: 1.125rem; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; color: var(--footer-fg);
}
.footer__more-group summary::-webkit-details-marker { display: none; }
.footer__more-group summary svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: var(--footer-muted); transition: transform 200ms ease; }
.footer__more-group[open] summary svg { transform: rotate(180deg); }
.footer__more-group summary:hover { color: #fff; }
.footer__more-group summary:focus-visible { outline: 2px solid var(--brand, #0052f8); outline-offset: 2px; }
.footer__more-links { columns: 16rem auto; column-gap: 2rem; padding: .25rem 0 1.5rem; margin: 0; list-style: none; }
.footer__more-links li { break-inside: avoid; padding-block: .1875rem; }
.footer__more-links a { font-size: .9375rem; line-height: 1.4; color: var(--footer-muted); text-decoration: none; text-underline-offset: 4px; }
.footer__more-links a:hover { color: var(--footer-fg); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .footer__more-group summary svg { transition: none; } }

/* 21 Oct 2026 (Hulusi): the certifications sit in the legal row, on the right;
   the copyright is the last line of the footer, under the link groups. */
.footer__legal .footer__seals { display: flex; align-items: center; gap: .875rem; margin: 0 0 0 auto; }
.footer__legal .stickers { --s: 2.25rem; padding: 0; }
.footer__more + .footer__copyright { margin-top: 0; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.footer__more:has(+ .footer__copyright) { padding-bottom: 1.5rem; }
@media (max-width: 639px) { .footer__legal .footer__seals { margin-left: 0; } }