/* ═══════════════════════════════════════════════════════════════════════════
   STAR PIGEON STUDIO — feuille de style de l'application
   by Marlys Concept

   Les couleurs ne sont PAS choisies ici : elles descendent de PHP
   (SPS_Config::palette()), qui les reprend telles quelles des jetons de
   Star Pigeons Manager. Modifier la palette se fait donc en un seul endroit,
   et les deux produits restent assortis.

   Principe de mise en page : mobile d'abord. Chaque écran fait une chose.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Les polices de composition, celles-là mêmes qui servent au rendu final.
      L'aperçu montre donc exactement la typographie de l'image livrée. ── */
@font-face{font-family:'SPS Display';src:url(../fonts/display.otf) format('opentype');
  font-weight:400;font-display:swap}
@font-face{font-family:'SPS Display';src:url(../fonts/display-bold.otf) format('opentype');
  font-weight:700;font-display:swap}
@font-face{font-family:'SPS Text';src:url(../fonts/text.otf) format('opentype');
  font-weight:400;font-display:swap}
@font-face{font-family:'SPS Text';src:url(../fonts/text-bold.otf) format('opentype');
  font-weight:700;font-display:swap}

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

/* `hidden` doit toujours l'emporter : sans cette ligne, une classe qui pose un
   display (.shot, .panel…) rallume un bloc que le script vient de masquer —
   c'est ce qui affichait le cadre d'analyse et une image cassée avant même
   d'avoir choisi une photo. */
[hidden]{display:none !important}

/* Champ visible des seuls lecteurs d'écran (les champs « fichier », portés
   par un bouton). */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

html{-webkit-text-size-adjust:100%}
body.sps{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'SPS Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}

.sps-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.sps-wrap--narrow{max-width:860px}

h1,h2,h3{font-family:'SPS Display',Georgia,serif;font-weight:700;
  letter-spacing:-.01em;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,5.2vw,3.3rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.2rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.lead{font-size:clamp(1.02rem,1.9vw,1.22rem);color:var(--ink2);max-width:56ch}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-d);margin:0 0 .9rem}
.muted{color:var(--ink3)}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ── EN-TÊTE ─────────────────────────────────────────────────────────── */
.sps-head{position:sticky;top:0;z-index:50;background:rgba(248,242,228,.92);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
.sps-head__in{display:flex;align-items:center;gap:14px;height:76px}
@media (max-width:559px){.sps-head__in{height:64px;gap:10px}}
/* Le logo officiel. UNE seule dimension est imposée (la hauteur) : la largeur
   suit le rapport du fichier, donc il ne peut pas se déformer. */
.sps-logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;
  padding:6px 0;transition:opacity .16s ease}
.sps-logo:hover{text-decoration:none;opacity:.86}
.sps-logo__img,.sps-logo__img img{display:block}
/* Ce logo est une PLAQUE qui porte trois lignes de texte : réduit à 36 px il
   n'était plus qu'une pastille illisible. 54 px de haut (44 sur téléphone),
   c'est le plancher en dessous duquel « Star-Pigeons Studio » ne se lit plus. */
.sps-logo__img img{height:54px;width:auto;max-width:none}
@media (max-width:559px){.sps-logo__img img{height:44px}}

/* Accueil : le logo tient la place du sur-titre, en grand mais pas envahissant. */
.hero__logo{margin:0 auto 22px;width:min(420px,74vw)}
.hero__logo picture,.hero__logo img{display:block;width:100%;height:auto}

.sps-foot__brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sps-foot__logo,.sps-foot__logo img{display:block}
.sps-foot__logo img{height:34px;width:auto;max-width:none;opacity:.9}
.sps-nav{display:none;margin-left:auto;gap:4px}
.sps-nav a{padding:.5rem .85rem;border-radius:9px;color:var(--ink2);font-size:.94rem;font-weight:500}
.sps-nav a:hover{background:var(--cream3);color:var(--ink);text-decoration:none}
.sps-nav a.on{color:var(--ink);background:var(--gold-pale);font-weight:600}
.sps-head__end{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.sps-nav+.sps-head__end{margin-left:0}

.sps-credits{display:inline-flex;align-items:center;gap:.42rem;padding:.42rem .8rem;
  border:1px solid var(--gold-line);background:var(--gold-pale);border-radius:999px;
  font-size:.86rem;font-weight:700;color:var(--gold-d);white-space:nowrap}
.sps-credits:hover{text-decoration:none;border-color:var(--gold)}
.sps-credits .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
/* Pendant l'essai, la pastille annonce la gratuité au lieu d'un solde. */
.sps-credits--free{border-color:var(--green);background:var(--green-pale);color:var(--green);
  cursor:default}
.sps-credits--free .dot{background:var(--green)}
/* Sur un écran étroit l'en-tête doit tenir sur une ligne : la gratuité est
   déjà annoncée sur l'accueil et à l'étape de l'aperçu. */
@media (max-width:559px){.sps-credits--free{display:none}}

/* ── BOUTONS ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.86rem 1.5rem;border:1px solid transparent;border-radius:12px;
  font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none;
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease;
  min-height:48px}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
.btn--primary{background:var(--green);color:#fff;box-shadow:0 1px 2px rgba(20,97,78,.24)}
.btn--primary:hover{background:var(--green2);box-shadow:0 6px 18px -6px rgba(20,97,78,.5)}
.btn--gold{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#3B2C06;
  border-color:var(--gold);box-shadow:0 1px 2px rgba(154,106,17,.22)}
.btn--gold:hover{box-shadow:0 8px 22px -8px rgba(154,106,17,.55)}
.btn--ghost{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--gold);background:#fff}
.btn--quiet{background:transparent;border-color:transparent;color:var(--ink2);
  padding:.6rem .9rem;min-height:auto}
.btn--quiet:hover{background:var(--cream3);color:var(--ink)}
.btn--sm{padding:.55rem 1rem;font-size:.88rem;min-height:40px;border-radius:10px}
.btn--block{width:100%}
.btn--danger{background:transparent;border-color:var(--line);color:var(--red)}
.btn--danger:hover{background:var(--red-pale);border-color:var(--red)}

/* ── CARTES ──────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.card--flat{box-shadow:none}
.card--pad{padding:26px}
.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr 1fr}

/* ── ACCUEIL ─────────────────────────────────────────────────────────── */
.hero{padding:52px 0 12px}
.hero .lead{margin-bottom:1.7rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.freeflag{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 1.1rem;
  padding:.4rem .9rem;border-radius:999px;border:1px solid var(--green);
  background:var(--green-pale);color:var(--green);font-size:.86rem;font-weight:700}
.freeflag .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.hero__sign{margin-top:2.2rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3)}

/* Avant / après */
.ba{position:relative;margin:34px 0 10px}
.ba__stage{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 22px 50px -30px rgba(46,39,24,.45)}
.ba__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 0 0 var(--split,50%))}
.ba__line{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;
  background:var(--gold);pointer-events:none}
.ba__knob{position:absolute;top:50%;left:var(--split,50%);width:42px;height:42px;
  margin:-21px 0 0 -21px;border-radius:50%;background:var(--gold);color:#3B2C06;
  display:grid;place-items:center;font-size:.9rem;font-weight:700;
  box-shadow:0 4px 14px rgba(46,39,24,.35);pointer-events:none}
.ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
/* Les deux étiquettes vivent dans .ba__legend, à côté de la scène et non
   dedans (.ba__stage rogne ce qui dépasse). Sur grand écran elles reviennent
   se poser sur l'image, exactement où elles étaient ; sur téléphone elles
   descendent sous la photo — voir la règle 559px plus bas. */
.ba__legend{position:absolute;top:14px;left:14px;right:14px;display:flex;
  justify-content:space-between;gap:10px;pointer-events:none}
.ba__tag{padding:.3rem .7rem;border-radius:999px;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,252,244,.9);color:var(--ink2);border:1px solid var(--line)}
.ba__tag--r{background:var(--gold);color:#3B2C06;border-color:var(--gold)}
.ba__empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:30px;color:var(--ink3);
  background:radial-gradient(circle at 50% 42%,#FFFCF4,#EFE4CC)}
.ba__dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.ba__dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;
  background:var(--line);cursor:pointer}
.ba__dots button.on{background:var(--gold);width:24px;border-radius:5px}
/* Téléphone : la photo d'abord.
   Posées sur l'image, les deux étiquettes finissaient par se rejoindre en une
   bande qui barrait tout le haut — et le nom de la marque, en capitales
   espacées, débordait du bord droit. Elles descendent donc SOUS la photo, une
   par côté, en face de la moitié qu'elles nomment. La scène passe au carré :
   l'écran étant étroit, c'est de la hauteur qu'il faut prendre pour que
   l'oiseau se voie. */
@media (max-width:559px){
  .ba__stage{aspect-ratio:1/1;border-radius:16px}
  .ba__legend{position:static;margin-top:10px;gap:8px}
  .ba__tag{font-size:.6rem;letter-spacing:.08em;padding:.28rem .6rem}
}

/* Conseils photo */
.tips{display:grid;gap:14px;grid-template-columns:1fr}
.tip{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.tip__ico{width:44px;height:44px;border-radius:12px;background:var(--gold-pale);
  display:grid;place-items:center;margin-bottom:12px;color:var(--gold-d)}
.tip h3{margin:0 0 .35rem;font-size:1rem;font-family:'SPS Text',sans-serif;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase}
.tip p{margin:0;font-size:.93rem;color:var(--ink2)}

/* Vidéo */
.video{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(160deg,#4C3A16,#241C0C);aspect-ratio:16/9;
  display:grid;place-items:center;text-align:center;padding:28px}
.video__play{width:74px;height:74px;border-radius:50%;border:0;cursor:pointer;
  background:var(--gold);color:#3B2C06;display:grid;place-items:center;
  font-size:1.5rem;box-shadow:0 10px 30px rgba(0,0,0,.35);margin:0 auto .9rem}
.video__play:hover{transform:scale(1.05)}
.video h3{color:#F7EFDC;margin-bottom:.2rem}
.video p{color:#CBB78E;margin:0;font-size:.92rem}
.video video,.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── ASSISTANT ───────────────────────────────────────────────────────── */
/* Sur téléphone : une ligne de texte et une barre. Le ruban des cinq étapes
   ne tenait pas dans l'écran et se coupait au milieu d'un mot. */
.wiz{margin:20px 0 26px}
.wiz__mini{display:flex;align-items:baseline;gap:.5rem;margin:0 0 .5rem;font-size:.9rem;
  color:var(--ink2)}
.wiz__mini b{color:var(--gold-d);font-weight:700}
.wiz__mini span{font-weight:600;color:var(--ink)}
.wiz__bar{height:5px;border-radius:3px;background:var(--cream3);overflow:hidden}
.wiz__bar i{display:block;height:100%;width:20%;border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--green));transition:width .3s ease}
.steps{display:none;gap:6px;margin:0;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none}
@media (min-width:640px){
  .wiz__mini,.wiz__bar{display:none}
  .steps{display:flex}
}
.steps::-webkit-scrollbar{display:none}
.step{flex:1 0 auto;min-width:104px;display:flex;align-items:center;gap:.5rem;
  padding:.6rem .8rem;border-radius:11px;font-size:.83rem;font-weight:600;
  color:var(--ink3);background:transparent;border:1px solid transparent;white-space:nowrap}
.step__n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:.76rem;background:var(--cream3);color:var(--ink3);flex:none}
.step.on{background:var(--card);border-color:var(--gold-line);color:var(--ink)}
.step.on .step__n{background:var(--gold);color:#3B2C06}
.step.done{color:var(--green)}
.step.done .step__n{background:var(--green-pale);color:var(--green)}

.panel{display:none}
.panel.on{display:block;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel__title{margin-bottom:.3rem}
.panel__sub{color:var(--ink2);margin-bottom:1.5rem}

.actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.actions .spacer{flex:1}
/* Sur téléphone, le bouton qui fait avancer occupe toute la largeur restante :
   c'est la seule action de l'écran, elle doit se voir et se viser au pouce. */
@media (max-width:559px){
  .actions .btn--primary,.actions .btn--gold{flex:1 1 auto}
}

/* Dépôt de photo — une seule carte pleine, bord net.
   (L'ancienne version était une <label> : une boîte EN LIGNE contenant des
   blocs, que le navigateur découpe en fragments dont chacun redessine le
   pointillé — d'où la impression de « carrés en pointillés » sur téléphone.) */
.upload{display:block;border:1px solid var(--gold-line);border-radius:20px;
  background:linear-gradient(180deg,#FFFDF7,var(--card));
  padding:26px 20px;text-align:center;
  box-shadow:0 14px 34px -26px rgba(46,39,24,.5);
  transition:border-color .16s,box-shadow .16s}
.upload.over{border-color:var(--gold);border-style:solid;
  box-shadow:0 0 0 4px var(--gold-pale)}
.upload__ico{width:60px;height:60px;border-radius:18px;background:var(--gold-pale);
  color:var(--gold-d);display:grid;place-items:center;margin:0 auto 14px}
.upload__t{margin:0 0 .25rem;font-size:1.16rem;font-family:'SPS Display',Georgia,serif;
  font-weight:700}
.upload__s{margin:0;color:var(--ink3);font-size:.88rem}
.upload__drag{display:none}
.upload__btns{display:grid;gap:10px;margin-top:20px}

.shot{display:grid;gap:18px;grid-template-columns:1fr;margin-top:24px}
.shot__img{position:relative;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;background:var(--cream3)}
.shot__img img{width:100%;max-height:56vh;object-fit:contain}
/* En haut à droite : en bas, le bouton tombait sur les pattes et la bague,
   c'est-à-dire sur ce que l'on veut justement regarder. */
.shot__change{position:absolute;right:10px;top:10px;border:1px solid var(--line);
  background:rgba(255,252,244,.94);border-radius:999px;padding:.42rem .85rem;
  font-size:.82rem;font-weight:600;cursor:pointer;
  box-shadow:0 4px 14px -6px rgba(46,39,24,.6)}
.shot__change:hover{border-color:var(--gold)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-size:.93rem}
.checks .ico{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:.72rem;font-weight:700;margin-top:1px}
.checks .ok .ico{background:var(--green-pale);color:var(--green)}
.checks .warn .ico{background:var(--gold-pale);color:var(--gold-d)}
.checks .bad .ico{background:var(--red-pale);color:var(--red)}
.checks .todo .ico{background:var(--cream3);color:var(--ink3)}
.checks b{display:block;font-weight:600}
.checks small{color:var(--ink3);display:block;line-height:1.45}
.checks__note{margin-top:14px;font-size:.82rem;color:var(--ink3);
  border-top:1px solid var(--line);padding-top:12px}

/* Champs */
.field{margin-bottom:16px}
.field label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink2);margin-bottom:.42rem}
.field label .opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink3)}
/* Champ obligatoire : l'astérisque se voit, la mention l'explique, et le
   champ se signale franchement quand il bloque le passage à la suite. */
.field label .req{color:#c0392b;font-weight:700;margin-left:.15rem}
.field label .opt--req{color:#c0392b}
.field--ko .inp{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.field--ko .inp:focus{border-color:#c0392b}
.inp,select.inp,textarea.inp{width:100%;padding:.82rem .95rem;border:1px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--ink);font-size:1rem;
  font-family:inherit;min-height:48px}
.inp:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-pale)}
textarea.inp{min-height:92px;resize:vertical}
/* La description peut faire plusieurs paragraphes : elle prend la largeur
   des deux colonnes du formulaire, et de la hauteur. */
.field--wide{grid-column:1/-1}
textarea.inp--area{min-height:168px;line-height:1.5}
.hint{font-size:.83rem;color:var(--ink3);margin-top:.4rem}
.field__row{display:flex;gap:8px;align-items:flex-end}
.field__row .field{flex:1;margin-bottom:0}

.addfield{position:relative;display:inline-block}
.addfield__menu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:20;min-width:220px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;
  box-shadow:0 18px 40px -18px rgba(46,39,24,.4);display:none}
.addfield.open .addfield__menu{display:block}
.addfield__menu button{display:block;width:100%;text-align:left;padding:.6rem .8rem;
  border:0;background:none;border-radius:9px;cursor:pointer;font-size:.94rem}
.addfield__menu button:hover{background:var(--gold-pale)}

/* Bloc Manager */
.spm{border:1px solid var(--gold-line);background:linear-gradient(180deg,#FFFDF6,var(--gold-pale));
  border-radius:18px;padding:20px;margin-bottom:22px}
.spm h3{margin:0 0 .3rem;font-size:1.02rem}
.spm p{margin:0 0 .9rem;font-size:.92rem;color:var(--ink2)}
.spm__row{display:flex;gap:8px;flex-wrap:wrap}
.spm__row .inp{flex:1;min-width:180px}
.spm__soon{display:inline-block;margin-top:.6rem;font-size:.78rem;color:var(--ink3)}

/* Styles */
.styles{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.stylecard{position:relative;border:2px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--card);cursor:pointer;text-align:left;padding:0;transition:border-color .15s}
.stylecard:hover{border-color:var(--gold-line)}
.stylecard.on{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-pale)}
.stylecard__vis{aspect-ratio:4/3;position:relative;display:grid;place-items:center}
.stylecard__shot{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.stylecard__bird{width:34%;opacity:.9;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.stylecard__frame{position:absolute;inset:9%;border:1.5px solid currentColor;opacity:.85}
/* Le texte respire dans le cadre : il y était collé aux quatre bords.
   ⚠ display:block est la CAUSE, pas un détail de mise en forme : c'est un
   <span>, donc une boîte EN LIGNE, et une boîte en ligne n'applique pas sa
   marge intérieure aux blocs qu'elle contient — le padding était écrit mais
   ne poussait rien, le texte allait au ras du bord. Même piège que la zone
   de dépôt de la v11.1.0. */
.stylecard__txt{display:block;padding:16px 18px 18px;border-top:1px solid var(--line)}
.stylecard__txt b{display:block;font-family:'SPS Display',Georgia,serif;font-size:1rem;
  line-height:1.3}
.stylecard__txt small{color:var(--ink3);font-size:.8rem;line-height:1.5;display:block;
  margin-top:.35rem}
.stylecard.off{opacity:.55;cursor:not-allowed}
.stylecard__soon{position:absolute;top:10px;right:10px;background:var(--ink);color:var(--cream);
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.25rem .5rem;border-radius:6px}

/* Position du texte */
.posgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:290px;
  aspect-ratio:4/3;padding:10px;border:1px solid var(--line);border-radius:14px;
  background:var(--cream3)}
.posgrid button{border:1.5px solid var(--line);background:var(--card);border-radius:8px;
  cursor:pointer;padding:0;position:relative;transition:.14s}
.posgrid button:hover{border-color:var(--gold-line)}
.posgrid button.on{border-color:var(--gold);background:var(--gold-pale)}
.posgrid button.on::after{content:'';position:absolute;left:18%;right:18%;top:38%;height:2px;
  background:var(--gold-d);border-radius:2px;box-shadow:0 6px 0 -1px var(--gold)}
.posgrid button:disabled{opacity:.3;cursor:default;background:transparent;border-style:dashed}
.posgrid button.on:disabled{opacity:1}

.switch{display:flex;align-items:center;gap:.85rem;padding:1.05rem 1.15rem;
  border:1px solid var(--line);border-radius:13px;background:var(--card);cursor:pointer}
.switch input{width:20px;height:20px;accent-color:var(--green);flex:none;margin:0}
.switch b{display:block;font-size:.95rem;line-height:1.35}
.switch small{color:var(--ink3);font-size:.82rem;line-height:1.45;display:block;margin-top:.15rem}

/* Aperçu */
.preview{display:grid;gap:20px;grid-template-columns:1fr}
.preview__stage{border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--cream3);box-shadow:0 22px 50px -32px rgba(46,39,24,.5)}
.preview__stage canvas{width:100%;height:auto;display:block}
.recap{list-style:none;margin:0 0 18px;padding:0}
.recap li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--line);font-size:.93rem}
.recap li:last-child{border-bottom:0}
.recap span{color:var(--ink3)}
.recap b{text-align:right;font-weight:600}
.pricetag{display:flex;align-items:baseline;gap:.5rem;padding:16px 18px;border-radius:14px;
  background:var(--gold-pale);border:1px solid var(--gold-line);margin-bottom:16px}
.pricetag b{font-size:1.6rem;font-family:'SPS Display',Georgia,serif;color:var(--gold-d)}
.pricetag span{color:var(--ink2);font-size:.92rem}

/* ── ÉCRAN DE CRÉATION ───────────────────────────────────────────────────
   Tout ce qui s'y affiche vient du serveur. Le pourcentage est la part des
   étapes réellement terminées ; la bande animée dit « ça travaille » pendant
   une étape dont on ne peut RIEN savoir tant qu'elle n'a pas répondu. */
.working{text-align:center;padding:34px 18px 30px;overflow:hidden}
.working__logo{margin:0 auto 20px;max-width:300px}
.working__logo picture,.working__logo img{display:block;width:100%;height:auto}
/* Respiration lente : l'écran vit sans tourner en rond. */
.working__mark img{animation:sps-breathe 3.4s ease-in-out infinite}
@keyframes sps-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.86;transform:scale(.985)}}
.working__eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-d);margin:0 0 .45rem}
.working__title{font-size:clamp(1.15rem,4.4vw,1.5rem);margin:0 0 1.4rem;color:var(--ink)}

.working__gauge{max-width:460px;margin:0 auto}
.working__pct{display:block;font-family:'SPS Display',Georgia,serif;font-weight:700;
  font-size:clamp(2.4rem,11vw,3.2rem);line-height:1;color:var(--green);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-bottom:.55rem}
.working__pct i{font-style:normal;font-size:.44em;color:var(--ink3);margin-left:.06em}

.bar{height:6px;border-radius:3px;background:var(--cream3);overflow:hidden;max-width:420px;
  margin:20px auto 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--green));
  width:0;transition:width .8s ease}
/* La grande jauge : même mécanique, taille lisible au bras tendu. */
.bar--lg{height:13px;border-radius:999px;max-width:none;margin:0;
  box-shadow:inset 0 1px 3px rgba(46,39,24,.14);border:1px solid var(--line)}
.bar--lg i{border-radius:999px;position:relative;
  background:linear-gradient(90deg,var(--gold-l),var(--gold) 45%,var(--green2) 100%);
  transition:width .7s cubic-bezier(.22,.85,.3,1)}
/* Étape opaque : le CHIFFRE ne bouge pas — c'est cette bande, et elle seule,
   qui montre que le travail continue. Elle n'ajoute aucun pourcentage. */
.bar--wait i::after{content:'';position:absolute;left:100%;top:0;bottom:0;width:110px;
  background:linear-gradient(90deg,var(--gold) 0,rgba(199,154,52,0) 100%);
  animation:sps-wait 1.6s ease-in-out infinite}
@keyframes sps-wait{0%{transform:translateX(-40%);opacity:.12}
  50%{opacity:.5}100%{transform:translateX(70%);opacity:.12}}
.bar--err i{background:var(--red);transition:none}
.bar--err i::after{display:none}

/* Un segment par étape réelle : ce qui est fait, ce qui reste, sans un mot. */
.segs{display:flex;gap:3px;margin-top:9px}
.segs span{flex:1 1 0;height:4px;border-radius:2px;background:var(--cream3);
  transition:background .35s ease}
.segs span.done{background:var(--gold-line)}
.segs span.on{background:var(--gold)}

.working__step{margin:1.35rem 0 .2rem;font-size:1.02rem;font-weight:600;color:var(--ink);
  min-height:1.5em;line-height:1.4}
.working__next{margin:0 auto;font-size:.84rem;color:var(--ink3);min-height:1.3em;
  max-width:38ch;line-height:1.5}
/* L'étape dont on ne peut rien savoir : on l'explique au lieu de la maquiller. */
.working__next--note{color:var(--gold-d);font-weight:500;max-width:44ch}
.working__note{margin:1.5rem 0 0;font-size:.82rem;color:var(--ink3)}
.working p{min-height:0}
/* Recomposition : une seconde de calcul local, aucune étape à découper.
   Plutôt que d'inventer un parcours pour meubler, on n'affiche pas de
   chiffre du tout — c'est la seule façon honnête de traiter ce cas. */
.working--simple .working__pct,
.working--simple .segs,
.working--simple .working__next,
.working--simple .working__note{display:none}
.working--simple .bar--lg{max-width:280px;margin-inline:auto}
/* Une navette, pas un remplissage : rien n'y prétend mesurer quoi que ce soit. */
.working--simple .bar--lg i{width:38% !important;transition:none;
  background:linear-gradient(90deg,rgba(199,154,52,0),var(--gold),rgba(29,129,104,0));
  animation:sps-slide 1.25s ease-in-out infinite}
.working--simple .bar--lg i::after{display:none}
@keyframes sps-slide{0%{transform:translateX(-105%)}100%{transform:translateX(268%)}}

/* L'échec : autant de soin que la réussite. */
.workfail .working__logo{max-width:240px;margin-bottom:18px}
.workfail h3{margin-bottom:.5rem}

/* Résultat */
.result__stage{border-radius:20px;overflow:hidden;border:1px solid var(--line);
  background:var(--cream3);box-shadow:0 30px 70px -40px rgba(46,39,24,.6)}
.result__actions{display:grid;gap:10px;grid-template-columns:1fr;margin-top:20px}

/* Galerie — une seule création par ligne au téléphone : à deux colonnes,
   la photo et son nom devenaient illisibles sur un écran de 360 px. */
.gal{display:grid;gap:16px;grid-template-columns:1fr}
.gal__item{background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:transform .16s,box-shadow .2s}
.gal__item:hover{transform:translateY(-2px);box-shadow:0 18px 36px -22px rgba(46,39,24,.5)}
/* display:block est INDISPENSABLE : sans lui ce lien reste en ligne,
   aspect-ratio ne s'applique pas et le height:100% de l'image se résout sur
   elle-même — la vignette prenait 536 px de haut au lieu de 332, la carte
   débordait de son overflow:hidden et le nom, la bague et les boutons
   étaient purement et simplement coupés. */
.gal__img{display:block;aspect-ratio:4/3;background:var(--cream3);position:relative}
/* contain, et non cover : la création porte son nom et son numéro de bague
   imprimés dans l'image ; un recadrage les tranche. */
.gal__img img{width:100%;height:100%;object-fit:contain}
.gal__body{padding:12px 14px 14px}
.gal__body b{display:block;font-family:'SPS Display',Georgia,serif;font-size:1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal__body small{display:block;color:var(--ink3);font-size:.79rem}
.gal__tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:6px;background:var(--cream3);color:var(--ink3)}
.tag--gold{background:var(--gold-pale);color:var(--gold-d)}
.gal__act{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}

/* Tarifs */
.packs{display:grid;gap:16px;grid-template-columns:1fr}
.pack{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;
  display:flex;flex-direction:column;position:relative}
.pack--hot{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-pale)}
.pack__flag{position:absolute;top:-11px;left:24px;background:var(--gold);color:#3B2C06;
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:6px}
.pack h3{font-size:1.25rem;margin-bottom:.15rem}
.pack__tag{color:var(--ink3);font-size:.88rem;margin-bottom:1rem}
.pack__n{font-family:'SPS Display',Georgia,serif;font-size:2.6rem;line-height:1;
  color:var(--gold-d)}
.pack__n small{font-family:'SPS Text',sans-serif;font-size:.9rem;color:var(--ink2);
  display:block;margin-top:.2rem;font-weight:600}
.pack__price{margin:1rem 0;font-size:1.28rem;font-weight:700}
.pack__price .none{font-size:.9rem;font-weight:400;color:var(--ink3)}
.pack__ph{margin-top:auto;padding-top:1rem}
.pack ul{list-style:none;padding:0;margin:1rem 0 0;font-size:.9rem;color:var(--ink2)}
.pack li{padding:.3rem 0 .3rem 1.4rem;position:relative}
.pack li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700}

/* Tableaux compte */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);padding:.5rem 0;border-bottom:1px solid var(--line);font-weight:700}
.tbl td{padding:.68rem 0;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.tbl .plus{color:var(--green)}
.tbl .minus{color:var(--ink2)}
.tbl .zero{color:var(--ink3)}

/* Messages */
.note{border-radius:14px;padding:15px 17px;font-size:.93rem;margin-bottom:18px;
  border:1px solid var(--line);background:var(--card)}
.note--warn{border-color:var(--gold-line);background:var(--gold-pale);color:#4A3A12}
.note--err{border-color:#EDC6BD;background:var(--red-pale);color:#7A2716}
.note--ok{border-color:#BCD9CB;background:var(--green-pale);color:#0F4C3D}
.note b{display:block;margin-bottom:.2rem}

.empty{text-align:center;padding:56px 24px;color:var(--ink3)}
.empty__ico{width:74px;height:74px;border-radius:22px;background:var(--gold-pale);
  color:var(--gold-d);display:grid;place-items:center;margin:0 auto 18px}

.section{padding:46px 0}
.section--tight{padding:30px 0}
.section__head{margin-bottom:26px}
.divider{height:1px;background:var(--line);margin:0}

/* ── PIED DE PAGE ────────────────────────────────────────────────────── */
.sps-foot{border-top:1px solid var(--line);margin-top:56px;padding:30px 0 40px;
  color:var(--ink3);font-size:.86rem}
.sps-foot__in{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.sps-foot b{color:var(--ink2);font-weight:600}

/* ── BARRE MOBILE ────────────────────────────────────────────────────── */
.sps-tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  background:rgba(255,252,244,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.sps-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:.42rem 0;border-radius:11px;font-size:.66rem;font-weight:600;color:var(--ink3)}
.sps-tabs a:hover{text-decoration:none}
.sps-tabs a.on{color:var(--gold-d);background:var(--gold-pale)}
.sps-tabs a.cta{background:var(--green);color:#fff;margin:0 4px}
.sps-tabs a.cta.on{background:var(--green2);color:#fff}
body.sps{padding-bottom:74px}

/* ── GRANDS ÉCRANS ───────────────────────────────────────────────────── */
/* Le glisser-déposer n'existe qu'avec une souris : ne le promettons pas
   au doigt. */
@media (hover:hover) and (pointer:fine){
  .upload{cursor:default;padding:40px 24px}
  .upload__drag{display:inline}
}
/* Les deux boutons côte à côte seulement s'il y a vraiment la place :
   à 500 px ils se coupaient en deux lignes. */
@media (min-width:600px){
  .upload__btns{grid-template-columns:auto auto;justify-content:center}
  .upload__btns .btn{width:auto;padding-inline:1.6rem}
  .gal{grid-template-columns:1fr 1fr}
}

@media (min-width:720px){
  .grid--2{grid-template-columns:1fr 1fr}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .tips{grid-template-columns:repeat(2,1fr)}
  .shot{grid-template-columns:1.25fr 1fr}
  .styles{grid-template-columns:repeat(3,1fr)}
  .preview{grid-template-columns:1.4fr 1fr}
  .gal{grid-template-columns:repeat(3,1fr)}
  .packs{grid-template-columns:repeat(2,1fr)}
  .result__actions{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .sps-nav{display:flex}
  .sps-tabs{display:none}
  body.sps{padding-bottom:0}
  .tips{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .packs{grid-template-columns:repeat(4,1fr)}
  .styles{grid-template-columns:repeat(4,1fr)}
  .hero{padding:76px 0 20px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ── Contestation depuis la galerie ──────────────────────────────────────
   Le formulaire s'ouvre DANS la carte : la photo contestée reste sous les
   yeux pendant qu'on décrit le défaut. */
.gal__claim{color:var(--ink3)}
.claim{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:10px;
  background:rgba(0,0,0,.02)}
.claim__t{display:block;font-family:'SPS Display',Georgia,serif;font-size:.98rem}
.claim__h{margin:.35rem 0 .6rem;color:var(--ink3);font-size:.82rem;line-height:1.5}
.claim__txt{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:.88rem;resize:vertical;background:#fff;color:inherit}
.claim__txt:focus{outline:2px solid var(--gold);outline-offset:1px}
.claim__act{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.claim__msg{margin:.6rem 0 0;color:#b3261e;font-size:.82rem;line-height:1.5}
.tag--ok{background:rgba(28,128,72,.12);color:#1c8048}

/* Décompte des lignes d'un champ en liste (le palmarès). */
.field__count{display:block;margin-top:.35rem;color:var(--ink3);font-size:.76rem}
.field__count--full{color:#b3261e}

/* Prix à la photo sur les cartes de tarifs : le seul chiffre comparable d'un
   pack à l'autre — le total dit combien on sort, celui-ci ce qu'on achète. */
.pack__unit{margin:.2rem 0 .9rem;font-size:.92rem;color:var(--ink2)}
.pack__save{display:inline-block;margin-left:.4rem;padding:.1rem .45rem;border-radius:999px;
  background:rgba(28,128,72,.12);color:#1c8048;font-size:.76rem;font-weight:600;vertical-align:middle}

/* Bascule vers l'autre application, dans la barre du Studio : présente sans
   se confondre avec les onglets du Studio lui-même. */
.sps-nav__cross{position:relative;padding-left:1.1rem;color:var(--ink3)}
.sps-nav__cross::before{content:'';position:absolute;left:.35rem;top:50%;width:1px;height:1.1em;
  transform:translateY(-50%);background:var(--line)}
.sps-nav__cross:hover{color:var(--gold-d)}

/* Sélecteur de langue : trois codes, pas de drapeaux — un drapeau désigne un
   pays, pas une langue, et le néerlandais se parle aussi en Belgique. */
.sps-lang{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);
  border-radius:999px;background:var(--card)}
.sps-lang a{display:block;padding:.18rem .5rem;border-radius:999px;font-size:.74rem;
  font-weight:600;letter-spacing:.02em;color:var(--ink3);text-decoration:none;line-height:1.5}
.sps-lang a:hover{color:var(--gold-d)}
.sps-lang a.on{background:var(--gold-pale);color:var(--gold-d)}
@media (max-width:559px){.sps-lang{order:3}}

/* ═══════════════════════════════════════════════════════════════════════
   PERSONNALISATION — fond, typographie, aperçu vivant (11.32.0)
   ═══════════════════════════════════════════════════════════════════════ */

/* Le laboratoire : les réglages à gauche, l'aperçu à droite, qui SUIT.
   Sur téléphone l'aperçu passe au-dessus et reste collé en haut : on doit
   voir ce qu'on règle pendant qu'on le règle, sinon on règle à l'aveugle. */
.lab{display:grid;gap:22px;grid-template-columns:1fr}
.lab__box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px}
.lab__box canvas{width:100%;height:auto;display:block;border-radius:10px;
  background:var(--cream3)}
.lab__note{margin:.55rem 0 0;text-align:center;color:var(--ink3);font-size:.78rem}

.opt-block{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.opt-block h3{margin:0 0 .2rem}
.opt-block__sub{font-size:.9rem;margin:0 0 1rem}

/* La fiche du colombophile : un bloc à part, posé sur son propre fond. On la
   remplit une fois, elle revient toute seule — elle ne doit donc pas se
   confondre avec les informations du pigeon, qui changent à chaque photo. */
.card--soft{background:var(--cream3);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;border-top:1px solid var(--line)}
.card--soft .switch{background:var(--card);margin-bottom:14px}
/* Coordonnées non imprimées : elles restent lisibles et modifiables, mais on
   voit d'un coup d'œil qu'elles ne partiront pas dans l'image. */
#contact.is-off{opacity:.55}
.contact__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.contact__foot .muted{font-size:.85rem}

/* Onglets du fond */
.tabs{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line);
  border-radius:999px;background:var(--cream3);margin-bottom:16px;flex-wrap:wrap}
.tab{border:0;background:transparent;border-radius:999px;padding:.42rem .95rem;
  font:inherit;font-size:.86rem;color:var(--ink2);cursor:pointer;line-height:1.4}
.tab:hover{color:var(--gold-d)}
.tab.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tabpane{animation:none}
.tabpane .muted{font-size:.9rem}

/* Nuancier. Une pastille montre la couleur, rien d'autre : le nom est dans
   l'infobulle, il n'apprend rien qu'on ne voie déjà. */
.swatches{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.swatch{width:44px;height:44px;border-radius:12px;border:2px solid var(--line);
  cursor:pointer;padding:0;transition:transform .12s,border-color .12s}
.swatch:hover{transform:translateY(-2px);border-color:var(--gold-line)}
.swatch.on{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-pale)}
.picker{display:inline-flex;align-items:center;gap:.7rem;padding:.6rem .8rem;
  border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer}
.picker span{font-size:.88rem;color:var(--ink2)}
.picker input[type=color]{width:44px;height:32px;border:1px solid var(--line);
  border-radius:8px;background:none;padding:2px;cursor:pointer}
.picker output{font-size:.82rem;color:var(--ink3);font-variant-numeric:tabular-nums}

/* Dépôt du décor */
.upload--sm{padding:22px 18px}
.upload--sm .upload__t{font-size:1rem}
.upload--sm .btn{margin-top:12px}
.upload--done{border-style:solid;border-color:var(--gold-line)}
.bgshot{display:grid;gap:14px;grid-template-columns:1fr;margin-top:14px;align-items:center}
.bgshot img{width:100%;max-height:190px;object-fit:cover;border-radius:12px;
  border:1px solid var(--line);display:block}

/* Typographies : l'échantillon EST la vignette. Lire le nom d'une police
   n'apprend rien à personne — le mot tracé dedans dit tout d'un coup. */
.fonts{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.fontcard{border:2px solid var(--line);border-radius:14px;background:var(--card);
  cursor:pointer;padding:0;text-align:left;overflow:hidden;transition:border-color .15s}
.fontcard:hover{border-color:var(--gold-line)}
.fontcard.on{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-pale)}
.fontcard__sample{display:flex;align-items:center;justify-content:center;min-height:92px;
  padding:14px 12px;font-size:1.5rem;line-height:1.15;color:var(--ink);text-align:center;
  background:linear-gradient(180deg,var(--card),var(--cream3));overflow:hidden;
  overflow-wrap:anywhere}
.fontcard__txt{display:block;padding:12px 14px 14px;border-top:1px solid var(--line)}
.fontcard__txt b{display:block;font-size:.92rem;line-height:1.3}
.fontcard__txt small{display:block;margin-top:.25rem;color:var(--ink3);font-size:.78rem;
  line-height:1.45}

/* Ce qui sera écrit sur la photo — sous la grille des positions. */
.textnow{margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--card)}
.textnow>b{display:block;font-size:.86rem;letter-spacing:.02em;margin-bottom:.5rem}
.textnow ul{list-style:none;margin:0 0 .7rem;padding:0}
.textnow li{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;
  border-bottom:1px dashed var(--line);font-size:.86rem}
.textnow li:last-child{border-bottom:0}
.textnow li span{color:var(--ink3);flex:none}
.textnow li b{text-align:right;font-weight:600;overflow-wrap:anywhere}

@media (min-width:720px){
  .bgshot{grid-template-columns:200px 1fr}
  .fonts{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1000px){
  /* L'aperçu à droite, et il SUIT le défilement : les réglages sont longs,
     et un aperçu qu'on doit aller rechercher n'est pas un aperçu. */
  .lab{grid-template-columns:1fr 380px}
  .lab__side{grid-column:2;grid-row:1}
  .lab__main{grid-column:1;grid-row:1}
  .lab__box{position:sticky;top:86px}
  .fonts{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCUEIL — le parcours des possibilités (11.32.0)
   Beaucoup d'air, de grandes images, trois lignes de texte au plus. Sur
   téléphone, les galeries deviennent des rails qu'on fait défiler du doigt :
   une grille de quatre cartes empilées, c'est une page de dix écrans.
   ═══════════════════════════════════════════════════════════════════════ */

.section--alt{background:var(--cream3)}

.hero__path{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1.1rem 0 0;
  color:var(--ink3);font-size:.82rem;letter-spacing:.04em}
.hero__path b{font-weight:600;color:var(--gold-d)}

.step-head{margin:0 0 26px;text-align:center}
.step-head h2{margin:.4rem 0 0}
.step-head p{margin:.5rem auto 0;max-width:560px;color:var(--ink2);font-size:.98rem}
.step-head__n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--gold-pale);color:var(--gold-d);font-weight:700;font-size:.9rem;
  border:1px solid var(--gold-line)}
.step-head__n--solo{margin-bottom:.6rem}

/* Rail : grille sur grand écran, défilement au doigt sur téléphone. */
.rail{display:grid;gap:14px;grid-auto-flow:column;grid-auto-columns:78%;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;
  scrollbar-width:thin}
.rail>*{scroll-snap-align:center}

.showcard{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--card);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.showcard:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.showcard__vis{display:block;aspect-ratio:4/3}
.showcard__vis img{width:100%;height:100%;object-fit:cover;display:block}
.showcard__txt{display:block;padding:14px 16px 16px;border-top:1px solid var(--line)}
.showcard__txt b{display:block;font-family:'SPS Display',Georgia,serif;font-size:1.02rem}
.showcard__txt small{display:block;margin-top:.3rem;color:var(--ink3);font-size:.82rem;
  line-height:1.5}

/* Deux fois la même présentation, deux couleurs : la démonstration du § 3. */
.duo{display:grid;gap:16px;grid-template-columns:1fr}
.duo__item{margin:0}
.duo__item img{width:100%;border-radius:14px;border:1px solid var(--line);display:block}
.duo__item figcaption{display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:.6rem;color:var(--ink2);font-size:.88rem}
.dotc{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:inline-block}

.swatches--center{justify-content:center;margin-top:14px}
.swatch--static{cursor:default}
.swatch--pick{display:grid;place-items:center;background:var(--card);color:var(--gold-d);
  font-size:1.2rem;border-style:dashed;cursor:default}

/* Décor personnel */
.split{display:grid;gap:24px;grid-template-columns:1fr;align-items:center}
.split__vis img{width:100%;border-radius:16px;border:1px solid var(--line);display:block}
.decor{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);display:grid;place-items:center}
.decor__sky{position:absolute;inset:0;background:linear-gradient(180deg,#cfe0e6,#eef1e8 62%)}
.decor__land{position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,#b9c39a,#8f9c74)}
.decor__loft{position:absolute;left:11%;bottom:28%;width:26%;height:26%;
  background:#8a6a45;border-radius:3px;
  box-shadow:0 -1px 0 3px #6f5236,inset 0 8px 0 -4px rgba(255,255,255,.25)}
.decor__loft::after{content:'';position:absolute;left:-14%;right:-14%;top:-22%;height:26%;
  background:#6f5236;clip-path:polygon(0 100%,50% 0,100% 100%)}
.decor__bird{position:relative;width:26%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.28))}

.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:1.9rem;margin-bottom:.9rem;color:var(--ink2);
  font-size:.96rem;line-height:1.6}
.ticks li::before{content:'';position:absolute;left:0;top:.45em;width:1.1rem;height:.6rem;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg)}

/* Les champs de la fiche, en pastilles */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font-size:.9rem}
.chip--req{border-color:var(--gold);background:var(--gold-pale)}
.chip i{font-style:normal;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-d)}

/* Typographies : l'échantillon EST l'argument. */
.typecard{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--card);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.typecard:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.typecard__sample{display:flex;align-items:center;justify-content:center;min-height:130px;
  padding:18px 14px;font-size:2rem;line-height:1.1;text-align:center;color:var(--ink);
  background:linear-gradient(180deg,var(--card),var(--cream3));overflow-wrap:anywhere}
.typecard__txt{display:block;padding:14px 16px 16px;border-top:1px solid var(--line)}
.typecard__txt b{display:block;font-size:.98rem}
.typecard__txt small{display:block;margin-top:.3rem;color:var(--ink3);font-size:.82rem;
  line-height:1.5}

/* La promesse — l'argument commercial du § 7, traité comme tel. */
.promise{background:var(--card);border:1px solid var(--gold-line);border-radius:22px;
  padding:34px 24px;text-align:center;box-shadow:0 10px 30px rgba(46,39,24,.05)}
.promise h2{margin:0 0 .4rem}
.promise .lead{margin:0 auto .9rem;color:var(--gold-d)}
.promise p{max-width:660px;margin:0 auto;color:var(--ink2);line-height:1.7}
.promise__row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px 0 0}
.pill{padding:.42rem .9rem;border-radius:999px;background:var(--gold-pale);color:var(--gold-d);
  font-size:.86rem;border:1px solid var(--gold-line)}
.promise__why{margin-top:18px !important;font-size:.86rem;color:var(--ink3)}

@media (min-width:720px){
  .duo{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1.1fr 1fr}
  .promise{padding:44px 40px}
}
@media (min-width:900px){
  /* Assez de place pour tout voir d'un coup : le rail redevient une grille. */
  .rail{grid-auto-flow:row;overflow:visible;gap:18px}
  .rail--3{grid-template-columns:repeat(3,1fr)}
  .rail--4{grid-template-columns:repeat(4,1fr)}
}

/* ═══════════════════════════════════════════════════════════════════════
   AVIS CLIENTS (11.37.0)
   Rien de neuf dans la palette : crème, or, vert — les mêmes jetons que le
   reste de l'application, descendus de PHP dans :root. Un avis est une
   carte sobre ; la réponse officielle est en vert, décalée, et ne peut donc
   pas se confondre avec un second avis.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Les étoiles, un seul dessin pour toute l'application ─────────────── */
.rev-stars{display:inline-flex;align-items:center;gap:2px;vertical-align:middle}
.rev-stars svg{width:16px;height:16px;fill:var(--line);flex:0 0 auto}
.rev-stars svg.on{fill:var(--gold)}
.rev-stars--lg svg{width:22px;height:22px}

/* ── Le comptoir : moyenne + répartition ─────────────────────────────── */
.revtop{display:grid;gap:22px;padding:22px;margin:10px 0 6px;align-items:center}
.revtop__score{text-align:center}
.revtop__n{display:block;font-family:'SPS Display',Georgia,serif;font-size:2.9rem;line-height:1;
  color:var(--ink);font-weight:700;margin-bottom:.35rem}
.revtop__n small{font-size:1.1rem;color:var(--ink3);font-weight:400;margin-left:2px}
.revtop__c{margin:.5rem 0 0;color:var(--ink2);font-size:.92rem}
.revtop__dist{display:grid;gap:5px}
.revbar{display:grid;grid-template-columns:44px 1fr 34px;align-items:center;gap:10px;
  padding:3px 6px;border-radius:8px;color:var(--ink2);font-size:.85rem}
.revbar:hover{background:var(--cream3);text-decoration:none;color:var(--ink)}
.revbar.on{background:var(--gold-pale);color:var(--gold-d);font-weight:600}
.revbar__n{color:var(--gold-d);white-space:nowrap}
.revbar__t{height:9px;background:var(--cream3);border-radius:5px;overflow:hidden}
.revbar__t i{display:block;height:100%;background:var(--gold);border-radius:5px;
  transition:width .35s ease}
.revbar__v{text-align:right;color:var(--ink3)}
.revbar__clear{display:block;margin-top:6px;font-size:.84rem;color:var(--ink3);text-align:right}

/* ── La bande « laissez votre avis » ─────────────────────────────────── */
.revinvite{display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:relative;
  margin:26px 0 6px;padding:16px 20px;border-radius:16px;background:var(--gold-pale);
  border:1px solid var(--gold-line)}
.revinvite__txt{flex:1;min-width:200px;line-height:1.5}
.revinvite__txt b{display:block;color:var(--ink)}
.revinvite__txt span{color:var(--ink2);font-size:.9rem}
.revinvite--result{margin:22px auto 0;max-width:620px}
.revinvite__x{position:absolute;top:6px;right:8px;border:0;background:none;cursor:pointer;
  font-size:20px;line-height:1;color:var(--ink3);padding:4px 7px;border-radius:8px}
.revinvite__x:hover{background:rgba(0,0,0,.06);color:var(--ink)}

/* ── La liste ────────────────────────────────────────────────────────── */
/* ⚠ `align-items:start` : sans lui, les deux cartes d'une même ligne
   s'étirent à la hauteur de la plus haute — un avis de deux lignes à côté
   d'un avis avec réponse laissait un grand vide blanc au milieu de la page. */
.revlist{display:grid;gap:16px;margin-top:24px;align-items:start}
.revc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.revc--star{border-color:var(--gold-line);box-shadow:0 8px 24px rgba(46,39,24,.05)}
.revc__top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px}
.revc__date{color:var(--ink3);font-size:.8rem;white-space:nowrap}
.revc__main{display:flex;gap:14px;align-items:flex-start}
.revc__shot{margin:0;flex:0 0 84px;width:84px}
.revc__shot img{width:84px;height:84px;object-fit:cover;border-radius:10px;
  border:1px solid var(--line);background:var(--cream3);display:block}
.revc__txt{margin:0;flex:1;min-width:0;color:var(--ink);line-height:1.65;font-size:.95rem;
  border:0;padding:0;quotes:none}
.revc__who{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--line)}
.revc__who b{color:var(--ink);font-size:.9rem}
.revc__ok{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:600;
  padding:3px 9px;border-radius:999px;background:var(--green-pale);color:var(--green)}
.revc__ok::before{content:'✓'}

/* ── La réponse officielle : jamais un second avis ───────────────────── */
.revr{margin:14px 0 0 0;padding:12px 15px 12px 16px;border-radius:12px;
  background:var(--green-pale);border-left:3px solid var(--green);
  position:relative;margin-left:18px}
.revr::before{content:'↳';position:absolute;left:-16px;top:11px;color:var(--green);
  font-size:1rem;opacity:.75}
.revr__t{display:block;font-size:.76rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--green);margin-bottom:.32rem}
.revr__p{margin:0;color:#12463A;font-size:.9rem;line-height:1.62}
.revr--fold{padding:0;background:none;border-left:0;margin-left:0}
.revr--fold::before{content:none}
.revr--fold summary{cursor:pointer;list-style:none;padding:9px 13px;border-radius:10px;
  background:var(--green-pale);color:var(--green);font-size:.82rem}
.revr--fold summary::-webkit-details-marker{display:none}
.revr--fold summary::after{content:' ▾';opacity:.7}
.revr--fold[open] summary::after{content:' ▴'}
.revr--fold .revr__p{margin:9px 0 0;padding:0 13px 4px;color:var(--ink2)}
.revr--fold .revr__t{display:inline}

/* ── Le formulaire ───────────────────────────────────────────────────── */
.sps-noscroll{overflow:hidden}
.revmodal{position:fixed;inset:0;z-index:200;background:rgba(46,39,24,.46);
  display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow:auto;
  -webkit-overflow-scrolling:touch}
.revmodal__box{position:relative;width:100%;max-width:560px;margin:auto;
  background:var(--cream);border:1px solid var(--gold-line);border-radius:20px;
  padding:26px 22px 22px;box-shadow:0 24px 60px rgba(46,39,24,.28)}
.revmodal__box h2{margin:0 0 .5rem;font-size:1.4rem}
.revmodal__x{position:absolute;top:10px;right:12px;border:0;background:none;cursor:pointer;
  font-size:26px;line-height:1;color:var(--ink3);padding:2px 9px;border-radius:9px}
.revmodal__x:hover{background:var(--cream3);color:var(--ink)}
.revmodal__act{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.revpick{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.revpick__s{border:0;background:none;cursor:pointer;padding:2px;line-height:0;border-radius:8px}
.revpick__s svg{width:34px;height:34px;fill:var(--line);transition:fill .12s,transform .12s}
.revpick__s.on svg{fill:var(--gold)}
.revpick__s:hover svg{transform:scale(1.08)}
.revpick__s:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px}
.revpick.is-done{pointer-events:none;opacity:.75}
.revpick__lab{margin-left:8px;color:var(--gold-d);font-weight:600;font-size:.9rem}
.revnames{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.revnames__b{border:1px solid var(--line);background:var(--card);color:var(--ink2);
  border-radius:999px;padding:.3rem .8rem;font-size:.85rem;cursor:pointer}
.revnames__b:hover{border-color:var(--gold-line);color:var(--ink)}
.revnames__b.on{background:var(--gold-pale);border-color:var(--gold-line);color:var(--gold-d);
  font-weight:600}
.revshot{margin:10px 0 0}
.revshot img{max-width:150px;height:auto;border-radius:10px;border:1px solid var(--line);
  display:block}
.revline{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:.7rem 0 0;color:var(--ink2)}
.revline b{color:var(--ink);font-size:1.05rem}
.revline span{color:var(--ink3);font-size:.9rem}

@media (min-width:700px){
  .revtop{grid-template-columns:auto 1fr;gap:34px;padding:26px 30px}
  .revtop__score{border-right:1px solid var(--line);padding-right:30px;min-width:190px}
  .revlist{grid-template-columns:1fr 1fr}
  /* Une carte mise en avant tient toute la largeur : c'est l'avis qu'on a
     choisi de montrer, il n'a pas à être à moitié caché dans une colonne. */
  .revlist--home .revc--star:first-child{grid-column:1 / -1}
}
@media (max-width:559px){
  .revc__shot,.revc__shot img{flex-basis:64px;width:64px;height:64px}
  .revmodal{padding:0}
  .revmodal__box{border-radius:0;min-height:100%;max-width:none}
  .revpick__s svg{width:40px;height:40px}
}

/* ── Le palmarès officiel proposé d'après la bague (11.44.0) ──────────
   Une liste à cocher sous le champ. Elle doit se lire d'un coup d'œil et
   tenir dans la colonne : au-delà de six lignes elle défile, sinon le
   formulaire se déroule sans fin sur un téléphone. */
.sps-palm{margin-top:.55rem;border-top:1px dashed var(--line);padding-top:.55rem}
.sps-palm__head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.sps-palm__msg{color:var(--ink3);font-size:.76rem}
.sps-palm__msg.is-warn{color:#b3261e}
.sps-palm__msg.is-ok{color:#1a7f37}
.sps-palm__list{margin-top:.5rem;max-height:15rem;overflow-y:auto}
.sps-palm__list:empty{margin:0}
.sps-palm__item{display:flex;align-items:flex-start;gap:.5rem;padding:.3rem .35rem;
  border-radius:6px;cursor:pointer;font-size:.84rem;line-height:1.35}
.sps-palm__item:hover{background:rgba(0,0,0,.035)}
.sps-palm__item input{margin-top:.2rem;flex:0 0 auto}
.sps-palm__item input:disabled+.sps-palm__txt{color:var(--ink3);text-decoration:line-through}
.sps-palm__txt{flex:1 1 auto}
.sps-palm__foot{display:flex;gap:.5rem;margin-top:.5rem;position:sticky;bottom:0;
  background:var(--paper,#fff);padding-top:.35rem}

/* ── L'écran de PRISE DE VUE (11.52.0) ────────────────────────────────
   Montré juste après le clic sur « Créer ma photo », avant toute dépense.
   Il reprend la boîte modale des avis — même géométrie, même fermeture —
   mais il est plus large : quatre exemples côte à côte ne se lisent pas
   dans 560 px. Sur téléphone il tient toute la page, comme les autres. */
.shotm{position:fixed;inset:0;z-index:210;background:rgba(46,39,24,.52);
  display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow:auto;
  -webkit-overflow-scrolling:touch}
.shotm__box{position:relative;width:100%;max-width:820px;margin:auto;
  background:var(--cream);border:1px solid var(--gold-line);border-radius:20px;
  padding:26px 22px 22px;box-shadow:0 24px 60px rgba(46,39,24,.3)}
/* La croix de fermeture est posée en absolu dans le coin : sans cette réserve,
   elle chevauche le dernier mot du titre dès que la boîte se rétrécit
   (constaté à 500 px, sur « votre prise de vue »). */
.shotm__box h2{margin:0 0 .5rem;font-size:1.4rem;padding-right:2.2rem}
.shotm__lead{margin:0 0 1rem;color:var(--ink2);font-size:.95rem;line-height:1.5}
.shotm__schema{margin:0 0 1rem;text-align:center}
.shotm__schema img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.shotm__schema figcaption{margin-top:.45rem;color:var(--ink3);font-size:.85rem}
.shotm__rules{margin:0 0 1.1rem;padding-left:1.1rem;color:var(--ink2);
  font-size:.92rem;line-height:1.55}
.shotm__rules li{margin-bottom:.3rem}
.shotm__rules b{color:var(--ink)}
.shotm__grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:1.1rem}
.shotm__ex{margin:0}
.shotm__ex img{width:100%;height:auto;display:block;border-radius:12px;
  border:2px solid var(--line)}
.shotm__ex--ok img{border-color:#277a4a}
.shotm__ex--ko img{border-color:#b0302c}
.shotm__ex figcaption{margin-top:.4rem;color:var(--ink2);font-size:.84rem;line-height:1.4}
.shotm__tag{display:inline-block;margin-right:.4rem;padding:.08rem .5rem;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#fff;vertical-align:1px}
.shotm__tag--ok{background:#277a4a}
.shotm__tag--ko{background:#b0302c}
.shotm__ask{border:1px solid var(--gold-line);background:var(--gold-pale);
  border-radius:14px;padding:14px 16px;margin:0 0 4px}
.shotm__ask legend{font-weight:700;color:var(--ink);padding:0 .4rem;font-size:.95rem}
.shotm__ask.is-ko{border-color:#b0302c;background:rgba(176,48,44,.06)}
.shotm__why{margin:.2rem 0 .7rem;color:var(--ink2);font-size:.85rem;line-height:1.45}
.shotm__opt{display:flex;align-items:flex-start;gap:.6rem;padding:.45rem .5rem;
  border-radius:9px;cursor:pointer}
.shotm__opt:hover{background:rgba(255,255,255,.55)}
.shotm__opt input{margin-top:.28rem;flex:0 0 auto}
.shotm__opt b{display:block;color:var(--ink);font-size:.92rem}
.shotm__opt i{display:block;color:var(--ink3);font-size:.82rem;font-style:normal}

@media (min-width:640px){
  .shotm__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:559px){
  .shotm{padding:0}
  .shotm__box{border-radius:0;min-height:100%;max-width:none;padding:22px 16px 18px}
}


/* ══ LES TOILES DE STUDIO ═══════════════════════════════════════════════
   Dix fonds livrés avec le plugin. La grille se règle sur la largeur
   disponible : quatre par ligne au large, deux sur un téléphone. La
   vignette porte son nom sous elle — un fond « taupe » et un fond « brun »
   ne se distinguent pas toujours à cette taille. */
.fonds{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(116px,1fr));
  gap:10px;
  margin:2px 0 12px;
}
.fond{
  display:block; padding:0; border:2px solid var(--line,#e3ded2); border-radius:10px;
  background:none; cursor:pointer; overflow:hidden; text-align:center;
  transition:border-color .18s ease, transform .18s ease;
}
.fond img{
  display:block; width:100%; height:auto; aspect-ratio:4/3;
  object-fit:cover; border-radius:8px;
}
.fond span{
  display:block; padding:5px 2px 3px; font-size:12px; line-height:1.25;
  color:var(--ink3,#6b6455);
}
.fond:hover{ transform:translateY(-2px); }
.fond:focus-visible{ outline:2px solid var(--gold,#C9A227); outline-offset:2px; }
.fond.on{ border-color:var(--gold,#C9A227);box-shadow:0 0 0 3px var(--gold-pale,rgba(201,162,39,.18)); }
.fond.on span{ color:var(--ink,#2a2620); font-weight:600; }

@media (prefers-reduced-motion:reduce){
  .fond{ transition:none; }
  .fond:hover{ transform:none; }
}


/* ══ LE NUANCIER DES BAGUES ════════════════════════════════════════════
   Douze couleurs européennes, plus « je ne sais pas ». Des pastilles et non
   une liste : une couleur se reconnaît d'un coup d'œil, elle ne se lit pas. */
.bagueq__cols{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
  gap:8px; margin-top:10px;
}
.bcol{ display:block; text-align:center; cursor:pointer; padding:6px 2px;
  border:2px solid transparent; border-radius:10px; transition:border-color .15s ease }
.bcol input{ position:absolute; opacity:0; pointer-events:none }
.bcol__p{ display:block; width:38px; height:38px; margin:0 auto 5px; border-radius:50%;
  border:1px solid rgba(0,0,0,.18); box-shadow:inset 0 -3px 6px rgba(0,0,0,.14) }
.bcol__p--nsp{ background:repeating-linear-gradient(45deg,#EFEADC 0 6px,#DCD3BE 6px 12px) }
.bcol__l{ display:block; font-size:12px; line-height:1.2; color:var(--ink3) }
.bcol:hover{ border-color:var(--gold-line) }
.bcol:has(input:checked){ border-color:var(--gold); background:var(--gold-pale) }
.bcol:has(input:checked) .bcol__l{ color:var(--ink); font-weight:600 }
.bcol input:focus-visible + .bcol__p{ outline:2px solid var(--gold); outline-offset:2px }