version smartphone home

web/themes/custom/popsu/css/styles.css

@@ -1206,6 +1206,9 @@ iframe {
 .slick-arrow {
   font-size: 0;
   background: center/40% no-repeat url(../images/fleche.svg); }
+  @media print, screen and (max-width: 39.99875em) {
+    .slick-arrow {
+      background: center/100% no-repeat url(../images/fleche.svg); } }
 
 .slick-prev {
   -moz-transform: rotate(180deg);
@@ -1806,9 +1809,14 @@ footer {
     .header_container header.active {
       opacity: 1;
       font-size: 4rem; }
+    @media print, screen and (max-width: 39.99875em) {
+      .header_container header {
+        font-size: 2rem; }
+        .header_container header.active {
+          font-size: 2.8rem; } }
   @media print, screen and (max-width: 39.99875em) {
     .header_container {
-      grid-template-columns: repeat(2, 1fr); }
+      grid-template-columns: repeat(2, minmax(0, 1fr)); }
       .header_container header[data-dom="programmes-block_4"] {
         display: none; } }
 

web/themes/custom/popsu/partials/header.html.twig

@@ -1,6 +1,6 @@
 <header role="banner" class="columns small-12">
     <section id="header-top" class="row align-middle">
-      <div id="header-top-left" class="columns small-4">
+      <div id="header-top-left" class="columns medium-4 small-3">
         {{ page.header_top_left }}
       </div>
       <div id="header-top-middle" class="columns small-7">

web/themes/custom/popsu/sass/pages/_home.scss

@@ -345,6 +345,7 @@
 		text-align: center;
 		font-family: 'duke';
 		font-size: 3.1rem;
+		
 		line-height: 1;
 		opacity: .3; 
 		cursor: pointer;
@@ -359,9 +360,15 @@
 			opacity: 1;
 			font-size: 4rem;
 		}
+		@include breakpoint(small down) {
+			font-size: 2rem;
+			&.active{
+				font-size: 2.8rem;
+			}
+		}
 	}
 	@include breakpoint(small down) {
-		grid-template-columns: repeat(2, 1fr);
+		grid-template-columns: repeat(2, minmax(0, 1fr));
 		header[data-dom="programmes-block_4"]{
 			display:none;
 		}

web/themes/custom/popsu/sass/setup/_globals.scss

@@ -104,7 +104,11 @@ iframe{
 
 .slick-arrow{
 	font-size: 0;
-	background: center / 40% no-repeat url(../images/fleche.svg);;
+	background: center / 40% no-repeat url(../images/fleche.svg);
+	@include breakpoint(small down) {
+		background: center / 100% no-repeat url(../images/fleche.svg);
+	}
+
 }
 .slick-prev{
 	-moz-transform: rotate(180deg);