/* ==========================================================
   pages.css — pages interieures
   Mises en page communes aux pages projet, solution, approche et contact.
   Charge en data-page-asset : le routeur le reinjecte a chaque navigation.
   ========================================================== */

/* ==========================================================
   TITRES DE PAGE
   Ecrits en rem ici et redefinis en unites de viewport dans responsive.css :
   sur un petit ecran, une taille fixe deborderait.
   ========================================================== */
.display-xl.title {
    font-size: 6rem;
    line-height: 6rem;
    font-weight: 600;
}

.menu-slide-video .display-normal {
    font-size: 1.5rem;
}

/* ==========================================================
   MISE EN PAGE DEUX COLONNES
   flex: 1 1 45% avec min-width 250px : les colonnes passent l'une sous
   l'autre d'elles-memes des que la place manque, sans media query.
   ========================================================== */
.two-columns-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.5vw;
    padding-top: calc(var(--page-padding) / 1.5);
    padding-bottom: calc(var(--page-padding) / 1.5);
}

.left-content,
.right-content {
    flex: 1 1 45%;
    min-width: 250px;
}

/* ==========================================================
   VARIANTE TABLEAU
   Meme conteneur en liste de caracteristiques : libelle a gauche, valeur a
   droite. .table-separator trace le filet entre deux lignes.
   ========================================================== */
.two-columns-container.table {
    padding-top: var(--page-padding);
    margin-bottom: var(--page-padding);
}

.two-columns-container.table .left-content,
.two-columns-container.table .right-content {
    display: flex;
    align-items: center;
}

.two-columns-container.table .left-content .display-lg {
    opacity: 0.55;
    font-weight: 300;
}

.two-columns-container.table .right-content .display-normal {
    margin: 0;
}

.table-separator{
    height:1px;
    width:100%;
    background-color:white;
    margin-left: 30px;
    opacity:0.1;
}

/* ==========================================================
   BASELINE DE PROJET
   ========================================================== */
.baseline-project {
    max-width: 50vw;
    padding-bottom: calc(var(--page-padding) * 2);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================
   MODULE DE RENDEZ-VOUS CAL
   La marge negative fait remonter le module par-dessus la video d'en-tete.
   min-height reserve la hauteur de l'iframe avant son chargement : sans elle,
   le pied de page remonte puis redescend d'un bloc.
   ========================================================== */
.cal-wrapper {
    margin-top: -35vh;
    z-index: 1;
    position: relative;
    min-height: 570px;
}

.cal-container {
    width: calc(100vw - var(--page-padding) * 2);
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

/* ==========================================================
   BANDEAU DE CONTACT EN PIED DE PAGE
   ========================================================== */
.inquiries {
    height: 20vh;
    position: relative;
}