:root{
  --lk-teal:#009490; --lk-orange:#FF9800; --lk-fond:#EEF3F2; --lk-carte:#FFFFFF;
  --lk-texte:#1D2422; --lk-texte-2:#5A6764; --lk-ligne:#E3E8E6;
  --lk-titre:'Plus Jakarta Sans',system-ui,sans-serif; --lk-corps:'DM Sans',system-ui,sans-serif;
  --cl-fond:#00807C; --cl-fond-2:#015E5B;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font:16px/1.5 var(--lk-corps);color:var(--lk-texte);background:var(--lk-fond);padding-bottom:calc(88px + env(safe-area-inset-bottom));overflow-x:hidden}
a{color:inherit;text-decoration:none}
.page{max-width:480px;margin:0 auto}

/* ── En-tête vivant : dégradé qui respire + anneau animé autour de la photo ── */
.hero{position:relative;overflow:hidden;color:#fff;text-align:center;padding:30px 20px 34px;border-radius:0 0 32px 32px;
  background:linear-gradient(135deg,var(--cl-fond),var(--cl-fond-2),var(--cl-fond));background-size:220% 220%;animation:respire 12s ease-in-out infinite}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(30px);opacity:.35;pointer-events:none}
.hero::before{width:220px;height:220px;background:#FFB74D;top:-90px;right:-70px;animation:flotte 9s ease-in-out infinite}
.hero::after{width:180px;height:180px;background:#4DD0C8;bottom:-80px;left:-60px;animation:flotte 11s ease-in-out infinite reverse}
@keyframes respire{50%{background-position:100% 100%}}
@keyframes flotte{50%{transform:translate(18px,14px) scale(1.08)}}
.anneau{position:relative;display:inline-grid;place-items:center;width:132px;height:132px;border-radius:50%;padding:5px;
  background:conic-gradient(from 0deg,var(--lk-orange),#FFD180,var(--lk-teal),#80DEEA,var(--lk-orange));animation:tourne 6s linear infinite}
.anneau img{width:122px;height:122px;border-radius:50%;object-fit:cover;border:4px solid #fff;background:#fff;animation:tourne 6s linear infinite reverse}
@keyframes tourne{to{transform:rotate(360deg)}}
h1{position:relative;font:800 27px/1.2 var(--lk-titre);margin-top:12px}
.role{position:relative;font-weight:500;opacity:.95;margin-top:3px}
.slogan{position:relative;display:inline-block;font-size:14px;margin-top:10px;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28)}

/* ── Blocs (comme la 1re version) ── */
.bloc{background:var(--lk-carte);border-radius:26px;margin:16px 14px 0;padding:16px 14px;box-shadow:0 1px 2px rgba(16,40,36,.05),0 10px 30px -12px rgba(16,40,36,.18)}
.bloc h2{display:flex;align-items:center;gap:8px;font:800 15px/1 var(--lk-titre);color:var(--lk-texte);margin:2px 4px 14px}
.bloc h2::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lk-orange);box-shadow:12px 0 0 var(--lk-teal)}
.bloc h2 i{margin-left:14px;font-style:normal}

/* Clic rapide en tuiles (bento) */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tuile{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;
  min-height:150px;padding:14px 10px;border-radius:22px;background:linear-gradient(160deg,var(--f) 0%,var(--f2) 100%);border:1px solid var(--bd);transition:transform .15s}
.tuile.large{grid-column:span 2;flex-direction:row;justify-content:flex-start;text-align:left;min-height:96px;gap:14px;padding:12px 16px}
.tuile svg{width:76px;height:76px;flex:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.15));animation:sautille 3.2s ease-in-out infinite}
.tuile.large svg{width:68px;height:68px}
.tuile strong{font:800 17px/1.2 var(--lk-titre);color:var(--fo)}
.tuile span{font-size:13.5px;color:var(--lk-texte-2);line-height:1.3}
.tuile::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:reflet 6s ease-in-out infinite}
.tuile:nth-child(2) svg,.tuile:nth-child(2)::after{animation-delay:.5s}.tuile:nth-child(3) svg,.tuile:nth-child(3)::after{animation-delay:1s}
@keyframes sautille{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes reflet{0%,70%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}}
.tuile:active,.ligne:active{transform:scale(.97)}
.tuile.scanne{outline:3px solid var(--lk-orange);outline-offset:3px;animation:appel 1.2s ease-in-out 3}
@keyframes appel{50%{transform:scale(1.04)}}
.scan-info{font-size:13px;font-weight:700;color:#E65100;margin:0 4px 10px}

/* Lignes : teinte claire de la couleur du bouton, pastille qui déborde */
.lignes{display:flex;flex-direction:column;gap:12px;padding-left:10px}
.ligne{position:relative;display:flex;align-items:center;min-height:64px;padding:8px 16px 8px 60px;border-radius:20px;
  background:linear-gradient(100deg,var(--f) 0%,var(--f2) 100%);border:1px solid var(--bd);transition:transform .15s}
.ligne svg{position:absolute;left:-12px;top:50%;width:64px;height:64px;transform:translateY(-50%);filter:drop-shadow(0 4px 6px rgba(0,0,0,.14));transition:transform .2s}
.ligne:hover svg{transform:translateY(-50%) rotate(-8deg) scale(1.06)}
.ligne .t{flex:1;min-width:0}
.ligne strong{display:block;font-size:16.5px;font-weight:700;color:var(--fo);line-height:1.25}
.ligne .t span{display:block;font-size:13.5px;color:var(--lk-texte-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ligne .fl{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--fo);font-weight:800;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* Facebook intégré */
.fb{border-radius:16px;overflow:hidden;min-height:120px;background:#F0F2F5;display:grid;place-items:center;color:#65676B;font-size:14px}
.fb iframe{width:100%;height:560px;border:0;display:block}

.reseaux{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.reseaux a{width:62px;height:62px;display:grid;place-items:center;transition:transform .2s}
.reseaux a:hover{transform:translateY(-4px) rotate(-6deg)}
.reseaux svg{width:58px;height:58px}

.partage{display:flex;align-items:center;gap:10px}
.partage .tiki{width:84px;flex:none;animation:tiki 4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes tiki{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-6px)}}
.partage .qr{width:104px;height:104px;flex:none;background:#fff;border-radius:12px;padding:5px;border:1px solid var(--lk-ligne)}
.partage p{font-size:14px;color:var(--lk-texte-2)}
.partage button{margin-top:8px;font:700 15px var(--lk-corps);background:linear-gradient(135deg,var(--lk-teal),#00B3AC);color:#fff;border:0;border-radius:999px;padding:12px 16px;min-height:48px;width:100%}

footer{text-align:center;margin:26px 16px 12px}
footer a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--lk-teal)}
footer img{height:18px}

/* Barre du bas */
.barre{position:fixed;left:0;right:0;bottom:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-top:1px solid var(--lk-ligne);display:flex;gap:8px;max-width:480px;margin:0 auto;transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}
.barre.on{transform:none}
.barre a{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;min-height:56px;border-radius:18px;font-weight:700;font-size:14.5px;color:var(--fo);background:linear-gradient(160deg,var(--f),var(--f2));border:1px solid var(--bd)}
.barre svg{width:38px;height:38px;flex:none}

/* Apparition en cascade */
.js .apparait{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.js .apparait.vu{opacity:1;transform:none}
:focus-visible{outline:3px solid var(--lk-orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.apparait{opacity:1;transform:none}}

/* Blocs texte et horaires (golinkif) */
.texte{font-size:15.5px;color:var(--lk-texte);white-space:pre-line}
.horaires{width:100%;border-collapse:collapse;font-size:15px}
.horaires td{padding:7px 4px;border-bottom:1px solid var(--lk-ligne)}
.horaires td:last-child{text-align:right;font-weight:700}
.horaires tr.auj td{color:var(--lk-teal)}
.promo{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#E0F2F1,#FFF3E0);border-radius:20px;padding:12px 14px;margin:16px 14px 0;font-size:14px}
.promo img{width:54px;flex:none}
.promo b{display:block;font:800 15px var(--lk-titre)}

/* 29/10 — smartphone : rien ne dépasse de l'écran, « Clic rapide » plus compact, barre du bas plus étroite */
html,body{max-width:100%;overflow-x:hidden}
.bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.tuile{min-width:0;padding:10px 8px;gap:4px}
.tuile svg{width:52px;height:52px}
.tuile strong{font-size:15px}
.tuile span{font-size:12.5px}
.tuile.large{min-height:68px;padding:8px 14px;gap:12px}
.tuile.large svg{width:50px;height:50px}
.barre{gap:6px;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.barre a{min-width:0;flex-direction:column;gap:0;min-height:50px;font-size:12px;line-height:1.1;border-radius:14px;padding:4px 2px}
.barre svg{width:28px;height:28px}
.fb{flex-direction:column;align-items:stretch;gap:10px}
.fb iframe{width:100%!important;max-width:500px}
.fb-apercu{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:#F3F7FD;border:1px solid #D6E3F5;text-decoration:none;color:#1D2422}
.fb-apercu img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;border:3px solid #fff;box-shadow:0 2px 8px rgba(24,119,242,.25)}
.fb-apercu strong{display:block;font:800 16px/1.2 'Plus Jakarta Sans',sans-serif}
.fb-apercu span{display:block;font-size:13px;color:#5A6764}
.fb-apercu b{margin-left:auto;flex:none;background:#1877F2;color:#fff;border-radius:999px;padding:8px 12px;font-size:13px}
.partage>div{min-width:0}
@media (max-width:420px){.partage{gap:8px}.partage .tiki{width:46px}.partage .qr{width:86px;height:86px;margin-right:2px}.partage button{padding:10px 12px}}
/* Présentation longue (ex. Byscot) : encadré aux coins arrondis, le texte ne déborde plus des bords */
.slogan{display:block;border-radius:18px;padding:8px 14px;max-width:100%;overflow-wrap:anywhere;line-height:1.45}
/* Widget Facebook officiel : jamais plus large que l'écran */
.fb-widget{width:100%;overflow:hidden;text-align:center;min-height:120px}
.fb-widget .fb-page,.fb-widget .fb-page span,.fb-widget .fb-page iframe{width:100%!important;max-width:100%!important}
.fb-apercu svg{width:56px;height:56px;flex:none}
.sans-anim *,.sans-anim *::before,.sans-anim *::after{transition:none!important;animation:none!important}