/* Carte de visite publiée. Quatre chartes, autant de mises en page, toutes bâties sur les couleurs calculées par theme.php.
   Dessin de base repris de la carte de Pamela. Polices hébergées sur le site : la page d'un particulier n'appelle pas Google. */
@font-face{font-family:"Bellefair";src:url("fonts/bellefair-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost-latin-var.woff2") format("woff2");font-weight:300 500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";src:url("fonts/jost-cyrillic-var.woff2") format("woff2");font-weight:300 500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Forum";src:url("fonts/forum-cyrillic.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Trirong";src:url("fonts/trirong-thai-300.woff2") format("woff2");font-weight:300 400;font-display:swap;unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Funnel Display";src:url("fonts/funnel-300-latin.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Funnel Display";src:url("fonts/funnel-500-latin.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Funnel Display";src:url("fonts/funnel-500-latin-ext.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert Sans";src:url("fonts/albert-400-latin.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans";src:url("fonts/albert-400-latin-ext.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert Sans";src:url("fonts/albert-600-latin.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans";src:url("fonts/albert-600-latin-ext.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

:root{
  --text:"Albert Sans",system-ui,-apple-system,"Segoe UI","Noto Sans Thai","Thonburi",sans-serif;
  --display:"Albert Sans",system-ui,-apple-system,"Segoe UI","Noto Sans Thai","Thonburi",sans-serif;
  --display-weight:600;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Zones que le téléphone recouvre : encoche en haut, barre du navigateur en bas. */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --full:100vh;
}
@supports (height:100dvh){:root{--full:100dvh}}
/* Sur iPhone, certains navigateurs posent leur barre par-dessus la page sans le signaler : on garde une marge. */
@supports (-webkit-touch-callout:none){:root{--safe-b:calc(env(safe-area-inset-bottom,0px) + 54px)}}
[data-style="elegant"]{--display:"Bellefair","Forum","Trirong","Times New Roman",serif;--text:"Jost",system-ui,-apple-system,"Segoe UI","Noto Sans Thai","Thonburi",sans-serif;--display-weight:400}
[data-style="modern"]{--display:"Funnel Display",system-ui,-apple-system,"Segoe UI","Noto Sans Thai","Thonburi",sans-serif;--display-weight:500}
[data-style="bold"]{--display:"Funnel Display",system-ui,-apple-system,"Segoe UI","Noto Sans Thai","Thonburi",sans-serif;--display-weight:500}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior-y:none}
img,svg{display:block;max-width:100%}
h1,h2,p,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:4px}

.card{position:relative;width:100%;max-width:440px;margin:0 auto;min-height:var(--full);background:var(--bg)}
.face{display:flex;flex-direction:column;min-height:var(--full);padding:calc(var(--safe-t) + 18px) 0 calc(var(--safe-b) + 12px);animation:rise .32s var(--ease) both}
[data-view="card"] .face--qr,[data-view="qr"] .face--card{display:none}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero{padding:0 24px}
.body{display:flex;flex-direction:column;flex:1;padding:0 24px}

.logo{display:none;flex:none}
.has-logo .logo{display:block}
.logo img{height:100%;width:auto;max-width:100%;object-fit:contain}
/* Fond sombre : un logo foncé disparaîtrait, il garde une plaque claire. */
[data-dark] .logo{padding:6px 10px;border-radius:12px;background:#FFFFFF}
.portrait{display:none;flex:none}
.has-photo .portrait{display:block}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.who{min-width:0;overflow-wrap:anywhere}
.who h1,.face--qr h2{font-family:var(--display);font-weight:var(--display-weight)}
.role{color:var(--stone);font-size:15.5px;line-height:1.35}
.tagline{color:var(--stone);font-size:14.5px;line-height:1.4}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 20px;border-radius:999px;background:var(--btn);color:var(--btnInk);font:500 15.5px/1.2 var(--text);text-decoration:none;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--ease),filter .2s}
.btn svg{flex:none;width:20px;height:20px}
.btn:active{transform:scale(.97);filter:brightness(.92);transition-duration:60ms}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
[data-style] .btn{font-weight:500}
.save{flex:none}

.rows{margin-top:10px}
.rows li{border-bottom:1px solid var(--hair)}
.rows a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:6px 8px;margin:0 -8px;border-radius:8px;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .2s}
.rows a:active{background:var(--tint);transition-duration:60ms}
.rows__k{display:flex;align-items:center;gap:10px;flex:none;color:var(--stone);font-size:14px}
.rows__k svg{flex:none;width:19px;height:19px;color:var(--link)}
.rows__v{font-size:15px;line-height:1.3;text-align:right;overflow-wrap:anywhere;min-width:0}

.social{display:flex;justify-content:center;gap:10px;margin-top:14px}
.social__a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--tint);color:var(--link);transition:transform .12s var(--ease)}
.social__a:active{transform:scale(.94)}
.social__a svg{width:18px;height:18px}

.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:auto;padding-top:18px}
.duo .btn{min-height:48px;padding:8px 8px;gap:7px;font-size:14.5px;line-height:1.15}
.duo .btn svg{width:19px;height:19px}
@media (max-width:359px){.duo .btn svg{display:none}}
.install{align-self:center;margin-top:6px;min-height:36px;font-size:14.5px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.langs{display:flex;flex-wrap:wrap;justify-content:center;margin-top:6px}
.langs button{display:flex;align-items:center;justify-content:center;width:34px;height:36px;border-radius:6px;touch-action:manipulation}
.langs svg{width:22px;height:15px;border-radius:2px;box-shadow:0 0 0 1px var(--hair);opacity:.72;transition:opacity .2s}
.langs button[aria-pressed="true"] svg{opacity:1;box-shadow:0 0 0 1.5px var(--ink)}
.made{margin-top:4px;text-align:center;font-size:12.5px;line-height:1.5;color:var(--stone)}
.made a{display:inline-block;padding-block:3px;text-underline-offset:3px}
.made__sep{display:none}
.made a[data-i18n="report"]{display:block;width:fit-content;margin:0 auto}

.face--qr{align-items:stretch;text-align:center;padding-left:24px;padding-right:24px}
.face--qr .logo{height:clamp(34px,7vh,56px);margin:0 auto}
.face--qr .logo img{margin:0 auto}
.qrbody{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 0}
.qr-tabs{display:inline-flex;gap:2px;padding:3px;margin-bottom:12px;border-radius:999px;background:var(--tint)}
.qr-tabs button{min-height:38px;padding:4px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);touch-action:manipulation;transition:background-color .2s}
.qr-tabs button[aria-pressed="true"]{background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.08)}
.plate{width:min(100%,86vw,48vh,360px);padding:10px;border-radius:22px;background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.05),0 16px 44px rgba(0,0,0,.10);margin-bottom:clamp(10px,2.4vh,22px)}
.plate svg{width:100%;height:auto}
.face--qr h2{font-size:clamp(1.5rem,6.4vw,2rem);line-height:1.1;overflow-wrap:anywhere}
.face--qr .role{margin-top:4px;font-size:14px}
.face--qr .duo{margin-top:0;padding-top:0}

.toast{position:fixed;z-index:3;left:50%;bottom:calc(112px + var(--safe-b));transform:translate(-50%,8px);padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:14.5px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease);white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ------- Élégant : centré, serif, portrait en arche, comme la carte de Pamela ------- */
[data-style="elegant"] .hero{display:flex;flex-direction:column;align-items:center;text-align:center}
[data-style="elegant"] .hero .logo{height:clamp(46px,8vh,72px);margin-bottom:clamp(10px,2vh,18px)}
[data-style="elegant"] .portrait{height:clamp(150px,24vh,230px);aspect-ratio:3/4;margin-bottom:clamp(12px,2.2vh,22px)}
[data-style="elegant"] .portrait img{border-radius:999px 999px 0 0;background:var(--tint)}
[data-style="elegant"] .who h1{font-size:clamp(2.3rem,10.5vw,3.1rem);line-height:1.04;letter-spacing:-.012em}
[data-style="elegant"] .role{margin-top:6px}
[data-style="elegant"] .tagline{margin-top:4px}
[data-style="elegant"] .save{margin-top:clamp(14px,2.4vh,22px)}

/* ------- Moderne : aligné à gauche, lignes en cartes, photo ronde à droite ------- */
[data-style="modern"] .hero{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center}
[data-style="modern"] .hero .logo{grid-column:1/-1;height:clamp(38px,6vh,52px);margin-bottom:clamp(14px,2.6vh,24px)}
[data-style="modern"] .hero .logo img{object-position:left center}
[data-style="modern"] .portrait{grid-column:2;grid-row:2;width:clamp(84px,24vw,108px);height:clamp(84px,24vw,108px)}
[data-style="modern"] .portrait img{border-radius:50%;background:var(--tint)}
[data-style="modern"] .who{grid-column:1;grid-row:2}
[data-style="modern"] .who h1{font-size:clamp(1.9rem,8vw,2.5rem);line-height:1.06;letter-spacing:-.022em}
[data-style="modern"] .role{margin-top:6px}
[data-style="modern"] .tagline{margin-top:4px}
[data-style="modern"] .save{margin-top:18px}
[data-style="modern"] .rows{margin-top:12px;display:grid;gap:8px}
[data-style="modern"] .rows li{border:0}
[data-style="modern"] .rows a{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;margin:0;padding:9px 14px 9px 10px;background:var(--paper);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);justify-content:initial}
[data-style="modern"] .rows__k{display:contents}
[data-style="modern"] .rows__k svg{grid-column:1;grid-row:1/3;width:40px;height:40px;padding:10px;border-radius:50%;background:var(--tint)}
[data-style="modern"] .rows__k span{grid-column:2;font-size:12.5px;line-height:1.3}
[data-style="modern"] .rows__v{grid-column:2;text-align:left;font-size:15px}
[data-style="modern"] .social{justify-content:flex-start}

/* ------- Affirmé : bandeau plein à la couleur principale, photo à cheval ------- */
[data-style="bold"] .face--card{padding-top:0}
[data-style="bold"] .hero{position:relative;padding:calc(var(--safe-t) + 20px) 24px 26px;background:var(--band);color:var(--bandInk)}
[data-style="bold"] .hero .logo{height:clamp(46px,7vh,60px);margin-bottom:clamp(16px,3vh,28px);width:fit-content;padding:7px 10px;border-radius:14px;background:#FFFFFF}
[data-style="bold"] .who h1{font-size:clamp(2.05rem,9vw,2.8rem);line-height:1.04;letter-spacing:-.024em}
[data-style="bold"] .role,[data-style="bold"] .tagline{color:inherit;margin-top:6px}
[data-style="bold"].has-photo .who{padding-right:96px}
[data-style="bold"] .portrait{position:absolute;right:24px;bottom:-34px;width:104px;height:104px}
[data-style="bold"] .portrait img{border-radius:50%;box-shadow:0 0 0 4px var(--bg),0 10px 26px rgba(0,0,0,.18);background:var(--tint)}
[data-style="bold"] .save{margin-top:20px}
[data-style="bold"].has-photo .save{margin-top:52px}

/* ------- Sobre : centré, sans ornement, l'essentiel ------- */
[data-style="plain"] .hero{display:flex;flex-direction:column;align-items:center;text-align:center}
[data-style="plain"] .hero .logo{height:clamp(32px,5vh,44px);margin-bottom:16px}
[data-style="plain"] .portrait{width:112px;height:112px;margin-bottom:14px}
[data-style="plain"] .portrait img{border-radius:50%;background:var(--tint)}
[data-style="plain"] .who h1{font-size:clamp(1.65rem,7vw,2.1rem);line-height:1.12;letter-spacing:-.02em}
[data-style="plain"] .role{margin-top:4px}
[data-style="plain"] .tagline{margin-top:4px}
[data-style="plain"] .save{margin-top:18px}
[data-style="plain"] .rows li{border:0}
[data-style="plain"] .rows a{justify-content:flex-start;min-height:46px}
[data-style="plain"] .rows__k span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
[data-style="plain"] .rows__k svg{width:34px;height:34px;padding:8px;border-radius:50%;background:var(--tint)}
[data-style="plain"] .rows__v{text-align:left}

/* Sur grand écran : la carte devient un objet posé sur le fond. */
@media (min-width:600px){
  body:not(.is-preview){padding:28px 0}
  .card{min-height:calc(var(--full) - 56px);border-radius:28px;overflow:hidden;box-shadow:0 0 0 1px var(--hair),0 30px 80px rgba(0,0,0,.12)}
  .face{min-height:calc(var(--full) - 56px)}
}
[data-preview] body{scrollbar-width:none}
[data-preview] body::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.face{animation:none}.btn,.rows a,.toast,.social__a{transition:none}}

/* Pages sans JavaScript : carte indisponible, signalement. */
.plain{max-width:520px;margin:0 auto;padding:calc(var(--safe-t) + 48px) 24px calc(var(--safe-b) + 40px);display:flex;flex-direction:column;gap:14px}
.plain h1{font-size:1.9rem;line-height:1.15;letter-spacing:-.02em;font-weight:600}
.plain p{color:var(--stone)}
.plain form{display:flex;flex-direction:column;gap:8px}
.plain label{font-size:14px;font-weight:500;margin-top:8px}
.plain textarea,.plain input{width:100%;font:inherit;padding:12px 14px;border-radius:12px;border:1px solid var(--hair);background:var(--paper);color:var(--ink)}
.plain .btn{margin-top:12px;align-self:flex-start}
.plain__trap{position:absolute;left:-9999px}
.plain__back{font-size:14.5px;margin-top:6px;text-underline-offset:3px}