/* Atelier Malin, site public : finitions et responsive.
   Chargée juste après le <style> de l'appli : chaque règle vise une classe précise de l'appli,
   aucune ne change la logique (3D, étapes, fenêtres, chat). Organisation :
   1. jetons   2. base & focus   3. barre du haut   4. accueil & bibliothèque   5. fenêtres
   6. atelier   7. courses   8. compte   9. abonnement   10. pied de page   11. tactile   12. mouvement réduit */

/* ---------- 1. jetons ---------- */
:root{
  /* texte tertiaire : 4,6:1 au moins sur tous les fonds (AA), il était à 2,9:1 sur --surface-2 */
  --ink-3:#5E6358;
  --am-r-sm:8px; --am-r:12px; --am-r-lg:16px; --am-r-xl:20px;
  --am-ombre-1:0 1px 2px rgba(23,25,21,.06);
  --am-ombre-2:0 1px 2px rgba(23,25,21,.05), 0 10px 28px -14px rgba(23,25,21,.30);
  --am-ombre-3:0 2px 6px rgba(23,25,21,.06), 0 28px 70px -24px rgba(23,25,21,.48);
  --am-voile:rgba(17,19,16,.52);
  --am-ease:cubic-bezier(.2,.7,.2,1);
  --am-gout:16px;
}
@media (prefers-color-scheme: sombre-desactive){
  :root:not([data-theme="light"]){
    --ink-3:#8A9083;
    --am-ombre-1:0 1px 2px rgba(0,0,0,.35);
    --am-ombre-2:0 1px 2px rgba(0,0,0,.35), 0 12px 30px -14px rgba(0,0,0,.75);
    --am-ombre-3:0 2px 8px rgba(0,0,0,.4), 0 30px 80px -24px rgba(0,0,0,.85);
    --am-voile:rgba(0,0,0,.62);
  }
}
:root[data-theme="dark"]{
  --ink-3:#8A9083;
  --am-ombre-1:0 1px 2px rgba(0,0,0,.35);
  --am-ombre-2:0 1px 2px rgba(0,0,0,.35), 0 12px 30px -14px rgba(0,0,0,.75);
  --am-ombre-3:0 2px 8px rgba(0,0,0,.4), 0 30px 80px -24px rgba(0,0,0,.85);
  --am-voile:rgba(0,0,0,.62);
}

/* ---------- 2. base & focus ---------- */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--bar-h) + 12px);}
/* aucune barre de défilement horizontale de page */
html, body{overflow-x:clip;}
body{text-rendering:optimizeLegibility;}
/* la barre du haut reste collée sur les pages qui défilent : le conteneur suit la hauteur du contenu
   (l'atelier de bureau garde sa hauteur d'écran, il défile à l'intérieur de ses panneaux) */
#root:not(:has(> main.atelier, > main.gen-wait)){height:auto; min-height:100%;}
@media (max-width:920px){ #root{height:auto; min-height:100%;} }
p, li, .lede, .chat-hint, .compte-note, .ov-meta{text-wrap:pretty;}

/* focus clavier : un anneau net et partout le même */
:where(button, a, summary, select, [role="tab"], [role="button"], [tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
:where(.btn, .seg-btn, .icon-btn, .tool-pill, .idea-chip, .composer-tab, .example-card, .om-mat, .alt-chip, .assem-opt):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
/* sur le mètre ruban (qui défile et rogne le dehors), l'anneau passe à l'intérieur */
.tape :focus-visible{outline:2px solid var(--tape-ink); outline-offset:-4px;}
.tape .tape-step.active :focus-visible, .tape .tape-step.active:focus-visible{outline-color:var(--tape);}

/* boutons : transitions et survols cohérents */
.btn{transition:transform .12s var(--am-ease), background-color .15s, border-color .15s, box-shadow .15s, filter .15s, color .15s;}
.btn-ghost:hover:not(:disabled){background:color-mix(in srgb, var(--surface-2) 55%, var(--surface));}
.btn-primary:hover:not(:disabled){filter:brightness(1.05); box-shadow:inset 0 -2px 0 rgba(0,0,0,.12), 0 4px 14px -6px color-mix(in srgb, var(--tape) 80%, transparent);}
.btn-primary:disabled{opacity:1; filter:none; background:color-mix(in srgb, var(--tape) 38%, var(--surface)); border-color:color-mix(in srgb, var(--tape) 40%, var(--line)); color:color-mix(in srgb, var(--tape-ink) 55%, var(--surface)); box-shadow:none;}
@media (prefers-color-scheme: sombre-desactive){ :root:not([data-theme="light"]) .btn-primary:disabled{background:color-mix(in srgb, var(--tape) 22%, var(--surface)); color:color-mix(in srgb, var(--ink) 55%, transparent);} }
:root[data-theme="dark"] .btn-primary:disabled{background:color-mix(in srgb, var(--tape) 22%, var(--surface)); color:color-mix(in srgb, var(--ink) 55%, transparent);}
.btn, .seg-btn, .composer-tab, .tab-pill, .idea-chip, .tool-pill, .toggle-btn, .ef-btn{-webkit-tap-highlight-color:transparent;}
.seg-btn{transition:background-color .15s, color .15s, box-shadow .15s;}
.icon-btn{transition:border-color .15s, color .15s, background-color .15s;}
.icon-btn:hover:not(:disabled){background:color-mix(in srgb, var(--surface-2) 50%, var(--surface));}

/* champs : même rayon, même anneau de focus */
.community-search, .om-ia, .picker-row input[type=search], .om-in input, .chat-form input{border-radius:var(--am-r-sm);}
.community-search:focus, .om-ia:focus, .om-in input:focus, .picker-row input[type=search]:focus{
  outline:2px solid var(--accent); outline-offset:0; border-color:transparent;
}
.om-choice input[type=radio], .auth-cgu input[type=checkbox], .outils-toggle input{accent-color:var(--accent);}
.om-choice input[type=radio]{width:18px; height:18px; margin:0; flex-shrink:0;}
.om-choice{align-items:center; min-height:32px;}
.om-choice .mono{white-space:nowrap;}

/* ---------- 3. barre du haut ---------- */
.topbar{
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px);
  border-bottom-color:color-mix(in srgb, var(--line) 85%, transparent);
}
.topbar .compte-btn{white-space:nowrap;}
.brand{border-radius:10px;}
@media (max-width:374px){ .topbar:not(.in-atelier) .brand-beta{display:none;} }
@media (max-width:640px){
  .topbar:not(.in-atelier) .brand-name{font-size:19px;}
  .topbar:not(.in-atelier) .compte-btn{min-height:44px; padding-inline:14px;}
}

/* ---------- 4. accueil & bibliothèque ---------- */
.home{padding-bottom:clamp(40px,6vw,72px);}
/* un halo très doux derrière la question et la boîte de saisie */
.home .hero-grid{position:relative; isolation:isolate;}
.home .hero-grid::before{
  content:""; position:absolute; z-index:-1; inset:-40px 0 auto; height:min(520px, 90%); pointer-events:none;
  background:radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--tape) 16%, transparent), transparent 70%);
}
.composer{box-shadow:var(--am-ombre-2);}
.composer:focus-within{box-shadow:0 0 0 4px color-mix(in srgb, var(--tape) 22%, transparent), var(--am-ombre-2);}
.composer-tab{transition:background-color .15s, color .15s, box-shadow .15s;}
.composer-tab:not(.active):hover{color:var(--ink);}

.examples-head{margin-top:clamp(40px,6vw,72px); margin-bottom:18px;}
.examples-head h2{font-size:clamp(24px,3vw,32px); letter-spacing:-0.025em; line-height:1.1;}
.examples-head span{color:var(--ink-3); font-size:13.5px;}
/* catégories : pastilles pleines et discrètes plutôt qu'en pointillés */
.example-filter .idea-chip{border-style:solid; border-color:var(--line); background:var(--surface); color:var(--ink-2); padding:6px 13px; font-size:13px; font-weight:600; transition:background-color .15s, color .15s, border-color .15s;}
.example-filter .idea-chip:hover{border-color:var(--ink-3); color:var(--ink);}
.example-filter .idea-chip.on{background:var(--ink); border-color:var(--ink); color:var(--surface);}
.ex-tools{margin-bottom:22px;}
.community-search{height:42px;}
.ex-tri{flex-wrap:nowrap;}
/* cartes des modèles */
.examples-grid{gap:clamp(14px,1.6vw,20px);}
.example-card{
  border-radius:var(--am-r-lg); border-color:color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow:var(--am-ombre-1); transition:transform .2s var(--am-ease), box-shadow .2s var(--am-ease), border-color .2s;
}
@media (hover:hover){
  .example-card:hover{transform:translateY(-3px); border-color:var(--ink-3); box-shadow:var(--am-ombre-2);}
  .example-card:active{transform:translateY(-1px);}
}
.example-card:active{border-color:var(--ink-3);}
.example-thumb{height:clamp(132px, 14vw, 156px);}
.example-body{padding:14px 16px 16px; gap:6px;}
/* le prix devient une étiquette posée sur la vignette, en haut à droite : le titre garde toute la largeur */
.example-card{position:relative;}
.example-body h3{font-size:17px; line-height:1.2;}
.example-body h3 .ex-prix{
  float:none; position:absolute; top:8px; right:8px; z-index:2; margin:0; padding:3px 9px; border-radius:999px;
  background:color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow:0 1px 2px rgba(0,0,0,.08);
  color:var(--ink); font-family:var(--font-mono); font-size:12px; font-weight:700; line-height:1.4; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.example-body p{font-size:13px; line-height:1.45;}
.example-tags{gap:6px; padding-top:10px;}
.example-tags .tag{background:transparent; padding:2px 9px;}
.source-badge{box-shadow:0 1px 2px rgba(0,0,0,.12);}
.footnote{padding-top:40px; font-size:12.5px;}
/* téléphone : une carte = une ligne compacte (vignette à gauche), la liste se parcourt d'un pouce */
@media (max-width:560px){
  .examples-grid{grid-template-columns:minmax(0,1fr); gap:12px;}
  .example-card{display:grid; grid-template-columns:118px minmax(0,1fr); border-radius:14px;}
  .example-thumb{height:auto; min-height:132px;}
  .example-thumb .source-badge{top:6px; left:6px; font-size:10px; padding:2px 6px;}
  .example-body{padding:12px 14px 13px; gap:4px;}
  .example-body h3{font-size:15.5px; display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
  .example-body h3 .ex-prix{position:static; font-size:11.5px; padding:1px 7px; background:var(--surface-2); border-color:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;}
  .example-body p{font-size:12.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .example-tags{padding-top:6px; gap:4px;}
  .example-tags .tag:nth-child(n+3){display:none;}
  .ex-tools{gap:10px; margin-bottom:16px;}
  .ex-tools .community-search{flex:1 1 100%; max-width:none;}
  .ex-tri{width:100%;}
  .ex-tri .seg-btn{flex:1;}
}

/* ---------- 5. fenêtres ---------- */
.room-overlay{background:var(--am-voile); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:am-voile-in .18s ease-out;}
.room-modal{border:1px solid var(--line); border-radius:var(--am-r-xl); box-shadow:var(--am-ombre-3); animation:am-fenetre-in .24s var(--am-ease);}
.room-modal h3{letter-spacing:-0.02em;}
@keyframes am-voile-in{from{opacity:0}}
@keyframes am-fenetre-in{from{opacity:0; transform:translateY(10px) scale(.985);}}
.open-model{gap:16px;}
.om-block > b, .om-bois-head b{font-family:var(--font-display); font-size:15px; letter-spacing:-0.01em;}
.om-mat{transition:border-color .15s, box-shadow .15s;}
.om-mat:hover{border-color:var(--ink-3);}
.om-foot{gap:10px;}
.quit-modal, .conf-modal{padding:22px;}
/* téléphone : toutes les fenêtres montent du bas, pleine largeur, jamais plus hautes que l'écran */
@media (max-width:640px){
  .room-overlay{align-items:flex-end; padding:0;}
  .room-modal{
    width:100%; max-width:none; max-height:92dvh; border-radius:20px 20px 0 0; border-width:1px 0 0;
    padding-bottom:calc(18px + env(safe-area-inset-bottom,0px)); animation:am-feuille-in .28s var(--am-ease);
  }
  .room-modal.open-model{padding-bottom:18px;}
  .room-modal.quit-modal, .room-modal.conf-modal{padding:22px 18px calc(18px + env(safe-area-inset-bottom,0px));}
  .room-modal.quit-modal::before, .room-modal.conf-modal::before, .room-modal.bravo-modal::before{
    content:""; display:block; width:40px; height:4px; border-radius:2px; background:var(--line); margin:-10px auto 4px; flex-shrink:0;
  }
  .room-modal.share-vitrine, .room-modal.imagine-modal.room-compact{width:100%; max-width:none; border-radius:20px 20px 0 0;}
  .confirm-actions{flex-direction:column-reverse;}
  .confirm-actions .btn{width:100%; justify-content:center; padding:13px;}
}
@keyframes am-feuille-in{from{transform:translateY(40px); opacity:.4;}}

/* ---------- 6. atelier ---------- */
.panel{scrollbar-width:thin; scrollbar-color:var(--line) transparent;}
.stage-meta, .tool-pill, .asm-seg{box-shadow:var(--am-ombre-1);}
.tool-pill{transition:color .15s, border-color .15s, background-color .15s;}
.float-chat .fc-form{box-shadow:var(--am-ombre-2);}
.select-card, .edit-float, .alert-banner, .slot-menu, .wall-picker, .ouv-menu, .add-menu{box-shadow:var(--am-ombre-2);}
.charge-card, .custom-card, .ov-details, .solid-card, .hw-list, .pieces-list, .diff-list{border-radius:var(--am-r);}
.budget-teaser{border-radius:var(--am-r); transition:filter .15s, transform .12s;}
.budget-teaser:hover{filter:brightness(1.04);}
.custom-row{min-height:52px;}
.ov-meta{line-height:1.5;}
@media (max-width:400px){ .ov-meta{font-size:11px; letter-spacing:-0.01em;} }
/* mètre ruban : il reste jaune dans les deux thèmes, ses couleurs ne suivent donc pas le thème
   (le rouge crayon clair du mode sombre tombait à 1,6:1 sur le jaune) */
.tape-step.finish:not(.active) .tape-num{color:#8F2712;}
.tape-share{background:#B5381F; color:#fff;}
.tape-step{transition:flex-basis .35s ease, flex-grow .35s ease, background-color .15s;}
.tape-main{-webkit-tap-highlight-color:transparent;}
/* étiquette « Astuce » : 4,0:1 sur son fond rose en clair, passée à 5:1 */
.astuce::before{color:#A8341C;}
:root[data-theme="dark"] .astuce::before{color:var(--pencil);}
@media (prefers-color-scheme: sombre-desactive){ :root:not([data-theme="light"]) .astuce::before{color:var(--pencil);} }

/* ---------- 7. courses ---------- */
.shop-head h2{font-size:clamp(26px,3.6vw,34px); letter-spacing:-0.025em;}
.budget-card{border-radius:var(--am-r-lg); box-shadow:var(--am-ombre-1);}
.table-scroll{border-radius:var(--am-r); box-shadow:var(--am-ombre-1);}
.tool-card{border-radius:var(--am-r); transition:border-color .15s;}
.tool-card:hover{border-color:var(--ink-3);}
@media (max-width:560px){
  .shop-wrap{gap:24px; padding-top:20px;}
  .budget-card{padding:18px;}
  .budget-breakdown{gap:12px 18px;}
}

/* ---------- 8. compte : « Créer votre compte / Se connecter » est un passage obligé ---------- */
.compte-inscr{max-width:600px;}
.compte-inscr .lm-kicker{margin-bottom:10px;}
.compte-inscr h1{font-size:clamp(30px,5vw,44px); line-height:1.05; margin-bottom:10px;}
.compte-inscr .lede{max-width:46ch; margin-inline:auto; font-size:16px; line-height:1.5;}
.auth-tabs{margin-top:24px; padding:4px; border-radius:12px;}
.auth-tabs .seg-btn{min-height:40px; padding:8px 20px; border-radius:9px; font-size:14px;}
.compte-card{border-radius:var(--am-r-lg); border-color:color-mix(in srgb, var(--line) 85%, transparent); box-shadow:var(--am-ombre-2); padding:26px; gap:18px; margin-top:20px;}
.compte-card .field{gap:7px;}
.compte-card .field-label{font-size:12px; letter-spacing:.04em; color:var(--ink-2);}
.compte-card .field-label small{font-size:12px; font-weight:500; color:var(--ink-3); text-transform:none; letter-spacing:0; margin-left:4px;}
.compte-card .field-label small.ok{color:var(--good);}
.compte-card input:not([type=checkbox]):not([type=radio]){
  min-height:48px; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.3; transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.compte-card input::placeholder{color:var(--ink-3); opacity:1;}
.compte-card input:not([type=checkbox]):hover:not(:focus):not([readonly]){border-color:var(--ink-3);}
.compte-card input:not([type=checkbox]):focus{outline:2px solid transparent; outline-offset:1px; border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px color-mix(in srgb, var(--tape) 35%, transparent);}
.compte-row{gap:16px;}
/* « Afficher » dans le champ mot de passe : une vraie cible */
.mdp-in input{padding-right:96px !important;}
.mdp-voir{min-height:36px; min-width:78px; right:6px; padding:6px 12px; border-radius:8px; font-size:13px; color:var(--ink); transition:background-color .15s;}
.mdp-voir:hover{background:color-mix(in srgb, var(--ink) 12%, var(--surface-2));}
.mdp-jauge{margin-top:8px;}
.mdp-jauge span{height:5px; border-radius:3px;}
.compte-card .mdp-regle{margin-top:-6px;}
/* « Rester connecté » et la case à cocher : toute la ligne se touche */
.auth-cgu{align-items:center; min-height:44px; font-size:14px; color:var(--ink-2);}
.auth-cgu input{width:20px; height:20px; margin:0; accent-color:var(--accent);}
.auth-ligne{gap:4px 12px;}
.link-btn.auth-oubli-lien, .link-btn.auth-retour, .auth-switch .link-btn{display:inline-flex; align-items:center; min-height:44px; padding:0 4px; font-size:14px; font-weight:650; color:var(--accent); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset:3px;}
/* le bouton d'envoi : pleine largeur, bien visible */
.compte-card > .btn-primary, .auth-card .auth-go{width:100%; min-height:52px; justify-content:center; font-size:16px; font-weight:700; border-radius:12px;}
.compte-card > .btn-primary[disabled], .auth-card .auth-go[disabled]{cursor:progress;}
.compte-err{display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:10px; background:var(--pencil-soft); color:var(--ink); font-size:13.5px; line-height:1.4;}
.compte-err::before{content:"!"; flex:0 0 18px; height:18px; border-radius:50%; background:var(--pencil); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; margin-top:1px;}
.compte-card .compte-note{font-size:13px; line-height:1.5;}
.auth-switch{font-size:14px; padding-top:14px; border-top:1px solid var(--line);}
.auth-id{border-radius:12px; padding:14px;}
.auth-msg{border-radius:12px; padding:12px 14px;}
/* écran du compte connecté */
.compte-head h1{line-height:1.05;}
.compte-meuble{border-radius:var(--am-r-lg); transition:box-shadow .2s, border-color .2s, transform .2s var(--am-ease);}
.compte-meuble:hover{border-color:var(--ink-3); box-shadow:var(--am-ombre-2);}
.compte-kpis{box-shadow:var(--am-ombre-1);}
@media (max-width:640px){
  .compte{padding-top:28px;}
  .compte-inscr h1{font-size:clamp(28px,8.4vw,34px);}
  .compte-inscr .lede{font-size:15px;}
  .auth-tabs{display:flex; width:100%; margin-top:20px;}
  .auth-tabs .seg-btn{flex:1; min-height:44px; padding-inline:8px;}
  .compte-card{padding:20px 18px; gap:16px; margin-top:16px; border-radius:18px;}
  .compte-row{gap:16px;}
  /* prénom et nom côte à côte : le formulaire raccourcit d'une ligne */
  .compte-row:has(input[autocomplete="given-name"]){grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;}
  .auth-ligne{flex-direction:column; align-items:flex-start;}
  .compte-head{align-items:flex-start;}
  .compte-head > .btn{width:100%; justify-content:center; min-height:48px;}
  .compte-kpis{grid-template-columns:repeat(2, minmax(0,1fr));}
  .compte-kpis > div{padding:14px;}
  .compte-kpis b{font-size:22px;}
  .compte-tabs{display:flex; width:100%;}
  .compte-tabs .seg-btn{flex:1; min-height:44px;}
}
@media (max-width:360px){ .compte-card{padding:18px 14px;} }

/* ---------- 9. abonnement (fenêtre de claude-public.js : sélecteurs renforcés car sa feuille arrive après) ---------- */
.am-abo-fond.am-abo-fond{background:var(--am-voile); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:16px;}
.am-abo-fond .am-abo{background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--am-r-xl); box-shadow:var(--am-ombre-3); max-height:calc(100dvh - 32px); overflow-y:auto; animation:am-fenetre-in .24s var(--am-ease);}
.am-abo-fond .am-abo-corps{padding:24px 26px 22px;}
.am-abo-fond .am-abo h2{font-family:var(--font-display); font-size:clamp(22px,4vw,26px); letter-spacing:-0.025em; font-weight:800;}
.am-abo-fond .am-abo p{color:var(--ink-2); opacity:1;}
.am-abo-fond .am-abo-prix{padding:12px 14px; margin:6px 0 16px; border-radius:var(--am-r); background:var(--accent-soft); color:var(--ink);}
.am-abo-fond .am-abo-prix b{font-family:var(--font-display); font-size:36px; letter-spacing:-0.03em; font-variant-numeric:tabular-nums;}
.am-abo-fond .am-abo-prix span{color:var(--ink-2); font-size:14px;}
.am-abo-fond .am-abo ul{display:grid; gap:6px; margin-bottom:20px;}
.am-abo-fond .am-abo li{margin:0; padding-left:26px; color:var(--ink);}
.am-abo-fond .am-abo li::before{left:3px; top:6px; color:var(--good);}
.am-abo-fond .am-abo-btn{min-height:50px; border-radius:var(--am-r); background:var(--tape); color:var(--tape-ink); border:1px solid var(--tape-line); box-shadow:inset 0 -2px 0 rgba(0,0,0,.12); font-family:var(--font-body); font-weight:700; transition:filter .15s, transform .12s;}
.am-abo-fond .am-abo-btn:hover:not([disabled]){filter:brightness(1.05);}
.am-abo-fond .am-abo-btn:active:not([disabled]){transform:translateY(1px);}
.am-abo-fond .am-abo-btn:focus-visible, .am-abo-fond .am-abo-lien:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.am-abo-fond .am-abo-lien{min-height:44px; color:var(--ink-2); opacity:1; font-family:var(--font-body);}
.am-abo-fond .am-abo-lien:hover{color:var(--ink);}
.am-abo-fond .am-abo-note{color:var(--ink-3); opacity:1 !important;}
.am-abo-fond .am-abo-err{color:var(--bad);}
@media (max-width:640px){
  .am-abo-fond.am-abo-fond{align-items:flex-end; padding:0;}
  .am-abo-fond .am-abo{max-width:none; border-radius:20px 20px 0 0; border-width:1px 0 0; max-height:94dvh; animation:am-feuille-in .28s var(--am-ease);}
  .am-abo-fond .am-abo-corps{padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));}
}
/* badge « Abonné · Gérer » : pastille propre, au-dessus de la zone sûre, jamais sur le mètre ruban de l'atelier */
.am-abo-badge.am-abo-badge{left:max(12px, env(safe-area-inset-left,0px)); bottom:calc(12px + env(safe-area-inset-bottom,0px)); min-height:36px; padding:8px 14px; border:1px solid var(--tape-line); background:var(--tape); color:var(--tape-ink); font-family:var(--font-body); font-weight:650; box-shadow:var(--am-ombre-2); transition:filter .15s, transform .12s;}
.am-abo-badge.am-abo-badge:hover{filter:brightness(1.05);}
.am-abo-badge.am-abo-badge:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
body:has(> #root > main.atelier) .am-abo-badge, body:has(> #root > main.gen-wait) .am-abo-badge{display:none;}
.am-abo-toast.am-abo-toast{top:calc(14px + env(safe-area-inset-top,0px)); background:var(--ink); color:var(--surface); border-radius:var(--am-r); font-family:var(--font-body); box-shadow:var(--am-ombre-3);}
/* toast de l'appli : au-dessus de la zone sûre */
.toast{border-radius:var(--am-r); bottom:calc(20px + env(safe-area-inset-bottom,0px)); box-shadow:var(--am-ombre-3);}

/* ---------- 10. pied de page (inséré hors de React) : sur l'accueil et sur l'écran du compte
   (passage obligé avant de concevoir : les mentions légales et la confidentialité doivent y être à portée) ---------- */
.am-pied{display:none;}
body:has(> #root > main.home, > #root > main.compte) > .am-pied{display:block;}
body:has(> #root > main.home, > #root > main.compte) #root > .site-foot{display:none;}
/* le pied est hors de #root : sans ceci, la barre du haut (collante, mais prisonnière de #root) glisserait hors de
   l'écran en arrivant sur le pied. #root s'efface de la mise en page (display:contents) et c'est le body qui porte la colonne */
body:has(> #root > main.home, > #root > main.compte){display:flex; flex-direction:column; height:auto; min-height:100%;}
body:has(> #root > main.home, > #root > main.compte) > #root{display:contents;}
body:has(> #root > main.home, > #root > main.compte) > .am-pied{flex-shrink:0;}
.am-pied{background:var(--surface); border-top:1px solid var(--line); color:var(--ink-2); font-size:14px;}
.am-pied a{color:inherit; text-decoration:none;}
.am-pied-ruban{height:10px; background:var(--tape); background-image:repeating-linear-gradient(90deg, var(--tape-ink) 0 1px, transparent 1px 10px); background-size:100% 5px; background-repeat:no-repeat; border-bottom:1px solid var(--tape-line); opacity:.9;}
.am-pied-in{
  max-width:1200px; margin:0 auto;
  padding:clamp(36px,5vw,56px) max(var(--am-gout), env(safe-area-inset-right,0px)) 28px max(var(--am-gout), env(safe-area-inset-left,0px));
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,2fr); gap:clamp(28px,5vw,64px);
}
.am-pied-marque{display:flex; flex-direction:column; gap:14px; min-width:0;}
.am-pied-logo{display:inline-flex; align-items:center; gap:10px; width:fit-content; border-radius:10px;}
.am-pied-logo img{width:34px; height:34px; border-radius:8px; display:block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.18);}
.am-pied-logo span{font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-0.03em; color:var(--ink);}
.am-pied-logo em{font-style:normal; color:#E8AC00;}
:root[data-theme="dark"] .am-pied-logo em{color:var(--tape);}
@media (prefers-color-scheme: sombre-desactive){ :root:not([data-theme="light"]) .am-pied-logo em{color:var(--tape);} }
.am-pied-marque p{margin:0; max-width:36ch; line-height:1.55; color:var(--ink-2);}
.am-pied-cta{display:inline-flex; align-items:center; gap:8px; width:fit-content; padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--ink) !important; font-weight:650; font-size:13.5px; transition:border-color .15s, background-color .15s;}
.am-pied-cta:hover{border-color:var(--ink-3);}
.am-pied-nav{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px;}
.am-pied-nav h2{margin:0 0 12px; font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);}
.am-pied-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
.am-pied-nav a{display:inline-flex; align-items:center; min-height:34px; color:var(--ink-2); transition:color .15s;}
.am-pied-nav a:hover{color:var(--ink); text-decoration:underline; text-decoration-color:var(--tape); text-decoration-thickness:2px; text-underline-offset:4px;}
.am-pied-bas{border-top:1px solid var(--line);}
.am-pied-bas-in{
  max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px;
  padding:16px max(var(--am-gout), env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(var(--am-gout), env(safe-area-inset-left,0px));
  font-size:12.5px; color:var(--ink-3);
}
.am-pied-bas p{margin:0; max-width:80ch; line-height:1.5;}
.am-pied-lm{border:0; background:none; padding:6px 0; font:inherit; font-size:12.5px; color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; cursor:pointer;}
.am-pied-lm:hover{color:var(--ink);}
@media (max-width:820px){
  .am-pied-in{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:560px){
  .am-pied-nav{grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 16px;}
  .am-pied-nav > div:last-child{grid-column:1 / -1;}
  .am-pied-nav > div:last-child ul{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:16px;}
  .am-pied-nav a{min-height:44px;}
  .am-pied-bas-in{flex-direction:column; align-items:flex-start;}
}
/* le petit pied de l'appli (compte, page Leroy Merlin) prend la même allure */
.site-foot-in{gap:8px 18px; padding-block:18px calc(18px + env(safe-area-inset-bottom,0px)); font-size:12.5px;}
.foot-link{font-size:12.5px; padding:6px 0;}

/* ---------- 11. tactile : cibles d'au moins 44 px sous le doigt ---------- */
@media (pointer: coarse){
  .btn-sm{min-height:40px;}
  .topbar .btn{min-height:44px;}
  .topbar .seg{height:auto; min-height:44px; padding:2px; align-items:stretch;}
  .topbar .seg-btn{min-height:40px;}
  .topbar .brand{min-height:44px;}
  .topbar.in-atelier .btn-ghost[aria-label="Nouveau projet"], .topbar .ic-compte{min-width:44px;}
  .composer-tab{min-height:44px; padding-inline:16px;}
  .composer-options > summary{min-height:44px;}
  .idea-chip{min-height:38px;}
  .ex-tri .seg-btn, .om-tri .seg-btn, .auth-tabs .seg-btn, .compte-tabs .seg-btn{min-height:40px;}
  .community-search, .om-ia{min-height:46px; font-size:16px;}
  .om-mat{min-height:44px;}
  .om-choice{min-height:44px;}
  .icon-btn{min-width:40px; min-height:40px;}
  .step-nav .icon-btn{width:40px !important; height:40px !important;}
  .substep-head .icon-btn{width:36px !important; height:36px !important;}
  .tool-pill, .asm-seg{height:40px;}
  .tool-pill.ic-only{width:40px;}
  .float-chat .chat-send{width:40px; height:40px;}
  .float-chat .fc-form input{height:38px; font-size:16px;}
  .chat-form input{font-size:16px;}
  .ov-actions .btn{min-height:44px;}
  .foot-link{min-height:40px; display:inline-flex; align-items:center;}
  .am-abo-badge.am-abo-badge{min-height:44px;}
  .ex-cat-select select{min-height:44px;}
  .mdp-voir{min-height:40px;}
  .am-pied-logo, .am-pied-cta, .am-pied-lm{min-height:44px;}
  .am-pied-lm{display:inline-flex; align-items:center;}
  .asm-pick select{min-height:36px;}
  .ov-name{min-height:40px;}
}
/* téléphone tactile : les numéros de gestes du mètre ruban passent à 40 × 34, le ruban gagne 4 px */
@media (pointer: coarse) and (max-width:640px){
  :root{--tape-h:90px;}
  .tape-sub{flex-basis:40px; height:34px;}
  .stage-meta.stage-meta-btn{height:40px;}
}

/* ---------- 12. mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .example-card:hover, .example-card:active{transform:none;}
  .room-overlay, .room-modal, .am-abo-fond .am-abo{animation:none;}
}