/* ============================================================
   PureSpec Link - link.css
   ------------------------------------------------------------
   Feuille propre au domaine purespeclink.com. Elle se charge APRES
   base.css, shared.css et tokens.css : elle n'invente aucune couleur,
   aucun rayon, aucune graisse - elle ne fait que composer avec ceux
   deja definis. Meme direction artistique que la boutique, meme
   typographie, memes gabarits de boutons.

   Une seule liberte prise : le domaine Link n'a pas de barre de
   navigation a trois colonnes ni de menu plein ecran. Il n'a que deux
   destinations. La nav y est donc reduite a une marque a gauche et
   deux actions a droite.
   ============================================================ */

/* base.css pose un fond gris doux, pense pour les pages de la boutique.
   Les pages Link se lisent sur blanc : les sections grises et le bandeau
   sombre n'ont de valeur que s'ils tranchent sur quelque chose. Les pages
   qui veulent le gris (l'editeur) le redeclarent dans leur propre bloc
   <style>, charge apres celui-ci. */
body { background: #fff; }

/* ------------------------------------------------------------
   1. NAVIGATION
   ------------------------------------------------------------ */
.lnav {
  position: sticky; top: 14px; z-index: var(--z-nav, 50);
  width: calc(100% - 32px); max-width: 1180px; margin: 14px auto 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 1px 3px rgba(0,0,0,.03), 0 6px 20px rgba(0,0,0,.03);
}
.lnav-in {
  height: 58px; padding: 0 12px 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.lnav-marque {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--c-ink, #1d1d1f);
  font-size: 17px; font-weight: 700; letter-spacing: -0.022em;
}
.lnav-marque img { height: 17px; width: auto; display: block; }
.lnav-marque .lnav-suffixe { color: var(--c-gray-2, #86868b); font-weight: 600; }
.lnav-actions { display: flex; align-items: center; gap: 6px; }
.lnav-lien {
  padding: 8px 12px; border-radius: var(--r-md, 12px);
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--c-ink, #1d1d1f); text-decoration: none;
  transition: background var(--t-fast, .2s);
}
.lnav-lien:hover { background: var(--c-bg, #f5f5f7); }
.lnav-cta {
  padding: 9px 16px; border-radius: var(--r-md, 12px);
  background: var(--c-ink, #1d1d1f); color: #fff;
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast, .2s);
}
.lnav-cta:hover { background: #000; }
@media (max-width: 767px) {
  .lnav { top: 10px; width: calc(100% - 20px); margin-top: 10px; }
  .lnav-in { height: 54px; padding: 0 8px 0 14px; }
  .lnav-lien { padding: 8px 10px; }
  .lnav-cta { padding: 9px 13px; }
}
/* Sous 400 px, marque + deux actions ne tiennent plus : le lien
   secondaire s'efface, il reste accessible depuis la page. */
@media (max-width: 400px) { .lnav-lien.lnav-second { display: none; } }

/* ------------------------------------------------------------
   2. GABARIT DE PAGE
   ------------------------------------------------------------ */
.lwrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
@media (max-width: 767px) { .lwrap { padding: 0 20px; } }

.lsection { padding: 104px 0; }
.lsection-serre { padding: 72px 0; }
@media (max-width: 767px) { .lsection { padding: 72px 0; } .lsection-serre { padding: 52px 0; } }

.lsurtitre {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--c-gray-2, #86868b); margin: 0 0 14px;
}
.ltitre {
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.06;
  color: var(--c-ink, #1d1d1f); margin: 0;
}
.lchapo {
  font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55;
  color: var(--c-gray, #6e6e73); margin: 18px 0 0; max-width: 620px;
}
.lcentre { text-align: center; }
.lcentre .lchapo { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------
   3. HERO
   ------------------------------------------------------------ */
.lhero { padding: 84px 0 0; text-align: center; }
@media (max-width: 767px) { .lhero { padding: 52px 0 0; } }
.lhero h1 {
  font-size: clamp(40px, 6vw, 78px); font-weight: 700;
  letter-spacing: -0.045em; line-height: 0.98;
  color: var(--c-ink, #1d1d1f); margin: 0;
}
/* La seconde ligne du titre passe en gris : le regard lit d'abord la
   promesse, puis la precision. C'est le meme procede que sur l'accueil
   de la boutique. */
.lhero h1 .lhero-2 { color: var(--c-gray-2, #86868b); display: block; }
.lhero p {
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5;
  color: var(--c-gray, #6e6e73);
  margin: 22px auto 0; max-width: 560px; letter-spacing: -0.012em;
}

/* Deux boutons cote a cote, meme largeur, meme hauteur : aucun des deux
   ne domine visuellement. C'est deliberé - acheter et activer sont deux
   entrees legitimes, pas une principale et une secondaire. */
.lcta {
  margin-top: 34px; display: flex; flex-wrap: wrap;
  gap: 12px; justify-content: center;
}
.lbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 232px; height: var(--btn-h, 56px); padding: 0 26px;
  border-radius: var(--r-md, 12px);
  font-size: var(--btn-fs, 15px); font-weight: var(--btn-fw, 500);
  letter-spacing: var(--btn-ls, -0.01em); font-family: inherit;
  text-decoration: none; cursor: pointer; border: none;
  transition: background var(--t-fast, .2s) var(--ease-apple), transform var(--t-fast, .2s) var(--ease-apple);
}
.lbtn svg { width: 17px; height: 17px; flex: none; }
.lbtn-noir { background: var(--c-ink, #1d1d1f); color: #fff; }
.lbtn-noir:hover { background: #000; transform: translateY(-1px); }
.lbtn-gris { background: var(--c-bg, #f5f5f7); color: var(--c-ink, #1d1d1f); }
.lbtn-gris:hover { background: var(--c-hover, #ececf0); transform: translateY(-1px); }
.lbtn-blanc { background: #fff; color: var(--c-ink, #1d1d1f); }
.lbtn-blanc:hover { background: #f0f0f2; transform: translateY(-1px); }
.lbtn-contour { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.lbtn-contour:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
.lbtn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.lbtn-large { width: 100%; min-width: 0; }
@media (max-width: 520px) { .lbtn { min-width: 0; width: 100%; } }

.lnote { font-size: 13px; color: var(--c-gray-2, #86868b); margin: 18px 0 0; }
.lnote a { color: var(--c-gray, #6e6e73); }

/* ------------------------------------------------------------
   4. TELEPHONE - la piece maitresse de l'accueil
   ------------------------------------------------------------
   Le produit, ici, c'est une page vue sur un ecran de telephone. La
   montrer en vrai vaut mieux que la decrire. Le chassis est dessine en
   CSS : aucune image a charger, net sur tous les ecrans.
   ------------------------------------------------------------ */
.lscene {
  margin-top: 64px; padding-bottom: 0; position: relative;
  display: flex; justify-content: center;
}
/* Halo diffus derriere l'appareil : detache l'objet du fond blanc sans
   ajouter de cadre ni de bordure. */
.lscene::before {
  content: ''; position: absolute; left: 50%; top: 12%;
  width: min(760px, 92vw); height: 62%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.09), rgba(0,0,0,0) 68%);
  filter: blur(48px); pointer-events: none;
}
.lphone {
  position: relative; width: 320px; flex: none;
  background: #1d1d1f; border-radius: 46px; padding: 9px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    0 32px 70px rgba(0,0,0,.20),
    0 8px 22px rgba(0,0,0,.10);
}
.lphone-ecran {
  background: #fff; border-radius: 38px; overflow: hidden;
  height: 620px; position: relative;
}
/* Encoche : une simple pastille sombre, comme sur l'appareil. */
.lphone-encoche {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 94px; height: 26px; border-radius: var(--r-full, 980px);
  background: #1d1d1f; z-index: 2;
}
.lphone-vue { height: 100%; overflow: hidden; padding: 58px 22px 26px; box-sizing: border-box; }
@media (max-width: 767px) {
  .lphone { width: 286px; border-radius: 42px; }
  .lphone-ecran { height: 566px; border-radius: 34px; }
  .lscene { margin-top: 46px; }
}

/* Contenu de l'apercu : c'est la mise en page reelle de la page
   publique, a l'echelle du telephone. */
.lp-photo {
  width: 84px; height: 84px; border-radius: var(--r-full, 980px);
  margin: 0 auto 14px; display: flex; align-items: center; justify-content: center;
  background: var(--c-bg, #f5f5f7); color: var(--c-gray-2, #86868b);
  font-size: 30px; font-weight: 600; letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
  object-fit: cover; overflow: hidden;
}
img.lp-photo { display: block; }
.lp-nom { text-align: center; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--c-ink, #1d1d1f); }
.lp-pseudo { text-align: center; font-size: 12.5px; color: var(--c-gray-2, #86868b); margin-top: 3px; }
.lp-bio {
  text-align: center; font-size: 13px; line-height: 1.5;
  color: var(--c-ink, #1d1d1f); margin: 12px auto 0; max-width: 230px;
}
.lp-liens { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.lp-lien {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 44px; border-radius: 13px;
  background: var(--c-ink, #1d1d1f); color: #fff;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.014em;
  text-decoration: none;
}
.lp-lien svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; opacity: .9; }
.lp-sect {
  margin-top: 26px; font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-gray, #6e6e73);
  display: flex; align-items: center; gap: 6px;
}
.lp-sect svg { width: 12px; height: 12px; }
.lp-autos { margin-top: 11px; display: flex; flex-direction: column; gap: 7px; }
.lp-auto { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 13px; background: var(--c-bg, #f5f5f7); }
.lp-auto-p { width: 26px; height: 26px; border-radius: 7px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.lp-auto-t { font-size: 12.5px; font-weight: 600; letter-spacing: -0.014em; color: var(--c-ink, #1d1d1f); line-height: 1.25; }
.lp-auto-s { font-size: 10.5px; color: var(--c-gray, #6e6e73); margin-top: 1px; }
.lp-vide { text-align: center; color: var(--c-gray-2, #86868b); font-size: 13px; padding-top: 40px; }

/* ------------------------------------------------------------
   5. GRILLES DE POINTS FORTS
   ------------------------------------------------------------ */
.lgrille { display: grid; gap: 20px; margin-top: 52px; }
.lgrille-3 { grid-template-columns: repeat(3, 1fr); }
.lgrille-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .lgrille-3, .lgrille-2 { grid-template-columns: 1fr; gap: 14px; } }

.lcarte {
  background: var(--c-bg, #f5f5f7);
  border-radius: var(--r-lg, 18px);
  padding: 32px 28px;
}
.lcarte-ico {
  width: 40px; height: 40px; border-radius: var(--r-md, 12px);
  background: #fff; display: flex; align-items: center; justify-content: center;
  color: var(--c-ink, #1d1d1f); margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.lcarte-ico svg { width: 20px; height: 20px; }
.lcarte h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.024em; color: var(--c-ink, #1d1d1f); margin: 0 0 8px; }
.lcarte p { font-size: 14.5px; line-height: 1.6; color: var(--c-gray, #6e6e73); margin: 0; }

/* ------------------------------------------------------------
   6. BANDEAU SOMBRE - la puce NFC
   ------------------------------------------------------------ */
.lsombre { background: #0a0a0f; color: #fff; }
.lsombre .ltitre { color: #fff; }
.lsombre .lchapo { color: rgba(255,255,255,.62); }
.lsombre .lsurtitre { color: rgba(255,255,255,.42); }
.lduo { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .lduo { grid-template-columns: 1fr; gap: 40px; } }

/* Le sticker, reproduit en HTML aux proportions reelles (48 x 71,8 mm).
   Il n'y a pas d'image a charger et il reste net a n'importe quelle
   taille d'ecran. */
.lsticker-scene { display: flex; justify-content: center; }
.lsticker {
  width: 208px; aspect-ratio: 48 / 71.8;
  background: #0f0f16; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 24px 60px rgba(0,0,0,.6);
  padding: 20px 18px; box-sizing: border-box;
  display: flex; flex-direction: column; color: #fff;
}
.lsticker-marque { font-size: 13px; font-weight: 700; letter-spacing: -0.02em; }
.lsticker-modele { font-size: 22px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; margin-top: 2px; }
.lsticker-l { margin-top: 14px; }
.lsticker-k { font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.lsticker-v { font-size: 11px; font-weight: 600; letter-spacing: -0.01em; margin-top: 2px; }
.lsticker-trait { height: 1px; background: rgba(255,255,255,.13); margin: 16px 0 0; }
.lsticker-bas { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lsticker-pseudo { font-size: 9.5px; font-weight: 600; letter-spacing: -0.005em; color: rgba(255,255,255,.8); }
.lsticker-nfc { display: flex; align-items: center; gap: 4px; font-size: 7.5px; letter-spacing: 0.1em; color: rgba(255,255,255,.5); }
.lsticker-nfc svg { width: 11px; height: 11px; }

.lpuces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.lpuce {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: var(--r-full, 980px);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.85);
  font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
}
.lpuce svg { width: 14px; height: 14px; opacity: .8; }

/* ------------------------------------------------------------
   7. ETAPES
   ------------------------------------------------------------ */
.letapes { counter-reset: e; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
@media (max-width: 900px) { .letapes { grid-template-columns: 1fr; gap: 14px; } }
.letape { padding: 30px 28px; border-radius: var(--r-lg, 18px); background: var(--c-bg, #f5f5f7); }
.letape-n {
  counter-increment: e; font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--c-gray-2, #86868b); margin-bottom: 16px;
}
.letape-n::before { content: '0' counter(e); }
.letape h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.024em; margin: 0 0 8px; color: var(--c-ink, #1d1d1f); }
.letape p { font-size: 14.5px; line-height: 1.6; color: var(--c-gray, #6e6e73); margin: 0; }

/* ------------------------------------------------------------
   8. COMPARATIF
   ------------------------------------------------------------ */
.lcompare { margin-top: 44px; border-top: 1px solid var(--c-line, #d2d2d7); }
.lcompare-l {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline;
  padding: 20px 2px; border-bottom: 1px solid var(--c-line, #d2d2d7);
}
.lcompare-t { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--c-ink, #1d1d1f); }
.lcompare-s { font-size: 14px; color: var(--c-gray, #6e6e73); margin-top: 4px; line-height: 1.5; }
.lcompare-b { font-size: 13px; font-weight: 600; color: var(--c-ink, #1d1d1f); white-space: nowrap; }

/* ------------------------------------------------------------
   9. PIED DE PAGE
   ------------------------------------------------------------
   Meme grammaire que celui de la boutique - colonnes, memes tailles,
   meme trait de separation, meme barre du bas - mais son contenu est
   celui d'un site a part entiere. Un visiteur qui arrive par un profil
   ne doit pas avoir l'impression d'etre tombe dans une boutique.
   ------------------------------------------------------------ */
.lpied { border-top: 1px solid rgba(0,0,0,0.08); background: #fff; padding: 48px 0 44px; }
.lpied-cols {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px; padding-bottom: 36px;
}
@media (max-width: 767px) { .lpied-cols { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } }
.lpied-col-t {
  font-size: 12px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--c-ink, #1d1d1f); margin-bottom: 12px;
}
.lpied-col ul { list-style: none; margin: 0; padding: 0; }
.lpied-col li { margin-bottom: 9px; }
.lpied-col a {
  font-size: 13px; color: var(--c-gray, #6e6e73); text-decoration: none;
  transition: color var(--t-fast, .2s);
}
.lpied-col a:hover { color: var(--c-ink, #1d1d1f); }

.lpied-bas {
  border-top: 1px solid rgba(0,0,0,0.08); padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 16px 32px;
  align-items: flex-start; justify-content: space-between;
}
.lpied-social { display: flex; gap: 14px; margin-bottom: 12px; }
.lpied-social a { color: var(--c-gray, #6e6e73); transition: color var(--t-fast, .2s); display: inline-flex; }
.lpied-social a:hover { color: var(--c-ink, #1d1d1f); }
.lpied-copy { font-size: 12px; line-height: 1.6; color: var(--c-gray-2, #86868b); }
.lpied-copy strong { color: var(--c-gray, #6e6e73); font-weight: 500; }
.lpied-tag { font-size: 12px; color: var(--c-gray-2, #86868b); }

/* ------------------------------------------------------------
   10. PAGES D'ACTION (activation, edition)
   ------------------------------------------------------------ */
.lpanneau {
  width: 100%; max-width: 460px; margin: 0 auto;
  background: #fff; border-radius: var(--r-lg, 18px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 18px 50px rgba(0,0,0,.07);
  padding: 36px 32px;
  box-sizing: border-box;
}
@media (max-width: 520px) { .lpanneau { padding: 28px 22px; box-shadow: none; } }
.lpanneau h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.033em; margin: 0; color: var(--c-ink, #1d1d1f); }
.lpanneau .lsous { font-size: 15px; line-height: 1.55; color: var(--c-gray, #6e6e73); margin: 10px 0 26px; }

.lchamp { margin-bottom: 14px; }
.lchamp label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--c-gray, #6e6e73); margin-bottom: 7px;
}
/* 16 px sur les champs : en dessous, Safari iOS zoome tout seul a la
   mise au point et la page se retrouve de travers. */
.lsaisie {
  width: 100%; box-sizing: border-box;
  background: var(--c-bg, #f5f5f7); border: 1px solid transparent;
  border-radius: var(--r-md, 12px); padding: 14px 16px;
  font-size: 16px; font-weight: 400; color: var(--c-ink, #1d1d1f);
  font-family: inherit; outline: none; letter-spacing: -0.01em;
  transition: background var(--t-fast, .2s) var(--ease-apple), border-color var(--t-fast, .2s), box-shadow var(--t-fast, .2s);
}
.lsaisie:hover { background: var(--c-hover, #ececf0); }
.lsaisie:focus { background: #fff; border-color: var(--c-ink, #1d1d1f); box-shadow: 0 0 0 4px rgba(29,29,31,.08); }
.lsaisie::placeholder { color: var(--c-gray-2, #86868b); font-size: 14px; }
textarea.lsaisie { resize: vertical; min-height: 76px; line-height: 1.5; }

/* Champ de pseudo : l'adresse complete est affichee a gauche du champ,
   en dur. On n'ecrit pas une adresse, on choisit un nom. */
.lhandle {
  display: flex; align-items: center;
  background: var(--c-bg, #f5f5f7); border: 1px solid transparent;
  border-radius: var(--r-md, 12px); overflow: hidden;
  transition: background var(--t-fast, .2s), border-color var(--t-fast, .2s), box-shadow var(--t-fast, .2s);
}
.lhandle:focus-within { background: #fff; border-color: var(--c-ink, #1d1d1f); box-shadow: 0 0 0 4px rgba(29,29,31,.08); }
.lhandle-pre {
  padding: 14px 0 14px 16px; font-size: 15px; color: var(--c-gray-2, #86868b);
  white-space: nowrap; user-select: none; letter-spacing: -0.01em;
}
.lhandle input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  padding: 14px 16px 14px 1px; font-size: 16px; font-family: inherit;
  color: var(--c-ink, #1d1d1f); letter-spacing: -0.01em;
}
.ldispo { font-size: 12.5px; margin-top: 7px; min-height: 17px; }
.ldispo.ok { color: #1a7f37; }
.ldispo.ko { color: var(--c-red, #8B1C23); }

.lmsg { border-radius: var(--r-md, 12px); padding: 12px 15px; font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
.lmsg-err { background: rgba(139,28,35,.07); color: var(--c-red, #8B1C23); }
.lmsg-ok { background: rgba(52,199,89,.11); color: #1a7f37; }
.lmsg-info { background: var(--c-bg, #f5f5f7); color: var(--c-gray, #6e6e73); }

.lbascule-txt {
  text-align: center; font-size: 14px; color: var(--c-gray, #6e6e73);
  margin-top: 20px;
}
.lbascule-txt button {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--c-ink, #1d1d1f); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px;
}
.lsep-ou { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
.lsep-ou::before, .lsep-ou::after { content: ''; flex: 1; height: 1px; background: var(--c-line, #d2d2d7); }
.lsep-ou span { font-size: 12px; color: var(--c-gray-2, #86868b); }

/* ------------------------------------------------------------
   11. EDITEUR
   ------------------------------------------------------------ */
.ledit { display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: 44px; align-items: start; }
@media (max-width: 1023px) { .ledit { grid-template-columns: 1fr; gap: 32px; } }

.lbloc {
  background: #fff; border-radius: var(--r-lg, 18px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 10px 34px rgba(0,0,0,.05);
  padding: 30px 28px; margin-bottom: 18px;
}
@media (max-width: 520px) { .lbloc { padding: 24px 20px; } }
.lbloc h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.026em; margin: 0 0 6px; color: var(--c-ink, #1d1d1f); }
.lbloc .lbloc-s { font-size: 14px; line-height: 1.55; color: var(--c-gray, #6e6e73); margin: 0 0 24px; }
.lbloc-trait { height: 1px; background: var(--c-line, #d2d2d7); margin: 26px 0; }
.lcompteur { text-align: right; font-size: 11.5px; color: var(--c-gray-2, #86868b); margin-top: 6px; }

/* Photo de profil */
.lphoto-zone { display: flex; align-items: center; gap: 18px; }
.lphoto-vue {
  width: 76px; height: 76px; border-radius: var(--r-full, 980px); flex: none;
  background: var(--c-bg, #f5f5f7) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-gray-2, #86868b); font-size: 26px; font-weight: 300; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
  transition: background-color var(--t-fast, .2s);
}
.lphoto-vue:hover { background-color: var(--c-hover, #ececf0); }
.lphoto-vue.remplie span { display: none; }
.lphoto-txt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lphoto-aide { flex: 1 0 100%; font-size: 12.5px; color: var(--c-gray-2, #86868b); margin: 2px 0 0; line-height: 1.5; }
.lmini {
  height: 36px; padding: 0 14px; border-radius: var(--r-md, 12px); border: 0;
  font-size: var(--btn-fs-sm, 13px); font-weight: 500; font-family: inherit;
  cursor: pointer; letter-spacing: -0.005em;
  transition: background var(--t-fast, .2s);
}
.lmini-gris { background: var(--c-bg, #f5f5f7); color: var(--c-ink, #1d1d1f); }
.lmini-gris:hover { background: var(--c-hover, #ececf0); }
.lmini-nu { background: transparent; color: var(--c-gray, #6e6e73); }
.lmini-nu:hover { background: var(--c-bg, #f5f5f7); }

/* Reseaux */
.lreseau { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lreseau-ico {
  width: 40px; height: 40px; border-radius: var(--r-md, 12px); flex: none;
  background: var(--c-bg, #f5f5f7); color: var(--c-ink, #1d1d1f);
  display: flex; align-items: center; justify-content: center;
}
.lreseau-ico svg { width: 19px; height: 19px; }

/* Garage */
.lauto {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--r-md, 12px);
  background: var(--c-bg, #f5f5f7); margin-bottom: 10px;
  transition: background var(--t-fast, .2s);
}
.lauto.on { background: #fff; box-shadow: inset 0 0 0 1px var(--c-ink, #1d1d1f); }
.lauto-p { width: 34px; height: 34px; border-radius: 9px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.09); }
.lauto-txt { flex: 1; min-width: 0; }
.lauto-t { font-size: 14.5px; font-weight: 600; letter-spacing: -0.016em; color: var(--c-ink, #1d1d1f); }
.lauto-s { font-size: 12.5px; color: var(--c-gray, #6e6e73); margin-top: 2px; }
.lauto-nfc {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-gray-2, #86868b);
}
.lauto-nfc svg { width: 12px; height: 12px; }
.lbascule {
  width: 50px; height: 30px; border-radius: var(--r-full, 980px); border: 0; flex: none;
  background: var(--c-line, #d2d2d7); position: relative; cursor: pointer; padding: 0;
  transition: background var(--t-fast, .2s) var(--ease-apple);
}
.lbascule.on { background: var(--c-green, #34c759); }
.lbascule-pion {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: var(--r-full, 980px); background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform var(--t-fast, .2s) var(--ease-apple);
}
.lbascule.on .lbascule-pion { transform: translateX(20px); }

/* Colonne d'apercu : elle suit le defilement sur grand ecran, elle passe
   au-dessus du formulaire sur telephone - on veut voir le resultat avant
   de commencer a remplir. */
.lcote { position: sticky; top: 96px; }
@media (max-width: 1023px) { .lcote { position: static; order: -1; } .lcote .lphone { margin: 0 auto; } }
.lcote-actions { margin-top: 20px; max-width: 320px; margin-left: auto; margin-right: auto; }

/* Bandeau d'adresse publique */
.ladresse {
  display: flex; align-items: center; gap: 10px;
  background: var(--c-bg, #f5f5f7); border-radius: var(--r-md, 12px);
  padding: 12px 14px; margin-bottom: 18px;
}
.ladresse-url {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.012em;
  color: var(--c-ink, #1d1d1f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ladresse button { flex: none; }

/* Voile de chargement, identique a celui de la page publique. */
.lattente { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #fff; z-index: var(--z-overlay, 100); }
.lattente img { width: 132px; height: auto; display: block; animation: lRespire 1.8s ease-in-out infinite; }
.lattente.parti { opacity: 0; pointer-events: none; transition: opacity .32s ease; }
@keyframes lRespire { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.08); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lattente img { animation: none; opacity: .8; } }