:root {
    scroll-behavior: smooth;
  --black-font : #333333;
  
  --bg-green : #00a89d;
  --bg-green-font : #303030;

  --bg-orange : #ff8a3d;
  --bg-orange-font : white;
  
  --bg-blue : #15314e;
  --bg-blue-font : white;
  
  --a-color-font : #666666 ;
  --a-active-color-font : #2573f9 ;
  --a-hover-color-font : var(--a-active-color-font) ;
  
  --radius : 10px;
}

@font-face {
  font-family: Tahoma;
  src: url(Tahoma.woff);
}

@font-face {
  font-family: Tahoma;
  src: url(Tahoma-Bold.woff);
  font-weight: bold;
}

@keyframes flip {
  from {transform:rotateY(-90deg);}
  to {transform:rotateY(0deg);}
}

.phone::before {
    color : var(--a-hover-color-font);
    content: "🕻 " ; 
    }
    	
.mail::before {
    color : var(--a-hover-color-font) ;
    content : "✉ " ;
    }

.geo::before {
    color : var(--a-hover-color-font) ;
    content : "\1F9ED  ";
    }

body {
    font-family: Tahoma ;
    font-size : 100% ;
    background-color : white ;
    width : 100% ;
    }
    
top_header {
    display : grid;
    grid-template-columns: 220px 220px;
    background-color : var(--bg-orange) ; 
    color : var(--bg-orange-font);
    font-size : 100% ;
    font-weight: bolder;
    padding : 5px;
}
header {
    position: sticky ;
    top: 0 ;
    z-index : 1 ;
    display : grid;
    grid-template-columns: 1fr 4fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    background-color : white ; 
    font-size : 90% ;
}

header .logo {
    padding: 5px;
    padding-bottom: 0px;
    width : 133px ;
    height : 43px ;
    margin-top : 0px ;
    margin-bottom : 0px ;
}

a {
    color : var(--a-color-font);
}
    
a.active {
    color : var(--a-active-color-font) ;
}
a:hover { 
    color : var(--a-hover-color-font);   
    text-decoration : underline ; 
}

header a {
    display: flex;
    justify-content: center;
    height : 43px ;
    font-weight: bolder;
    align-items: center;
    font-weight: 600;
    text-decoration : none ;  
}
    
div.page_header {
    background-image: linear-gradient(140deg,var(--bg-blue) 0%, transparent 100%),
                      url("/theme/img/bandeau_menu_accueil.jpg");
    background-color : var(--bg-blue);
    background-size: cover;
    }
    
div.page_header h1 {
    display: flex;
    margin-top : 0px ;
    margin-bottom : 0px ;
    padding : 20px;
    align-items: center;
    height: 400px;
    background-color : transparent ;
    justify-content: center;
    text-align: center;
    color : white ;
    text-transform: uppercase;
    font-size : 400% ;
    font-weight: bolder;
    }

div.catalog_content {
    display : grid ;
    margin: auto;
    grid-template-columns: 1fr ;
    max-width : 1080px;
    margin-top : 30px;
    padding : 30px;
    box-shadow: 6px 6px 18px 0px rgba(0,0,0,0.5);
    border-radius: var(--radius);

    summary {
        margin : 0px;
        font-size : 150%;
    }
    h2 {
        font-size : 125%;
    }
    .text_content {
        padding-inline : 1em;
        }
}

.tree_square {
    display : grid ;
    margin: auto;
    grid-template-columns: 1fr 1fr 1fr ;
    max-width : 1200px;
}

.tree_square a { text-decoration : none ;
}

.square {
    padding-top : 30px;
    padding-bottom : 22px;
    padding-right : 30px;
    padding-left : 30px;
    margin-left : auto;
    margin-right : 25px;
    box-shadow: 6px 6px 18px 0px rgba(0,0,0,0.5);
    border-radius : var(--radius);
    min-width: -moz-available;

    }


.flip {
    animation-name: flip;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;    
}

.long {
    min-height : 450px; 
    }
.hook {
    padding-top : 100px;
    padding-bottom : 80px;
    text-align: center;
    font-size: 300%;
    line-height: 1.4em;
    color : var(--black-font);
    }


.small_content {
    display : grid ;
    margin: auto;
    max-width : 1080px;
    font-size : 125%;
    color : var(--black-font);
} 
.small_content hook  {
    margin-top : 60px;
    text-align : center;
    font-size : 200%;
    line-height : 1em;
    }
.small_content h3  {
    margin-left : 100px;
    margin-bottom : 0px;
    font-weight : normal;
    }
.small_content ul  {
    margin-left : 100px;
    }

.twocol_content {
    display : grid ;
    margin: auto;
    grid-template-columns: 1fr 1fr ;
    max-width : 1080px;
    color : var(--black-font);
    font-size : 125% ;
    
    h2 {
        margin-bottom : 15px;
        font-weight : normal;
    }
    h2::before {
        content : "🗹 " ;
        color: var(--bg-orange);
    }
    ul {
        margin-top : 15px;
    }
}
        
.conseil { 
    color : var(--bg-green-font);
    background-color : var(--bg-green);
    }

.assistance {
    color : var(--bg-orange-font);
    background-color : var(--bg-orange);
    }

.formation {
    color : var(--bg-blue-font);
    background-color : var(--bg-blue);
    }
    
.big_content {
    display : grid ;
    margin: auto;
    grid-template-columns: 1fr 1fr ;
    max-width : 1080px;  
    margin-top : 100px;
    font-size : 150%;
    padding : 30px;
    box-shadow: 6px 6px 18px 0px rgba(0,0,0,0.5);
    border-radius: var(--radius);
    
    h1 {
        margin : 0px;
        font-size : 200%;  
    }
    h2 {
        margin : 0px;
        font-size : 150%;  
    }
    hook {
        text-align: center;
    }
    .text_content {
        padding-inline : 1em;
        } 
} 

img_conseil, img_assistance, img_formation {
    display : block;
    width: 100%;
    min-height: 150px;
}
img_conseil {
    content: url("/theme/img/conseil_accompagnement-300x180.jpg");
    background-color : var(--bg-green);
    border-radius: var(--radius);  
}


img_assistance {
    content: url("/theme/img/maintenance-support-300x225.jpg");
    background-color : var(--bg-green);
    border-radius: var(--radius);  
}

img_formation {
    content: url("/theme/img/formation.jpg");
    background-color : var(--bg-green);
    border-radius: var(--radius);  
}


img_address, img_telephone, img_email {
    display : block;
    margin: auto ;
}
img_address {
    display : block;
    content: url("/theme/img/adresse.png");
    }
img_telephone {
    display : block;
    content: url("/theme/img/telephone.png");
    }
img_email {
    display : block;
    content: url("/theme/img/email.png");
    }

summary {
    font-weight: bolder;
    padding-top : 20px;
    /* Remove the default triangle */
    display: block;
}

/* Create a new custom icon on the right side */
summary::after {
    margin-left : 1ch ;
    display : inline-block ;
    content : 	'\002A04' ;
    transition : 0.2s ;
    color : var(--a-color-font) ;

}

details[open] > summary::after {
  transform: rotate(90deg);
  content: 	'\002A03';
}

/* change l'aspect du resumé, et de l'icone */
summary:hover{
  color: var(--a-color-font);
  cursor: pointer;
}

summary:hover::after {
  animation-name: flip;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
}

.img_text {
    display : grid ;
    margin: auto;
    grid-template-columns: 1fr 3fr ;
    max-width : 1080px;  
    font-size : 125%;
    color : var(--black-font);
}

.portrait {
    
    img_portrait {
        display : block;
        width : 100% ;
        max-height : 300px ;
        max-width : 300px ;
        padding-top : 5px ;
        content: url("/theme/img/portrait.jpg");
    }
}
.a_propos {
    padding-left : 10px;
    text-align : justify ;
    }


/* Pour gerer le bouton pour scroller en haut de la page */
main {position: relative;} /* to place scrollbar */
section {height: 300vh;} /* so we can scroll */

footer {
    display : grid ;
    margin-top : 100px ;
    padding : 5px ;
    grid-template-columns: 1fr 1fr ;
    background-color : var(--bg-orange) ; 
    color : var(--bg-orange-font) ;
    font-size : 100% ;
    font-weight: bolder;

    a {
        font-weight: bolder;
        color : var(--a-color-font);  
    }

}


.scroll-top {
  position: absolute; /* relative to its positioned <main> parent */
  top: 120vh; /* starts below the bottom of the screen */
  bottom: 3rem; /* stops scrolling before the end */
  right: 2rem; /* offset from right hand side */
}

.scroll-top__link {
  position: -webkit-sticky; /* for Safari */
  position: sticky; /* 'relative' until element reaches... */
  top: 90vh; /* 90% viewport height from the top, when it becomes 'fixed' - until its container toggles it back to 'relative' */

  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size : 200% ;
  font-weight: bolder;
  border: none;
  outline: none;
  background-color: var(--bg-orange);
  color: var(--bg-orange-font);
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

.scroll-top__link:hover {
  background-color: var(--bg-green);
}