/* Plume — site vitrine. Charte reprise de l'app (apps/plume-mobile/src/theme/plume.ts) :
   sable en fond, encre chaude, accents terracotta / ocre, vert de confiance.
   Aucune police distante, aucun script de mesure : la page se charge en une requête HTML + une CSS. */

:root {
  --sable:      #FAF6F0;
  --surface:    #FFFFFF;
  --surface-alt:#F3EEE6;
  --bord:       #E7DFD2;
  --encre:      #241C14;
  --encre-2:    #5C5344;
  --encre-3:    #8A8070;
  --terracotta: #C77B5B;
  --terracotta-fonce: #A85E3F;
  --ocre:       #D98A3D;
  --ocre-doux:  #F7EBD9;
  --trust:      #2F7B6B;
  --trust-doux: #E3EFEA;
  --ombre:      0 1px 2px rgba(36, 28, 20, .05), 0 12px 32px -18px rgba(36, 28, 20, .35);

  /* Ronde et chaleureuse là où le système le permet (SF Rounded sur iPhone), sobre ailleurs. */
  --ronde: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Varela Round",
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light; /* identité assumée : le fond sable ne s'inverse pas */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--sable);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .rond { font-family: var(--ronde); }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: var(--terracotta-fonce); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; border-radius: 6px; }

.contenu { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ─── En-tête ─────────────────────────────────────────────────────────────── */
.entete { padding: 22px 0; }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); }
.marque svg { width: 26px; height: 26px; fill: var(--ocre); }
.marque span { font-family: var(--ronde); font-size: 21px; font-weight: 700; letter-spacing: .01em; }

/* ─── Héros ───────────────────────────────────────────────────────────────── */
.heros {
  position: relative;
  overflow: hidden;
  padding: 34px 0 56px;
  background:
    radial-gradient(120% 90% at 82% 0%, #FDF7EE 0%, rgba(253, 247, 238, 0) 60%),
    linear-gradient(180deg, var(--sable) 0%, var(--surface-alt) 100%);
  border-bottom: 1px solid var(--bord);
}

/* Filigrane : la plume du logo, ton sur ton, comme dans les en-têtes de l'app. */
.filigrane {
  position: absolute;
  right: -70px;
  top: -30px;
  width: 340px;
  height: 340px;
  fill: var(--encre);
  opacity: .035;
  pointer-events: none;
}

/* Chute de plumes : six éléments, très pâles, lentes. Décoratives et masquées aux lecteurs d'écran. */
.chute { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.chute svg {
  position: absolute;
  width: 26px; height: 26px;
  fill: var(--ocre);
  opacity: 0;
  animation: tomber linear infinite;
}
.chute svg:nth-child(1) { left: 8%;  animation-duration: 26s; animation-delay: 0s; }
.chute svg:nth-child(2) { left: 26%; animation-duration: 34s; animation-delay: 6s;  width: 18px; height: 18px; }
.chute svg:nth-child(3) { left: 47%; animation-duration: 30s; animation-delay: 12s; }
.chute svg:nth-child(4) { left: 66%; animation-duration: 38s; animation-delay: 3s;  width: 20px; height: 20px; }
.chute svg:nth-child(5) { left: 82%; animation-duration: 28s; animation-delay: 17s; }
.chute svg:nth-child(6) { left: 93%; animation-duration: 36s; animation-delay: 9s;  width: 16px; height: 16px; }
@keyframes tomber {
  0%   { transform: translateY(-40px) rotate(-8deg);  opacity: 0; }
  12%  { opacity: .22; }
  88%  { opacity: .16; }
  100% { transform: translateY(560px) rotate(24deg);  opacity: 0; }
}

/* ─── Héros : texte + appareil ────────────────────────────────────────────── */
/* `position: relative` sort la grille du filigrane et de la chute de plumes, qui vivent en absolu
   dans le héros : sans cela, l'appareil passerait dessous. */
.heros-grille { position: relative; display: grid; gap: 34px; }
.heros-texte { min-width: 0; }

/* L'APPAREIL, DESSINÉ. Coque sombre, écran, barre d'accueil : trois éléments, aucune image de
   maquette. Le léger pivot et l'ombre longue reprennent la douceur de la charte — assez pour
   qu'on lise « téléphone », pas assez pour que ça attire l'œil avant le titre. */
.appareil { display: flex; justify-content: center; }
.appareil-coque {
  position: relative;
  width: min(258px, 74vw);
  padding: 10px;
  border-radius: 42px;
  background: linear-gradient(160deg, #3A2E24 0%, #241C14 55%, #14100C 100%);
  box-shadow:
    0 2px 4px rgba(36, 28, 20, .18),
    0 26px 46px -22px rgba(36, 28, 20, .55),
    inset 0 0 0 1px rgba(255, 255, 255, .07);
  transform: rotate(-2deg);
}
.appareil-ecran {
  position: relative;
  border-radius: 33px;
  overflow: hidden;
  background: #241C14;
  /* L'écran garde le rapport exact de la capture recadrée : aucune déformation, aucun saut de
     mise en page au chargement. */
  aspect-ratio: 520 / 1061;
}
.appareil-ecran img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* La barre d'accueil iOS, redessinée : la capture d'origine a été rognée de sa barre d'état. */
.appareil-barre {
  position: absolute; left: 50%; bottom: 17px; transform: translateX(-50%);
  width: 84px; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .55);
}

.badge {
  /* Le libellé est long ; sans autorisation de retour à la ligne, la pastille impose sa largeur à
     toute la page et le texte déborde de l'écran d'un iPhone. Constaté, puis corrigé. */
  display: inline-flex; align-items: flex-start; gap: 8px; max-width: 100%;
  background: var(--trust-doux); color: #1F5C4F;
  border: 1px solid #CBE0D8;
  padding: 7px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
}
.badge svg { width: 15px; height: 15px; flex: none; margin-top: 3px; fill: var(--trust); }

.heros h1 {
  font-size: clamp(32px, 8vw, 54px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 20px 0 0;
  max-width: 19ch;
}
.heros .accroche {
  font-size: clamp(17px, 4.4vw, 21px);
  color: var(--encre-2);
  margin-top: 16px;
  max-width: 46ch;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ronde); font-size: 17px; font-weight: 600;
  padding: 15px 26px; border-radius: 999px;
  text-decoration: none; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.bouton-principal { background: var(--terracotta); color: #FFF; box-shadow: var(--ombre); }
.bouton-principal:hover { background: var(--terracotta-fonce); transform: translateY(-1px); }
.bouton-secondaire { background: var(--surface); color: var(--encre); border-color: var(--bord); }
.bouton-secondaire:hover { background: var(--ocre-doux); }
.mention-heros { margin-top: 14px; font-size: 14.5px; color: var(--encre-3); }

/* ─── Sections ────────────────────────────────────────────────────────────── */
section { padding: 56px 0; }
.titre-section { font-size: clamp(25px, 6vw, 34px); letter-spacing: -.01em; }
.sous-titre-section { color: var(--encre-2); margin-top: 10px; max-width: 54ch; }

.duo { display: grid; gap: 20px; margin-top: 34px; }
.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 20px;
  padding: 26px 24px 28px;
  box-shadow: var(--ombre);
}
.carte h3 { font-size: 22px; display: flex; align-items: center; gap: 10px; }
.carte h3 svg { width: 22px; height: 22px; flex: none; }
.carte.parents h3 svg { fill: var(--terracotta); }
.carte.sitters h3 svg { fill: var(--trust); }
.carte ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.carte li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; color: var(--encre-2); }
.carte li svg { width: 15px; height: 15px; margin-top: 6px; opacity: .75; }
.carte.parents li svg { fill: var(--ocre); }
.carte.sitters li svg { fill: var(--trust); }
.carte li b { color: var(--encre); font-weight: 600; }

/* ─── Étapes ──────────────────────────────────────────────────────────────── */
.etapes { background: var(--surface-alt); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
/* Sur mobile, l'illustration SUIT l'explication : on lit d'abord les trois étapes. */
.etapes-grille { display: grid; gap: 34px; }
.etapes-grille .appareil { order: 2; }
.etapes-texte { order: 1; min-width: 0; }
.appareil-petit .appareil-coque { width: min(210px, 62vw); border-radius: 36px; padding: 8px; transform: rotate(2deg); }
.appareil-petit .appareil-ecran { border-radius: 29px; }
.appareil-petit .appareil-barre { bottom: 13px; width: 68px; }
.liste-etapes { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 22px; counter-reset: etape; }
.liste-etapes li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.numero {
  counter-increment: etape;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--bord);
  display: grid; place-items: center;
  font-family: var(--ronde); font-weight: 700; font-size: 19px; color: var(--terracotta);
}
.numero::before { content: counter(etape); }
.liste-etapes h3 { font-size: 19px; }
.liste-etapes p { color: var(--encre-2); margin-top: 4px; }

/* ─── Fondateur ───────────────────────────────────────────────────────────── */
.fondateur .carte { border-left: 4px solid var(--ocre); }
/* Médaillon : au-dessus du texte sur mobile, à côté dès qu'il y a la place. */
.carte-fondateur { display: grid; gap: 22px; }
.medaillon {
  display: block;
  width: 116px; height: 116px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--bord), 0 10px 24px -14px rgba(36, 28, 20, .5);
}
.fondateur-texte { min-width: 0; }
.fondateur blockquote { margin: 18px 0 0; color: var(--encre-2); font-size: 17.5px; }
.fondateur blockquote p + p { margin-top: 14px; }
.fondateur .signature { margin-top: 18px; font-family: var(--ronde); font-weight: 600; color: var(--encre); }

/* ─── Pied de page ────────────────────────────────────────────────────────── */
.pied { background: var(--encre); color: #E9E0D3; padding: 40px 0 46px; }
.pied a { color: #F0DFC6; }
.pied .marque span { color: #FFF; }
.pied .marque svg { fill: var(--ocre); }
.pied-liens { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 15.5px; }
.pied-mention { margin-top: 20px; font-size: 14px; color: #B3A794; max-width: 60ch; }

/* ─── Page mentions légales ───────────────────────────────────────────────── */
.legal { padding: 34px 0 64px; }
.legal h1 { font-size: clamp(28px, 6.5vw, 40px); }
.legal h2 { font-size: 20px; margin-top: 34px; }
.legal p, .legal li { color: var(--encre-2); margin-top: 10px; }
.legal ul { margin: 10px 0 0; padding-left: 20px; }
.retour { display: inline-flex; align-items: center; gap: 8px; margin-top: 40px; text-decoration: none; font-weight: 600; }

/* ─── Écrans larges ───────────────────────────────────────────────────────── */
@media (min-width: 760px) {
  .heros { padding: 52px 0 76px; }
  /* L'appareil passe à droite du texte, un peu plus grand, sans jamais pousser la colonne
     de texte sous sa largeur confortable. */
  .heros-grille { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
  .appareil-coque { width: 286px; }
  .duo { grid-template-columns: 1fr 1fr; gap: 24px; }
  .liste-etapes { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  /* L'appareil repasse à gauche dès qu'il y a deux colonnes. */
  .etapes-grille { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 48px; }
  .etapes-grille .appareil { order: 0; }
  .etapes-texte { order: 1; }
  .etapes .liste-etapes { grid-template-columns: 1fr; gap: 24px; }
  .etapes .liste-etapes li { grid-template-columns: 44px 1fr; }
  .carte-fondateur { grid-template-columns: 132px minmax(0, 1fr); align-items: start; gap: 28px; }
  .medaillon { width: 132px; height: 132px; }
  .liste-etapes li { grid-template-columns: 1fr; }
  .filigrane { width: 460px; height: 460px; right: -90px; top: -60px; }
}