#home .grid {
    margin-top:30px;
    margin-left: 45px;
    margin-right: 45px;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* GIL-947 — la photo d'illustration a cédé la place à l'encadré RFE. La présentation
   occupe l'espace restant, l'encadré garde une largeur fixe : au-delà d'environ 520px
   les lignes deviennent trop longues pour un texte qu'on doit lire en entier. */
#home .grid .content {
    flex: 1 1 auto;
    min-width: 0;
}

#home .grid .rfe-encadre {
    flex: 0 0 520px;
    max-width: 520px;
    border-radius: 4px;
    border-left: 4px solid #0bd1d1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* Sous 1200px, la mise côte à côte écraserait les deux colonnes : elles s'empilent,
   l'encadré passant sous la présentation et prenant toute la largeur. */
@media (max-width: 1200px) {
    #home .grid {
        flex-direction: column;
    }

    #home .grid .rfe-encadre {
        flex: 1 1 auto;
        max-width: none;
    }
}

#home .grid .rfe-encadre .rfe-bloc {
    margin-bottom: 22px;
}

#home .grid .rfe-encadre .rfe-bloc:last-child {
    margin-bottom: 0;
}

/* Surtout PAS de flex ici : le titre contient des éléments en ligne (<sup> du
   « 1er »), qui deviendraient des éléments flex et récolteraient le gap — d'où un
   « au 1 er septembre » disgracieux. Retrait à gauche + pastille positionnée. */
#home .grid .rfe-encadre .rfe-titre {
    position: relative;
    margin: 0 0 8px;
    padding-left: 18px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.35;
    color: #000;
}

/* Pastille calée sur la première ligne du titre, y compris quand celui-ci passe
   sur deux lignes : positionnée, elle ne suit pas le flux du texte. */
#home .grid .rfe-encadre .rfe-puce {
    position: absolute;
    left: 0;
    top: .45em;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #54b252;
}

#home .grid .rfe-encadre p {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.5;
}

#home .grid .rfe-encadre .rfe-liste {
    margin: 0 0 8px;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.5;
}

#home .grid .rfe-encadre .rfe-liste li {
    margin-bottom: 5px;
}

#home .grid .rfe-encadre .rfe-video {
    margin-bottom: 0;
    padding-top: 8px;
}

#home .grid .rfe-encadre .rfe-video a {
    color: #2a9d9d;
    font-weight: bold;
}

#home .grid .rfe-encadre .rfe-video a:hover {
    color: #4fafaf;
}

#home .grid .rfe-encadre .rfe-video i {
    margin-right: 4px;
}

#home .grid .rfe-encadre .rfe-note {
    margin-bottom: 0;
    padding-top: 8px;
    border-top: 1px solid #e3e3e3;
    color: #666;
    font-style: italic;
}

#home .grid .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#home .grid .text-content {
    display: flex;
    flex-direction: column;
}

#home .grid .text-content .title {
    color:#0bd1d1;
    font-size: 40px;
    font-weight: bold;
}

#home .grid .text-content .subtitle {
    font-size: 20px;
}

#home .grid .text-content .description {
    margin-top: 15px;
    font-size: 14px;
}

#home .grid .text-content .warning-suspended {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}

#home .grid .text-content .cta-espace-client:hover {
    text-decoration: none;
    background-color: #4fafaf;
}

#home .grid .icons-content {
    display: flex;
    gap: 30px;
    flex-direction: column;
}

#home .grid .icons-content .icon-content {
    display: flex;
    gap: 20px;
}

#home .grid .icons-content .icon-content svg {
    width: 50px;
    height: 50px;
    fill: #0bd1d1;

}

#home .grid .icons-content .icon-content .text {
    display: flex;
    gap: 5px;
    flex-direction: column;

}

#home .grid .icons-content .icon-content .text .title {
    font-size: 14px;
    font-weight: bold;
}

#home .grid .icons-content .icon-content .text .subtitle {
    font-size: 12px;
}

#home .grid .infos-content {
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    background-color: #f6f6f6;
    color:#000;
}

#home .grid .infos-content .title {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 15px;
}

#home .grid .infos-content .ellipse {
    display: flex;
    gap: 4px;
    align-items: flex-start;
}

#home .grid .infos-content .ellipse::before {
    content: "";
    height: 16px;
    width: 16px;
    min-width: 16px;
    display: inline-block;
    border-radius: 50%;
    margin-top: 2px;
}

#home .grid .infos-content .green-fill::before {
    background:#54b252;
}

#home .grid .infos-content .red-fill::before {
    background: #cb2e4b;
}

#home .grid .infos-content .myupdate {
    margin-left: 5px;
    width: fit-content;
    background-color: #0bd1d1;
    color: #fff;
    padding: 5px 8px;
    border-radius: 2px;
    font-size: 12px;
}

#home .grid .infos-content .myupdate:hover {
    text-decoration: none;
    background-color: #4fafaf;
}