/* cmsms stylesheet: 1-Ctaurel modified: vendredi 11 juillet 2025 12:31:19 */
@font-face {
    font-family: 'open-sans';
    src: url('https://ctaurel-informatique.fr/uploads/interface/polices/OpenSans-Regular.woff');
}

html {
    width: 100%;
    margin: auto;
    padding: auto;
    font-size: 120%;
    font-family: open-sans;
}

body {
    width: 100%;
    margin: auto;
    padding: auto;
}

a {
    color: black;
    text-decoration: none;
}

h2 {
    color: #345B66;
    font-size: 200%;
}

hr {
    width: 60%;
    margin-bottom: 30px;
    background-color: #345b66;
    border: 1px solid #345b66;
}

.infos
{
    font-size: 70%;
    font-style: italic;
}

#menu {
    width: 100%;
    height: 100px;
    background-color: #1f1e1e;
    position: sticky;
    top: 0;
    color: white;
    z-index: 3;
}

#menu a {
    color: white;
    transition: 400ms;
    border-bottom: 1px solid transparent;
}

#menu a:hover {
    color: #345B66;
    transition: 400ms;
    font-weight: bold;
    border-bottom: 2px solid #345B66;
}

#menu #logo {
    width: 30%;
    padding-top: 1%;
    display: inline-block;
    vertical-align: top;
    transition: 400ms;
}

#menu #logo img {
    max-width: 150px;
}

#menu .liens {
    width: 65%;
    padding-top: 2%;
    display: inline-block;
    vertical-align: top;
    text-align: right;
}

#menu .liens .lien {
    min-width: 15%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}

@media screen and (max-width: 765px)
{
#menu {
    width: 100%;
    height: 100px;
    position: sticky;
    top: 0;
}
    
#menu #logo {
    width: 100%;
    padding-top: 0px;
    opacity: 1!important;
    text-align: center;
}
#menu #logo img {
    max-width: 100px;
}
#menu .liens {
    width: 100%;
    padding-top: 0px;
    text-align: center;
}
#menu .liens .lien {
    font-size: 85%;
    width: 22%;
    padding-top: 0px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}
}

#home {
    width: 100%;
    min-height: 700px;
    margin: auto;
    margin-top: -30px;
    background-image: url('https://ctaurel-informatique.fr/uploads/interface/images/home-fond.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

#home .titre {
    padding-top: 15vh;
    text-align: center;
}

#home .titre img {
    max-width: 50%;
    min-width: 460px;
    opacity: 0.9;
}

#home .sous-titre {
    text-align: center;
    color: #345B66;
    text-shadow: 0.5px 0px 5px #ffffff;
}

@media screen and (max-width: 765px)
{
#home {
    width: 100%;
    min-height: 200px;
    margin: auto;
    margin-top: 0px;
    padding-bottom: 1%;
    font-size: 85%;
    text-align: center;
}

#home .titre {
    padding-top: 5vh;
    text-align: center;
}

#home .titre img {
    max-width: 100%;
    min-width: 250px;
    opacity: 0.9;
}

#home .sous-titre {
    text-align: center;
    color: #345B66;
    text-shadow: 0.5px 0px 5px #ffffff;
}    
}

/* Ancres */

#ancre-apropos {
    position: absolute;
    width: 100%;
    margin-top: -25px;
    z-index: -1;
}

#ancre-service {
    position: absolute;
    width: 100%;
    margin-top: -55px;
    z-index: -1;
}


#contenu-vierge
{
    width: 90%;
    margin: auto;
    min-height: 600px
}

/* Ancres */

#apropos {
    min-height: 700px;
    text-align: center;
    font-size: 115%;
}

#apropos h3 {
    color: #345B66;
    font-style: italic;
}

#apropos .texte {
    width: 50%;
    min-width: 460px;
    padding-right: 20px;
    display: inline-block;
    text-align: justify;
    vertical-align: top;
}

#apropos .texte p {
    text-indent: 50px;
}

#apropos .photo {
    width: 35%;
    min-width: 400px;
    height: 400px;
    display: inline-block;
    text-align: center;
}

#apropos .photo img {
    max-width: 100%;
}

@media screen and (max-width: 765px)
{
#apropos {
    min-height: 200px;
}

#apropos .texte {
    width: 95%;
    min-width: 0px;
    padding-right: 0px;
    margin: auto;
}

#apropos .texte p {
    text-indent: 0px;
}

#apropos .photo {
    width: 95%;
    min-width: 0px;
    height: 300px;
    display: inline-block;
    text-align: center;
}

#apropos .photo img {
    max-width: 100%;
}
}

#service {
    min-height: 700px;
    padding-top: 1px;
    background-color: #1f1e1e;
    color: white;
    text-align: center;
    font-size: 110%;
}

#service h3 {
    color: #345B66;
    font-style: italic;
}

#service .services {
    width: 95%;
    margin: auto;
    display: inline-block;
    text-align: center;
}

#service .services .block {
    min-width: 100px;
    min-height: 100px;
    margin: 2px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 80%;
}

#service .services .logo
{
    height: 65px;
    border-bottom: 1px solid #345b66;
}

#service .services .logo img
{
    max-width: 100%;
}

#service .service .images {
    text-align: center;
}

#service .service .images img
{
    max-width: 40px;
}

#service .service .picto {
    text-align: left;
}

#service .texte {
    width: 80%;
    margin: auto;
    padding-right: 0px;
    display: inline-block;
    text-align: justify;
    vertical-align: top;
}

#service .texte p {
    text-indent: 50px;
}

@media screen and (max-width: 765px)
{
#service {
    min-height: 200px;
    font-size: 110%;
}

#service .services {
    width: 100%;
    min-width: 200px;
    min-height: 400px;
}

#service .texte {
    width: 95%;
    min-width: 200px;
    margin: auto;
    padding-right: 0px;
}

#service .texte p {
    text-indent: 0px;
}
}

/* Clients */

#references
{
    width: 95%;
    margin: auto;
    min-height: 700px;
    font-size: 105%;
    text-align: center;
}

#references h2
{
    text-align: center;
}

#references .block 
{
    width: 15%;
    min-height: 150px;
    padding: 1%;
    display: inline-block;
    vertical-align: top;
}

#references .block .logo
{
    height: 150px;
}

#references .block .logo img 
{
    max-width: 200px;
    max-height: 150px;
    transition: 400ms;
}

#references .block .logo img:hover 
{
    transform: scale(1.05);
    transition: 400ms;
}

#references .block h3
{
    padding-top: 15px;
    border-bottom: 1px solid #345b66;
}

#references .block h4
{
    font-size: 80%;
    font-style: italic;
    color: #345B66;
}



@media screen and (max-width: 765px)
{
#references
{
    width: 95%;
    margin: auto;
}

#references .block 
{
    width: 100%;
}

#references .block .logo
{
    width: 100%;
}

#references .block .logo h4
{
    font-size: 80%;
    font-style: italic;
    color: #345B66;
}

#references .block .texte
{
    width: 100%;
}

#references .block .texte .gauche, #references .block .texte .droite
{
    width: 100%;
    text-align: justify;
}    
}

/* Clients */

/* Partenaires */

#partenaires
{
    width: 100%;
    min-height: 700px;
    margin: auto;
    padding-top: 1px;
    background-color: #1f1e1e;
    color: white;
    font-size: 105%;
    text-align: center;
}

#partenaires h2
{
    text-align: center;
}

#partenaires .block 
{
    width: 75%;
    min-height: 150px;
    margin: auto;
    padding: 1%;
    display: inline-block;
    vertical-align: top;
}

#partenaires .block .logo
{
    width: 20%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

#partenaires .block .logo img 
{
    max-width: 200px;
    max-height: 150px;
    transition: 400ms;
}

#partenaires .block .logo img:hover 
{
    transform: scale(1.05);
    transition: 400ms;
}

#partenaires .block .logo h3
{
    padding-top: 15px;
    border-bottom: 1px solid #345b66;
}

#partenaires .block .logo h4
{
    font-size: 80%;
    font-style: italic;
    color: #345B66;
}

#partenaires .block .texte
{
    width: 75%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

#partenaires .block .texte a {
    color: white;
    transition: 400ms;
    border-bottom: 1px solid transparent;
}

#partenaires .block .texte a:hover {
    color: #345B66;
    transition: 400ms;
    font-weight: bold;
    border-bottom: 2px solid #345B66;
}

#partenaires .block .texte .gauche, #partenaires .block .texte .droite
{
    width: 48%;
    display: inline-block;
    vertical-align: top;
    text-align: left;
}

@media screen and (max-width: 765px)
{
#partenaires .block 
{
    width: 95%;
    margin: auto;
}

#partenaires .block .logo
{
    width: 100%;
}

#partenaires .block .texte
{
    width: 100%;
}

#partenaires .block .texte .gauche, #partenaires .block .texte .droite
{
    width: 100%;
    text-align: justify;
}    
}

/* Partenaires */

/* Contact */

#contact {
    min-height: 700px;
    padding-top: 1px;
    padding-bottom: 1%;
    text-align: center;
    font-size: 115%;
}

#contact a {
    color: #345B66;
    transition: 400ms;
}

#contact a:hover {
    color: #345B66;
    transition: 400ms;
}

#contact h3 {
    color: #345B66;
    font-style: italic;
    text-indent: 0px;
}

#contact .coordonnees {
    width: 50%;
    min-width: 460px;
    min-height: 300px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
}

#contact .coordonnees .images {
    text-align: center;
}

#contact .formulaire {
    width: 40%;
    min-width: 460px;
    min-height: 300px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
}

#contact .formulaire .champs {
    width: 55%;
    min-width: 400px;
    display: inline-block;
    vertical-align: top;
}

#contact .formulaire .captcha-submit {
    width: 40%;
    min-width: 305px;
    margin-top: 5%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

#contact .formulaire input[type="text"], #contact .formulaire input[type="email"]
{
    width: 300px;
    height: 25px;
    margin-bottom: 5px;
    color: #345B66;
}

#contact .formulaire input[type="text"]::placeholder {
    color: #345B66;
    font-weight: bold;
}

#contact .formulaire textarea {
    width: 300px;
    height: 250px;
    color: #345B66;
    font-weight: bold;
}

#contact .formulaire .bouton {
    width: 200px;
    height: 50px;
    color: #345B66;
    font-weight: bold;
    background-color: white;
    font-size: 105%;
    transition: 400ms;
}

#contact .formulaire .bouton:hover {
    width: 200px;
    height: 50px;
    color: #345B66;
    font-weight: bold;
    background-color: #1f1e1e;
    font-size: 105%;
    transition: 400ms;
}


#contact .form-site
{
    position: absolute;
    left: -9999px;
}

#contact .texte {
    width: 80%;
    min-width: 460px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
}

#contact .texte p {
    text-indent: 50px;
}

@media screen and (max-width: 765px)
{
#contact {
    min-height: 200px;
}

#contact .coordonnees {
    width: 95%;
    min-width: 200px;
    min-height: 300px;
    margin: auto;
}

#contact .formulaire {
    width: 95%;
    min-width: 200px;
    min-height: 300px;
    margin: auto;
    text-align: center;
}

#contact .formulaire .champs {
    width: 55%;
    min-width: 300px;
    display: inline-block;
    vertical-align: top;
}

#contact .texte {
    width: 95%;
    min-width: 200px;
    margin: auto;
    text-align: justify;
}

#contact .texte p {
    text-indent: 0px;
}

#contact .formulaire input[type="text"] {
    width: 300px;
    height: 25px;
    margin-bottom: 5px;
    color: #345B66;
}

#contact .formulaire textarea {
    width: 300px;
    height: 250px;
    color: #345B66;
    font-weight: bold;
}
}

/* Contact */

/* Footer */

#footer {
    width: 100%;
    min-height: 125px;
    text-align: center;
    background-color: #1f1e1e;
    color: white;
}

#footer a {
    color: white;
    font-weight: bold;
    transition: 400ms;
}

#footer a:hover {
    color: #345B66;
    font-weight: bold;
    transition: 400ms;
}

#footer .gauche {
    width: 30%;
    padding-top: 3%;
    display: inline-block;
    vertical-align: top;
}

#footer .milieu {
    width: 30%;
    padding-top: 1%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

#footer .milieu img {
    max-width: 200px;
}

#footer .droite {
    width: 30%;
    padding-top: 3%;
    display: inline-block;
    vertical-align: top;
}

@media screen and (max-width: 765px)
{
#footer .gauche {
    width: 100%;
    min-width: 200px;
}

#footer .milieu {
    width: 100%;
    min-width: 200px;
}

#footer .milieu img {
    max-width: 200px;
}

#footer .droite {
    width: 100%;
    min-width: 200px;
    padding-top: 2%;
}    
}

/* Footer */

/* Contenu vierge */

.page-mentions-legales {
    width: 90%;
    margin: auto;
}

.page-mentions-legales a {
    color: #345B66;
    font-weight: bold;
    transition: 400ms;
}

.page-mentions-legales a:hover {
    color: black;
    font-weight: bold;
    transition: 400ms;
}

.validation-formulaire {
    width: 90%;
    min-height: 600px;
    padding-top: 2%;
    margin: auto;
    text-align: center;
}

.validation-formulaire a {
    color: #345B66;
    font-weight: bold;
    transition: 400ms;
}

.validation-formulaire a:hover {
    color: black;
    font-weight: bold;
    transition: 400ms;
}


/* Contenu vierge */