/* =========================================================
   Romina Solange Mercado — one-page
   Recodé depuis le design Carrd. Toutes les couleurs, tailles
   et espacements se règlent dans les variables ci-dessous.
   ========================================================= */

:root {
  /* Couleurs */
  --cream:      #F2F0EA;   /* fond de page + texte clair */
  --cream-2:    #F3F0E9;   /* fond de la colonne centrale */
  --terracotta: #B45F45;
  --peach:      #D58C72;
  --blue:       #2436A8;
  --black:      #000000;
  --grey-line:  #C0C0C0;
  --grey-tags:  #BEBFBD;
  --grey-sep:   #737373;
  --dark:       #20211F;
  --photo-bg:   #845A44;   /* couleur affichée pendant le chargement de la photo */

  /* Typo */
  --font: 'DM Sans', sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Mise en page */
  --page-gutter: 2rem;       /* marge autour de la colonne (6rem sur Carrd) */
  --col-width: 51rem;        /* largeur max de la colonne */
  --col-pad-x: 3.25rem;
  --col-pad-y: 4.125rem;
  --block-pad: 2rem;         /* padding des blocs colorés */
  --spacing: 0.75rem;        /* espace vertical entre éléments */
  --indent: 1.875rem;        /* retrait des paragraphes */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul, li, figure, hr { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* L'échelle de toute la page dépend de cette taille (tout est en rem/em) */
html { font-size: 22pt; }

body {
  min-width: 320px;
  min-height: 100vh;
  line-height: 1;
  overflow-x: hidden;
  overflow-wrap: break-word;
  background: var(--cream);
  -webkit-text-size-adjust: none;
}

a { color: inherit; transition: color .25s ease; }

/* ---------- Structure ---------- */
.page {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 0 var(--page-gutter);
}

.content {
  width: var(--col-width);
  max-width: 100%;
  padding: var(--col-pad-y) var(--col-pad-x);
  background: var(--cream-2);
}

.content > *,
.block > *,
.service > * { margin-block: var(--spacing); }
.content > :first-child,
.block > :first-child { margin-top: 0 !important; }
.content > :last-child,
.block > :last-child { margin-bottom: 0 !important; }

/* Blocs colorés pleine largeur de colonne */
.block { padding: var(--block-pad); }
.block--terracotta { background: var(--terracotta); }
.block--blue       { background: var(--blue); }

/* ---------- Textes ---------- */
.eyebrow {
  font-family: var(--font);
  font-size: .625em;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--terracotta);
}
.eyebrow--peach { color: var(--peach); }
.eyebrow--light { color: var(--cream); }

.headline {
  font-family: var(--font);
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.5;
}
.headline--light { color: var(--cream); }
.headline--blue  { color: var(--blue); }

/* Titres bicolores : la partie en <em> prend la couleur d'accent du fond */
.headline em { font-style: normal; color: var(--terracotta); }
.block--blue .headline em       { color: var(--peach); }
.block--terracotta .headline em { color: var(--cream); }

.intro,
.body-text {
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}
.intro { font-size: 1em; padding-left: var(--indent); }
.body-text { font-size: .875em; }
.intro p + p,
.body-text p + p { margin-top: 1rem; }

.body-text--light  { color: var(--cream); padding-left: var(--indent); }
.body-text + .block { margin-top: 2.5rem !important; }   /* quand il n'y a pas de ligne entre la bio et les services */
.body-text--spaced { margin-block: 1.875rem !important; }

/* ---------- Boutons "pilules" ---------- */
/* Toujours sur une seule ligne : les boutons rétrécissent si la place manque */
.pills {
  display: flex;
  flex-wrap: nowrap;
  gap: .75rem;
  margin-block: 2rem !important;
}
.pills li { flex: 0 1 14.25rem; min-width: 0; }
.pills a {
  display: inline-block;
  width: 100%;
  height: 2.5rem;
  line-height: calc(2.5rem - 2px);
  padding: 0 .5rem;
  border: 1px solid var(--blue);
  border-radius: 2.375rem;
  font-family: var(--font-system);
  font-size: .75em;
  color: var(--blue);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}

/* ---------- Séparateurs ---------- */
.divider {
  border: 0;
  height: 1rem;
  width: 100%;
  --line: var(--grey-line);
  background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
}
.divider--light { --line: var(--cream); }
.divider--blue  { --line: var(--blue); }
/* Dans le bloc bleu, la ligne est de la même couleur que le fond (comme sur Carrd) */

/* ---------- Photo ---------- */
.portrait {
  width: 47.375rem;
  max-width: 100%;
  height: 25.875rem;
  overflow: hidden;
  background: var(--photo-bg);
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

/* ---------- Services ---------- */
.service__title {
  font-family: var(--font);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.5;
  color: var(--peach);
  text-indent: var(--indent);
}
.service__text {
  font-family: var(--font);
  font-size: .875em;
  line-height: 1.5;
  color: var(--cream);
  padding-left: var(--indent);
}
.service__tags {
  font-family: var(--font);
  font-size: .625em;
  line-height: 1.5;
  letter-spacing: .05rem;
  text-transform: uppercase;
  color: var(--grey-tags);
  padding-left: var(--indent);
  margin-block: 1.125rem !important;
}

/* ---------- Contact ---------- */
.cta {
  font-family: var(--font);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--blue);
  padding: 0 var(--indent);
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 1.5;
  font-family: var(--font-system);
}
.contact-links li { position: relative; }
.contact-links li + li::before {          /* petite barre verticale entre les liens */
  content: '';
  position: absolute;
  top: 0;
  left: calc(-.25rem - .5px);
  width: 1px;
  height: 100%;
  background: var(--grey-sep);
}

.contact-links--email { gap: .375rem; font-size: .875em; }
.contact-links--email a { color: var(--cream-2); text-decoration: none; }
.contact-links--email a:hover { color: var(--dark); text-decoration: underline; }

.contact-links--social { gap: .5rem; font-size: .75em; margin-top: 1.25rem !important; }
.contact-links--social a { color: var(--terracotta); text-decoration: underline; }
.contact-links--social a:hover { color: var(--blue); text-decoration: none; }

/* =========================================================
   Responsive (mêmes paliers que Carrd)
   ========================================================= */
@media (max-width: 1680px) { html { font-size: 16pt; } }
@media (max-width: 980px)  { html { font-size: 14pt; } }

@media (max-width: 736px) {
  html { font-size: 13pt; }
  :root {
    --page-gutter: .5rem;      /* 3.5rem sur Carrd */
    --col-pad-x: 2rem;
    --col-pad-y: 3.5rem;
    --indent: 1.40625rem;
  }
  .headline { font-size: 1em; }
  .service__title { font-size: .625em; }
  .service__tags {
    font-size: .5em;
    letter-spacing: .04375rem;
    margin-block: .84375rem !important;
  }
  .body-text--spaced { margin-block: 1.40625rem !important; }
  .pills { margin-block: 1.5rem !important; }
  .portrait { width: 15.875rem; height: 10.9375rem; }
}

@media (max-width: 480px) {
  :root { --page-gutter: 0rem; --spacing: .65625rem; }
  .pills { gap: .5rem; }
  .pills a { padding: 0 .25rem; }
  .portrait { height: 8.75rem; }
}

@media (max-width: 360px) {
  :root {
    --page-gutter: 0rem;
    --col-pad-x: 1.5rem;
    --col-pad-y: 2.625rem;
    --spacing: .5625rem;
    --block-pad: 1.5rem;
  }
  .pills { gap: .4rem; }
  .pills a { font-size: .7em; }
  .portrait { height: 7.65625rem; }
}

/* =========================================================
   Nouveau bloc d'accueil (versions B "escalier" et E "zigzag")
   ========================================================= */
.hero { font-family: var(--font); color: var(--black); margin-bottom: 2.5rem !important; }
.hero a { text-decoration: none; }

.hero-name {
  font-size: .625em; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--terracotta);
}

.hero-title { font-weight: 700; letter-spacing: -.025em; color: var(--blue); text-wrap: balance; }
.hero-title em { font-style: normal; color: var(--terracotta); }
.hero-title .l { display: block; }

.hero-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; line-height: 1.5; }
.hero-intro p:first-child { font-size: 1em; font-weight: 500; color: var(--blue); }
.hero-intro p + p { font-size: .8em; }

/* Bandeau défilant : texte terracotta, filets fins dessus/dessous */
.hero-band {
  margin-top: 2.25rem;
  border-top: 1px solid var(--terracotta);
  border-bottom: 1px solid var(--terracotta);
  overflow: hidden; white-space: nowrap;
  padding: .7rem 0;
}
.hero-track { display: inline-flex; align-items: center; animation: hero-marquee 26s linear infinite; }
.hero-band:hover .hero-track { animation-play-state: paused; }
.hero-track a, .hero-track span {
  font-size: .75em; font-weight: 500; letter-spacing: .25em; text-transform: uppercase;
  color: var(--terracotta); padding: 0 1.1rem; transition: color .25s ease;
}
.hero-track span { padding: 0; font-size: .75em; }
.hero-track a:hover { color: var(--blue); }
@keyframes hero-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero-track { animation: none; } }

/* B · escalier (3 lignes) */
.hero--b .hero-title { font-size: 2.6em; line-height: 1.08; margin: 1.25rem 0 2.25rem; }
.hero--b .hero-title .l:nth-child(2) { padding-left: 1.25em; }
.hero--b .hero-title .l:nth-child(3) { padding-left: 2.5em; }

/* E · zigzag (2 lignes) */
.hero--e .hero-title { font-size: 1.9em; line-height: 1.25; margin: 1.25rem 0 2.25rem; }
.hero--e .hero-title .l:last-child { text-align: right; }

/* Lignes imposées seulement quand il y a la place */
@media (min-width: 981px) { .hero-title .l { white-space: nowrap; } }

@media (max-width: 736px) {
  .hero-intro { grid-template-columns: 1fr; gap: .9rem; }
  .hero--b .hero-title { font-size: 1.6em; }
  .hero--b .hero-title .l:nth-child(2) { padding-left: .75em; }
  .hero--b .hero-title .l:nth-child(3) { padding-left: 1.5em; }
  .hero--e .hero-title { font-size: 1.35em; }
  .hero-band { margin-top: 1.75rem; }
  .hero-track a { font-size: .65em; letter-spacing: .18em; }
}

/* =========================================================
   Animations au scroll (reprises de Carrd : "fade-up",
   1 s, montée de 1.6875rem, déclenchement dans la zone
   centrale de l'écran). Voir le script en bas de index.html.
   ========================================================= */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.6875rem);
  transition: opacity 1s ease, transform 1s ease;
  backface-visibility: hidden;
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}