/* LE CARROUSEL — des cases CARRÉES qui défilent, dans la colonne de la page.
   Le défilement est celui du navigateur (scroll-snap) : il marche au doigt et
   à la molette, les flèches ne font que pousser d'une case. */

.carrousel{position:relative;margin:0 0 58px}

.carrousel-piste{--cv-gap:22px;list-style:none;margin:0;padding:0 0 4px;
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--cv-gap)*2)/3);
  gap:var(--cv-gap);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.carrousel-piste::-webkit-scrollbar{display:none}

.carrousel-case{position:relative;scroll-snap-align:start}
.carrousel-case>a{display:block;position:relative;aspect-ratio:1;overflow:hidden;
  border-radius:12px;background:#0b1518;color:var(--ivory,#f8f5ed);text-decoration:none}
.carrousel-case img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.carrousel-case>a:hover img,.carrousel-case>a:focus-visible img{transform:scale(1.05)}
.carrousel-case>a:after{content:"";position:absolute;inset:45% 0 0;pointer-events:none;
  background:linear-gradient(transparent,#05141af2)}
.carrousel-case>a:focus-visible{outline:2px solid var(--orange,#ff7526);outline-offset:4px}

/* LE CARTOUCHE DE DATE — toujours le même format : le jour en gros, le mois
   dessous. À gauche sur les projets, à droite sur les articles. */
.carrousel-date{position:absolute;z-index:2;top:16px;left:16px;
  width:60px;height:60px;border-radius:12px;background:var(--ivory,#f8f5ed);
  color:var(--ink,#101719);display:grid;place-content:center;text-align:center;
  box-shadow:0 8px 22px rgba(5,20,26,.28)}
.carrousel-date b{display:block;font-size:24px;font-weight:700;line-height:1;letter-spacing:-.04em}
.carrousel-date span{display:block;margin-top:3px;font-size:11px;font-weight:700;letter-spacing:.04em}
.carrousel--droite .carrousel-date{left:auto;right:16px}

.carrousel-mot{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 22px 20px}
.carrousel-mot .eyebrow{display:block;color:#ffb184;font-size:10px;letter-spacing:.14em;
  font-weight:700;margin-bottom:8px}
.carrousel-mot strong{display:block;font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.2}

.carrousel-barre{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:24px}
.carrousel-fleche{width:46px;height:46px;border-radius:50%;border:1px solid #12546933;
  background:none;color:inherit;font-size:22px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .22s,border-color .22s,color .22s}
.carrousel-fleche:hover{background:var(--ink,#101719);border-color:var(--ink,#101719);color:var(--ivory,#f8f5ed)}
.carrousel-fleche:focus-visible{outline:2px solid var(--orange,#ff7526);outline-offset:3px}
.carrousel-compte{margin:0;display:flex;align-items:baseline;gap:6px;
  font-size:13px;font-weight:700;letter-spacing:.06em;color:#5d7278}
.carrousel-compte b{font-size:19px;color:var(--ink,#101719)}
.carrousel-compte span{opacity:.5}
.carrousel-compte i{font-style:normal}

@media(max-width:1000px){.carrousel-piste{grid-auto-columns:calc((100% - var(--cv-gap))/2)}}
@media(max-width:640px){.carrousel-piste{grid-auto-columns:82%}.carrousel-date{width:52px;height:52px}
  .carrousel-date b{font-size:21px}}
@media(prefers-reduced-motion:reduce){.carrousel-case img{transition:none}}