/*
 * Materiel d occasion : page de liste et fiche d une machine.
 *
 * Pourquoi cette feuille existe, et pas de regles dans style.css
 * --------------------------------------------------------------
 * resources/assets/sass/style.scss est bien la source du site, mais Laravel Mix
 * ne peut plus etre relance sur ce projet : node_modules n est pas installe et
 * le webpack.mix date de 2018. Comme certifications.css, ces regles sont donc
 * ecrites a la main et chargees APRES la feuille compilee. Elles ont aussi ete
 * reportees dans le SCSS, pour qu une future recompilation ne les perde pas.
 *
 * Aucun selecteur ci-dessous n existe dans style.css : cette feuille AJOUTE, et
 * ne surcharge rien. C est ce qui garantit que le reste du site est intact
 * lorsqu elle est chargee, ce qui arrive sur deux pages seulement.
 *
 * Ce qui est repris du site, et ce qui ne l est pas
 * ------------------------------------------------
 * La typographie est celle du site : Montserrat, titres en 300 avec le second
 * mot en 700 par le mixin .title, texte en 14/18, vert de marque #b5cf43 pour
 * les accents, gris #4b4a4b pour le texte. Les boutons reprennent la pastille
 * verte des certificats, .cert-1-link.
 *
 * Ce qui ne l est pas : le positionnement. Toutes les sections de l accueil
 * sont posees en pixels absolus, avec des hauteurs figees par section
 * (.index-6 { height: 1740px } et ainsi de suite). Ces deux pages-ci sont en
 * FLUX, et c est la seule facon de les rendre : le nombre d annonces, la
 * longueur d une designation et le nombre de photos d une machine varient tous
 * les trois, et aucune coordonnee codee en dur ne peut suivre cela.
 *
 * Pas de media query, et ce n est pas un oubli
 * --------------------------------------------
 * layouts/default.blade.php declare <meta name="viewport" content="width=1400">.
 * Le site est rendu a 1400 pixels CSS sur tout appareil, puis dezoome par le
 * navigateur : aucune media query ne se declenche jamais, pas meme celles de
 * base/_media-query.scss, toutes ecrites en max-width 1200 ou moins et de ce
 * fait inertes. Ce qui repond reellement, c est la largeur du conteneur,
 * toujours 1140 pixels : les grilles ci-dessous s y adaptent par auto-fill et
 * minmax, donc au NOMBRE d annonces, ce qui est la seule variable ici.
 */

/* ======================================================================
 * PAGE DE LISTE
 * ====================================================================== */

/* .content pose deja padding: 100px 0. Le complement en bas tient compte de
   l en-tete, qui est en position fixe sur 100 pixels de haut et recouvrirait
   la derniere ligne d annonces. */
.machines{
    padding-bottom: 160px;
}

.machines-intro{
    max-width: 760px;
    margin: -35px auto 60px;
    text-align: center;
    font-size: 15px;
    line-height: 24px;
}
.machines-intro p{
    margin: 0 0 14px;
}
.machines-intro p:last-child{
    margin-bottom: 0;
}

/* auto-fill et non auto-fit : avec auto-fit, une annonce seule s etirerait sur
   les 1140 pixels du conteneur et sa photo serait affichee bien au-dela de la
   taille de sa conversion, donc floue. Ici une carte garde sa largeur et les
   suivantes se rangent a cote, trois par ligne a 1140 pixels. */
.machines-liste{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 40px 30px;
    /* align-items reste a sa valeur par defaut, stretch : les cartes d une
       meme ligne prennent la hauteur de la plus haute. Avec align-items:start,
       chacune s arretait a son contenu et le PRIX tombait a une ordonnee
       differente d une annonce a l autre. Mesure avant correction, sur les
       trois annonces de la premiere ligne : cartes de 478, 502 et 473 pixels,
       prix a 1647, 1670 et 1641. Vingt-neuf pixels d ecart sur l information
       la plus lue de la page. */
}

/* La carte entiere est le lien : sur une liste d annonces, c est la vignette
   qu on cherche a cliquer, pas le titre. D ou un <a> qui n est pas inline. */
.machine-carte{
    /* Colonne flex, et non un bloc : c est ce qui permet de pousser le prix
       contre le bas de la carte, cf. .machine-carte-prix. */
    display: flex;
    flex-direction: column;
    background: #FFF;
    border: 1px solid #e4e4e2;
    transition: border-color 0.3s, transform 0.3s;
}
.machine-carte:hover{
    border-color: #b5cf43;
    transform: translateY(-3px);
}

.machine-carte-photo{
    position: relative;
    /* Rapport 4/3, celui de la conversion « liste » en 520x390 : la hauteur est
       donc deduite de la largeur de la colonne et non figee. Une carte plus
       large ne recadre pas la photo, elle l affiche plus grande. */
    aspect-ratio: 4 / 3;
    background: #f1f1ef;
    overflow: hidden;
}
/* Repli pour les navigateurs sans aspect-ratio : une hauteur fixe vaut mieux
   qu une image effondree. Le rapport reste celui de la conversion. */
@supports not (aspect-ratio: 4 / 3){
    .machine-carte-photo{
        height: 255px;
    }
}
.machine-carte-photo img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* L etat, pose sur la photo. Affiche pour les seules machines vendues : sur une
   page qui ne montre que du materiel a vendre, etiqueter « Disponible » chaque
   annonce n aurait rien appris a personne. */
.machine-etat{
    position: absolute;
    top: 14px;
    left: 0;
    background: #4b4a4b;
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 14px;
}

/* Une annonce vendue est attenuee, mais reste lisible et cliquable : elle
   montre l activite de l entreprise, et repond au visiteur qui rouvre un lien
   recu il y a quelques semaines. */
.machine-carte.vendue .machine-carte-photo img{
    filter: grayscale(1);
    opacity: 0.75;
}

.machine-carte-corps{
    padding: 20px 22px 24px;
    /* Prend toute la hauteur restante de la carte, pour que le margin-top:auto
       du prix ait de la place a consommer. */
    flex: 1;
    display: flex;
    flex-direction: column;
}
.machine-carte-titre{
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 12px;
}

.machine-carte-carac{
    list-style: none;
    flex: 0 0 auto;
    margin: 0 0 16px;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
}
.machine-carte-carac li{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid #f1f1ef;
}
.machine-carte-carac li:last-child{
    border-bottom: none;
}
/* Le libelle de la caracteristique, attenue : c est la valeur qu on lit. */
.machine-carte-carac span{
    color: #8a8a88;
}

.machine-carte-prix{
    /* Contre le bas de la carte, donc a la MEME ordonnee sur toute une ligne,
       qu une annonce porte trois caracteristiques ou une seule, et que sa
       designation tienne sur une ligne ou deux. */
    margin-top: auto;
    padding-top: 4px;
    font-size: 22px;
    font-weight: 700;
    color: #5e7314;
}
/* Le vert de marque #b5cf43 sur du blanc ne fait que 1,75:1. Le prix, qui est
   l information la plus lue de la carte, prend donc sa declinaison foncee,
   #5e7314, a 5,33:1. Meme regle que dans l espace client. */
.machine-carte.vendue .machine-carte-prix{
    color: #8a8a88;
    text-decoration: line-through;
}

/* ---------- aucune annonce en ligne ---------- */

.machines-vide{
    max-width: 640px;
    margin: 0 auto;
    padding: 50px 40px;
    background: #f1f1ef;
    text-align: center;
}
.machines-vide-titre{
    font-size: 24px;
    font-weight: 300;
    text-transform: uppercase;
    color: #5e7314;
    margin-bottom: 14px;
}
.machines-vide p{
    font-size: 15px;
    line-height: 24px;
    margin: 0 0 26px;
}

/* ---------- le bouton, reprise de la pastille verte des certificats ---------- */

.machines-bouton{
    display: inline-block;
    background: #b5cf43;
    color: #FFF;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 26px;
    transition: all 0.4s;
}
.machines-bouton:hover{
    background: #FFF;
    color: #b5cf43;
    box-shadow: inset 0 0 0 1px #b5cf43;
}

/* ======================================================================
 * FICHE D UNE MACHINE
 * ====================================================================== */

.machine{
    padding-bottom: 160px;
}

/* Bandeau des annonces masquees, visible du seul administrateur connecte.
   Volontairement voyant : cette page laisserait autrement croire que l annonce
   est en ligne. */
.machine-bandeau{
    background: #b3261e;
    color: #FFF;
    padding: 14px 20px;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 30px;
}

.machine-retour{
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #5e7314;
    margin-bottom: 18px;
}
.machine-retour:hover{
    color: #4b4a4b;
}

.machine-titre{
    font-size: 34px;
    font-weight: 300;
    line-height: 1.2;
    margin: 0 0 34px;
    text-transform: uppercase;
}

/* Deux colonnes : la galerie, et le resume qui porte le prix et l appel a
   contact. La colonne de droite est figee a 340 pixels, la galerie prend le
   reste : c est la photo qui doit profiter de la largeur disponible. */
.machine-haut{
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
    margin-bottom: 50px;
}

/* ---------- galerie ---------- */

/* Un seul conteneur pour toutes les photos, la premiere en grand et les
   suivantes en vignettes, par le CSS seul. C est ce qui permet a lightGallery
   de s initialiser sur le conteneur en une ligne, comme pour #galerie, et de
   fournir le zoom, le balayage tactile et les fleches sans ecrire de
   diaporama. */
.machine-galerie{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.machine-galerie > a:first-child{
    grid-column: 1 / -1;
    margin-bottom: 4px;
}

.machine-photo{
    position: relative;
    display: block;
    background: #f1f1ef;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
@supports not (aspect-ratio: 4 / 3){
    .machine-galerie > a:first-child{
        height: 540px;
    }
    .machine-photo{
        height: 96px;
    }
}
/* Les VIGNETTES sont recadrees : elles ne servent qu a naviguer, et des
   vignettes de hauteurs differentes feraient une rangee en dents de scie. */
.machine-photo img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* La GRANDE photo, elle, n est jamais rognee.
   Le cadre reste en 4/3 pour que la colonne de droite ne se decale pas d une
   machine a l autre, mais la photo s y inscrit entiere, avec deux bandes
   grises si son format differe. Les photos arrivent du telephone de celui qui
   est devant la machine : il y aura du 16/9, du portrait et du panoramique, et
   un recadrage en 4/3 couperait la fleche d une pelle ou la benne d un camion.
   Montrer la machine entiere sur fond gris vaut mieux que remplir le cadre
   avec un morceau de machine. */
.machine-galerie > a:first-child img{
    object-fit: contain;
}

/* La loupe n apparait qu au survol de la grande photo. Sur une vignette, elle
   couvrirait l image qu elle est censee annoncer. */
.machine-photo-loupe{
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(75, 74, 75, 0.45);
    color: #FFF;
    font-size: 26px;
}
.machine-galerie > a:first-child:hover .machine-photo-loupe{
    display: flex;
}

.machine-photo-absente{
    background: #f1f1ef;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
}
.machine-photo-absente img{
    width: 120px;
    opacity: 0.5;
}

/* ---------- resume ---------- */

.machine-resume{
    border: 1px solid #e4e4e2;
}

.machine-prix{
    background: #5e7314;
    color: #FFF;
    font-size: 27px;
    font-weight: 700;
    padding: 20px 24px;
    text-align: center;
}
/* Aplat vert fonce et texte blanc : 5,33:1. Le vert vif #b5cf43 ne porte pas de
   texte blanc, 1,75:1. */
.machine-prix.vendue{
    background: #4b4a4b;
    text-decoration: line-through;
}

.machine-etat-ligne{
    background: #4b4a4b;
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: 7px;
}

.machine-carac{
    margin: 0;
    padding: 20px 24px;
    font-size: 14px;
    line-height: 20px;
    /* dt et dd sur une meme ligne, le libelle a gauche et la valeur a droite,
       sans avoir a les envelopper deux par deux dans un div : la grille les
       aligne d elle-meme en deux colonnes. */
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 16px;
}
.machine-carac dt{
    color: #8a8a88;
    font-weight: 400;
    padding: 6px 0;
    border-bottom: 1px solid #f1f1ef;
}
.machine-carac dd{
    margin: 0;
    font-weight: 700;
    text-align: right;
    padding: 6px 0;
    border-bottom: 1px solid #f1f1ef;
}
.machine-carac dt:last-of-type,
.machine-carac dd:last-of-type{
    border-bottom: none;
}

.machine-contact{
    border-top: 1px solid #e4e4e2;
    padding: 22px 24px 26px;
}
.machine-contact-titre{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}
.machine-contact p{
    font-size: 14px;
    line-height: 21px;
    margin: 0 0 18px;
}

.machine-tel{
    display: block;
    font-size: 23px;
    font-weight: 700;
    color: #5e7314;
    margin-bottom: 16px;
}
.machine-tel:hover{
    color: #4b4a4b;
}

.machine-contact .machines-bouton{
    display: block;
    text-align: center;
}

/* ---------- description ---------- */

.machine-description{
    max-width: 820px;
    font-size: 15px;
    line-height: 25px;
    margin-bottom: 70px;
}

/* ---------- autres annonces ---------- */

.machines-autres{
    border-top: 1px solid #e4e4e2;
    padding-top: 50px;
}
.machines-autres-titre{
    font-size: 26px;
    font-weight: 300;
    text-transform: uppercase;
    margin: 0 0 32px;
}

/* ======================================================================
 * LE RAPPEL DU HORS TAXES, SOUS LE PRIX TTC
 *
 * Le site affiche le TTC en grand, suivi de sa mention : c est ce qu impose
 * l article L112-1 du Code de la consommation des lors que la page est
 * accessible au grand public, ce qui est le cas ici, ce site n ayant pas
 * d espace reserve aux professionnels.
 *
 * Le HT est rappele en dessous, en petit. La loi ne l exige pas — le TTC et sa
 * mention suffisent — mais ces annonces s adressent aussi a des
 * professionnels, qui raisonnent en hors taxes, et leur faire refaire la
 * division de tete serait une facon de les perdre.
 *
 * La hierarchie doit rester nette : si les deux montants se lisaient avec le
 * meme poids, on retomberait sur l ambiguite que tout ceci corrige.
 * ====================================================================== */

.machine-carte-prix-ht,
.machine-prix-ht{
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 2px;
}

/* Sur la carte, le TTC est en vert fonce : le HT prend le gris attenue des
   libelles de caracteristiques, deja utilise juste au-dessus. */
.machine-carte-prix-ht{
    color: #8a8a88;
}

/* Dans le bloc de la fiche, le TTC est blanc sur aplat vert fonce. Le HT y est
   blanc lui aussi, simplement moins appuye : un gris sur cet aplat tomberait
   sous le seuil de lisibilite. */
.machine-prix-ht{
    color: #FFF;
    opacity: 0.82;
    font-size: 14px;
}

/* Une annonce vendue barre son prix. Le barre ne doit PAS courir sur le rappel
   du hors taxes : text-decoration se transmet aux descendants et ne peut pas
   s annuler par un simple none sur l enfant, d ou le passage en bloc et la
   redeclaration explicite. */
.machine-carte.vendue .machine-carte-prix-ht,
.machine-prix.vendue .machine-prix-ht{
    text-decoration: line-through;
}