/* =========================================================
   Fiche publique · CSS extrait de la maquette gelée test-admin.html
   (partie Aperçu uniquement, sans les styles du mode Édition).
   Les variables de palette sont surchargées par profil.php
   selon createurs.palette (source : PALETTES de la maquette).
   ========================================================= */

:root{
  --accent-rgb:91,95,239; --sand-rgb:255,111,97;
  --grad:linear-gradient(120deg,#5B5FEF 0%,#8A5CF5 55%,#FF6F61 100%);
  --bg:#111326; --card:rgba(255,255,255,.05); --card2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.09); --txt:#f6f6fb; --muted:#a3a6bd;
  --accent:#5B5FEF; --accent-soft:rgba(var(--accent-rgb),.14);
  --sand:#FF6F61; --danger:#FF6F61;
  /* LISIBILITE DES COULEURS D'AMBIANCE (10 aout 2026, voir app/fiche.php).
     Une couleur d'ambiance sert a DEUX choses opposees : elle remplit un
     bouton (le texte se pose DESSUS), et elle peint elle-meme du texte. Les
     deux usages n'ont pas les memes exigences, et rien ne les distinguait.
       --sur-accent / --sur-sand : le texte POSE SUR la couleur ;
       --accent-txt / --sand-txt : la couleur quand elle EST le texte.
     Valeurs de Signature ci-dessous, calculees une fois ; les 26 autres
     ambiances posent les leurs dans ambiance_css_regles(). Mesure : 75 releves
     sur 108 etaient sous le seuil WCAG AA avant ce correctif. */
  --sur-accent:#ffffff; --sur-sand:#101010;
  --accent-txt:#6f72f1; --sand-txt:#FF6F61;
  /* Teintes dérivées de l'ambiance (app/fiche.php, ambiance_teintes) : les
     pastilles posées sur une photo et le fond des panneaux suivent la couleur
     du créateur au lieu de rester bleu nuit. Ces valeurs sont celles de
     Signature : sans ambiance, le rendu est identique à avant. */
  --voile-rgb:17,19,38; --surface:#1a1d38;
  --r:20px;
  /* Hauteur d'une barre FIXE posée au-dessus de la fiche, sous laquelle la
     barre d'outils doit venir se caler. Nulle sur la fiche publique ; l'éditeur
     y met la hauteur de son en-tête (admin.css / admin.js). */
  --haut-fixe:0px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--txt);
  font-family:'Inter',system-ui,sans-serif;
  min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(600px 400px at 15% -5%, rgba(var(--accent-rgb),.10), transparent 60%),
    radial-gradient(500px 350px at 95% 20%, rgba(var(--sand-rgb),.08), transparent 60%);
}
h1,h2,h3,.num{font-family:'Space Grotesk',sans-serif}

/* ---------- Bandeau retour (pages filles) ---------- */
.fille-back{
  display:block; text-decoration:none;
  margin-top:18px; padding:15px 16px; text-align:center; border-radius:var(--r);
  background:var(--accent-soft); border:1px solid rgba(var(--accent-rgb),.3);
  color:var(--txt); font:600 12.5px 'Inter'; line-height:1.5;
  cursor:pointer;
}
.fille-back b{color:var(--accent-txt)}

/* ---------- Rail mobile ---------- */
.rail{
  position:relative; z-index:1;
  max-width:430px; margin:0 auto; padding:0 16px 28px;
}

/* ---------- Carte partenaire Boost Driving (décision du 7 août 2026) ---------- */
.partenaire{max-width:430px; margin:0 auto 60px; padding:0 16px; position:relative; z-index:1}
.partenaire-in{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:9px 12px; cursor:pointer; transition:.15s; text-decoration:none;
}
.partenaire-in:hover{border-color:rgba(var(--accent-rgb),.45); background:var(--card2)}
.pt-logo{flex:0 0 auto; width:36px; height:36px; object-fit:contain; border-radius:9px;
  background:#fff; padding:3px; border:1px solid var(--border)}
.pt-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px}
.pt-txt b{font:700 11.5px 'Inter'; color:var(--txt); line-height:1.3}
.pt-txt small{font:500 10.5px 'Inter'; color:var(--muted); line-height:1.35}
.pt-chev{flex:0 0 auto; color:var(--muted); font:600 17px 'Space Grotesk'}
body.clair .partenaire-in{box-shadow:0 2px 12px rgba(var(--voile-rgb),.09)}

/* ---------- Sections ---------- */
.sec{position:relative; margin-bottom:22px; transition:opacity .25s}
.sec-title{font-size:15px; font-weight:600; margin-bottom:12px; letter-spacing:.3px}
/* Une section carte sans titre s'enchaîne à la carte précédente (écart 10px,
   comme les cartes d'un même groupe dans la maquette) */
.sec-carte + .sec-suite{margin-top:-12px}

/* ---------- Hero (style centré, image de fond) ---------- */
.cover{
  height:200px; border-radius:min(var(--r), 26px);
  background:var(--grad);
  background-size:cover; background-position:center;
  position:relative;
}
/* Voile d'accent sur la couverture. La photo du créateur peut être de n'importe
   quelle couleur : sans ce voile, le premier écran de la fiche ne dit rien de
   l'ambiance choisie. Repris de la maquette test-fiche-fusion.html (.cover .v2). */
.cover::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(120% 70% at 82% 0%, rgba(var(--accent-rgb),.30), rgba(0,0,0,0) 62%);
}
.share-btn{
  position:absolute; top:10px; right:10px; z-index:6;
  border:1px solid var(--border); background:rgba(var(--voile-rgb),.55); backdrop-filter:blur(8px);
  color:#f6f6fb; height:36px; padding:0 14px; border-radius:999px; cursor:pointer;
  font:700 12px 'Inter'; display:flex; align-items:center; gap:6px;
  box-shadow:0 8px 20px -10px rgba(var(--accent-rgb),.85);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background .15s, border-color .15s;
}
.share-btn:hover{background:rgba(var(--voile-rgb),.85); border-color:rgba(var(--accent-rgb),.5)}
/* L'icône de partage. `flex:0 0 auto` l'empêche d'être écrasée quand le libellé
   s'allonge (« Share » est plus court que « Partager », mais une future langue
   ne le sera pas), et le léger décalage vers le haut compense le vide optique
   sous la flèche : sans lui, l'icône paraît basse à côté du texte. */
.share-btn .share-ico{flex:0 0 auto; margin-top:-1px}

.share-btn:active{transform:scale(.94)}

/* ---------- Barre d'outils : lien + langue + QR + thème ----------
   COLLANTE en haut de l'écran (choix du 8 août 2026, proposition 3 de la page
   d'essai test-haut-fiche.php). Deux effets :
     - le lien, la langue, le QR et le thème restent à portée jusqu'en bas de
       page, alors qu'ils disparaissaient au premier défilement ;
     - le fond ne paraît plus coupé en deux. En gabarit Portrait, la couverture
       est pleine largeur mais démarrait SOUS la barre : il restait une bande de
       fond d'ambiance au-dessus, puis un bord net. La couverture monte
       maintenant jusqu'à la barre, qui devient elle-même le haut de la page.
   Elle est enfant direct de <body> (public/templates/barre-fiche.php) : dans une
   section, `position:sticky` n'aurait tenu que le temps de cette section. */
.hero-bar{
  position:sticky; top:var(--haut-fixe); z-index:40;
  display:flex; align-items:center; gap:8px;
  max-width:430px; margin:0 auto; padding:9px 16px;
  /* Verre teinté par l'ambiance : --voile-rgb est la couleur du modèle ramenée
     vers le noir, la même que celle des pastilles posées sur une photo. */
  background:linear-gradient(180deg, rgba(var(--voile-rgb),.74), rgba(var(--voile-rgb),.30));
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid var(--border);
}
body.clair .hero-bar{
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.44));
}
/* Portrait : la couverture vient toucher la barre, plus aucun raccord.
   Rail : elle reste une carte arrondie, il lui faut sa respiration. */
body[data-g="rail"] .cover{margin-top:16px}
.url-pill{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:7px;
  background:var(--card); border:1px solid var(--border); border-radius:999px;
  padding:0 14px; height:38px; color:var(--muted); font:600 12px 'Inter';
  cursor:pointer; white-space:nowrap; overflow:hidden; transition:.15s;
}
.url-pill b{color:var(--accent-txt); font-weight:700; overflow:hidden; text-overflow:ellipsis}
.url-pill:hover{border-color:rgba(var(--accent-rgb),.4); background:var(--card2)}
.url-pill:active{transform:scale(.97)}
.lang-seg{
  display:flex; flex:0 0 auto; background:var(--card); border:1px solid var(--border);
  border-radius:999px; padding:3px; gap:2px;
}
.lb{border:0; background:transparent; color:var(--muted); font:700 11px 'Inter'; padding:5px 10px; border-radius:999px; cursor:pointer; transition:.15s}
.lb.on{background:var(--accent); color:var(--sur-accent); box-shadow:0 6px 14px -8px rgba(var(--accent-rgb),.95)}
.ct-btn{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:var(--card);
  color:var(--txt); cursor:pointer; font-size:14px;
  display:grid; place-items:center;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background .15s, border-color .15s;
}
.ct-btn:hover{border-color:rgba(var(--accent-rgb),.4); background:var(--card2)}
.ct-btn:active{transform:scale(.92)}

/* ---------- Thème clair ---------- */
body.clair{
  --bg:#F8F8FC;
  --card:#ffffff; --card2:#EFEFFA;
  --border:rgba(17,19,38,.14); --txt:#111326; --muted:#70738A;
  --accent-soft:rgba(var(--accent-rgb),.14);
  /* Sur fond clair, le corail de Signature tombait a 2.77 : c'est la ligne de
     metier sous le nom, sur l'ambiance par defaut de tout nouveau createur. */
  --accent-txt:#5B5FEF; --sand-txt:#b85046;
  background:#F8F8FC;
}
/* L'ombre portée prend la teinte SOMBRE de l'ambiance (--voile-rgb), pas un bleu
   nuit figé : sous une fiche rose ou verte, une ombre bleutée se remarque. */
body.clair .card, body.clair .stat, body.clair .soc, body.clair .p-opt{
  box-shadow:0 2px 12px rgba(var(--voile-rgb),.10);
}
/* et le survol reprend la matière de l'ambiance (--card2), pas un blanc bleuté */
body.clair .card:hover{background:var(--card2)}
body.clair::before{
  background:
    radial-gradient(600px 400px at 15% -5%, rgba(var(--accent-rgb),.13), transparent 60%),
    radial-gradient(500px 350px at 95% 20%, rgba(var(--sand-rgb),.14), transparent 60%);
}
body.clair .sheet{background:#ffffff}
body.clair .toast{background:#fff}
body.clair .cd{background:rgba(255,255,255,.65)}
body.clair .avatar{border-color:var(--bg); background:linear-gradient(140deg,rgba(var(--accent-rgb),.2),rgba(var(--sand-rgb),.2)),var(--card2);
  /* le raccourci background remet background-size à auto : sans le cover ci-dessous,
     un avatar uploadé n'affiche que son coin en thème clair (bug trouvé le 7 août 2026) */
  background-size:cover; background-position:center}
body.clair .badge-v{border-color:var(--bg)}
body.clair .play{color:#f6f6fb}

/* ---------- Panneau QR ---------- */
#qrCanvas{display:block; margin:0 auto 14px; border-radius:14px}
.sheet4 .cta{width:100%}
body.qr-open .veil{opacity:1; pointer-events:auto}
body.qr-open .sheet4{transform:translate(-50%,0)}

/* isolation : l'anneau de l'avatar est un calque posé DERRIÈRE lui (z-index:-1).
   Sans contexte d'empilement ici, il retomberait sous la couverture, que
   l'identité chevauche de 48 px, et le haut de l'anneau disparaîtrait.
   Le gabarit Portrait obtient la même chose par son z-index:2. */
.hero-body{margin-top:-48px; padding:0 18px; position:relative; isolation:isolate; text-align:center}
.avatar{
  width:96px; height:96px; border-radius:50%; border:4px solid var(--bg);
  background:linear-gradient(140deg,rgba(var(--accent-rgb),.2),rgba(var(--sand-rgb),.2)),var(--surface);
  background-size:cover; background-position:center;
  display:grid; place-items:center; margin:0 auto;
  font-family:'Space Grotesk'; font-size:26px; font-weight:600; color:var(--accent-txt);
  position:relative;
  /* halo coloré : il suit l'accent de l'ambiance sans coûter un calque de plus */
  box-shadow:0 14px 30px -16px rgba(0,0,0,.55), 0 10px 26px -12px rgba(var(--accent-rgb),.6);
}
/* Anneau d'ambiance (dégradé accent → sable). L'image du créateur est portée par
   background-image : le contour ne peut donc pas l'être, il passe par un calque
   posé derrière, qui déborde de la bordure couleur du fond.
   PIÈGE : le décalage d'un élément absolu se compte depuis la boîte de PADDING,
   pas depuis la bordure. Ici la bordure fait 4 px, il faut donc 4 + 3 pour que
   3 px d'anneau dépassent réellement ; en Portrait la bordure est nulle et le
   décalage retombe à 3 (plus bas). Un inset:-3px ici laissait l'anneau
   entièrement caché SOUS la bordure : dégradé calculé, jamais vu. */
.avatar::before{
  content:""; position:absolute; inset:-7px; border-radius:inherit; z-index:-1;
  background:linear-gradient(150deg,var(--accent),var(--sand));
}
.hero-socials{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:14px}
.hero-socials:empty{display:none}
.hs-btn{
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:var(--card); border:1px solid var(--border);
  display:grid; place-items:center;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), background .15s, border-color .15s;
}
.hs-btn:hover{background:var(--card2); border-color:rgba(var(--accent-rgb),.4); transform:translateY(-2px)}
.hs-btn:active{transform:scale(.94)}
.hs-btn .rs{width:26px; height:26px}

/* ---------- Icônes de réseaux (10 aout 2026) ----------
   Un seul markup pour les trois traitements, parce que l'editeur change
   d'ambiance et le visiteur bascule jour/nuit SANS RECHARGER : si la forme de
   l'icone etait choisie par le PHP, elle resterait figee sur l'ambiance de
   depart. Le serveur ne rend donc que le trace (app/fiche.php, reseau_svg) ;
   la pastille, la couleur et la taille se decident ici.

   Par defaut, le traitement 'marque' : la pastille prend la couleur officielle
   et le glyphe se pose dessus, reduit a 62.5 % pour garder sa marge. Les
   ambiances qui prennent la main (accent / fondu) effacent la pastille et
   peignent le glyphe, dans ambiance_reseaux_css(). Les variables --rs-bg,
   --rs-sur et --rs-ico viennent de reseaux_css_socle(), servi dans la page.
   Le glyphe suit currentColor : c'est ce qui rend la couleur pilotable. */
.rs{
  display:grid; place-items:center; flex:0 0 auto;
  width:30px; height:30px; border-radius:9px;
  background:var(--rs-bg); color:var(--rs-sur);
}
/* PIEGE : ne JAMAIS donner au glyphe une hauteur en POURCENTAGE. La pastille
   est une grille, et un enfant dont la hauteur depend de la ligne (qui depend
   elle-meme de l'enfant) cree un cycle : le navigateur renonce a le centrer et
   le colle EN HAUT. Le glyphe partait ainsi 11 px trop haut dans une pastille
   de 30. Le viewBox etant carre, une largeur suffit : la hauteur suit. */
.rs>svg{width:62.5%; height:auto; aspect-ratio:1; display:block; fill:currentColor}
.badge-v{
  position:absolute; right:-4px; bottom:-4px; width:24px; height:24px;
  background:var(--accent); border:3px solid var(--bg); border-radius:50%;
  display:grid; place-items:center; font-size:11px; color:var(--sur-accent); font-weight:800;
  box-shadow:0 4px 14px rgba(var(--accent-rgb),.55);
}
.dispo{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  background:var(--accent-soft); border:1px solid rgba(var(--accent-rgb),.3);
  color:var(--accent-txt); font:700 11px 'Inter'; padding:5px 11px; border-radius:999px;
}
.dispo::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.35}}
.hero h1{font-size:22px; font-weight:700; margin-top:10px}
.handle{color:var(--accent-txt); font-weight:700; font-size:13px; margin-top:2px}
.metier{color:var(--sand-txt); font-weight:600; font-size:13px; margin-top:6px}
.bio{color:var(--muted); font-size:13.5px; line-height:1.6; margin-top:8px}

/* =========================================================
   GABARIT « PORTRAIT » (migration 010)
   Même HTML, même éditeur, même ambiance : seul l'agencement de l'identité
   change. Tout est porté par body[data-g="portrait"], donc le gabarit « rail »
   ci-dessus reste strictement intact.
   ========================================================= */
/* Tant que le créateur n'a pas mis sa photo, la couverture affiche le DÉGRADÉ de
   l'ambiance (.cover{background:var(--grad)}, déjà là). Essayé puis abandonné le
   7 août 2026 : y poser la photo de l'ambiance la faisait apparaître deux fois,
   nette en haut et voilée en fond, avec un raccord franchement visible. */
body[data-g="portrait"] .cover{
  height:270px; border-radius:0;
  margin:0 -16px;              /* la couverture va d'un bord à l'autre */
}
@media (max-width:560px){ body[data-g="portrait"] .cover{margin:0 -12px} }
/* La couverture se fond dans le fond de la page : sans ce dégradé, son bas
   tranche net et le badge de disponibilité devient illisible sur une photo
   très colorée. */
body[data-g="portrait"] .cover::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,var(--bg) 99%);
}
body[data-g="portrait"] .share-btn{z-index:6}

body[data-g="portrait"] .hero-body{
  margin-top:-58px; padding:0 2px; text-align:left; position:relative; z-index:2;
}
body[data-g="portrait"] .pt-id{display:flex; align-items:flex-end; gap:13px}
/* Même anneau que le gabarit Rail (.avatar::before, plus haut) : ici l'avatar
   n'a pas de bordure couleur du fond, le dégradé touche donc directement la
   photo, et le décalage retombe à la seule épaisseur de l'anneau. */
body[data-g="portrait"] .avatar{
  width:96px; height:96px; border-radius:26px; margin:0; flex:0 0 auto;
  border:0; position:relative;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.7), 0 10px 26px -12px rgba(var(--accent-rgb),.55);
}
body[data-g="portrait"] .avatar::before{inset:-3px}
/* Sans image, l'initiale doit rester lisible sur le fond de la page */
body[data-g="portrait"] .avatar .av-init{font-size:30px}
body[data-g="portrait"] .badge-v{right:-5px; bottom:-5px; width:27px; height:27px; font-size:12px}
body[data-g="portrait"] .pt-side{
  flex:1 1 auto; min-width:0; padding-bottom:4px;
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
}
body[data-g="portrait"] .pt-side .dispo{margin-top:0}
body[data-g="portrait"] .pt-side .line{justify-content:flex-start; width:100%}
body[data-g="portrait"] .pt-side .handle{font-size:12.5px; color:var(--muted)}

body[data-g="portrait"] .hero h1{
  font-size:31px; line-height:1.04; letter-spacing:-.02em; margin-top:15px;
}
body[data-g="portrait"] .line{justify-content:flex-start}
body[data-g="portrait"] .line>.ed{text-align:left}
body[data-g="portrait"] .metier{margin-top:9px; font-size:13px}
body[data-g="portrait"] .bio{margin-top:11px; font-size:14.5px; line-height:1.62}
body[data-g="portrait"] .hero-socials{justify-content:flex-start; margin-top:16px}
body[data-g="portrait"] .line-add{margin-top:12px}

/* =========================================================
   GABARIT « ÉPURÉ » (10 août 2026)
   Aucune couverture : la photo de profil, centrée, posée directement sur le fond
   de l'ambiance. Tout le reste est celui du gabarit Rail (mêmes briques, même
   éditeur) : seules les règles qui dépendaient de la couverture sont reprises.
   Le HTML ne contient PAS de .cover : rien à masquer, rien à recouvrir.
   ========================================================= */
/* Rail remonte l'identité de 48 px pour chevaucher la couverture. Sans elle, ce
   décalage tirerait l'avatar sous la barre collante : il repart de zéro, avec
   l'air qu'il faut au-dessus de la photo. */
body[data-g="epure"] .hero-body{margin-top:0; padding:30px 18px 0}
/* Le bouton Partager quittait la couverture. Posé sur le fond de la page, le
   voile sombre des pastilles d'image n'a plus lieu d'être : il prend la matière
   des cartes de l'ambiance, et se réduit à son icône pour ne jamais approcher
   l'avatar, même sur un écran de 320 px.
   Il descend à la hauteur du haut de la photo : collé en haut, il se retrouvait
   juste sous la barre d'outils de section de l'éditeur, deux pastilles l'une
   au-dessus de l'autre dans le vide. */
body[data-g="epure"] .share-btn{
  top:30px; right:12px; width:38px; height:38px; padding:0; justify-content:center;
  background:var(--card); border-color:var(--border); color:var(--txt);
  box-shadow:none; font-size:14px;
}
body[data-g="epure"] .share-btn:hover{background:var(--card2); border-color:rgba(var(--accent-rgb),.4)}
body[data-g="epure"] .share-btn span{display:none}
/* Épuré : le libellé disparaît, l'icône reste seule dans une pastille de 38 px.
   Elle est agrandie pour occuper la place laissée libre, sinon elle flotte au
   milieu d'un rond trop grand pour elle. */
body[data-g="epure"] .share-btn .share-ico{width:18px; height:18px; margin-top:0}
/* L'anneau d'ambiance et la bordure couleur du fond restent ceux de Rail : ici
   la photo se détache du fond de la page au lieu d'une couverture, l'effet est
   le même et le code ne se dédouble pas. */

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:8px}
.stat{
  position:relative;
  background:var(--card); border:1px solid var(--border); border-radius:min(var(--r), 22px);
  padding:12px 6px; text-align:center; transition:border-color .25s;
}
.stat:hover{border-color:rgba(var(--accent-rgb),.35)}
.stat .num{font-size:15px; font-weight:600; color:var(--txt)}
/* Enfant direct seulement : le chiffre peut contenir un span bilingue data-fr/data-en */
.stat>span{display:block; font-size:10px; color:var(--muted); font-weight:600; margin-top:4px; text-transform:uppercase; letter-spacing:.6px}

/* ---------- Cartes ---------- */
.card{
  position:relative;
  background:var(--card); border:1px solid var(--border); border-radius:min(var(--r), 34px);
  padding:16px; margin-bottom:10px;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s, border-color .25s;
}
.card:hover{background:var(--card2); border-color:rgba(var(--accent-rgb),.45)}
/* Seule une carte CLIQUABLE se soulève : une carte de texte qui bouge au survol
   promet un clic qui n'existe pas. */
body.apercu .card.lnk:hover{transform:translateY(-2px)}
body.apercu .card.lnk:active{transform:scale(.99)}
.card h3{font-size:14px; font-weight:600; margin-bottom:4px}
.card p{color:var(--muted); font-size:12.5px; line-height:1.55}
.row{display:flex; align-items:center; gap:14px}
.ico{
  flex:0 0 46px; width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center; font-size:20px;
  background:var(--accent-soft);
}
/* icône SVG du catalogue local (clé dans `icone`) : au trait, teintée accent */
.ico svg{width:22px; height:22px; color:var(--accent-txt); display:block}
/* vignette image d'une carte lien (modèle Beacons : image, sinon icône, sinon rien) */
.lnk-img{
  flex:0 0 46px; width:46px; height:46px; border-radius:14px;
  background-color:var(--accent-soft);
  background-size:cover; background-position:center;
}
.chev{margin-left:auto; color:var(--muted); font-size:18px; transition:.25s}
.card.lnk:hover .chev{color:var(--accent-txt); transform:translateX(3px)}

/* ---------- Bouton d'appel à l'action ----------
   C'est la pièce où l'ambiance se lit le plus vite : dégradé de l'accent, ombre
   portée de la même teinte, et un reflet qui balaie le bouton. Changer de modèle
   change les trois d'un coup, sans une ligne de CSS par ambiance. */
.cta{
  position:relative; overflow:hidden;
  display:inline-block; margin-top:10px; cursor:pointer;
  background:linear-gradient(145deg,var(--accent),rgba(var(--accent-rgb),.72));
  color:var(--sur-accent); font:700 12.5px 'Inter';
  padding:9px 18px; border-radius:999px; border:0;
  box-shadow:0 10px 22px -12px rgba(var(--accent-rgb),.95);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .25s;
}
.cta:hover{box-shadow:0 14px 28px -12px rgba(var(--accent-rgb),1)}
.cta:active{transform:scale(.965)}
.cta::after{
  content:""; position:absolute; top:0; left:-70%; width:45%; height:100%;
  pointer-events:none; transform:skewX(-18deg);
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
  animation:reflet 5s ease-in-out infinite;
}
@keyframes reflet{0%{left:-70%}55%,100%{left:130%}}
.cta.ghost{
  background:transparent; color:var(--accent-txt);
  border:1px solid rgba(var(--accent-rgb),.4); box-shadow:none;
}
.cta.ghost:hover{background:var(--accent-soft); border-color:rgba(var(--accent-rgb),.7); box-shadow:none}
.cta.ghost::after{display:none}
.lnkwrap{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
body.apercu .lnk{cursor:pointer}

/* Ce que le visiteur va recevoir, sous le bouton d'un document : il sait avant
   de cliquer que c'est un téléchargement, et ce qu'il pèse sur son forfait. */
.doc-meta{color:var(--muted); font-size:11px; margin-top:7px; letter-spacing:.2px}

/* ---------- Cartes qui reçoivent une donnée (contact, newsletter) ---------- */
.fb-champs{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.fb-in{
  width:100%; background:var(--card2); color:var(--txt);
  border:1px solid var(--border); border-radius:12px;
  padding:11px 13px; font:500 16px 'Inter';   /* 16px : pas de zoom iOS */
  -webkit-appearance:none; appearance:none;
}
.fb-in::placeholder{color:var(--muted); opacity:1}
.fb-in:focus{outline:none; border-color:rgba(var(--accent-rgb),.55)}
.fb-in:disabled{opacity:.55}
.fb-msg{resize:vertical; min-height:82px; line-height:1.5}
body.clair .fb-in{background:#ffffff}
.fb-piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.fb-envoi{width:100%; text-align:center}
.fb-envoi:disabled{opacity:.55; cursor:default}
/* Mention de consentement sous le formulaire d'inscription à la lettre
   d'information : lisible sans effort, mais nettement en retrait du bouton. */
.fb-mention{font-size:11.5px; line-height:1.55; margin-top:10px; opacity:.72}
.fb-mention a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.fb-etat{font-size:12px; line-height:1.5; margin-top:9px; display:none}
.fb-etat.on{display:block}
.fb-etat.ok{color:var(--accent-txt)}
.fb-etat.ko{color:var(--sand-txt)}
.form-bloc.envoye .fb-champs, .form-bloc.envoye .fb-envoi{display:none}

/* ---------- Réseaux sociaux ---------- */
.socials{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.soc{
  position:relative; background:var(--card); border:1px solid var(--border); border-radius:min(var(--r), 22px);
  padding:16px 8px 12px; text-align:center;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s, border-color .25s;
}
body.apercu .soc:hover{background:var(--card2); border-color:rgba(var(--accent-rgb),.45); transform:translateY(-3px)}
body.apercu .soc:active{transform:scale(.96)}
.soc .s-ico .rs{margin:0 auto}
.soc b{display:block; font-size:11.5px; margin-top:7px; min-height:14px}
.soc small{color:var(--muted); font-size:10.5px; display:block; margin-top:2px; min-height:12px}
.prix{color:var(--accent-txt); font-family:'Space Grotesk'; font-size:15px; margin-top:8px}

/* Tout champ vide disparaît en aperçu */
body.apercu .hide{display:none!important}

/* ---------- Lignes de texte (centrées) ---------- */
.line{position:relative; display:flex; justify-content:center; align-items:flex-start; gap:6px}
.line>.ed{flex:0 1 auto; min-width:0; text-align:center}

/* ---------- Sondage ---------- */
.p-opt{
  position:relative; border:1px solid var(--border); border-radius:12px;
  padding:11px 14px; margin-bottom:8px; overflow:hidden;
  display:flex; align-items:center; gap:8px;
}
body.apercu .poll:not(.voted) .p-opt{cursor:pointer}
body.apercu .poll:not(.voted) .p-opt:hover{border-color:rgba(var(--accent-rgb),.5)}
.p-bar{position:absolute; inset:0; width:0%; background:var(--accent-soft); transition:width .6s; z-index:0}
.p-opt .lbl{position:relative; z-index:1; font:600 13px 'Inter'}
.p-pct{margin-left:auto; position:relative; z-index:1; color:var(--accent-txt); font:700 12px 'Inter'; display:none}
body.apercu .poll.voted .p-pct{display:block}
.p-opt.chosen{border-color:rgba(var(--accent-rgb),.6)}
.p-total{color:var(--muted); font-size:11px; margin-top:8px}

/* Vidéo */
.thumb{
  height:170px; border-radius:min(var(--r), 26px); margin-bottom:12px; position:relative;
  background:linear-gradient(130deg,rgba(var(--accent-rgb),.42),var(--surface)); background-size:cover; background-position:center;
}
.play{
  position:absolute; inset:0; margin:auto; width:52px; height:52px;
  background:rgba(var(--voile-rgb),.7); backdrop-filter:blur(4px); border:1px solid var(--border);
  border-radius:50%; display:grid; place-items:center; font-size:18px; color:var(--txt);
}
.tag{
  position:absolute; top:10px; left:10px; font:800 10px 'Inter';
  background:#f00; color:#fff; padding:3px 8px; border-radius:6px; letter-spacing:.5px;
}

/* Promo */
.promo{border-color:rgba(var(--sand-rgb),.4); background:linear-gradient(140deg,rgba(var(--sand-rgb),.10),var(--card))}
.promo-badge{
  display:inline-block; background:var(--sand); color:var(--sur-sand);
  font:800 11px 'Inter'; padding:3px 10px; border-radius:999px; margin-bottom:8px;
}
.countdown{display:flex; gap:8px; margin-top:12px}
.cd{
  background:rgba(var(--voile-rgb),.55); border:1px solid var(--border); border-radius:12px;
  padding:8px 0; width:56px; text-align:center;
}
.prix-barre{opacity:.5; font-weight:400}
.cd .num{font-size:16px; color:var(--sand-txt)}
.cd span{font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px}

/* Projet */
.proj-img{height:140px; border-radius:min(var(--r), 26px); margin-bottom:12px; background:linear-gradient(120deg,rgba(var(--accent-rgb),.5),rgba(var(--sand-rgb),.45)); background-size:cover; background-position:center; position:relative}
.statut{
  position:absolute; top:10px; left:10px; font:800 10px 'Inter'; letter-spacing:.5px;
  background:var(--accent); color:var(--sur-accent); padding:3px 9px; border-radius:6px;
}

/* ---------- Sélection d'articles : grille + fiche produit ----------
   Valeurs copiées telles quelles de la maquette gelée test-articles.html, qui
   fait foi pour ce type de section. Seule adaptation : la maquette dessinait
   des SVG de démonstration, le produit affiche les PHOTOS du créateur (fond
   en background-image, comme partout ailleurs dans la fiche). */
.arts{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.art{
  background:var(--card); border:1px solid var(--border); border-radius:min(var(--r), 22px);
  padding:9px; cursor:pointer; transition:.15s;
}
.art:hover{background:var(--card2); border-color:rgba(var(--accent-rgb),.45); transform:translateY(-3px)}
.art:active{transform:scale(.97)}
body.clair .art{box-shadow:0 2px 12px rgba(var(--voile-rgb),.10)}
.art-img{
  aspect-ratio:1/1; border-radius:11px; overflow:hidden; position:relative;
  background:var(--card2) center/cover no-repeat;
}
.art-plus{
  position:absolute; top:7px; right:7px; background:rgba(var(--voile-rgb),.55); color:#fff;
  border-radius:999px; padding:3px 8px; font:700 10px 'Inter'; backdrop-filter:blur(6px);
}
.art b{display:block; font:600 12.5px 'Inter'; margin:8px 2px 2px; line-height:1.3}
.art .prix-c{display:block; color:var(--accent-txt); font:700 13px 'Space Grotesk'; margin:0 2px 2px}

/* Fiche produit (panneau bas) */
.voile-art{
  position:fixed; inset:0; background:rgba(var(--voile-rgb),.62); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:.25s; z-index:80;
}
.sheet-art{
  position:fixed; left:50%; bottom:0; transform:translate(-50%,105%); z-index:81;
  width:100%; max-width:430px; max-height:88vh; overflow:auto;
  background:var(--card); border:1px solid var(--border); border-radius:26px 26px 0 0;
  transition:transform .3s cubic-bezier(.2,.8,.25,1);
}
body.clair .sheet-art{background:#fff}
body:not(.clair) .sheet-art{background:var(--surface)}
body.fiche-ouverte .voile-art{opacity:1; pointer-events:auto}
body.fiche-ouverte .sheet-art{transform:translate(-50%,0)}
.sa-poignee{width:44px; height:5px; border-radius:99px; background:var(--border); margin:10px auto 4px}
.sa-fermer{
  position:absolute; top:14px; right:14px; z-index:3; width:34px; height:34px; border-radius:50%;
  border:0; background:rgba(var(--voile-rgb),.45); color:#fff; font-size:15px; cursor:pointer; backdrop-filter:blur(6px);
}
/* Galerie swipable : scroll-snap natif, aucune bibliothèque */
.gal{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  gap:0; margin-top:6px;
}
.gal::-webkit-scrollbar{display:none}
.gal>div{
  flex:0 0 100%; scroll-snap-align:center; aspect-ratio:5/4; position:relative;
  background:var(--card2) center/cover no-repeat;
}
.points{display:flex; justify-content:center; gap:6px; margin:10px 0 2px}
.points i{width:7px; height:7px; border-radius:50%; background:var(--border); transition:.2s}
.points i.on{background:var(--accent); transform:scale(1.25)}
.sa-corps{padding:6px 20px 22px}
.sa-corps h3{font-size:19px; letter-spacing:-.3px}
.sa-corps .desc{color:var(--muted); font-size:13.5px; line-height:1.6; margin:8px 0 12px}
.sa-prix{display:flex; align-items:baseline; gap:9px; margin-bottom:14px}
.sa-prix b{font:700 24px 'Space Grotesk'; color:var(--accent-txt)}
.sa-prix s{color:var(--muted); font-size:14px}
.sa-cta{
  width:100%; border:0; border-radius:14px; padding:15px; cursor:pointer;
  background:linear-gradient(145deg,var(--accent),rgba(var(--accent-rgb),.72));
  color:var(--sur-accent); font:700 15px 'Inter';
  box-shadow:0 12px 26px -14px rgba(var(--accent-rgb),.95);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .3s, filter .15s;
}
.sa-cta:hover{filter:brightness(1.08); box-shadow:0 16px 32px -14px rgba(var(--accent-rgb),1)}
.sa-cta:active{transform:scale(.98)}
.sa-note{text-align:center; color:var(--muted); font-size:11px; margin-top:9px}
/* Un champ vide disparaît, ici comme partout (P8) : la fiche produit d'un
   article sans description ne laisse pas de blanc. */
.sheet-art .vide{display:none}

/* ---------- Bottom sheet (panneau QR) ---------- */
.veil{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:90; opacity:0; pointer-events:none; transition:.25s}
.sheet{
  position:fixed; left:50%; bottom:0; transform:translate(-50%,105%); z-index:100;
  width:min(430px,100%); background:var(--surface); border:1px solid var(--border);
  border-radius:24px 24px 0 0; padding:20px 16px 28px; transition:transform .3s cubic-bezier(.3,1,.4,1);
  max-height:80vh; overflow-y:auto;
}
.sheet h2{font-size:14px; font-weight:600; margin-bottom:14px; text-align:center}
.np-hint{color:var(--muted); font-size:12px; line-height:1.5; margin-bottom:12px; text-align:center}

/* ---------- Toast ---------- */
/* Le message passager. `max-width` et le centrage sont indispensables : sans
   eux, un message un peu long déborde des deux côtés de l'écran (le bloc est
   centré par translateX) et se fait couper. Constaté sur 390 px avec le message
   du mode des réseaux, corrigé le 10 août 2026. Le rayon suit : une pilule à
   999px sur deux lignes donne un ovale, 20px tient sur une ligne comme sur trois. */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%,80px); z-index:120;
  max-width:min(430px, calc(100vw - 32px)); text-align:center;
  background:var(--surface); border:1px solid rgba(var(--accent-rgb),.4); color:var(--txt);
  font:600 13px/1.45 'Inter'; padding:11px 20px; border-radius:20px;
  transition:transform .3s; box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.toast.show{transform:translate(-50%,0)}
.toast b{color:var(--accent-txt)}

/* ---------- Adaptation téléphone ---------- */
@media (max-width:560px){
  /* Aucun décalage en haut : la barre collante EST le haut de la page. */
  .rail{padding:0 12px 24px}
  /* La barre suit les marges réduites du rail, sinon elle décale de 4 px. */
  .hero-bar{padding:8px 12px}
}

/* ---------- Écrans tactiles ---------- */
@media (hover:none){
  /* Panneaux : marge pour l'encoche du bas */
  .sheet{padding-bottom:max(28px, env(safe-area-inset-bottom))}
  /* Pas de survol au doigt : une carte qui reste soulevée après un appui donne
     l'impression d'un bouton coincé. */
  body.apercu .card.lnk:hover, body.apercu .soc:hover, .art:hover, .hs-btn:hover{transform:none}
}

/* ---------- Réglage système « moins d'animations » ---------- */
@media (prefers-reduced-motion:reduce){
  .cta::after{display:none}
  .dispo::before{animation:none}
  html{scroll-behavior:auto}
}