/* Art Color · v13
   Visual direction drawn from the designer's homepage: luminous violet,
   glass surfaces, oversized project numbers and light editorial sections.
   Content and conversion behavior remain in build_site.py / script.js.
*/
@font-face {
  font-family: "Andalan Eug";
  src: url("assets/fonts/AndalanEug.woff2") format("woff2");
  font-display: swap;
}

@media screen {
  :root {
    --bg: #120728;
    --panel: #251148;
    --purple: #6c36ff;
    --light: #f5f1ff;
    --muted: #e0d5f0;
    --line: rgba(218, 203, 255, .24);
  }

  body { background: #10071f; }
  .gradient {
    background-image: linear-gradient(112deg, #fff 8%, #dbb6ff 47%, #c333ff 100%);
  }
  .section--light .gradient, .testimonial-band .gradient {
    background-image: linear-gradient(112deg, #6729fb 8%, #a726ff 62%, #d048ff 100%);
  }
  .button {
    background: linear-gradient(104deg, #6329ff, #7941ff);
    border-color: rgba(212, 179, 255, .18);
    box-shadow: 0 5px 20px rgba(92, 34, 223, .26), inset 0 1px rgba(255, 255, 255, .12);
    transition: box-shadow .2s ease, background .2s ease, transform .2s ease;
  }
  .button:hover {
    background: linear-gradient(104deg, #7139ff, #975aff);
    box-shadow: 0 7px 28px rgba(112, 43, 255, .4);
  }
  .button--white {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 4px 16px rgba(35, 5, 75, .12);
  }
  .button--white:hover { background: #f0e8ff; }
  .button--outline {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(229, 208, 255, .48);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12);
  }
  .button--outline:hover { background: rgba(176, 127, 255, .18); }
  .text-link { transition: color .2s, border-color .2s; }
  .text-link > span { display: inline-block; margin-left: 6px; color: #d69bff; }
  .eyebrow { font-size: 10px; letter-spacing: .17em; }
  .section-head h2 { letter-spacing: -.045em; }

  /* Frosted navigation, with a denser backdrop over light sections. */
  .nav {
    background: linear-gradient(112deg, rgba(235, 216, 255, .19), rgba(214, 180, 255, .12));
    border-color: rgba(233, 211, 255, .24);
    box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 8px 28px rgba(25, 5, 74, .09);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transition: background .25s, border-color .25s;
  }
  .nav-wrap.is-scrolled .nav {
    background: linear-gradient(112deg, rgba(51, 26, 108, .95), rgba(36, 12, 77, .93));
    border-color: rgba(226, 202, 255, .25);
  }

  /* The original Figma background unifies hero and offers. */
  .home-opening {
    isolation: isolate;
    position: relative;
    /* Keep the SVG's aspect ratio while covering wide screens without side bands. */
    background: #21104e url("assets/images/section1-2.svg") center top / cover no-repeat;
  }
  .page-index .hero {
    min-height: 830px;
    padding-top: 160px;
    padding-bottom: 80px;
    background: transparent;
  }
  .page-index .hero::before {
    inset: 10% auto 0 -4%;
    width: 78%;
    background-position: center bottom;
    opacity: .63;
  }
  .page-index .hero-grid { grid-template-columns: 1.07fr 1fr; }
  .page-index .hero h1 { font-size: clamp(42px, 4.3vw, 62px); }
  .page-index .hero .lead { max-width: 540px; color: #f4eaff; }
  .page-index .hero .button {
    box-shadow: 0 0 0 5px rgba(151, 93, 255, .11), 0 6px 28px rgba(43, 7, 126, .32);
  }
  .page-index .hero-trust {
    border: 0;
    margin-top: 25px;
    padding-top: 0;
    gap: 14px 24px;
    align-items: center;
  }
  .page-index .hero-trust > span:first-child {
    padding: 8px 15px;
    border: 1px solid rgba(226, 211, 255, .3);
    border-radius: 100px;
    background: rgba(63, 27, 128, .24);
    font-size: 12px;
  }
  .page-index .hero-trust > span + span {
    max-width: 245px;
    font-family: "Andalan Eug", cursive;
    font-size: 25px;
    line-height: 1.18;
    transform: rotate(-4deg);
  }
  .page-index .hero-mockup {
    margin: -60px -90px -70px -55px;
    filter: drop-shadow(0 25px 38px rgba(21, 0, 65, .13));
  }
  .page-index #offres {
    padding-top: 74px;
    padding-bottom: 80px;
    background: transparent;
    border-top: 1px solid rgba(225, 209, 255, .21);
  }
  .page-index #offres .section-head,
  .page-index #realisations .section-head {
    max-width: none;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    column-gap: 70px;
    align-items: end;
    margin-bottom: 52px;
  }
  .page-index #offres .section-head .eyebrow,
  .page-index #realisations .section-head .eyebrow { grid-column: 1 / -1; }
  .page-index #offres .section-head h2 { max-width: 590px; font-size: 40px; }
  .page-index #offres .section-head p,
  .page-index #realisations .section-head p {
    font-size: 14px;
    line-height: 1.8;
    max-width: 370px;
    margin: 0 0 4px auto;
  }

  /* Glass offer cards: the accessible monthly option is visually emphasized. */
  .situation, .tier-grid .card, .feature-grid .card {
    position: relative;
    background: linear-gradient(158deg, rgba(247, 235, 255, .32), rgba(194, 156, 246, .13) 58%, rgba(160, 111, 234, .15));
    border-color: rgba(244, 232, 255, .22);
    border-radius: 17px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .42), inset 1px 0 rgba(255, 255, 255, .11), 0 16px 45px rgba(22, 0, 61, .12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .situation::before, .tier-grid .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 3px;
    border-radius: 12px;
    background: linear-gradient(90deg, #b28bff, #cc82ff, #7e42ff);
  }
  .situation--monthly, .tier-grid .card--featured {
    background: linear-gradient(160deg, rgba(238, 216, 255, .43), rgba(181, 116, 249, .22) 57%, rgba(130, 75, 209, .28));
    border-color: rgba(224, 197, 255, .43);
    box-shadow: inset 0 1px rgba(255, 255, 255, .62), 0 0 38px rgba(152, 60, 255, .16), 0 22px 48px rgba(21, 0, 60, .22);
  }
  .situation--monthly::before { background: linear-gradient(90deg, #bba0ff, #e397ff, #ad6bff); }
  .situation > .eyebrow {
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(231, 213, 255, .13);
    border-radius: 100px;
    padding: 5px 10px;
    font-size: 9px;
    letter-spacing: .07em;
    color: #f4eaff;
    margin-bottom: 23px;
  }
  .situation p { color: #f0e4ff; font-size: 14px; }
  .situation h3 { font-size: 25px; font-weight: 550; }
  .situation .price { font-size: 32px; }
  .situation .offer-label { margin-top: 22px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
  .situation .card-actions { margin-top: auto; width: 100%; padding-top: 25px; }
  .situation .card-actions .text-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    gap: 10px;
    font-size: 13px;
    padding: 11px 12px;
    border: 1px solid rgba(237, 219, 255, .4);
    border-radius: 100px;
    background: rgba(225, 203, 251, .12);
  }
  .situation--monthly .card-actions .text-link {
    background: linear-gradient(100deg, #6830ff, #8446ff);
    border-color: rgba(230, 206, 255, .16);
    box-shadow: 0 4px 18px rgba(56, 9, 145, .2);
  }
  .situation .card-actions .text-link:hover { background-color: rgba(235, 208, 255, .19); color: #fff; }
  .situation .card-actions .text-link > span { color: #fff; }
  .tiers { gap: 8px; }
  .tiers a { background: rgba(45, 15, 85, .19); border-color: rgba(238, 219, 255, .23); }
  .tiers a:hover { background: rgba(224, 185, 255, .17); }
  .tiers span { color: #ecdcff; }
  .compare {
    background: rgba(36, 9, 84, .34);
    border-color: rgba(220, 191, 255, .28);
  }

  /* Full-width, alternating client projects; no replacement of actual examples. */
  .page-index #realisations { padding-bottom: 0; background: #1d094b; }
  .page-index #realisations > .container { width: 100%; max-width: none; }
  .page-index #realisations .section-head { width: min(1240px, calc(100% - 80px)); margin-inline: auto; }
  .case-cards { display: block; }
  .case-cards .case-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 440px;
    border-radius: 0;
    border: 0;
    border-top: 1px solid rgba(226, 204, 255, .13);
    background: #1d094b;
  }
  .case-cards .case-card:nth-child(even) .case-media { order: 2; }
  .case-cards .case-card:nth-child(even) .case-copy { order: 1; }
  .case-cards .case-media {
    position: relative;
    display: grid;
    align-content: center;
    padding: 48px;
    overflow: hidden;
    background: radial-gradient(ellipse at 5% 8%, rgba(185, 119, 255, .28), transparent 65%), linear-gradient(135deg, #4b2692, #27104d);
  }
  .case-cards .case-card:nth-child(3) .case-media {
    background: radial-gradient(ellipse at 90% 70%, rgba(87, 52, 198, .7), transparent 75%), #371566;
  }
  .case-cards .case-copy {
    position: relative;
    isolation: isolate;
    justify-content: center;
    padding: 56px clamp(32px, 5.5vw, 90px);
    overflow: hidden;
    background: radial-gradient(ellipse at 75% 100%, rgba(91, 38, 207, .33), transparent 75%), #1e094b;
  }
  .case-copy .case-index {
    position: absolute;
    right: -4px;
    bottom: -38px;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    font: 650 clamp(180px, 25vw, 360px)/.86 var(--display);
    letter-spacing: -.09em;
    color: #8a48ff;
    opacity: .16;
  }
  .case-cards .case-copy .eyebrow {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 24px;
    border: 1px solid rgba(238, 211, 255, .2);
    border-radius: 100px;
    background: rgba(205, 169, 255, .12);
    font-size: 9px;
  }
  .case-cards .case-copy h3 { font-size: clamp(28px, 3.2vw, 44px); font-weight: 550; }
  .case-cards .case-copy p { max-width: 440px; font-size: 15px; margin-top: 24px; color: #e5d6f7; }
  .case-cards .case-copy .text-link { margin-top: 28px; padding-top: 0; }
  .case-cards .case-media.case-social {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-inline: clamp(30px, 4.5vw, 90px);
    background: radial-gradient(ellipse at 20% 20%, #b688ea, transparent 75%), linear-gradient(130deg, #6e36c2, #361564);
  }
  .case-cards .case-social figure { align-self: center; }
  .case-cards .case-social figure:first-child { transform: translateY(-15px) rotate(-5deg); }
  .case-cards .case-social figure:last-child { transform: translateY(20px) rotate(5deg); }
  .case-cards .case-social img { border: 1px solid rgba(255, 255, 255, .4); border-radius: 12px; box-shadow: 0 22px 34px rgba(22, 1, 51, .3); }
  .page-index .case-footer {
    display: flex;
    justify-content: center;
    margin: 0;
    position: relative;
    z-index: 1;
    height: 0;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
  .page-index .case-footer a {
    transform: translateY(-50%);
    background: linear-gradient(150deg, rgba(168, 124, 243, .95), rgba(99, 57, 194, .96));
    backdrop-filter: blur(14px);
    padding: 12px 26px;
    border: 1px solid rgba(227, 205, 255, .42);
    border-radius: 100px;
    font-size: 13px;
    box-shadow: 0 8px 25px rgba(21, 0, 65, .18);
  }

  /* Intentional graphic placeholders: framed reserves for the real photographs. */
  .placeholder {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(226, 202, 255, .35);
    border-radius: 15px;
    background:
      linear-gradient(90deg, rgba(208, 173, 255, .06) 1px, transparent 1px) center / 38px 38px,
      linear-gradient(rgba(208, 173, 255, .06) 1px, transparent 1px) center / 38px 38px,
      radial-gradient(ellipse at 75% 20%, rgba(130, 70, 241, .33), transparent 65%), #301557;
    box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 16px 38px rgba(25, 0, 52, .12);
  }
  .placeholder::before {
    content: "";
    width: 51px;
    height: 41px;
    border: 1px solid #d7b6ff;
    border-radius: 8px;
    margin-bottom: 8px;
    background: linear-gradient(145deg, transparent 53%, rgba(209, 169, 255, .45) 54%, rgba(209, 169, 255, .45) 55%, transparent 56%), radial-gradient(circle at 29% 31%, #d3afff 3px, transparent 4px);
    box-shadow: 7px -7px 0 -1px #482570, 7px -7px 0 0 rgba(218, 183, 255, .3);
  }
  .placeholder::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(207, 174, 250, .16);
    border-radius: 8px;
    z-index: -1;
    pointer-events: none;
  }
  .placeholder strong { font-size: 16px; }
  .placeholder span { font-size: 10px; color: #d4bee9; }
  .case-cards .case-media .placeholder { aspect-ratio: 16 / 10; width: 100%; }

  /* Reuse the designer's A / construction-grid artwork for the value rows. */
  .home-values {
    padding: 92px 0 72px;
    border: 0;
    /* The artwork has a transparent top margin: match its first gradient stop. */
    background: #5a28f0 url("assets/images/section4.svg") center top / cover no-repeat;
  }
  .home-values > .container { display: block; }
  .home-values h2 { margin-bottom: 40px; }
  .value-rows { counter-reset: value; }
  .home-values .value-rows > p {
    position: relative;
    counter-increment: value;
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    align-items: center;
    gap: 65px;
    min-height: 138px;
    padding: 32px 0 32px 66px;
    border-bottom: 1px solid rgba(227, 208, 255, .23);
    font-size: 13px;
    line-height: 1.9;
    color: #e7d8fa;
  }
  .home-values .value-rows > p::before {
    content: "0" counter(value);
    position: absolute;
    left: 0;
    top: 46px;
    font: 400 10px/1 var(--body);
    letter-spacing: .12em;
    color: #ccb3ef;
  }
  .home-values .value-rows strong {
    display: block;
    margin: 0;
    max-width: 570px;
    font: 550 clamp(21px, 2.1vw, 29px)/1.25 var(--display);
    letter-spacing: -.04em;
    text-transform: uppercase;
  }

  /* Bilan as a physical document: clarity remains the main conversion cue. */
  .page-index #diagnostic {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 85% 30%, rgba(137, 53, 246, .38), transparent 57%), linear-gradient(150deg, #25105e, #140827);
  }
  .page-index #diagnostic .diagnostic-layout { gap: 86px; }
  .page-index #diagnostic .check-list li::before { color: #d083ff; }
  .report-preview {
    position: relative;
    overflow: hidden;
    border: 1px solid #daceee;
    border-radius: 13px;
    padding: 38px 34px 32px;
    box-shadow: 9px 10px 0 -2px #d9c4ef, 16px 19px 0 -5px rgba(216, 187, 251, .28), 0 32px 64px rgba(5, 0, 18, .3);
    transform: rotate(3deg);
  }
  .report-preview::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(100deg, #7135ff, #c025ff);
  }
  .report-preview:hover { transform: rotate(1deg) translateY(-4px); }

  /* Light method section and numbered vertical rail, as in the reference. */
  .page-index #methode {
    position: relative;
    overflow: hidden;
    padding-top: 102px;
    background: #f5f1ff;
    border-top: 1px solid #eee4ff;
    border-bottom: 1px solid #e6dcf8;
  }
  .section-ghost {
    position: absolute;
    top: -20px;
    left: -12px;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    font: 650 clamp(90px, 16vw, 220px)/1 var(--display);
    letter-spacing: -.07em;
    color: #7941ea;
    opacity: .045;
  }
  .page-index #methode > .container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    column-gap: 90px;
    align-items: start;
  }
  .page-index #methode .section-head { margin: 26px 0 0; }
  .page-index #methode .section-head p { font-size: 15px; color: #524166; }
  .page-index #methode .method-list {
    display: block;
    position: relative;
    margin: 0;
    padding-left: 39px;
    counter-reset: steps;
  }
  .page-index #methode .method-list::before {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 16px;
    left: 0;
    width: 9px;
    border-radius: 100px;
    background: linear-gradient(#692cff, #ae20ff);
    box-shadow: 0 0 0 4px rgba(118, 56, 246, .05);
  }
  .page-index #methode .method-list li { position: relative; padding: 0 0 33px; border: 0; }
  .page-index #methode .method-list li:last-child { padding-bottom: 0; }
  .page-index #methode .method-list li::before {
    content: counter(steps);
    position: absolute;
    left: -45px;
    top: -2px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid #e4d6ff;
    border-radius: 100%;
    color: #6931df;
    font: 500 10px/1 var(--body);
  }
  .page-index #methode .method-list h3 { font-size: 18px; letter-spacing: -.025em; }
  .page-index #methode .method-list p { margin-top: 9px; font-size: 14px; line-height: 1.9; }
  .page-index #methode .team-teaser { grid-column: 1 / -1; margin-top: 48px; padding-top: 42px; }
  .page-index .team-teaser .placeholder { max-height: 240px; }
  .page-index .team-teaser h3 { font-size: 29px; }

  /* Bright testimonial cards, with the existing quotations and authors. */
  .testimonial-band { background: #fff; color: #28113f; }
  .testimonial-band h2 { color: #6025ec; }
  .testimonial-band .reviews { margin-top: 42px; gap: 24px; }
  .testimonial-band .review {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 63px 27px 25px;
    overflow: hidden;
    border: 1px solid #e5d9f7;
    border-radius: 12px;
    background: linear-gradient(160deg, #fff, #faf7ff);
    box-shadow: 0 14px 34px rgba(56, 17, 102, .045);
  }
  .testimonial-band .review::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 22px;
    background: linear-gradient(105deg, #6b34ff, #9632ff);
  }
  .testimonial-band .review:nth-child(2)::before { background: linear-gradient(100deg, #8739ff, #af29ff); }
  .testimonial-band .review:nth-child(3)::before { background: linear-gradient(100deg, #a21eff, #7325f5); }
  .testimonial-band .review::after {
    content: "“";
    position: absolute;
    top: 30px;
    left: 25px;
    font: 600 39px/1 var(--display);
    color: #8644f0;
  }
  .testimonial-band .review blockquote { color: #38224f; font-size: 14px; line-height: 1.9; }
  .testimonial-band .review figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 26px;
    margin-top: auto;
    font-size: 11px;
    line-height: 1.6;
    color: #5c4774;
  }
  .review-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: linear-gradient(125deg, #8d42ff, #ae35ff);
    border-radius: 100%;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
  }
  .testimonial-band .section-footer { justify-content: center; margin-top: 32px; }
  .testimonial-band .text-link { color: #6231c6; border-color: #c4a9e9; }
  .testimonial-band .text-link > span { color: #7b37f0; }

  .page-index #questions { background: linear-gradient(140deg, #281258, #1b0a38); }
  .page-index #questions .container { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; }
  .page-index #questions .section-head { margin-bottom: 0; }
  .page-index #questions .faq { margin-top: -15px; }
  .close {
    position: relative;
    text-align: center;
    padding: 94px 0 88px;
    background: radial-gradient(ellipse at 72% 0%, rgba(87, 31, 169, .3), transparent 65%), #10071f;
  }
  .close .container { display: flex; flex-direction: column; align-items: center; gap: 25px; }
  .close h2 { font-size: clamp(32px, 3.6vw, 50px); }
  .close p { margin-inline: auto; max-width: 580px; font-size: 15px; color: #c5b4d9; }
  .close .actions { margin-top: 0; justify-content: center; }
  .close .button--white { background: linear-gradient(100deg, #6630fc, #8847ff); color: #fff; border-color: #7d4cef; box-shadow: 0 6px 28px rgba(107, 43, 243, .26); }
  .footer { background: #10071f; border-top-color: rgba(206, 181, 242, .1); }

  /* Bring the same palette and material treatment to the service pages. */
  .page-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 83% 4%, rgba(123, 47, 255, .74), transparent 67%), linear-gradient(150deg, #341379, #200e43 78%);
  }
  .page-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 0 48%;
    opacity: .12;
    background: url("assets/images/text-section1.svg") center / cover no-repeat;
    pointer-events: none;
  }
  .page-hero > .container { position: relative; }
  .page-hero .lead { color: #e7daf6; }
  .section--purple:not(#offres):not(#diagnostic) {
    background: radial-gradient(ellipse at 0% 0%, rgba(110, 43, 247, .42), transparent 67%), linear-gradient(145deg, #34136a, #211044);
  }
  .feature-grid .card { background: linear-gradient(145deg, rgba(229, 204, 255, .18), rgba(189, 147, 239, .06)); }
  .feature-grid .card h3 { color: #f6ebff; }
  .case-detail:nth-child(odd) { background: radial-gradient(ellipse at 100% 50%, rgba(87, 27, 144, .2), transparent 70%); }
  .booking-box { background: linear-gradient(140deg, rgba(188, 140, 255, .16), rgba(104, 56, 158, .08)); border-color: rgba(224, 189, 255, .3); }
  .section--light .method-list::before { color: #642bf7; }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .situation { transition: transform .25s ease, box-shadow .25s ease; }
    .situation:hover { transform: translateY(-5px); box-shadow: inset 0 1px rgba(255, 255, 255, .5), 0 20px 44px rgba(22, 0, 61, .24); }
  }

  @media (min-width: 1051px) {
    .situation--monthly { transform: none; }
    .situation--monthly:hover { transform: translateY(-5px); }
  }
  @media (min-width: 1600px) {
    .page-index .hero { min-height: 900px; }
    .case-cards .case-card { min-height: 500px; }
    .case-cards .case-media { padding: 54px max(54px, calc((100vw - 1440px) / 2)); }
    .case-cards .case-copy { padding-right: max(70px, calc((100vw - 1260px) / 2)); }
    .case-cards .case-card:nth-child(even) .case-copy { padding-left: max(70px, calc((100vw - 1260px) / 2)); padding-right: 70px; }
  }
  @media (max-width: 1050px) {
    .page-index .hero { min-height: 760px; }
    .page-index .hero h1 { font-size: 44px; }
    .page-index .hero-mockup { margin: -35px -50px -50px -40px; }
    .page-index #offres .section-head, .page-index #realisations .section-head { gap: 18px 40px; }
    .page-index #offres .section-head h2 { font-size: 35px; }
    .situation { padding: 28px; }
    .situation h3 { font-size: 24px; }
    .page-index #realisations .section-head { width: calc(100% - 56px); }
    .case-cards .case-copy { padding: 35px; }
    .case-cards .case-copy h3 { font-size: 30px; }
    .case-cards .case-media { padding: 30px; }
    .case-cards .case-card { min-height: 410px; }
    .case-cards .case-media.case-social { padding: 30px; gap: 14px; }
    .page-index #diagnostic .diagnostic-layout { gap: 44px; }
    .page-index #methode > .container { gap: 45px; }
    .page-index #questions .container { gap: 38px; }
  }
  @media (max-width: 900px) {
    .nav__links { background: rgba(36, 11, 78, .98); }
    .page-index .hero { min-height: 690px; padding-top: 135px; padding-bottom: 62px; }
    .page-index .hero h1 { font-size: 38px; }
    .page-index .hero-mockup { margin: 0 -30px 0 -30px; }
    .page-index #offres .section-head { grid-template-columns: 1fr; gap: 16px; }
    .page-index #offres .section-head p { margin-left: 0; max-width: 630px; }
    .page-index #offres .grid-3 { gap: 24px; }
    .situation { padding: 30px; }
    .tiers { max-width: 560px; }
    .situation .card-actions .text-link { max-width: 360px; }
    .home-values { background-position: center top; }
    .home-values .value-rows > p { grid-template-columns: 1.1fr 1fr; gap: 30px; padding-left: 42px; }
    .home-values .value-rows strong { font-size: 23px; }
    .page-index #methode > .container { column-gap: 35px; }
    .page-index #methode .section-head h2 { font-size: 32px; }
    .testimonial-band .reviews { gap: 15px; }
    .testimonial-band .review { padding: 58px 20px 24px; }
    .testimonial-band .review blockquote { font-size: 13px; }
    .testimonial-band .review::after { left: 18px; }
    .page-index #questions .container { grid-template-columns: 1fr; gap: 30px; }
    .page-index #questions .faq { margin-top: 0; }
  }
  @media (max-width: 650px) {
    .home-opening {
      background: radial-gradient(ellipse 110% 27% at 60% 10%, rgba(125, 68, 255, .8), transparent 100%), linear-gradient(180deg, #4920bc 0%, #38146e 40%, #1d0949 100%);
    }
    .page-index .hero { min-height: 0; padding: 126px 0 30px; }
    .page-index .hero::before { width: 130%; left: -15%; top: 100px; bottom: 27%; opacity: .55; }
    .page-index .hero-grid { grid-template-columns: 1fr; }
    .page-index .hero h1 { font-size: clamp(33px, 8.6vw, 44px); }
    .page-index .hero .lead { color: #f3eaff; }
    .page-index .hero-trust { gap: 20px; }
    .page-index .hero-trust > span + span { font-size: 23px; max-width: none; }
    .page-index .hero-mockup { width: 365px; max-width: 100%; margin: -10px auto -45px; }
    .page-index #offres { padding: 54px 0; }
    .page-index #offres .section-head { margin-bottom: 32px; gap: 16px; }
    .page-index #offres .section-head h2 { font-size: 32px; }
    .situation, .tier-grid .card { padding: 28px 25px; }
    .situation > .eyebrow { font-size: 8px; padding-inline: 9px; }
    .situation h3 { font-size: 25px; }
    .situation .card-actions .text-link { font-size: 12px; padding-inline: 10px; }
    .page-index #realisations { padding-top: 55px; }
    .page-index #realisations .section-head { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 16px; margin-bottom: 30px; }
    .page-index #realisations .section-head p { margin: 0; max-width: none; }
    .case-cards .case-card { grid-template-columns: 1fr; min-height: 0; }
    .case-cards .case-card:nth-child(even) .case-media, .case-cards .case-card:nth-child(even) .case-copy { order: unset; }
    .case-cards .case-media { padding: 27px; min-height: 275px; }
    .case-cards .case-media.case-social { padding: 35px 32px 45px; gap: 20px; }
    .case-cards .case-copy { padding: 36px 27px 45px; min-height: 320px; }
    .case-cards .case-copy .eyebrow { font-size: 8px; margin-bottom: 21px; }
    .case-cards .case-copy h3 { font-size: 31px; }
    .case-cards .case-copy p { font-size: 14px; max-width: 410px; margin-top: 18px; }
    .case-copy .case-index { font-size: 220px; bottom: -23px; right: 4px; }
    .case-cards .case-copy .text-link { margin-top: 24px; }
    .case-cards .case-social img { border-radius: 9px; }
    .page-index .case-footer a { font-size: 12px; padding: 10px 22px; }
    .home-values { padding: 67px 0 47px; background-size: auto 100%; background-position: 57% top; }
    .home-values h2 { font-size: 31px; margin-bottom: 25px; }
    .home-values .value-rows > p { grid-template-columns: 1fr; gap: 13px; min-height: 0; padding: 28px 0 29px 35px; font-size: 13px; }
    .home-values .value-rows > p::before { top: 35px; font-size: 9px; }
    .home-values .value-rows strong { font-size: 22px; }
    .page-index #diagnostic .diagnostic-layout { gap: 42px; }
    .report-preview { padding: 33px 25px 25px; transform: rotate(1.5deg); width: calc(100% - 12px); margin-inline: 2px; }
    .report-preview:hover { transform: rotate(1.5deg); }
    .page-index #methode { padding-top: 68px; }
    .section-ghost { top: 7px; font-size: 95px; }
    .page-index #methode > .container { grid-template-columns: 1fr; gap: 34px; }
    .page-index #methode .section-head { margin-top: 0; }
    .page-index #methode .method-list { margin-left: 8px; padding-left: 36px; }
    .page-index #methode .method-list li::before { left: -42px; }
    .page-index #methode .team-teaser { margin-top: 8px; padding-top: 32px; }
    .page-index .team-teaser h3 { font-size: 26px; }
    .testimonial-band { padding: 55px 0; }
    .testimonial-band .reviews { grid-template-columns: 1fr; gap: 22px; margin-top: 30px; }
    .testimonial-band .review { padding: 62px 25px 24px; }
    .testimonial-band .review::after { left: 23px; }
    .testimonial-band .review blockquote { font-size: 14px; }
    .testimonial-band .review figcaption { padding-top: 22px; }
    .testimonial-band .text-link { font-size: 13px; }
    .page-index #questions .container { gap: 22px; }
    .page-index #questions .faq { margin-top: 0; }
    .close { padding: 65px 0 62px; }
    .close h2 { font-size: 33px; }
    .close p { font-size: 14px; }
    .section-head h2 { line-height: 1.15; }
  }
  @media (max-width: 360px) {
    .page-index .hero h1 { font-size: 32px; }
    .situation { padding: 25px 21px; }
    .situation h3 { font-size: 23px; }
    .page-index #realisations .section-head { width: calc(100% - 32px); }
    .case-cards .case-copy { padding-inline: 22px; }
    .case-cards .case-media { padding: 22px; }
    .case-cards .case-media.case-social { padding-inline: 27px; gap: 15px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .situation:hover, .situation--monthly:hover { transform: none; }
    .report-preview:hover { transform: none; }
  }
}

@media print {
  .case-index, .section-ghost, .review-avatar { display: none; }
}

/* Explain the first impression without adding another row of offer cards. */
@media screen {
  .image-gap {
    padding: 65px 0 55px;
    border-top: 1px solid rgba(225, 209, 255, .18);
    background: linear-gradient(110deg, rgba(33, 9, 82, .32), rgba(57, 16, 112, .16));
  }
  .gap-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 38px 90px; align-items: center; }
  .gap-copy h2 { font-size: clamp(28px, 2.6vw, 37px); line-height: 1.2; }
  .gap-copy > p { margin-top: 22px; max-width: 560px; color: #eee3fc; font-size: 15px; }
  .perception-path { list-style: none; margin: 0; padding: 0; position: relative; }
  .perception-path::before { content: ''; position: absolute; left: 19px; top: 21px; bottom: 42px; width: 1px; background: linear-gradient(#bb8dff, #d7b5ff, #9a53ff); }
  .perception-path li { display: flex; align-items: flex-start; gap: 20px; position: relative; padding: 17px 0; }
  .path-number { display: grid; place-items: center; width: 39px; height: 39px; flex-shrink: 0; border: 1px solid #b18bdf; border-radius: 50%; background: #46208b; color: #f3e9ff; font-size: 11px; }
  .perception-path h3 { font-size: 19px; letter-spacing: -.025em; }
  .perception-path p { margin-top: 6px; font-size: 13px; color: #e1cef5; }
  .gap-takeaway { grid-column: 1 / -1; margin: 0; padding-top: 25px; border-top: 1px solid rgba(225, 209, 255, .18); color: #e9dbfb; font-size: 14px; text-align: center; }
  .gap-takeaway strong { color: #fff; font-weight: 550; }
  .page-index .tiers a { display: grid; grid-template-columns: 1fr; gap: 3px; }
  .tier-benefit { display: block; color: #eee0ff; font-size: 12px; line-height: 1.5; }
  .page-index .tiers a > span { margin-top: 3px; font-size: 12px; }
  .page-index .situation .card-actions { margin-top: auto; width: 100%; }
  .diagnostic-steps { list-style: none; margin: 29px 0 25px; padding: 0; counter-reset: diagnostic; }
  .diagnostic-steps li { position: relative; padding: 0 0 21px 36px; counter-increment: diagnostic; }
  .diagnostic-steps li:last-child { padding-bottom: 0; }
  .diagnostic-steps li::before { content: '0' counter(diagnostic); position: absolute; left: 0; top: 1px; font-size: 11px; color: #d0a0ff; }
  .diagnostic-steps h3 { font-size: 17px; line-height: 1.4; letter-spacing: -.02em; }
  .diagnostic-steps p { margin-top: 7px; font-size: 14px; line-height: 1.8; color: #e1d1f1; }
  .diagnostic-reassurance { padding-left: 17px; border-left: 2px solid #b175ff; font-size: 15px; color: #fff; }
  .booking-process { padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(140deg, #352067, #23113f); }
  .booking-process h2 { font-size: 25px; }
  .booking-process .diagnostic-steps { margin: 24px 0; }
  .booking-process .diagnostic-steps h3 { font-size: 15px; }
  .booking-process .diagnostic-steps p { font-size: 13px; }
  .contact-coordinates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
  .contact-coordinates h3 { font-size: 19px; }
  .contact-coordinates p { font-size: 14px; overflow-wrap: anywhere; }
  @media (max-width: 1050px) {
    .gap-layout { gap: 30px 40px; }
    .gap-copy h2 { font-size: 30px; }
    .perception-path h3 { font-size: 17px; }
  }
  @media (max-width: 650px) {
    .contact-coordinates { grid-template-columns: 1fr; gap: 16px; }
    .image-gap { padding: 45px 0 35px; }
    .gap-layout { grid-template-columns: 1fr; gap: 22px; }
    .gap-copy h2 { font-size: 29px; }
    .gap-copy > p { font-size: 14px; }
    .perception-path li { padding: 13px 0; }
    .gap-takeaway { text-align: left; }
    .gap-takeaway strong { display: block; margin-bottom: 6px; }
    .diagnostic-steps h3 { font-size: 16px; }
    .booking-process { padding: 25px; }
  }
}

/* v13: four pages, one clear destination for each action. */
@media screen {
  .page-index .tiers .tier-summary {
    display: grid; gap: 3px; padding: 11px 14px;
    border-bottom: 1px solid rgba(235, 213, 255, .19);
    font-size: 13px;
  }
  .page-index .tiers .tier-summary:last-child { border-bottom: 0; }
  .page-index .tiers .tier-summary > span { font-size: 12px; margin-top: 3px; }
  .diagnostic-deliverable {
    padding: 42px 38px; border-radius: 18px; background: #f8f4ff; color: #26123e;
    border-top: 6px solid #a059ff; box-shadow: 0 22px 50px rgba(10, 0, 31, .23);
  }
  .diagnostic-deliverable .eyebrow { color: #6c32cf; }
  .diagnostic-deliverable h3 { font-size: 31px; }
  .diagnostic-deliverable > p { margin-top: 20px; font-size: 14px; color: #5b4672; }
  .diagnostic-deliverable ol { list-style: none; padding: 0; margin: 24px 0 0; counter-reset: deliverable; }
  .diagnostic-deliverable li { position: relative; counter-increment: deliverable; padding: 20px 0 20px 32px; border-top: 1px solid #e1d4f0; font-size: 14px; }
  .diagnostic-deliverable li::before { content: '0' counter(deliverable); position: absolute; left: 0; top: 21px; color: #8041dc; font-size: 11px; }
  .diagnostic-deliverable li span { display: block; margin-top: 6px; color: #645177; font-size: 13px; }
  .diagnostic-deliverable > .note { font-size: 12px; }
  .offer-jumps { display: flex; flex-wrap: wrap; gap: 12px; padding-block: 26px; }
  .offer-jumps a { padding: 9px 17px; border: 1px solid #715293; border-radius: 100px; font-size: 12px; text-decoration: none; color: #eadbf9; }
  .offer-jumps a:hover { background: #38205c; }
  .page-offres .section-head { max-width: 900px; }
  .page-offres .section-head h2 { font-size: clamp(30px, 3.2vw, 43px); }
  .offer-details { margin-top: 34px; border: 1px solid #715293; border-radius: 15px; background: rgba(20, 5, 41, .22); }
  .offer-details summary { font-size: 15px; padding: 20px 24px; }
  .offer-details-body { padding: 12px 28px 28px; color: #e0d1ef; font-size: 14px; }
  .offer-details-body > h3 { color: #fff; font-size: 20px; margin-top: 12px; }
  .offer-details-body > p { margin-top: 16px; }
  .offer-details-body .method-list { margin: 26px 0 34px; }
  .offer-details-body .method-list h3 { font-size: 17px; }
  .offer-details-body dl { margin: 28px 0 0; }
  .offer-details-body dt { margin-top: 23px; color: #fff; font-weight: 550; }
  .offer-details-body dd { margin: 8px 0 0; }
  .offer-details-body .note { margin-top: 24px; }
  .project-offer { border-top: 1px solid var(--line); background: radial-gradient(ellipse at 90% 10%, rgba(111, 47, 206, .22), transparent 65%), #1c0b39; }
  .project-offer-head { display: grid; grid-template-columns: 1.35fr 1fr; gap: 72px; align-items: start; }
  .project-offer h2 { font-size: clamp(33px, 3.6vw, 48px); }
  .offer-promise { font: 500 24px/1.4 var(--display); margin-top: 22px; }
  .project-offer-head .muted { margin-top: 22px; font-size: 15px; }
  .project-investment { padding: 30px; border-radius: 18px; background: linear-gradient(140deg, rgba(206, 167, 255, .16), rgba(118, 61, 174, .08)); border: 1px solid #715293; }
  .project-investment > p:not(.price) { font-size: 14px; color: #decfeb; margin-top: 16px; }
  .project-investment .price { font-size: 36px; }
  .project-investment .button { font-size: 13px; }
  .offer-inclusions { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 40px; margin: 48px 0 0; padding: 0; }
  .offer-inclusions li { padding-top: 20px; border-top: 1px solid #674886; }
  .offer-inclusions strong { font: 500 19px/1.4 var(--display); }
  .offer-inclusions p { margin-top: 9px; font-size: 14px; color: #deceef; }
  .print-scope { margin-top: 32px; padding: 18px 22px; border-left: 2px solid #b781fc; background: rgba(154, 83, 231, .075); color: #deceef; font-size: 13px; }
  .offer-comparison { padding-top: 30px; }
  .direct-contact { padding-top: 20px; }
  .direct-contact .contact-coordinates { margin-top: 0; }
  .direct-contact .intent-note { margin: 0 0 25px; }
  .direct-contact h2 { font-size: 25px; }
  .direct-contact #contact-email { font-size: 16px; }
  .contact-diagnostic { margin-top: 60px; padding: 36px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 50px; }
  .contact-diagnostic p { max-width: 640px; color: #e0d1f1; margin-top: 16px; font-size: 15px; }
  .contact-diagnostic > div:last-child { justify-self: end; }
  .contact-diagnostic .note { font-size: 12px; }
  @media (max-width: 1050px) {
    .project-offer-head { gap: 32px; }
    .project-investment { padding: 24px; }
    .offer-inclusions { gap: 25px; }
  }
  @media (max-width: 900px) {
    .project-offer-head { grid-template-columns: 1fr; }
    .offer-inclusions { grid-template-columns: 1fr 1fr; }
    .contact-diagnostic { grid-template-columns: 1fr; gap: 25px; }
    .contact-diagnostic > div:last-child { justify-self: start; }
  }
  @media (max-width: 650px) {
    .diagnostic-deliverable { padding: 30px 25px; }
    .diagnostic-deliverable h3 { font-size: 27px; }
    .offer-jumps { gap: 9px; }
    .offer-jumps a { font-size: 11px; padding: 9px 12px; }
    .offer-inclusions { grid-template-columns: 1fr; margin-top: 32px; gap: 20px; }
    .offer-promise { font-size: 22px; }
    .offer-details summary { padding: 18px; font-size: 14px; }
    .offer-details-body { padding: 10px 20px 24px; }
    .offer-details-body .method-list { gap: 18px; }
    .print-scope { padding: 15px 18px; }
    .direct-contact { padding-top: 0; }
    .contact-diagnostic { margin-top: 38px; }
  }
}

/* Equal card and price baselines on the homepage. */
@media screen {
  .page-index #offres .situation > .eyebrow { min-height: 37px; display: flex; align-items: center; }
  .page-index #offres .offer-bottom { margin-top: auto; width: 100%; padding-top: 24px; }
  .page-index #offres .offer-bottom .offer-label { margin-top: 0; }
  .page-index #offres .offer-bottom .price { margin-top: 12px; line-height: 1.2; }
  .page-index #offres .offer-bottom .price small { display: block; margin-top: 6px; line-height: 1.5; }
  .page-index #offres .offer-bottom .card-actions { margin-top: 0; padding-top: 24px; }
  .page-index #offres .card-actions .text-link { min-height: 60px; text-align: center; line-height: 1.4; }
  .page-index #offres .card-actions .text-link > span { flex-shrink: 0; }

  /* Native horizontal scrolling remains available without JavaScript. */
  .testimonial-band .reviews--carousel { display: block; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 2px 0 18px; scrollbar-width: thin; scrollbar-color: #a479eb #f0e8fc; }
  .reviews-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; }
  .testimonial-band .reviews-track .review { min-width: 0; scroll-snap-align: start; }
  .testimonial-band .reviews-track .review::before { background: linear-gradient(105deg, #6b34ff, #9632ff); }
  .testimonial-band .reviews-track .review[data-review-index="1"]::before,
  .testimonial-band .reviews-track .review[data-review-index="4"]::before { background: linear-gradient(100deg, #8739ff, #af29ff); }
  .testimonial-band .reviews-track .review[data-review-index="2"]::before,
  .testimonial-band .reviews-track .review[data-review-index="5"]::before { background: linear-gradient(100deg, #a21eff, #7325f5); }
  .review-who strong, .review-who > span { display: block; }
  .reviews-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
  .reviews-controls[hidden] { display: none; }
  .reviews-controls button { min-width: 44px; min-height: 44px; border: 1px solid #d9c8f6; border-radius: 100px; background: #f6f0ff; color: #6025ca; cursor: pointer; }
  .reviews-controls button:hover { background: #eadefb; }
  .reviews-prev, .reviews-next { font-size: 21px; }
  .reviews-position { min-width: 48px; text-align: center; color: #695879; font-size: 12px; font-variant-numeric: tabular-nums; }
  .reviews--carousel.is-resetting { scroll-snap-type: none; scroll-behavior: auto; }
  .reviews--carousel:focus-visible { outline-offset: 5px; border-radius: 12px; }
  @media (max-width: 1050px) {
    .reviews-track { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; }
  }
  @media (max-width: 650px) {
    .reviews-track { grid-auto-columns: calc(100% - 24px); gap: 16px; }
    .testimonial-band .reviews-track .review { padding: 58px 22px 24px; }
    .testimonial-band .reviews-track .review blockquote { font-size: 13px; }
  }
}
.reviews-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media print {
  .reviews-controls, .review[data-clone] { display: none !important; }
  .reviews-track { display: block; }
  .reviews--carousel { display: block; overflow: visible; }
  .review { break-inside: avoid; margin-bottom: 20px; }
}

/* Keep the portfolio hero on the same grid as its project descriptions. */
.page-realisations .page-hero > .container { max-width: 1240px; }

/* Uploaded project visuals retain their full composition and readable labels. */
.project-shot { min-width: 0; }
.project-shot img { display: block; width: 100%; height: auto; border-radius: 12px; }
.case-social .project-shot img { aspect-ratio: auto; object-fit: contain; }
.project-stack { display: grid; gap: 20px; }
.project-pair { display: grid; grid-template-columns: 1.25fr .85fr; align-items: center; gap: 20px; }
.project-stack .project-shot img, .project-pair .project-shot img { box-shadow: 0 12px 35px #0b031d35; border: 1px solid #dcc8f02b; }
.page-index .case-media > .project-shot { width: 100%; max-width: 680px; margin-inline: auto; }
.page-index .case-card:first-child .case-media > .project-shot { max-width: 556px; }
.page-index .case-media > .project-shot img { border: 1px solid #dcc8f050; box-shadow: 0 18px 40px #16013340; }
.page-realisations .case-social { align-items: center; }
@media (max-width: 650px) {
  .project-pair { grid-template-columns: 1fr; gap: 20px; }
  .project-pair .project-shot:last-child { width: 100%; max-width: 378px; justify-self: center; }
}

/* Allow the longer portfolio link to wrap cleanly on small screens. */
.page-index .case-footer a { max-width: calc(100% - 40px); text-align: center; line-height: 1.45; }

/* Designer typography: use Geologica's supplied variable axes for every title.
   Keep weight controlled by each component's existing font-weight. */
:root { --title-variation: "CRSV" 0, "SHRP" 37; }
:is(h1, h2, h3, h4, h5, h6,
    .eyebrow, .offer-label, .offer-promise, .offer-jumps strong,
    .offer-inclusions strong, .home-values .value-rows strong,
    .tier-summary strong, .gap-takeaway strong,
    .diagnostic-deliverable strong, .case-detail dt,
    .offer-details-body dt, summary) {
  font-family: var(--display);
  font-variation-settings: var(--title-variation);
}
.price, .section-ghost, .page-offres .page-hero::before {
  font-variation-settings: var(--title-variation);
}

.home-brand-note { max-width: 760px; margin: 28px auto 0; text-align: center; color: #dfd0f4; font-size: 13px; line-height: 1.8; }


/* v30 : une seule carte Brand Elevation, avec ses deux situations (refonte / lancement). */
@media screen {
  .page-index #offres .grid-3--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .situation-tag {
    justify-self: start; width: max-content; margin-bottom: 4px; padding: 3px 9px;
    border: 1px solid rgba(235, 213, 255, .35); border-radius: 100px;
    font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #f3e8ff;
  }
  .page-index .tiers--situations .tier-summary { padding-block: 14px; }
  .page-index .tiers--situations .tier-summary strong { font-size: 15px; line-height: 1.35; }
  .page-index .tiers--situations .tier-benefit { margin-top: 4px; }
}
@media (max-width: 900px) {
  .page-index #offres .grid-3--two { grid-template-columns: 1fr; }
}

/* v32 : les deux cartes d'offres partagent la même mise en forme des lignes. */
@media screen {
  .page-index #offres .tiers--situations .tier-summary { padding: 14px 14px; }
  .page-index #offres .tiers--situations .tier-benefit { font-size: 12.5px; }
}