/* realisation.css — l'étude de cas d'une réalisation,
   /fr/realisations/<slug>. La chrome (en-tête, plan du site, pied de page)
   est dans catalogue.css, chargée avant celle-ci.

   Les classes numérotées viennent des styles inline de la version 2,
   converties par outils/v2/convertis.mjs : le suffixe -hv porte le survol.

   `--ag-accent` est la couleur du projet (celle de son premier secteur) et
   `--ag-accent-halo` la même en transparence, pour le halo du héros. Les
   deux sont posées sur .ag-page par le gabarit. */.cas-2 {
   background: #000A1C;
   color: #fff
}

.cas-3 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 64px
}

.cas-4 {
   padding: 34px 0 0;
   display: flex;
   align-items: baseline;
   gap: 10px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .14em;
   animation: agFade .7s both
}

.cas-5 {
   color: #FFBA13
}

.cas-6 {
   color: #8DA9C4
}

.cas-7 {
   color: #fff
}

.cas-8 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
   gap: 72px;
   padding: 40px 0 56px;
   align-items: center
}

.cas-9 {
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both
}

.cas-10 {
   display: flex;
   align-items: center;
   gap: 12px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: var(--ag-accent);
   margin-bottom: 22px
}

.cas-11 {
   width: 8px;
   height: 8px;
   background: var(--ag-accent)
}

.cas-12 {
   margin: 0 0 22px;
   font-size: 52px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.045em;
   text-wrap: balance
}

.cas-13 {
   color: var(--ag-accent)
}

.cas-14 {
   margin: 0;
   font-size: 19px;
   line-height: 1.55;
   color: #B9CCDD;
   max-width: 54ch;
   text-wrap: pretty
}

.cas-15 {
   position: relative;
   height: 520px;
   min-width: 0;
   animation: agRise .9s .12s cubic-bezier(.2, .7, .2, 1) both
}

.cas-16 {
   box-sizing: border-box;
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(141, 169, 196, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(141, 169, 196, .08) 1px, transparent 1px);
   background-size: 40px 40px;
   pointer-events: none
}

.cas-17 {
   box-sizing: border-box;
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 60% 45%, var(--ag-accent-halo), transparent 62%);
   pointer-events: none
}

.cas-18 {
   box-sizing: border-box;
   position: absolute;
   left: 8%;
   top: 30px;
   width: 210px;
   height: 430px;
   background: #000A1C;
   border: 8px solid #1C2A44;
   border-radius: 32px;
   overflow: hidden;
   transform: rotate(-5deg);
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.cas-19 {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   display: block
}

.cas-20 {
   position: absolute;
   top: 7px;
   left: 50%;
   transform: translateX(-50%);
   width: 66px;
   height: 18px;
   border-radius: 10px;
   background: #000A1C;
   z-index: 1
}

.cas-21 {
   box-sizing: border-box;
   position: absolute;
   right: 8%;
   top: 62px;
   width: 210px;
   height: 430px;
   background: #000A1C;
   border: 8px solid #1C2A44;
   border-radius: 32px;
   overflow: hidden;
   transform: rotate(5deg);
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.cas-22 {
   position: absolute;
   top: 10px;
   left: 50%;
   transform: translateX(-50%);
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #000A1C;
   z-index: 1
}

.cas-23 {
   box-sizing: border-box;
   position: absolute;
   left: 4%;
   bottom: 14px;
   z-index: 3;
   display: flex;
   align-items: center;
   gap: 8px;
   background: #fff;
   color: #000A1C;
   padding: 9px 12px;
   font-size: 12.5px;
   font-weight: 600
}

.cas-24 {
   width: 14px;
   height: 14px;
   display: block
}

.cas-25 {
   box-sizing: border-box;
   position: absolute;
   right: 4%;
   bottom: 14px;
   z-index: 3;
   display: flex;
   align-items: center;
   gap: 8px;
   background: #fff;
   color: #000A1C;
   padding: 9px 12px;
   font-size: 12.5px;
   font-weight: 600
}

.cas-26 {
   box-sizing: border-box;
   position: absolute;
   left: 50%;
   top: 0;
   transform: translateX(-50%);
   z-index: 3;
   background: var(--ag-accent);
   color: #000A1C;
   padding: 14px 18px;
   display: flex;
   flex-direction: column;
   gap: 3px;
   max-width: 230px;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.cas-27 {
   font-size: 34px;
   font-weight: 600;
   letter-spacing: -.04em;
   line-height: 1
}

.cas-28 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .1em;
   font-weight: 600;
   line-height: 1.5
}

.cas-29 {
   box-sizing: border-box;
   position: absolute;
   left: 0;
   right: 0;
   top: 96px;
   bottom: 50px;
   background: #fff;
   display: flex;
   flex-direction: column;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.cas-30 {
   height: 34px;
   flex: none;
   background: #F1F6FA;
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 0 12px;
   border-bottom: 1px solid #D3E2ED
}

.cas-31 {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #FF5C7A
}

.cas-32 {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #FFBA13
}

.cas-33 {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #3DDC97
}

.cas-34 {
   flex: 1;
   margin-left: 8px;
   background: #fff;
   border: 1px solid #D3E2ED;
   padding: 4px 10px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   color: #5C7897;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.cas-35 {
   position: relative;
   flex: 1;
   background: #E3ECF5
}

.cas-36 {
   box-sizing: border-box;
   position: absolute;
   right: 0;
   top: 0;
   z-index: 3;
   background: var(--ag-accent);
   color: #000A1C;
   padding: 14px 18px;
   display: flex;
   flex-direction: column;
   gap: 3px;
   max-width: 230px;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.cas-37 {
   box-sizing: border-box;
   position: absolute;
   left: 0;
   bottom: 6px;
   z-index: 3;
   display: flex;
   gap: 6px;
   flex-wrap: nowrap
}

.cas-38 {
   display: flex;
   align-items: center;
   gap: 7px;
   background: #fff;
   color: #000A1C;
   padding: 7px 10px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   font-weight: 600;
   letter-spacing: .06em;
   box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7)
}

.cas-39 {
   width: 13px;
   height: 13px;
   display: block;
   object-fit: contain
}

.cas-40 {
   box-sizing: border-box;
   position: absolute;
   left: 0;
   right: 90px;
   top: 0;
   bottom: 104px;
   background: #fff;
   display: flex;
   flex-direction: column;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.cas-41 {
   box-sizing: border-box;
   position: absolute;
   right: 0;
   bottom: 0;
   width: 170px;
   height: 340px;
   background: #000A1C;
   border: 8px solid #1C2A44;
   border-radius: 32px;
   overflow: hidden;
   transform: rotate(0deg);
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.cas-42 {
   box-sizing: border-box;
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 3;
   background: var(--ag-accent);
   color: #000A1C;
   padding: 14px 18px;
   display: flex;
   flex-direction: column;
   gap: 3px;
   max-width: 230px;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.cas-43 {
   box-sizing: border-box;
   position: absolute;
   left: 0;
   right: 110px;
   top: 30px;
   bottom: 110px;
   background: #fff;
   display: flex;
   flex-direction: column;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.cas-44 {
   box-sizing: border-box;
   position: absolute;
   right: 0;
   top: 0;
   width: 200px;
   background: #fff;
   color: #000A1C;
   padding: 14px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   z-index: 2;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

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

.cas-46 {
   position: relative;
   height: 110px;
   background: #F1F6FA
}

.cas-47 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 4px
}

.cas-48 {
   height: 28px;
   background: #000A1C
}

.cas-49 {
   height: 28px;
   background: var(--ag-accent)
}

.cas-50 {
   height: 28px;
   background: #FFBA13
}

.cas-51 {
   height: 28px;
   background: #F1F6FA;
   border: 1px solid #D3E2ED
}

.cas-52 {
   font-size: 30px;
   font-weight: 600;
   letter-spacing: -.04em;
   line-height: 1
}

.cas-53 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   color: #5C7897;
   font-weight: 500
}

.cas-54 {
   box-sizing: border-box;
   position: absolute;
   left: 4%;
   top: 20px;
   width: 220px;
   height: 450px;
   background: #000A1C;
   border: 8px solid #1C2A44;
   border-radius: 32px;
   overflow: hidden;
   transform: rotate(-3deg);
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.cas-55 {
   box-sizing: border-box;
   position: absolute;
   right: 0;
   top: 40px;
   width: calc(92% - 250px);
   background: #000A1C;
   border: 1px solid rgba(141, 169, 196, .3);
   padding: 12px;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.cas-56 {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px
}

.cas-57 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   color: var(--ag-accent)
}

.cas-58 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   color: #8DA9C4
}

.cas-59 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 4px
}

.cas-60 {
   position: relative;
   aspect-ratio: 1;
   background: #13213D;
   overflow: hidden
}

.cas-61 {
   box-sizing: border-box;
   position: absolute;
   right: 0;
   bottom: 10px;
   z-index: 3;
   background: var(--ag-accent);
   color: #000A1C;
   padding: 14px 18px;
   display: flex;
   flex-direction: column;
   gap: 3px;
   max-width: 230px;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.cas-62 {
   margin: 0;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   border-top: 1px solid rgba(141, 169, 196, .3)
}

.cas-63 {
   padding: 20px 24px 24px 0;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.cas-64 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   color: #8DA9C4
}

.cas-65 {
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 6px 14px
}

.cas-66 {
   color: #fff;
   font-size: 16px;
   font-weight: 600;
   border-bottom: 1px solid rgba(255, 186, 19, .6)
}

.cas-67-hv:hover {
   color: #FFBA13 !important
}

.cas-68 {
   margin: 0;
   color: #fff;
   font-size: 16px;
   font-weight: 600
}

.cas-69 {
   padding: 20px 0 24px;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.cas-70 {
   border-bottom: 1px solid #D3E2ED
}

.cas-71 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 88px 64px 80px;
   display: flex;
   flex-direction: column
}

.cas-72 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
   gap: 64px;
   padding: 36px 0;
   border-top: 1px solid #000A1C
}

.cas-73 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: #946200;
   margin-bottom: 12px
}

.cas-74 {
   margin: 0;
   font-size: 30px;
   line-height: 1.1;
   font-weight: 600;
   letter-spacing: -.025em
}

.cas-75 {
   margin: 0;
   font-size: 19px;
   line-height: 1.6;
   color: #001751;
   max-width: 62ch;
   text-wrap: pretty
}

.cas-76 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
   gap: 64px;
   padding: 36px 0;
   border-top: 1px solid #D3E2ED
}

.cas-77 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
   gap: 64px;
   padding: 36px 0 0;
   border-top: 1px solid #D3E2ED
}

.cas-78 {
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-direction: column
}

.cas-79 {
   display: grid;
   grid-template-columns: 44px minmax(0, 1fr);
   gap: 16px;
   align-items: baseline;
   padding: 18px 0;
   border-bottom: 1px solid #D3E2ED
}

.cas-80 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   color: #946200
}

.cas-81 {
   font-size: 21px;
   font-weight: 600;
   letter-spacing: -.015em;
   line-height: 1.35
}

.cas-82 {
   background: #F1F6FA;
   border-bottom: 1px solid #D3E2ED
}

.cas-83 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 72px 64px 80px
}

.cas-84 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: #946200;
   margin-bottom: 24px
}

.cas-85 {
   display: grid;
   grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
   grid-template-rows: 240px 240px;
   gap: 16px
}

.cas-86 {
   position: relative;
   grid-row: span 2;
   background: #0A1730;
   border: 1px solid #D3E2ED;
   overflow: hidden
}

.cas-87 {
   position: relative;
   background: #0A1730;
   border: 1px solid #D3E2ED;
   overflow: hidden
}

.cas-88 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 72px 64px 80px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
   gap: 64px;
   align-items: start
}

.cas-89 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   column-gap: 28px;
   border-top: 1px solid #000A1C
}

.cas-90 {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px 4px;
   border-bottom: 1px solid #D3E2ED;
   transition: padding .25s
}

.cas-91-hv:hover {
   padding-left: 12px !important
}

.cas-92 {
   width: 18px;
   height: 18px;
   display: block;
   flex: none;
   object-fit: contain
}

.cas-93 {
   width: 18px;
   height: 18px;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center
}

.cas-94 {
   width: 6px;
   height: 6px;
   background: #FFBA13
}

.cas-95 {
   font-size: 16px;
   font-weight: 500;
   flex: 1
}

.cas-96 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   color: #5C7897
}

.cas-97 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 80px 64px 88px
}

.cas-98 {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 40px;
   margin-bottom: 36px
}

.cas-99 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: #946200;
   margin-bottom: 14px
}

.cas-100 {
   margin: 0;
   font-size: 40px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.035em
}

.cas-101 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .12em;
   color: #946200;
   font-weight: 600;
   display: flex;
   gap: 9px;
   transition: gap .25s;
   flex: none
}

.cas-102-hv:hover {
   gap: 15px !important
}

.cas-103 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px
}

.cas-104 {
   background: #fff;
   border: 1px solid #D3E2ED;
   display: flex;
   flex-direction: column;
   color: #000A1C;
   transition: box-shadow .4s, transform .4s cubic-bezier(.2, .7, .2, 1)
}

.cas-105-hv:hover {
   box-shadow: 0 40px 70px -40px rgba(0, 10, 28, .45) !important;
   transform: translateY(-4px) !important;
   color: #000A1C !important
}

.cas-106 {
   position: relative;
   aspect-ratio: 16/10;
   background: #0A1730;
   overflow: hidden
}

.cas-107 {
   padding: 22px 24px 24px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex: 1
}

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

.cas-109 {
   margin: 0;
   font-size: 26px;
   line-height: 1;
   font-weight: 600;
   letter-spacing: -.03em
}

.cas-110 {
   margin: 0;
   font-size: 14.5px;
   line-height: 1.55;
   color: #001751;
   text-wrap: pretty
}

.cas-111 {
   margin-top: auto;
   padding-top: 8px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .12em;
   color: #946200;
   font-weight: 600
}

.cas-112 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-top: 48px;
   border-top: 1px solid #000A1C
}

.cas-113 {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 22px 0;
   transition: padding .25s
}

.cas-114-hv:hover {
   padding-left: 10px !important
}

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

.cas-116 {
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -.02em
}

.cas-117 {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 22px 0;
   text-align: right;
   align-items: flex-end;
   border-left: 1px solid #D3E2ED;
   transition: padding .25s
}

.cas-118-hv:hover {
   padding-right: 10px !important
}

.cas-119 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 78px 64px;
   display: grid;
   grid-template-columns: 1.15fr auto;
   gap: 64px;
   align-items: center
}

.cas-120 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: #FFBA13;
   margin-bottom: 20px
}

.cas-121 {
   margin: 0 0 16px;
   font-size: 44px;
   line-height: 1.04;
   font-weight: 600;
   letter-spacing: -.03em;
   max-width: 24ch;
   text-wrap: balance
}

.cas-122 {
   margin: 0;
   font-size: 16px;
   line-height: 1.6;
   color: #8DA9C4;
   max-width: 56ch;
   text-wrap: pretty
}

.cas-123 {
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-width: 280px
}

.cas-124 {
   background: #FFBA13;
   color: #000A1C;
   padding: 16px 26px;
   font-size: 15px;
   font-weight: 600;
   text-align: center;
   transition: background .25s, transform .25s
}

.cas-125-hv:hover {
   background: #fff !important;
   color: #000A1C !important;
   transform: translateY(-2px) !important
}

.cas-126 {
   border: 1px solid rgba(141, 169, 196, .45);
   color: #fff;
   padding: 15px 26px;
   font-size: 15px;
   font-weight: 600;
   text-align: center;
   transition: background .25s
}

.cas-127-hv:hover {
   background: rgba(255, 255, 255, .08) !important;
   color: #fff !important
}

/* ===========================================================================
   Petits écrans. Tous les paliers sont écrits pour la 4.0 : la version 2 ne
   descendait pas sous 1280 px.

   La maquette du héros (`.cas-15`) est décorative et enfermée : c'est le
   cadre qui rétrécit, pas chacune des cinq variantes.
   =========================================================================== */

/* -- jusqu'à 1180 px ----------------------------------------------------- */
@media (max-width:1180px) {

   .cas-3,
   .cas-71,
   .cas-83,
   .cas-88,
   .cas-97,
   .cas-119 {
      padding-left: 40px;
      padding-right: 40px
   }

   .cas-12 {
      font-size: 48px
   }

   .cas-8 {
      gap: 40px
   }

   .cas-62 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }
}


/* -- jusqu'à 1100 px : le héros et les trois temps passent en colonne ---- */
@media (max-width:1100px) {

   .cas-8 {
      grid-template-columns: minmax(0, 1fr);
      gap: 48px
   }

   /* L'illustration du héros est décorative : elle rétrécit, elle ne
     disparaît pas.

     `width` et pas seulement `max-width` : sur un élément de grille, des
     marges automatiques coupent l'étirement, et la largeur se calcule alors
     sur le CONTENU en flux. Or tout le contenu est en `position:absolute` —
     le flux est vide, la boîte tombait donc à zéro et l'illustration
     disparaissait sans un mot. Une largeur explicite la garde. */
   .cas-15 {
      width: min(620px, 100%);
      margin: 0 auto
   }

   /* Les trois temps du récit — problème, solution, résultats — étaient un
     intitulé à gauche et le texte à droite. Ils s'empilent. */
   .cas-72,
   .cas-76,
   .cas-77,
   .cas-88 {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px
   }

   .cas-85 {
      grid-template-columns: minmax(0, 1fr)
   }

   .cas-89,
   .cas-103 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .cas-119 {
      grid-template-columns: minmax(0, 1fr);
      gap: 40px
   }

   .cas-123 {
      min-width: 0
   }
}


/* -- jusqu'à 900 px : colonne unique, gouttières 20 px ------------------- */
@media (max-width:900px) {

   .cas-3,
   .cas-71,
   .cas-83,
   .cas-88,
   .cas-97,
   .cas-119 {
      padding-left: 20px;
      padding-right: 20px
   }

   .cas-71,
   .cas-83,
   .cas-88,
   .cas-97 {
      padding-top: 56px;
      padding-bottom: 60px
   }

   .cas-12 {
      font-size: 36px
   }

   .cas-14 {
      font-size: 18px
   }

   .cas-62 {
      grid-template-columns: minmax(0, 1fr)
   }

   .cas-63,
   .cas-69 {
      padding: 16px 0;
      border-left: none;
      border-top: 1px solid #D3E2ED
   }

   .cas-89,
   .cas-103,
   .cas-112 {
      grid-template-columns: minmax(0, 1fr)
   }

   .cas-74,
   .cas-100,
   .cas-121 {
      font-size: 28px
   }

   .cas-98 {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px
   }
}


/* -- jusqu'à 560 px : typographie du téléphone -------------------------- */
@media (max-width:560px) {

   .cas-12 {
      font-size: 30px
   }

   .cas-27 {
      font-size: 30px
   }

   .cas-74,
   .cas-100,
   .cas-121 {
      font-size: 24px
   }

   .cas-109 {
      font-size: 22px
   }
}