
.useCase {max-width: 62.5rem; margin-inline: auto;}


.useCase h1 {
  font-size: clamp(18px, 4vw, 30px);
}

.useCase img { width: 100%; object-fit: contain;}

.useCase .chapeau {font-size: 1.1em;}

.useCase .aRetenir { border: 1px solid; padding: 1em; border-radius: .5rem; font-size: 1rem;}
.useCase .aRetenir h2 { font-size: 1.2em;}
.useCase .aRetenir p { font-size: 1em;}

.useCase section + section { border-top: 1px solid;}

.useCase section { display: block;}

.useCase { position: relative;}

.useCase aside { /*border-left: 1.5px solid;*/ margin-left: .5rem;padding-left: .5rem; font-style: italic;}

.useCase aside p { display: flex; align-items: top;}

.useCase aside p::before { content: "➜"; margin-right: .5rem; font-size: 1.5rem;}

/* .useCase li:not(.useCase .cards li) { display: grid; grid-template-columns: auto 1fr;} */

.useCase .gap1, .useCase section { display: grid; gap: 1rem;}

.useCase .cards { display: flex; flex-direction: column;}

.useCase .cards li::before { content: none;}

.useCase .cards li {margin: 0;}

.useCase .ordored li::before, .number::before { content: "1"; display: inline-flex; background-color: var(--color-climae); opacity: 1;
color: var(--color-climae-content); width: 25px; height: 25px;border-radius: 50%; justify-content: center; align-items: center;}

.useCase h2.number::before { width: 35px; height: 35px; margin-right: .5rem;}

.useCase .ordored > li:nth-child(2)::before, .number.two::before{ content: "2"}
.useCase .ordored > li:nth-child(3)::before, .number.three::before{ content: "3"}
.useCase .ordored > li:nth-child(4)::before, .number.four::before{ content: "4"}
.number.four::before{ content: "4"}
.number.five::before{ content: "5"; }
.number.six::before{ content: "6"; }
.number.seven::before{ content: "7"; }
.number.eight::before{ content: "8"; }
.number.nine::before{ content: "9"; }

.useCase .ordored li { margin-left: 0;}

.useCase .return { width: auto; background-color: transparent; color: var(--color-base); margin-left: 1rem; padding: 0;}

.useCase .return::before { content: "←"; margin-right: .5rem;}
/*.useCase .number::before { content: "1"; background-color: pink; font-size: 1.2rem;}*/

/* LG — petit desktop */
@media (min-width: 1024px) {

  .useCase .chapeau {display: grid; grid-template-columns: 1fr 1fr; gap: 1em; align-items: center;}

  .useCase section:not(:first-child) .leftPositionOfAside { display: grid; grid-template-columns: auto 33%;}

  .flex-md { display: grid; grid-template-columns: repeat(2, 1fr);}
  .useCase .w80 { width: 80%; margin-inline: auto;}

  .useCase .lg-3-1fr { display: grid; grid-template-columns: repeat(3, 1fr);}
  .useCase .lg-2-1fr { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; }
}

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