/* ============================================================
   Guides : gabarit partagé
   Même direction artistique que les vidéos (08-montage) :
   fond blanc cassé à deux ombres d'angle, azur #1F4ED8,
   DM Serif Display italique pour les titres, Inter pour le texte,
   JetBrains Mono pour le code, commandes dans un vrai terminal sombre.
   Une seule version, claire, comme les vidéos.
   Les noms de variables sont gardés : les schémas SVG des guides s'en servent.
   ============================================================ */
:root{
  color-scheme:light;
  --paper:#FDFDFD;
  --cream:#FAF9F5;
  --card:#FFFFFF;
  --card-2:#F4F3EF;
  --ink:#101018;
  --ink-2:#3A3A48;
  --muted:#6D6D7A;
  --rule:#ECEAE4;
  --rule-strong:#D9D6CC;
  --azur:#1F4ED8;
  --azur-deep:#1639A8;
  --azur-soft:#EEF1FB;
  --sky:#9DB6F7;
  --stamp:#B3261E;
  --ochre:#8A6D1A;
  --ochre-soft:#FDF3D8;
  --hl:#F5E04B;
  --term:#15151D;
  --term-bar:#1E1E29;
  --term-ink:#E6E6EE;
  --wa:#25D366;
  --lift:0 1px 2px rgba(16,16,24,.04), 0 22px 50px -26px rgba(16,16,24,.30);
  --lift-strong:0 2px 4px rgba(16,16,24,.06), 0 34px 80px -30px rgba(16,16,24,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 900px at 92% -8%, rgba(24,28,52,.055), transparent 60%),
    radial-gradient(1000px 800px at -12% 108%, rgba(24,28,52,.045), transparent 55%),
    var(--paper);
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:17.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:44rem;margin:0 auto;padding-inline:1.35rem;padding-block:0 6rem}

/* ---------- typographie ---------- */
h1,h2,.serif{
  font-family:"DM Serif Display", Georgia, "Times New Roman", serif;
  font-style:italic;font-weight:400;
  letter-spacing:-.005em;text-wrap:balance;margin:0;color:var(--ink);
}
h1{font-size:clamp(2.7rem, 10vw, 4rem);line-height:1.02}
h2{font-size:clamp(1.95rem, 6.2vw, 2.55rem);line-height:1.08;margin:3.6rem 0 1rem}
h3{
  font-family:"Inter", sans-serif;font-weight:800;font-size:1.1rem;
  letter-spacing:-.012em;line-height:1.3;margin:2rem 0 .5rem;text-wrap:balance;
}
p{margin:0 0 1.1rem}
strong{font-weight:700;color:var(--ink)}
em{font-style:italic}
a{color:var(--azur);text-underline-offset:.2em;text-decoration-thickness:1.5px}
a:hover{color:var(--azur-deep)}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--azur);outline-offset:3px;border-radius:6px}
ul,ol{margin:0 0 1.1rem;padding-left:1.3rem}
li{margin-bottom:.45rem}
li::marker{color:var(--muted)}
hr{border:none;border-top:1px solid var(--rule);margin:2.6rem 0}

.mono{font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace}
.eyebrow,.lbl{
  font-family:"Inter", sans-serif;font-weight:800;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);
}

/* ---------- en-tête ---------- */
.masthead{padding:3.4rem 0 0}
.stamp{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--ink);color:#FDFDFD;border-radius:999px;
  padding:.5rem 1rem;
  font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;
  box-shadow:0 12px 30px -14px rgba(16,16,24,.55);
}
.stamp small{font-size:inherit;font-weight:700;letter-spacing:.14em;color:var(--sky)}
.masthead h1{margin:1.4rem 0 0}
.standfirst{font-size:1.14rem;line-height:1.6;color:var(--ink-2);margin:1rem 0 0;max-width:38ch}
.byline{
  display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;align-items:center;
  margin-top:1.8rem;padding-top:1rem;border-top:1px solid var(--rule);
  font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);
}
.byline span+span::before{content:"·";margin-right:1.2rem;color:var(--rule-strong)}

/* ---------- présentation d'Anthony ---------- */
.hello{display:flex;gap:1rem;align-items:flex-start;margin:2.1rem 0 0}
.hello img{
  width:68px;height:68px;flex:none;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px #fff, 0 12px 28px -10px rgba(16,16,24,.45);
}
.hello p{margin:0;font-size:.98rem;line-height:1.6;color:var(--ink-2)}
.hello .hello-title{
  font-family:"DM Serif Display", Georgia, serif;font-style:italic;font-weight:400;
  font-size:1.55rem;line-height:1.1;color:var(--ink);margin:.2rem 0 .45rem;
}

/* ---------- i am rank, l'outil d'Anthony (remplace le bandeau Noota le 08/11/2026) ----------
   Un morceau du site iamrank.com posé dans le guide, avec SA direction artistique, pas celle
   des guides. Source : le site en ligne (iamrank-pro/src/app/globals.css), qui prime sur son
   DESIGN.md : fond gris chaud #EBEBEA à grain fin, encre #0A0A0A, Inter 600 serré,
   bleu marque #487AFF (logo, mot clef souligné en pointillés, annotation),
   bleu d'action #2F62F6 (bouton, survol #2450DB en 150 ms), bouton 48 px à coins de 10 px,
   tuile moteur blanche penchée à -6° dont le logo glisse toutes les 2,5 s,
   « 100 % gratuit » manuscrit en Caveat. Textes = ceux du héros en ligne, tels quels.
   Le lien va vers l'accueil (jamais vers le scan en direct : règle d'Anthony du 26/10),
   avec utm_medium=guide et utm_campaign=<mot-clé> ; guide.js pose utm_source selon ?src.
   Le bloc HTML est écrit par 06-guides/iamrank.py : le modifier là, pas à la main. */
.iar{
  --iar-ink:#0A0A0A;--iar-muted:#52525B;--iar-line:#E7E7E9;
  --iar-brand:#487AFF;--iar-action:#2F62F6;--iar-action-deep:#2450DB;
  display:block;position:relative;margin:1.7rem 0 0;padding:1.3rem 1.35rem 1.4rem;
  border-radius:24px;border:1px solid #E0E0DE;
  background-color:#EBEBEA;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.58' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='4.0' intercept='-1.5'/%3E%3CfeFuncG type='linear' slope='4.0' intercept='-1.5'/%3E%3CfeFuncB type='linear' slope='4.0' intercept='-1.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-blend-mode:overlay;
  color:var(--iar-ink);text-decoration:none;
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  box-shadow:var(--lift);
  transition:transform .18s ease, box-shadow .18s ease;
}
.iar:hover{color:var(--iar-ink);transform:translateY(-2px);box-shadow:var(--lift-strong)}
.iar:focus-visible{outline:3px solid rgba(72,122,255,.5);outline-offset:3px;border-radius:24px}
.iar-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.iar-mark{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:17px;letter-spacing:-.025em;line-height:1}
.iar-mark svg{width:28px;height:28px;flex:none}
.iar-pill{
  font-size:12px;font-weight:500;line-height:1.4;white-space:nowrap;
  color:var(--iar-action);background:rgba(43,95,217,.08);border-radius:999px;padding:4px 10px;
}
.iar-title{
  display:block;margin:1.5rem auto 0;max-width:19ch;text-align:center;text-wrap:balance;
  font-weight:600;font-size:clamp(1.75rem, 7.4vw, 2.4rem);line-height:1.14;letter-spacing:-.028em;
}
.iar-u{
  color:var(--iar-brand);text-decoration:underline dashed var(--iar-brand);
  text-decoration-thickness:.06em;text-underline-offset:.14em;
}
.iar-tile{
  display:inline-block;position:relative;width:1.12em;height:1.12em;vertical-align:-.17em;margin:0 .04em;
  border-radius:.24em;background:#fff;border:1px solid var(--iar-line);overflow:hidden;
  box-shadow:0 1px 2px rgba(10,10,10,.06), 0 4px 12px rgba(10,10,10,.08);
  transform:rotate(-6deg);
}
.iar-reel{
  position:absolute;top:0;left:0;right:0;height:600%;display:flex;flex-direction:column;
  animation:iar-reel 12.5s cubic-bezier(.32,.72,0,1) infinite;
}
.iar-reel>span{height:16.6667%;display:flex;align-items:center;justify-content:center}
.iar-reel svg{width:.6em;height:.6em}
/* 5 logos, 2,5 s chacun, glissement de 0,4 s (3,2 % du cycle) ; le 6e = le 1er, pour boucler sans saut */
@keyframes iar-reel{
  0%,16.8%{transform:translateY(0)}
  20%,36.8%{transform:translateY(-16.6667%)}
  40%,56.8%{transform:translateY(-33.3333%)}
  60%,76.8%{transform:translateY(-50%)}
  80%,96.8%{transform:translateY(-66.6667%)}
  100%{transform:translateY(-83.3333%)}
}
.iar-sub{
  display:block;margin:.85rem auto 0;max-width:36ch;text-align:center;text-wrap:balance;
  font-size:15.5px;line-height:1.6;color:var(--iar-muted);
}
.iar-cta{display:block;position:relative;max-width:21rem;margin:3.7rem auto 0}
.iar-hand{
  position:absolute;right:.4rem;bottom:calc(100% - .2rem);
  display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;
  font-family:"Caveat", "Bradley Hand", cursive;font-weight:600;font-size:1.6rem;line-height:1;
  color:var(--iar-brand);white-space:nowrap;transform:rotate(-5deg);
}
.iar-hand svg{width:30px;height:32px;margin:.1rem 1.6rem 0 0}
.iar-btn{
  display:flex;align-items:center;justify-content:center;gap:.5rem;height:48px;padding:0 20px;
  border-radius:10px;background:var(--iar-action);color:#fff;
  font-weight:600;font-size:16px;letter-spacing:-.005em;
  box-shadow:0 1px 2px rgba(10,10,10,.04), 0 8px 24px rgba(10,10,10,.06);
  transition:background-color .15s ease;
}
.iar:hover .iar-btn{background:var(--iar-action-deep)}
.iar-btn svg{width:16px;height:16px;flex:none}
.iar-note{display:block;margin-top:.75rem;text-align:center;font-size:13.5px;line-height:1.5;color:var(--iar-muted)}

/* ---------- sommaire ---------- */
.toc{
  background:var(--card);border-radius:22px;padding:1.4rem 1.5rem .9rem;
  margin:2.4rem 0 0;box-shadow:var(--lift);
}
.toc .eyebrow{display:block;margin-bottom:.5rem}
.toc ol{list-style:none;counter-reset:toc;margin:0;padding:0}
.toc li{
  counter-increment:toc;display:flex;align-items:baseline;gap:.9rem;
  padding:.55rem 0;margin:0;border-top:1px solid var(--rule);
}
.toc li:first-child{border-top:0}
.toc li::before{
  content:counter(toc);flex:none;width:1.4rem;text-align:right;
  font-family:"DM Serif Display", Georgia, serif;font-style:italic;font-size:1.3rem;line-height:1;color:var(--azur);
}
.toc a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.98rem;line-height:1.4}
.toc a:hover{color:var(--azur)}

/* ---------- blocs ---------- */
.note,.warn{border-radius:18px;padding:1.15rem 1.3rem;margin:1.7rem 0;font-size:.97rem;line-height:1.62}
.note{background:var(--azur-soft)}
.warn{background:var(--ochre-soft)}
.note p:last-child,.warn p:last-child{margin-bottom:0}
.note .lbl,.warn .lbl{display:block;margin-bottom:.45rem}
.note .lbl{color:var(--azur)}
.warn .lbl{color:var(--ochre)}
.note strong,.warn strong{color:var(--ink)}

/* ---------- code : le terminal des vidéos ---------- */
.codewrap{position:relative;margin:1.4rem 0}
pre{
  margin:1.4rem 0;padding:2.6rem 1.2rem 1.15rem;
  background:
    radial-gradient(circle at 20px 18px, #FF5F57 5px, transparent 5.6px),
    radial-gradient(circle at 38px 18px, #FEBC2E 5px, transparent 5.6px),
    radial-gradient(circle at 56px 18px, #28C840 5px, transparent 5.6px),
    linear-gradient(var(--term-bar), var(--term-bar)) top / 100% 36px no-repeat,
    var(--term);
  color:var(--term-ink);border-radius:16px;box-shadow:var(--lift-strong);
  overflow-x:auto;font-family:"JetBrains Mono", ui-monospace, monospace;font-size:.84rem;line-height:1.62;
}
.codewrap pre{margin:0}
code{
  font-family:"JetBrains Mono", ui-monospace, monospace;font-size:.86em;
  background:var(--azur-soft);color:var(--azur-deep);padding:.12em .4em;border-radius:6px;
}
pre code{background:none;color:inherit;padding:0;font-size:1em}
.copy{
  position:absolute;top:.42rem;right:.55rem;
  font-family:"Inter", sans-serif;font-weight:700;font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;
  color:#C9C9D6;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:.3rem .75rem;cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.copy:hover{background:rgba(255,255,255,.14);color:#fff}
.copy[data-done="1"]{background:var(--azur);border-color:var(--azur);color:#fff}

/* ---------- listes ---------- */
.steps{counter-reset:step;list-style:none;padding:0;margin:1.6rem 0}
.steps > li{counter-increment:step;position:relative;padding-left:3rem;margin-bottom:1.7rem}
.steps > li::before{
  content:counter(step);position:absolute;left:0;top:-.05em;
  width:2.05rem;height:2.05rem;border-radius:50%;display:grid;place-items:center;
  background:var(--azur);color:#fff;box-shadow:0 10px 24px -10px rgba(31,78,216,.7);
  font-family:"DM Serif Display", Georgia, serif;font-style:italic;font-size:1.15rem;line-height:1;
}
.steps h3{margin-top:0;padding-top:.15rem}

.check{list-style:none;padding:0;margin:1.4rem 0}
.check li{position:relative;padding-left:2rem;margin-bottom:.7rem}
.check li::before{
  content:"";position:absolute;left:0;top:.28em;width:1.2rem;height:1.2rem;border-radius:50%;
  background:var(--azur-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%231F4ED8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}

/* ---------- figures ---------- */
figure{margin:2rem 0}
figure:has(> svg){background:var(--card);border-radius:20px;padding:1.1rem 1rem .9rem;box-shadow:var(--lift)}
figure svg{display:block;width:100%;height:auto}
figcaption{font-size:.8rem;color:var(--muted);margin-top:.7rem;text-align:center;line-height:1.45}
.shotfig{background:var(--card);border-radius:20px;padding:.6rem;box-shadow:var(--lift)}
.shotfig img{width:100%;height:auto;display:block;border-radius:14px}
.shotfig figcaption{text-align:left;padding:.2rem .5rem .3rem}

/* ---------- l'appel WhatsApp, en haut du guide (sous la présentation) ---------- */
.club{
  position:relative;overflow:hidden;margin:1.7rem 0 0;
  background:
    radial-gradient(520px 320px at 88% -10%, rgba(31,78,216,.55), transparent 70%),
    radial-gradient(420px 300px at -10% 120%, rgba(37,211,102,.16), transparent 70%),
    var(--ink);
  color:#FDFDFD;border-radius:28px;padding:1.9rem 1.6rem 1.7rem;box-shadow:var(--lift-strong);
}
.club .lbl{color:var(--sky);display:block}
.club .club-title{
  font-family:"DM Serif Display", Georgia, serif;font-style:italic;font-weight:400;
  font-size:clamp(2rem, 7.5vw, 2.6rem);line-height:1.05;margin:.6rem 0 .7rem;color:#FDFDFD;text-wrap:balance;
}
.club .club-title span{color:var(--sky)}
.club p{color:#C9CAD6;font-size:1rem;line-height:1.6;margin:0 0 1.3rem;max-width:34ch}
.club-btn{
  display:inline-flex;align-items:center;gap:.65rem;
  background:var(--wa);color:#0B2E18;text-decoration:none;
  font-weight:800;font-size:1rem;border-radius:999px;padding:.85rem 1.35rem;
  box-shadow:0 16px 36px -14px rgba(37,211,102,.75);
  transition:transform .15s ease, box-shadow .15s ease;
}
.club-btn:hover{color:#0B2E18;transform:translateY(-1px);box-shadow:0 20px 42px -14px rgba(37,211,102,.9)}
.club-btn svg{width:1.3rem;height:1.3rem;flex:none}
.club-meta{display:block;margin-top:.9rem;font-size:.8rem;color:#8E8FA3}

/* ---------- pied ---------- */
.colophon{margin-top:4.2rem;padding-top:1.4rem;border-top:1px solid var(--rule);font-size:.88rem;line-height:1.6;color:var(--muted)}
.colophon a{color:var(--muted)}
.colophon strong{color:var(--ink-2)}

/* ---------- accueil ---------- */
.grid{display:grid;gap:1rem;margin:2.4rem 0}
.gcard{
  display:block;background:var(--card);border-radius:22px;padding:1.3rem 1.4rem 1.2rem;
  text-decoration:none;color:inherit;box-shadow:var(--lift);
  transition:transform .18s ease, box-shadow .18s ease;
}
.gcard:hover{transform:translateY(-2px);box-shadow:var(--lift-strong)}
.gcard .kw{
  display:inline-block;background:var(--azur-soft);color:var(--azur);border-radius:999px;padding:.28rem .7rem;
  font-weight:800;font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;
}
.gcard h3{
  font-family:"DM Serif Display", Georgia, serif;font-style:italic;font-weight:400;
  font-size:1.55rem;letter-spacing:0;margin:.6rem 0 .3rem;color:var(--ink);
}
.gcard p{margin:0;font-size:.94rem;color:var(--muted);line-height:1.55}

@media (max-width:520px){
  body{font-size:17px}
  .wrap{padding-inline:1.1rem;padding-block:0 4.5rem}
  .masthead{padding-top:2.4rem}
  .club{padding:1.6rem 1.3rem 1.5rem}
  .club-btn{width:100%;justify-content:center}
  .iar{padding:1.15rem 1.1rem 1.25rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}