/* ==========================================================================
   Bouacheria Physique — Page de liens (dark)
   Reprend le socle de la plateforme : papier millimétré + courbe de
   progression, palette turquoise/vert, icônes SVG uniquement.
   ========================================================================== */

:root{
  /* Encre & papier — thème sombre du site */
  --ink:#E7F2F0; --ink-2:#B6CFCC; --ink-3:#85A6A3;
  --paper:#061719; --surface:#0C2427; --surface-2:#113034; --line:#1C4145;
  --grid-fine:rgba(58,175,170,.055); --grid-bold:rgba(58,175,170,.10);

  /* Marque */
  --brand:#47C0BA; --brand-bright:#6EDBD5; --brand-soft:#0E3634; --brand-rgb:71,192,186;
  --green:#96D453; --green-brt:#A9E066;

  --r-s:10px; --r-m:16px; --r-l:22px; --r-pill:999px;
  --sh-s:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.28);
  --sh-m:0 2px 6px rgba(0,0,0,.42), 0 16px 44px rgba(0,0,0,.4);

  --font-display:'IBM Plex Sans', system-ui, sans-serif;
  --font-body:'Cairo', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100dvh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(.95rem,.91rem + .22vw,1.02rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:clamp(20px,5vw,56px) clamp(14px,4vw,24px) 40px;
  overflow-x:hidden;
}

/* Le papier millimétré : deux trames superposées, comme une vraie feuille. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px),
    linear-gradient(var(--grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px);
  background-size:8px 8px, 8px 8px, 40px 40px, 40px 40px;
}
/* Halo diffus derrière le haut de page */
body::after{
  content:""; position:fixed; top:-25vh; left:0; right:0;
  height:80vh; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%, rgba(var(--brand-rgb),.17), transparent 70%);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }
button.row{ width:100%; text-align:start; cursor:pointer; font-family:inherit; }

:focus-visible{
  outline:2px solid var(--brand-bright);
  outline-offset:3px;
  border-radius:var(--r-s);
}

.page{ width:100%; max-width:600px; margin:0 auto; }

/* ---------- En-tête : la carte « feuille de relevé » ---------- */
.head{
  position:relative;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  border-radius:var(--r-l);
  box-shadow:var(--sh-m);
  padding:32px 22px 30px;
  text-align:center;
  overflow:hidden;
}
.head::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--brand-rgb),.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--brand-rgb),.07) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,#000,transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
}
.head > *{ position:relative; }

.medallion{
  width:104px; height:104px; margin:0 auto 16px;
  display:grid; place-items:center;
  border-radius:var(--r-pill);
  background:radial-gradient(circle at 50% 35%, #0F2E31, #071B1E);
  border:1px solid rgba(var(--brand-rgb),.36);
  box-shadow:0 0 0 8px rgba(var(--brand-rgb),.06), 0 14px 34px rgba(0,0,0,.5);
}
.medallion img{ width:70px; height:70px; object-fit:contain; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand); margin:0 0 8px;
}
h1{
  font-family:var(--font-display);
  font-weight:700; font-size:clamp(1.5rem,1.1rem + 1.7vw,2.1rem);
  line-height:1.15; letter-spacing:-.015em; margin:0;
}
.tagline{ color:var(--ink-2); margin:8px 0 0; font-size:.95rem; }

.levels{
  display:flex; flex-wrap:wrap; justify-content:center; gap:7px;
  margin:16px 0 0; padding:0; list-style:none;
}
.levels li{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--ink-2);
  background:rgba(var(--brand-rgb),.09);
  border:1px solid rgba(var(--brand-rgb),.22);
  border-radius:var(--r-pill);
  padding:4px 11px;
}

/* Signature : la courbe de progression, tracée au chargement */

/* ---------- Rubriques ---------- */
.section{ margin-top:26px; }
.section-title{
  font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 10px 4px;
  display:flex; align-items:center; gap:10px;
}
.section-title::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--line), transparent);
}

.stack{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }

/* ---------- La ligne de lien ---------- */
.row{
  display:flex; align-items:center; gap:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:13px 15px;
  box-shadow:var(--sh-s);
  transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.row:hover, .row:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(var(--brand-rgb),.5);
  background:var(--surface-2);
}
.row:active{ transform:translateY(0); }

.ic{
  flex:none; width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:12px;
  background:rgba(var(--brand-rgb),.10);
  border:1px solid rgba(var(--brand-rgb),.22);
  color:var(--brand-bright);
  transition:background .22s var(--ease), color .22s var(--ease);
}
.ic svg{ width:21px; height:21px; }
.row:hover .ic{ background:rgba(var(--brand-rgb),.18); }

.txt{ flex:1; min-width:0; }
.txt b{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:.98rem; line-height:1.3;
  overflow-wrap:anywhere;
}
.txt span{
  display:block; color:var(--ink-3); font-size:.82rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.go{ flex:none; color:var(--ink-3); display:grid; place-items:center; transition:transform .22s var(--ease), color .22s var(--ease); }
.go svg{ width:17px; height:17px; }
.row:hover .go{ color:var(--brand); transform:translateX(3px); }

/* Ligne principale : le site */
.row--main{
  background:linear-gradient(135deg, rgba(var(--brand-rgb),.16), rgba(150,212,83,.10));
  border-color:rgba(var(--brand-rgb),.42);
  padding:17px 16px;
}
.row--main .ic{ background:rgba(var(--brand-rgb),.20); color:var(--brand-bright); }
.row--main .txt b{ font-size:1.05rem; }
.row--main:hover{ background:linear-gradient(135deg, rgba(var(--brand-rgb),.24), rgba(150,212,83,.14)); }

/* Ligne WhatsApp : accent vert du logo */
.row--wa .ic{ background:rgba(150,212,83,.12); border-color:rgba(150,212,83,.26); color:var(--green-brt); }
.row--wa:hover{ border-color:rgba(150,212,83,.5); }
.row--wa:hover .ic{ background:rgba(150,212,83,.2); }
.row--wa:hover .go{ color:var(--green-brt); }

/* Ligne téléphone : appel + copie */
.tel{ display:flex; align-items:center; gap:8px; }
.tel .row{ flex:1 1 0; min-width:0; }
.tel .num{ font-family:var(--font-mono); font-size:1rem; letter-spacing:.02em; }
.copy{
  flex:none; width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:12px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-3);
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.copy:hover{ color:var(--brand); border-color:rgba(var(--brand-rgb),.45); background:var(--surface-2); }
.copy svg{ width:17px; height:17px; }
.copy .check{ display:none; }
.copy.done{ color:var(--green-brt); border-color:rgba(150,212,83,.45); }
.copy.done .copy-i{ display:none; }
.copy.done .check{ display:block; }

/* ---------- Pied ---------- */
.foot{ margin-top:30px; text-align:center; }
.share{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:.88rem;
  padding:10px 20px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  transition:color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.share:hover{ color:var(--brand-bright); border-color:rgba(var(--brand-rgb),.45); transform:translateY(-2px); }
.share svg{ width:16px; height:16px; }
.legal{ margin:16px 0 0; color:var(--ink-3); font-size:.78rem; }
.legal b{ color:var(--ink-2); font-weight:600; }

/* ---------- Message de confirmation ---------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,120%);
  background:var(--surface-2); border:1px solid rgba(var(--brand-rgb),.4);
  color:var(--ink); border-radius:var(--r-pill);
  padding:11px 20px; font-size:.86rem; box-shadow:var(--sh-m);
  z-index:50; pointer-events:none;
  transition:transform .32s var(--ease), opacity .32s var(--ease);
  opacity:0;
}
.toast.on{ transform:translate(-50%,0); opacity:1; }

/* ---------- Apparition en cascade ---------- */
.rise{ opacity:0; transform:translateY(14px); animation:rise .55s var(--ease) forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---------- Tablette et plus ---------- */
@media (min-width:640px){
  .page{ max-width:640px; }
  .head{ padding:40px 30px 36px; }
  .medallion{ width:118px; height:118px; }
  .medallion img{ width:80px; height:80px; }
  .stack--grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .row{ padding:15px 16px; }
}
@media (min-width:900px){
  .page{ max-width:700px; }
}

/* ---------- Petits écrans ---------- */
@media (max-width:400px){
  .row{ gap:11px; padding:12px 13px; }
  .txt b{ font-size:.94rem; }
  .txt span{ font-size:.79rem; }
}
@media (max-width:359px){
  .medallion{ width:88px; height:88px; }
  .medallion img{ width:58px; height:58px; }
  .ic{ width:38px; height:38px; }
  .copy{ width:44px; height:44px; }
}

@media (max-height:520px) and (orientation:landscape){
  body{ padding-top:18px; }
  .head{ padding-top:22px; padding-bottom:22px; }
  .medallion{ width:84px; height:84px; margin-bottom:12px; }
  .medallion img{ width:56px; height:56px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rise{ opacity:1; transform:none; }
}

/* ---------- Décalages d'apparition ---------- */
.d1{ animation-delay:.05s; }
.d2{ animation-delay:.14s; }
.d3{ animation-delay:.22s; }
.d4{ animation-delay:.3s; }
.d5{ animation-delay:.38s; }
.d6{ animation-delay:.44s; }
.d7{ animation-delay:.52s; }