:root {
    --couleur-primaire: rgb(44 31 31);
    /* #2C1F1F */
    --couleur-primaire-transparante: rgba(44, 31, 31, 0.1);
    --couleur-primaire-demi-transparante: rgba(44, 31, 31, 0.4);
    --couleur-secondaire: rgb(231 225 225);
    /* #E7E1E1 */
    --couleur-accent: rgb(193 39 45);
    /* #C1272D */
    --normal-font-family: KoHo;

    --space-xs: 0.5rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 3rem;
    --space-xxl: 5rem;
}

body {
    font-family: var(--normal-font-family);
    color: var(--couleur-primaire);
    background-color: var(--couleur-secondaire);
    background-image: url(../Images/bg-apropos.png);
    background-size: cover;
    background-position: bottom right;
    margin: 0;

}

.body-nos-ateliers,
.body-confirmation {
    background-image: none;

}

.container {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

header {
    background-color: var(--couleur-primaire);
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-m) 0;
    
    & .top-nav__logo {
        height: 7rem;
    }

    & .top-nav__icon {
        height: 1rem;
        padding-right: 0.2rem;
    }

    & .top-nav__lien {
        color: var(--couleur-secondaire);
        text-decoration: none;
        padding-left: var(--space-l);
        transition: 0.3s;
    }

    & .top-nav__lien:hover {
        color: var(--couleur-accent);
    }

    & [aria-current="page"] {
        text-decoration: underline;
        text-underline-offset: 0.3rem;
    }
}

.hero {
    background-image: url(../Images/bg-banniere.png);
    background-size: cover;
    background-position: center;
    background-color: var(--couleur-primaire-demi-transparante); /*pour augmenter le contrast*/
    background-blend-mode: multiply;
    height: 50rem;
    color: var(--couleur-secondaire);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;

    & .hero__h1 {
        font-size: 4rem;
        margin: 0;
        line-height: 4rem;
    }

    & .hero__p {
        font-size: 1.2rem;
        font-weight: 300;
        max-width: 30rem;
        margin-bottom: 3.5rem;
    }

    & .hero__form {
        display: flex;
        flex-direction: column;
        margin-bottom: var(--space-xl);
    }

    & .hero__select {
        padding: var(--space-xs) var(--space-l);
        border: none;
        background-color: var(--couleur-secondaire);
        margin-bottom: var(--space-s);
    }

    & .hero__select:hover,
    .hero__select:focus {
        outline: 0.15rem solid var(--couleur-accent);
    }
}

.btn-action {
    border-radius: 2rem;
    border: none;
    color: var(--couleur-secondaire);
    text-decoration: none;
    font-size: 1.2rem;
    background: var(--couleur-primaire);
    transition: background-color 0.3s ease;
    padding: 0.4rem 2.5rem;
    /* box-sizing: border-box; -pour que le bouton rentre dans le grid, ne fonctionne pas*/

    &:hover{
        background-color: var(--couleur-accent);
    }

} 

.btn-action--accent {
    border: 0.15rem solid var(--couleur-accent);
}

.btn-action--rouge {
    background-color: var(--couleur-accent);

    &:hover {
        background-color: var(--couleur-primaire);
    }
}

.apropos {
    margin-top: 6rem;
    margin-bottom: 10rem;

    & .apropos__titre {
        font-size: 3rem;
        text-align: center;
    }

    & .apropos__contenu {
        display: grid;
        grid-template-columns: 50% 15% 35%;
        grid-template-rows: auto auto auto auto;
        gap: var(--space-l);
        align-items: start;
    }

    & .apropos__image {
        grid-area: 1/1/5/2;
        /* lignes de la grid : <row-start> / <column-start> / <row-end> / <column-end>*/
        object-fit: cover;
        width: 80%;
        justify-self: end;
    }

    & .apropos__paragraphe {
        grid-area: 1/2/2/4;
        max-width: 80%;
        font-size: 1.3rem;
        margin-top: 0;
    }

    & .apropos__paragraphe--italic {
        grid-area: 2/2/3/4;
        font-style: italic;
        font-weight: 500;
    }

    & .apropos__stat {
        grid-area: 3/2/4/3;
    }

    & .apropos__chiffre {
        display: inline-block;
        font-size: 3.5rem;
        font-weight: 500;
        color: var(--couleur-accent);
        margin: 0;
    }

    & .apropos__stat-lable {
        font-size: 1.1rem;
        margin: 0;
    }

    & .apropos__stat--droite {
        grid-area: 3/3/4/4;
    }

    & .apropos__button {
        grid-area: 4/2/5/4;
        /*align-self: end;*/
    }

    @media screen and (max-width: 1200px) {
        & .apropos__image {
            width: 100%;
        }
    }

    @media screen and (max-width: 900px) {
        & .apropos__paragraphe {
            font-size: 115%;
        }
    }

    @media screen and (max-width: 780px) {

        & .apropos__image {
            display: none;
        }

        & .apropos__paragraphe {
            width: 100%;
        }

        & .apropos__contenu {
            grid-template-columns: 1fr 1fr;
            justify-items: center;
        }

        & .apropos__paragraphe {
            grid-area: 1/1/2/3;
        }

        & .apropos__paragraphe--italic {
            grid-area: 2/1/3/3;
        }

        & .apropos__stat {
            grid-area: 3/1/4/2;
        }

        & .apropos__stat--droite {
            grid-area: 3/2/4/3;
        }

        & .apropos__button {
            grid-area: 4/1/5/3;
        }
    }
}


.footer__logo {
    display: block;
    height: 8rem;
    /* justify-self: center; - fonction seulement pour element de grid */
    margin: var(--space-xl) auto;
}

.footer__nav,
.footer__info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--space-l);
    list-style-type: none;
    margin-bottom: var(--space-xl);
}

.footer__nav-item {
    color: var(--couleur-primaire);
    font-weight: 400;
    text-align: center;
}

.footer__nav-item:hover {
    color: var(--couleur-accent)
}

.footer__info {
    display: grid;
    grid-template-columns: 3.6fr 1fr 3.6fr;
    gap: var(--space-xs);
    justify-items: center;
    align-items: center;
    margin: var(--space-m) auto;
    border-top: 1px solid var(--couleur-primaire);
}

.footer__text {
    display: inline-block;
    margin-left: var(--space-s);
}

.footer__text--right {
    justify-self: end;
}

.footer__text--left {
    justify-self: start;
}

.footer__icon {
    height: 1.1rem;
    padding: 0 .2rem;
}

address {
    font-style: normal;
}

@media screen and (max-width: 900px) {
    .footer__info {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }

    .footer__text--right,
    .footer__text--left {
        justify-self: center;
    }
}

@media screen and (max-width: 780px) {
    .footer__nav {
        flex-direction: column;
        align-items: center;
        padding: 0;
    }
}

.titre {
    margin-top: var(--space-l);

    & .titre__nom {
        display: inline-block;
        text-transform: uppercase;
    }

    & .titre__icon {
        height: 1.5rem;
    }
}

.titre--centre {
    text-align: center;
}

.ateliers {
    display: grid;
    grid-template-columns: 1fr 5px 1fr;
    grid-template-rows: auto 1fr 1fr auto;
    column-gap: var(--space-s);
    row-gap: var(--space-l);
    margin-bottom: 10rem;

    & .ateliers__intro {
        margin-top: 0;
        grid-area: 1/3/2/4;
        line-height: 1.6;
        font-size: 1.3rem;
    }

    & .ateliers__intro--accent {
        color: var(--couleur-accent);
        font-weight: bold;
    }

    & .ateliers__dotted-line {
        grid-area: 1/2/5/3;
        /* border-left: 4px dotted var(--couleur-accent); */
        background: radial-gradient(circle, var(--couleur-accent) 2px, transparent 2px);
        background-size: 4px 14px;
        /* 4px wide, 14px tall → 2px dot + 12px space */
        background-repeat: repeat-y;
        /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        background-position: 0 0;
        animation: BougeDots 3s linear 1s infinite;
    }

    & .ateliers__button {
        grid-area: 4/3/5/4;
    }

    & :nth-child(1 of .ateliers__card) {
        grid-area: 2/1/3/2;
    }

    & :nth-child(2 of .ateliers__card) {
        grid-area: 2/3/3/4;
    }

    & :nth-child(3 of .ateliers__card) {
        grid-area: 3/1/4/2;
    }

    & :nth-child(4 of .ateliers__card) {
        grid-area: 3/3/4/4;
    }

    & .ateliers__card {
        display: flex;
        background-color: var(--couleur-primaire-transparante);
        border-radius: 1.5rem;
        padding: var(--space-s);
        transition: background-color 0.5s linear;
        &:hover{
            background-color: var(--couleur-secondaire);
            border: 1px solid var(--couleur-primaire)
        }
    }

    & .ateliers__img {
        width: 50%;
        object-fit: cover;
        border-radius: 1rem;
        margin-left: var(--space-s);
    }

    & .ateliers__img--left {
        margin-left: 0;
        margin-right: var(--space-s);
    }

    & .ateliers__description {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    & .ateliers__prix {
        font-size: 2rem;
        font-weight: 600;
        color: var(--couleur-primaire-demi-transparante)
    }

    & .ateliers__unite {
        font-size: 1rem;
    }

    @media screen and (max-width: 1200px) {
        & .ateliers__card {
            flex-direction: column;
        }

        & .ateliers__img {
            width: 100%;
            margin: 0;
        }

        & :nth-child(3 of .ateliers__card), 
        :nth-child(4 of .ateliers__card) {
            flex-direction: column-reverse;
        }
    }

    @media screen and (max-width: 780px) {
        grid-template-columns: 5px 1fr;

        & .ateliers__intro {
            grid-area: 1/2/2/3;
        }

        & .ateliers__dotted-line {
            grid-area: 1/1/7/2;
        }

        & .ateliers__button {
            grid-area: 6/2/7/3;
        }

        & :nth-child(1 of .ateliers__card) {
            grid-area: 2/2/3/3;
        }

        & :nth-child(2 of .ateliers__card) {
            grid-area: 3/2/4/3;
        }

        & :nth-child(3 of .ateliers__card) {
            grid-area: 4/2/5/3;
        }

        & :nth-child(4 of .ateliers__card) {
            grid-area: 5/2/6/3;
        }

    }
}

@keyframes BougeDots {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 0 14px;
    }
  }


.section-temoignages {
    background-image: url(../Images/BG-temoignages.png);
    background-size: cover;
    background-position: bottom right;
    padding: var(--space-s) 0 var(--space-xl) 0;
    margin: var(--space-xxl) 0;
}

.temoignages {
    display: flex;
    justify-content: center;
    gap: var(--space-l);
    margin: var(--space-s) auto var(--space-l) auto;
    flex-wrap: wrap;

    & .temoignages__card {
        width: 240px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: var(--couleur-secondaire);
        padding: var(--space-m) var(--space-l) var(--space-xs) var(--space-l);
        border-radius: 5rem 5rem 0.5rem 5rem;
        box-shadow: 0px 0px 20px var(--couleur-primaire-transparante);
        box-sizing: border-box;
        &:hover{
            transform: scale(1.08);
            transition: transform 0.3s ease-in-out;
        }
    }

    & .temoignages__signature {
        text-align: right;
    }

    & .temoignages__card--img {
        border-radius: 4rem 0.5rem 4rem 4rem;
        background-image: url(../Images/photo-temoignages.png);
        box-shadow: 0px 0px 20px var(--couleur-primaire-demi-transparante);
        background-size: 180%;
        background-position: -.1rem 13rem; /* left, top */

    }

}

.section-form {
    display: flex;
    gap: var(--space-l);
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-xl) auto;
    width: 80%;

    & .section-form__form {
        flex: 1;
    }

    & .section-form__image {
        width: 90%;
        margin-top: -var(--space-xl);
    }

    /* & .section-form__form input:not([type="submit"]), .section-form__form  select { */
    & .section-form__champ {
        margin-bottom: 1em;
        margin-top: 0.2rem;
        width: 100%;
        padding: var(--space-xs) var(--space-s);
        border: none;
        box-sizing: border-box;
    }

    & .section-form__champ:focus {
        outline: none;
        border: solid 1px var(--couleur-primaire);
        background-color: var(--couleur-primaire-transparante);

    }

    /* .section-form__form input[type="submit"] {*/
    & .section-form__submit {
        display: flex;
        justify-content: space-between;
        margin-top: var(--space-s);
    }

    & .section-form__reset {
        border: none;
        border-radius: 1.5rem;
        color: var(--couleur-primaire);
        background-color: var(--couleur-primaire-transparante);
        padding: 0 var(--space-s);
    }

    & .section-form__reset:hover {
        background-color: var(--couleur-primaire-demi-transparante);
    }

    @media screen and (max-width: 1200px) {
        display: block;
        background-image: url(../Images/pots.png);
        background-size: contain;
        background-position: right;
        background-repeat: no-repeat;

        & .section-form__image {
            display: none;
        }

        & .section-form__champ {
            background-color: rgba(255, 255, 255, 0.5);
        }

    }
}

.confirmation__text {
    text-align: center;
    margin: var(--space-xxl) 0;
}

.confirmation__image {
    display: block;
    width: 80%;
    border-radius: 0.2rem;
    margin: 0 auto var(--space-xxl) auto;
}

.confirmation__text--lien {
    text-decoration: none;
    color: var(--couleur-primaire);
    margin-bottom: 0;
}

.confirmation__text--lien:hover {
    color: var(--couleur-accent);
}


/* Lien caché pour les liseuses. CSS provenant de https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/ */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}