/* Français en Colombie, page de fin d'activité (1er novembre 2026)
   Charte : Exo 2, Skobeloff Blue #275a5e, Maximum Blue #49b8bf, Crystal Blue #9fd1d4 */

/* Polices auto-hébergées (SIL Open Font License, voir assets/fonts/OFL-Exo2.txt) */
@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/exo-2-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/exo-2-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/exo-2-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/exo-2-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --skobeloff: #275a5e;
  --maximum: #49b8bf;
  --crystal: #9fd1d4;
  --white: #ffffff;
  --mist: #edf8f9;              /* Maximum Blue 10 % */
  --line: rgba(39, 90, 94, 0.32);
  --line-light: rgba(255, 255, 255, 0.18);

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
  --corner: clamp(88px, 19vw, 300px);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Exo 2", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--skobeloff);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
sup { font-size: 0.6em; line-height: 0; vertical-align: 0.6em; }
::selection { background: var(--crystal); color: var(--skobeloff); }

:focus-visible {
  outline: 2px solid var(--maximum);
  outline-offset: 4px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}

/* Langues : seul le bloc de la langue active est affiché */
[data-ui="fr"] [data-l="es"],
[data-ui="es"] [data-l="fr"] { display: none !important; }

.accent { color: var(--maximum); }
.nowrap { white-space: nowrap; }

/* Petit repère "goutte" issu du symbole */
.drop { width: 0.62em; height: 0.92em; fill: var(--maximum); flex: none; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ============ HERO ============ */
.hero { background: var(--maximum); }

.hero__panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--skobeloff);
  color: var(--white);
  border-bottom-left-radius: var(--corner);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: clamp(24px, 4vw, 48px);
}

.hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hero__logo { width: clamp(168px, 19vw, 248px); height: auto; }

.hero__meta { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }

.hero__date {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hero__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 44rem;
  padding-block: clamp(56px, 9vh, 112px) calc(var(--corner) * 0.62);
}

.hero__body .eyebrow { color: var(--crystal); }

.hero h1 {
  margin: 0.45em 0 0.38em;
  font-size: clamp(3rem, 1.4rem + 6.4vw, 7.4rem);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.hero h1 .accent { display: block; }

.hero__lead {
  max-width: 33rem;
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.35rem);
  line-height: 1.55;
}
.hero__lead strong { font-weight: 650; white-space: nowrap; }

.hero__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  margin-top: clamp(28px, 4vh, 44px);
  padding: 0.85em 1.4em 0.85em 1.5em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero__cta svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.hero__cta:hover { background: var(--white); color: var(--skobeloff); border-color: var(--white); }
.hero__cta:hover svg { transform: translateY(3px); }

/* Sélecteur de langue */
.lang-switch {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.js .lang-switch { display: inline-flex; }
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 34px;
  padding: 0 0.75em;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-switch a:hover { background: rgba(255, 255, 255, 0.14); }
.lang-switch a[aria-current="true"] { background: var(--white); color: var(--skobeloff); }

/* Symbole tracé en grand, clin d'œil aux pages de la charte */
.hero__art {
  position: absolute;
  z-index: 1;
  right: clamp(16px, 5vw, 96px);
  bottom: clamp(56px, 12vh, 140px);
  width: min(44vw, 620px);
  pointer-events: none;
}
.hero__art svg { width: 100%; height: auto; overflow: visible; }


.art-main {
  fill: none;
  stroke: var(--white);
  stroke-width: 0.7;
  stroke-linejoin: round;
}
.art-drop { fill: var(--maximum); transform-box: fill-box; transform-origin: 50% 0; }
.echo-path { fill: none; stroke: var(--white); stroke-width: var(--echo-w, 0.34); }

/* ============ SECTIONS ============ */
.section { padding-block: clamp(72px, 10vw, 136px); }

/* En-tête courant, comme les pages de la charte */
.runner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: clamp(32px, 5vw, 80px);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}
.runner > * { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.runner__right { display: flex; justify-content: space-between; gap: 24px; }
.runner__num { font-variant-numeric: tabular-nums; }

.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: 40px;
  margin-top: clamp(44px, 6vw, 88px);
}

.split__head { align-self: start; position: sticky; top: 48px; }

.section h2 {
  font-size: clamp(2.3rem, 1.5rem + 3vw, 3.75rem);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.split__intro { margin-top: 1.1em; max-width: 24rem; font-size: 1.05em; }

/* Chapitres */
.chapters { list-style: none; margin: 0; padding: 0; }
.chapter {
  display: grid;
  grid-template-columns: clamp(3.6rem, 6vw, 5.5rem) 1fr;
  gap: 8px clamp(16px, 2vw, 28px);
  padding-block: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line);
}
.chapter:last-child { border-bottom: 1px solid var(--line); }
.chapter__num {
  font-size: clamp(2.1rem, 1.6rem + 1.6vw, 3rem);
  font-weight: 300;
  line-height: 1;
  color: var(--maximum);
  font-variant-numeric: tabular-nums;
}
.chapter h3 {
  margin-bottom: 0.45em;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 650;
  line-height: 1.25;
}
.chapter p { max-width: 38rem; }
.chapter .chapter__date {
  display: inline-block;
  margin-bottom: 0.7em;
  padding: 0.2em 0.85em;
  border-radius: 999px;
  background: var(--mist);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============ MOT DE LA FIN ============ */
.closing {
  --cut-top: 40%;
  --cut-bottom: 22%;
  --stripe: 14px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background: var(--maximum) url("../img/motif.svg") repeat;
  background-size: 128px auto;
  background-position: -22px -16px;
}
.closing__stripe,
.closing__panel { position: absolute; inset: 0; z-index: 0; }
.closing__stripe {
  background: var(--white);
  clip-path: polygon(calc(var(--cut-top) - var(--stripe)) 0, 100% 0, 100% 100%, calc(var(--cut-bottom) - var(--stripe)) 100%);
}
.closing__panel {
  overflow: hidden;
  background: var(--skobeloff);
  clip-path: polygon(var(--cut-top) 0, 100% 0, 100% 100%, var(--cut-bottom) 100%);
}
.closing__echo {
  position: absolute;
  right: -12%;
  top: 50%;
  width: min(62vw, 900px);
  transform: translateY(-50%);
  opacity: 0.12;
  --echo-w: 0.45;
}
.closing__echo svg { width: 100%; height: auto; overflow: visible; }

.closing__inner {
  position: relative;
  z-index: 1;
  padding: clamp(96px, 12vw, 168px) var(--gutter) clamp(96px, 12vw, 168px) calc(var(--cut-top) + 6vw);
}
.closing__content { max-width: 36rem; }
.closing .eyebrow { color: var(--crystal); }

.statement {
  margin: 0.55em 0 0.6em;
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.statement .accent { display: block; }

.closing__text { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); max-width: 31rem; }

.signature {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 24px;
  border-top: 1px solid var(--line-light);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.signature img { width: 44px; height: auto; }

/* ============ PIED DE PAGE ============ */
.footer {
  background: var(--skobeloff);
  color: var(--crystal);
  font-size: 0.875rem;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-block: 28px;
  border-top: 1px solid var(--line-light);
}
.footer__brand { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer__brand img { width: 150px; height: auto; }
.footer__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }

/* ============ ANIMATIONS ============ */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.9s var(--ease) both; }
  .rise--1 { animation-delay: 0.1s; }
  .rise--2 { animation-delay: 0.25s; }
  .rise--3 { animation-delay: 0.4s; }
  .rise--4 { animation-delay: 0.55s; }
  .rise--5 { animation-delay: 0.7s; }
  .art-main { animation: draw 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both; }
  .art-drop { animation: drop-in 1s var(--ease) 2.2s both; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
/* Le pointillé ne sert qu'au tracé : il est retiré à la fin pour que le contour se referme sans jointure */
@keyframes draw {
  0% { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  99.9% { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
  100% { stroke-dasharray: none; stroke-dashoffset: 0; }
}
@keyframes drop-in {
  from { opacity: 0; transform: translateY(-18%); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
  .runner, .split { grid-template-columns: 1fr; }
  .runner__left { display: none; }
  .split__head { position: static; }
  .hero__body { max-width: 36rem; padding-bottom: calc(34vw + 40px); }
  .hero__art { width: 40vw; bottom: 40px; }
}

@media (max-width: 760px) {
  .hero__date { font-size: 0.85rem; }
  .hero__art {
    width: 54vw;
    right: 16px;
    bottom: 22px;
  }
  .art-main { stroke-width: 1.2; }
  .hero__body { padding-bottom: calc(46vw + 24px); }

  .closing {
    --cut-left: 150px;
    --cut-right: 72px;
    --stripe: 12px;
    background-size: 104px auto;
  }
  .closing__stripe {
    clip-path: polygon(0 calc(var(--cut-left) - var(--stripe)), 100% calc(var(--cut-right) - var(--stripe)), 100% 100%, 0 100%);
  }
  .closing__panel {
    clip-path: polygon(0 var(--cut-left), 100% var(--cut-right), 100% 100%, 0 100%);
  }
  .closing__echo { width: 110vw; right: -45vw; top: 62%; --echo-w: 0.8; }
  .closing__inner { padding: calc(var(--cut-left) + 48px) var(--gutter) 88px; }
}

@media (max-width: 560px) {
  .hero__date { display: none; }
}

@media (max-width: 420px) {
  .hero__logo { width: 150px; }
  .chapter { grid-template-columns: 1fr; }
}