/*!
Theme Name: ial
Theme URI: http://underscores.me/
Author: Virtua
Author URI: https://www.virtuaweb.ca
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ial
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ial is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


/* ========================================
   ÎLET AU LOUP — PAGE D'ACCUEIL
   ======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: url("images/ial-bg.jpg") no-repeat top center;
    background-size: cover;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    line-height: 1.45;
}

/* Conteneur général */

#container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 3vw 0;
}

/* ========================================
   STRUCTURE DES DEUX LIGNES
   ======================================== */

.bloc-top-ligne {
    display: grid;
    grid-template-columns: minmax(180px, 0.85fr) minmax(0, 1.15fr);
    column-gap: 35px;
    align-items: center;
    margin-bottom: 3vw;
}

.bloc-top-ligne + .bloc-top-ligne {
    margin-top: 38px;
}

.bloc-top-gauche,
.bloc-top-droit {
    min-width: 0;
}

/* ========================================
   LOGO
   ======================================== */

#bloc-top-logo {
    width: 90%;
    margin: 0 auto;
}

#bloc-top-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ========================================
   TEXTE DE PRÉSENTATION
   ======================================== */

.bloc-top-droit p {
    margin: 0 0 16px;
    font-size: 21px;
    line-height: 1.5;
    text-align: left;
}

.bloc-top-droit p:last-child {
    margin-bottom: 0;
}

.bloc-top-droit strong {
    font-weight: 700;
}

/* ========================================
   COORDONNÉES ET RÉSEAUX SOCIAUX
   ======================================== */


#bloc-top-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
}

#lien-courriel {
    color: #fff;
    text-decoration: none;
    font-size: 30px;
    white-space: nowrap;
}

#lien-courriel:hover {
    text-decoration: underline;
}

#lien-facebook {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    background-color: #fff;
    border-radius: 50%;
}

#lien-facebook img {
    display: block;
    width: 70%;
    height: auto;
    filter: brightness(0) saturate(100%) invert(52%) sepia(71%) saturate(428%) hue-rotate(176deg) brightness(83%) contrast(87%);
}

/* ========================================
   FORMULAIRE INFOLETTRE
   ======================================== */

#bloc-top-infolettre h2 {font-size: 24px; margin: 0 0 20px 0; font-weight: 600; text-transform: uppercase;}

#bloc-top-infolettre {
    width: 100%;
    padding: 20px 30px;
    border-radius: 8px;
    background: rgba(24, 66, 126, 0.38);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

/*
   Styles génériques pour un formulaire éventuel
   à l'intérieur de #bloc-top-infolettre.
*/

#bloc-top-infolettre form {
    margin: 0;
}

#bloc-top-infolettre input[type="text"],
#bloc-top-infolettre input[type="email"] {
    display: block;
    width: 100%;
    padding: 10px 20px;
    border: 0;
    border-radius: 5px;
    background: rgba(20, 57, 109, 0.4);
    color: #fff;
    font-family: inherit;
    font-size: 20px;
}

#bloc-top-infolettre input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

#bloc-top-infolettre button,
#bloc-top-infolettre input[type="submit"] {
    padding: 5px 10px;
    border: 0;
    border-radius: 5px;
    background: #fff;
    color: #416eae;
    font-family: inherit;
    font-size: 20px;
    cursor: pointer;
}

/* Deuxième ligne : coordonnées + photos */

.bloc-top-ligne + .bloc-top-ligne {
    align-items: stretch;
}

/* Colonne gauche */

.bloc-top-ligne + .bloc-top-ligne .bloc-top-gauche {
    display: flex;
    flex-direction: column;
}

/* Formulaire : occupe l'espace restant */

#bloc-top-infolettre {
    flex: 1;
}


/* ========================================
   PHOTOS
   ======================================== */


#bloc-photos {
    display: grid;
    grid-template-columns: 1fr 1.57fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 12px;

    /* Rectangle défini */
    width: 100%;
    aspect-ratio: 1.56 / 1;
}

.bloc-photos-element {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Photo verticale à gauche */

.bloc-photos-element:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
}

/* Photo horizontale du haut */

.bloc-photos-element:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

/* Photo horizontale du bas */

.bloc-photos-element:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

/* Images */

.bloc-photos-element img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

/* Crédit photo */

.bloc-photos-element span {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 3px 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.bloc-photos-element:hover span,
.bloc-photos-element:focus-within span {
    opacity: 1;
}


@media all and (max-width: 1500px) {
    #container {max-width: 90%; margin: 0 5%;}
}


@media all and (max-width: 1150px) {
    #bloc-top-logo {width: 100%;}
    .bloc-top-ligne {gap: 60px;}
    .bloc-top-droit p {font-size: 19px;}
    #lien-courriel {font-size: 22px;}
    #lien-facebook {width: 50px; height: 50px; flex: 0 0 50px;}
}


@media (max-width: 1000px) {

    .bloc-top-ligne {
        grid-template-columns: 1fr;
        row-gap: 35px;
    }
    
    #bloc-top-logo {width: 80%; margin-bottom: 40px;}
    .bloc-top-droit p {text-align: center;}

}