#portail                                     { height: 100vh; width: 100%; background: url("../images/portail_background.webp") 50% / cover no-repeat fixed;}
#portail .page_content                       { height: 100%; width: 100%; text-align: center; position: absolute;}
#portail .titre_main                         { font-size: 65px; line-height: 75px;  }
#portail .cadres                             { max-width: 2000px; margin: 30px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 60px; }
#portail .cadres .item                       { background: #fff; color: #fff; border: 2px solid #fff; padding: 30px 30px 0; display: grid; align-content: space-between; border-radius: 8px; box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.3); }
#portail .cadres .item.terrain               { background: #150057;}
#portail .cadres .item.appart                { background: #000;}
#portail .cadres .item.construire            { background: #4b4d4c;}
#portail .cadres .item.dossier               { background: #b9c8eb;  }
#portail .cadres .item img                   { display: block; width: 100%; height: auto;}
#portail .cadres .item .link                 { background-color: #5f5ad2; border-radius: 8px 8px 0 0 ; }
#portail .cadres .item .sous_titre           { font-weight: 500; font-size: 16px; line-height: 30px; }
#portail .cadres .item .sous_titre span      { color: #44ce9b; }
#portail .cadres .item.terrain .sous_titre,
#portail .cadres .item.appart .sous_titre,
#portail .cadres .item.construire .sous_titre { color: #fff; }
#portail .cadres .item .link                 { display: inline-block; margin: 0 auto;}
#portail .call                               { display: inline-block; font-size: 25px; margin-top: 30px; left: 50%; padding: 12px 90px 12px 20px; background: url("../images/tel_gold.svg") calc(100% - 30px) 40% no-repeat #fff; border-radius: 5px; background-size: 35px}


@media (min-width:1201px) {
#portail .cadres .item .link:hover           { background-color: #fff; color: #5f5ad2; }
}
@media (max-width:1200px) {
#portail .titre_main                         { font-size: 50px; line-height: 60px; }
#portail .cadres                             { grid-template-columns: repeat(2, 1fr); padding: 30px 40px; }
}
@media (max-width:1000px) {
#portail .titre_main                         { font-size: 40px; line-height: 50px; }

}
@media (max-width:600px) {
#portail .titre_main                         { font-size: 35px; line-height: 45px; }
#portail .sous_titre                         { font-size: 18px; line-height: 28px; }
#portail .cadres                             { grid-template-columns: 1fr; padding: 20px 30px; }
#portail .cadres .item                       { padding: 20px 30px 0; }
}