/* tarif.css — le prix, publié.
   La grille de tarifs et le simulateur de régie, partagés par l'accueil, les
   pages service et les pages secteur. Extrait de home.css : les classes
   numérotées `tarif-*` viennent de la conversion de la version 2, les trois
   classes `ag-tarif*` sont écrites ici — le bloc empruntait auparavant celles
   de l'accueil, qu'il ne peut plus connaître.

   Chargée APRÈS la feuille de la page : elle n'a aucune règle à lui disputer,
   ses sélecteurs lui sont propres. */

/* -- L'enveloppe de la section, la même partout ------------------------- */
.ag-tarif {
   background: #000A1C;
   color: #fff
}

.ag-tarif-tete {
   animation: agLeft .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% cover 20%
}

.ag-tarif-kicker {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: #FFBA13;
   margin-bottom: 18px
}

/* `agLeft` vit dans home.css, qui ne voyage pas avec les pages de catalogue :
   on la redéclare ici. Deux définitions identiques du même nom ne gênent pas —
   la dernière lue gagne, et elles disent la même chose. */
@keyframes agLeft {
   from {
      opacity: 0;
      transform: translateX(-26px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

/* -- La grille et le simulateur, convertis de la version 2 -------------- */
.tarif-2 {
   display: flex;
   align-items: flex-end;
   gap: 32px;
   margin-bottom: 40px
}

.tarif-3 {
   margin: 0;
   font-size: 44px;
   line-height: 1.04;
   font-weight: 600;
   letter-spacing: -.03em;
   max-width: 22ch;
   text-wrap: balance
}

.tarif-4 {
   margin-left: auto;
   display: flex;
   gap: 8px;
   flex: none
}

.tarif-5 {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 0.9fr;
   border-top: 1px solid rgba(141, 169, 196, .3);
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #8DA9C4
}

.tarif-6 {
   padding: 16px 0
}

.tarif-7 {
   padding: 16px 0;
   color: #FFBA13
}

.tarif-8 {
   padding: 16px 0;
   text-align: right
}

.tarif-9 {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 0.9fr;
   border-top: 1px solid rgba(141, 169, 196, .18);
   align-items: center;
   transition: background .3s, padding-left .3s;
   animation: agRise .7s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% entry 90%
}

.tarif-12 {
   font-size: 20px;
   font-weight: 600;
   letter-spacing: -.015em
}

.tarif-13 {
   font-size: 14px;
   color: #8DA9C4;
   margin-top: 5px
}

.tarif-14 {
   padding: 22px 0;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 16px;
   color: #8DA9C4;
   text-decoration: line-through
}

.tarif-15 {
   padding: 22px 0;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 22px;
   font-weight: 600;
   color: #FFBA13
}

.tarif-16 {
   padding: 22px 0;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 13px;
   color: #D3E2ED;
   text-align: right
}

.tarif-17 {
   border-top: 1px solid rgba(141, 169, 196, .3);
   padding-top: 24px;
   margin-top: 8px
}

.tarif-18 {
   margin: 0;
   font-size: 15.5px;
   line-height: 1.6;
   color: #8DA9C4;
   max-width: 88ch;
   text-wrap: pretty
}

.tarif-19 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 72px;
   align-items: start
}

.tarif-20 {
   display: flex;
   align-items: baseline;
   gap: 12px;
   padding-bottom: 13px;
   border-bottom: 1px solid rgba(141, 169, 196, .3)
}

.tarif-21 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .12em;
   color: #5C7897
}

.tarif-22 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 20px;
   color: #8DA9C4;
   text-decoration: line-through;
   margin-left: auto
}

.tarif-23 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   border-bottom: 1px solid rgba(141, 169, 196, .3)
}

.tarif-24 {
   padding: 26px 20px 28px 0
}

.tarif-25 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .14em;
   color: #8DA9C4;
   height: 16px
}

.tarif-26 {
   font-size: 52px;
   line-height: 1;
   font-weight: 700;
   letter-spacing: -.045em;
   color: #FFBA13;
   margin: 14px 0 9px
}

.tarif-27 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #5C7897
}

.tarif-28 {
   font-size: 14.5px;
   line-height: 1.45;
   color: #D3E2ED;
   margin-top: 14px;
   text-wrap: pretty
}

.tarif-29 {
   padding: 26px 20px 28px;
   border-left: 1px solid rgba(141, 169, 196, .22);
   background: rgba(255, 186, 19, .055)
}

.tarif-30 {
   display: flex;
   align-items: baseline;
   gap: 7px;
   height: 16px
}

.tarif-31 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .14em;
   color: #FFBA13
}

.tarif-32 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   letter-spacing: .08em;
   line-height: 1;
   white-space: nowrap;
   color: #000A1C;
   background: #FFBA13;
   padding: 3px 5px
}

.tarif-33 {
   padding: 26px 0 28px 20px;
   border-left: 1px solid rgba(141, 169, 196, .22)
}

.tarif-34 {
   margin: 20px 0 0;
   font-size: 16.5px;
   line-height: 1.5;
   color: #D3E2ED;
   max-width: 52ch;
   text-wrap: pretty
}

.tarif-35 {
   margin-top: 18px;
   font-size: 14.5px;
   line-height: 1.6;
   color: #8DA9C4;
   max-width: 52ch
}

.tarif-36 {
   color: #FFBA13
}

.tarif-37 {
   border: 1px solid rgba(141, 169, 196, .3)
}

.tarif-38 {
   padding: 22px 28px;
   border-bottom: 1px solid rgba(141, 169, 196, .3);
   display: flex;
   align-items: baseline;
   gap: 12px
}

.tarif-39 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   color: #8DA9C4;
   margin-left: auto
}

.tarif-40 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 76px 80px 88px 84px;
   gap: 10px;
   padding: 11px 28px;
   border-bottom: 1px solid rgba(141, 169, 196, .3);
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .12em;
   color: #8DA9C4
}

.tarif-41 {
   text-align: center
}

.tarif-42 {
   text-align: right
}

.tarif-43 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 76px 80px 88px 84px;
   gap: 10px;
   align-items: center;
   padding: 12px 28px;
   border-bottom: 1px solid rgba(141, 169, 196, .16);
   transition: background .25s
}

.tarif-46 {
   display: flex;
   align-items: center;
   gap: 5px;
   justify-content: center
}

.tarif-47 {
   padding: 16px 28px;
   border-bottom: 1px solid rgba(141, 169, 196, .3);
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap
}

.tarif-48 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .12em;
   color: #8DA9C4
}

.tarif-49 {
   padding: 28px;
   display: flex;
   align-items: flex-end;
   gap: 20px;
   background: rgba(255, 186, 19, .07)
}

.tarif-50 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .12em;
   color: #8DA9C4;
   margin-bottom: 10px
}

.tarif-51 {
   font-size: 15px;
   color: #D3E2ED
}

.tarif-52 {
   margin-left: auto;
   font-size: 48px;
   font-weight: 700;
   letter-spacing: -.035em;
   color: #FFBA13;
   line-height: 1;
   transition: color .3s
}

.hp-mode.is-on {
   font-weight: 600;
   background: #FFBA13;
   color: #000A1C;
   border-color: #FFBA13
}

.hp-dtab {
   padding: 6px 11px;
   font-size: 12px;
   cursor: pointer;
   font-family: 'IBM Plex Mono', monospace;
   background: transparent;
   color: #8DA9C4;
   font-weight: 400;
   border: 1px solid rgba(141, 169, 196, .3);
   transition: background .25s, color .25s, border-color .25s
}

.hp-dtab.is-on {
   background: #FFBA13;
   color: #000A1C;
   font-weight: 600;
   border-color: #FFBA13
}


@media (max-width:1180px) {
   .page-3,
   .page-17,
   .page-38,
   .realisations-2,
   .temoignages-2,
   .methode-2,
   .garanties-1,
   .stack-2,
   .tarif-1,
   .page-60,
   .fianarantsoa-1,
   .faq-1,
   .contact-3,
   .page-74,
   .page-85 {
      padding-left: 40px;
      padding-right: 40px
   }

   .tarif-19,
   .faq-1,
   .community-1 {
      gap: 44px
   }

   .tarif-38,
   .tarif-40,
   .tarif-43,
   .tarif-47,
   .tarif-49 {
      min-width: 620px
   }
}

@media (max-width:900px) {
   /* gouttières communes */
   .page-38,
   .realisations-2,
   .temoignages-2,
   .methode-2,
   .garanties-1,
   .stack-2,
   .tarif-1,
   .page-60,
   .fianarantsoa-1,
   .faq-1,
   .contact-3,
   .page-74,
   .page-85 {
      padding-left: 20px;
      padding-right: 20px
   }

   .tarif-1 {
      padding-top: 52px;
      padding-bottom: 52px
   }

   /* Les titres cessent de se brider en `ch` : la largeur suffit à les cadrer. */
   .page-28,
   .page-34,
   .page-42,
   .page-43,
   .realisations-17,
   .realisations-18,
   .temoignages-10,
   .garanties-3,
   .garanties-4,
   .garanties-9,
   .garanties-17,
   .stack-5,
   .stack-6,
   .tarif-3,
   .community-2,
   .community-3,
   .offres-3,
   .fianarantsoa-4,
   .fianarantsoa-5,
   .fianarantsoa-6,
   .faq-2,
   .faq-3,
   .contact-5,
   .contact-6,
   .page-101,
   .page-145,
   .page-164 {
      max-width: none
   }

   /* En-têtes de section : le chapô passe sous le titre. */
   .page-39,
   .realisations-14,
   .temoignages-9,
   .garanties-2,
   .stack-4,
   .tarif-2,
   .offres-2,
   .tarif-20 {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px
   }

   .page-43,
   .realisations-18,
   .temoignages-11,
   .garanties-4,
   .stack-6,
   .tarif-4,
   .offres-4,
   .tarif-22,
   .realisations-5,
   .methode-4,
   .methode-7 {
      margin-left: 0;
      margin-right: 0
   }

   .page-42,
   .realisations-17,
   .temoignages-10,
   .garanties-3,
   .tarif-3,
   .community-2,
   .offres-3,
   .faq-2,
   .contact-5,
   .fianarantsoa-4 {
      font-size: 29px
   }

   /* tarifs : le tableau devient une fiche par ligne, en gardant ses colonnes */
   .tarif-5,
   .tarif-9 {
      grid-template-columns: repeat(3, 1fr);
      gap: 6px 12px
   }

   .tarif-5 {
      padding-top: 10px
   }

   .tarif-5> :first-child {
      grid-column: 1 / -1;
      padding-bottom: 2px
   }

   .tarif-6,
   .tarif-7,
   .tarif-8 {
      padding: 0 0 6px
   }

   .tarif-9 {
      padding: 16px 0
   }

   .tarif-11 {
      grid-column: 1 / -1;
      padding: 0 0 10px
   }

   .tarif-14,
   .tarif-15,
   .tarif-16 {
      padding: 0
   }

   .tarif-12 {
      font-size: 18px
   }

   .tarif-14 {
      font-size: 13px
   }

   .tarif-15 {
      font-size: 19px
   }

   .tarif-16 {
      font-size: 11px
   }

   .tarif-19 {
      grid-template-columns: 1fr;
      gap: 34px
   }

   .tarif-23 {
      grid-template-columns: 1fr
   }

   .tarif-24 {
      padding: 22px 0 20px
   }

   .tarif-29 {
      padding: 22px 20px 20px;
      border-left: none;
      border-top: 1px solid rgba(141, 169, 196, .22)
   }

   .tarif-33 {
      padding: 22px 0 24px;
      border-left: none;
      border-top: 1px solid rgba(141, 169, 196, .22)
   }

   .tarif-26 {
      font-size: 42px
   }

   .tarif-38,
   .tarif-40,
   .tarif-43,
   .tarif-47,
   .tarif-49 {
      min-width: 0
   }

   .tarif-38,
   .tarif-40,
   .tarif-43,
   .tarif-47 {
      padding-left: 20px;
      padding-right: 20px
   }

   .tarif-38 {
      flex-wrap: wrap;
      gap: 4px 14px
   }

   .tarif-39 {
      margin-left: 0
   }

   .tarif-43 {
      grid-template-columns: minmax(0, 1fr) auto auto 16px;
      gap: 12px 10px;
      align-items: center;
      padding-top: 15px;
      padding-bottom: 15px;
      cursor: pointer
   }

   .tarif-45 {
      grid-area: 2 / 1 / 3 / 5;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px
   }

   .tarif-46:nth-of-type(2) {
      grid-area: 3 / 3 / 4 / 5;
      justify-self: end
   }

   .tarif-46 {
      gap: 8px
   }

   .tarif-49>div {
      min-width: 0
   }

   .tarif-52 {
      flex: none;
      font-size: 30px;
      white-space: nowrap
   }

   .hp-mode {
      padding: 11px 15px;
      font-size: 13.5px
   }
}

@media (max-width:560px) {
   .page-42,
   .realisations-17,
   .temoignages-10,
   .garanties-3,
   .tarif-3,
   .community-2,
   .offres-3,
   .faq-2,
   .contact-5,
   .fianarantsoa-4 {
      font-size: 26px
   }

   .tarif-26 {
      font-size: 36px
   }

   .tarif-52 {
      font-size: 32px
   }

   .tarif-38,
   .tarif-40,
   .tarif-43,
   .tarif-47 {
      padding-left: 14px;
      padding-right: 14px
   }

   .tarif-43 {
      grid-template-columns: minmax(0, 1fr) auto auto 14px;
      gap: 12px 8px
   }

   /* Trois colonnes de prix sur 320 px : on repasse à deux lignes lisibles. */
   .tarif-5,
   .tarif-9 {
      grid-template-columns: 1fr 1fr
   }

   .tarif-5> :nth-child(4),
   .tarif-16 {
      grid-column: 1 / -1;
      text-align: left
   }

   .tarif-16 {
      padding-top: 6px
   }
}

/* -- Le simulateur : lignes, niveaux et compteurs ---------------------- */
/* tarif-10 */
.tarif-10-hv:hover {
   background: rgba(255, 186, 19, .06) !important
}

/* tarif-44 */
.tarif-44-hv:hover {
   background: rgba(255, 186, 19, .05) !important
}

.hp-prow-name {
   font-size: 14.5px;
   line-height: 1.25;
   color: #fff;
   transition: color .2s
}

.hp-prow-count {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 14.5px;
   width: 20px;
   text-align: center;
   color: #FFBA13;
   font-weight: 600;
   transition: color .25s
}

/* Champ de saisie déguisé en simple nombre : il garde l'allure de l'ancien
   affichage, mais se remplit au clavier. Les flèches natives sont masquées —
   les boutons − et + tiennent déjà ce rôle, et en double elles brouilleraient
   la ligne. Les touches haut et bas du clavier continuent de fonctionner. */
.hp-prow-day {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 14.5px;
   width: 38px;
   padding: 2px 0;
   text-align: center;
   color: #fff;
   font-weight: 600;
   background: transparent;
   border: 1px solid transparent;
   border-radius: 0;
   appearance: textfield;
   -moz-appearance: textfield;
   transition: color .25s, border-color .25s, background .25s
}

.hp-prow-day::-webkit-outer-spin-button,
.hp-prow-day::-webkit-inner-spin-button {
   appearance: none;
   -webkit-appearance: none;
   margin: 0
}

.hp-prow-day:hover {
   border-color: rgba(141, 169, 196, .35)
}

.hp-prow-day:focus {
   outline: none;
   border-color: #FFBA13;
   background: rgba(255, 186, 19, .08)
}

.hp-prow-total {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 13.5px;
   text-align: right;
   font-weight: 600;
   color: #fff;
   transition: color .25s
}

.hp-prow.is-off .hp-prow-name {
   color: #8DA9C4
}

.hp-prow.is-off .hp-prow-count,
.hp-prow.is-off .hp-prow-day {
   color: rgba(141, 169, 196, .5)
}

.hp-prow.is-off .hp-prow-total {
   color: rgba(141, 169, 196, .4)
}

.hp-lvl {
   width: 23px;
   height: 23px;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   font-weight: 600;
   user-select: none;
   cursor: pointer;
   border: 1px solid rgba(141, 169, 196, .28);
   background: transparent;
   color: #8DA9C4;
   transition: background .22s, color .22s, border-color .22s
}

.hp-prow.is-off .hp-lvl:not(.is-on) {
   color: rgba(141, 169, 196, .45)
}

.hp-lvl.is-on {
   border-color: #FFBA13;
   background: #FFBA13;
   color: #000A1C
}

.hp-pm {
   width: 24px;
   height: 24px;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(141, 169, 196, .55);
   color: #fff;
   font-size: 14px;
   line-height: 1;
   user-select: none;
   cursor: pointer;
   transition: border-color .2s, color .2s, background .2s
}

.hp-prow.is-off .hp-pm[data-bump="-1"],
.hp-prow.is-off .hp-pm[data-days="-5"] {
   border-color: rgba(141, 169, 196, .22);
   color: rgba(141, 169, 196, .45);
   cursor: default
}

/* Repli des lignes du simulateur : sur grand écran la ligne tient sur ses cinq
   colonnes, résumé et chevron n'ont rien à dire. Le mot du niveau non plus, la
   colonne est trop étroite — c'est la lettre qui sert. */
.hp-prow-sum,
.hp-prow-caret,
.hp-prow-lab,
.hp-lvl-l {
   display: none
}

@media (max-width:900px) {
   .hp-prow-sum,
   .hp-prow-caret,
   .hp-prow-lab {
      display: block
   }

   /* Placement explicite : l'ordre du balisage ne suffirait pas à répartir les
     sept cellules sur trois lignes de longueurs différentes. */
   .hp-prow-name {
      grid-area: 1 / 1 / 2 / 2;
      font-size: 16px
   }

   .hp-prow-sum {
      grid-area: 1 / 2 / 2 / 3;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .08em;
      color: #8DA9C4;
      white-space: nowrap
   }

   .hp-prow-total {
      grid-area: 1 / 3 / 2 / 4;
      text-align: right
   }

   .hp-prow-caret {
      grid-area: 1 / 4 / 2 / 5;
      font-size: 13px;
      line-height: 1;
      color: #8DA9C4;
      text-align: right;
      transition: transform .3s cubic-bezier(.2, .7, .2, 1)
   }

   .hp-prow.is-open .hp-prow-caret {
      transform: rotate(180deg);
      color: #FFBA13
   }

   .hp-prow-lab {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .12em;
      color: #5C7897
   }

   /* Fermée, la ligne ne montre que son en-tête. */
   .hp-prow:not(.is-open) .tarif-45,
   .hp-prow:not(.is-open) .tarif-46 {
      display: none
   }

   /* Dépliées, les pastilles ont la place d'écrire le niveau en toutes lettres. */
   .hp-lvl {
      width: auto;
      height: 40px;
      font-size: 10.5px;
      letter-spacing: .1em
   }

   .hp-lvl-s {
      display: none
   }

   .hp-lvl-l {
      display: inline
   }

   .hp-pm {
      width: 34px;
      height: 34px
   }
}

/* Les trois pastilles de niveau, côte à côte. */
.tarif-45 {
   display: flex;
   gap: 2px;
   justify-content: center
}

/* -- Le reste du bloc, resté dans home.css ------------------------------ */
/* tarif */
.tarif-1 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 88px 64px
}

/* tarif */
.tarif-11 {
   padding: 22px 0
}

/* tarif — onglets, niveaux, compteurs */
.hp-mode {
   padding: 13px 20px;
   font-size: 14.5px;
   cursor: pointer;
   font-weight: 400;
   background: transparent;
   color: #8DA9C4;
   border: 1px solid rgba(141, 169, 196, .35);
   transition: background .25s, color .25s, border-color .25s
}

/* Au-dessus de la barre du haut, qui est à 40 depuis que l'en-tête est
   partagé avec le reste du site : le panneau s'ouvre contre une vignette
   d'équipe, et une vignette peut se trouver juste sous la barre. */
[data-leads].is-on {
   z-index: 45
}

@media (max-width:1180px) {
   /* Le tableau comparatif garde ses cinq colonnes et défile dans son cadre. */
   .tarif-37 {
         overflow-x: auto
      }
}

@media (max-width:900px) {
   /* Le simulateur ne défile plus latéralement : chaque profil se replie. Fermé,
        il tient sur une ligne — intitulé, résumé, sous-total, chevron. Ouvert, il
        déplie ses réglages en dessous. Les cinq cellules d'origine sont toutes là,
        réparties sur trois lignes de grille. */
   .tarif-37 {
         overflow-x: visible
      }

   /* L'en-tête de colonnes n'a plus de colonnes à nommer : « NB » et « JOURS »
        reviennent en étiquette dans la ligne dépliée, le reste se lit tout seul. */
   .tarif-40 {
         display: none
      }

   /* Les deux groupes se calent sur les bords : leur largeur ne dépend plus de
        l'endroit où tombe la frontière des colonnes de l'en-tête. */
   .tarif-46:nth-of-type(1) {
         grid-area: 3 / 1 / 4 / 3;
         justify-self: start
      }

   /* La durée commune : l'intitulé prend sa ligne, les quatre choix la suivante. */
   .tarif-48 {
         flex: 0 0 100%
      }

   /* Le total reste à droite de son libellé, comme sur grand écran. Il ne se
        coupe pas : c'est la colonne de gauche qui cède la place. */
   .tarif-49 {
         align-items: flex-end;
         gap: 14px;
         padding: 20px
      }

   /* La carte ouverte crée le contexte d'empilement du panneau : c'est elle,
        pas lui, qui doit dépasser la barre fixe du bas (z-index 50). */
   [data-leads].is-on {
         z-index: 100
      }
}