/* CAIO — Le vivant, dessiné avec précision. Mobile first. Les diagrammes décrivent les relations réelles. */
*,*::before,*::after {
  box-sizing:border-box
}

html {
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:7rem
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:var(--t-corps)/var(--lh-corps) var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word
}

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

h1,h2,h3,h4 {
  font-family:var(--font-head);
  margin:0 0 .65em;
  font-weight:500;
  text-wrap:balance
}

h1 {
  font-size:var(--t-display);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display)
}

h2 {
  font-size:var(--t-h2);
  line-height:var(--lh-titre);
  letter-spacing:var(--ls-titre)
}

h3 {
  font-size:var(--t-h3);
  line-height:1.25;
  letter-spacing:-.02em
}

p,ul,ol,dl,figure {
  margin:0 0 1.2rem
}

p:last-child {
  margin-bottom:0
}

a {
  color:var(--accent-text);
  text-underline-offset:5px;
  text-decoration-thickness:1px
}

a:hover {
  text-decoration-thickness:2px
}

strong,b {
  font-weight:600
}

em { font-style:italic }

h1 em,h2 em {
  font-family:var(--font-expression);
  font-weight:400;
  color:var(--accent-text)
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}

[hidden] {
  display:none!important
}

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

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

.wrap>* {
  min-width:0
}

.section {
  padding-block:var(--section-y)
}

.section--alt {
  background:var(--bg-alt)
}

.section--tight {
  padding-block:3rem 4rem
}

.section__head {
  max-width:760px;
  margin-bottom:2.5rem
}

.section-intro {
  display:grid;
  gap:1rem;
  margin-bottom:3rem
}

.section-intro .lede {
  max-width:42ch
}

.eyebrow {
  display:block;
  font-size:var(--t-label);
  font-weight:600;
  letter-spacing:var(--ls-label);
  line-height:1.5;
  color:var(--accent-text);
  margin-bottom:1.25rem
}

.lede {
  font-size:var(--t-lede);
  line-height:var(--lh-lede);
  color:var(--text-mute);
  max-width:58ch
}

.btn {
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  padding:.8rem 1.3rem;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  text-decoration:none;
  font-weight:600;
  font-size:.9375rem;
  line-height:1.4;
  text-align:center;
  transition:background .18s,color .18s,transform .18s;
  cursor:pointer
}

.btn::after {
  content:'↗';
  font-size:1.2rem;
  font-weight:400
}

.btn:hover {
  transform:translateY(-2px)
}

.btn--primary {
  background:var(--sombre);
  color:white
}

.btn--primary:hover {
  background:var(--accent-edge);
  color:white
}

.btn--ghost {
  border-color:var(--accent);
  color:var(--accent);
  background:transparent
}

.btn--ghost:hover {
  background:var(--accent);
  color:white
}

.btn--block {
  width:100%
}

.btn--lg {
  padding:1rem 1.4rem
}

.skip-link {
  position:fixed;
  top:1rem;
  left:1rem;
  z-index:100;
  padding:.8rem 1rem;
  background:white;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:none
}

.site-header {
  background:var(--bg);
  border-bottom:var(--filet);
  position:sticky;
  top:0;
  z-index:20
}

.site-header__inner {
  display:flex;
  align-items:center;
  gap:1.5rem;
  min-height:88px;
  flex-wrap:wrap;
  padding-block:.8rem
}

.logo {
  display:flex;
  align-items:center;
  gap:.8rem;
  color:var(--text);
  text-decoration:none;
  margin-right:auto;
  min-height:44px
}

.logo__text {
  font-family:var(--font-head);
  font-size:2rem;
  font-weight:700;
  letter-spacing:-.06em;
  line-height:1
}

.logo__text strong {
  display:block;
  font:400 .65rem/1.5 var(--font-body);
  letter-spacing:.055em;
  margin-top:.25rem
}

.site-header .btn {
  display:none
}

.site-nav {
  width:100%
}

.site-nav ul {
  padding:0;
  margin:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.25rem 1rem
}

.site-nav a {
  display:flex;
  align-items:center;
  min-height:44px;
  text-decoration:none;
  color:var(--text-mute);
  font-size:.9rem
}

.site-nav a:hover,.site-nav a[aria-current] {
  color:var(--text);
  text-decoration:underline
}

.nav-toggle {
  display:none;
  width:48px;
  height:48px;
  background:transparent;
  border:var(--filet);
  border-radius:var(--radius-sm);
  align-items:center;
  justify-content:center;
  color:var(--text)
}

.nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after {
  display:block;
  width:19px;
  height:2px;
  background:currentColor;
  position:relative
}

.nav-toggle__bars::before,.nav-toggle__bars::after {
  content:'';
  position:absolute;
  left:0
}

.nav-toggle__bars::before {
  top:-6px
}

.nav-toggle__bars::after {
  top:6px
}

.js .nav-toggle {
  display:flex
}

.js .site-nav {
  display:none
}

.js .site-nav.is-open {
  display:block
}

html:not(.js) .site-header {
  position:static
}

.section--sombre {
  background:var(--sombre);
  color:var(--sur-sombre);
  --text:var(--sur-sombre);
  --text-mute:var(--sur-sombre-mute);
  --accent-text:var(--accent-clair);
  --line:#496557
}

.section--sombre :focus-visible {
  outline-color:var(--citron)
}

.section--sombre .btn--primary {
  background:var(--citron);
  color:var(--sombre)
}

.section--sombre .btn--primary:hover {
  background:white;
  color:var(--sombre)
}




.conviction em {
  color:var(--citron)
}


.hero__actions {
  display:flex;
  gap:1rem 1.5rem;
  align-items:center;
  flex-wrap:wrap;
  margin-top:2rem
}


.hero__note {
  font-size:.875rem;
  color:var(--text-mute);
  margin-top:1rem
}

/* L’arbre organise l’accueil. Les textes restent toujours dans le flux. */
.hero__opening { display:grid; gap:1.5rem; padding-top:3rem }
.hero__opening h1 { font-size:clamp(2.6rem,4.6vw,4.4rem); max-width:21ch; margin-bottom:0 }
.hero__opening .eyebrow { font-weight:400; letter-spacing:.03em; color:var(--text-mute) }
.hero__invitation { max-width:45ch }
.hero__invitation>p { color:var(--text-mute); font-size:1.05rem }
.hero__invitation .hero__note { display:block }
.living-tree { position:relative; display:flex; flex-direction:column; margin-top:2.5rem; padding-left:1.5rem; border-left:1px solid var(--accent) }
.living-tree a { position:relative; color:var(--text); text-decoration:none; z-index:1 }
.living-tree__core { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:1rem 0 1rem; background:var(--bg) }
.living-tree__core>strong { font:600 clamp(3.5rem,6vw,5.4rem)/1 var(--font-head); letter-spacing:-.065em; margin:.6rem 0 .4rem }
.living-tree .living-tree__role { font-size:.9rem; color:var(--accent); min-height:44px; padding:.6rem .25rem; text-decoration:underline; text-underline-offset:5px }
.living-tree__role:hover { text-decoration-thickness:2px }
.living-tree__branch { display:flex; flex-direction:column; padding:1.5rem .5rem 1.5rem 0; border-top:var(--filet); background:var(--bg); transition:background .2s }
.living-tree__branch::before,.living-tree__core::before { content:''; position:absolute; top:2rem; left:-1.55rem; width:1rem; height:1rem; border-left:1px solid var(--accent); border-bottom:1px solid var(--accent); border-bottom-left-radius:1rem }
.living-tree__offer { display:flex; align-items:center; gap:1rem; justify-content:space-between; font-size:.75rem; color:var(--text-mute); margin-bottom:.75rem; letter-spacing:.025em }
.living-tree__offer b { color:var(--accent); font-size:1.25rem; font-weight:400 }
.living-tree__branch>strong { font:500 clamp(1.4rem,2.1vw,1.9rem)/1.18 var(--font-head); letter-spacing:-.03em }
.living-tree__branch em { font-family:var(--font-expression); font-weight:400; color:var(--accent) }
.living-tree__fruit { margin-top:1rem; font-size:.875rem; line-height:1.5; color:var(--text-mute) }
.living-tree__branch:hover,.living-tree__branch:focus-visible { background:var(--bg-alt) }
.living-tree__branch:hover .living-tree__offer,.living-tree__branch:focus-visible .living-tree__offer { color:var(--accent) }
.living-tree__drawing { display:none }
.living-tree__roots { position:relative; margin:0; padding:0 0 1.5rem; text-align:center }
.living-tree__root-drawing { display:block; width:100%; height:72px; fill:none; stroke:var(--accent); stroke-width:1.25; stroke-linecap:round }
.living-tree__root-drawing circle { fill:var(--bg) }
.living-tree__root-labels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:0; gap:.25rem; font-size:clamp(.75rem,2.7vw,1rem); font-weight:500 }
.living-tree__roots>p { margin:1.25rem 0 0; color:var(--text-mute); font-size:.8rem }
.hero__ground { padding:1.5rem 0 2.5rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 2rem }
.hero__ground>p { color:var(--text-mute); font-size:.875rem; margin:0; max-width:50ch }
.hero__ground .lien-suite { font-size:.875rem }
.philosophy-line { border-block:var(--filet); background:var(--bg-alt) }
.philosophy-line>.wrap { padding-block:2.25rem }
.philosophy-diagram { max-width:54rem; margin-inline:auto; display:flex; flex-direction:column; align-items:center; text-align:center }
.philosophy-diagram__model { font:500 clamp(1.5rem,2.5vw,2rem)/1.25 var(--font-head); letter-spacing:-.025em; margin:0; padding:.55rem 1.4rem; border:1px dashed var(--line-fort); border-radius:var(--radius); background:var(--bg) }
.philosophy-diagram__explanation { font-size:.9375rem; color:var(--text-mute); margin:.9rem 0 0; max-width:65ch }
.philosophy-diagram__stem { display:block; height:24px; width:1px; background:var(--line-fort); margin:.75rem 0 .5rem }
.philosophy-diagram__memory { font:400 clamp(1.8rem,3vw,2.5rem)/1.2 var(--font-expression); letter-spacing:-.025em; margin:0; color:var(--accent) }
.philosophy-diagram__memory em { font-weight:400 }
.philosophy-diagram__documents { font-size:.875rem; color:var(--text-mute); margin:.5rem 0 0; max-width:65ch }
.arbre__tronc { display:grid; gap:1.5rem; padding-bottom:3rem; margin-bottom:3rem; border-bottom:var(--filet) }
.arbre__tronc h2,.arbre__tronc .lede { margin:0 }
@media(max-width:599px) {
  .hero__opening h1 { font-size:clamp(1.9rem,8.8vw,2.6rem) }
}
@media(min-width:800px) {
  .hero__opening { grid-template-columns:1.45fr 1fr; gap:4rem; align-items:center; padding-top:3.5rem }
  .hero__invitation { justify-self:end }
  .living-tree { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(210px,auto) minmax(210px,auto) auto; align-items:center; padding:0; border:0; margin-top:2rem }
  .living-tree__drawing { display:block; position:absolute; grid-column:1/-1; grid-row:1/3; inset:0; width:100%; height:100%; fill:none; stroke:var(--accent); stroke-linecap:round; pointer-events:none }
  .living-tree__stem { stroke-width:3 }
  .living-tree__line { stroke-width:1.7; transition:stroke-width .2s }
  .living-tree__bud { fill:var(--bg); stroke-width:1.3; transition:fill .2s }
  .living-tree__core { grid-column:2; grid-row:1/3; align-items:center; justify-self:center; text-align:center; width:fit-content; padding:1.25rem .65rem; margin-top:2rem }
  .living-tree__core>strong { font-size:clamp(3.6rem,6.5vw,5.8rem) }
  .living-tree__core .offre-precision { display:block; margin-top:.2rem }
  .living-tree__branch { width:calc(100% - 2rem); padding:1.25rem 0; border-top:0; border-bottom:var(--filet); align-self:center }
  .living-tree__branch--learn { grid-column:1; grid-row:1 }
  .living-tree__branch--tools { grid-column:3; grid-row:1; justify-self:end; margin-top:1rem }
  .living-tree__branch--build { grid-column:3; grid-row:2; justify-self:end; margin-top:1rem }
  .living-tree__branch--visibility { grid-column:1; grid-row:2; width:calc(100% - 3rem) }
  .living-tree__branch::before,.living-tree__core::before { content:none }
  .living-tree__roots { grid-column:1/-1; grid-row:3; justify-self:center; width:min(660px,72%); padding:0; z-index:1 }
  .living-tree__root-drawing { height:90px }
  .living-tree__root-labels { font-size:1rem }
  .living-tree__roots>p { margin-top:1.5rem; font-size:.875rem }
  .living-tree:has(.living-tree__branch--learn:hover,.living-tree__branch--learn:focus-visible) .living-tree__line--learn,
  .living-tree:has(.living-tree__branch--tools:hover,.living-tree__branch--tools:focus-visible) .living-tree__line--tools,
  .living-tree:has(.living-tree__branch--visibility:hover,.living-tree__branch--visibility:focus-visible) .living-tree__line--visibility,
  .living-tree:has(.living-tree__branch--build:hover,.living-tree__branch--build:focus-visible) .living-tree__line--build { stroke-width:3.5 }
  .living-tree:has(.living-tree__branch--learn:hover,.living-tree__branch--learn:focus-visible) .living-tree__bud--learn,
  .living-tree:has(.living-tree__branch--tools:hover,.living-tree__branch--tools:focus-visible) .living-tree__bud--tools,
  .living-tree:has(.living-tree__branch--visibility:hover,.living-tree__branch--visibility:focus-visible) .living-tree__bud--visibility,
  .living-tree:has(.living-tree__branch--build:hover,.living-tree__branch--build:focus-visible) .living-tree__bud--build { fill:var(--citron) }
  .arbre__tronc { grid-template-columns:1fr 1fr; gap:4rem }
}
@media(min-width:1150px) {
  .hero__opening { grid-template-columns:1.6fr 1fr; gap:5rem }
  .living-tree__branch--tools,.living-tree__branch--build { width:calc(100% - 3.5rem) }
}

.arbre__branches {
  position:relative;
  border-left:1px solid var(--line-fort);
  padding-left:1.4rem;
  margin-left:.25rem
}

.branche {
  display:grid;
  gap:1.25rem;
  padding:2rem 0;
  border-top:var(--filet);
  position:relative;
  scroll-margin-top:7rem
}

.branche::before {
  content:'';
  position:absolute;
  left:-1.4625rem;
  top:1.8rem;
  width:1rem;
  height:1.2rem;
  border-left:1px solid var(--accent);
  border-bottom:1px solid var(--accent);
  border-bottom-left-radius:1rem
}

.branche__repere {
  display:flex;
  gap:1rem;
  align-items:center
}

.branche__index {
  font:italic 2.5rem/1 var(--font-expression);
  color:var(--accent);
  font-variant-numeric:tabular-nums
}

.branche__repere .eyebrow {
  margin:0
}

.branche h3 {
  font-size:clamp(1.55rem,1rem + 1.5vw,2.35rem);
  max-width:23ch
}

.branche__main>p {
  color:var(--text-mute);
  max-width:53ch
}

.branche__gain {
  border-left:var(--filet);
  padding-left:1.25rem
}

.branche__gain>.eyebrow {
  font-size:.8rem;
  margin-bottom:.6rem
}

.branche__gain>p {
  font-size:.95rem
}

.branche__cadence {
  display:block;
  color:var(--text-mute);
  font-size:.875rem
}

.lien-suite {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:1.5rem;
  padding-block:.5rem;
  font-size:.9375rem;
  font-weight:600
}

.lien-suite span {
  font-size:1.15rem
}

.orientation {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.5rem;
  background:var(--bg-alt);
  padding:1.5rem 2rem;
  margin-top:1.5rem;
  border-radius:var(--radius)
}

.orientation p {
  margin:0
}

.conviction {
  display:grid;
  gap:2rem
}

.conviction h2 {
  font-size:clamp(2.2rem,1.2rem + 3vw,4.2rem)
}

.conviction .lede {
  max-width:35ch
}

.conviction__list {
  list-style:none;
  margin:0;
  padding:0
}

.conviction__list li {
  display:flex;
  gap:1.5rem;
  border-top:1px solid #496557;
  padding-block:1.75rem
}

.conviction__list li>span {
  color:var(--citron);
  font-size:.875rem
}

.conviction__list p {
  color:var(--sur-sombre-mute);
  font-size:1rem
}

.conviction__list h3 {
  font-size:1.4rem
}

.roles {
  display:grid;
  gap:2rem
}

.role {
  border-top:var(--filet);
  padding-top:1.5rem
}

.role__fonction {
  font-size:.875rem;
  color:var(--text-mute);
  display:block;
  margin-bottom:1rem
}

.role__intitule {
  font-size:1.4rem;
  max-width:26ch
}

.cta-band {
  background:var(--bg-alt);
  color:var(--sombre);
  border-top:var(--filet);
  padding-block:var(--section-y)
}

.cta-band__inner {
  display:grid;
  gap:1.5rem
}

.cta-band .eyebrow {
  color:var(--sombre)
}

.cta-band h2 {
  font-size:clamp(2.5rem,1.3rem + 3vw,4.4rem);
  margin:0
}

.cta-band p {
  max-width:44ch
}

.cta-band .btn--primary {
  background:var(--sombre);
  color:white
}

.cta-band .btn--primary:hover {
  background:var(--accent)
}

.cta-note {
  display:block;
  font-size:.875rem;
  margin-top:1rem
}

.breadcrumb {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
  font-size:.875rem;
  color:var(--text-mute);
  margin-bottom:1.5rem
}

.breadcrumb a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--text-mute)
}

.pilier-entree {
  padding-block:1rem 5rem;
  border-bottom:var(--filet)
}

.pilier-entree h1 {
  max-width:19ch;
  font-size:clamp(2.6rem,1.4rem + 3.2vw,4.65rem)
}

.pilier-entree .lede {
  max-width:48ch
}

.pilier-entree__repere {
  font-size:.875rem;
  color:var(--text-mute)
}

.pilier-hero-grid {
  display:grid;
  gap:2rem;
  align-items:center
}

.pilier-summary {
  border-top:var(--filet);
  padding-top:1.5rem
}

.pilier-summary>.eyebrow {
  font-weight:400;
  color:var(--text-mute)
}

.pilier-summary h2 {
  font-size:1.5rem;
  letter-spacing:-.02em;
  max-width:25ch
}

.pilier-summary ul {
  padding:0;
  list-style:none;
  margin:1.5rem 0
}

.pilier-summary li {
  border-top:var(--filet);
  padding:.8rem 0;
  font-size:.9375rem;
  color:var(--text-mute)
}

.pilier-summary li::before {
  content:'↳';
  color:var(--accent);
  margin-right:.75rem
}

.pilier-summary__foot {
  font-size:.875rem;
  color:var(--accent)
}

.pilier-partage,.mission {
  display:grid;
  gap:2rem
}

.pilier-partage>*,.mission>* {
  min-width:0
}

.pilier-partage .section__head,.mission .section__head {
  margin-bottom:0
}

.pilier-texte {
  max-width:64ch
}

.pilier-texte>p,.prose p,.prose li {
  color:var(--text-mute)
}

.passage {
  margin-top:2rem
}

.passage+.note {
  margin-top:2rem
}

.decision {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
  border-top:var(--filet);
  margin-top:2rem;
  padding-top:1.5rem
}

.decision p {
  flex:1 1 260px;
  margin:0
}

.decision .btn {
  flex:0 1 auto
}

.mission__fil {
  border-left:2px solid var(--accent);
  padding-left:1.8rem
}

.mission__moment {
  position:relative
}

.mission__moment::before {
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  left:-2.2rem;
  top:.4rem;
  border-radius:50%;
  background:var(--accent)
}

.mission__moment+.mission__moment {
  margin-top:2.5rem
}

.mission__moment p {
  color:var(--text-mute)
}

.progression {
  list-style:none;
  padding:0;
  display:grid;
  gap:2rem;
  margin:0
}

.progression__palier {
  border-top:2px solid var(--accent);
  padding-top:1.5rem
}

.progression__palier>p:last-child {
  color:var(--text-mute)
}

.progression__palier .eyebrow {
  font-size:.875rem
}

.echelle-reperes {
  margin-block:2rem
}

.echelle-reperes>div {
  border-top:var(--filet);
  padding-block:1.25rem
}

.echelle-reperes dt {
  font:600 2rem/1.2 var(--font-head);
  letter-spacing:-.04em
}

.echelle-reperes dd {
  margin:.5rem 0 0;
  color:var(--text-mute)
}

.systeme {
  display:grid;
  gap:1rem;
  margin:0
}

.systeme__piece {
  padding:2rem;
  background:var(--bg-alt);
  border-top:2px solid var(--accent);
  border-radius:0 0 var(--radius) var(--radius)
}

.systeme dt {
  font:600 var(--t-h2)/1.1 var(--font-head);
  letter-spacing:-.03em
}

.systeme dd {
  margin:1rem 0 0;
  color:var(--text-mute)
}

.systeme__modele {
  border:1px dashed var(--accent);
  padding:1.5rem 2rem;
  border-radius:var(--radius)
}

.systeme__modele dt {
  font-size:1.25rem
}

.systeme__modele dd {
  font-size:.9375rem
}

.releve__ligne {
  display:grid;
  gap:.75rem;
  border-top:var(--filet);
  padding-block:2rem
}

.releve dt {
  font:600 1.4rem/1.3 var(--font-head)
}

.releve dd {
  margin:0;
  color:var(--text-mute)
}

.prose {
  max-width:var(--wrap-etroit)
}

.prose h2 {
  font-size:1.75rem;
  margin-top:2.5rem
}

.prose h3 {
  margin-top:1.75rem
}

.prose h2:first-child {
  margin-top:0
}

.prose ul,.prose ol {
  padding-left:1.5rem
}

.prose li {
  margin-bottom:.65rem
}

.prose dt {
  font-weight:600;
  margin-top:1rem
}

.prose dd {
  margin:0 0 .5rem;
  color:var(--text-mute)
}

.note {
  padding:1.25rem;
  border-left:3px solid var(--accent);
  background:var(--bg-alt);
  color:var(--text-mute);
  margin-top:1rem
}

.note--warn {
  border-color:var(--warn);
  color:var(--warn-text)
}

.badge {
  font-size:.875rem
}

.table-wrap {
  overflow-x:auto
}

.table-wrap table {
  width:100%;
  border-collapse:collapse
}

.table-wrap th,.table-wrap td {
  padding:1rem;
  text-align:left;
  border-bottom:var(--filet)
}

.contact-intro {
  padding-block:1rem 2rem
}

.contact-intro h1 {
  max-width:19ch
}

.contact-grid {
  display:grid;
  gap:2.5rem;
  align-items:start
}

.contact-context h2 {
  font-size:1.7rem
}

.contact-context>.lede {
  max-width:33ch
}

.contact-next {
  list-style:none;
  margin:2rem 0 0;
  padding:0;
  counter-reset:contact
}

.contact-next li {
  counter-increment:contact;
  border-top:var(--filet);
  padding:1.2rem 0 1.2rem 2.5rem;
  position:relative;
  font-size:.9375rem
}

.contact-next li::before {
  content:'0' counter(contact);
  position:absolute;
  left:0;
  top:1.2rem;
  color:var(--accent)
}

.contact-next h3 {
  font-size:1rem;
  margin-bottom:.35rem
}

.contact-next p {
  color:var(--text-mute);
  margin:0
}

.contact-form-panel {
  padding:1.5rem;
  background:var(--surface);
  border:var(--filet);
  border-radius:var(--radius)
}

.contact-form-panel h2 {
  font-size:1.6rem
}

.contact-form-panel>.lede {
  font-size:.9375rem
}

.contact-subject {
  font-size:.875rem;
  color:var(--accent);
  padding:.75rem 1rem;
  background:var(--bg-alt);
  margin-bottom:1.5rem;
  border-radius:var(--radius-sm)
}

.form {
  max-width:44rem
}

.form__row {
  display:grid;
  gap:1rem
}

.form__field {
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin-bottom:1rem;
  min-width:0
}

.form__label {
  font-size:.9375rem;
  font-weight:600
}

.form input,.form select,.form textarea {
  width:100%;
  min-width:0;
  min-height:48px;
  border:1px solid var(--field-line);
  border-radius:var(--radius-sm);
  background:var(--field-bg);
  color:var(--text);
  padding:.7rem .8rem
}

.form textarea {
  resize:vertical;
  min-height:110px
}

.form input:focus,.form select:focus,.form textarea:focus {
  outline:2px solid var(--accent);
  outline-offset:2px
}

.form__hint {
  font-size:.875rem;
  color:var(--text-mute);
  margin:0
}

.form__error {
  font-size:.875rem;
  color:var(--warn-text);
  margin:0
}

.form__error:empty {
  display:none
}

.form__hint a,.form__label a {
  min-height:44px;
  display:inline-flex;
  align-items:center
}

.form__actions {
  margin-block:1.5rem 1rem
}

.form__actions .btn {
  width:100%
}

.form__field--check {
  display:grid;
  grid-template-columns:24px 1fr;
  gap:.75rem;
  margin-top:1.5rem;
  align-items:start
}

.form__field--check .form__label {
  font-size:.875rem;
  font-weight:400;
  line-height:1.6;
  min-height:44px
}

.form input[type=checkbox] {
  width:24px;
  height:24px;
  min-height:24px;
  margin:2px 0 0;
  accent-color:var(--accent)
}

.form__field--check .form__error {
  grid-column:2
}

.form [aria-invalid=true] {
  border-color:var(--warn);
  outline:1px solid var(--warn)
}

.site-footer {
  padding-top:3.5rem;
  background:var(--bg);
  color:var(--text-mute);
  font-size:.875rem
}

.site-footer__grid {
  display:grid;
  gap:2.5rem;
  padding-bottom:2.5rem
}

.site-footer__brand {
  display:grid;
  gap:1.25rem;
  align-content:start
}

.site-footer__brand .logo__text {
  color:var(--text);
  font-size:2.5rem
}

.site-footer__brand p {
  max-width:35ch;
  margin:0
}

.site-footer__brand .btn {
  justify-self:start
}

.site-footer__title {
  font-size:.875rem;
  letter-spacing:.04em;
  color:var(--text)
}

.site-footer__links {
  list-style:none;
  padding:0;
  margin:0
}

.site-footer__links a,.site-footer__legal a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-block:.5rem;
  color:var(--text-mute);
  text-decoration:none
}

.site-footer__links a:hover,.site-footer__legal a:hover {
  text-decoration:underline;
  color:var(--text)
}

.site-footer__bottom {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  border-top:var(--filet);
  padding-block:1.5rem
}

.site-footer__bottom p {
  margin:0
}

.site-footer__legal {
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap
}

@media(min-width:600px) {
  .form__row {
    grid-template-columns:1fr 1fr
  }
  .roles {
    grid-template-columns:repeat(3,1fr)
  }
  .site-footer__grid {
    grid-template-columns:2fr 1fr 1fr
  }
  .contact-form-panel {
    padding:2rem
  }
  .hero__actions {
    gap:1rem
  }
}

@media(min-width:900px) {
  .section-intro {
    grid-template-columns:1.25fr 1fr;
    gap:5rem;
    align-items:end
  }
  .section-intro h2 {
    margin:0
  }
  .section-intro .lede {
    margin:0
  }
  .branche {
    grid-template-columns:160px minmax(0,1.6fr) minmax(0,1fr);
    gap:2rem;
    padding-block:2.5rem
  }
  .branche__repere {
    align-items:flex-start;
    flex-direction:column;
    gap:.6rem
  }
  .branche__gain {
    align-self:center
  }
  .arbre__branches {
    padding-left:2rem
  }
  .branche::before {
    left:-2.0625rem;
    width:1.5rem
  }
  .conviction {
    grid-template-columns:1fr 1fr;
    gap:6rem
  }
  .cta-band__inner {
    grid-template-columns:1.2fr 1fr;
    gap:5rem;
    align-items:center
  }
  .pilier-hero-grid {
    grid-template-columns:1.5fr 1fr;
    gap:5rem
  }
  .pilier-summary {
    border-top:0;
    border-left:var(--filet);
    padding:0 0 0 2.5rem
  }
  .pilier-partage,.mission {
    grid-template-columns:minmax(0,2fr) minmax(0,3fr);
    gap:5rem
  }
  .progression {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .progression__palier:first-child { margin-top:5rem }
  .progression__palier:nth-child(2) {
    margin-top:2.5rem;
    margin-bottom:2.5rem
  }
  .progression__palier:nth-child(3) {
    margin-top:0;
    margin-bottom:5rem
  }
  .systeme {
    grid-template-columns:1fr 1fr
  }
  .systeme__modele {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:2rem
  }
  .systeme__modele dd {
    margin:0
  }
  .releve__ligne {
    grid-template-columns:1fr 2fr;
    gap:3rem
  }
  .contact-grid {
    grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
    gap:5rem
  }
  .contact-context {
    position:sticky;
    top:8rem
  }
  .contact-intro h1 {
    font-size:4rem
  }
  .contact-intro {
    padding-bottom:2.5rem
  }
  .contact-section {
    padding-top:0
  }
}

@media(min-width:1150px) {
  .site-header .btn {
    display:inline-flex
  }
  .site-header__inner {
    flex-wrap:nowrap;
    gap:2rem
  }
  .site-nav,.js .site-nav {
    width:auto;
    display:block
  }
  .site-nav ul {
    gap:1.5rem;
    flex-wrap:nowrap
  }
  .nav-toggle,.js .nav-toggle {
    display:none
  }
  .site-nav a {
    font-size:.875rem
  }
}

@media(max-width:599px) {
  .hero__actions {
    align-items:stretch;
    flex-direction:column
  }
  .hero__actions>.btn {
    align-self:flex-start
  }
  .branche__gain {
    margin-top:.25rem
  }
  .orientation {
    padding:1.5rem
  }
  .roles {
    gap:1.5rem
  }
  .site-header__inner {
    min-height:76px
  }
  .contact-form-panel {
    padding:1.25rem
  }
  .pilier-entree {
    padding-bottom:3rem
  }
  .pilier-summary {
    margin-top:1rem
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}

@media print {
  .site-header,.site-footer,.cta-band,.skip-link,.living-tree__drawing {
    display:none
  }
  body,.section--sombre {
    background:white;
    color:black;
    --text:black;
    --text-mute:#333;
    --accent-text:#222
  }
  .wrap {
    width:100%
  }
  .section {
    padding-block:2rem
  }
}

@media(max-width:899px) {
  .contact-form-panel {
    order:-1
  }
  .contact-section {
    padding-top:0
  }
}


/* Les liens du texte légal restent utilisables au toucher. */
.prose a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
}

/* Précision de l’offre : secondaire visuellement, présente à la lecture. */
.offre-precision {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}
.site-nav a { gap: .3rem; }
@media (min-width: 1150px) { .site-nav ul { gap: 1rem; } }

/* Une construction propre à chaque branche, dans le flux du document. */
.pilier-summary ul { counter-reset:repere }
.pilier-summary li { position:relative; counter-increment:repere }
body[data-page="direction-ia"] .pilier-summary ul {
  border-left:1px solid var(--accent);
  padding-left:1.5rem
}
body[data-page="direction-ia"] .pilier-summary li { border:0; padding-block:1rem }
body[data-page="direction-ia"] .pilier-summary li::before {
  content:'';
  position:absolute;
  left:-1.8rem;
  top:1.6rem;
  width:9px;
  height:9px;
  border:1px solid var(--accent);
  background:var(--citron);
  border-radius:50%
}
body[data-page="formation"] .pilier-summary li {
  padding:1rem;
  background:var(--bg-alt);
  border-top:2px solid var(--accent);
  margin-top:1rem
}
body[data-page="formation"] .pilier-summary li:nth-child(2) { margin-left:1rem }
body[data-page="formation"] .pilier-summary li:nth-child(3) { margin-left:2rem }
body[data-page="formation"] .pilier-summary li::before { content:'0' counter(repere) }
body[data-page="outils"] .pilier-summary ul { display:grid; grid-template-columns:1fr 1fr; gap:.7rem }
body[data-page="outils"] .pilier-summary li { border:var(--filet); padding:1rem; background:var(--bg-alt) }
body[data-page="outils"] .pilier-summary li::before { content:none }
body[data-page="outils"] .pilier-summary li:last-child { grid-column:1/-1; border:1px dashed var(--line-fort); background:transparent }
body[data-page="donnee"] .pilier-summary li { display:grid; grid-template-columns:2rem 1fr; padding-block:1.2rem }
body[data-page="donnee"] .pilier-summary li::before { content:'0' counter(repere) }
.releve { counter-reset:source }
.releve__ligne { counter-increment:source }
.releve dt::before {
  content:'0' counter(source);
  display:block;
  margin-bottom:.75rem;
  font:italic 1.7rem/1 var(--font-expression);
  color:var(--accent)
}

/* Pages d’atterrissage — 29 septembre 2026.
   Trois motifs du kit trouvent enfin un emploi, un par page : .steps
   (former-collaborateurs-ia), .split (chief-ai-officer), .cards
   (formation-ia-dirigeants). Aucune autre page ne les porte : vérifié sur dist/.
   Registre de la direction validée le 19 septembre : blanc minéral, filets,
   Archivo 500 pour les titres, Georgia italique pour les chiffres et les
   expressions, aucune ombre, aucun dégradé, aucune icône.
   Contrastes calculés (WCAG 2.x) :
     --accent #185B45 sur --bg-alt #EDF2ED 7,07:1, sur --surface 8,01:1
     --text-mute #4C625B sur --bg-alt 5,78:1, sur --surface 6,55:1
     --sur-sombre sur --sombre 14,28:1, --citron sur --sombre 12,00:1,
     --sur-sombre-mute sur --sombre 8,70:1
     --line-fort #70867B sur --bg-alt 3,44:1 : le filet qui porte l’ordre
     des étapes passe le plancher de 3:1 des bordures signifiantes. */

/* .steps : une progression ordonnée. Le numéro est typographique, le filet
   relie les étapes et chaque nœud marque un passage. Vertical sur téléphone,
   horizontal au-delà de 900 px, où l’on lit les trois étapes d’un regard. */
.steps {
  list-style:none;
  margin:0;
  padding:0 0 0 1.75rem;
  border-left:1px solid var(--line-fort);
  display:grid;
  gap:2.5rem;
  counter-reset:none
}

.step {
  position:relative;
  min-width:0
}

/* Le nœud se pose sur le filet, à hauteur du numéro. Décoratif : l’ordre
   est déjà porté par <ol> et par le texte du numéro. */
.step::before {
  content:'';
  position:absolute;
  left:calc(-1.75rem - 5px);
  top:.95rem;
  width:9px;
  height:9px;
  background:var(--accent);
  border-radius:50%
}

.step__num {
  display:block;
  font:italic 400 2.75rem/1 var(--font-expression);
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  margin-bottom:1rem
}

.step__title {
  font-size:var(--t-h3);
  font-weight:500;
  max-width:22ch;
  margin-bottom:.75rem
}

.step__body {
  color:var(--text-mute);
  max-width:46ch
}

/* La dernière étape ferme le parcours : le nœud se remplit, la date de fin
   est l’objet de ce motif. Le sens reste dans le texte. */
.step:last-child::before {
  background:var(--bg-alt);
  border:2px solid var(--accent);
  width:11px;
  height:11px;
  left:calc(-1.75rem - 6px)
}

.steps+.decision {
  margin-top:3rem
}

@media(min-width:900px) {
  .steps {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:3.5rem;
    padding:2.25rem 0 0;
    border-left:0;
    border-top:1px solid var(--line-fort)
  }
  .step::before {
    left:0;
    top:calc(-2.25rem - 5px)
  }
  .step:last-child::before {
    left:0;
    top:calc(-2.25rem - 6px)
  }
}

/* .split : une mise en regard. À gauche le travail, à droite ce qu’il
   change, sur un cartouche forêt, réservé aux engagements depuis le
   19 septembre. --coin-large vaut none dans tokens.css : pas de coin coupé,
   le cartouche garde le rayon commun. */
.split {
  display:grid;
  gap:2.5rem;
  align-items:start
}

.split>* {
  min-width:0
}

.split__body.prose {
  max-width:64ch
}

/* Les missions se lisent comme une liste de responsabilités : un filet
   au-dessus de chaque intitulé, sans puce ni icône. */
.split__body>h3 {
  border-top:var(--filet);
  padding-top:1.25rem;
  margin-top:2rem
}

.split__body>h3:first-child {
  margin-top:0
}

.split__media {
  background:var(--sombre);
  color:var(--sur-sombre);
  border-radius:var(--radius);
  padding:2rem 1.75rem;
  --text:var(--sur-sombre);
  --text-mute:var(--sur-sombre-mute);
  --accent-text:var(--accent-clair)
}

.split__media .eyebrow {
  color:var(--citron);
  margin-bottom:1rem
}

.split__media>p:not(.eyebrow) {
  font:italic 400 clamp(1.25rem,1.1rem + .5vw,1.5rem)/1.45 var(--font-expression);
  color:var(--sur-sombre);
  margin:0
}

.split__media a {
  color:var(--accent-clair)
}

.split__media :focus-visible {
  outline-color:var(--citron)
}

@media(min-width:900px) {
  .split {
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    gap:5rem
  }
  /* Le regard reste en face du texte pendant la lecture des quatre missions. */
  .split__media {
    position:sticky;
    top:8rem;
    padding:2.5rem 2.25rem
  }
}

/* .cards : trois surfaces de même rang. Même fond, même filet d’accent,
   même hauteur ; aucune n’est mise en avant. Une colonne jusqu’à 900 px :
   trois cartes sur deux colonnes laisseraient une orpheline qui se lirait
   comme la moins importante. */
.cards {
  display:grid;
  gap:1rem;
  margin:0
}

.card {
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--surface);
  border:var(--filet);
  border-top:2px solid var(--accent);
  border-radius:0 0 var(--radius) var(--radius);
  padding:1.75rem 1.5rem 1.25rem
}

.card__title {
  font-size:var(--t-h3);
  font-weight:500;
  margin-bottom:.75rem
}

.card__body {
  color:var(--text-mute);
  margin-bottom:1.25rem
}

/* Le lien descend au pied de la carte pour que les trois s’alignent, et
   garde une cible de 44 px. */
.card__link {
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:.9375rem;
  font-weight:600
}

/* Le texte qui suit la grille la commente : il s’en détache et garde la
   largeur de lecture. */
.cards+* {
  margin-top:2rem;
  max-width:64ch
}

@media(min-width:900px) {
  .cards {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.5rem
  }
  .card {
    padding:2rem 1.75rem 1.5rem
  }
}

/* Tableaux de comparaison : ils défilent dans leur cadre sur téléphone au
   lieu de comprimer quatre colonnes dans 335 px. Le filet du cadre signale
   que le tableau continue au-delà du bord. */
.table-wrap {
  -webkit-overflow-scrolling:touch;
  border-top:2px solid var(--accent);
  margin-bottom:1.5rem
}

.table-wrap table {
  min-width:40rem;
  font-size:.9375rem;
  line-height:1.5
}

.table-wrap th,.table-wrap td {
  vertical-align:top
}

.table-wrap td {
  color:var(--text-mute)
}

.table-wrap thead th {
  font:500 1rem/1.3 var(--font-head);
  color:var(--text);
  border-bottom:1px solid var(--line-fort)
}

.table-wrap tbody th {
  font-weight:600;
  color:var(--text);
  width:11rem
}

@media(min-width:900px) {
  .table-wrap table {
    min-width:0
  }
}

/* FAQ des pages d’atterrissage : chaque question ouvre sur un filet, pour
   qu’on parcoure les intitulés avant de lire une réponse. Limité aux trois
   pages : les pages légales gardent leur prose sans filets. */
body[data-page="former-collaborateurs-ia"] .prose>h3,
body[data-page="formation-ia-dirigeants"] .prose>h3,
body[data-page="chief-ai-officer"] .prose:not(.split__body)>h3 {
  font-size:1.25rem;
  border-top:var(--filet);
  padding-top:1.25rem;
  margin-top:2rem;
  margin-bottom:.6rem
}

body[data-page="former-collaborateurs-ia"] .prose>h3:first-child,
body[data-page="formation-ia-dirigeants"] .prose>h3:first-child,
body[data-page="chief-ai-officer"] .prose>h3:first-child {
  margin-top:1.5rem
}

body[data-page="former-collaborateurs-ia"] .prose>h3:first-child,
body[data-page="formation-ia-dirigeants"] .prose>h3:first-child,
body[data-page="chief-ai-officer"] .prose:not(.split__body)>h3:first-child {
  margin-top:0
}

/* Section de conversion : le formulaire d’entretien, hors de
   .contact-form-panel, reçoit le même panneau que sur /contact/ pour ne pas
   flotter à nu sur la brume. */
.lp-formulaire .form,
.section__head~.form {
  padding:1.25rem;
  background:var(--surface);
  border:var(--filet);
  border-radius:var(--radius)
}

@media(min-width:600px) {
  .lp-formulaire .form,
  .section__head~.form {
    padding:2rem
  }
}

/* ── Pages d'atterrissage : formulaire dans l'ouverture ──────────────────────
   Demande du 2026-09-29 : le formulaire se voit sans descendre. Mobile, il
   suit l'introduction dans l'ordre du document. À partir de 900 px, il passe
   à droite du titre. Le panneau est celui de /contact/ (.contact-form-panel),
   aucune couleur nouvelle. Le titre se resserre : à demi-largeur, la taille
   de .pilier-entree h1 le cassait en cinq lignes. */
.lp-hero {
  display:grid;
  gap:2rem;
  align-items:start
}
.lp-hero__form {
  scroll-margin-top:6rem
}
/* Sur /contact/, le panneau remonte avant le contexte sous 900 px (order:-1).
   Ici le titre et l'introduction restent devant : le visiteur sait où il est
   avant qu'on lui demande quoi que ce soit. */
.lp-hero .lp-hero__form {
  order:0
}
/* Le filet de .pilier-entree fermait la seule colonne de gauche et flottait
   au-dessus du vide, à côté du formulaire. */
.lp-hero .pilier-entree,
.pilier-entree .lp-hero__texte {
  border-bottom:0;
  padding-bottom:0
}
.lp-hero__form h2 {
  font-size:1.5rem;
  margin-bottom:.5rem
}
@media(min-width:900px) {
  .lp-hero {
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:4rem
  }
  .lp-hero h1 {
    font-size:clamp(2.4rem,3.6vw,3.5rem);
    max-width:none
  }
}