/* =========================
   Variables & base
   ========================= */
:root{
  --txt:#222;
  --txt-soft:#444;
  --bg:#fff;
  --bg-soft:#f5f5f5;
  --brand:#b15b7c;
  --brand-dark:#a14a6f;
  --panel:#faf8f9;
  --shadow:rgba(0,0,0,.08);
  --shadow-hover:rgba(0,0,0,.12);
  --radius:12px;

  /* Typo fluide */
  --h1: clamp(1.6rem, 2vw + 1rem, 2.4rem);
  --h2: clamp(1.25rem, 1.2vw + .9rem, 1.6rem);
  --p:  clamp(1rem, .3vw + .9rem, 1.05rem);
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--txt);
  background:var(--bg);
  line-height:1.6;
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size: var(--p);
}

h1,h2{ color:#444; line-height:1.25; margin:.2rem 0 .8rem; }
h1{ font-size:var(--h1); font-weight:700; }
h2{ font-size:var(--h2); font-weight:700; }
p{ margin:.5rem 0 1rem; }

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

/* =========================
   Layout global (mobile d’abord)
   ========================= */
header, footer{
  text-align:center;
  padding:1.5rem 1rem;
  background:var(--bg-soft);
}

main, section{ width:100%; }

ul{ list-style:none; padding:0; margin:0; }
li{ margin:.5rem 0; }

/* =========================
   Bouton
   ========================= */
.button{
  display:inline-block;
  background:var(--brand);
  color:#fff;
  padding:.85rem 1.8rem;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.2px;
  transition: background-color .25s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 2px 6px var(--shadow);
}
.button:hover,
.button:focus-visible{
  background:var(--brand-dark);
  transform:translateY(-2px);
  box-shadow:0 6px 16px var(--shadow-hover);
}
.button:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* =========================
   Intro (mobile: pile, desktop: côte à côte)
   ========================= */
#intro{
  display:flex;
  flex-direction:column;         /* Mobile */
  align-items:center;
  gap:1rem;
  padding:1.75rem 1rem;
}

.intro-img img{
  width:160px;
  border-radius:10%;
}

.intro-text{
  max-width:36rem;               /* ~576px */
  text-align:center;             /* Mobile */
}

/* =========================
   Blocs premium (CTA & Services)
   ========================= */
#cta, #services{
  text-align:center;
  margin:2rem 1rem;              /* Mobile margins */
  padding:1.75rem 1.25rem;
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:0 4px 10px var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
#cta:hover, #services:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 16px var(--shadow-hover);
}

#cta h2, #services h2{
  margin-bottom:1rem;
  color:var(--brand);
}

#cta p{
  max-width:36rem;
  margin:0 auto 1.5rem;
  color:var(--txt-soft);
}

/* Liste des programmes (centrée, lisible) */
#services ul{
  display:inline-block;     /* centre le bloc dans la section */
  text-align:left;          /* lecture naturelle */
  margin:0 auto;
  padding-left:1rem;
  line-height:1.8;
}
#services li{
  background: color-mix(in srgb, var(--brand) 5%, transparent);
  margin:.5rem 0;
  padding:.6rem 1rem;
  border-radius:6px;
}
#services li strong{ color:var(--brand); }

/* =========================
   Footer
   ========================= */
footer p{
  margin:.4rem 0;
  color:var(--txt-soft);
  font-size:.95rem;
}

/* =========================
   Paliers ≥ 720px (tablettes & +)
   ========================= */
@media (min-width:720px){
  #intro{
    flex-direction:row;      /* côte à côte */
    justify-content:center;
    gap:2rem;
    padding:2.25rem 1rem;
  }
  .intro-text{
    text-align:left;         /* dès 720px */
    max-width:40rem;
  }
  .intro-img img{ width:200px; }

  #cta, #services{
    max-width:46rem;         /* ~736px */
    margin:3rem auto;
    padding:2.25rem 2rem;
  }
  #services ul{ padding-left:1.25rem; }
}

/* =========================
   Paliers ≥ 1024px (desktop)
   ========================= */
@media (min-width:1024px){
  #cta, #services{ max-width:50rem; }  /* ~800px */
}