/* =========================================================================
   MAËLLE KERDAL — direction "Atelier & marée"
   -------------------------------------------------------------------------
   Palette assumée plus riche qu'un site vitrine classique : une artiste
   a une palette, pas un seul accent — les 5 couleurs de toile (corail,
   indigo, moutarde, mousse, prune) reviennent partout comme un vrai jeu
   de couleurs de peintre, pas comme un système de marque figé.

   Le corail rend hommage au corail rouge travaillé traditionnellement
   en Bretagne (bijouterie de la Côte de Granit Rose) plutôt qu'un simple
   orange choisi au hasard.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Work+Sans:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap');

:root{
  --ink:      #211A2C;  /* encre presque noire, teinte aubergine */
  --paper:    #FBF7EF;  /* fond : blanc papier, pas un crème classique */
  --panel:    #FFFFFF;

  --corail:   #E2634A;  /* accent principal : CTA, étiquettes */
  --indigo:   #2D3E7C;  /* accent secondaire */
  --moutarde: #E3A23D;
  --mousse:   #6F8F6B;
  --prune:    #7A4870;

  --line: rgba(33,26,44,.14);
  --muted: #62596B;

  --shadow-cadre: 0 22px 40px -22px rgba(33,26,44,.35);
  --shadow-soft: 0 14px 30px -18px rgba(33,26,44,.25);
  --ease: cubic-bezier(.22,1,.36,1);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;

  --maxw: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
a{ color: var(--corail); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--corail); outline-offset: 3px;
}

h1, h2{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}
h1{ font-size: clamp(2.4rem, 1.8rem + 2.8vw, 3.9rem); }
h2{ font-size: clamp(1.8rem, 1.5rem + 1.6vw, 2.6rem); }
h1 em, h2 em{ font-style: italic; color: var(--corail); }

.eyebrow{
  display: block; font-weight: 700; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--corail);
  margin-bottom: 1em;
}
.lede{ font-size: 1.06rem; color: var(--muted); max-width: 560px; }
.lede--section{ margin-bottom: 2em; }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header{
  background: rgba(251,247,239,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.header-row{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; padding: 16px 24px;
}
.brand{
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  color: var(--ink); text-decoration: none;
}
.brand span{ font-family: var(--font-body); font-weight: 400; font-size: .82rem; color: var(--muted); }

.site-header nav ul{ list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; }
.site-header nav a{
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .92rem;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color .3s var(--ease);
}
.site-header nav a:hover{ border-color: var(--corail); }
.nav-cta{
  background: var(--ink); color: var(--paper) !important;
  padding: 7px 16px; border-radius: 999px; border-bottom: none !important;
}
.nav-cta:hover{ background: var(--corail); }

/* =========================================================================
   BOUTONS
   ========================================================================= */
.btn{
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  padding: 13px 24px; border-radius: 999px; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-primary{ background: var(--corail); color: #fff; }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ background: var(--panel); }

/* =========================================================================
   HERO — cadre accroché légèrement de travers + éclaboussures
   ========================================================================= */
.hero{ padding: clamp(56px, 7vw, 100px) 0 clamp(48px, 6vw, 70px); overflow: hidden; }
.hero-grid{
  display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center;
}
@media (min-width: 860px){ .hero-grid{ grid-template-columns: 1.1fr 1fr; } }

.hero-lede{ font-size: 1.12rem; color: var(--muted); max-width: 500px; margin: 0 0 1.6em; }
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; }

.hero-visual{ position: relative; display: flex; justify-content: center; }

/* Le "cadre" : la brique visuelle réutilisée pour chaque tableau du site */
.cadre{
  position: relative;
  background: var(--panel);
  padding: 14px 14px 40px;
  border-radius: 3px;
  box-shadow: var(--shadow-cadre);
  display: block;
  margin: 0;
}
.cadre .toile{ aspect-ratio: 4 / 5; border-radius: 1px; }
.cadre--hero{ max-width: 320px; transform: rotate(-3deg); }

.tache{
  position: absolute; border-radius: 50%; opacity: .55; filter: blur(1px);
  pointer-events: none;
}
.tache--1{ width: 70px; height: 70px; background: var(--moutarde); top: -10px; right: 10px; }
.tache--2{ width: 40px; height: 40px; background: var(--mousse); bottom: 20px; left: -6px; }

/* Séparateur "vague" entre le hero et la suite */
.vague{ line-height: 0; margin-top: -1px; }
.vague svg{ width: 100%; height: 46px; display: block; }
.vague svg path{ fill: var(--panel); }

/* =========================================================================
   UNIVERS / À PROPOS
   ========================================================================= */
.univers{ background: var(--panel); padding: clamp(56px, 7vw, 92px) 0; }
.univers-grid{ display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 860px){ .univers-grid{ grid-template-columns: 1.3fr 1fr; align-items: start; } }

.tags-materiaux{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start;
}
.tags-materiaux li{
  font-family: var(--font-hand); font-size: 1.15rem; font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 6px 16px 8px;
  border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
}
.tags-materiaux li:nth-child(odd){ transform: rotate(-2deg); }
.tags-materiaux li:nth-child(even){ transform: rotate(2deg); }

/* =========================================================================
   ŒUVRES — accrochage "salon", cadres légèrement désaxés
   ========================================================================= */
.oeuvres{ padding: clamp(56px, 7vw, 96px) 0; }
.galerie{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 46px 28px;
  margin-top: 1em;
}
@media (min-width: 700px){ .galerie{ grid-template-columns: repeat(3, 1fr); } }

.galerie figure.cadre{ padding-bottom: 46px; }
.cadre--1{ transform: rotate(-2deg); }
.cadre--2{ transform: rotate(1.4deg); }
.cadre--3{ transform: rotate(-1deg); }
.galerie figure.cadre:hover{ transform: rotate(0deg) translateY(-4px); transition: transform .4s var(--ease); }

.galerie figcaption{
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.titre-oeuvre{ font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--ink); }
.technique{ font-size: .74rem; color: var(--muted); }

/* Étiquette prix façon marché, accrochée au coin */
.etiquette{
  position: absolute; top: -10px; right: -10px;
  background: var(--moutarde); color: var(--ink);
  font-family: var(--font-hand); font-weight: 700; font-size: 1.15rem;
  padding: 4px 14px 6px; border-radius: 4px;
  transform: rotate(6deg);
  box-shadow: var(--shadow-soft);
}

.note-galerie{ margin-top: 2.4em; font-size: .85rem; color: var(--muted); font-style: italic; }

/* =========================================================================
   MARCHÉS — tickets façon billet de foire
   ========================================================================= */
.marches{ background: var(--panel); padding: clamp(56px, 7vw, 92px) 0; }
.tickets{ list-style: none; margin: 1.6em 0 0; padding: 0; display: grid; gap: 14px; max-width: 560px; }
.ticket{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--paper);
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  padding: 16px 20px;
}
.ticket-date{
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: var(--corail); flex-shrink: 0;
}
.ticket-lieu{ font-size: .95rem; color: var(--ink); text-align: right; }

/* =========================================================================
   PROFESSIONNELS
   ========================================================================= */
.pro{ padding: clamp(56px, 7vw, 96px) 0; }
.pro-grid{ display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 860px){ .pro-grid{ grid-template-columns: 1.4fr 1fr; align-items: start; } }

.offre-liste{ list-style: none; margin: 1.4em 0; padding: 0; display: grid; gap: 14px; }
.offre-liste li{
  padding-left: 1.6em; position: relative; font-size: .96rem; color: var(--ink);
}
.offre-liste li::before{ content: "◆"; position: absolute; left: 0; top: .15em; color: var(--corail); font-size: .7rem; }
.offre-liste strong{ color: var(--ink); }

.lien-souligne{
  display: inline-block; font-weight: 700; text-decoration: none; color: var(--corail);
  border-bottom: 1px solid var(--corail);
}

.pro-refs{ background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 24px 26px; box-shadow: var(--shadow-soft); }
.refs-liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.refs-liste li{ font-size: .92rem; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.refs-liste li:last-child{ border-bottom: none; padding-bottom: 0; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact{ background: var(--panel); padding: clamp(56px, 7vw, 96px) 0; }
.contact-grid{ display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 860px){ .contact-grid{ grid-template-columns: 1fr 1.2fr; align-items: start; } }

.coordonnees{ margin: 1.6em 0 0; }
.coordonnees dt{ font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 1.1em; }
.coordonnees dd{ margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--ink); }

.contact-form{ display: grid; gap: 16px; }
.form-row label{ display: block; font-weight: 600; font-size: .88rem; margin-bottom: 5px; }
.form-row input, .form-row textarea, .form-row select{
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; background: var(--paper); color: var(--ink);
  transition: border-color .3s var(--ease);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{ border-color: var(--corail); outline: none; }
.form-row textarea{ resize: vertical; }

.contact-form button{
  justify-self: start;
  background: var(--ink); color: var(--paper);
  border: none; font: inherit; font-weight: 700;
  padding: 13px 28px; border-radius: 999px; cursor: pointer;
  transition: transform .35s var(--ease), background .3s var(--ease);
}
.contact-form button:hover{ background: var(--corail); transform: translateY(-2px); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ background: var(--ink); color: #D9D1E0; padding: 36px 0; margin-top: 10px; text-align: center; }
.footer-brand{ font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: #fff; margin: 0 0 .3em; }
.site-footer p{ margin: 0 0 .3em; font-size: .86rem; }
.site-footer a{ color: #D9D1E0; }

@media (max-width: 480px){
  .header-row{ justify-content: center; text-align: center; }
}