/* Déco AI — refonte du 27/09/2026 : verre translucide façon iOS, iPhone d'abord.
   Gabarit : la page « Enceintes du salon » validée par Rudolph (~/appletv/gardien_enceintes.py) : fond blanc pur, halos colorés
   discrets, verre translucide, police du système, gros titres, états écrits en clair, boutons qui s'enfoncent sous le doigt.
   Une seule feuille, sans empilement de thèmes (l'ancienne en superposait trois). Ordinateur : bloc final. */
:root{
 color-scheme:light;
 --fond:#fff;--txt:#1c1c1e;--txt2:rgba(60,60,67,.6);--txt3:rgba(60,60,67,.3);--texte:rgba(60,60,67,.86);
 --verre:rgba(118,118,128,.10);--verre-fort:rgba(118,118,128,.16);--voile:rgba(255,255,255,.72);--voile-fort:rgba(255,255,255,.86);
 --bord:rgba(0,0,0,.05);--bordb:rgba(0,0,0,.08);--trait:rgba(60,60,67,.14);
 --ombre:0 8px 24px rgba(0,0,0,.06);--ombre-haute:0 12px 40px rgba(0,0,0,.14);
 --flou:blur(24px) saturate(180%);
 --h1:rgba(47,107,255,.09);--h2:rgba(180,77,255,.08);--h3:rgba(31,184,200,.06);
 --noir:#1c1c1e;--chaud:#b4541a;--rouge:#d70015;
 --r-grand:28px;--r:20px;--r-petit:14px;
 --marge:16px;--haut:env(safe-area-inset-top);--bas:env(safe-area-inset-bottom);
 --onglets:62px;--ressort:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--fond);color:var(--txt);font:17px/1.4 -apple-system,"SF Pro Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* halos : un calque fixe (background-attachment:fixed ne marche pas sur iPhone) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 50% at 12% 8%,var(--h1) 0%,transparent 70%),radial-gradient(65% 48% at 90% 94%,var(--h2) 0%,transparent 70%),radial-gradient(45% 35% at 60% 55%,var(--h3) 0%,transparent 70%)}
h1,h2,h3,p,dl,dd,figure{margin:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;padding:0;margin:0;cursor:pointer;-webkit-user-select:none;user-select:none}
button:disabled{cursor:default}
button,.bouton{transition:transform .16s var(--ressort),opacity .16s,background-color .2s}
button:active:not(:disabled),.bouton:active{transform:scale(.97);opacity:.8}
:focus-visible{outline:2px solid var(--noir);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
svg.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.secondaire{color:var(--txt2)}
.petit{font-size:13px}
.centre{text-align:center}
.erreur{color:var(--rouge);font-size:15px;margin:0 0 10px}.erreur:empty{display:none}

/* ---------- boutons ---------- */
.primaire{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;background:var(--noir);color:#fff;font-size:17px;font-weight:600;letter-spacing:-.2px;text-decoration:none;white-space:nowrap}
.primaire:disabled{opacity:.28}
.primaire .cout{font-weight:400;opacity:.75}
.verre-bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border-radius:999px;background:var(--verre);border:1px solid var(--bord);color:var(--txt);font-size:17px;font-weight:600;letter-spacing:-.2px;text-decoration:none;white-space:nowrap}
.large{width:100%}
.petit-bouton{min-height:44px;padding:0 18px;font-size:15px}
.lien{display:inline-flex;align-items:center;gap:2px;min-height:44px;color:var(--txt);font-size:17px;font-weight:600;text-decoration:none}
.petit-lien{font-size:15px;min-height:44px}
.lien .i{width:18px;height:18px;stroke-width:2.2}
.rond{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,var(--verre) 17.5px,transparent 18px);display:inline-flex;align-items:center;justify-content:center;color:var(--txt2);flex:none}   /* cercle de 36 visible, zone de 44 (règle 6) */
.rond .i{width:18px;height:18px;stroke-width:2.4}

/* ---------- en-tête et onglets ---------- */
.entete{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;height:calc(52px + var(--haut));padding:var(--haut) var(--marge) 0;transition:background-color .25s,box-shadow .25s}
.entete.defile{background:var(--voile);-webkit-backdrop-filter:var(--flou);backdrop-filter:var(--flou);box-shadow:0 .5px 0 var(--trait)}
.marque{display:inline-flex;align-items:center;gap:6px;font-size:22px;font-weight:700;letter-spacing:-.8px;color:var(--txt);text-decoration:none;min-height:44px}
.marque svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;margin-left:-3.17px}   /* trait gauche de la maison aligné au pixel sur le texte (mesuré le 27/09) */
.marque span{font-weight:400}
.compte{margin-left:auto;display:flex;align-items:center;gap:8px;position:relative}
.credits-pastille{min-height:44px;display:inline-flex;align-items:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.credits-pastille span{padding:6px 12px;border-radius:999px;background:var(--verre);border:1px solid var(--bord)}
.avatar-bouton{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--verre)}
.avatar.initiale{display:inline-flex;align-items:center;justify-content:center;background:var(--noir);color:#fff;font-weight:700;font-size:15px}
.compte-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;max-width:calc(100vw - 32px);padding:14px 16px;border-radius:var(--r-petit);background:var(--voile-fort);border:1px solid var(--bord);-webkit-backdrop-filter:var(--flou);backdrop-filter:var(--flou);box-shadow:var(--ombre-haute);display:flex;flex-direction:column;align-items:flex-start;gap:2px;z-index:40}
.compte-menu strong{font-size:15px}.compte-menu .petit{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compte-menu .lien{font-size:15px;min-height:38px;font-weight:500}
.onglets{position:fixed;z-index:30;left:50%;bottom:calc(var(--bas) + 10px);transform:translateX(-50%);display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--voile);border:1px solid var(--bord);-webkit-backdrop-filter:var(--flou);backdrop-filter:var(--flou);box-shadow:var(--ombre-haute)}
.onglet{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100px;height:56px;border-radius:999px;color:var(--txt2);font-size:13px;font-weight:600}
.onglet .i{width:24px;height:24px;stroke-width:1.7}
.onglet.actif{background:var(--verre-fort);color:var(--txt)}
.onglet.actif .i{stroke-width:2}
main{display:block;max-width:720px;margin:0 auto;padding:4px var(--marge) calc(var(--onglets) + var(--bas) + 40px);outline:0}
.toast{position:fixed;z-index:1000;left:50%;top:calc(var(--haut) + 10px);transform:translate(-50%,-14px);max-width:calc(100% - 32px);width:max-content;padding:12px 18px;border-radius:999px;background:var(--voile-fort);border:1px solid var(--bord);-webkit-backdrop-filter:var(--flou);backdrop-filter:var(--flou);box-shadow:var(--ombre-haute);font-size:15px;font-weight:500;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .3s var(--ressort)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.alerte-credits{position:fixed;z-index:35;left:50%;bottom:calc(var(--bas) + var(--onglets) + 22px);transform:translateX(-50%);display:flex;align-items:center;gap:4px;width:max-content;max-width:calc(100% - 32px);padding:4px 4px 4px 16px;border-radius:999px;background:var(--voile-fort);border:1px solid var(--bord);-webkit-backdrop-filter:var(--flou);backdrop-filter:var(--flou);box-shadow:var(--ombre-haute);font-size:15px;animation:monte .3s var(--ressort)}
.alerte-credits .lien{font-size:15px;min-height:44px;padding:0 6px}
@keyframes monte{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- écrans : titres communs ---------- */
.page-tete{margin:6px 0 18px}
.grand-titre{font-size:34px;line-height:1.1;font-weight:700;letter-spacing:-.7px}
.page-tete p{font-size:15px;line-height:1.4;color:var(--txt2);margin-top:6px}
.page-tete-ligne{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.page-tete-ligne .lien{min-width:44px;justify-content:flex-end}
.section-titre{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--txt2);margin:0 0 8px}
.retour{display:inline-flex;align-items:center;gap:0;min-height:44px;margin-left:-6px;color:var(--txt);font-size:17px}
.retour .i{width:24px;height:24px;stroke-width:2.2}
.pied{margin:40px 0 0;display:flex;justify-content:center;gap:16px;font-size:13px;color:var(--txt2)}
.pied .lien{font-size:13px;font-weight:500;color:var(--txt2);min-height:44px}
.vide{min-height:52dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:24px 8px}
.vide .rond-grand{width:72px;height:72px;border-radius:50%;background:var(--verre);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.vide .rond-grand .i{width:32px;height:32px;stroke-width:1.5}
.vide h1{font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.4px}
.vide p{color:var(--txt2);font-size:15px;max-width:300px}
.vide .primaire{margin-top:10px}
.squelette{border-radius:var(--r);background:var(--verre);animation:respire 1.4s ease-in-out infinite}
@keyframes respire{0%,100%{opacity:1}50%{opacity:.5}}

/* ---------- Créer (accueil) ---------- */
.avap{margin:2px 0 18px}
.avap-cadre{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre);background:var(--verre)}
.avap-cadre>div{position:relative}
.avap img{width:100%;aspect-ratio:4/3;object-fit:cover}
.etiquette{position:absolute;left:8px;bottom:8px;padding:2px 9px;border-radius:999px;background:var(--voile);-webkit-backdrop-filter:var(--flou);backdrop-filter:var(--flou);font-size:13px;font-weight:600;line-height:18px}
.avap figcaption{margin:8px 0 0;font-size:13px;color:var(--txt2)}
.avap-bas{margin:44px 0 0}
.surtitre{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--chaud)}
.creer h1{font-size:31px;line-height:1.08;font-weight:700;letter-spacing:-.9px;margin:8px 0 12px}
.creer-texte{font-size:17px;line-height:1.4;color:var(--texte)}
.creer-texte+.creer-texte{margin-top:8px}
.creer-note{font-size:13px;color:var(--txt2);margin-top:8px}
.creer-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:20px}
/* 27/09 : accueil = un écran ; l'espace libre se répartit à parts égales au-dessus du titre et au-dessus du bouton (aucun vide résiduel en bas) */
.creer{display:flex;flex-direction:column;min-height:calc(var(--vh,100dvh) - 160px)}.creer h1{margin-top:auto;padding-top:20px}   /* --vh = hauteur réellement visible (visualViewport), posée par ecrans.js : Brave, Chrome, Firefox iOS ont des barres plus hautes que Safari */   /* une action principale, pleine largeur ; boutons de même taille (Jam 6) */
.creer-credits{font-size:13px;color:var(--txt2);margin-top:12px;text-align:center}
.choix-piece{position:relative;display:flex}
.choix-piece select{width:100%;min-height:50px;padding:0 40px 0 20px;border-radius:999px;background:var(--verre);border:1px solid var(--bord);font-size:17px;font-weight:600;letter-spacing:-.2px;-webkit-appearance:none;appearance:none;color:var(--txt)}
.choix-piece .i{position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;stroke-width:2.4;color:var(--txt2);pointer-events:none}

/* ---------- Ambiance ---------- */
.segments{display:flex;padding:2px;border-radius:10px;background:var(--verre);margin:0 0 18px}
.segment{flex:1 1 0;min-height:44px;padding:0 6px;border-radius:8px;font-size:13px;font-weight:600;color:var(--txt);white-space:nowrap}
.segment.actif{background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
/* 02/10 : minmax(0,1fr) : deux colonnes toujours égales (un nom long, gardé sur une ligne, élargissait la sienne) */
.grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
.grille>*{align-self:start}   /* 02/10 : une carte est un bouton, qui centre son contenu : sans ceci, un sous-titre d'une ligne descendait l'image de 8 px */
/* 02/10 : « Pour votre salon » en tête de l'onglet Ambiances, puis « Toutes les ambiances » */
.conseil-note{margin:12px 0 0;font-size:15px;line-height:1.4;color:var(--texte)}
.conseil-note+.section-titre,.grille+.section-titre{margin-top:32px}
.carte{display:block;width:100%;text-align:left;color:inherit;text-decoration:none;position:relative}
.carte-image{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--verre)}
.carte-image img{width:100%;aspect-ratio:4/5;object-fit:cover}
.carte-nom{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;font-weight:600;line-height:1.25;margin:8px 0 0}   /* 02/10 : le nom en entier, à la ligne (règle 12) */
.carte-sous{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.3;color:var(--txt2);margin:2px 0 0}
.pastille-image{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:2px 9px;border-radius:999px;background:var(--voile);-webkit-backdrop-filter:var(--flou);backdrop-filter:var(--flou);font-size:13px;font-weight:600;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail-image{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-grand);box-shadow:var(--ombre);background:var(--verre)}
.detail-titre{font-size:28px;line-height:1.12;font-weight:700;letter-spacing:-.5px;margin:18px 0 4px}
.detail-sous{font-size:15px;color:var(--txt2)}
.detail-texte{font-size:17px;line-height:1.45;color:var(--texte);margin:14px 0 0}
.detail-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0;font-size:13px;color:var(--txt2)}
.palette{display:inline-flex;gap:5px}.palette span{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.detail-actions{margin:22px 0 28px}

/* ---------- listes groupées (façon Réglages) ---------- */
.groupe{border-radius:var(--r);background:var(--verre);overflow:hidden}
.ligne{position:relative;display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 16px}
.ligne+.ligne::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--trait)}
.ligne.avec-image+.ligne::before,.ligne+.ligne.avec-image::before{left:84px}
.produit{align-items:flex-start;padding:12px 16px}
.produit-photo{width:56px;height:56px;border-radius:12px;object-fit:contain;background:#fff;flex:none;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06)}
.produit-vide{width:56px;height:56px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;color:var(--txt2);font-size:13px;line-height:1.15;text-align:center;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06)}
.produit-infos{flex:1;min-width:0}
.produit-cat{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--txt2)}
.produit-nom{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;font-weight:600;line-height:1.3;margin-top:2px}
.produit-marque{display:block;font-size:13px;color:var(--txt2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.produit-note{display:block;font-size:13px;line-height:1.4;color:var(--texte);margin-top:2px}
/* 10/10 (Rudolph : « le prix et le vendeur de façon élégante ») : le prix en haut à droite (colonne du total), le vendeur = lien vers la page
   du produit, « Changer » à droite sous le prix */
.produit-haut{display:flex;align-items:baseline;gap:12px}
.produit-haut .produit-cat{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.produit-prix{margin-left:auto;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.produit-bas{display:flex;align-items:center;flex-wrap:wrap;gap:0 18px;margin-top:2px}
.produit-bas .lien{font-size:15px;min-height:44px;white-space:nowrap}
.produit-bas .lien .i{width:15px;height:15px;stroke-width:2}
.produit-vendeur{min-width:0;max-width:100%}
.produit-vendeur span{overflow:hidden;text-overflow:ellipsis}
.produit-bas [data-modifier]{margin-left:auto}
.affiliation{text-align:center;margin:28px 8px 0}
.total{justify-content:space-between;font-size:17px;font-weight:600}
.total strong{font-variant-numeric:tabular-nums}
.liste-note{font-size:13px;line-height:1.4;color:var(--txt2);margin:8px 0 0}

/* ---------- Mes projets ---------- */
.projet-carte{position:relative}
.retirer{position:absolute;z-index:2;top:-14px;left:-14px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;animation:apparait-rond .2s var(--ressort)}   /* rond rouge de 28, zone de 44 */
.retirer::before{content:"";width:28px;height:28px;border-radius:50%;background:linear-gradient(#fff,#fff) center/12px 2.5px no-repeat,var(--rouge);box-shadow:0 2px 8px rgba(0,0,0,.2)}
@keyframes apparait-rond{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.edition .projet-carte .carte-image{animation:tremble .3s ease-in-out infinite alternate}
@keyframes tremble{from{transform:rotate(-.6deg)}to{transform:rotate(.6deg)}}
.carte.courante .carte-image{box-shadow:0 0 0 2.5px var(--noir)}

/* ---------- Mes crédits ---------- */
.credits-solde{font-size:44px;font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.1}
.credits-manque{font-size:15px;font-weight:600;margin:8px 0 0}
/* 02/10 : trois offres en lignes iOS (même structure pour chacune) : ce qu'on reçoit à gauche, le prix à droite */
.offres-liste{margin:0}
.offre-ligne{width:100%;justify-content:space-between;text-align:left;min-height:64px;color:var(--txt)}
.offre-texte{display:flex;flex-direction:column;min-width:0}
.offre-texte strong{font-size:17px;font-weight:600;letter-spacing:-.2px}
.offre-prix{display:flex;flex-direction:column;align-items:flex-end;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.offre-prix small{font-size:13px;font-weight:400;color:var(--txt2)}
.credits-attente{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;margin:12px 0 0}
.abo{margin:16px 0 0}.abo strong{font-size:17px}
.lien-ligne{color:var(--txt);font-size:17px;font-weight:600;text-decoration:none}
.case-accord{display:flex;align-items:flex-start;gap:12px;padding:12px 0;font-size:15px;line-height:1.4;color:var(--texte)}
.case-accord input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--noir)}
.case-accord a{color:var(--txt);font-weight:600}
.pied-legal{flex-wrap:wrap;gap:0 16px;margin-top:24px}
.credits-page .section-titre{margin-top:24px}
.tarif .ligne{justify-content:space-between;font-size:15px}.tarif strong{font-variant-numeric:tabular-nums}

/* ---------- page projet ---------- */
.projet-tete{margin:6px 0 14px}
.projet-tete h1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-.6px}
.projet-tete p{font-size:17px;color:var(--txt2);margin-top:4px}
.bandeau{display:flex;align-items:center;gap:10px;padding:12px 16px;margin:0 0 14px;border-radius:var(--r-petit);background:var(--verre);font-size:15px;line-height:1.35}
.bandeau .roue{flex:none}
.grille.resultats .carte-image img{aspect-ratio:4/5}
.proposition .detail-cadre{position:relative;border-radius:var(--r-grand);overflow:hidden;box-shadow:var(--ombre);background:var(--verre)}
.proposition .detail-cadre img{width:100%;height:auto}
.prop-titre{font-size:22px;line-height:1.15;font-weight:700;letter-spacing:-.4px;margin:16px 0 0}
.justification{font-size:17px;line-height:1.45;color:var(--texte);margin:8px 0 0}
.gestes{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.proposition .achats{margin-top:20px}
.geste{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--verre);border:1px solid var(--bord);font-size:15px;font-weight:600;text-decoration:none;color:var(--txt);white-space:nowrap}
.geste .i{width:18px;height:18px;stroke-width:2}
.achats h2{font-size:22px;letter-spacing:-.3px;margin:0 0 10px}
.conseillers{margin:24px 0 0;padding:18px;border-radius:var(--r);background:var(--verre);text-align:center}
.conseillers p{font-size:15px;color:var(--texte)}
.conseillers .verre-bouton{margin:10px 0 6px;background:#fff}
/* pendant le calcul : la photo grisée et floue se dévoile peu à peu, puis l'image calculée apparaît */
.calcul{position:relative;overflow:hidden}
.calcul img{animation:devoile 24s cubic-bezier(.2,.6,.3,1) forwards;filter:grayscale(1) blur(16px) brightness(.9);opacity:.55}
@keyframes devoile{from{filter:grayscale(1) blur(16px) brightness(.9);opacity:.55}to{filter:grayscale(.35) blur(3px) brightness(1);opacity:.9}}
.calcul-voile{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);background-size:250% 100%;animation:reflet 1.8s linear infinite;pointer-events:none}
@keyframes reflet{from{background-position:150% 0}to{background-position:-100% 0}}
.calcul-texte{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:var(--voile);-webkit-backdrop-filter:var(--flou);backdrop-filter:var(--flou);font-size:13px;font-weight:600;white-space:nowrap}
.apparait{animation:apparait 1.2s ease-out}
@keyframes apparait{from{filter:grayscale(.35) blur(10px);opacity:.6}to{filter:none;opacity:1}}
.roue{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid var(--txt3);border-top-color:var(--noir);animation:roue .8s linear infinite;vertical-align:-3px}
@keyframes roue{to{transform:rotate(360deg)}}
.roue-claire{border-color:rgba(255,255,255,.35);border-top-color:#fff}

/* ---------- boîtes (connexion, à propos) ---------- */
dialog{color:var(--txt)}
dialog::backdrop{background:rgba(0,0,0,.25)}
.boite{position:fixed;width:min(400px,calc(100% - 32px));padding:28px 22px 22px;border:1px solid var(--bord);border-radius:var(--r-grand);background:var(--voile-fort);-webkit-backdrop-filter:var(--flou);backdrop-filter:var(--flou);box-shadow:var(--ombre-haute);text-align:center}
.boite h2{font-size:22px;letter-spacing:-.3px;margin:0 20px 10px}
.boite p{font-size:15px;line-height:1.45;color:var(--texte);margin:0 0 10px;text-align:left}
.boite .secondaire{text-align:center}
.boite-fermer{position:absolute;top:12px;right:12px}
.google-bouton{display:flex;justify-content:center;min-height:44px;margin:18px 0 8px}

/* ---------- la feuille de départ (plein écran) ---------- */
#wizard{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--fond);overflow:hidden}
#wizard::backdrop{background:var(--fond)}
#wizard::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 50% at 12% 8%,var(--h1) 0%,transparent 70%),radial-gradient(65% 48% at 90% 94%,var(--h2) 0%,transparent 70%)}
body:has(#wizard[open]){overflow:hidden}
.scene-fond{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:blur(40px) saturate(1.5);opacity:0;transition:opacity .6s;pointer-events:none}
.scene-fond.visible{opacity:.45}
.scene{position:absolute;left:0;right:0;top:0;height:calc(100% - var(--h-feuille,300px));display:flex;align-items:center;justify-content:center;width:100%;padding:calc(var(--haut) + 12px) var(--marge) 12px;cursor:pointer}
/* la photo en entier (Jam 3), coins arrondis sur l'image elle-même : la boîte de l'image = l'image visible */
.scene img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.16)}
.scene-vide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.scene-rond{width:112px;height:112px;border-radius:50%;background:var(--verre);border:1px solid var(--bord);display:flex;align-items:center;justify-content:center;color:var(--txt);box-shadow:var(--ombre)}
.scene-rond .i{width:46px;height:46px;stroke-width:1.4}
.scene.avec-photo .scene-vide{display:none}
.feuille{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:calc(100% - var(--haut) - 10px);padding:0 var(--marge) calc(var(--bas) + 14px);border-radius:var(--r-grand) var(--r-grand) 0 0;background:var(--voile);border-top:1px solid rgba(255,255,255,.6);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 -10px 40px rgba(0,0,0,.10);transition:height .32s var(--ressort);overscroll-behavior:contain}
.feuille[data-cran=auto]{height:auto}
.feuille[data-cran=mi]{height:66%}
.feuille[data-cran=plein]{height:calc(100% - var(--haut) - 10px)}
#poignee{flex:none;height:28px;width:100%;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}
#poignee{position:relative}
#poignee::before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}   /* zone de 44 points */
#poignee span{width:36px;height:5px;border-radius:3px;background:var(--txt3)}
.feuille[data-cran=auto] #poignee{visibility:hidden;height:14px}
.feuille-tete{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 0 10px;touch-action:none}
.feuille-tete h2{flex:1;min-width:0;font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-.35px;outline:none}
.retour-rond{color:var(--txt)}
.retour-rond .i{width:20px;height:20px;stroke-width:2.4}
.feuille-corps{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:8px;scrollbar-width:none}
.feuille-corps::-webkit-scrollbar,.fenetre-corps::-webkit-scrollbar{display:none}
.feuille[data-cran=auto] .feuille-corps{flex:none}
.feuille-pied{flex:none;padding-top:10px}
.feuille-ligne{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--txt2);margin:0 0 12px}
.feuille-ligne:empty{display:none}
.feuille-aide{font-size:13px;line-height:1.4;color:var(--txt2);margin:8px 0 0}
.feuille-aide:empty{display:none}
#etape-photo .primaire{margin-top:4px}
.alerte{padding:14px 16px;margin:0 0 14px;border-radius:var(--r-petit);background:rgba(255,149,0,.12)}
.alerte p{font-size:17px;line-height:1.4}
.alerte-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#etape-controle .alerte-actions{flex-direction:column;margin-top:4px}
#etape-controle .alerte-actions button{width:100%;min-height:50px;font-size:17px}
.portes{display:grid;gap:10px}
.porte{display:flex;align-items:center;gap:12px;width:100%;min-height:76px;padding:14px 14px 14px 18px;border-radius:var(--r);background:#fff;border:1px solid var(--bord);box-shadow:var(--ombre);text-align:left}
.porte>span{flex:1;display:flex;flex-direction:column;gap:3px}
.porte strong{font-size:17px;font-weight:600;letter-spacing:-.2px}
.porte small{font-size:15px;color:var(--txt2)}
.porte .chevron{width:20px;height:20px;stroke-width:2.2;color:var(--txt3)}
.bloc{margin:0 0 20px}
.bloc-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px}
.bloc-tete .section-titre{margin:0}
.plus-styles{margin:6px 0 0}
.vu-texte{display:block;width:100%;padding:14px 16px;border-radius:var(--r-petit);background:#fff;border:1px solid var(--bord);font-size:17px;line-height:1.4;text-align:left;color:var(--txt)}
.vu-texte.attente{color:var(--txt2)}
.vu-champ{display:block;width:100%;padding:13px 15px;border-radius:var(--r-petit);background:#fff;border:1.5px solid var(--noir);font-size:17px;line-height:1.45;resize:none;overflow:hidden}
.vu-champ:focus{outline:none}
.recap{background:#fff;border:1px solid var(--bord)}
.recap>div{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:8px 16px}
.recap>div+div::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--trait)}
.recap dt{font-size:15px;color:var(--txt2);flex:none}
.recap dd{font-size:15px;text-align:right;min-width:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.recap select{-webkit-appearance:none;appearance:none;border:0;background:none;min-height:44px;font-size:16px;font-weight:600;text-align:right;padding:6px 0;color:var(--txt)}
.sugg-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}
.grille-carte{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left}
.grille-carte img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-petit);background:var(--verre);transition:box-shadow .2s}
.grille-nom{font-size:14px;font-weight:600;line-height:1.25}
.grille-carte em{font-style:normal;font-size:13px;color:var(--chaud);font-weight:600;margin:-4px 0 0}
.coche{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:#fff}
.coche .i{width:16px;height:16px;stroke-width:3;opacity:0}
.grille-carte.choisie img{box-shadow:0 0 0 3px var(--noir)}
.grille-carte.choisie .coche{background:var(--noir);border-color:var(--noir)}
.grille-carte.choisie .coche .i{opacity:1}
#liste-lignes{background:#fff;border:1px solid var(--bord)}
.liste-ligne{position:relative;display:flex;align-items:center;gap:12px;min-height:68px;padding:8px 16px;cursor:pointer}
.liste-ligne+.liste-ligne::before{content:"";position:absolute;top:0;left:84px;right:0;height:.5px;background:var(--trait)}
.liste-ligne input{position:absolute;opacity:0;pointer-events:none}
.liste-ligne img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none;background:var(--verre)}
.liste-texte{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.liste-texte strong{font-size:16px;font-weight:600}
.liste-texte em{font-style:normal;font-size:13px;font-weight:600;color:var(--chaud)}
.liste-texte small{font-size:13px;color:var(--txt2)}
.liste-coche{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--txt3);flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.liste-coche .i{width:15px;height:15px;stroke-width:3;opacity:0}
.liste-ligne:has(input:checked) .liste-coche{background:var(--noir);border-color:var(--noir)}
.liste-ligne:has(input:checked) .liste-coche .i{opacity:1}
.liste-ligne:has(input:focus-visible){outline:2px solid var(--noir);outline-offset:-2px;border-radius:12px}

/* ---------- pastilles, cases, champs (feuille et fenêtres) ---------- */
.pastilles{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.pastille{min-height:44px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--bordb);font-size:15px;font-weight:500}
.pastille.on{background:var(--noir);border-color:var(--noir);color:#fff}
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 6px}
.case{display:flex;align-items:center;gap:10px;min-height:50px;padding:8px 12px;border-radius:var(--r-petit);background:#fff;border:1px solid var(--bordb);font-size:15px;font-weight:500;text-align:left;line-height:1.2}
.case i{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--txt3);display:flex;align-items:center;justify-content:center}
.case.on{border-color:var(--noir);box-shadow:inset 0 0 0 .5px var(--noir)}
.case.on i{background:var(--noir);border-color:var(--noir)}
.case.on i::after{content:"";width:5px;height:9px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.champ-titre{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--txt2);margin:0 0 8px}
.champ{display:block;width:100%;min-height:48px;padding:12px 14px;border-radius:var(--r-petit);background:#fff;border:1px solid var(--bordb);font-size:16px;color:var(--txt);margin:0 0 16px;-webkit-appearance:none;appearance:none}
textarea.champ{resize:none;min-height:76px;line-height:1.4}
.champ:focus{outline:none;border-color:var(--noir)}
.champ::placeholder{color:var(--txt3)}
.deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.deux small{display:block;margin:-10px 0 14px;font-size:13px;color:var(--txt2)}
.element-detail{margin:12px 0 0;padding:14px;border-radius:var(--r-petit);background:var(--verre)}
.element-detail strong{display:block;font-size:15px;margin:0 0 8px}
.element-detail .champ{margin:0}
.element-detail .feuille-aide{margin:0 0 10px}
.element-detail .lien{font-size:15px;min-height:44px;margin-top:4px}
/* 29/09 : réponse à une demande précise, sous l'objet (le plus proche, désolé, mot de vendeur) */
.reponse{margin:12px 0 0;padding:12px 0 0;border-top:.5px solid var(--trait)}
.reponse-texte{font-size:15px;line-height:1.4;color:var(--txt);margin:0}
.reponse .ligne.produit{margin:8px 0 0;padding:8px 0;min-height:0}
.reponse-choix{margin:8px 0 0}

/* ---------- la fenêtre (choix posés par-dessus) ---------- */
dialog.fenetre{width:min(520px,calc(100% - 24px));max-height:calc(100dvh - 40px);padding:0 calc(var(--marge) - 1px) 16px;border:1px solid var(--bord);border-radius:var(--r-grand);background:var(--voile-fort);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:var(--ombre-haute);flex-direction:column}
dialog.fenetre[open]{display:flex}
dialog.fenetre::backdrop{background:rgba(0,0,0,.22)}
.fenetre-tete{flex:none;display:flex;align-items:center;gap:10px;min-height:58px;padding-top:4px}
.fenetre-tete h2{flex:1;min-width:0;font-size:20px;font-weight:700;letter-spacing:-.35px;outline:none;line-height:1.2}
#fenetre-intro{margin:0 0 14px;font-size:15px;line-height:1.4}
.fenetre-corps{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;min-height:0;scrollbar-width:none}
.fenetre-message{font-size:15px;line-height:1.4;color:var(--chaud);margin:10px 0 0}
.fenetre-message:empty{display:none}
.fenetre-pied{flex:none;padding-top:12px}
.fenetre-pied .feuille-aide{margin:0 0 8px}
.fenetre-ligne{font-size:15px;line-height:1.4;color:var(--texte);margin:0 0 14px}

dialog.arrivee{pointer-events:none}
@keyframes feuille-monte{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fondu{from{opacity:0}to{opacity:1}}
#wizard[open] .feuille{animation:feuille-monte .38s var(--ressort)}
dialog.fenetre[open]{animation:feuille-monte .32s var(--ressort)}
.boite[open]{animation:fondu .2s ease-out}
main.entree>*{animation:fondu .22s ease-out}

@media(max-width:699px){
 dialog.fenetre{margin:auto 0 0;width:100%;max-width:none;max-height:calc(100dvh - var(--haut) - 20px);border-radius:var(--r-grand) var(--r-grand) 0 0;border-bottom:0;padding-bottom:calc(var(--bas) + 14px)}
}
@media(max-width:360px){
 .creer h1{font-size:28px}
 .onglet{width:88px}
}

/* ---------- ordinateur et tablette ---------- */
@media(min-width:700px){
 :root{--marge:28px}
 .entete{max-width:1080px;margin:0 auto}
 main{max-width:1080px}
 .creer,.detail-page,.proposition,.credits-page,.projet-tete{max-width:620px;margin-left:auto;margin-right:auto}
 main>.retour{display:flex;max-width:620px;margin-left:auto;margin-right:auto}
 .grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
 .grille.resultats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
 .feuille{left:auto;right:24px;bottom:24px;width:440px;max-height:calc(100% - 48px);border-radius:var(--r-grand);border:1px solid var(--bord);padding-bottom:18px}
 .feuille[data-cran=mi],.feuille[data-cran=plein]{height:calc(100% - 48px)}
 .scene{right:488px;height:100%}
 #poignee{visibility:hidden;height:14px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .calcul img{filter:grayscale(.5) blur(6px);opacity:.7}
}

/* 27/09 : menu « … » d'une proposition */
.geste-plus{width:44px;padding:0;justify-content:center;font-size:22px;letter-spacing:1px}
.menu-plus{display:flex;flex-direction:column;gap:8px}.menu-plus .geste{justify-content:center;width:100%;white-space:normal;text-align:center}.menu-plus .liste-note{text-align:center;margin:0 0 4px}

/* 27/09 : avant/après en une image, curseur de comparaison */
.compare{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre);background:var(--verre);width:100%;height:auto;-webkit-user-select:none;user-select:none}
/* accueil : l'image absorbe l'espace disponible (jusqu'au 4:3) et se réduit d'abord sur un écran court (Brave, Chrome : barres hautes) ; texte et bouton gardent leur taille */
.creer .avap{display:flex;flex-direction:column;flex:1 1 0;min-height:150px;max-height:calc((100vw - 32px) * .75)}.creer .compare{flex:1;min-height:0}   /* pleine largeur ; hauteur 4:3 plafonnée à 35dvh : dans Safari (barres) l'image se raccourcit pour que le bouton reste au-dessus de la capsule ; en app installée, sans effet */
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:auto}
/* résultat : hauteur libre calée sur l'image générée (l'« après » reste dans le flux et donne la hauteur ; l'« avant » se superpose) */
.compare-libre{height:auto}
.compare-libre .cmp-apres{position:relative;inset:auto;height:auto}
.prop-compare{border-radius:var(--r-grand);margin:0 0 2px}
.cmp-avant{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp-ligne{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.35);pointer-events:none}
.cmp-poignee{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:#fff;color:#1c1c1e;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.cmp-curseur{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;-webkit-appearance:none;appearance:none;cursor:ew-resize;touch-action:pan-y;background:none}
.cmp-e-apres{left:auto;right:8px}
/* 10/10 (Rudolph, revue Jam) : le compteur de crédits gonfle légèrement quand il monte (noyau.js animerCompteurs) */
.credits-solde{transform-origin:left center}
.monte{animation:gonfle .9s cubic-bezier(.2,.8,.2,1)}
@keyframes gonfle{0%{transform:scale(1)}30%{transform:scale(1.08)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.monte{animation:none}}
.credits-page .page-tete-ligne{align-items:center}
.credits-page .page-tete-ligne .rond{margin-right:-4px}   /* le cercle visible (36) sur la marge de 16, comme le titre */
/* 10/10 11h30 : nombre de crédits choisi dans la fenêtre d'achat (− / + par 50, prix à côté) */
.pas-credits{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px -4px}   /* cercles visibles (36) sur la marge du texte */
.pas-credits .rond{font-size:26px;font-weight:400;line-height:1;color:var(--txt)}
.pas-credits .rond:disabled{opacity:.3}
.pas-valeur{display:flex;flex-direction:column;align-items:center;gap:2px;font-variant-numeric:tabular-nums;margin:0}
.pas-valeur strong{font-size:28px;font-weight:700;letter-spacing:-.5px}
.pas-valeur span{font-size:17px;color:var(--txt2)}
.pas-note{text-align:center;margin-top:0}

/* ---------- 10/10/2026, revue Jam 1f5896ba de Rudolph ---------- */
/* avant/après : la pastille du côté où va la ligne s'efface (ecrans.js poserCurseur) */
.cmp-e-avant{opacity:var(--oa,1);transition:opacity .12s linear}.cmp-e-apres{opacity:var(--op,1);transition:opacity .12s linear}
/* Mes projets : plus de tremblement en mode Modifier ; la carte retirée part vers le bas, les autres remontent (noyau.js glisserCartes) */
.edition .projet-carte .carte-image{animation:none}
.projet-carte.part{transition:transform .26s cubic-bezier(.4,0,1,1),opacity .26s ease-in;transform:translateY(64px) scale(.9);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.projet-carte.part{transition:none}}
/* message éphémère avec un geste (« Annuler ») */
.toast.actif{pointer-events:auto;display:flex;align-items:center;gap:14px;padding:4px 8px 4px 18px}
.toast-action{min-height:44px;padding:0 10px;font-size:15px}
/* titre d'une proposition : avis et enregistrement au bout de la ligne */
.prop-titre-ligne{display:flex;align-items:center;justify-content:space-between;gap:8px}
.prop-titre-ligne .prop-titre{margin:0;min-width:0}
.prop-actions{display:flex;flex:none;gap:0;margin-right:-10px}   /* le pictogramme visible tombe sur la marge du texte */
.rond-action{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--txt2);background:none}
.rond-action .i{width:22px;height:22px;stroke-width:1.8}
.rond-action.actif{color:var(--txt)}.rond-action.actif .i{fill:currentColor;fill-opacity:.12;stroke-width:2.1}
/* liste d'achats : menu des couleurs vendues (le menu de l'iPhone s'ouvre au toucher) */
.coloris{position:relative;display:inline-flex;align-items:center;gap:2px;min-height:44px;font-size:15px;font-weight:600;color:var(--txt);white-space:nowrap}
.coloris .i{width:15px;height:15px;stroke-width:2.2}
.coloris select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;-webkit-appearance:none;appearance:none}
.coloris-photo{display:block;width:160px;height:160px;object-fit:contain;margin:4px auto 8px;border-radius:12px;background:#fff}
/* D'autres propositions : « Préciser » sur demande, « Garder » par élément */
.preciser{font-size:15px;gap:6px}.preciser .i{width:17px;height:17px}
.garder{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.garder-bouton{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--bord);background:var(--verre);font-size:15px;font-weight:500;color:var(--txt)}
.garder-bouton .i{width:16px;height:16px;stroke-width:2.4;opacity:0}
.garder-bouton.choisi{background:var(--noir);color:#fff;border-color:var(--noir)}.garder-bouton.choisi .i{opacity:1}
/* Mes crédits : « Une proposition » et sa précision ; la note du remboursement plus bas, à voir en descendant */
.tarif .ligne>span{display:flex;flex-direction:column;gap:2px}
.note-bas{margin-top:40px;text-align:center}
/* 10/10 : accueil. Le texte de Rudolph (« des styles dignes des plus grands designers… le bon goût ne s'achète pas, il s'imagine ») est plus
   long : la seconde phrase, un engagement plutôt qu'une consigne, passe en note (15 px, gris), et l'accueil tient encore sur un écran à
   375 × 662 (Brave, Chrome iOS) au lieu de défiler et de passer sous la capsule */
.creer-texte+.creer-texte{font-size:15px;line-height:1.38;color:var(--txt2);margin-top:10px}
/* 10/10 18h40 : accueil, image plus grande (jusqu'à 4:3,3 sur un grand iPhone), la phrase de Rudolph sous le bouton */
.creer .avap{max-height:calc((100vw - 32px) * .82)}
.creer-engagement{font-size:15px;line-height:1.4;color:var(--txt2);margin:18px 0 8px}
@media(min-width:700px){.creer .avap{max-height:none}.creer-engagement{max-width:620px;margin-left:auto;margin-right:auto}}
/* le premier écran reste net (image, titre, phrase, bouton) ; l'engagement commence sous la capsule et se lit en descendant */
@media(max-width:699px){.creer-engagement{margin-top:104px}}   /* 30 px : la première ligne dépassait de part et d’autre de la capsule */

/* 12/10 : le petit choix de langue en bas de l'accueil (langue.js) : discret, chaque langue dans sa langue, 44 pt touchables */
.langues{display:flex;justify-content:center;gap:6px;margin:20px 0 8px}
.langue{min-height:44px;padding:0 16px;border-radius:22px;font-size:15px;color:var(--txt2);background:transparent;border:0}
.langue[aria-pressed="true"]{color:var(--texte);font-weight:600;background:rgba(0,0,0,.05)}