/* ============================================
   Paws and Soul — Léa Delahaye, communication animale
   ============================================ */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/playfair-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/playfair-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lato-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/caveat-600.woff2') format('woff2');
}

:root {
  --bg: #F5EFE4;
  --surface: #FFFFFF;
  --surface-soft: #FBF8F3;
  --burgundy: #7A2E2E;
  --burgundy-soft: #9A4A42;
  --terracotta: #C04848;
  --blush: #EFD6DA;
  --gold: #B9902A;       /* releve sur ses visuels. Servait au tampon rond,
                            retire de l'en-tete ; actuellement inutilise mais
                            conserve, c'est une couleur de la charte (§5). */
  --text: #3A2E28;
  --text-soft: #6B5D53;
  --border: #E7DCC8;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Caveat', cursive;

  --radius-card: 20px;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 30px rgba(58, 34, 22, 0.10);
  --shadow-card: 0 6px 18px rgba(58, 34, 22, 0.08);
  --max-width: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E");
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--burgundy);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 5.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); line-height: 1.14; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--burgundy); }
a:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

section { padding: 64px 0; }
section.tight { padding: 40px 0; }

.section-head {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}
.section-head p { color: var(--text-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  min-height: 44px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--burgundy);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.btn-primary:hover { background: #631F1F; transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--burgundy);
  border: 1.5px solid var(--burgundy);
}
.btn-secondary:hover { background: rgba(122, 46, 46, 0.06); }
.btn-block { width: 100%; }
.btn-small { padding: 10px 20px; font-size: 0.9rem; }

/* CTA de fin de section. La demonstration du process et la preuve sociale sont
   deux points de bascule : sans bouton a portee, il fallait remonter au
   bandeau colle, soit 6000px plus haut au pire endroit. */
.section-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  text-align: center;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 239, 228, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
/* Trois zones : Instagram a gauche, marque au centre, CTA a droite. */
.site-header .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}
/* La marque est centree sur la PAGE, pas sur l'espace restant. Mesure a
   l'appui : en flux (grid 1fr auto 1fr comme en flex), le bouton etant plus
   large que l'element de gauche, le centre se decalait de 7px en 390 et de
   20px en 360. Hors flux, le lien Instagram et le bouton se partagent la
   ligne aux extremites. */
.site-header .brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.site-header .btn { white-space: nowrap; }
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--burgundy);
  text-decoration: none;
}
.brand-logo {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

/* ---------- Hero ---------- */
.hero {
  padding: 24px 0 64px;
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.hero-copy { text-align: center; }
.hero-copy p.lede {
  font-size: 1.1rem;
  color: var(--text-soft);
  max-width: 46ch;
  margin: 0 auto 28px;
}
.hero-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-trust {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-soft);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  box-shadow: var(--shadow-card);
}
.hero-trust svg { color: var(--terracotta); flex-shrink: 0; }
.hero-media { display: flex; flex-direction: column; align-items: center; }

/* Bouquet de photos : grappe de tuiles facon polaroid, echo au logo */
.bouquet {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-content: start;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}
.bouquet-tile {
  margin: 0;
  background: var(--surface);
  padding: 5px;
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}
.bouquet-tile img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}
/* mobile : grappe en diamant 2 / 3 / 2, tuiles ~130px */
.bouquet .b1 { grid-area: 1 / 2 / 2 / 4; transform: rotate(-5deg); z-index: 4; }
.bouquet .b2 { grid-area: 1 / 4 / 2 / 6; transform: rotate(2deg);  z-index: 3; }
.bouquet .b3 { grid-area: 2 / 1 / 3 / 3; transform: rotate(-3deg); z-index: 2; }
.bouquet .b4 { grid-area: 2 / 3 / 3 / 5; transform: rotate(4deg);  z-index: 5; }
.bouquet .b5 { grid-area: 2 / 5 / 3 / 7; transform: rotate(-2deg); z-index: 2; }
.bouquet .b6 { grid-area: 3 / 2 / 4 / 4; transform: rotate(3deg);  z-index: 3; }
.bouquet .b7 { grid-area: 3 / 4 / 4 / 6; transform: rotate(-4deg); z-index: 4; }


@media (min-width: 860px) {
  /* desktop : meme diamant, tuiles agrandies (~150px) */
  .bouquet { max-width: 480px; gap: 12px; }
  /* leger agrandissement : les tuiles se chevauchent, effet scrapbook */
  .bouquet .b1 { transform: rotate(-5deg) scale(1.08); }
  .bouquet .b2 { transform: rotate(2deg)  scale(1.08); }
  .bouquet .b3 { transform: rotate(-3deg) scale(1.08); }
  .bouquet .b4 { transform: rotate(4deg)  scale(1.08); }
  .bouquet .b5 { transform: rotate(-2deg) scale(1.08); }
  .bouquet .b6 { transform: rotate(3deg)  scale(1.08); }
  .bouquet .b7 { transform: rotate(-4deg) scale(1.08); }
}
.reassure {
  font-size: 0.85rem;
  color: var(--text-soft);
}

@media (min-width: 860px) {
  .hero .container { grid-template-columns: 1.1fr 0.9fr; text-align: left; }
  .hero-copy { text-align: left; }
  .hero-copy p.lede { margin-left: 0; margin-right: 0; }
  .hero-cta-row { align-items: flex-start; }
}

/* ---------- Pour qui ---------- */
.pourqui { background: var(--surface-soft); }
.pourqui .container { max-width: 760px; text-align: center; }
.pourqui p { font-size: 1.1rem; }

/* ---------- Formules / pricing ---------- */
/* Citation remontee au-dessus de la grille : le prix s'affichait 3800px avant
   la premiere preuve. Extrait mot pour mot, cite en entier dans #preuve. */
.preuve-avant {
  max-width: 560px;
  margin: 0 auto 32px;
  padding: 0;
  text-align: center;
}
.preuve-avant blockquote {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--text);
}
.preuve-avant figcaption {
  font-size: 0.88rem;
  color: var(--text-soft);
}

.formules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 760px) {
  .formules-grid { grid-template-columns: repeat(3, 1fr); }
}
.formule-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid var(--border);
}
.formule-badge {
  align-self: center;
  background: var(--blush);
  color: var(--burgundy);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  margin-bottom: 16px;
}
.formule-card.mise-en-avant .formule-badge {
  background: var(--burgundy);
  color: #fff;
}
.formule-price {
  font-family: var(--font-display);
  font-size: 2.1rem;
  color: var(--terracotta);
  font-weight: 700;
  margin: 6px 0 14px;
}
.formule-card p.desc {
  color: var(--text-soft);
  flex-grow: 1;
  margin-bottom: 20px;
}
/* Grille detaillee (5 formules avec la liste de ce que comprend la seance).
   Flex plutot que grille : la derniere rangee incomplete reste centree.
   Placee apres .formules-grid pour l'emporter a specificite egale. */
.formules-grid--detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.formules-grid--detail .formule-card {
  flex: 1 1 100%;
  text-align: left;
}
.formules-grid--detail .formule-price { text-align: center; }
.formules-grid--detail .formule-card p.desc {
  flex-grow: 0;
  margin-bottom: 14px;
}
.formule-inclus-titre {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.formule-inclus {
  flex-grow: 1;
  margin: 0 0 20px;
  padding-left: 1.2em;
  color: var(--text-soft);
}
.formule-inclus li { margin-bottom: 6px; }
@media (min-width: 760px) {
  .formules-grid--detail .formule-card { flex: 0 1 calc((100% - 24px) / 2); }
}
@media (min-width: 1024px) {
  .formules-grid--detail .formule-card { flex-basis: calc((100% - 48px) / 3); }
}

/* Vignette du changement de tarifs, masquee par script.js apres la date */
.annonce-tarifs {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto 28px;
  padding: 12px 18px;
  background: var(--blush);
  color: var(--burgundy);
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.annonce-tarifs svg { flex-shrink: 0; }

/* "Des questions ? Ecrivez-moi" : Instagram (plein, mis en avant) puis
   E-mail (contour). Couleurs du site, pas le degrade Instagram : la marque
   Instagram reste secondaire face a celle de Lea (regles de marque Meta). */
.formules-question {
  text-align: center;
  margin-top: 32px;
}
.formules-question-titre {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}
.formules-question-choix {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.formules-question-choix .btn {
  min-width: 9.5rem;
  padding: 10px 18px;
}
/* 320-360px : les deux boutons restent cote a cote en se partageant la ligne */
@media (max-width: 380px) {
  .formules-question-choix .btn { flex: 1 1 0; min-width: 0; }
}
.cgv-note {
  text-align: center;
  margin-top: 18px;
  font-size: 0.92rem;
  color: var(--text-soft);
}
.cgv-note a { color: var(--burgundy); }

/* ---------- Cadre / important ---------- */
.cadre { background: var(--surface-soft); }
.cadre .section-head { margin-bottom: 20px; }
.cadre-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 720px;
  display: grid;
  gap: 16px;
}
.cadre-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.cadre-list li:last-child { border-bottom: none; }
.cadre-list svg { flex-shrink: 0; margin-top: 2px; color: var(--burgundy); }

/* ---------- Comment ça se passe ---------- */
.etapes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  counter-reset: etape;
}
@media (min-width: 760px) {
  .etapes { grid-template-columns: repeat(3, 1fr); }
}
.etape {
  text-align: left;
  padding: 0;
}
.etape p { color: var(--text-soft); }
.etape h3 { margin-bottom: 6px; }

/* ---------- Pourquoi moi ---------- */
.pourquoi-moi { background: var(--surface-soft); }
.pourquoi-moi .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  max-width: 900px;
}
@media (min-width: 760px) {
  .pourquoi-moi .container { grid-template-columns: 0.8fr 1.2fr; }
}
.pourquoi-moi img {
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  margin: 0 auto;
  max-width: 220px;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.badge-formation {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blush);
  color: var(--burgundy);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  margin-top: 14px;
}

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 700;
  color: var(--burgundy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item[open] summary .chevron { transform: rotate(180deg); }
.faq-item summary:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: -3px;
}
.faq-item .faq-answer {
  padding: 0 22px 20px;
  color: var(--text-soft);
}

/* ---------- Contact / CTA final ---------- */
.contact { background: var(--surface-soft); }
.contact .container { max-width: 640px; }
.contact-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 36px 28px;
}
.form-field {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field label {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text);
}
.form-field textarea {
  resize: vertical;
  min-height: 112px;
  line-height: 1.5;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 3px solid var(--terracotta);
  outline-offset: 1px;
  border-color: var(--terracotta);
}
.form-field .facultatif {
  font-weight: 400;
  color: var(--text-soft);
}
/* Deux champs courts cote a cote (prenom/email, telephone/compagnon) : le
   formulaire parait deux fois moins long. align-items: end aligne les champs
   de saisie quand un libelle passe sur deux lignes. */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 16px;
}
@media (min-width: 760px) {
  .form-row { grid-template-columns: 1fr 1fr; align-items: end; }
}
.form-honeypot { position: absolute; left: -9999px; top: -9999px; }
.form-note {
  font-size: 0.82rem;
  color: var(--text-soft);
  margin-top: 16px;
}
.form-status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.92rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success { background: #E4F0E1; color: #2C5A2A; }
.form-status.is-error { background: #F6DEDA; color: #7A2E2E; }
.contact-alt {
  text-align: center;
  margin-top: 24px;
  font-size: 0.95rem;
  color: var(--text-soft);
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 48px 0 32px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-soft);
}
.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer-links a {
  color: var(--text-soft);
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}
.footer-legal { max-width: 760px; line-height: 1.6; }
.footer-todo {
  color: var(--burgundy);
  font-weight: 700;
}

/* ---------- Utilities ---------- */
/* L'attribut hidden doit gagner sur les display: grid / flex des composants
   (bascule des tarifs, script.js) */
[hidden] { display: none !important; }

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

/* Le lien d'evitement doit redevenir visible quand il recoit le focus :
   sans cette regle le premier Tab envoie le focus sur une boite de 1x1 px. */
.visually-hidden:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 22px;
  overflow: visible;
  clip: auto;
  background: var(--burgundy);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  z-index: 100;
}

/* ============================================================
   DIRECTION ARTISTIQUE — motifs repris de l'Instagram de Léa
   (rayures, festons, polaroids, washi tape, écriture manuscrite)
   ============================================================ */

:root {
  --stripe-red: #BB5759;   /* relevé sur son post "Comment ça se passe" */
  --stripe-cream: #F8F9F1;
  --tape: rgba(239, 214, 218, 0.8);
}

/* ---------- Washi tape (ruban adhésif) ---------- */
.tape { position: relative; }
.tape::after {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 84px;
  height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--tape);
  box-shadow: 0 1px 4px rgba(58, 34, 22, 0.14);
}

/* ---------- Section rayée + cartouche festonné ---------- */
.rayures {
  background-color: var(--stripe-cream);
  /* Tuile symetrique (demi-bande rouge a chaque bord ; deux tuiles voisines
     redonnent des bandes rouge 30 / creme 20) + round : un nombre entier de
     tuiles remplit exactement la largeur, donc le motif commence en rouge
     des deux cotes et reste symetrique a toute largeur d'ecran. Arrets en
     pourcentages pour suivre l'ajustement de taille fait par round.
     Avant : repeating-linear-gradient ancre a gauche, la marge droite
     dependait de (largeur mod 50) — a 393px (iPhone) il ne restait que 7px
     de rouge a droite contre 20 a gauche (piege 9.21). */
  background-image: linear-gradient(
    90deg,
    var(--stripe-red) 0 30%,
    var(--stripe-cream) 30% 70%,
    var(--stripe-red) 70% 100%
  );
  background-size: 50px 100%;
  background-repeat: round no-repeat;
  padding: 84px 0;
}
.cartouche {
  position: relative;
  background: var(--stripe-cream);
  max-width: 940px;
  margin: 0 auto;
  padding: 52px 28px;
}
.cartouche::before,
.cartouche::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 15px;
  background-size: 30px 15px;
  /* round (pas repeat-x) : ajuste la largeur des tuiles pour qu'un nombre
     entier tienne exactement dans le cartouche, sinon la derniere tuile
     est tronquee en plein milieu d'un dome des que la largeur n'est pas un
     multiple de 30px (tres visible sur mobile, imperceptible en desktop
     ou le cartouche est plafonne a 940px) */
  background-repeat: round;
}
.cartouche::before {
  top: -14px;
  background-image: radial-gradient(
    circle at 50% 100%, var(--stripe-cream) 17px, transparent 17px);
}
.cartouche::after {
  bottom: -14px;
  background-image: radial-gradient(
    circle at 50% 0%, var(--stripe-cream) 17px, transparent 17px);
}
.cartouche .section-head { margin-bottom: 36px; }

/* ---------- Étapes : chiffres éditoriaux ---------- */
.etape-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--terracotta);
  margin-bottom: 6px;
}
.etape {
  border-top: 2px solid var(--stripe-red);
  padding-top: 16px;
}

/* ---------- Annotations manuscrites ---------- */
.manuscrit {
  font-family: var(--font-script);
  font-size: 1.4rem;
  color: var(--burgundy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: rotate(-3deg);
  margin-top: 10px;
}
.manuscrit svg { flex-shrink: 0; }

/* ---------- Lien Instagram de l'en-tete ---------- */
/* Occupe la zone gauche de l'en-tete. Taille figee a 44px : c'est la cible
   tactile minimale, on ne la reduit donc pas en mobile contrairement aux
   autres elements de l'en-tete. */
.ig-lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--burgundy);
  transition: color 0.15s ease;
}
.ig-lien svg { width: 26px; height: 26px; }
.ig-lien:hover { color: var(--terracotta); }
.ig-lien:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
}

/* Mobile : l'en-tete porte trois elements. Les reduire pour degager assez de
   mou : la marque etant centree sur la page et le bouton plus large que le
   lien Instagram, il faut de la marge a gauche pour qu'elle ne chevauche ni
   l'un ni l'autre. Valeurs calees par la mesure a 360px, le cas le plus
   serre. Le lien Instagram, lui, reste a 44px (cible tactile). */
@media (max-width: 480px) {
  .site-header .brand { font-size: 0.95rem; gap: 6px; }
  .site-header .brand-logo { width: 34px; height: 34px; }
  .site-header .btn-small { padding: 10px 14px; }
}

/* Mobile : resserrer le hero pour garder la premiere rangee de photos
   au-dessus de la ligne de flottaison. En 390x844 la 1re tuile commencait a
   y=822 : 22px visibles sur 119, donc le bouquet d'animaux — le visuel du
   hero — etait invisible a l'arrivee. Le desktop n'a jamais ete concerne
   (1re tuile a y=218) et n'est pas touche.
   Le tampon rond qui occupait le haut du hero a ete retire depuis, ce qui a
   rendu cette hauteur : ces valeurs sont donc moins serrees qu'a l'origine,
   calees sur la mesure et non a l'oeil.
   Place APRES les regles de base du hero : override responsive en dernier,
   sinon la regle de base gagne a specificite egale (piege 9.8). */
@media (max-width: 859px) {
  .hero { padding-top: 20px; }
  .hero .container { gap: 32px; }
  .hero-copy p.lede { margin-bottom: 24px; }
  .hero-trust { margin-top: 18px; }
}

/* ---------- Témoignages : 4 cartes homogènes ---------- */
.temoignages-grid {
  max-width: 940px;
  margin: 0 auto;
}
@media (min-width: 760px) {
  .temoignages-grid { column-count: 2; column-gap: 26px; }
}
.temoin {
  break-inside: avoid;
  margin-bottom: 26px;
  background: var(--surface);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  padding: 22px 22px 26px;
}
.temoin:nth-child(odd)  { transform: rotate(-0.7deg); }
.temoin:nth-child(even) { transform: rotate(0.7deg); }
.temoin img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  margin-bottom: 18px;
}
.temoin-photo img { aspect-ratio: 1; object-fit: cover; }
.temoin blockquote {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--text);
}
.temoin cite {
  font-style: normal;
  font-size: 0.88rem;
  color: var(--text-soft);
}

/* ---------- Mur des communications ---------- */
.mur {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  margin: 28px auto 0;
}
.mur-nom {
  font-family: var(--font-script);
  font-size: 1.3rem;
  color: var(--burgundy);
  background: var(--surface);
  padding: 5px 16px;
  border-radius: 3px;
  box-shadow: var(--shadow-card);
}
.mur > *:nth-child(3n)   { transform: rotate(-2.5deg); }
.mur > *:nth-child(3n+1) { transform: rotate(1.8deg); }
.mur > *:nth-child(4n)   { transform: rotate(-1.2deg); }
.mur-legende {
  text-align: center;
  color: var(--text-soft);
  font-size: 0.92rem;
  margin: 18px auto 0;
  max-width: 560px;
}
/* desktop : largeur qui repartit les 12 etiquettes en pyramide 5 / 4 / 3 */
@media (min-width: 860px) {
  .mur { max-width: 400px; }
}

.temoin-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--burgundy);
  background: var(--blush);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  margin-bottom: 14px;
}