/*
Theme Name: the7dtchild
Author: Dream-Theme
Author URI: http://dream-theme.com/
Description: The7 is perfectly scalable, performance and SEO optimized, responsive, retina ready multipurpose WordPress theme. It will fit every site – big or small. From huge corporate portals to studio or personal sites – The7 will become a great foundation for your next project!
Version: 1.0.0
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/



.wpcf7-form-control-wrap{
    line-height: 1!important;
}
.visuel-popin{
    max-width: 100%;
    height: auto;
    display: block;
}

.popin{
    background-color:rgba(0,0,0,.8);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 9999;
    display: none;
    opacity: 1;
    visibility: visible;
    width: 100%;
    align-items: center;
    overflow: auto;
    padding: 2rem 0;
    flex-direction: column;
    height: 100vh;


}
.active-popin .popin{
    display: flex;
}
.popin *, .popin *::before, .popin *::after {
  box-sizing: border-box;
}
.popin-wrapper{
    position: relative;
    margin: auto 1rem;
width: calc(100% - 2rem);
    max-width: 1000px;
    background-color: #fff;
padding:calc(1rem + 1vw);
}
.popin-container{
    position: relative;
    
    overflow-x: hidden;
    overflow-y: auto;
    
    color:#333;
    
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: 15px;
  padding-right: 15px;
}

@media (max-width: 759.8px) {
  .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .col-6.order-1{
    order:-1;
	margin-bottom:1rem;
  }
}
.fs-big{
    font-size:calc(1rem + .5vw);
    font-weight: 700;
}
.title{
    font-size:calc(1.5rem + 1vw);
    color: #000;
    line-height: 1.3;
    font-weight: 700;
}
.popin a.btn{
    background-color: #fa8e2d;
    border-radius: 50vh;
    text-decoration: none;
    color: #fff;
    padding: .5rem 1.25rem;
    font-weight: 300;
    margin:.4rem;
    white-space: nowrap;
    line-height: 3;
    transition: all .3s;
}
.popin a.btn:hover{
    text-decoration: underline;
    background-color: #dc761b;
}

.popin .mentions{
    font-size: .8rem;
    padding-top: 1rem;
    font-style: italic;
    line-height: 1.4;
    font-weight: 100;
}

.popin .close-popin {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-block;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  text-indent: -9999px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.popin .close-popin::after {
  content: "×";
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
z-index: 10;
  color: #000;
  text-indent: 0;
}












h1,h2,h3,h4,.titre-home{
    font-family: 'Inconsolata',sans-serif!important;
}

.sticky-on .same-logo{
    background-image:url(logo-lhap-orange-gris-nojobs.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
        height: 40px;

}

.sticky-on img{
    opacity: 0;
}

.mobile-logo,
.sticky-mobile-logo-second-switch img{
    height: 50px!important;
}

.mobile-branding img{   
@media screen and (max-width: 1024px) {

 width: 60px!important; 
}

}
#wpcf7-f15163-p14896-o1 .wpcf7-not-valid-tip-text{
    color:#e2001a!important;
}

#wpcf7-f15163-p14896-o1 .wpcf7-response-output{
    padding:1rem;
    background-color:#fff;
    border-radius:1rem;
    margin:1rem auto;
    border:1px solid #ccc;
}

#footer-gauche .wp-block-image {
    padding-right: 1rem;
}


.rollover-project .cat-realisations.wp-block-button__link{
    width: fit-content !important;
height: fit-content !important;
}

.blog .masthead,
.single-post .masthead{
    background-color:#fa8e2d!important;
}

.blog #sidebar,
.blog .breadcrumbs,
.single-post .breadcrumbs,
.single-post #sidebar,
.single-post .author-info,
.single-post .category-link,
.single-post .author,
.single-post .author-info,
.fancy-categories,
.post-article .category-link,
.post-article .author{
    display: none!important;
}
.blog .topbutton,
.single-post .topbutton{
    color: #fff;
}

.single-post .page-title,
.blog .page-title{
    background-color: transparent;
}

.single-post .soc-ico.custom-bg a:before,
.blog .soc-ico.custom-bg a:before{
    background-color:#fff;
}

.single-post .soc-ico.custom-bg a,
.blog .soc-ico.custom-bg a,
.blog .linkedin .soc-font-icon:before,
.single-post .linkedin .soc-font-icon:before{
    color:#fa8e2d;
}

.single-post .soc-ico.custom-bg a:hover,
.blog .soc-ico.custom-bg a:hover{
    color: #fff;
}

.blog .wf-container-main,
.single-post .wf-container-main{
    display: block!important;
}

.blog #content,
.single-post #main{
    padding-top:0;
    padding-bottom:calc(2rem + 4vw);
}

.articles-list{
        display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

article.post-article {
    width: 30%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom:2rem;
    flex: 0 1 calc(33.333% - 4rem);
}
.articles-list .post-thumbnail a{
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.articles-list .post-thumbnail img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}
.actu-slide h2{
    line-height: 1;
        font-size: calc(1.5rem + 1vw);
}
.post-article .thumbnail{
    display: block;
}

.post-article .post-content{
    padding-bottom: 1.5rem;
}

.post-article h3{

    margin-bottom:0;
}

    .post-article h3 a{
        font-size:1.8rem;
        padding-top:.5rem;
        display: block;
        padding-bottom:.5rem
    }




.masthead .mini-widgets .soc-ico a:not(:hover) .soc-font-icon, .masthead .mobile-mini-widgets .soc-ico a:not(:hover) .soc-font-icon, .dt-mobile-header .soc-ico a:not(:hover) .soc-font-icon{
  color: #fa8e2d!important;
}











/* edit juin 2025 */
.phantom-sticky .sticky-on.masthead:not(.masthead-mobile) .topbutton{
    color:#fa8e2d!important;
}
.single-post article.post{
    width: 100%;
    max-width: 900px;
    margin:0 auto;
}





/* Styles généraux du formulaire */

#wpcf7-f15163-p14896-o1 .wpcf7-form  {
    width: 100%;
    max-width: 1000px; /* Largeur max du formulaire */

    margin: 0 auto; /* Centrer le formulaire */

    padding: 20px;
    font-family: Arial, sans-serif; /* À adapter à la police de ton site */

}


/* Styles des titres de section */
#wpcf7-f15163-p14896-o1 .wpcf7-form  h2 {
    color: #FF7F50; /* Couleur orange de la capture d'écran */

    font-size: 24px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
}


/* Notes obligatoires et projet */
#wpcf7-f15163-p14896-o1 .wpcf7-form  .obligatoires-note,#wpcf7-f15163-p14896-o1 .wpcf7-form  .projet-note {
    text-align: center;
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}
#wpcf7-f15163-p14896-o1 .wpcf7-form  .obligatoires-note {
    font-size: 12px; /* Plus petit pour la note */

}



/* Ligne de séparation */
#wpcf7-f15163-p14896-o1 .wpcf7-form  hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 40px 0;
}


/* Conteneurs de lignes pour les champs (Flexbox) */

.form-row {
    display: flex;
    flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne sur petits écrans */

    gap: 20px; /* Espacement entre les colonnes */

    margin-bottom: 20px;
}


.form-col {
    flex: 1; /* Chaque colonne prend la même largeur */

    min-width: 250px; /* Largeur minimale avant de passer à la ligne */

}


.full-width-field {
    width: 100%;
}
.full-width-field p{
    flex:1;
}

/* Styles des labels */
#wpcf7-f15163-p14896-o1 .wpcf7-form  label {
    display: block; /* Chaque label prend sa propre ligne */

    font-weight: bold;
    color: #333;
line-height: 2.2;
}


#wpcf7-f15163-p14896-o1 .wpcf7-form  input[type="text"]:focus,#wpcf7-f15163-p14896-o1 .wpcf7-form  input[type="email"]:focus,#wpcf7-f15163-p14896-o1 .wpcf7-form  input[type="tel"]:focus {
    border-color: #FF7F50; /* Bordure orange au focus */

}


/* Placeholder style */
#wpcf7-f15163-p14896-o1 .wpcf7-form  input::placeholder {
    color: #999;
}

.has-large-font-size{
line-height: 1.2;}


/* Styles des checkboxes (Projet) */

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 3 colonnes pour les checkboxes, s'adapte */

    gap: 15px; /* Espacement entre les cases à cocher */

    margin-bottom: 20px;
}

.checkbox-grid .wpcf7-not-valid-tip{
    padding-top:1rem;
}

.checkbox-grid .wpcf7-list-item {
    margin: 0; /* Supprime la marge par défaut de CF7 */

    position: relative;
    padding-left: 25px; /* Espace pour la checkbox customisée */

    cursor: pointer;
}


.checkbox-grid .wpcf7-list-item-label {
    font-weight: normal; /* Labels de checkbox en gras par défaut, on les remet normaux */

    color: #333;

}


.checkbox-grid input[type="checkbox"] {
    /* Masque la checkbox native */

    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Custom checkbox appearance */

.checkbox-grid .wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px; /* Carré légèrement arrondi */

}


/* Checked state */

.checkbox-grid input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
    background-color: #FF7F50; /* Orange quand coché */

    border-color: #FF7F50;
}


.checkbox-grid input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    content: '✔'; /* Coche */

    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 14px;
    line-height: 1;
}


/* Style du champ "Préciser" */

.projet-autres-label {
    margin-top: 10px; /* Espace au-dessus du label "Précisez" */

    font-weight: normal; /* Texte du label normal */

    display: flex; /* Aligne le texte du label et le champ sur la même ligne */

    align-items: center;
    gap: 10px; /* Espacement entre le texte et l'input */

    width: 100%; /* Prend toute la largeur de la colonne si besoin */

}

.wpcf7-form-control-wrap{
    line-height: 0;
}
.projet-autres-label #wpcf7-form-control-wrap {
    flex-grow: 1; /* Permet à l'input de prendre l'espace restant */

}


/* RGPD Acceptance */

.acceptance-section {
    margin-top: 30px;
    margin-bottom: 20px;
}


.acceptance-section .wpcf7-list-item-label {
    font-size: 14px;
    color: #666;
    font-weight: normal;
}


.acceptance-section a {
    color: #FF7F50;
    text-decoration: none;
    font-weight: bold;
}


.acceptance-section a:hover {
    text-decoration: underline;
}


/* Style du bouton Envoyer */

.submit-section {
    text-align: center;
    margin-top: 30px;
}
#wpcf7-f15163-p14896-o1 .wpcf7-not-valid-tip{
    display: block!important;
}
.form-col p{
    margin:0;
}
#wpcf7-f15163-p14896-o1 .wpcf7-submit {
    background-color: #FF7F50; /* Couleur orange du bouton */

    color: #fff;
    padding: 15px 40px;
    border: none;
    border-radius: 8px; /* Coins arrondis */

    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    min-width: 200px; /* Largeur minimale du bouton */

}
#wpcf7-f15163-p14896-o1 .wpcf7-submit:disabled {
    cursor: not-allowed;
    opacity: .5;
}
#wpcf7-f15163-p14896-o1 .wpcf7-submit:hover {
    background-color: #E66A3D; /* Orange plus foncé au survol */

}
.wpcf7-spinner{
position: absolute!important;}



#wpcf7-f15163-p14896-o1 .wpcf7-form-control.wpcf7-checkbox{
        display: flex
;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
}


#wpcf7-f15163-p14896-o1 span.wpcf7-form-control.wpcf7-checkbox > span {
    flex: 0 0 auto;
    width: 25%;
}


/* Styles pour les messages de validation/erreur de CF7 */
#wpcf7-f15163-p14896-o1 .wpcf7-response-output {
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}
#wpcf7-f15163-p14896-o1 .wpcf7-response-output.wpcf7-mail-sent-ok {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}
#wpcf7-f15163-p14896-o1 .wpcf7-response-output.wpcf7-validation-errors {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}


.wpcf7-form label > span.wpcf7-form-control-wrap > input[aria-required="true"] + .wpcf7-not-valid-tip::before {
    display: none; /* Cache l'astérisque rouge de CF7 qui apparaît par défaut après l'input */

}


span.wpcf7-list-item label{
    vertical-align: middle;
    padding-bottom: 0 !important;
}

span.wpcf7-form-control.wpcf7-checkbox > span {
    flex: 0 0 auto;
    width: 25%;

/* Réactivité pour les petits écrans */

@media (max-width: 768px) {
    .form-row {
        flex-direction: column; /* Les champs passent à la colonne unique */

        gap: 15px;
    }

    .form-col {
        min-width: unset; /* Annule la largeur minimale */

    }

    #wpcf7-f15163-p14896-o1 {
        padding: 15px;
    }

    .checkbox-grid {
        grid-template-columns: 1fr; /* Une seule colonne pour les checkboxes sur mobile */

    }

}