/* ============================================================
   Órama Consulting — la feuille des pages publiques
   ------------------------------------------------------------
   La vitrine a longtemps tenu en une seule page, son style posé en
   ligne. Depuis le 10 octobre 2026 chaque produit a la sienne —
   l'accueil, Órama Ads, Órama Trading, Órama Run — et quatre copies
   d'un même style divergent au premier ajustement : c'est exactement
   ce qui avait fait naître `commun/orama-theme.css`. D'où ce fichier.

   Charte identique au back-office (ads/dashboard/style.css) : fond
   noir franc, couleurs Google saturées, Space Grotesk pour les titres,
   IBM Plex Sans pour le texte, Mono pour les chiffres. À charger AVANT
   le thème partagé, qui redéfinit les jetons en clair.

   Les pages légales et celle des tarifs n'en dépendent pas, volontairement :
   elles gardent leur propre feuille et ne chargent pas le thème.
   ============================================================ */
:root{
  --g-blue:#4285F4; --g-blue-action:#1A73E8; --g-green:#34A853;
  --g-yellow:#FBBC05; --g-red:#EA4335; --g-orange:#E37400;
  /* Les accents que le thème partagé redéfinit en clair. En sombre, ils
     reprennent le bleu et le vert Google de la version d'origine : sans
     cette ligne, `var(--amber)` ne résolvait rien et les icônes perdaient
     leur couleur. */
  --amber:var(--g-blue); --teal:var(--g-green);
  --bg:#000; --panel:#121316; --panel-alt:#1A1B1E; --panel-raised:#202124;
  --border:#2A2B2E; --border-soft:#1C1D20;
  --text-1:#FFF; --text-2:#BDC1C6; --text-3:#9AA0A6;
  --font:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --max:1140px;

  /* UNE COULEUR D'ACCENT PAR PRODUIT — bleu pour Ads, vert pour Trading,
     ambre pour Run, comme dans les applications elles-mêmes. Chaque page
     (et chaque carte de produit de l'accueil) pose sa classe `p-…`, qui
     ne fait que changer ces quatre jetons. Ils vont par paires parce
     qu'une teinte n'est pas une encre : l'ambre de Run plafonne à 2,1:1
     en texte sur du clair, il ne sert donc qu'en aplat, et son texte
     passe par `--violet`, que le thème descend d'un cran en clair. */
  --accent:var(--g-blue);
  --accent-texte:var(--amber);
  --accent-plein:var(--g-blue-action);
  --sur-accent-plein:#fff;
  --degrade:linear-gradient(96deg,var(--g-blue),var(--g-green) 48%,var(--g-yellow));
}
/* Le vert plein porte du blanc à 3,06:1 seulement ; l'aplat profond du
   thème (`--teal-plein`) le porte dans les deux thèmes. L'ambre, lui,
   porte du noir — et ce couple ne bouge pas avec le thème. */
.p-ads{
  --accent:var(--g-blue); --accent-texte:var(--amber);
  --accent-plein:var(--g-blue-action); --sur-accent-plein:#fff;
  --degrade:linear-gradient(96deg,var(--g-blue),var(--g-green) 48%,var(--g-yellow));
}
.p-trading{
  --accent:var(--g-green); --accent-texte:var(--teal);
  --accent-plein:var(--teal-plein); --sur-accent-plein:#fff;
  --degrade:linear-gradient(96deg,#81C995,var(--g-green));
}
.p-run{
  --accent:var(--g-yellow); --accent-texte:var(--violet);
  --accent-plein:var(--g-yellow); --sur-accent-plein:#202124;
  --degrade:linear-gradient(96deg,#FDE293,var(--g-yellow) 55%,#F9AB00);
}
/* Les dégradés des titres sont du TEXTE : en clair, le jaune et le vert
   pâle y disparaissaient. Ils descendent ici vers les encres que le
   thème mesure pour le clair (`--amber`, `--teal`, `--violet`). */
:root[data-theme="clair"],
:root[data-theme="clair"] .p-ads{ --degrade:linear-gradient(96deg,#1967D2,#188038 52%,#9A5300); }
/* #188038 tient sur le verre, pas sur le fond nu ni sur le halo vert du
   hero : 4,47:1 sous les numéros d'étape, 3,6 sous l'état du hero à
   390 px. L'encre de pastille du thème (#0D652D) tient partout. */
:root[data-theme="clair"] .p-trading{ --degrade:linear-gradient(96deg,#188038,#0D652D); --accent-texte:var(--teal-encre); }
:root[data-theme="clair"] .p-run{ --degrade:linear-gradient(96deg,#B06000,#7A4100); }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--text-1);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,.font-title{font-family:var(--font);letter-spacing:-.02em;}
a{color:inherit;}
img,svg{max-width:100%;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.eyebrow{
  font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--text-3);font-family:var(--font);font-weight:500;margin:0 0 14px;
}
.section{padding:96px 0;border-top:1px solid var(--border-soft);}
.section h2{font-size:clamp(26px,3.4vw,38px);font-weight:600;margin:0 0 16px;line-height:1.15;}
.section .lead{font-size:17px;color:var(--text-2);max-width:62ch;margin:0 0 44px;}
/* L'en-tête est collant : sans cette marge, une ancre suivie depuis une
   autre page posait le titre de la section SOUS lui. Sur téléphone il
   prend deux lignes, d'où la marge large. */
[id]{scroll-margin-top:96px;}

/* ---------------- En-tête ---------------- */
header{
  position:sticky;top:0;z-index:50;background:var(--verre-bas);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.hd{display:flex;align-items:center;gap:24px;height:66px;}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto;}
.brand-mark{width:34px;height:34px;border-radius:9px;background:var(--panel-alt);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-1);}
.brand-txt{display:flex;flex-direction:column;line-height:1.05;}
.brand-txt b{font-family:var(--font);font-size:17px;font-weight:600;}
.brand-txt span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);}

/* LES PAGES. Une pastille de la couleur du produit devant chaque lien :
   c'est la même que celle du menu « Se connecter », et c'est elle qu'on
   retrouve en tête de chaque page. La page ouverte se souligne de sa
   propre teinte (`aria-current`, que les lecteurs d'écran annoncent). */
.pages{display:flex;gap:24px;margin-left:auto;}
.pages a{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2);
  text-decoration:none;transition:color .15s ease;padding:6px 0;border-bottom:2px solid transparent;
}
.pages a:hover{color:var(--text-1);}
.pages a[aria-current="page"]{color:var(--text-1);border-bottom-color:var(--accent-texte);}
.pages a.p-ads::before,.pages a.p-trading::before,.pages a.p-run::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;
}
.pages a:focus-visible{outline:2px solid var(--g-blue);outline-offset:3px;border-radius:3px;}

.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:14px;
  font-weight:600;border-radius:9px;padding:11px 18px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:filter .15s ease,border-color .15s ease,transform .15s ease;
}
.btn:hover{filter:brightness(1.12);}
.btn-primary{background:var(--accent-plein);color:var(--sur-accent-plein);}
.btn-ghost{background:transparent;color:var(--text-1);border-color:var(--border);}
.btn-ghost:hover{border-color:var(--accent);}
.btn-lg{padding:14px 24px;font-size:15px;}
.hd .btn{flex:0 0 auto;padding:9px 15px;font-size:13.5px;}
/* « Se connecter » reste bleu sur toutes les pages : c'est la même
   commande partout, elle ne prend pas la teinte du produit ouvert. */
.hd .acces > .btn-primary{background:var(--g-blue-action);color:#fff;}

/* ---------------- Les trois espaces ----------------
   Un compte par produit, chacun à son adresse (chantier S, 17 septembre
   2026) : le menu est l'aiguillage vers les applications, les pages
   l'aiguillage vers ce qu'elles font. Un <details> plutôt qu'un menu
   scripté — il s'ouvre au clavier et sans JavaScript ; `vitrine.js` ne
   fait que le refermer d'un clic ailleurs ou d'Échap. Chaque espace montre
   son adresse, parce que c'est elle que le visiteur retrouvera dans la
   barre du navigateur, et son état quand il n'est pas ouvert à tous. */
.acces{position:relative;flex:0 0 auto;}
.acces > summary{list-style:none;}
.acces > summary::-webkit-details-marker{display:none;}
.acces > summary svg{transition:transform .15s ease;}
.acces[open] > summary svg{transform:rotate(180deg);}
.btn:focus-visible,.espace:focus-visible,.produit:focus-visible,.autre:focus-visible{outline:2px solid var(--g-blue);outline-offset:2px;}
.espaces{
  position:absolute;right:0;top:calc(100% + 10px);z-index:60;
  width:min(360px,calc(100vw - 48px));padding:8px;
  /* Le panneau du thème est du VERRE, translucide en clair : posé sur le
     titre de la page, il le laissait lire au travers. Le fond opaque de la
     page passe dessous, le verre dessus — la même teinte, sans transparence. */
  background:linear-gradient(var(--panel),var(--panel)),var(--bg);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--verre-ombre);display:grid;gap:2px;
}
.espace{
  display:grid;grid-template-columns:10px 1fr;column-gap:12px;row-gap:2px;
  padding:12px 12px 13px;border-radius:10px;text-decoration:none;color:var(--text-1);
}
.espace:hover{background:var(--panel-alt);}
.espace .pastille{width:10px;height:10px;border-radius:50%;margin-top:7px;grid-row:span 3;background:var(--accent);}
.espace .nom{font-family:var(--font);font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.espace .quoi{font-size:13px;color:var(--text-2);line-height:1.45;}
.espace .ou{font-family:var(--mono);font-size:11.5px;color:var(--text-3);}
.etat{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:99px;border:1px solid var(--border);color:var(--text-3);white-space:nowrap;
}
@media (max-width:560px){ .hd{gap:14px;} .brand-txt span{display:none;} }
/* La bascule de thème flotte en haut à droite au-dessus de 900 px. Tant que
   la page est trop étroite pour que la colonne de 1140 px la laisse libre,
   elle recouvrait la fin du bouton — le même défaut que « Se déconnecter »
   au portail, corrigé le 19 septembre. En dessous de 900 px, elle descend
   en bas de l'écran. */
@media (min-width:901px) and (max-width:1300px){ .hd{padding-right:72px;} }

/* ---------------- Hero ---------------- */
.hero{position:relative;padding:110px 0 96px;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:-40% 0 auto 50%;transform:translateX(-50%);
  width:1100px;height:1100px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 15%,transparent),transparent 62%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;}
.hero h1{font-size:clamp(34px,5vw,56px);font-weight:600;line-height:1.06;margin:0 0 22px;text-wrap:balance;}
.hero h1 em{font-style:normal;background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p.sub{font-size:18px;color:var(--text-2);max-width:54ch;margin:0 0 34px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px;}
.hero-meta{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--text-3);}
.hero-meta span,.hero-meta a{display:flex;align-items:center;gap:8px;text-decoration:none;}
.hero-meta a:hover{color:var(--text-1);}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.hero .etat{display:inline-block;margin-bottom:18px;font-size:11px;padding:4px 10px;color:var(--accent-texte);border-color:color-mix(in srgb,var(--accent) 45%,transparent);}

/* -- Portrait -- */
.portrait{
  position:relative;background:var(--panel);border:1px solid var(--border);
  border-radius:22px;padding:26px;text-align:center;
}
.portrait-frame{
  width:100%;aspect-ratio:1;border-radius:18px;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#1D2432,#0C0D10 72%);
  display:flex;align-items:flex-end;justify-content:center;margin-bottom:18px;
}
.portrait h2{font-size:19px;font-weight:600;margin:0 0 3px;}
.portrait .role{font-size:12.5px;color:var(--text-3);font-family:var(--mono);}
.portrait .tags{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:16px;}
.tag{font-size:11px;font-family:var(--font);letter-spacing:.04em;padding:5px 10px;border-radius:99px;border:1px solid var(--border);color:var(--text-2);background:var(--panel-alt);}

/* -- La fiche d'un produit, à droite de son titre --
   Ce qu'il lit, et ce qu'il ne fait pas : la seconde liste est la plus
   importante des deux, c'est elle qu'on ne trouve pas ailleurs. */
.fiche{
  position:relative;background:var(--panel);border:1px solid var(--border);
  border-radius:22px;padding:28px 28px 26px;
}
.fiche::before{
  content:"";position:absolute;left:28px;right:28px;top:-1px;height:2px;border-radius:2px;background:var(--accent-texte);
}
.fiche .oeil{width:64px;height:64px;color:var(--text-1);display:block;margin-bottom:18px;}
.fiche h2{font-size:13px;font-family:var(--font);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:0 0 10px;}
.fiche ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px;}
.fiche ul:last-child{margin-bottom:0;}
.fiche li{position:relative;padding-left:24px;font-size:14.5px;color:var(--text-2);line-height:1.5;}
.fiche li::before{position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px;}
.fiche .lit li::before{content:"→";color:var(--accent-texte);}
.fiche .pas li::before{content:"×";color:var(--text-3);font-size:15px;}

/* -- Le haut de l'accueil, sans portrait : l'œil de la marque à sa place. -- */
.hero-oeil{text-align:center;color:var(--text-1);}
.hero-oeil svg{width:min(360px,100%);height:auto;display:block;margin:0 auto;}
.hero-oeil p{font-family:var(--font);font-size:22px;margin:18px 0 0;color:var(--text-2);}
.hero-oeil p span{color:var(--text-1);font-weight:600;}

/* -- « Qui suis-je ? » : le portrait À CÔTÉ du parcours, et non six
   sections plus haut. Il reste en vue pendant qu'on lit (sticky), tant que
   la place le permet. -- */
/* `clip` et non `hidden` : hidden fait de la section un conteneur de défilement,
   et le portrait collant ne collait plus. */
.profil{padding-top:80px;overflow:clip;}
.profil-grid{position:relative;display:grid;grid-template-columns:.75fr 1.25fr;gap:64px;align-items:start;}
.profil-portrait{position:sticky;top:96px;}
.profil h1{font-size:clamp(34px,5vw,52px);}
.bio-texte p{font-size:16.5px;color:var(--text-2);margin:0 0 18px;}
.bio-texte p strong{color:var(--text-1);font-weight:600;}
.bio-texte .langues{font-family:var(--mono);font-size:12.5px;color:var(--text-3);border-top:1px solid var(--border-soft);padding-top:16px;margin-top:26px;}
.titre-frise{font-size:22px;font-weight:600;margin:48px 0 22px;}

/* -- Le rappel, en bas de l'accueil : une carte, pas une section entière. -- */
#profil.section{padding:56px 0;}
.rappel-profil{
  display:flex;align-items:center;gap:22px;text-decoration:none;color:var(--text-1);
  background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:22px 26px;
  transition:border-color .18s ease;
}
.rappel-profil:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));}
.rappel-profil:focus-visible{outline:2px solid var(--g-blue);outline-offset:2px;}
.rappel-profil img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:0 0 auto;}
.rappel-profil .txt{display:flex;flex-direction:column;gap:4px;}
.rappel-profil .eyebrow{margin:0;}
.rappel-profil b{font-family:var(--font);font-size:19px;font-weight:600;}
.rappel-profil .txt > span:last-child{font-size:14.5px;color:var(--text-2);}
.rappel-profil .fl{margin-left:auto;flex:0 0 auto;color:var(--accent-texte);}

/* ---------------- Le nom ---------------- */
.name-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;}
.greek{
  background:var(--panel);border:1px solid var(--border);border-radius:20px;
  padding:44px 32px;text-align:center;
}
.greek .word{font-family:var(--font);font-size:clamp(38px,6vw,62px);font-weight:600;line-height:1;margin-bottom:10px;}
.greek .phon{font-family:var(--mono);font-size:13px;color:var(--text-3);letter-spacing:.06em;}
.greek .sep{height:1px;background:var(--border);margin:24px 0;}
.greek .trans{font-size:15px;color:var(--text-2);}
.greek .trans b{color:var(--text-1);}
.name-grid p{font-size:16.5px;color:var(--text-2);margin:0 0 18px;}
.name-grid p strong{color:var(--text-1);font-weight:600;}
.etym{
  font-family:var(--mono);font-size:13px;color:var(--text-3);
  border-left:2px solid var(--g-blue);padding:4px 0 4px 16px;margin:26px 0 0;line-height:1.7;
}
.etym b{color:var(--amber);}

/* ---------------- Les produits, sur l'accueil ----------------
   Une carte entière est un lien : sur téléphone, viser un « Découvrir »
   de quatorze pixels de haut est une épreuve. Le filet du haut porte la
   teinte du produit — c'est la seule couleur de la carte, le reste est
   la charte commune. */
.produits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.produit{
  position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--text-1);
  background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:30px 26px 26px;
  transition:border-color .18s ease,transform .18s ease;
}
.produit::before{content:"";position:absolute;left:26px;right:26px;top:-1px;height:2px;border-radius:2px;background:var(--accent-texte);}
.produit:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));transform:translateY(-2px);}
.produit .tete{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.produit .oeil{width:46px;height:46px;flex:0 0 auto;color:var(--text-1);}
.produit h3{font-size:21px;font-weight:600;margin:0;line-height:1.15;}
.produit .tete .etat{display:inline-block;margin-top:6px;}
.produit > p{color:var(--text-2);font-size:15px;margin:0 0 20px;}
.produit ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;}
.produit li{position:relative;padding-left:20px;font-size:14px;color:var(--text-2);line-height:1.5;}
.produit li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:2px;background:color-mix(in srgb,var(--accent) 70%,transparent);}
.produit .suite{margin-top:auto;font-family:var(--font);font-weight:600;font-size:14.5px;color:var(--accent-texte);display:flex;align-items:center;gap:8px;}
.produit:hover .suite svg{transform:translateX(3px);}
.produit .suite svg{transition:transform .18s ease;}

/* ---------------- Lire, jamais écrire ---------------- */
.regles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.regle{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px;border-left:3px solid var(--accent-texte);}
.regle .qui{font-family:var(--font);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-texte);margin:0 0 8px;}
.regle h3{font-size:16px;font-weight:600;margin:0 0 8px;}
.regle p{font-size:14px;color:var(--text-2);margin:0;}

/* ---------------- Deux publics ---------------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.offer{
  background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:34px 30px;
  display:flex;flex-direction:column;transition:border-color .18s ease,transform .18s ease;
}
.offer:hover{border-color:var(--border-fort, #3A3B3F);transform:translateY(-2px);}
.offer .who{font-size:11px;font-family:var(--font);letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;}
.offer.a .who{color:var(--amber);}
.offer.b .who{color:var(--teal);}
.offer h3{font-size:23px;font-weight:600;margin:0 0 12px;}
.offer > p{color:var(--text-2);font-size:15px;margin:0 0 22px;}
.offer ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:13px;}
.offer li{position:relative;padding-left:26px;font-size:14.5px;color:var(--text-2);}
.offer li::before{
  content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border-radius:3px;
  background:var(--panel-raised);border:1px solid var(--border);
}
.offer.a li::before{border-color:rgba(66,133,244,.5);}
.offer.b li::before{border-color:rgba(52,168,83,.5);}
.offer li b{color:var(--text-1);font-weight:600;}
.offer .foot{margin-top:auto;font-size:13px;color:var(--text-3);border-top:1px solid var(--border-soft);padding-top:18px;}

/* ---------------- Les modules, les onglets ---------------- */
.plat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:44px;}
.plat-head .lead{margin-bottom:0;}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;}
.mod{
  background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px;
  transition:border-color .18s ease,background .18s ease;
}
.mod:hover{border-color:var(--border-fort, #3A3B3F);background:var(--panel-alt);}
.mod-ic{
  width:36px;height:36px;border-radius:10px;background:var(--panel-raised);
  display:flex;align-items:center;justify-content:center;margin-bottom:15px;color:var(--text-2);
}
.mod-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.mod h3{font-size:15.5px;font-weight:600;margin:0 0 7px;}
.mod p{font-size:13.5px;color:var(--text-3);margin:0;line-height:1.6;}
.mod.ads .mod-ic{color:var(--amber);}
.mod.ga4 .mod-ic{color:var(--src-ga4-texte,var(--g-orange));}
.mod.gmb .mod-ic{color:var(--teal);}
.mod.ia  .mod-ic{color:var(--violet);}
/* Sur les pages Trading et Run, toutes les icônes prennent la teinte du
   produit : il n'y a pas de sources à distinguer, comme chez Ads. */
.p-trading .mod-ic,.p-run .mod-ic{color:var(--accent-texte);}

.guard{
  margin-top:44px;display:flex;gap:20px;align-items:flex-start;
  background:linear-gradient(180deg,rgba(52,168,83,.09),rgba(52,168,83,.02));
  border:1px solid rgba(52,168,83,.28);border-radius:16px;padding:26px 28px;
}
.guard svg{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:var(--g-green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:2px;}
.guard h3{font-size:16px;margin:0 0 7px;font-weight:600;}
.guard p{margin:0;font-size:14.5px;color:var(--text-2);}

/* CE QUE LA CONNEXION GOOGLE LIT, ET POURQUOI. Google vérifie la marque d'une
   application sur sa page d'accueil : elle doit dire à quoi servent les
   données demandées et mener à la politique de confidentialité. Le bloc dit
   la même chose que confidentialite.html, en trois lignes — et il reste sur
   l'ACCUEIL, même depuis que la présentation d'Ads a sa page : c'est
   l'accueil que la console Google déclare. Le banc de cloisonnement le garde. */
.donnees{margin-top:16px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px 28px;}
.donnees h3{font-size:16px;margin:0 0 12px;font-weight:600;}
.donnees ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.donnees li{font-size:14.5px;color:var(--text-2);}
.donnees li b{color:var(--text-1);font-weight:500;}
.donnees p{margin:14px 0 0;font-size:14px;color:var(--text-3);}
.donnees h3 + p{margin:0 0 12px;color:var(--text-2);}
.donnees p:first-child{margin-top:0;}
.donnees a{color:var(--text-1);}

/* ---------------- Les règles d'une firme, ligne à ligne ---------------- */
.cotes{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;margin:0 0 36px;padding:0;list-style:none;}
.cotes li{border-top:1px solid var(--border);padding-top:14px;}
.cotes b{display:block;font-family:var(--font);font-size:15.5px;font-weight:600;margin-bottom:4px;}
.cotes span{font-size:14px;color:var(--text-2);}
.firmes{font-size:14.5px;color:var(--text-2);margin:0 0 28px;max-width:70ch;}
.firmes b{color:var(--text-1);font-weight:600;}
.encart{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px 28px;margin-top:16px;
}
.encart h3{font-size:16px;margin:0 0 8px;font-weight:600;}
.encart p{margin:0;font-size:14.5px;color:var(--text-2);}
.encart p + p{margin-top:10px;}
.encart .cite{font-family:var(--mono);font-size:13px;color:var(--text-1);background:var(--panel-raised);border:1px solid var(--border);border-radius:5px;padding:1px 6px;white-space:nowrap;}

/* -- La formule du ratio : une vraie fraction, pas une barre oblique.
   Le dénominateur est long ; en ligne, « a / b + c » se lit de travers. -- */
.formule{
  display:flex;align-items:center;gap:16px;flex-wrap:nowrap;margin:18px 0 0;
  font-family:var(--mono);font-size:13.5px;color:var(--text-1);
}
/* La fraction rétrécit et ses termes passent à la ligne DANS la barre :
   en `wrap`, elle tombait sous « R = », seul sur sa ligne. */
.formule .frac{display:inline-flex;flex-direction:column;text-align:center;min-width:0;}
/* … et c'est elle seule qui rétrécit : « R = » coupé en deux se lisait mal. */
.formule > :first-child{flex:none;white-space:nowrap;}
.formule .frac span{padding:4px 6px;}
.formule .frac span:first-child{border-bottom:1px solid var(--text-3);}

/* ---------------- Méthode, étapes ---------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s;}
/* Le filet est le FOND de l'étape, et il commence après le numéro : le
   masquer d'un pavé `var(--bg)` dessinait un rectangle plat sur les halos
   du thème, net sur téléphone. */
.step{position:relative;padding-top:26px;background:linear-gradient(var(--border),var(--border)) no-repeat 36px 0 / calc(100% - 36px) 2px;}
.step::before{
  counter-increment:s;content:"0" counter(s);
  position:absolute;top:-9px;left:0;
  font-family:var(--mono);font-size:12px;color:var(--accent-texte);
}
.step h3{font-size:16.5px;font-weight:600;margin:0 0 9px;}
.step p{font-size:14px;color:var(--text-3);margin:0;}
.trois{grid-template-columns:repeat(3,1fr);}

/* ---------------- Les bandes de VMA (Run) ----------------
   Chaque fourchette posée sur la même échelle, de 40 à 120 % de la VMA :
   c'est la position relative qui se lit — l'endurance loin sous le seuil,
   le semi entre les deux. Les nombres restent écrits en clair à côté ;
   la barre ne fait que les situer. */
.bandes{display:grid;gap:10px;margin:0;padding:0;list-style:none;max-width:860px;}
.bande{display:grid;grid-template-columns:minmax(150px,220px) 92px 1fr;gap:16px;align-items:center;}
.bande .nom{font-size:14.5px;color:var(--text-1);}
.bande .pc{font-family:var(--mono);font-size:13px;color:var(--text-2);text-align:right;}
.bande .piste{position:relative;height:10px;border-radius:5px;background:var(--panel-raised);}
.bande .piste i{
  position:absolute;top:0;bottom:0;border-radius:5px;background:var(--g-yellow);
  left:calc((var(--de, 40) - 40) / 80 * 100%);width:calc((var(--a, 40) - var(--de, 40)) / 80 * 100%);
}
.bande.repere .nom{color:var(--accent-texte);font-weight:600;}
/* Le repère est un FILET, pas un aplat : en ambre plein, il disparaissait
   sur le clair (2,1:1). Il prend donc l'encre du produit, qui descend d'un
   cran en clair. */
.bande.repere .piste i{background:transparent;border:2px dashed var(--accent-texte);}
.echelle{display:grid;grid-template-columns:minmax(150px,220px) 92px 1fr;gap:16px;max-width:860px;margin-top:8px;}
/* Les graduations se posent à leur abscisse exacte, pas réparties par
   `space-between` : celui-ci aligne des BORDS d'étiquettes, et le « 80 % »
   tombait à côté de la barre qui finit à 80. */
.echelle .grad{position:relative;height:16px;font-family:var(--mono);font-size:11px;color:var(--text-3);}
.echelle .grad i{position:absolute;top:0;font-style:normal;transform:translateX(-50%);white-space:nowrap;}
.echelle .grad i:first-child{transform:none;}
.echelle .grad i:last-child{transform:translateX(-100%);}

/* ---------------- L'avertissement ---------------- */
.avert{
  margin-top:28px;border:1px solid var(--border);border-left:3px solid var(--violet);
  border-radius:12px;background:var(--panel);padding:18px 22px;font-size:14px;color:var(--text-2);
}
.avert b{color:var(--text-1);font-weight:600;}

/* -- Parcours -- */
.bio{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;}
.bio p{font-size:16.5px;color:var(--text-2);margin:0 0 18px;}
.bio p strong{color:var(--text-1);font-weight:600;}
.bio .langues{font-family:var(--mono);font-size:12.5px;color:var(--text-3);border-top:1px solid var(--border-soft);padding-top:16px;margin-top:26px;}
.frise{list-style:none;margin:0;padding:0;position:relative;}
.frise::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--border);}
.frise li{position:relative;padding:0 0 26px 30px;}
.frise li:last-child{padding-bottom:0;}
.frise li::before{
  content:"";position:absolute;left:0;top:7px;width:11px;height:11px;border-radius:50%;
  background:var(--panel-raised);border:2px solid var(--border);
}
.frise li.now::before{background:var(--g-blue);border-color:var(--g-blue);}
.frise .quand{font-family:var(--mono);font-size:11.5px;color:var(--amber);letter-spacing:.02em;}
.frise .quoi{font-family:var(--font);font-size:15.5px;font-weight:600;margin:3px 0 4px;}
.frise .ou{font-size:13.5px;color:var(--text-3);line-height:1.55;}

/* ---------------- Contact ---------------- */
.contact{
  background:var(--panel);border:1px solid var(--border);border-radius:24px;
  padding:56px 48px;text-align:center;position:relative;overflow:hidden;
}
.contact::before{
  content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:600px;height:400px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 68%);
}
.contact > *{position:relative;}
.contact h2{margin-bottom:14px;}
.contact p{color:var(--text-2);max-width:52ch;margin:0 auto 32px;}
.contact .hero-cta{justify-content:center;margin-bottom:0;}

/* ---------------- Aussi chez Órama ----------------
   En bas de chaque page de produit, les deux autres : on ne renvoie pas
   le visiteur à l'accueil pour qu'il trouve la porte d'à côté. */
.autres{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.autre{
  display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--text-1);
  background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px 20px;
  transition:border-color .18s ease;
}
.autre:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));}
.autre .oeil{width:40px;height:40px;flex:0 0 auto;color:var(--text-1);}
.autre b{display:block;font-family:var(--font);font-size:16px;font-weight:600;}
.autre span{font-size:13.5px;color:var(--text-3);}
.autre .fl{margin-left:auto;color:var(--accent-texte);flex:0 0 auto;}

footer{border-top:1px solid var(--border-soft);padding:40px 0;}
.lockup{text-align:center;padding-bottom:42px;color:var(--text-1);}
.lockup svg{width:min(340px,78vw);height:auto;display:block;margin:0 auto;opacity:.95;}
.lockup-mot{
  font-family:var(--font);font-weight:400;font-size:clamp(19px,3.4vw,31px);
  letter-spacing:-.01em;line-height:1;margin:16px 0 0;color:var(--text-1);opacity:.95;
}
.lockup-mot b{font-weight:700;}
.ft{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--text-3);}
.ft a{color:var(--text-3);text-decoration:none;}
.ft a:hover{color:var(--text-1);}
.ft .right{margin-left:auto;display:flex;gap:8px 20px;flex-wrap:wrap;}

/* ---------------- Adaptatif ---------------- */
@media (max-width:1000px){
  .produits{grid-template-columns:1fr;max-width:620px;}
  .regles{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .hero-grid,.name-grid,.bio,.profil-grid{grid-template-columns:1fr;gap:44px;}
  .profil-portrait{position:static;max-width:330px;}
  .hero-oeil{max-width:280px;margin:0 auto;}
  .portrait{max-width:330px;margin:0 auto;}
  .two,.cotes,.autres{grid-template-columns:1fr;}
  .steps,.trois{grid-template-columns:1fr 1fr;}
  /* Les pages ne disparaissent plus sur téléphone, comme les ancres de la
     page unique le faisaient : ce sont désormais des pages, la seule façon
     d'aller de l'une à l'autre sans repasser par l'accueil. Elles passent
     sur une seconde ligne, et à la ligne si elles débordent : un défilement
     sans barre cachait « Tarifs » et « Qui je suis » sans rien en dire, et
     rognait l'anneau de focus. */
  .hd{flex-wrap:wrap;height:auto;min-height:66px;padding-top:12px;row-gap:4px;}
  .acces{margin-left:auto;}
  .pages{order:3;flex:1 0 100%;margin:0;gap:2px 18px;flex-wrap:wrap;padding:2px 2px 8px;}
  .section{padding:72px 0;}
  .contact{padding:44px 24px;}
  .bande,.echelle{grid-template-columns:1fr 80px;row-gap:6px;}
  .bande .piste,.echelle .grad{grid-column:1 / -1;}
  .echelle > span:not(.grad){display:none;}
}
@media (max-width:560px){
  .steps,.trois{grid-template-columns:1fr;}
  .hero{padding:70px 0 60px;}
  .hero-cta .btn{width:100%;justify-content:center;}
  .fiche{padding:24px 22px;}
  .rappel-profil{flex-direction:column;align-items:flex-start;}
  .rappel-profil .fl{display:none;}
}