/* ===========================================================
   ÉTUDES DE CAS – DESIGN FLEXBOX (ZÉRO DÉBORDEMENT)
   =========================================================== */

/* ---------- Couleurs & constantes ---------- */
.cs-blue          { color:#007aff; }
.cs-gradient      { background-image:linear-gradient(135deg,#007aff 0%,#ff4f81 100%); }

/* ---------- SECTION GLOBALE ---------- */
.cs-section       { max-width:1200px; margin:0 auto; padding:2rem 1rem;
                    overflow-x:hidden;       /* empêche tout dépassement */
                    position:relative; z-index:1; }

/* ---------- CONTENEUR FLEX ---------- */
.cs-grid          { display:flex; flex-wrap:wrap; }   /* plus de marge négative */

/* Cartes : 3 / 2 / 1 colonne */
.cs-card          { flex:0 0 calc(33.333% - 2rem);    /* largeur moins l’espacement */
                    margin:1rem; box-sizing:border-box; }
@media(max-width:991px){ .cs-card{ flex:0 0 calc(50% - 2rem); } }
@media(max-width:767px){ .cs-card{ flex:0 0 100%; margin:0 0 2rem; } }

/* ---------- CARTE (wrapper) ---------- */
.cs-card-inner    { background:#fff; border-radius:20px; overflow:hidden;
                    display:flex; flex-direction:column;
                    box-shadow:0 8px 22px rgba(0,0,0,.06);
                    transition:transform .25s, box-shadow .25s; }
.cs-card:hover .cs-card-inner{
  transform:translateY(-6px);
  box-shadow:0 12px 26px rgba(0,0,0,.08);
}

/* ---------- IMAGE ---------- */
.cs-img-wrapper   { display:block; }
.cs-img           { width:100%; height:240px; object-fit:cover; display:block; }
@media(max-width:991px){ .cs-img{ height:200px; } }
@media(max-width:767px){ .cs-img{ height:180px; } }

/* ---------- CONTENU ---------- */
.cs-content       { padding:1.75rem 1.5rem 1rem; flex:1; }
.cs-title         { font-size:1.5rem; line-height:1.3; font-weight:700;
                    margin:0 0 1.25rem; }
.cs-heading       { font-size:1rem; font-weight:700; margin:0 0 .5rem;
                    color:#009eff; text-transform:uppercase; letter-spacing:.5px; }
.cs-excerpt       { margin:0; line-height:1.55; color:#444; }

/* ---------- FOOTER ---------- */
.cs-footer        { display:flex; justify-content:space-between; align-items:center;
                    padding:0 0 0 1.5rem; }
.cs-footer time   { font-size:.85rem; color:#666; }

/* ---------- BOUTON FLÈCHE ---------- */
.cs-arrow         { width:60px; height:60px;
                    color:#009eff; display:flex; align-items:center; justify-content:center;
                    border-top-left-radius:20px; }
.cs-arrow svg     { stroke-width:2.5; }
.cs-arrow:hover   { filter:brightness(1.1); }

/* ---------- SÉCURITÉ GÉNÉRALE ---------- */
/*   Garantit que le header fixe reste au-dessus de la grille                */
nav, #main-header, .et-l--header { position:fixed; z-index:10000; }
/*   Bloque toute barre de scroll horizontale résiduelle sur la page entière */
html, body { overflow-x:hidden; }