/* Retouches propres a Jean-Daniel Grob Architecte. */

/* Les libelles francais sont plus longs que les anglais d'origine : sans cela
   << En savoir plus >> se coupe en deux au milieu du bouton. */
.sqs-block-button-element,
.list-item-content__button,
.list-section-button{white-space:nowrap;}

/* Le theme inversait le logo blanc sur les pages claires : l'orange devenait
   bleu. Le logo d'en-tete est desormais monochrome, l'inversion donne donc un
   logo noir correct ; on garde la regle du theme. */

/* Le pied de page affiche courriel et telephone : qu'ils restent lisibles. */
footer a[href^="mailto:"],footer a[href^="tel:"]{text-decoration:underline;}

/* Les vignettes nommaient des projets, dont le titre n'apparaissait qu'au
   survol. Elles nomment maintenant des domaines d'intervention : le libelle
   doit se lire tout de suite (et sur un telephone, il n'y a pas de survol).
   La regle du theme (.tweak-...-after-hover ...) est plus specifique : il faut
   donc !important pour la contrer. */
.portfolio-grid-overlay .grid-item .portfolio-text{opacity:1!important;}
.portfolio-grid-overlay .grid-item .portfolio-overlay{
  opacity:1!important;background:linear-gradient(to bottom,
  rgba(0,0,0,0) 35%, rgba(0,0,0,.62) 100%)!important;}
.portfolio-grid-overlay .grid-item:hover .portfolio-overlay{
  background:linear-gradient(to bottom,rgba(0,0,0,.15) 0%, rgba(0,0,0,.72) 100%)!important;}
.portfolio-grid-overlay .grid-item .portfolio-text{
  justify-content:flex-end!important;padding-bottom:7%!important;}
.portfolio-grid-overlay .grid-item .portfolio-title{
  color:#fff!important;text-shadow:0 1px 12px rgba(0,0,0,.6);}

/* Le gabarit reservait une seule ligne de grille au nom du fondateur ; avec un
   nom un peu plus long, le titre debordait sur le sous-titre. On reduit ce seul
   titre pour qu'il tienne sur une ligne. */
.fe-block-yui_3_17_2_1_1714411359620_7610 h2{font-size:clamp(1.5rem,2vw,2.1rem);line-height:1.1;}

/* Page contact, affichage mobile. Le gabarit d'origine posait la carte Google
   par-dessus le titre (z-index 7 contre 5) et mettait l'adresse et le bouton
   cote a cote sur 492 px de large : les deux se chevauchaient. On redonne a la
   colonne un ordre simple : titre, sous-titre, texte, coordonnees, bouton,
   puis les deux photos. */
@media (max-width: 767px){
  .fe-block-yui_3_17_2_1_1716906353530_260576{grid-area:2/2/4/10!important;z-index:5!important;}
  .fe-block-yui_3_17_2_1_1716906353530_262555{grid-area:4/2/5/10!important;z-index:5!important;}
  .fe-block-2eb02803b95ff95d95ae{grid-area:5/2/10/10!important;z-index:5!important;}
  .fe-block-yui_3_17_2_1_1716854593025_29220{grid-area:10/2/13/10!important;z-index:5!important;}
  .fe-block-yui_3_17_2_1_1716854593025_41641{grid-area:13/2/15/10!important;z-index:5!important;}
  .fe-block-929e58312c409884d5b0{grid-area:16/2/21/10!important;z-index:1!important;}
  .fe-block-yui_3_17_2_1_1716854593025_24016{grid-area:22/2/30/10!important;z-index:1!important;}
  /* une image << content-fill >> prend exactement la hauteur de sa case :
     sans plancher, cinq rangees de 24 px donnent une bande de 120 px. */
  .fe-block-929e58312c409884d5b0,
  .fe-block-yui_3_17_2_1_1716854593025_24016{min-height:300px;}
}

/* Meme chose sur l'accueil : la photo de la derniere section est en
   << content-fill >> et se reduisait a un bandeau sur telephone. */
@media (max-width: 767px){
  .fe-block-e449f4dc40c18de4c526{min-height:320px!important;}
  .fe-block-e449f4dc40c18de4c526 .sqs-block,
  .fe-block-e449f4dc40c18de4c526 .sqs-block-content,
  .fe-block-e449f4dc40c18de4c526 .fluid-image-animation-wrapper,
  .fe-block-e449f4dc40c18de4c526 .fluid-image-container,
  .fe-block-e449f4dc40c18de4c526 .js-content-mode-element-wrapper,
  .fe-block-e449f4dc40c18de4c526 .sqs-block-image-link{height:100%!important;}
  .fe-block-e449f4dc40c18de4c526 img{height:100%!important;width:100%!important;
    object-fit:cover!important;}
  /* l'image est en position absolue dans son conteneur : sans hauteur
     explicite sur le conteneur, elle se reduit a un bandeau. */
  .fe-block-e449f4dc40c18de4c526 .fluid-image-container{height:320px!important;}
}