/* style.css - Reset CSS minimaliste
    Place ce fichier en tête de vos feuilles de style pour homogénéiser le rendu
*/

/* Box sizing */
:root { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* Remove default spacing */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  background: transparent;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* Body defaults */
html, body { height: 100%; }
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: inherit;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: transparent;
}

/* Headings & text */
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; }

/* Lists */
ol, ul { list-style: none; }

/* Links */
a { color: inherit; text-decoration: none; }

/* Images & media */
img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }

/* Tables */
table { border-collapse: collapse; border-spacing: 0; }

/* Forms & controls */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Buttons accessible cursor */
button, [type="button"], [type="submit"] { cursor: pointer; }

/* Remove native fieldset/legend styles */
fieldset { border: none; padding: 0; margin: 0; }

/* Accessibility: visible focus for keyboard users */
:focus { outline: none; }
:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }

/* Utility defaults */
.hidden { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}



/* Custom global styles */
body{
     font-family: Montserrat, sans-serif;
}

a:hover{
    text-decoration: underline;
    color: white;
}

header{
    padding: 1% 0;
    background-color: #FFEEB7;
}

header img {
    height: 60px;
    margin: 0 2%;
}

.hero {
    background-image: url("../img/BG_Studio.png");
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* SECTION HOME */
#home {
  width: 100%;
  height: 100vh;
  background-image: url("../img/BG_Studio.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ARTICLE FLEX CONTENEUR */
.hero-content {
  display: flex;
  width: 100%;
  height: 90%;
}

/* Colonne image */
.methode {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -5%;
}

.methode img {
  max-width: 50%;
  height: auto;
}

/* Colonne Logo iasagora */
.Logo {
    display: flex;
    flex-direction: column;
    justify-content: left;
    margin-bottom: 5%;
}

.Logo img {
    max-width: 30%;
    height: auto;
}

.Logo h1{
    margin-top: -1.5%;
    font-size: 26px;
    color: #FFE073;
    text-shadow: 1px 1px 2px #7e7c7c67;
}

/* Colonne texte */
.container {
    width: 70%;
    display: flex;
    flex-direction: column;
    padding: 3% 8%;
    color: #454426;
    text-shadow: 1px 1px 2px #7e7c7c67;
    font-size: 14px;
}

.container p{
    margin: 1% 0;
}

footer{
    text-align: center;
    text-align: center;
    padding: 0.5% 0;
    background-color: #FFEEB7;
    font-size: small;
}



/* Responsive */
@media (max-width: 768px) {

    header{
        text-align: center;
    }

    .hero-content {
        flex-direction: column;
        height: 100vh;
    }
    
    .methode, .container {
        width: 100%;
        margin: 0;
    }
    
    .methode img {
        max-width: 50%;
        margin-top: 50px;
        margin-bottom: 20px;
    }

    .Logo img {
    max-width: 90%;
    height: auto;
    padding-right: 1%;
    }

    .container{
        padding: 10%;
    }

    .container p{
    margin: 3% 0;
    text-shadow: 1px 1px 2px #0000001b;
    }
}

@media (max-width: 480px) {

    .Logo h1{
        font-size: 24px;
    }

    .container{
        padding: 5%;
        font-size: 12px;
    }
}

@media  only screen and (max-width: 13in){

    .body{
        font-size: 12px;
    }

    .methode img {
        max-width: 70%;
    }

    .Logo img {
        max-width: 75%;
    }

    .Logo h1 {
    font-size: 22px;
    }
}