/* Kit de presse (/kit-de-presse/) — chargé par layouts/pages/kit-de-presse.html uniquement.
   Tout est porté sous .kit pour ne rien toucher au reste du site. */

/* Couleurs et polices : celles du site (data/theme.json → --color-*, --font-*), jamais redéfinies ici.
   Ne restent locales que les mesures propres à cette page. */
.kit {
  --gouttiere: clamp(16px, 3.2vw, 48px);
  --rayon: clamp(24px, 3vw, 40px);
  --trait: 1.5px solid var(--color-primary);
  /* Hauteur de l’en-tête collant du site ; valeur de repli, la page la mesure au chargement. */
  --entete: 99px;
}
.kit {
  background: var(--color-body);
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.kit ::selection {
  background: var(--color-primary);
  color: var(--color-joie);
}
.kit :focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
.kit img {
  display: block;
  max-width: 100%;
  height: auto;
}
.kit h1,
.kit h2,
.kit p,
.kit dl,
.kit dd {
  margin: 0;
}

/* ——— Sommaire latéral : uniquement quand l'écran a la place ——— */
.kit .sommaire {
  display: none;
}
@media screen and (min-width: 1180px) {
  .kit {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
  }
  .kit .sommaire {
    position: sticky;
    top: var(--entete);
    z-index: 2;
    align-self: start;
    height: calc(100vh - var(--entete));
    padding: 36px 20px;
    display: flex;
    flex-direction: column;
    gap: 36px;
    overflow-y: auto;
    background: var(--color-body);
    border-right: var(--trait);
  }
  .kit .sommaire ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
  }
  .kit .sommaire ol a {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
  }
  .kit .sommaire ol a:hover {
    background: var(--color-secondary);
  }
  .kit .sommaire ol a[aria-current] {
    background: var(--color-joie);
  }
}

/* ——— Couverture ——— */
.kit .couverture {
  width: min(100% - 2 * var(--gouttiere), 1228px);
  margin: var(--gouttiere) auto;
  min-height: min(100svh - 2 * var(--gouttiere), 620px);
  padding: clamp(20px, 3.4vw, 56px);
  border-radius: var(--rayon);
  background-color: var(--color-joie);
  /* Le papier quadrillé des visuels de marque (key visual, « Quelques chiffres »). */
  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--color-primary) 9%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-primary) 9%, transparent) 1px,
      transparent 1px
    );
  background-size: 72px 72px;
  background-position: -1px -1px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "logo date"
    ". ."
    "titre accroche";
  column-gap: clamp(24px, 4vw, 72px);
  row-gap: clamp(20px, 3vh, 40px);
}
.kit .couverture__logo {
  grid-area: logo;
  width: clamp(132px, 13vw, 212px);
}
.kit .couverture__date {
  grid-area: date;
  justify-self: end;
  align-self: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.kit .couverture h1 {
  grid-area: titre;
  align-self: end;
  font-family: var(--font-accent);
  font-weight: 900;
  font-size: clamp(5rem, 14vw, 11rem);
  line-height: 0.84;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  /* La Condensed Black descend sous sa boîte : on rattrape pour poser le titre sur la marge. */
  margin-bottom: -0.06em;
}
.kit .couverture h1 span {
  display: block;
}
.kit .couverture__accroche {
  grid-area: accroche;
  align-self: end;
  font-family: var(--font-accent);
  font-weight: 900;
  font-size: clamp(1.625rem, 2.7vw, 2.625rem);
  line-height: 1.24;
  text-wrap: balance;
}
/* Cartouches : le <mark> du site (custom.css), jaune par défaut. Sur un aplat de couleur il passe
   au fond clair, comme le site le fait pour ses cartes .bg-*. --fond sert à l'animation. */
.kit mark {
  --fond: var(--color-joie);
}
.kit .couverture mark,
.kit .panneau mark {
  --fond: var(--color-body);
  background: var(--fond);
}

@media screen {
  .kit .couverture__logo {
    display: none;
  }
  .kit .couverture__date {
    grid-area: logo;
    justify-self: start;
  }
}

/* ——— Sections ——— */
.kit .kit-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(72px, 11vw, 168px) var(--gouttiere) clamp(56px, 8vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(24px, 5vw, 88px);
}
/* Une section sur deux sur l'autre beige de la charte, en bande pleine largeur. */
@media screen {
  .kit .kit__sections > .kit-section:nth-child(odd) {
    background: var(--color-secondary);
    box-shadow: 0 0 0 100vmax var(--color-secondary);
    clip-path: inset(0 -100vmax);
  }
}
.kit .kit-section__tete {
  align-self: start;
}
.kit .kit-section h2 {
  scroll-margin-top: calc(var(--entete) + 32px);
  font-family: var(--font-accent);
  font-weight: 900;
  font-size: clamp(2.75rem, 5.6vw, 5rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.kit .kit-section__illus {
  width: clamp(120px, 15vw, 196px);
  margin-top: clamp(28px, 4vw, 56px);
}

.kit .chapo {
  max-width: 34ch;
  font-size: clamp(1.25rem, 1.75vw, 1.5rem);
  line-height: 1.42;
  font-weight: 500;
  text-wrap: pretty;
}
.kit .constat {
  margin-top: clamp(28px, 4vw, 52px);
  font-family: var(--font-accent);
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.008em;
  max-width: 21ch;
  text-wrap: balance;
}

/* Emphase manuelle de la charte (10 Emphases) : soulignage au trait, à main levée. */
.kit .souligne {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.kit .souligne svg {
  position: absolute;
  left: -2%;
  bottom: -0.12em;
  width: 104%;
  height: 0.26em;
  overflow: visible;
  z-index: -1;
}
.kit .souligne path {
  fill: none;
  stroke: var(--color-joie);
  stroke-width: 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.kit .constat {
  position: relative;
  z-index: 0;
}

.kit .reperes {
  margin-top: clamp(48px, 7vw, 96px);
  border-top: var(--trait);
}
.kit .reperes > div {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 9fr);
  column-gap: clamp(20px, 3vw, 48px);
  padding: clamp(20px, 2.4vw, 32px) 0 clamp(22px, 2.6vw, 36px);
  border-bottom: var(--trait);
}
.kit .reperes dt {
  font-family: var(--font-accent);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  line-height: 1.08;
  text-wrap: balance;
}
.kit .reperes dd {
  max-width: 62ch;
  text-wrap: pretty;
}

/* ——— Blocs communs aux sections ——— */
.kit .kit-section > .large {
  grid-column: 1 / -1;
  margin-top: clamp(40px, 6vw, 88px);
}
.kit .kit-section > .suite {
  grid-column: 2;
}
.kit .texte {
  margin-top: clamp(24px, 3vw, 40px);
  max-width: 62ch;
}
.kit .texte p + p {
  margin-top: 1em;
}
.kit figure {
  margin: 0;
}
.kit figcaption {
  margin-top: 14px;
  font-size: 0.875rem;
  font-weight: 600;
}
.kit a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}
.kit a:hover {
  text-decoration-thickness: 4px;
}

.kit .ecrans {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
}
.kit .ecrans img {
  width: 100%;
  border-radius: clamp(12px, 1.6vw, 22px);
}

.kit .panneau {
  padding: clamp(22px, 3.2vw, 48px);
  border-radius: var(--rayon);
}
.kit .panneau--bleu {
  background: var(--color-peur);
}
.kit .panneau--vert {
  background: var(--color-trouble);
}
.kit .panneau--violet {
  background: var(--color-surprise);
}
.kit .panneau .reperes,
.kit .panneau.reperes {
  margin-top: 0;
  border-top: 0;
}
.kit .panneau.reperes > div:first-child {
  padding-top: 0;
}
.kit .panneau.reperes > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.kit .chiffres > div {
  grid-template-columns: minmax(max-content, 5fr) minmax(0, 9fr);
  align-items: center;
}
.kit .reperes.chiffres dt {
  font-size: clamp(3.5rem, 6.6vw, 5.75rem);
  line-height: 0.9;
  white-space: nowrap;
}
.kit .chiffres dd {
  font-size: 1.125rem;
  font-weight: 500;
  max-width: 30ch;
}

.kit .captures {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
}
.kit .captures img,
.kit .visuel img {
  width: 100%;
  border-radius: var(--rayon);
}

.kit .partenaires {
  margin-top: clamp(40px, 6vw, 88px);
}
.kit .partenaires h3 {
  margin: 0;
  font-family: var(--font-accent);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  line-height: 1.08;
}
.kit .partenaires img {
  margin-top: clamp(20px, 2.6vw, 32px);
  width: min(100%, 720px);
}

.kit .enjeux {
  margin: 0;
  list-style: none;
}
.kit .enjeux li {
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-bottom: var(--trait);
  text-wrap: pretty;
}
.kit .enjeux li:first-child {
  padding-top: 0;
}
.kit .enjeux li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.kit .enjeux strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-accent);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  line-height: 1.08;
}
.kit .enjeux .phare strong {
  margin-bottom: 0.3em;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.16;
}

/* Repères posés après une image pleine largeur : l'intitulé descend dans la colonne du titre,
   le texte garde ses filets à droite. Écran large seulement ; téléphone et papier restent en lignes. */
@media screen and (min-width: 761px) {
  .kit .kit-section > .reperes--large {
    grid-column: 1 / -1;
    border-top: 0;
  }
  .kit .reperes--large > div {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(24px, 5vw, 88px);
    padding: 0;
    border-bottom: 0;
  }
  .kit .reperes--large dt,
  .kit .reperes--large dd {
    padding-top: clamp(20px, 2.4vw, 32px);
    padding-bottom: clamp(22px, 2.6vw, 36px);
  }
  .kit .reperes--large dt {
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  }
  .kit .reperes--large dd {
    max-width: none;
    padding-right: max(0px, 100% - 62ch);
    border-top: var(--trait);
  }
  .kit .reperes--large > div:last-child dd {
    border-bottom: var(--trait);
  }
}

/* ——— Emphases : le trait se dessine et le cartouche se remplit à l'arrivée à l'écran.
   Par transition déclenchée en JS (classe .vu), pour marcher dans tous les navigateurs ;
   sans JS ni mouvement autorisé, tout est simplement visible. ——— */
@media screen and (prefers-reduced-motion: no-preference) {
  .kit.anime .souligne svg {
    clip-path: inset(-50% 100% -50% 0);
    transition: clip-path 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
  }
  .kit.anime .souligne.vu svg {
    clip-path: inset(-50% -5% -50% 0);
  }
  .kit.anime mark {
    background: linear-gradient(var(--fond), var(--fond)) no-repeat left / 0%
      100%;
    transition: background-size 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
  }
  .kit.anime mark.vu {
    background-size: 100% 100%;
  }
}

/* ——— Téléphone ——— */
@media screen and (max-width: 760px) {
  .kit .couverture {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "logo date"
      ". ."
      "titre titre"
      "accroche accroche";
    background-size: 48px 48px;
    min-height: min(100svh - 2 * var(--gouttiere), 520px);
  }
  .kit .couverture__accroche {
    max-width: 18ch;
  }
  .kit .kit-section {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }
  .kit .kit-section__tete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }
  .kit .kit-section__illus {
    width: 88px;
    margin-top: 0;
    flex: none;
  }
  .kit .reperes > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }
  .kit .kit-section > .suite {
    grid-column: auto;
  }
  .kit .ecrans {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 66%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gouttiere));
    padding-inline: var(--gouttiere);
    scroll-padding-inline: var(--gouttiere);
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
  }
  .kit .ecrans img {
    scroll-snap-align: start;
  }
  .kit .captures {
    grid-template-columns: minmax(0, 1fr);
  }
  .kit .chiffres dd {
    max-width: none;
  }
}

/* ——— Impression : A4 portrait, une planche par page ——— */
@page {
  size: A4;
  margin: 15mm 12mm 13mm;
  /* Le bandeau courant des planches de la charte : marque, document, folio. */
  /* Couleur en dur : les variables du site n'atteignent pas les boîtes de marge. */
  @top-left {
    content: "Kulteo";
    font:
      600 7.5pt Inter,
      sans-serif;
    color: #1b090a;
  }
  @top-right {
    content: "Kit de presse · Octobre 2026";
    font:
      600 7.5pt Inter,
      sans-serif;
    color: #1b090a;
  }
  @bottom-right {
    content: counter(page);
    font:
      600 7.5pt Inter,
      sans-serif;
    color: #1b090a;
  }
}
@page :first {
  @top-left {
    content: none;
  }
  @top-right {
    content: none;
  }
  @bottom-right {
    content: none;
  }
}
@media print {
  /* Le site s'efface : ni en-tête, ni pied, ni sommaire sur le papier. */
  body > header,
  body > footer {
    display: none;
  }
  body {
    background: var(--color-white);
  }
  .kit {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: var(--color-white);
    font-size: 9.5pt;
  }
  .kit .couverture {
    width: auto;
    margin: 0;
    min-height: 0;
    height: 267mm;
    padding: 14mm;
    border-radius: 8mm;
    background-size: 14mm 14mm;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "logo date"
      ". ."
      "titre titre"
      "accroche accroche";
    row-gap: 9mm;
    break-after: page;
  }
  .kit .couverture__logo {
    width: 44mm;
  }
  .kit .couverture h1 {
    font-size: 38mm;
  }
  .kit .couverture__accroche {
    font-size: 7.5mm;
    max-width: 22ch;
  }
  .kit .kit-section {
    max-width: none;
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6mm;
    break-before: page;
  }
  .kit .kit-section__tete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8mm;
    padding-bottom: 5mm;
    border-bottom: 1.2mm solid var(--color-primary);
  }
  .kit .kit-section > .suite {
    grid-column: auto;
  }
  .kit .kit-section > .suite.reperes {
    margin-top: 0;
  }
  .kit .sommaire {
    display: none;
  }
  .kit .kit-section > .large {
    margin-top: 0;
  }
  .kit .texte {
    margin-top: 6mm;
  }
  .kit figure,
  .kit .panneau,
  .kit .partenaires,
  .kit .enjeux li {
    break-inside: avoid;
  }
  .kit figcaption {
    margin-top: 3mm;
    font-size: 8.5pt;
  }
  .kit .ecrans {
    gap: 2.5mm;
    max-width: 118mm;
  }
  .kit .visuel img {
    display: block;
    width: 140mm;
  }
  .kit .ecrans img {
    border-radius: 3mm;
  }
  .kit .panneau {
    padding: 8mm;
    border-radius: 7mm;
  }
  .kit .captures {
    gap: 4mm;
  }
  .kit .captures img,
  .kit .visuel img {
    border-radius: 5mm;
  }
  .kit .reperes.chiffres dt {
    font-size: 14.5mm;
  }
  .kit .chiffres dd {
    font-size: 11pt;
  }
  .kit .partenaires {
    margin-top: 10mm;
  }
  .kit .partenaires h3,
  .kit .enjeux strong {
    font-size: 6.5mm;
  }
  .kit .partenaires img {
    width: 110mm;
    margin-top: 5mm;
  }
  .kit .enjeux li {
    padding: 4.5mm 0;
  }
  .kit .enjeux .phare strong {
    font-size: 10mm;
  }
  .kit .kit-section h2 {
    font-size: 17mm;
  }
  .kit .kit-section__illus {
    width: auto;
    height: 24mm;
    margin-top: 0;
    flex: none;
  }
  .kit .chapo {
    max-width: 60ch;
    font-size: 12pt;
  }
  .kit .constat {
    font-size: 9.5mm;
    max-width: 30ch;
    margin-top: 6mm;
  }
  .kit .reperes {
    margin-top: 7mm;
  }
  .kit .reperes > div {
    padding: 3.5mm 0 4mm;
    column-gap: 8mm;
    break-inside: avoid;
  }
  .kit .reperes dt {
    font-size: 6.5mm;
  }
}