/* Base commune des démos AutonoAfrique. Chaque démo définit ses couleurs et sa mise en page. */
:root{
  --bg:#fff; --fg:#222; --muted:#666; --card:#fff; --line:#ddd; --soft:#f4f4f4;
  --accent:#c00; --accent-d:#900; --on-accent:#fff;
  --pen-bg:#FFAE1F; --pen-fg:#0A1A45;
  --tabbg:#fff; --tabfg:#666;
  --font-head:'Poppins',system-ui,sans-serif;
  --navy:#0A1A45; --blue:#2F7BFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--navy)}
body{font-family:'Poppins',system-ui,sans-serif;font-size:16px;line-height:1.6;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip;padding-bottom:88px}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
h1,h2,h3{font-family:var(--font-head);line-height:1.2;color:var(--fg)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}

/* barre démo (AutonoAfrique) */
.top-stack{position:sticky;top:0;z-index:60}
.demo-bar{position:relative;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;min-height:56px}
.demo-bar b{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#9DB4E8}
.demo-bar .acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 20px;border-radius:999px;border:2px solid transparent;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn-edit{background:#FFAE1F;color:var(--navy)}
.btn-edit:hover{background:#E89A0C}
body.editing .btn-edit{background:#fff}
.btn-ghost{background:transparent;color:#C9D6F5;padding:8px 12px;font-size:.88rem}
.btn-main{background:var(--accent);color:var(--on-accent)}
.btn-main:hover{background:var(--accent-d)}
.btn-line{background:transparent;border-color:var(--fg);color:var(--fg)}
.btn-line:hover{background:var(--soft)}
.btn-block{width:100%}
@media(max-width:559px){.demo-bar b,.demo-bar .acts a.btn-ghost,.demo-bar .acts a.btn-aa{display:none}.demo-bar{justify-content:flex-end}}

/* bandeau d'aide */
.hint{background:#FFF3C4;color:#3a2c00;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px;font-size:.9rem;font-weight:600;border-bottom:1px solid #E6D58A}
.hint[hidden]{display:none}
@media(max-width:559px){.hint{font-size:.8rem;padding:8px 12px;gap:8px}.hint .pen-demo{display:none}}
.hint .pen-demo{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--pen-bg);color:var(--pen-fg);flex:0 0 28px}
.hint .pen-demo svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hint button{background:#3a2c00;color:#FFF3C4;border:0;border-radius:999px;padding:6px 14px;font-weight:600;font-size:.8rem;cursor:pointer;min-height:36px}

/* onglets */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--tabbg);border-top:1.5px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom,0)}
.tab{background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;font-size:.72rem;font-weight:600;color:var(--tabfg);cursor:pointer}
.tab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab[aria-current="page"]{color:var(--accent)}
@media(min-width:760px){
  body{padding-bottom:0}
  .tabs{position:sticky;top:calc(var(--stack-h,110px) - 1px);bottom:auto;border-top:0;border-bottom:1.5px solid var(--line);grid-template-columns:repeat(4,auto);justify-content:center;gap:24px}
  .tab{flex-direction:row;gap:8px;font-size:.95rem;padding:0 16px}
}
.page{display:none}
.page.active{display:block;animation:in .3s ease both}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.page.active{animation:none}.btn,.pen{transition:none}.btn:hover,.pen:hover{transform:none}}

/* photos */
.photo{position:relative;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;text-align:center}
.photo .ph{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:600;font-size:.9rem;padding:12px;font-style:italic}
.photo .ph svg{width:44px;height:44px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.photo.has .ph{display:none}
.photo.sm .ph{font-size:0;padding:0}
.photo.sm .ph svg{width:26px;height:26px}

/* petits boutons « Modifier » (crayons) */
.ed{position:relative}
.pen{position:absolute;top:8px;right:8px;z-index:5;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:36px;height:36px;padding:0 8px;border-radius:999px;border:2px solid var(--bg);background:var(--pen-bg);color:var(--pen-fg);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.35);font:600 12px 'Poppins',sans-serif;transition:transform .15s}
.pen:hover{transform:scale(1.08)}
.pen svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 16px}
.photo .pen{top:10px;right:10px;padding:0 12px}
.photo.sm .pen{top:auto;bottom:-6px;right:-6px;min-width:30px;height:30px;padding:0}
.photo.sm .pen-label{display:none}

/* textes modifiables */
[data-hint]:empty::before{content:attr(data-hint);opacity:.55;font-style:italic}
.is-ph{font-style:italic;opacity:.8}
body.editing [contenteditable="true"],.solo{outline:2px dashed var(--accent);outline-offset:3px;border-radius:6px;cursor:text;min-width:24px}
[contenteditable="true"]:focus{outline-style:solid;background:rgba(255,243,196,.18)}
body.editing .photo{outline:3px dashed var(--accent);outline-offset:3px;cursor:pointer}

/* boutons retirer / ajouter */
.del{position:absolute;top:-10px;left:4px;z-index:6;width:32px;height:32px;border-radius:50%;background:#B3261E;color:#fff;border:2px solid var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center}
.del svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.add{margin-top:16px}

/* bloc « bien plus qu'une page » */
.more{padding:48px 0;background:var(--soft)}
.more-eyebrow{display:block;color:var(--accent);font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.more h2{font-size:1.7rem}
.more-sub{color:var(--muted);margin:8px 0 24px;max-width:560px}
.more-grid{display:grid;gap:16px;margin-bottom:24px}
.mt{background:var(--card);border:1.5px solid var(--line);border-radius:20px;padding:20px}
.mt h3{font-size:1.05rem;margin:12px 0 4px}
.mt p{color:var(--muted);font-size:.92rem;line-height:1.5}
.mt-vis{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:64px}
.play{width:64px;height:64px;border-radius:16px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.play svg{width:26px;height:26px;fill:currentColor}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips span{border:1.5px solid var(--line);border-radius:999px;padding:4px 14px;font-size:.85rem;font-weight:600;color:var(--fg)}
.chips span.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.bars{display:flex;align-items:flex-end;gap:6px;height:64px;width:100%}
.bars i{flex:1;background:var(--accent);border-radius:6px 6px 0 0;opacity:.85}
.bars-note{font-size:.75rem;color:var(--muted);margin-top:4px}
@media(min-width:760px){.more-grid{grid-template-columns:repeat(2,1fr)}}

/* pied de page, messages */
footer{background:var(--navy);color:#C9D6F5;padding:32px 20px;text-align:center;font-size:.9rem}
footer p{margin:0 auto 16px;max-width:520px}
footer .btn{background:#FFAE1F;color:var(--navy)}
.toast{position:fixed;left:16px;right:16px;bottom:96px;z-index:90;max-width:520px;margin:0 auto;background:var(--navy);color:#fff;border-radius:16px;padding:12px 16px;text-align:center;font-weight:600;font-size:.92rem;display:none;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.on{display:block}
.toast.err{background:#B3261E}
label{display:block;font-size:.88rem;font-weight:600;margin-bottom:4px}
input,select{width:100%;min-height:48px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--fg);font-size:1rem}
.form{display:grid;gap:12px;margin-top:16px}
.row2{display:grid;gap:12px}
@media(min-width:560px){.row2{grid-template-columns:1fr 1fr}}

/* boutons et crayons AutonoAfrique : jaune, écriture sombre */
.btn-aa{background:#FFAE1F;color:#0A1A45;border-color:#FFAE1F}
.btn-aa:hover{background:#E89A0C;border-color:#E89A0C}
.pen{background:#FFAE1F;color:#0A1A45}
.hint .pen-demo{background:#FFAE1F;color:#0A1A45}
/* photo entière sur fond flouté, quand ses proportions ne vont pas avec la zone */
.photo.has{background-size:cover;background-position:center}
.photo.fit{overflow:hidden;background-image:none !important}
.photo.fit::before{content:'';position:absolute;inset:-24px;background:var(--img) center/cover no-repeat;filter:blur(22px) brightness(.7)}
.photo.fit::after{content:'';position:absolute;inset:0;background:var(--img) center/contain no-repeat}
/* réglage manuel : on déplace et on zoome la photo */
.photo.manual{overflow:hidden;background-image:none !important}
.photo.manual::before{display:none}
.photo.manual::after{content:'';position:absolute;inset:0;background:var(--img) var(--px,50%) var(--py,50%)/cover no-repeat;transform:scale(var(--pz,1));transform-origin:var(--px,50%) var(--py,50%)}
.photo.adjusting{outline:3px solid #FFAE1F;outline-offset:3px;cursor:grab;touch-action:none;user-select:none}
.photobar{position:fixed;left:50%;transform:translateX(-50%);bottom:76px;width:min(560px,calc(100% - 24px));z-index:85;background:var(--navy);color:#fff;border-radius:20px;padding:14px 16px;box-shadow:0 12px 36px rgba(0,0,0,.45)}
.photobar[hidden]{display:none}
.photobar p{font-size:.85rem;color:#C9D6F5;margin-bottom:8px}
.pb-zoom{display:flex;align-items:center;gap:12px;font-weight:600;margin-bottom:12px;color:#fff}
.pb-zoom input{flex:1;min-height:32px;padding:0;border:0;background:transparent;accent-color:#FFAE1F}
.pb-btns{display:flex;gap:8px;flex-wrap:wrap}
.pb-btns button{flex:1;min-height:44px;border-radius:999px;border:2px solid #FFAE1F;background:transparent;color:#FFAE1F;font-weight:600;cursor:pointer;padding:0 12px}
.pb-btns .done{background:#FFAE1F;color:#0A1A45}
.pb-btns #pbRemove{border-color:#ff8a80;color:#ff8a80}
/* rien qui vienne du navigateur : barres, listes, curseurs, sélection */
html,body,*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
*{-webkit-tap-highlight-color:transparent}
input,select,button,textarea{-webkit-appearance:none;appearance:none}
::selection{background:#FFAE1F;color:#0A1A45}
input{caret-color:var(--accent)}
select[hidden]{display:none}
.cs{position:relative}
.cs-btn{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--fg);font:inherit;font-size:1rem;cursor:pointer;text-align:left}
.cs-btn::after{content:'';width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);flex:0 0 8px}
.cs.open .cs-btn::after{transform:rotate(-135deg) translateY(-2px)}
.cs-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 14px 30px rgba(0,0,0,.35);max-height:240px;overflow:auto}
.cs-list[hidden]{display:none}
.cs-opt{display:block;width:100%;text-align:left;background:none;border:0;color:var(--fg);padding:10px 12px;border-radius:10px;font:inherit;cursor:pointer;min-height:44px}
.cs-opt:hover{background:var(--soft)}
.cs-opt[aria-selected="true"]{color:var(--accent);font-weight:600;background:var(--soft)}
.cr{position:relative;flex:1;height:32px;cursor:pointer;touch-action:none;display:flex;align-items:center;margin:0 12px 0 0}
.cr::before{content:'';position:absolute;left:0;right:0;height:6px;border-radius:99px;background:rgba(255,255,255,.25)}
.cr-fill{position:absolute;left:0;height:6px;border-radius:99px;background:#FFAE1F;width:0}
.cr-thumb{position:absolute;top:50%;left:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#FFAE1F;border:3px solid #0A1A45;box-shadow:0 0 0 2px #FFAE1F}
.cr:focus-visible{outline:2px solid #fff;outline-offset:4px}
.dlg{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.28);display:grid;place-items:center;padding:16px}
.dlg[hidden]{display:none}
.dlg-card{background:#fff;color:#0A1A45;border-radius:24px;padding:24px;max-width:420px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.35);border:1px solid rgba(10,26,69,.08)}
.dlg-card p{font-size:1.05rem;font-weight:600;line-height:1.45}
.dlg-btns{display:flex;gap:8px;margin-top:20px;justify-content:flex-end;flex-wrap:wrap}
.dlg-btns button{min-height:48px;border-radius:999px;padding:0 22px;font-weight:600;font-size:1rem;cursor:pointer;border:2px solid #0A1A45;background:transparent;color:#0A1A45}
.dlg-btns .yes{background:#FFAE1F;border-color:#FFAE1F}
.dlg-btns .yes:hover{background:#E89A0C;border-color:#E89A0C}
.foot-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
@media(min-width:760px){.photobar{bottom:16px}}
@media(max-width:559px){.hide-sm{display:none}}
.photo{cursor:pointer}
.hl .photo{cursor:inherit}
.pen-host{position:relative}
/* crayon collé à côté du nom */
.ed2{display:inline-flex;align-items:center;gap:8px;max-width:100%;vertical-align:middle}
.ed2>[data-k],.ed2>[data-f]{min-width:0}
.ed2>.pen{position:static;flex:0 0 auto;width:32px;min-width:32px;height:32px;padding:0;margin:0;box-shadow:0 2px 8px rgba(0,0,0,.3)}
/* crayons placés là où ils ne cachent rien */
.grp>.pen{top:12px;right:20px}
.dish>.pen{top:auto;bottom:-12px;right:14px}
html,body{overscroll-behavior:none}

/* pied de page des démos : petit, clair, aux couleurs d'AutonoAfrique (bleu sur fond blanc) */
footer{background:linear-gradient(180deg,#EAF1FF,#fff);color:#0A1A45;border-top:1px solid #DDE5F5;padding:14px 16px;font-size:.8rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px}
footer p{margin:0;max-width:440px;line-height:1.45}
footer .foot-actions{margin:0;gap:6px}
footer .btn{min-height:36px;padding:6px 16px;font-size:.82rem;background:#2F7BFF;color:#fff;border-color:#2F7BFF}
footer .btn:hover{background:#2362D5;border-color:#2362D5}
footer .foot-actions .btn{background:#fff;color:#2362D5;border-color:#BFD0F2}
footer .foot-actions .btn:hover{background:#EAF1FF;border-color:#2F7BFF}
footer .btn-ghost{padding:6px 16px}

/* ordinateur : la barre du haut a déjà les boutons, le pied ne garde que sa phrase */
@media(min-width:560px){footer .foot-actions,footer .btn{display:none}}
/* barre du haut : comme le site, elle devient blanche dès qu'on défile */
.demo-bar{transition:background-color .35s ease,box-shadow .35s ease}
.demo-bar b{transition:color .35s ease}
.demo-bar .btn-ghost{transition:color .25s ease}
body.scrolled .demo-bar{background:rgba(255,255,255,.96);box-shadow:0 1px 0 rgba(10,26,69,.06),0 10px 30px rgba(10,26,69,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.scrolled .demo-bar b{color:#2362D5}
body.scrolled .demo-bar .btn-ghost{color:#0A1A45}
body.scrolled .demo-bar .btn-ghost:hover{color:#2362D5}
@media(prefers-reduced-motion:reduce){.demo-bar,.demo-bar b,.demo-bar .btn-ghost{transition:none}}

/* logo AutonoAfrique dans le pied des démos */
footer .foot-logo{display:inline-flex;flex:0 0 auto}
footer .foot-logo img{display:block;width:46px;height:46px;border-radius:11px}
@media(min-width:560px){footer{gap:8px 22px}}

/* logo en texte dans le pied : à gauche, bien lisible */
footer .foot-logo{align-items:center;gap:10px;text-decoration:none}
footer .fl-txt{display:flex;flex-direction:column;gap:3px;text-align:left}
footer .fl-txt strong{font-family:'Poppins',sans-serif;font-size:1.25rem;font-weight:700;color:#0A1A45;letter-spacing:-.02em;line-height:1}
footer .fl-txt strong span{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:700;color:#E89A0C}
footer .fl-txt small{font-size:.62rem;font-weight:700;letter-spacing:.14em;color:#2362D5;line-height:1}
@media(min-width:560px){footer{justify-content:space-between;padding:14px clamp(16px,4vw,40px)}footer p{text-align:right}}

/* téléphone : pied de page compact, aligné à gauche */
@media(max-width:559px){
  footer{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;text-align:left;gap:10px;padding:14px 16px}
  footer .foot-logo{order:1}
  footer p{order:2;flex:1 1 100%;max-width:none;font-size:.76rem;text-align:left}
  footer .foot-actions{order:3;margin:0}
  footer > a.btn{order:4}
  footer .btn{min-height:34px;padding:5px 12px;font-size:.78rem}
}

/* logo dans la barre du haut : visible seulement sur téléphone, là où le mot « Démonstration » est caché */
.bar-logo{display:none}
@media(max-width:559px){
  .bar-logo{display:inline-flex;flex:0 0 auto;margin-right:auto}
  .bar-logo img{display:block;width:36px;height:36px;border-radius:9px}
  .demo-bar{justify-content:space-between;gap:8px;padding:8px 12px}
  .demo-bar .acts a.btn-aa{display:inline-flex}
  .demo-bar .acts #resetBtn{display:none}
  .demo-bar .btn{min-height:40px;padding:6px 14px;font-size:.84rem}
}

/* boutons du pied : ceux de la démo prennent la couleur du site de démo, ceux d'AutonoAfrique restent jaunes */
footer .foot-actions .btn{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
footer .foot-actions .btn:hover{background:var(--accent-d);border-color:var(--accent-d)}
footer > a.btn{background:#FFAE1F;color:var(--navy);border-color:#FFAE1F}
footer > a.btn:hover{background:#E89A0C;border-color:#E89A0C}
@media(max-width:559px){
  footer .foot-actions{order:1}
  footer > a.btn{order:2}
  footer p{order:3}
  footer .foot-logo{order:4}
}

/* boutons de la démo (retirer les photos, tout remettre) : dans le site de démo, aux couleurs de la démo */
.demo-tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
/* pied de page : un seul bouton d'AutonoAfrique, « Je veux mon site », toujours visible */
@media(min-width:560px){footer .btn{display:inline-flex}}
footer > a.btn{background:#FFAE1F;color:var(--navy);border-color:#FFAE1F}
/* téléphone : le pied de page descend jusqu'à la barre d'onglets, plus de bande de fond de la démo en dessous */
@media(max-width:759px){
  body{padding-bottom:0}
  footer{padding-bottom:calc(var(--tabs-h,72px) + 14px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:559px){
  footer > a.btn{order:1}
  footer p{order:2}
  footer .foot-logo{order:3}
}



/* pied de page : logo à sa place, icône WhatsApp à côté, seul le bouton « Je veux mon site » est au milieu */
footer .foot-id{display:flex;align-items:center;justify-content:space-between;gap:14px}
footer .foot-wa{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0A1A45;border:1.5px solid #BFD0F2;transition:background .2s,color .2s,border-color .2s}
footer .foot-wa svg{width:22px;height:22px}
footer .foot-wa:hover{background:#FFAE1F;border-color:#FFAE1F}
@media(max-width:559px){
  footer .foot-id{order:3;flex:1 1 100%}
  footer > a.btn{order:1;align-self:center;margin:0 auto}
  footer p{order:2}
}
footer .foot-id .foot-logo{order:0}
footer .foot-id .foot-wa{order:1}

/* téléphone : le bouton « Je veux mon site » se serre contre le site de démo, moins de blanc au-dessus */
@media(max-width:559px){
  footer{padding-top:8px;row-gap:8px}
}

/* téléphone : barre du haut bleue au départ, blanche dès qu'on défile ; logo petit comme sur le site */
.bl-img{display:none}
@media(max-width:559px){
  .demo-bar .bl-txt{display:block;font-family:'Poppins',sans-serif;font-size:1.2rem;font-weight:700;letter-spacing:-.02em;line-height:1;text-transform:none;color:#fff}
  .demo-bar .bl-txt span{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:700;color:#FFAE1F}
  .bar-logo .bl-img{display:none;width:auto;height:20px;border-radius:0}
  body.scrolled .bar-logo .bl-txt{display:none}
  body.scrolled .bar-logo .bl-img{display:block}
  /* le bouton « Je veux mon site » se serre contre le site de démo */
  #more{padding-bottom:12px}
}

/* pas de soulignement sous le logo de la barre du haut */
.bar-logo,.bar-logo:hover,.bar-logo b,.bar-logo span{text-decoration:none}

/* pied de page : flèche jaune de retour à gauche du bouton « Je veux mon site » */
footer .foot-top{display:flex;align-items:center;justify-content:center;gap:10px}
footer .foot-top > a.btn{background:#FFAE1F;color:var(--navy);border-color:#FFAE1F}
footer .foot-top > a.btn:hover{background:#E89A0C;border-color:#E89A0C}
footer .foot-back{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#FFAE1F;color:#0A1A45;text-decoration:none;box-shadow:0 6px 14px rgba(255,174,31,.35);transition:background .2s,transform .2s}
footer .foot-back svg{width:20px;height:20px}
footer .foot-back:hover{background:#E89A0C;transform:translateX(-2px)}
@media(max-width:559px){
  footer .foot-top{order:1;flex:1 1 100%}
  footer{padding-top:3px;row-gap:8px}
  #more{padding-bottom:8px}
}
/* la flèche de retour est pour le téléphone seulement */
@media(min-width:560px){footer .foot-back{display:none}}

/* flèche de retour après le logo (téléphone) : jaune, sans fond ; plus soutenue quand la barre devient blanche */
.bar-back{display:none}
@media(max-width:559px){
  .demo-bar .bar-logo{margin-right:8px}
  .bar-back{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:auto;color:#FFAE1F;text-decoration:none;transition:color .35s ease,transform .2s}
  .bar-back svg{width:24px;height:24px}
  .bar-back:active{transform:translateX(-2px)}
  body.scrolled .bar-back{color:#D98200}
}
/* la flèche de retour se place juste à côté de « Modifier tout » */
@media(max-width:559px){
  .demo-bar .bar-logo{margin-right:auto}
  .bar-back{margin-right:0}
}

/* petite explication sous le numéro WhatsApp de la démo */
.wa-note{font-size:.8rem;line-height:1.4;color:var(--muted);margin:6px 0 10px;font-style:italic}
.wa-note[hidden]{display:none}

/* icône WhatsApp d'origine (vert, fond transparent) dans le pied des démos */
footer .foot-wa{background:none;border:0;box-shadow:none;padding:0;width:42px;height:42px}
footer .foot-wa img{display:block;width:100%;height:100%}
footer .foot-wa:hover{background:none;transform:scale(1.08)}
/* bandeau d'aide : fin, et il disparaît dès qu'on défile pour ne pas gêner */
.hint{padding:5px 12px;font-size:.78rem;line-height:1.3;gap:8px}
.hint .pen-demo{width:22px;height:22px;flex:0 0 22px}
.hint .pen-demo svg{width:12px;height:12px}
.hint button{min-height:28px;padding:3px 12px;font-size:.75rem}
body.scrolled .hint{display:none}
/* ordinateur : un vrai bouton « Retour au site » à gauche de la barre */
@media(min-width:560px){
  .bar-back{display:inline-flex;align-items:center;gap:8px;order:-1;padding:8px 16px 8px 12px;border-radius:999px;background:#FFAE1F;color:#0A1A45;font-weight:700;font-size:.88rem;text-decoration:none;white-space:nowrap;transition:background .2s,transform .2s}
  .bar-back svg{width:18px;height:18px}
  .bar-back::after{content:'Retour au site'}
  .bar-back:hover{background:#E89A0C;transform:translateX(-2px)}
}