@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
}

:root {
  --primary-color: #00a4a3;
  --secondary-color: #8b4694;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  color: #1b1b1b;
  background-color: #000000;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

h1, h2, h3 {
    letter-spacing: 0.1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

section.bloc a.button{
    color:var(--primary-color);
    font-weight: bold;
}

a.button {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    border: 1px solid white;
    border-radius: 0.5rem;
    color: white;
    background: rgba(255, 255, 255, 0.117);
    transition: all 0.25s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

a.button:hover {
    background: white;
    color: var(--primary-color);
    
}

nav {
    padding:1rem 1rem;
    background: linear-gradient(
        to right,
        var(--primary-color),
        var(--secondary-color)
    );
    border-bottom:1px solid rgba(255, 255, 255, 0.25);
}

nav ul {
    display:flex;
    gap:0.2rem 1.5rem;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-weight: 700;
    color:white;
    flex-wrap: wrap;
}

nav ul li a {
    position: relative;
    color: white;
    text-decoration: none;
    padding-bottom: 4px;
}

/* ligne */
nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: white;

    transform: scaleX(0);
    transform-origin: center; /* ← clé ici */
    transition: transform 0.2s ease;
}

/* hover */
nav ul li a:hover::after {
    transform: scaleX(1);
}

header{
    position: relative;
    z-index:20;
    background: linear-gradient(
        to right,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    text-align: center;
    padding:3rem;
    
}

header h1{
    padding:0;
    font-size:2.8rem;
    text-transform: uppercase;
    line-height:3.3rem;
}

header h2{
    font-size:1.5rem;
    line-height: 1.8rem;
    padding-top:1rem;
} 

header h1, header h2, header p{
    max-width: 70rem;
    margin:auto;
}

header img{
    width:25rem;
    height:auto;
    margin:auto;
    padding-bottom:0.5rem;
}


section.slideshow {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    color: white;
    padding: 1.5rem;
    overflow: hidden;
}

section.slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 40px 60px rgba(0, 0, 0, 0.25),
    inset 0 -40px 60px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

section.slideshow img.background{
    position: absolute;
    width: 100%;
    height: 120%;
    object-fit: cover;
    z-index: 0;
    will-change: opacity;
}

section.slideshow .content {
    position: relative;
    z-index: 2;
    max-width: 35rem;
    padding:2rem;
    background: linear-gradient(
        to right,
        var(--primary-color),
        var(--secondary-color)
    );
    border-radius: 1rem;
    will-change: transform, opacity;
}

section.slideshow .content h1,
section.bloc h1{
    font-size:3.5rem;
    padding-bottom:1rem;
}

section.slideshow .content h2,
section.bloc h2{
    font-size:2.5rem;
    line-height:2.8rem;
    padding-bottom:1rem;
}

section.slideshow .content p,
section.slideshow .content li,
section.bloc .content p,
section.bloc .content li{
    font-size:1.1rem;
    line-height: 1.4rem;
    padding-bottom:0.8rem;
    text-wrap: balance;
}

p.citation{
    font-weight:bold;
    padding-bottom:1.2rem;
}

section.bloc {
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        to right,
        var(--primary-color),
        var(--secondary-color)
    );

    color: black;
    padding: 1.5rem;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 35rem));
    gap:2rem;
    justify-content: center;
}

section.bloc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/vague.svg") no-repeat bottom center;
    background-size: cover;
    pointer-events: none;    
}

section.bloc h2{
    color: var(--primary-color)
}

section.bloc p.citation{
    color: var(--primary-color);
}

section.bloc .content{
    position: relative;
    z-index: 2;
    padding:2rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1rem;
    will-change: transform, opacity;
}

/* ------ cas particuliers ------ */

section.bloc.tools .method{
    grid-column: 1/4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:0rem 2rem;
}

section.bloc.tools .method h2{
    grid-column: 1/4;
    text-align:center;
} 

section.bloc.tools .outils{
    grid-column: 1/4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:0 2rem;
}

section.bloc.tools .outils>h2,
section.bloc.tools .outils>p{
    grid-column: 1/4;
    text-align:center;
} 

section.bloc.tools .outils>.content h2{
    font-size:1.6rem;
    line-height:1.9rem;
}

section.bloc.tools .outils>p{
    font-size:1.5rem;
    line-height:1.8rem;
    padding-bottom:2rem;
}

section.bloc.tools .PNL{
    grid-column: 1/2;
}

section.bloc.tools .hypnose{
    grid-column: 2/3;
}

section.bloc.tools .enneagramme{
    grid-column: 3/4;
}

section.bloc.tools .cadre{
    grid-column: 2/3;
}


section.bloc.propos {
    grid-template-columns: repeat(2, minmax(0, 35rem));
}

section.bloc.contacts {
    grid-template-columns: repeat(6, minmax(0, 17rem));
}

section.bloc.contacts .rdv_contacts {
    grid-column: 1/4;
    text-align: center;
}

section.bloc.contacts .me {
    grid-column: 4/7;
    text-align: center;
}

section.bloc.contacts .places{
    grid-column: 1/7;
    display: grid;
    grid-template-columns: minmax(0, 35rem) 1fr;
    gap:0 2rem;
}

section.bloc.contacts .places iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

section.bloc.contacts .modalite{
    grid-column: 1/3;
    text-align: center;
}

section.bloc.contacts .actu{
    grid-column: 3/5;
    text-align: center;
}

section.bloc.contacts .plus{
    grid-column: 5/7;
    text-align: center;
}

section.bloc.contacts .bas{
    grid-column: 2/6;
    text-align: center;
}

/* ---------- */

p.links{
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding-top:1rem;
}

section.testimonials{
    color:white;
    text-align:center;
    background: linear-gradient(
        to right,
        var(--primary-color),
        var(--secondary-color)
    );
    padding:2rem;
}

section.testimonials .chapo{
    font-weight: 700;
    padding-bottom:2rem;
}

section.testimonials .columns{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:2rem;
    max-width:100rem;
    margin:auto;
}

section.testimonials .testimonial{
    background-color:rgba(255, 255, 255, 0.7);
    padding:2rem;
    margin-bottom:2rem;
    text-align: left;
    color:var(--secondary-color);
    border-radius: 0.5rem;
}

section.testimonials .testimonial p{
    font-size:1rem;
    line-height:1.3rem;
    padding-bottom:1rem;
}

section.testimonials .testimonial p.author{
    color:var(--primary-color);
    padding-bottom: 0;
}

footer{
    height:auto;
    padding:2rem 2rem 10rem 2rem;
    color:white;
}

footer h3{
    font-size:1.2rem;
    text-align: center;
    padding-bottom:2rem;
}

footer div.colonnes{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    padding:2rem;
    max-width:100rem;
    margin:auto;
}


footer img{
    width:10rem;
}

footer div.logo{
    margin:auto;
    max-width:20rem;
    text-align: center;
}

footer div.logo img{
margin:auto;
padding-bottom:0.5rem;
}

footer div.logo p{
    text-transform: uppercase;
    font-weight:700;
    letter-spacing: 0.1rem;
    line-height:1.2rem;
}

footer p{
    font-size:1rem;
    line-height: 1.3rem;
    padding-bottom:1rem;
}

footer p.contacts a{
    display:flex;
    gap:1rem;
}

footer img.icon{
    width:1rem;
}

div.rdv {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 40;

    background: linear-gradient(
        to right,
        var(--primary-color),
        var(--secondary-color)
    );

    color: white;
    padding: 2rem;
    font-size:1.3rem;
    font-weight: 700;
    display:flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;

    box-shadow: 0 -20px 20px rgba(0, 0, 0, 0.5);

}



section.outils {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:2rem;
}

section.outils>.content {
    grid-column: 1/4;
    max-width:auto;
}




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

header h1{
    font-size: 1.6rem;
    line-height: 2.1rem;
}

header h2{
    font-size:1.2rem;
    line-height: 1.5rem;
} 

section.slideshow .content h2{
    font-size:1.8rem;
}

section.testimonials .columns{
    display: block;
}

footer div.colonnes{
    display:block;
}

div.rdv {
    padding: 1rem;
    font-size:1rem;
    line-height:1.3rem;
}

section.bloc,
section.bloc.tools .method,
section.bloc.tools .outils,
section.bloc.contacts .places {
    display:block;
}

}