@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

:root {
  --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 2rem; --spacing-xl: 2.2rem; --spacing-bullet: 2rem;
  --radius: 0.75rem;

  --size-2xs: 1rem;     /* 16px */
  --size-xs: 1.5rem;    /* 24px */
  --size-sm: 2rem;      /* 32px */
  --size-md: 3rem;      /* 48px */
  --size-lg: 4rem;      /* 64px */
  --size-xl: 6rem;      /* 96px */
  --size-2xl: 8rem;     /* 128px */

  --size-3xl: 12rem;    /* 192px */
  --size-4xl: 16rem;    /* 256px */
  --size-5xl: 20rem;    /* 320px */
  --size-6xl: 24rem;    /* 384px */
  --size-7xl: 32rem;    /* 512px */
  --size-8xl: 40rem;    /* 640px */
  --size-9xl: 48rem;    /* 768px */
  --size-10xl: 64rem;   /* 1024px */
  --size-11xl: 72rem;   /* 1152px */

  --boxshadow: 0 1px 3px color-mix(in srgb, var(--color-base) 50%, transparent);
/*  --border: solid 1px color-mix(in srgb, var(--color-climae) 10%, transparent);*/
  --border: solid 1px #a9a9a992;

  --font-main: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --color-base: #000;
  --color-climae: #3e6464;
  --color-climae-content: #fff;
  --color-accent-orange: #f08300;
  --color-accent: #14676F;
  --color-link: #14676f;
  --opacity: .8;

  --bgc-base: #fff;
  --bgc-climae: color-mix(in srgb, var(--color-climae) calc(var(--opacity) * 8%), transparent);

  --pd-container: var(--spacing-sm) var(--spacing-md);

  --color-text-muted: rgb(75, 85, 99);
  --color-line: #d9e2df;
  --color-soft: #f5f7f6;
}

/* Base */
html { font-size: 16px; }
html, body { height: 100%; }
body {
  font-family: var(--font-main);
  margin: 0;
}

main,
section,
.container,
.containerInterne,
.text,
.card,
.cards,
.cards > li,
.statement,
.geonef-box {
  max-width: 100%;
  min-width: 0;
}

h1,
h2,
h3,
h4,
p,
li,
a {
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

img,
svg {
  height: auto;
  max-width: 100%;
}

a, a:is(:hover, :active, :focus, :visited) { text-decoration: none; }
ul, ol, li, h1, h2, h3, h4, p { margin: 0; padding: 0; }

/* Typo */
h1 { font-weight: 600; }
h2 { font-size: 1.875rem; }
h3, h4 { font-size: 1.17em; }
h2, h3, h4 { font-weight: 600; }
h3 + h4 { font-weight: 400; }
p, a { line-height: 1.6rem; }
/*br { margin-bottom: var(--spacing-md); }*/

em { color: var(--color-accent); font-style: normal; font-weight: 500; }
em.climae { color: var(--color-climae); }

.kicker {
  color: var(--color-accent);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.statement {
  border-left: 4px solid var(--color-accent);
  background: var(--color-soft);
  padding: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

.statement p {
  color: #203232;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.5;
  margin-bottom: 0;
}

.signature-list {
  display: grid;
  gap: .75rem;
  margin: var(--spacing-md) 0 0;
}

.signature-list > div {
  align-items: baseline;
  display: grid;
  gap: .5rem;
  grid-template-columns: 8.5rem minmax(0, 1fr);
}

.signature-list dt {
  color: #203232;
  font-weight: 700;
}

.signature-list dt::after {
  content: " :";
}

.signature-list dd {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
}

.signature-list dd span {
  border: 1px solid color-mix(in srgb, var(--color-climae) 28%, transparent);
  border-radius: 999px;
  color: #203232;
  font-size: .9rem;
  line-height: 1.2;
  padding: .25rem .55rem;
}

.signature-box {
  background: #203232;
  border-radius: .5rem;
  color: #fff;
  margin: var(--spacing-lg) 0;
  overflow-x: auto;
  padding: var(--spacing-md);
}

.signature-box code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: clamp(.82rem, 2vw, 1rem);
  white-space: nowrap;
}

.spec-grid {
  display: grid;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.code-card {
  display: grid;
  gap: var(--spacing-sm);
}

.code-card pre {
  background: #203232;
  border-radius: .5rem;
  color: #f5f7f6;
  font-size: .82rem;
  line-height: 1.45;
  margin: 0;
  overflow-x: auto;
  padding: var(--spacing-md);
}

.code-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.indicator-catalog {
  display: grid;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.indicator-sheet {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: .5rem;
  padding: var(--spacing-md);
}

.indicator-sheet > p {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.indicator-tags {
  display: grid;
  gap: .65rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.indicator-tag {
  background: #f8faf9;
  border: 1px solid var(--color-line);
  border-radius: .45rem;
  display: grid;
  gap: .3rem;
  padding: .7rem;
}

.indicator-tag h4 {
  color: var(--color-climae);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.indicator-tag p {
  color: var(--color-text-muted);
  font-size: .86rem;
  line-height: 1.35;
}

.indicator-tag.is-limit {
  background: #fff7ed;
  border-color: color-mix(in srgb, var(--color-accent-orange) 32%, #fff);
}

.indicator-tag.is-limit h4 {
  color: #9a5b00;
}

.indicator-call,
.param-cases {
  display: grid;
  gap: .55rem;
  margin: 0;
}

.indicator-examples > li {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
}

.indicator-examples {
  margin-top: var(--spacing-lg);
}

.indicator-examples > li > p {
  min-height: 4.8rem;
}

.indicator-call {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 8.2rem;
}

.indicator-call > div {
  border: 1px solid var(--color-line);
  border-radius: .5rem;
  display: grid;
  gap: .25rem;
  padding: .55rem;
}

.indicator-call dt {
  color: var(--color-climae);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.indicator-call dd {
  color: var(--color-text-muted);
  font-size: .8rem;
  line-height: 1.28;
  margin: 0;
}

.indicator-call dd span {
  display: block;
}

.param-cases {
  border-top: 1px solid var(--color-line);
  margin-top: .25rem;
  padding-top: .75rem;
}

.indicator-examples .param-cases {
  align-self: end;
}

.param-cases {
  overflow-x: auto;
}

.param-cases table {
  border-collapse: collapse;
  font-size: .78rem;
  table-layout: fixed;
  width: 100%;
}

.param-cases th,
.param-cases td {
  border-bottom: 1px solid var(--color-line);
  line-height: 1.25;
  padding: .32rem .38rem;
  text-align: left;
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
}

.param-cases thead th {
  color: #203232;
  font-weight: 700;
}

.param-cases thead th:not(:first-child) {
  border-top: 3px solid var(--case-color);
  line-height: 1.12;
}

.param-cases thead th:nth-child(2) {
  --case-color: var(--color-climae);
}

.param-cases thead th:nth-child(3) {
  --case-color: var(--color-accent-orange);
}

.param-cases tbody td:nth-child(2) {
  border-left: 3px solid color-mix(in srgb, var(--color-climae) 35%, transparent);
}

.param-cases tbody td:nth-child(3) {
  border-left: 3px solid color-mix(in srgb, var(--color-accent-orange) 45%, transparent);
}

.param-cases tbody th {
  color: var(--color-text-muted);
  font-weight: 600;
  width: 24%;
}

.param-cases tr:last-child th,
.param-cases tr:last-child td {
  border-bottom: 0;
}

.satd-diagram {
  align-items: center;
  display: grid;
  gap: var(--spacing-md);
  grid-template-areas:
    "subject call process outcall output"
    ". . data . .";
  grid-template-columns: minmax(0, .82fr) 5.75rem minmax(0, 1.18fr) 5.75rem minmax(0, .82fr);
  margin-top: var(--spacing-lg);
  position: relative;
}

.satd-node {
  background: #fbfcfb;
  border: 1px solid #9fb7b2;
  border-radius: .35rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
  align-self: stretch;
  min-width: 0;
  padding: var(--pd-container);
  position: relative;
  z-index: 1;
}

.satd-node h3 {
  color: #203232;
}

.satd-node p {
  color: var(--color-text-muted);
  font-size: .88rem;
  line-height: 1.4;
}

.satd-node p + p {
  margin-top: .45rem;
}

.satd-node .disc {
  color: var(--color-text-muted);
  font-size: .88rem;
  line-height: 1.4;
  margin-top: .2rem;
}

.satd-node .disc li {
  margin-bottom: .18rem;
}

.satd-data-split,
.satd-output-split {
  display: grid;
  gap: var(--spacing-sm);
}

.satd-data-split {
  gap: var(--spacing-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.satd-data-split > div,
.satd-output-split > div {
  border-top: 1px solid var(--color-line);
  padding-top: .65rem;
}

.satd-data-split h4,
.satd-output-split h4 {
  color: var(--color-climae);
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.satd-subject { grid-area: subject; }
.satd-process {
  background: #e5efec;
  border-color: var(--color-climae);
  box-shadow: inset 0 0 0 1px rgba(62, 100, 100, .12);
  grid-area: process;
}
.satd-output {
  grid-area: output;
}

.satd-output::before {
  background:
    linear-gradient(to bottom, transparent calc(27% - 1.5px), var(--color-climae) calc(27% - 1.5px), var(--color-climae) calc(27% + 1.5px), transparent calc(27% + 1.5px)),
    linear-gradient(to bottom, transparent calc(50% - 1.5px), var(--color-climae) calc(50% - 1.5px), var(--color-climae) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(to bottom, transparent calc(73% - 1.5px), var(--color-climae) calc(73% - 1.5px), var(--color-climae) calc(73% + 1.5px), transparent calc(73% + 1.5px));
  bottom: 0;
  content: "";
  left: calc(-1 * (5.75rem + (var(--spacing-md) * 2)));
  position: absolute;
  top: 0;
  width: calc(5.75rem + (var(--spacing-md) * 2));
  z-index: 0;
}

.satd-output-split {
  position: relative;
}

.satd-data {
  grid-area: data;
  justify-self: stretch;
}

.satd-data::before,
.satd-data::after {
  background: var(--color-climae);
  content: "";
  height: var(--spacing-md);
  position: absolute;
  top: calc(-1 * var(--spacing-md));
  width: 3px;
  z-index: 0;
}

.satd-data::before { left: 28%; }
.satd-data::after { left: 72%; }

.satd-call {
  align-self: stretch;
  display: grid;
  gap: .75rem;
  grid-area: call;
  position: relative;
}

.satd-call::before,
.satd-call::after {
  background: var(--color-climae);
  content: "";
  height: 3px;
  left: calc(-1 * var(--spacing-md));
  position: absolute;
  right: calc(-1 * var(--spacing-md));
  z-index: 0;
}

.satd-call::before { top: 32%; }
.satd-call::after { top: 68%; }

.satd-call span {
  align-self: center;
  color: #203232;
  font-size: .76rem;
  font-weight: 700;
  justify-self: center;
  letter-spacing: .02em;
  line-height: 1.2;
  padding: 0 .25rem;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
}

.comic-strip {
  display: grid;
  gap: .6rem var(--spacing-md);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin: var(--spacing-lg) 0;
}

.comic-panel {
  align-items: end;
  display: grid;
  gap: .65rem;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  min-height: 0;
  padding: 0;
  position: relative;
}

.comic-panel:nth-child(1) { grid-column: 1 / span 5; grid-row: 1; }
.comic-panel:nth-child(2) { grid-column: 7 / span 5; grid-row: 2; }
.comic-panel:nth-child(3) { grid-column: 2 / span 6; grid-row: 3; margin-top: .8rem; }
.comic-panel:nth-child(4) { grid-column: 1 / span 5; grid-row: 4; margin-top: 1.6rem; }
.comic-panel:nth-child(5) { grid-column: 7 / span 5; grid-row: 5; }
.comic-panel:nth-child(6) { grid-column: 2 / span 5; grid-row: 6; transform: translateY(-2.1rem); }
.comic-panel:nth-child(7) { grid-column: 7 / span 5; grid-row: 6; margin-top: 1.15rem; }

.comic-panel:nth-child(1),
.comic-panel:nth-child(6) {
  --bubble-bg: #fff0d6;
  --bubble-border: #b9822e;
  --bubble-role: #8a5a17;
  --avatar-image: url("/assets/images/visuals/avatar-decideur.png");
}

.comic-panel:nth-child(2),
.comic-panel:nth-child(5) {
  --bubble-bg: #e3f1eb;
  --bubble-border: #5e9487;
  --bubble-role: #2f6f66;
}

.comic-panel:nth-child(2) {
  --avatar-image: url("/assets/images/visuals/avatar-terrain.png");
}

.comic-panel:nth-child(3),
.comic-panel:nth-child(7) {
  --bubble-bg: #e8f2f3;
  --bubble-border: #4f8990;
  --bubble-role: #14676f;
  --avatar-image: url("/assets/images/visuals/avatar-bureau-etude.png");
}

.comic-panel:nth-child(4) {
  --bubble-bg: #f5eadb;
  --bubble-border: #a97447;
  --bubble-role: #7d552f;
  --avatar-image: url("/assets/images/visuals/avatar-developpement.png");
}

.comic-panel:nth-child(5) {
  --avatar-image: url("/assets/images/visuals/avatar-metier.png");
}

.comic-panel:nth-child(2),
.comic-panel:nth-child(5),
.comic-panel:nth-child(7) {
  grid-template-columns: minmax(0, 1fr) 4.25rem;
}

.comic-panel::before {
  align-items: center;
  align-self: end;
  background: var(--bubble-bg, #fff);
  background-image: var(--avatar-image, none);
  background-position: center;
  background-size: cover;
  border: 2px solid #203232;
  border-radius: .2rem;
  box-shadow: .16rem .16rem 0 rgba(32, 50, 50, .18);
  color: #203232;
  content: "●";
  display: flex;
  font-size: 1.25rem;
  font-weight: 700;
  grid-column: 1;
  grid-row: 1;
  height: 3rem;
  justify-content: center;
  justify-self: center;
  letter-spacing: .02em;
  width: 3rem;
}

.comic-panel:nth-child(2)::before,
.comic-panel:nth-child(5)::before,
.comic-panel:nth-child(7)::before {
  grid-column: 2;
}

.comic-panel:nth-child(2)::before { content: "◒"; }
.comic-panel:nth-child(3)::before { content: "▣"; }
.comic-panel:nth-child(4)::before { content: "◈"; }
.comic-panel:nth-child(5)::before { content: "◐"; }
.comic-panel:nth-child(6)::before { content: "●"; }
.comic-panel:nth-child(7)::before { content: "▣"; }

.comic-panel:nth-child(1)::before,
.comic-panel:nth-child(2)::before,
.comic-panel:nth-child(3)::before,
.comic-panel:nth-child(4)::before,
.comic-panel:nth-child(5)::before,
.comic-panel:nth-child(7)::before,
.comic-panel:nth-child(6)::before {
  content: "";
}

.comic-panel::after {
  background: var(--bubble-bg, #fff);
  border: 2px solid var(--bubble-border, #203232);
  border-right: 0;
  border-top: 0;
  bottom: .9rem;
  content: "";
  height: .8rem;
  left: 5rem;
  position: absolute;
  transform: rotate(45deg);
  width: .8rem;
  z-index: 0;
}

.comic-panel:nth-child(2)::after,
.comic-panel:nth-child(5)::after,
.comic-panel:nth-child(7)::after {
  background: var(--bubble-bg, #e5efec);
  border-bottom: 0;
  border-left: 0;
  border-right: 2px solid var(--bubble-border, #203232);
  border-top: 2px solid var(--bubble-border, #203232);
  left: auto;
  right: 5rem;
}

.comic-panel .role {
  align-self: start;
  color: var(--bubble-role, var(--color-climae));
  font-size: .7rem;
  font-weight: 600;
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  letter-spacing: .02em;
  line-height: 1.22;
  margin-bottom: 0;
  max-width: 4.25rem;
  text-align: center;
  text-transform: uppercase;
}

.comic-panel .dialogue {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.comic-panel:nth-child(2) .dialogue,
.comic-panel:nth-child(5) .dialogue,
.comic-panel:nth-child(7) .dialogue {
  grid-column: 1;
}

.comic-panel:nth-child(2) .role,
.comic-panel:nth-child(5) .role,
.comic-panel:nth-child(7) .role {
  grid-column: 2;
}

.comic-panel .dialogue {
  background: var(--bubble-bg, #fff);
  border: 2px solid var(--bubble-border, #203232);
  border-radius: 1rem 1rem 1rem .18rem;
  box-shadow: .18rem .18rem 0 rgba(32, 50, 50, .14);
  color: #203232;
  font-size: .9rem;
  font-style: italic;
  line-height: 1.38;
  margin-bottom: 0;
  padding: .72rem .82rem;
  position: relative;
  z-index: 1;
}

.comic-panel:nth-child(2) .dialogue,
.comic-panel:nth-child(5) .dialogue,
.comic-panel:nth-child(7) .dialogue {
  border-radius: 1rem 1rem .18rem 1rem;
}

.comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.step-number {
  align-items: center;
  background: var(--color-climae);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-weight: 700;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.method-grid li > .step-number + h3 {
  display: inline;
  margin-left: .75rem;
  vertical-align: middle;
}

.method-grid .step-heading {
  align-items: center;
  display: flex;
  gap: .75rem;
}

.method-grid .step-heading h3 {
  margin-bottom: 0;
}

.sheet-preview {
  max-width: 52rem;
}

.geonef-box {
  background: #173f3f;
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(var(--spacing-md), 5vw, var(--spacing-lg));
  margin: var(--spacing-lg) 0;
}

.geonef-box p,
.geonef-box h3 {
  color: #fff;
}

.junn-box {
  background: #edf5f3;
  border: 1px solid #c9d6d2;
  color: #203232;
}

.junn-box h3 {
  color: var(--color-climae);
}

.junn-box p {
  color: #203232;
}

.external-link::after {
  content: "↗";
  display: inline-block;
  font-size: .85em;
  line-height: 1;
  margin-left: .35em;
  text-decoration: none;
  transform: translateY(-.08em);
}

.partner-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  list-style: none;
  margin-top: var(--spacing-md);
}

.partner-badges li {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: .5rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .55rem .85rem;
}

.raci-table {
  border: var(--border);
  border-radius: var(--radius);
  margin: var(--spacing-lg) 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.raci-table table {
  border-collapse: collapse;
  min-width: 980px;
  width: 100%;
}

.raci-table th,
.raci-table td {
  border-bottom: 1px solid var(--color-line);
  border-right: 1px solid var(--color-line);
  padding: .85rem;
  text-align: left;
  vertical-align: top;
}

.raci-table thead th {
  background: #173f3f;
  color: #fff;
  font-size: .82rem;
}

.raci-table tbody th {
  background: var(--color-soft);
  min-width: 19rem;
}

.raci-table tbody th small,
.raci-table td span {
  display: block;
}

.raci-table tbody th > span:not(.step-number) {
  display: inline;
  margin-left: .65rem;
  vertical-align: middle;
}

.raci-table tbody th small {
  color: var(--color-text-muted);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.35;
  margin-top: .55rem;
}

.raci-table tbody th small.objective {
  color: #203232;
  font-weight: 700;
}

.raci-table td {
  font-size: .88rem;
  min-width: 8.5rem;
}

.raci-table td strong {
  color: var(--color-climae);
  display: block;
  font-size: .78rem;
  margin-bottom: .45rem;
  text-transform: uppercase;
}

.raci-table tr:last-child th,
.raci-table tr:last-child td {
  border-bottom: 0;
}

.raci-table th:last-child,
.raci-table td:last-child {
  border-right: 0;
}

.manifest-site section {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.manifest-site h2 {
  max-width: 48rem;
  line-height: 1.15;
}

.manifest-site .containerInterne > p {
  max-width: 50rem;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.manifest-site .containerInterne > h3 {
  color: var(--color-climae);
  font-size: .9rem;
  letter-spacing: .08em;
  margin-top: var(--spacing-xl);
  padding-top: calc(var(--spacing-md) + .15rem);
  position: relative;
  text-transform: uppercase;
}

.manifest-site .containerInterne > h3::before {
  background: linear-gradient(90deg, var(--color-climae), color-mix(in srgb, var(--color-climae) 28%, transparent), transparent);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* Layout */
.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-md);
}

main { margin: var(--spacing-md) 0; }
section { padding: var(--spacing-lg) var(--spacing-md); }

/* Composants */
.button, .card, .cards > li { border-radius: var(--radius); }
.card, .cards > li { border: var(--border); /*box-shadow: var(--boxshadow);*/ background-color: var(--bgc-base); }
.card, .cards > li { padding: var(--pd-container); }

.button {
  display: inline-block;
  background-color: var(--color-climae);
  color: var(--color-climae-content);
  text-align: center;
  font-weight: 600;
  width: 100%;
  max-width: var(--size-4xl);
  justify-self: center;
  align-self: center;
  min-width: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  white-space: normal;
}
.button * { opacity: 1; }

header .button:hover, .is-active { background-color: #688686; border: 1px solid rgba(255, 252, 252, 0.28); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);}

.cards > li { opacity: var(--opacity); }

/* Cartes en colonne */
.cards > li, .card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Espacements légers du contenu */
.cards > li > :first-child,
.card > :first-child { margin-top: var(--spacing-md); }

:is(h1, h2, h3, h4, p, .disc, .useCase ul) { margin-bottom: var(--spacing-md); }

.disc > li, .useCase li { margin-bottom: var(--spacing-sm);}

/* Images cartes */
.cards img {
  width: 8rem;
  aspect-ratio: 1/1;
  object-fit: contain;
  justify-self: center;
  align-self: center;
}

/* Listes à puces & checks */
.cards > li :is(li, h3) { position: relative; }

.cards > li > ul li::before,
.cards h3::before {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
}

.cards > li > ul { gap: var(--spacing-sm); }

ul.disc { list-style: none; }
ul.disc li, .useCase li { margin-left: var(--spacing-md); }
ul.disc li::before {
  content: "•";
  left: calc(-1 * var(--spacing-bullet) + 1em);
  margin-right: .5em;
  opacity: calc(var(--opacity) * .7);
}

.checked { margin-left: calc(var(--spacing-md) * 2); }
.checked::before {
  content: "✓";
  background-color: var(--color-climae);
  color: var(--color-climae-content);
  border-radius: 50%;
  width: 1.5rem;
  aspect-ratio: 1/1;
  left: calc(-1 * var(--spacing-bullet));
}


/* Index */

/*
.brand { object-fit: contain; display: block; width: 14rem; }

#index > section:is(.donnees, .applications, .differences, .contacts) {
  background-color: var(--bgc-climae);
}

#index .intro .button, .applications .button { margin-top: var(--spacing-md);}

.vignettes { text-align: center; }
.vignettes img { width: var(--size-md); }

*/

.stickyWrapper { position: relative;}

#intro { display: flex;}
#intro .container { max-width: 1400pxz; margin-inline: auto; width: 100%;}
#index #intro .container { max-width: 1400px; margin-inline: auto; width: 100%;}
#index #intro h1, #studyCase .content h2, #intro h1 { font-size: clamp(1.7em, 3.2vw, 3.25em); line-height: 1.1;}



#intro h1 { font-size: clamp(1.75em, 4vw, 3em);}
#index #intro p, #studyCase .content p { font-size: clamp(1em, 3vw, 1.25em); line-height: 1.6; color: var(--color-text-muted);}
#intro p { font-size: clamp(1em, 3vw, 1.1em); line-height: 1.6; color: var(--color-text-muted);}
#intro :is(h1, p) { font-weight: 400;}

#plateforme #intro .text p { font-size: clamp(1em, 4vw, 1.25em);}

#index .ctas a, .btn-climae { font-size: clamp(.78em, .72vw, 1em); line-height: 1.35; display: block; text-align: center;}

.ctas {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: 2em;
  justify-content: center;
  align-items: center;
}

.ctas.justify-left {
  justify-content: left;
  align-items: flex-start;
}

#index .ctas a, .btn-climae { padding: .85rem 1rem; border-radius: .75rem; width: 100%;}

#index .ctas a, .btn-climae { background-color: var(--color-climae); color: var(--color-climae-content); font-weight: 600;}

.card .card-cta {
  align-self: flex-end;
  max-width: 13rem;
  width: auto;
}

.ctas > li {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 15em;
}

.ctas > li::before { content: none; }

#intro :is(ul, li) { display: block;}

#intro .brand { width: 100%; max-width: 50vw;}

#intro .ctas { display: flex; flex-direction: column; align-items: center; gap: 1em;}

#index .contacts .containerInterne {
  display: flex;
  justify-content: center;
  margin-top: 2em;
}

#intro .text {max-width: 850px;}

#studyCase ul { list-style-type: none; }
#studyCase .disc > li { display: block;}
#studyCase .disc { margin-left: 1em;}
#studyCase .disc > li::before { margin-right: 1em;} 

#studyCase section a:not(.btn-climae, .button) { color: var(--color-link);}

#studyCase #intro .text { width: 100%;}
#studyCase #intro .containerInterne { display: block;}

#studyCase .cards { display: grid; grid-template-columns: minmax(0, 1fr);}

#studyCase .item { display: grid; grid-template-columns: 1fr 2fr; color: #000; overflow: hidden;}

#studyCase .cards > li {border-radius: .31rem; background-color: var(--bgc-climae); margin-bottom: 2em; }

#studyCase :is(.item, li){ padding: 0; margin: 0;}

#studyCase .item img { object-fit: cover; width: 200px; height: 200px;}
#studyCase .content h2 {font-size: clamp(1em, 4vw, 2em);}
#studyCase .content { padding: .5em; font-size: .8em;}

#studyCase a.btn-climae { color: #fff; display: block; padding: .5em 5em; width: fit-contents;}

#studyCase .tags li { background-color: var(--color-accent-orange); color: #000; display: inline-block; padding: .2em 1em; border-radius: .75rem; font-weight: 600; margin-inline: .1em;}

#studyCase .item { grid-template-columns: auto auto; display: grid;}
#studyCase .item .content { display: grid; grid-template-columns: 2fr 1fr; gap: 1em}

#studyCase .item .aside { display: grid; gap: 1em;}

#studyCase .item .aside li { margin-top: .5em;}




footer .footer-contact em { color: var(--color-accent-orange)}

footer div.footer-inner { padding-top: 1em;}

footer .footer-left .titre { font-size: 18px; font-weight: 600;font-family: system-ui,-apple-system,BlinkMacSystemFont,sans-serif;}

.footer-bottom { font-size: .8em; opacity: .8; border-top: .3px solid #ffffff34;}

.footer-copy { display: inline-block; margin-left: 1em;}
footer ul { list-style-type: none; }


@media (min-width: 768px){
  #intro .ctas {display: flex; flex-direction: row;}
  #intro { display: flex;}
  #studyCase #intro {min-height: auto; width: 100%;}
  #sudyCase #intro .containerInterne { display: block;}
}

@media (min-width: 1120px){
  #intro { min-height: calc(58vh - 5rem);}
  #index #intro { min-height: calc(72vh - 5rem);}
}

@media (min-width: 1024px){
  #intro { align-items: center;}
  #intro .container { display: grid;grid-template-areas: "text text brand";align-items: center; padding-inline: 80px; gap: 5em;} 
  #intro .brand { width: clamp(150px,50vw,320px); height: 100%; grid-area: brand; object-fit: contain;}
  #intro .text { grid-area: text; display: grid; gap: 1em;}

  /*#studyCase .cards .item { grid-template-columns: 1fr; grid-template-rows: 200px auto;}*/
  #studyCase .cards .item { grid-template-columns: 200px auto;}

  /*
  #studyCase .cards > li {
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 220ms cubic-bezier(.4,0,.2,1);
  }

  #studyCase .cards > li:hover {
    transform: translateZ(0) scale(1.02);
  }
    
  */
}

/* plateforme */
/* methodologie */

.mecanisme .disc li, .approche .disc li { display: flex;}

.ordored > li > h3 { margin-left: calc(var(--spacing-md) * 2);}
.ordored > li > h3::before {
  content: "✓";
  background-color: var(--color-climae);
  color: var(--color-climae-content);
  border-radius: 50%;
  width: 1.5rem;
  aspect-ratio: 1/1;
  left: calc(-1 * var(--spacing-bullet));
}

.ordored > li:first-child > h3::before { content: "1"}
.ordored > li:nth-child(2) > h3::before { content: "2"}
.ordored > li:nth-child(3) > h3::before { content: "3"}

.applications .cards .title { display: flex; align-items: center; gap: var(--spacing-md);}
.applications .title h3 { margin-bottom: 0;}
.applications .cards img { width: var(--size-md);}

/* Usages */ 

/*
.ctas{ display: block;}
.ctas {
  a { background-color: var(--color-climae); text-align: center; padding: var(--spacing-sm) var(--spacing-md); max-width: var(--size-5xl); border-radius: var(--radius);  margin-left: auto; margin-right: auto;}
  li, a {display: block;}
  li { margin-top: var(--spacing-md);}
}

*/
/* Contact */

#contact {
  img {display: none;}
}

.base {
  .intro { font-size: 1.2rem;}
  /*.intro ul { display: flex; gap: var(--spacing-md); flex-direction: column;}*/
  .intro h1 { font-weight: 400;}
  .intro p { opacity: var(--opacity);}
  .mesures, .pilotage, .approche, .mecanisme, .applications, .acteurs { background-color: var(--bgc-climae);}
}

.jf-section .disc > li { grid-template-columns: auto 1fr;}

@media (max-width: 420px) {
  section {
    padding-inline: .75rem;
  }

  .card,
  .cards > li,
  .statement {
    padding-inline: .75rem;
  }

  .raci-table {
    margin-inline: -.75rem;
    max-width: calc(100% + 1.5rem);
  }

  #studyCase .item,
  #studyCase .item .content {
    grid-template-columns: minmax(0, 1fr);
  }

  #studyCase .item img {
    height: auto;
    max-height: 14rem;
    width: 100%;
  }

  #studyCase a.btn-climae {
    padding-inline: 1rem;
  }

  .signature-list > div {
    gap: .35rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .indicator-call {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .indicator-examples > li > p {
    min-height: 0;
  }

  .satd-diagram {
    grid-template-areas:
      "subject"
      "call"
      "process"
      "data"
      "output";
    grid-template-columns: minmax(0, 1fr);
  }

  .satd-call::before,
  .satd-call::after,
  .satd-output::before,
  .satd-data::before,
  .satd-data::after {
    display: none;
  }

  .satd-data-split {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 767px) {
  .comic-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .comic-panel,
  .comic-panel:nth-child(1),
  .comic-panel:nth-child(2),
  .comic-panel:nth-child(3),
  .comic-panel:nth-child(4),
  .comic-panel:nth-child(5),
  .comic-panel:nth-child(6),
  .comic-panel:nth-child(7) {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
    transform: none;
  }
}

/* Nav */
header { position: sticky; top: 0; z-index: 100;}
header, nav, button { background-color: var(--color-climae); align-self: center; justify-self: end; }

header { width: 100%; }
header a.brand { width: 9rem; }
header img { object-fit: contain; width: 100%; height: 100%; }
header button { width: var(--size-md); height: var(--size-md); border-radius: var(--radius); }
header .links li { list-style-type: none;}
header .links, header .imgClose, .cta { display: none; }

header nav { display: flex; justify-content: space-between; padding: 1.1rem 1.5rem; }



header .button { padding: clamp(.5em,1.4vw,.85em) 1.1em; font-weight: 600; /*font-size: 1.125rem;*/  font-size: clamp(.9em, 1.2vw, 1em); border-radius: .8rem; letter-spacing:0.03rem;}
.button.cta { border: 1.2px solid var(--color-climae-content); /*padding: 1.125rem .5rem; width: 12rem;*/ max-width: 10em; padding: 1em;}

body.navOpen { overflow: hidden; position: relative; }

body.navOpen {
  header { height: 100vh; }

  nav {
    position: fixed;
    width: 100%;
    top: 0;
    display: grid;
    grid-template-rows: auto 2fr 1fr;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
  }

  nav > :first-child { grid-column: 1; grid-row: 1; }
  nav button { grid-column: 2; grid-row: 1; flex-grow: 1; }
  nav ul { grid-column: span 2; grid-row: 2; }

  ul.links { display: flex; flex-direction: column; align-self: center; }

  nav > a:first-child { display: inline-block; width: min(var(--size-4xl), 58vw); }
  nav > a:first-child > img { object-fit: contain; width: 100%; height: 100%; }

  .imgClose, .cta { display: block; }
  .imgOpen { display: none; }

  nav > :last-child { grid-column: span 2; }

  @media (max-width: 768px) {
    .links .button { text-align: left; }
    ul { justify-self: left; }
  }
}

footer { background-color: var(--color-climae);}

footer, a { color: var(--color-climae-content);}

.base a:not(.btn-climae, .button) {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: .18em;
}

footer { padding-top: var(--spacing-md);}
.footer-left {
  .brand { width: var(--size-3xl); height: var(--size-2xl);}
  img { object-fit: contain; width: 100%; height: 100%;}
}
.footer-left, .footer-rightz {  gap: var(--spacing-md); display: flex; flex-direction: column;}

.footer-right ul {
  column-gap: var(--spacing-lg);
  columns: 1;
  list-style: none;
}

.footer-right li {
  break-inside: avoid;
  margin-bottom: .35rem;
}

.footer-left, .footer-right {  margin-bottom: var(--spacing-md);}

.footer-bottom { text-align: center;}

.footer-sep { margin: var(--spacing-sm); display: inline-block;}

.footer-inner { font-size: .8em;}
.footer-inner a, .footer-tagline,.footer-editor { opacity: .7;}

.footer-tagline {
  max-width: 28rem;
}

footer .cta { margin-top: var(--spacing-md);}

.textIntro { margin-top: 5rem;}

.applications .cards em { color: #000; font-weight: 600;}

.differences .vignettes h3 { text-align: center; margin-top: .5em;}

#plateforme #last-cta a { margin-top: .5em;} 

/* MD — tablette */
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .applications .cards { grid-template-columns: repeat(3, minmax(0, 1fr));}
  #studyCase .cards { grid-template-columns: repeat(2, minmax(0, 1fr));}

  #index > section:is(.intro, .mesures) .containerInterne > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cards :is(h2, h3) { display: block; }

  .footer-right { display: flex; align-items: end; flex-direction: column;}
  .footer-right ul { columns: 2;}

  /*.base .intro ul { flex-direction: row;}*/

  .base .cards { grid-template-columns: repeat(3, minmax(0, 1fr));}
  .base .usecase-grid { grid-template-columns: repeat(2, minmax(0, 1fr));}

  #methodologie .approche .cards { grid-template-columns: repeat(4, minmax(0, 1fr));}

  .acteurs .cards { grid-template-columns: repeat(2, minmax(0, 1fr));}

  .usages .cards { grid-template-columns: repeat(3, minmax(0, 1fr));}

  .ctas { display: flex; flex-direction: row; gap: var(--spacing-md);}

  #contact img { display: block; object-fit: contain; width: var(--size-5xl);}

  #contact .containerInterne { display: flex;}
  #contact { min-height: 50vh;}

}


@media (min-width: 1120px){
  header nav > button { display: none;}
  header nav .links, .cta { display: flex;}
  .cta { display: block;}
}

/* LG — petit desktop */
@media (min-width: 1024px) {
  .containerInterne { width: var(--size-11xl); margin: 0 auto; }
  #studyCase .cards { grid-template-columns: repeat(3, minmax(0, 1fr));}

  #index .intro .containerInterne {

    /*
    display: grid;
    grid-template-columns: var(--size-8xl) 1fr;

    */
  }

  #index .intro img {
    /*
    grid-column: 2;
    width: 80%;
    grid-row: 1 / 3;
    align-self: center;
    */
  }

  #index .intro .containerInterne .text { grid-column: 1; grid-row: 1; }


  #index section:is(.mesures, .donnees, .applications, .differences) .containerInterne {
    gap: var(--spacing-lg);
  }

  #index .differences .vignettes { grid-template-columns: repeat(3, minmax(0, 1fr));}
  .base .usecase-grid { grid-template-columns: repeat(3, minmax(0, 1fr));}

  #index .donnees > div:nth-child(2) > ul:nth-child(2) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  header .links { gap: var(--spacing-md);}

  .footer-inner { display: flex; justify-content: space-around; max-width: var(--size-11xl); margin-left: auto; margin-right: auto;}

  /*.ctas { display: flex; gap: var(--spacing-md);}*/

  .flex-md { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}

  #plateforme #last-cta a { width: 250px;} 
}

/* XL — grand desktop */
@media (min-width: 1280px) { }

.bgc-grey, #methodologie .bgc-grey { background-color: #d3d1d15a;}
.bgc-white, #methodologie .bgc-white { background-color: #fff;}

#studyCase .item > div { padding: 1em;}