/* ============================================
   VARIABLES — modifie ici pour ajuster toute la page
   ============================================ */
:root {
  /* Couleurs */
  --fond-haut: #FBF1EE;
  --fond-milieu: #F8EAE5;
  --fond-bas: #F6E4DF;

  --corail: #E0836C;
  --corail-fonce: #C96A53;
  --corail-hover: #D3705A;
  --sauge: #8FA888;

  --texte: #2B2B2B;
  --texte-secondaire: #5C5450;
  --texte-label: #A08D87;
  --texte-footer: #8A7A75;
  --texte-muted: #B9A6A0;

  --bordure: #E7D3CC;
  --bordure-cercle-photo: #E7C6BC;

  /* Typographie */
  --police: 'Quicksand', 'Trebuchet MS', sans-serif;

  /* Largeur de la page */
  --largeur-max: 470px;
}

/* ============================================
   RESET DE BASE
   ============================================ */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--fond-haut);
  overflow-x: hidden;
}

body {
  font-family: var(--police);
  color: var(--texte);
  background: linear-gradient(180deg, var(--fond-haut) 0%, var(--fond-haut) 38%, var(--fond-milieu) 68%, var(--fond-bas) 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a {
  color: var(--corail);
  text-decoration: none;
}

a:hover {
  color: var(--corail-fonce);
}

input, textarea, button {
  font-family: inherit;
}

::placeholder {
  color: var(--texte-muted);
}

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

.conteneur {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 26px;
  position: relative;
}

/* ============================================
   ANIMATION D'APPARITION
   ============================================ */
@keyframes fcRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.fc-rise {
  animation: fcRise 0.7s ease both;
}

.fc-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fc-reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fc-rise, .fc-reveal { animation: none; transition: none; opacity: 1; transform: none; }
}

/* ============================================
   HEADER
   ============================================ */
.entete {
  padding: 26px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.entete .nom {
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sauge);
}

.entete .marque {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-label);
}

/* ============================================
   HERO
   ============================================ */
.hero {
  padding: 46px 0 0;
}

.hero-photo-wrap {
  position: relative;
  width: 188px;
  height: 188px;
  margin: 0 0 34px;
}

.hero-photo-wrap .anneau {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid var(--bordure-cercle-photo);
}

.hero-photo {
  width: 188px;
  height: 188px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.hero h1 {
  margin: 0;
  font-size: clamp(35px, 9.6vw, 46px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.hero h1 em {
  font-style: normal;
  color: var(--corail);
}

.hero p {
  margin: 22px 0 0;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--texte-secondaire);
  max-width: 34ch;
}

/* ============================================
   ILLUSTRATION VEGETALE (separateur)
   ============================================ */
.separateur {
  padding: 46px 0 42px;
  display: flex;
  justify-content: center;
}

.separateur img {
  width: 300px;
  max-width: 84%;
  height: auto;
  opacity: 0.95;
}

.separateur.miroir img {
  transform: scaleX(-1);
}

/* ============================================
   SECTION MODALITES
   ============================================ */
.modalites-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.modalites-entete .trait {
  width: 22px;
  height: 1px;
  background: var(--sauge);
}

.modalites-entete h2 {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sauge);
}

.modalites-liste {
  display: flex;
  flex-direction: column;
}

.modalite {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-top: 1px solid var(--bordure);
}

.modalites-liste .modalite:last-child {
  border-bottom: 1px solid var(--bordure);
}

.modalite .label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-label);
}

.modalite .valeur {
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
}

.modalite .valeur .accent {
  color: var(--corail);
}

/* ============================================
   SECTION CONTACT
   ============================================ */
.contact {
  padding: 0 0 52px;
  scroll-margin-top: 24px;
}

.contact h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.contact-intro {
  margin: 14px 0 30px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--texte-secondaire);
  max-width: 33ch;
}

.contact-boutons {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  padding: 17px 24px;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
}

.bouton-whatsapp {
  background: var(--sauge);
  color: var(--fond-haut);
}

.bouton-whatsapp:hover {
  background: #7c9576;
  color: var(--fond-haut);
}

.bouton-email {
  background: var(--corail);
  color: var(--fond-haut);
}

.bouton-email:hover {
  background: var(--corail-hover);
  color: var(--fond-haut);
}

.bouton svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ============================================
   FOOTER
   ============================================ */
.pied-de-page {
  background: transparent;
  border-top: 1px solid var(--bordure);
  padding: 24px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--texte-footer);
}

.pied-de-page a {
  color: var(--texte-footer);
}

.pied-de-page a:hover {
  color: var(--corail);
}

.pied-de-page .discret {
  color: var(--texte-muted);
}