@layer reset, tokens, base, layout, components, utilities, pages;
@layer pages {
  .hero { position: relative; padding-block: clamp(1.75rem, 3vw, 3.5rem) clamp(2.5rem, 5vw, 5.5rem); overflow: clip; }
  .hero::before { content: ""; position: absolute; inset-inline-end: -12rem; inset-block-start: -10rem; inline-size: 38rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--feuille-claire) 80%, transparent), transparent); opacity: 0.7; pointer-events: none; }
  html[data-contraste="renforce"] .hero::before { display: none; }
  @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .hero::before { opacity: 0.16; } }
  .hero__grid { position: relative; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
  .hero__text { display: grid; gap: 1.25rem; align-content: start; }
  .hero__text h1 { max-inline-size: 16ch; font-size: clamp(2.5rem, 1.55rem + 3.4vw, 4.4rem); }
  .hero__text .lead { max-inline-size: 38rem; }
  .mot-trait { position: relative; display: inline-block; white-space: nowrap; }
  .trait { position: absolute; inset-inline-start: -2%; inset-block-end: -0.16em; inline-size: 104%; block-size: 0.3em; overflow: visible; pointer-events: none; }
  .trait path { fill: none; stroke: var(--soleil); stroke-width: 7; stroke-linecap: round; }
  @media (prefers-reduced-motion: no-preference) {
      html:not([data-mouvement="reduit"]) .trait path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 600ms 350ms var(--ease-out) forwards; }
    }
  @keyframes trace { to { stroke-dashoffset: 0; } }
  .hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .hero__proof { display: flex; align-items: center; gap: 0.6rem; font: 500 1rem/1.4 var(--font-display); color: var(--text-2); }
  .hero__proof .ico { inline-size: 1.6rem; block-size: 1.6rem; color: var(--link); flex: none; }
  .hero__proof strong { color: var(--text); }
  .hero__photo { position: relative; margin: 0; inline-size: min(100%, 24rem); justify-self: center; }
  .hero__photo .masque { aspect-ratio: 4 / 5; }
  .hero__onde { position: absolute; inset-inline-end: -1.5rem; inset-block-start: -1.5rem; inline-size: 7.5rem; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--feuille); opacity: 0.35; z-index: -1; box-shadow: 0 0 0 14px color-mix(in srgb, var(--feuille) 0%, transparent), 0 0 0 15px var(--feuille), 0 0 0 30px transparent, 0 0 0 31px var(--feuille); }
  .hero__widget { position: relative; z-index: 2; }
  .hero__garanties { display: none; list-style: none; padding: 0; }
  .hero__garanties li { display: flex; align-items: center; gap: 0.6rem; font: 600 0.98rem/1.4 var(--font-display); }
  .hero__garanties .ico { inline-size: 1.3rem; block-size: 1.3rem; color: var(--link); flex: none; }
  .express .duo__opt span { white-space: nowrap; padding-inline: 0.6rem; }
  @media (min-width: 64em) {
      .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.5vw, 2.5rem); row-gap: 2.5rem; align-items: start; }
      .hero__grid { row-gap: 0; }
      .hero__text { grid-column: 1 / 8; grid-row: 1; padding-block-start: 1.5rem; }
      .hero__photo { grid-column: 8 / 13; grid-row: 1; inline-size: 100%; margin-block-start: 1.5rem; justify-self: stretch; align-self: stretch; display: grid; }
      .hero__photo .masque { aspect-ratio: auto; min-block-size: 32rem; }
      .hero__widget { grid-column: 6 / 13; grid-row: 2; margin-block-start: -7.5rem; margin-inline-start: 1rem; }
      .hero__garanties { display: grid; gap: 0.55rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--hairline); max-inline-size: 26rem; margin-block-start: 0.5rem; }
      .hero__photo .legende-photo { inset-block-end: 8.75rem; }
    }
  .express { display: grid; gap: 1.1rem; padding: clamp(1.1rem, 2.5vw, 1.6rem); background: var(--surface); border: 2px solid var(--text); border-radius: var(--r-l); box-shadow: 6px 6px 0 var(--edge); }
  html[data-contraste="renforce"] .express { box-shadow: none; }
  .express__titre { font-size: 1.25rem; letter-spacing: -0.015em; }
  .express__bloc { border: 0; padding: 0; margin: 0; min-inline-size: 0; display: grid; gap: 0.5rem; }
  .express__legend { font: 650 0.78rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); padding: 0; margin-block-end: 0.35rem; }
  .express__result { display: grid; gap: 0.5rem; padding: 0.9rem 1rem; border-radius: var(--r-m); background: var(--bg-alt); min-block-size: 5.5rem; align-content: center; }
  .express__result p { display: flex; align-items: flex-start; gap: 0.6rem; font: 400 1rem/1.4 var(--font-display); }
  .express__result .ico { inline-size: 1.3rem; block-size: 1.3rem; flex: none; color: var(--link); margin-block-start: 0.1rem; }
  .express__small { font: 500 0.92rem/1.4 var(--font-display); }
  @media (min-width: 40em) {
      .express { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; align-items: start; }
      .express__titre, .express__result { grid-column: 1 / -1; }
      .express .btn { grid-column: 1 / 2; }
      .express__small { grid-column: 2 / 3; align-self: center; }
    }
  .campagne { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
  .campagne__photo { aspect-ratio: 3 / 2; inline-size: 100%; }
  .campagne__texte { display: grid; gap: 1.1rem; }
  .campagne__texte p { max-inline-size: 52ch; }
  .campagne__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  @media (min-width: 56em) { .campagne { grid-template-columns: 1fr 1fr; } }
  .bento { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuile { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover); }
  .tuile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .tuile:has(.stretch:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
  .tuile__img { position: relative; aspect-ratio: 4 / 3; flex: none; background: var(--bg-alt); }
  .tuile__img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
  .tuile:hover .tuile__img img { transform: scale(1.04); }
  .tuile__corps { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1rem 1.1rem; flex: 1; }
  .tuile__corps .jeton { margin-block-start: -1.4rem; border-color: var(--surface); }
  .tuile__titre { font-size: 1.1rem; line-height: 1.15; }
  .tuile__txt { font-size: 0.95rem; line-height: 1.5; color: var(--text-2); }
  .tuile__cle { font: 500 0.9rem/1.3 var(--font-display); color: var(--text-2); }
  .tuile__cle strong { font: 800 1.35rem/1 var(--font-display); color: var(--text); letter-spacing: -0.02em; margin-inline-end: 0.2rem; }
  .tuile__lien { margin-block-start: auto; padding-block-start: 0.25rem; }
  .tuile__lien a { display: inline-flex; align-items: center; gap: 0.4rem; font: 650 0.9rem/1.2 var(--font-display); color: var(--link); }
  .tuile__lien .ico { inline-size: 1.05rem; block-size: 1.05rem; transition: transform var(--dur-hover) var(--ease-out); }
  .tuile:hover .tuile__lien .ico { transform: translateX(4px); }
  .tuile--grande { grid-column: 1 / -1; }
  .tuile--grande .tuile__img { aspect-ratio: 16 / 10; }
  .tuile--grande .tuile__corps { padding: 0 1.25rem 1.4rem; flex: none; }
  .tuile--grande .tuile__titre { font-size: var(--step-2); }
  .tuile--grande .tuile__txt { font-size: 1.05rem; }
  @media (max-width: 39.99em) { .tuile:not(.tuile--grande) .tuile__txt { display: none; } .tuile:not(.tuile--grande) .tuile__lien a { font-size: 0.85rem; } }
  @media (min-width: 40em) { .bento { gap: 1.25rem; } .tuile__corps { padding: 0 1.25rem 1.3rem; } .tuile__titre { font-size: 1.2rem; } }
  @media (min-width: 64em) {
      .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; }
      .tuile--grande { grid-column: 1 / 3; grid-row: 1 / 3; }
      .tuile--grande .tuile__img { aspect-ratio: auto; flex: 1 1 auto; min-block-size: 18rem; }
    }
  .recit { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
  .recit__img { position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 10; }
  .recit__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .recit__texte { display: grid; gap: 1rem; justify-items: start; }
  @media (min-width: 56em) { .recit { grid-template-columns: 1.1fr 1fr; } }
  .apercu-carte { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
  .apercu-carte__texte { display: grid; gap: 1.1rem; justify-items: start; }
  .apercu-carte__fig { display: grid; gap: 0.75rem; justify-items: center; }
  .mini-carte { inline-size: auto; max-block-size: 30rem; block-size: auto; max-inline-size: min(100%, 20rem); }
  .mini-carte .region { fill: var(--bg); stroke: var(--bg-alt); stroke-width: 1.4; }
  .mini-carte .region--on { fill: var(--leaf-bg); }
  .mini-carte .mini-pt { stroke: var(--surface); stroke-width: 2.4; }
  .section--alt .mini-carte .region { fill: color-mix(in srgb, var(--bg-alt) 70%, var(--surface)); stroke: var(--bg); }
  .section--alt .mini-carte .region--on { fill: var(--leaf-bg); }
  @media (min-width: 56em) { .apercu-carte { grid-template-columns: 1.1fr 0.9fr; } }
  .chiffres-trio { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; }
  .chiffres-trio li { display: grid; }
  .chiffres-trio strong { font: 800 var(--step-3)/1 var(--font-display); letter-spacing: -0.03em; }
  .chiffres-trio span { font: 500 0.95rem/1.3 var(--font-display); color: var(--text-2); }
  .argent { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
  .argent__texte { display: grid; gap: 1.25rem; justify-items: start; }
  .argent__lignes { display: grid; gap: 0.9rem; }
  .argent__lignes dt { font: 700 1.05rem/1.3 var(--font-display); }
  .argent__lignes dd { color: var(--text-2); font-size: 1rem; line-height: 1.55; max-inline-size: 52ch; }
  .argent__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
  @media (min-width: 56em) { .argent { grid-template-columns: 1.1fr 0.9fr; } }
  .carte-agir { position: relative; display: grid; gap: 0.75rem; align-content: start; padding: 1.5rem; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover); }
  .carte-agir:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
  .carte-agir:has(.stretch:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
  .carte-agir__ico { display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; background: var(--leaf-bg); color: var(--link); }
  .carte-agir__ico .ico { inline-size: 1.6rem; block-size: 1.6rem; }
  .carte-agir p { color: var(--text-2); font-size: 1rem; line-height: 1.55; }
  .carte-agir__lien { margin-block-start: 0.5rem; }
  .carte-agir__lien a { display: inline-flex; align-items: center; gap: 0.4rem; font: 650 0.97rem/1.2 var(--font-display); color: var(--link); }
  .carte-agir__lien .ico { inline-size: 1.1rem; block-size: 1.1rem; transition: transform var(--dur-hover) var(--ease-out); }
  .carte-agir:hover .carte-agir__lien .ico { transform: translateX(4px); }
  .actus-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  .engagements { list-style: none; padding: 0; display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .engagements li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
  .engagements h3 { font-size: 1.1rem; margin-block-end: 0.3rem; }
  .engagements p { font-size: 0.98rem; line-height: 1.55; color: var(--text-2); }
  .eng__ico { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--text); color: var(--link); }
  .eng__ico .ico { inline-size: 1.45rem; block-size: 1.45rem; }
}