/* realisations.css — la liste des réalisations, /fr/realisations.
   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.
   Celles qui sont nommées (`rea-chip`, `rea-dim`, `rea-row`, `rea-grid`…)
   remplacent des styles que la v2 recalculait à chaque filtrage ; elles sont
   écrites à la main, en fin de fichier, avec leurs états. */.rea-2 {
   position: relative;
   background: #000A1C;
   color: #fff;
   overflow: hidden
}

/* La trame et le halo ambré, tous deux décoratifs, posés sous le mur. */
.rea-132 {
   position: absolute;
   inset: 0;
   pointer-events: none;
   background-image: linear-gradient(rgba(141, 169, 196, .07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(141, 169, 196, .07) 1px, transparent 1px);
   background-size: 48px 48px
}

.rea-133 {
   position: absolute;
   right: -6%;
   top: -10%;
   width: 900px;
   height: 900px;
   border-radius: 50%;
   pointer-events: none;
   background: radial-gradient(circle, rgba(255, 186, 19, .16), rgba(255, 186, 19, 0) 62%)
}

/* -- Le mur de captures ----------------------------------------------------
   Trois colonnes en perspective, qui débordent volontairement à droite et en
   bas : le cadre est donné par les dégradés qui suivent, pas par une bordure.
   Le conteneur part à 44 % pour laisser le titre lisible à gauche. */
.rea-134 {
   position: absolute;
   left: 44%;
   right: -180px;
   top: -120px;
   bottom: -260px;
   perspective: 2200px;
   animation: agFade 1.2s .2s both
}

.rea-135 {
   position: absolute;
   inset: 0;
   display: flex;
   gap: 22px;
   transform: rotateX(26deg) rotateY(-16deg) rotateZ(9deg);
   transform-origin: 40% 40%
}

.rea-136 {
   flex: 1;
   min-width: 0;
   overflow: hidden
}

.rea-137 {
   display: flex;
   flex-direction: column;
   gap: 22px
}

/* Les colonnes extérieures montent, celle du milieu descend : sans ce
   contretemps, le mur entier glisserait d'un bloc. Les trois durées sont
   premières entre elles — les colonnes ne se resynchronisent jamais. */
.rea-mur-1 {
   animation: agMur 70s linear infinite
}

.rea-mur-2 {
   animation: agMurBas 82s linear infinite
}

.rea-mur-3 {
   animation: agMur 64s linear infinite
}

.rea-138 {
   display: block;
   aspect-ratio: 1240/768;
   overflow: hidden;
   background: #0A1730;
   box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(141, 169, 196, .16);
   transition: transform .4s cubic-bezier(.2, .7, .2, 1)
}

.rea-139-hv:hover {
   transform: translateY(-6px) scale(1.02) !important
}

.rea-140 {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

/* Les deux dégradés qui fondent le mur dans le fond : l'un vers la gauche,
   derrière le titre, l'autre vers le bas, sous les chiffres. Sans eux, les
   captures coupées net donneraient un bord sale. */
.rea-141 {
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: linear-gradient(90deg, #000A1C 0%, #000A1C 36%, rgba(0, 10, 28, .82) 46%, rgba(0, 10, 28, 0) 64%)
}

/* Assez haut pour que les quatre chiffres reposent sur du presque uni : sur
   les captures elles-mêmes, une légende de deux lignes devenait illisible. */
.rea-142 {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 340px;
   pointer-events: none;
   background: linear-gradient(rgba(0, 10, 28, 0), rgba(0, 10, 28, .86) 42%, #000A1C 78%)
}

/* -- Le contenu du héros ---------------------------------------------------
   Il passe AU-DESSUS du mur, mais ne lui prend pas la souris : seuls le fil
   d'Ariane, le texte et les chiffres reprennent les clics, pour que les
   vignettes restent cliquables partout ailleurs. */
.rea-3 {
   position: relative;
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 64px;
   pointer-events: none
}

.rea-4 {
   padding: 34px 0 0;
   display: flex;
   align-items: baseline;
   gap: 10px;
   pointer-events: auto;
   animation: agFade .7s both
}

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

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

.rea-7 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .14em;
   color: #fff
}

.rea-8 {
   width: 8px;
   height: 8px;
   background: #25D366;
   flex: none;
   animation: agPulse 1.8s ease-in-out infinite
}

.rea-9 {
   max-width: 590px;
   padding: 72px 0 0;
   pointer-events: auto
}

.rea-10 {
   display: flex;
   align-items: center;
   gap: 12px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: #FFBA13;
   margin-bottom: 26px;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both
}

.rea-11 {
   margin: 0 0 26px;
   font-size: 84px;
   line-height: .95;
   font-weight: 600;
   letter-spacing: -.052em;
   text-wrap: balance;
   animation: agRise .9s .05s cubic-bezier(.2, .7, .2, 1) both
}

.rea-12 {
   position: relative;
   display: inline-block;
   white-space: nowrap;
   color: #FFBA13
}

.rea-13 {
   position: absolute;
   left: 0;
   right: 0;
   bottom: -.04em;
   height: .06em;
   border-radius: .03em;
   background: #FFBA13;
   transform-origin: 0 50%;
   animation: agSweep .8s .6s cubic-bezier(.7, 0, .2, 1) both
}

.rea-14 {
   color: #8DA9C4;
   font-weight: 400
}

.rea-16 {
   margin: 0 0 38px;
   font-size: 19px;
   line-height: 1.55;
   color: #B9CCDD;
   max-width: 46ch;
   text-wrap: pretty;
   animation: agRise .9s .12s cubic-bezier(.2, .7, .2, 1) both
}

.rea-17 {
   display: flex;
   gap: 12px;
   align-items: center;
   animation: agRise .9s .18s cubic-bezier(.2, .7, .2, 1) both
}

.rea-18 {
   background: #FFBA13;
   color: #000A1C;
   padding: 16px 24px;
   font-size: 15px;
   font-weight: 600;
   display: flex;
   gap: 12px;
   align-items: center;
   transition: background .25s, color .25s, transform .25s
}

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

.rea-20 {
   animation: agBob 1.8s ease-in-out infinite;
   display: inline-block
}

.rea-21 {
   border: 1px solid rgba(141, 169, 196, .5);
   color: #fff;
   padding: 15px 24px;
   font-size: 15px;
   font-weight: 600;
   transition: background .25s
}

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

/* -- Les quatre chiffres, au pied du héros -------------------------------- */
.rea-23 {
   margin: 96px 0 0;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   border-top: 1px solid rgba(141, 169, 196, .3);
   pointer-events: auto
}

/* Les quatre cases portent la MÊME classe : les filets qui les séparent sont
   posés en CSS, pas par une classe différente sur la première. C'est ce qui
   permet de les réorganiser sur deux puis une colonne sans retoucher le
   gabarit — un filet de gauche n'a plus de sens en début de rangée. */
.rea-24 {
   padding: 22px 24px 30px;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.rea-24:first-child {
   padding-left: 0
}

.rea-24:last-child {
   padding-right: 0
}

.rea-24+.rea-24 {
   border-left: 1px solid rgba(141, 169, 196, .3)
}

.rea-25 {
   font-size: 52px;
   font-weight: 600;
   letter-spacing: -.05em;
   line-height: .9
}

.rea-24:first-child .rea-25 {
   color: #FFBA13
}

.rea-26 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   color: #8DA9C4;
   line-height: 1.6
}

.rea-55 {
   position: sticky;
   top: var(--head-h);
   z-index: 30;
   background: rgba(255, 255, 255, .96);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid #D3E2ED
}

.rea-56 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 16px 64px;
   display: flex;
   align-items: center;
   gap: 20px
}

.rea-57 {
   display: flex;
   flex: none;
   border: 1px solid #D3E2ED
}

.rea-58 {
   display: flex;
   gap: 8px;
   overflow-x: auto;
   flex: 1;
   min-width: 0;
   scrollbar-width: none;
   padding: 2px 0
}

.rea-59 {
   flex: none;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .1em;
   color: #5C7897
}

.rea-60 {
   position: relative;
   aspect-ratio: 16/10;
   background: #0A1730;
   overflow: hidden;
   box-shadow: 0 30px 60px -36px rgba(0, 10, 28, .55);
   transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s
}

.rea-61-hv:hover {
   transform: translateY(-6px) !important;
   box-shadow: 0 44px 80px -40px rgba(0, 10, 28, .6) !important
}

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

.rea-63 {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   margin-top: 14px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #5C7897
}

.rea-64 {
   display: flex;
   align-items: baseline;
   gap: 10px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   letter-spacing: .1em;
   color: #946200;
   margin-bottom: 18px
}

.rea-65 {
   font-weight: 600
}

.rea-66 {
   color: #5C7897
}

.rea-67 {
   margin: 0 0 16px;
   font-size: 60px;
   line-height: .98;
   font-weight: 600;
   letter-spacing: -.042em
}

.rea-68 {
   margin: 0;
   font-size: 19px;
   line-height: 1.5;
   color: #001751;
   text-wrap: pretty;
   max-width: 34ch
}

.rea-69 {
   margin-top: 28px;
   padding-top: 22px;
   border-top: 1px solid #D3E2ED;
   display: flex;
   align-items: baseline;
   gap: 18px;
   flex-wrap: wrap
}

.rea-70 {
   font-size: 46px;
   font-weight: 600;
   letter-spacing: -.04em;
   line-height: 1;
   color: #000A1C;
   white-space: nowrap
}

.rea-71 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #5C7897;
   line-height: 1.6;
   max-width: 26ch
}

.rea-72 {
   margin-top: 26px;
   display: flex;
   flex-wrap: wrap;
   gap: 7px
}

.rea-73 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   font-weight: 600;
   padding: 7px 10px;
   background: #000A1C;
   color: #fff;
   transition: background .2s
}

.rea-74-hv:hover {
   background: #946200 !important;
   color: #fff !important
}

.rea-75 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   padding: 6px 10px;
   border: 1px solid #000A1C;
   color: #000A1C
}

.rea-76 {
   margin-top: 10px;
   display: flex;
   flex-wrap: wrap;
   gap: 6px
}

.rea-77 {
   display: flex;
   align-items: center;
   gap: 7px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .06em;
   padding: 6px 10px;
   background: #F1F6FA;
   color: #001751
}

.rea-78 {
   width: 12px;
   height: 12px;
   display: block;
   object-fit: contain
}

.rea-79 {
   margin-top: 30px;
   display: flex;
   align-items: center;
   gap: 24px
}

.rea-80 {
   background: #000A1C;
   color: #fff;
   border: none;
   padding: 14px 20px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .12em;
   font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 12px;
   transition: background .25s
}

.rea-81-hv:hover {
   background: #946200 !important
}

.rea-82 {
   font-size: 14px
}

.rea-83 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .12em;
   color: #000A1C;
   font-weight: 600;
   display: flex;
   gap: 9px;
   padding: 13px 18px;
   border: 1px solid #000A1C;
   transition: gap .25s, background .25s
}

.rea-84-hv:hover {
   gap: 15px !important;
   background: #F1F6FA !important;
   color: #000A1C !important
}

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

.rea-86-hv:hover {
   gap: 15px !important
}

.rea-87 {
   order: 3;
   grid-column: 1/-1;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   border-top: 1px solid #000A1C;
   animation: agOpen .4s cubic-bezier(.2, .7, .2, 1) both
}

.rea-88 {
   padding: 28px 32px 6px 0
}

.rea-89 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .14em;
   color: #946200;
   margin-bottom: 12px
}

.rea-90 {
   font-size: 15.5px;
   line-height: 1.6;
   color: #001751;
   text-wrap: pretty
}

.rea-91 {
   padding: 28px 32px 6px;
   border-left: 1px solid #D3E2ED
}

.rea-92 {
   padding: 28px 0 6px 32px;
   border-left: 1px solid #D3E2ED
}

.rea-93 {
   display: flex;
   flex-direction: column;
   gap: 11px
}

.rea-94 {
   display: flex;
   align-items: baseline;
   gap: 12px;
   font-size: 15.5px;
   line-height: 1.5;
   color: #000A1C
}

.rea-95 {
   width: 6px;
   height: 6px;
   background: #FFBA13;
   flex: none;
   transform: translateY(-2px)
}

.rea-96 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #5C7897;
   line-height: 1.7
}

.rea-97 {
   background: #000A1C;
   color: #fff
}

.rea-98 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 64px 64px 70px
}

.rea-99 {
   display: flex;
   align-items: baseline;
   gap: 20px;
   margin-bottom: 40px
}

.rea-100 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: #FFBA13
}

.rea-101 {
   font-size: 30px;
   font-weight: 600;
   letter-spacing: -.03em
}

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

.rea-103 {
   padding: 30px 28px 0 0
}

.rea-104 {
   font-size: 64px;
   font-weight: 600;
   letter-spacing: -.045em;
   line-height: 1;
   color: #FFBA13
}

.rea-105 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #8DA9C4;
   margin-top: 12px;
   line-height: 1.6
}

.rea-106 {
   padding: 30px 28px 0;
   border-left: 1px solid rgba(141, 169, 196, .3)
}

.rea-107 {
   padding: 30px 0 0 28px;
   border-left: 1px solid rgba(141, 169, 196, .3)
}

.rea-108 {
   border-bottom: 1px solid #D3E2ED;
   background: #F1F6FA
}

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

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

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

.rea-112 {
   margin: 0;
   font-size: 44px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.035em;
   max-width: 20ch;
   text-wrap: balance
}

.rea-113 {
   margin: 0;
   max-width: 40ch;
   font-size: 15.5px;
   line-height: 1.6;
   color: #001751;
   text-wrap: pretty
}

.rea-114 {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 1px;
   background: #D3E2ED;
   border: 1px solid #D3E2ED
}

.rea-115 {
   background: #fff;
   padding: 24px 24px 22px;
   display: flex;
   flex-direction: column;
   gap: 30px;
   min-height: 120px;
   transition: background .25s, color .25s
}

.rea-116-hv:hover {
   background: #000A1C !important;
   color: #fff !important
}

.rea-117 {
   display: flex;
   justify-content: space-between;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #946200
}

.rea-118 {
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -.02em;
   line-height: 1.15
}

.rea-119 {
   background: #FFBA13;
   color: #000A1C;
   padding: 24px 24px 22px;
   display: flex;
   flex-direction: column;
   gap: 30px;
   min-height: 120px;
   transition: background .25s
}

.rea-120-hv:hover {
   background: #000A1C !important;
   color: #FFBA13 !important
}

.rea-121 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em
}

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

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

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

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

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

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

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

.rea-129 {
   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
}

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

/* ===========================================================================
   Écrit à la main : ce que la version 2 recalculait à chaque filtrage.
   =========================================================================== */

/* -- 1. La barre de filtres ---------------------------------------------- */

/* Les trois dimensions : secteur, service, expertise. */
.rea-dim {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   font-weight: 600;
   padding: 10px 14px;
   cursor: pointer;
   border: none;
   background: #fff;
   color: #001751;
   transition: background .2s, color .2s
}

/* Un filet entre deux dimensions, jamais avant la première. */
.rea-dim+.rea-dim {
   border-left: 1px solid #D3E2ED
}

.rea-dim:hover {
   color: #000A1C
}

.rea-dim.is-actif {
   background: #000A1C;
   color: #fff
}

/* Les puces de la dimension choisie. */
.rea-chip {
   display: flex;
   align-items: center;
   gap: 8px;
   flex: none;
   white-space: nowrap;
   cursor: pointer;
   font-family: Archivo, system-ui, sans-serif;
   font-size: 13.5px;
   font-weight: 500;
   padding: 8px 13px;
   border: 1px solid #D3E2ED;
   background: #fff;
   color: #001751;
   transition: background .2s, border-color .2s, color .2s
}

.rea-chip:hover {
   border-color: #000A1C;
   color: #000A1C
}

.rea-chip.is-actif {
   font-weight: 600;
   border-color: #000A1C;
   background: #000A1C;
   color: #fff
}

.rea-chip-n {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   color: #946200
}

.rea-chip.is-actif .rea-chip-n {
   color: #FFBA13
}

/* Le mot souligné et la ponctuation qui le suit ne se séparent pas : une
   virgule en début de ligne se remarque, surtout à 100 px. */
.rea-131 {
   white-space: nowrap
}

/* -- 2. La fiche ---------------------------------------------------------
   `rea-row` est la ligne, `rea-grid` sa grille. L'alternance gauche/droite
   est portée par `is-flip`, que le JavaScript recalcule après un filtrage :
   l'alternance suit ce qui est VISIBLE, pas l'ordre du document.
   ------------------------------------------------------------------------- */

.rea-row {
   border-bottom: 1px solid #D3E2ED;
   background: #fff;
   animation: agRise .7s cubic-bezier(.2, .7, .2, 1) both;
   transition: background .3s
}

/* L'étude de cas ouverte teinte sa ligne : on voit d'un coup d'œil où on
   en est dans une page longue. */
.rea-row.ag-etude:not(.is-off) {
   background: #FBFCFE
}

.rea-grid {
   max-width: 1440px;
   margin: 0 auto;
   padding: 76px 64px;
   display: grid;
   grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
   column-gap: 80px;
   row-gap: 48px;
   align-items: center
}

.rea-grid.is-flip {
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr)
}

.rea-col-img {
   order: 1;
   min-width: 0
}

.rea-col-txt {
   order: 2;
   min-width: 0
}

.rea-grid.is-flip .rea-col-img {
   order: 2
}

.rea-grid.is-flip .rea-col-txt {
   order: 1
}

/* L'étude de cas : écrite dépliée, repliée par le JavaScript au chargement.
   Un `display:none` plutôt qu'une hauteur animée — c'est un enfant de
   grille qui occupe toute la largeur, et une grille n'anime pas la
   disparition d'une de ses pistes. */
.ag-etude.is-off .rea-87 {
   display: none
}


/* ===========================================================================
   Petits écrans. Tous les paliers sont écrits pour la 4.0.
   =========================================================================== */

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

   .rea-3,
   .rea-56,
   .rea-98,
   .rea-109,
   .rea-122,
   .rea-grid {
      padding-left: 40px;
      padding-right: 40px
   }

   .rea-11 {
      font-size: 72px
   }

   /* Le mur se rapproche : la colonne de texte a rétréci avec la marge. */
   .rea-134 {
      left: 48%
   }

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

   .rea-24:nth-child(odd) {
      border-left: none;
      padding-left: 0
   }

   .rea-24:nth-child(even) {
      padding-right: 0
   }

   .rea-24:nth-child(n+3) {
      border-top: 1px solid rgba(141, 169, 196, .3)
   }

   .rea-102,
   .rea-114 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }
}


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

   /* Le mur passe DERRIÈRE le texte au lieu d'être à côté : la colonne de
      titre prend toute la largeur, et le dégradé de gauche s'étend pour que
      le texte reste lisible par-dessus. */
   .rea-9 {
      max-width: 620px;
      padding-top: 56px
   }

   .rea-134 {
      left: 30%;
      opacity: .5
   }

   .rea-141 {
      background: linear-gradient(90deg, #000A1C 0%, #000A1C 52%, rgba(0, 10, 28, .9) 70%, rgba(0, 10, 28, .7) 100%)
   }

   .rea-grid,
   .rea-grid.is-flip {
      grid-template-columns: minmax(0, 1fr);
      padding-top: 52px;
      padding-bottom: 52px;
      row-gap: 32px
   }

   /* Sur une colonne, l'image passe toujours avant le texte : l'alternance
     n'a plus de sens, et un texte avant son image décalerait la lecture. */
   .rea-grid .rea-col-img,
   .rea-grid.is-flip .rea-col-img {
      order: 1
   }

   .rea-grid .rea-col-txt,
   .rea-grid.is-flip .rea-col-txt {
      order: 2
   }

   .rea-87 {
      grid-template-columns: minmax(0, 1fr)
   }

   .rea-88,
   .rea-91,
   .rea-92 {
      padding: 22px 0;
      border-left: none;
      border-top: 1px solid #D3E2ED
   }

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

   .rea-126 {
      min-width: 0
   }

   .rea-110 {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px
   }
}


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

   .rea-3,
   .rea-56,
   .rea-98,
   .rea-109,
   .rea-122,
   .rea-grid,
   .rea-grid.is-flip {
      padding-left: 20px;
      padding-right: 20px
   }

   .rea-11 {
      font-size: 44px
   }

   .rea-67 {
      font-size: 38px
   }

   /* Sur un téléphone le mur ne tient plus : trois colonnes inclinées dans
      360 px ne montrent que des bandes. On le retire, le halo ambré reste. */
   .rea-134,
   .rea-141 {
      display: none
   }

   .rea-9 {
      padding-top: 40px
   }

   .rea-23 {
      grid-template-columns: minmax(0, 1fr);
      margin-top: 56px
   }

   .rea-24,
   .rea-24:nth-child(odd),
   .rea-24:nth-child(even) {
      padding: 22px 0;
      border-left: none
   }

   .rea-24+.rea-24 {
      border-top: 1px solid rgba(141, 169, 196, .3)
   }

   .rea-24:first-child {
      border-top: none
   }

   .rea-25 {
      font-size: 54px
   }

   .rea-102,
   .rea-114 {
      grid-template-columns: minmax(0, 1fr)
   }

   .rea-103,
   .rea-106,
   .rea-107 {
      padding: 22px 0;
      border-left: none;
      border-top: 1px solid rgba(141, 169, 196, .3)
   }

   /* Le fil d'Ariane se replie, et la mention « livré depuis Fianarantsoa »
     passe à la ligne au lieu d'être poussée contre le bord. */
   .rea-4 {
      flex-wrap: wrap;
      gap: 6px 16px
   }

   .rea-7 {
      margin-left: 0
   }

   /* La barre de filtres se replie sur deux lignes : les puces gardent leur
     défilement horizontal, le compteur passe sous elles. */
   .rea-56 {
      flex-wrap: wrap;
      gap: 12px
   }

   .rea-59 {
      width: 100%
   }

   .rea-79 {
      flex-wrap: wrap;
      gap: 12px
   }

   .rea-99 {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px
   }

   .rea-101,
   .rea-112,
   .rea-124 {
      font-size: 28px
   }
}


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

   .rea-11 {
      font-size: 34px
   }

   .rea-67 {
      font-size: 30px
   }

   .rea-70 {
      font-size: 34px
   }

   .rea-25 {
      font-size: 44px
   }

   .rea-101,
   .rea-112,
   .rea-124 {
      font-size: 24px
   }
}


/* Le défilement du mur du héros. Chaque colonne est écrite deux fois dans le
   gabarit : remonter de la moitié de sa hauteur la ramène exactement à son
   point de départ, et la boucle est invisible. */
@keyframes agMur {
   from {
      transform: translateY(0)
   }

   to {
      transform: translateY(-50%)
   }
}

@keyframes agMurBas {
   from {
      transform: translateY(-50%)
   }

   to {
      transform: translateY(0)
   }
}