/* AIME — component styles copied from LEMONDEAIME src/styles.css (main@f2d2b35). Colours come from tokens.css (--encre, --fond, --carte, --trait, --trait-2, --doux, --dock, --dock-trait). */
:root { --nacre: radial-gradient(circle at 32% 30%, #ffffff 0%, #d9e8ff 22%, #c9b8ff 48%, #ffd6ec 72%, #b9f0e4 100%); --marge: clamp(16px, 4vw, 56px); font-family: 'Inter Tight', system-ui, sans-serif; color: var(--encre); background: var(--fond); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin: 0; background: var(--fond); }
a { color: var(--encre); }
a:hover { color: var(--encre-3); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
img, video { display: block; max-width: 100%; }
.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; }
.lien-evitement { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 16px; border-radius: 10px; background: var(--encre); color: #fff; }
.lien-evitement:focus { top: 12px; color: #fff; }

/* en-tête : le dock du haut, seul, au centre (Mon espace et A+ sont dans le menu AIME®) */
.tete { position: sticky; top: 0; z-index: 30; display: flex; justify-content: center; padding: 14px clamp(8px, 2vw, 24px) 0; pointer-events: none; }
.dock-haut { pointer-events: auto; position: relative; z-index: 1; min-width: 0; max-width: 100%; display: flex; flex-direction: column; padding: 7px; border-radius: 18px; background: var(--carte); border: 1px solid var(--trait); box-shadow: 0 14px 36px rgba(11,11,12,.12); transition: border-radius .2s; }
.dock-ligne { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dock-ligne .rangee { flex: 1 1 auto; }
.dock-haut.ouvert { width: min(860px, calc(100vw - 24px)); border-radius: 22px; box-shadow: 0 30px 80px rgba(11,11,12,.22); }
.tete-voile { position: fixed; inset: 0; z-index: 0; pointer-events: auto; background: rgba(11,11,12,.14); }
.carre, .carre-orbe { flex: none; width: 48px; height: 48px; padding: 0; justify-content: center; }
.carre-orbe { border: 0; border-radius: 12px; background: transparent; display: flex; align-items: center; }
.carre-orbe:hover, .carre-orbe[aria-expanded="true"] { background: var(--doux); }
.dock-bloc { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.dock-bloc-corps { max-height: calc(100vh - 250px); overflow-y: auto; padding: 14px 10px 6px; border-top: 1px solid var(--trait); }
.mini-dock { display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: 14px; background: var(--dock); overflow-x: auto; scrollbar-width: none; }
.mini-dock::-webkit-scrollbar { display: none; }
.separateur.sombre { background: var(--dock-trait); }
.bloc-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 24px; }
.bloc-menu a, .bloc-menu button { display: block; padding: 4px 0; border: 0; background: none; color: var(--encre); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.bloc-menu a:hover, .bloc-menu button:hover { color: var(--encre-3); }
.bloc-menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.bloc-note { margin: 14px 0 0; font-size: 15px; color: var(--encre-2); }
.entrer-bloc { display: grid; gap: 12px; margin-top: 14px; }
.entrer-lien { display: grid; gap: 6px; }
.entrer-lien label { font-size: 14px; font-weight: 600; }
.entrer-ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.entrer-ligne .champ { flex: 1 1 220px; width: auto; }
.entrer-ligne .bouton { flex: 0 0 auto; min-height: 52px; }
.entrer-autres { display: flex; gap: 8px; flex-wrap: wrap; }
.entrer-alt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid #BDBDB8; background: var(--carte); color: var(--encre); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; flex: 1 1 200px; }
.entrer-alt:hover:not(:disabled) { border-color: var(--encre); }
.entrer-etat { margin: 0; min-height: 22px; font-size: 15px; font-weight: 600; }
.entrer-etat.erreur { color: #A3122A; }
.entrer-etat:empty { min-height: 0; margin-top: -12px; }
.entrer-bloc.compact .champ { height: 48px; }
.entrer-bloc.compact .entrer-ligne .bouton { min-height: 48px; }
.bloc-dossiers { list-style: none; margin: 14px 0 0; padding: 0 0 4px; display: flex; gap: 10px; overflow-x: auto; }
.bloc-dossiers a { display: flex; flex-direction: column; gap: 4px; width: 170px; padding: 14px; border-radius: 14px; border: 1px solid var(--trait); text-decoration: none; color: var(--encre); }
.bloc-dossiers a:hover { background: var(--doux); color: var(--encre); }
.bloc-dossiers b { margin-top: 6px; font-size: 16px; font-weight: 600; }
.bloc-dossiers span { font-size: 13px; color: var(--encre-3); }
.halo-mode { flex: none; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px 0 12px; border-radius: 11px; border: 1px solid var(--dock-trait); background: transparent; color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; }
.halo-mode:hover { background: rgba(255,255,255,.1); }
.halo-mode[aria-pressed="true"] { background: #fff; color: var(--encre); font-weight: 700; }
.halo { width: 18px; height: 18px; border-radius: 50%; background: #0B0B0C; }
.halo-mode[aria-pressed="true"] .halo { background: #fff; }
.carre-sombre { width: 50px; padding: 0; justify-content: center; }
.remonter { width: 50px; padding: 0; justify-content: center; }
.dock-haut .rangee { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dock-haut .rangee::-webkit-scrollbar { display: none; }
.outil { flex: none; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 12px; border: 0; background: transparent; color: var(--encre); font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.outil:hover { background: var(--doux); color: var(--encre); }
.outil[aria-current="page"] { font-weight: 700; }
.separateur { flex: none; width: 1px; height: 30px; background: var(--trait); margin: 0 2px; }
.marque { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.marque sup { font-size: .38em; font-weight: 400; vertical-align: .95em; margin-left: .06em; }
.orbe { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--nacre); box-shadow: inset 0 0 0 1px rgba(11,11,12,.12); }
.loupe { width: 48px; justify-content: center; padding: 0; background: var(--doux); }
.menu-aime { position: absolute; z-index: 2; top: calc(100% + 10px); left: 0; width: min(320px, calc(100vw - 24px)); padding: 10px; border-radius: 18px; background: var(--carte); border: 1px solid var(--trait); box-shadow: 0 24px 60px rgba(11,11,12,.2); list-style: none; margin: 0; }
.menu-aime a, .menu-aime button { display: flex; align-items: center; width: 100%; min-height: 46px; padding: 0 12px; border-radius: 10px; border: 0; background: transparent; font-size: 17px; text-decoration: none; text-align: left; }
.menu-aime a:hover, .menu-aime button:hover { background: var(--doux); }

/* dock du bas : les lieux de la page */
.dock-bas { position: fixed; left: 0; right: 0; bottom: 18px; z-index: 20; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.orbe-dock { flex: none; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 11px; background: #0B0B0C; display: flex; align-items: center; justify-content: center; }
.orbe-dock:hover { background: #000; }
.orbe-dock:focus-visible, .orbe-choix:focus-visible { outline-color: #fff; }
.orbe-choix { flex: none; width: 50px; height: 50px; padding: 0; border-radius: 12px; border: 1px solid transparent; background: transparent; display: flex; align-items: center; justify-content: center; }
.orbe-choix:hover { background: #2A2A28; }
.orbe-choix[aria-pressed="true"] { border: 2px solid #fff; background: #2A2A28; }
.reglage { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--dock-trait); background: transparent; color: #fff; cursor: pointer; }
.reglage:hover { background: #2A2A28; }
.reglage[aria-pressed="true"] { background: #2A2A28; border-color: #fff; }
.reglage:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.picto-aa { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.reglage-val { font-size: 13px; font-weight: 600; opacity: .85; }
.coche { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,.7); display: inline-flex; align-items: center; justify-content: center; }
.coche.on { background: #fff; border-color: #fff; color: #0B0B0C; }
.confort { color: var(--encre); }
.opt { display: flex; align-items: center; justify-content: center; min-width: 64px; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid #CFCFCB; background: #fff; color: var(--encre); font-size: 15px; font-weight: 500; }
.opt[aria-pressed="true"] { border: 2px solid var(--encre); background: var(--encre); color: #fff; font-weight: 700; }
@media (max-width: 720px) { .dock-haut.ouvert { width: calc(100vw - 16px); } .dock-bloc-corps { max-height: calc(100vh - 230px); } }
/* Mon confort, appliqué à tout le site */
html.aere p, html.aere span, html.aere a, html.aere li, html.aere label, html.aere button, html.aere h3 { letter-spacing: .05em !important; word-spacing: .14em !important; line-height: 1.75 !important; }
html.aere h1, html.aere h2 { letter-spacing: -0.02em !important; line-height: 1.02 !important; }
html.contraste main, html.contraste .pied { filter: contrast(1.35); }
html.contraste a { text-decoration-thickness: 2px; }
html.contraste .opt, html.contraste .bouton { outline: 1.5px solid var(--encre); }
html.calme { scroll-behavior: auto; }
html.calme *, html.calme *::before, html.calme *::after { transition: none !important; animation: none !important; }
.dock-bas > div { pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: 16px; background: var(--dock); border: 1px solid var(--dock-trait); box-shadow: 0 12px 32px rgba(0,0,0,.28); max-width: 100%; overflow-x: auto; }
.lieu { flex: none; display: flex; align-items: center; height: 50px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--dock-trait); background: transparent; color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.lieu:hover { background: rgba(255,255,255,.12); color: #fff; }
.lieu[aria-current="true"] { background: #fff; color: var(--encre); border: 2px solid #fff; font-weight: 700; }
.lieu-case { gap: 8px; cursor: pointer; font-weight: 500; }
.lieu-case input { width: 18px; height: 18px; margin: 0; accent-color: #fff; }
.lieu:focus-visible { outline-color: #fff; }


/* typographie */
.surtitre { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
.signature { margin: 0; font-size: clamp(52px, 11vw, 196px); line-height: .86; font-weight: 900; letter-spacing: -0.035em; text-transform: uppercase; white-space: pre-line; }
.titre { margin: 0; font-size: clamp(36px, 5vw, 68px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; }
.chapeau { margin: 26px 0 0; max-width: 42ch; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45; color: var(--encre-2); }
.texte { margin: 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--encre-2); }
.section { padding: 140px var(--marge); border-top: 1px solid var(--trait); }
.section.blanche { background: var(--carte); }
.grille-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px 48px; }
.bouton { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 13px; border: 1px solid var(--encre); background: var(--carte); color: var(--encre); font-size: 16px; font-weight: 600; text-decoration: none; }
.bouton.noir { background: var(--encre); color: #fff; }
.bouton.noir:hover { color: #fff; opacity: .9; }
.champ { width: 100%; height: 52px; padding: 0 14px; border-radius: 12px; border: 1px solid #BDBDB8; background: var(--carte); font: inherit; font-size: 17px; color: var(--encre); }

/* grand visuel */
.visuel { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #111; }
.visuel img, .visuel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visuel::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)); pointer-events: none; }
.visuel figcaption { position: absolute; z-index: 1; left: clamp(16px, 3vw, 40px); right: clamp(16px, 3vw, 40px); bottom: clamp(18px, 3vw, 36px); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #fff; }
.visuel .accroche { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.visuel .legende { display: block; margin-top: 6px; font-size: clamp(22px, 2.6vw, 38px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.visuel .son { height: 48px; padding: 0 16px; border-radius: 24px; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.1); color: #fff; font-weight: 600; }

/* cartes de projets */
.cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 56px 28px; }
.carte-projet { display: block; text-decoration: none; color: var(--encre); }
.carte-projet .cadre { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #E9E9E5; position: relative; }
.carte-projet img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.carte-projet:hover img { transform: scale(1.04); }
.carte-projet h3 { margin: 16px 0 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.025em; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.carte-projet h3 small { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); }
.carte-projet p { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--encre-2); max-width: 46ch; }
.bientot { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: var(--encre); color: #fff; letter-spacing: 0; text-transform: none; }

/* pied de page */
.pied { padding: 96px var(--marge) 132px; border-top: 1px solid var(--trait); }
.pied nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 36px 24px; }
.pied h2 { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
.pied ul { list-style: none; margin: 0; padding: 0; font-size: 18px; font-weight: 600; }
.pied li { min-height: 40px; display: flex; align-items: center; gap: 8px; }
.pied a { text-decoration: none; }
.pied a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pied .bas { margin-top: 56px; padding-top: 24px; border-top: 2px dotted #BDBDB8; display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; font-size: 15px; color: var(--encre-2); }
@media (max-width: 1080px) { .g44 { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 620px) { .g44-nom, .g44-etape { display: none !important; } }

/* le grand visuel d'entrée de l'accueil : la photo plein cadre, le nom en blanc */
.hero { position: relative; min-height: calc(100svh - 104px); border-radius: 24px; overflow: hidden; background: #111; color: #fff; display: flex; align-items: flex-end; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.15) 100%); pointer-events: none; }
.hero-contenu { position: relative; z-index: 1; width: 100%; padding: clamp(28px, 5vw, 72px) clamp(20px, 4vw, 64px) calc(clamp(36px, 5vw, 72px) + 76px); }  /* le dock du bas passe par-dessus : on lui laisse sa place */
.hero-titre { font-size: clamp(110px, 24vw, 400px); line-height: .8; letter-spacing: -0.035em; color: #fff; }
.hero-sous-titre { margin: clamp(14px, 2vw, 26px) 0 0; max-width: 30ch; font-size: clamp(20px, 2.4vw, 36px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.hero a { color: #fff; }
.hero a:hover { color: #E2E2DE; }
.hero :focus-visible { outline-color: #fff; }

/* les studios sur une seule ligne, qui défile à l'horizontale */
.cartes.ligne { display: flex; grid-template-columns: none; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--marge) 24px; margin: 0 calc(-1 * var(--marge)); scrollbar-width: thin; }
.cartes.ligne > li { flex: 0 0 min(82vw, 440px); scroll-snap-align: start; scroll-margin-left: var(--marge); }
.cartes.ligne:focus-visible { outline-offset: -2px; }
.cartes.ligne.defile { scroll-snap-type: none; }
@keyframes orbe-tourne { to { transform: rotate(360deg); } }
.orbe-tourne { animation: orbe-tourne 6s linear infinite; }

/* la loupe : chercher dans tout AIME, et le plan du site, sous le dock */

.recherche-lien { display: flex; flex-direction: column; gap: 1px; padding: 9px 10px; border-radius: 10px; text-decoration: none; font-size: 16px; }
.recherche-lien span { font-size: 13.5px; color: var(--encre-3); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherche-lien:hover, .recherche-lien:focus-visible { background: var(--doux); }

/* la visite guidée : le Point, le cadre autour de ce qu'il montre, sa bulle */
.visite-point { position: fixed; z-index: 60; width: 34px; height: 34px; border-radius: 50%; background: var(--nacre); box-shadow: 0 0 0 3px #0B0B0C, 0 10px 26px rgba(11,11,12,.35); pointer-events: none; }
.visite-cadre { position: fixed; z-index: 58; border-radius: 16px; border: 2px solid #0B0B0C; box-shadow: 0 0 0 9999px rgba(11,11,12,.28); pointer-events: none; }
.visite-bulle { position: fixed; z-index: 61; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--trait); box-shadow: 0 24px 60px rgba(11,11,12,.28); }
.visite-invite { position: fixed; z-index: 40; left: clamp(12px, 2vw, 24px); bottom: 96px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: min(520px, calc(100vw - 24px)); padding: 14px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--trait); box-shadow: 0 18px 48px rgba(11,11,12,.22); }
.visite-invite .visite-point { width: 30px; height: 30px; box-shadow: 0 0 0 2px #0B0B0C; }

/* l'aperçu du studio : une info, une seule fois */
.studio-demo { margin-top: 48px; padding: clamp(16px, 3vw, 36px); border-radius: 24px; background: #ECECE8; border: 1px solid var(--trait); }
.studio-papier { min-height: 300px; padding: clamp(24px, 4vw, 44px); border-radius: 6px; background: #fff; box-shadow: 0 1px 0 #E2E2DE, 0 18px 40px rgba(11,11,12,.10); font-size: 17px; color: var(--encre); }
mark.info-remplie { background: #ECE4FF; color: inherit; padding: 0 .2em; border-radius: 4px; box-shadow: inset 0 -2px 0 #A98BE0; transition: background .3s; }
mark.info-remplie.vient { background: #FFE9A8; box-shadow: inset 0 -2px 0 #C79A1E; }
@media (prefers-reduced-motion: reduce) { mark.info-remplie { transition: none; } }


/* le grand mot de chaque section de l'accueil (maquette) : capitales, 600, approche serrée */
.grand-mot { margin: 0; font-size: clamp(52px, 10vw, 168px); line-height: .86; font-weight: 600; letter-spacing: -0.045em; text-transform: uppercase; text-wrap: balance; }

/* L'Espace en aperçu : un écran avec ses dossiers */
.ecran { margin-top: 8px; border-radius: 22px; background: var(--carte); border: 1px solid var(--trait); box-shadow: 0 40px 100px rgba(11,11,12,.14); overflow: hidden; text-align: left; }
.ecran-haut { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--trait); }
.ecran-verbes { display: flex; gap: 6px; }
.ecran-verbes span { padding: 8px 12px; border-radius: 10px; background: var(--doux); font-size: 14px; font-weight: 500; }
.ecran-corps { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 560px; }
.ecran-dossiers { list-style: none; margin: 0; padding: 12px; border-right: 1px solid var(--trait); background: #FAFAF8; }
.ecran-dossiers button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--encre); font-size: 15px; font-weight: 500; text-align: left; white-space: nowrap; }
.ecran-dossiers button:hover { background: var(--doux); }
.ecran-dossiers button[aria-current="true"] { background: var(--encre); color: #fff; font-weight: 700; }
.ecran-contenu { padding: clamp(16px, 2.4vw, 28px); min-width: 0; }
.ecran-liste { list-style: none; margin: 16px 0 0; padding: 0; }
.ecran-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; padding: 8px 4px; border: 0; border-top: 1px solid #ECECE8; background: transparent; color: var(--encre); text-align: left; }
.ecran-tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 20px 16px; }
.ecran-tuiles.petites { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.ecran-tuile { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: var(--encre); text-align: left; }
button.ecran-tuile:hover img, button.ecran-tuile:hover { opacity: .92; }
.ecran-bascule { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font-size: 14px; font-weight: 500; color: var(--encre); }
.ecran-bascule[aria-pressed="true"] { background: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
@media (max-width: 760px) {
  .ecran-corps { grid-template-columns: 1fr; min-height: 0; }
  .ecran-dossiers { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--trait); padding: 10px; }
  .ecran-dossiers button { width: auto; }
  .ecran-verbes { display: none; }
}
/* le rond du profil, à droite de la loupe */
.profil { width: 48px; padding: 0; justify-content: center; }
.avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--encre); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
img.avatar { background: var(--doux); }
.profil[aria-current="page"] .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--encre); }
.rangee-puces { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.rangee-puces::-webkit-scrollbar { display: none; }

/* La Métamorphose : un panneau à droite, l'accueil change en direct derrière */
.metamorphose { position: fixed; z-index: 40; top: 92px; right: 16px; bottom: 92px; width: min(440px, calc(100vw - 32px)); overflow-y: auto; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #DCDCD8; box-shadow: 0 30px 80px rgba(11,11,12,.25); color: var(--encre); }
.meta-bloc { margin: 18px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid #E6E6E2; min-width: 0; }
.meta-bloc legend { padding: 0; margin-bottom: 10px; font-size: 16px; font-weight: 700; float: left; width: 100%; }
.meta-bloc legend + * { clear: both; }
.meta-univers { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: transparent; text-align: left; font-size: 14px; font-weight: 500; color: var(--encre); }
.meta-univers img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.meta-univers[aria-pressed="true"] img { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--encre); }
.meta-univers[aria-pressed="true"] { font-weight: 700; }
.opt:disabled { opacity: .35; cursor: default; }
.bouton-meta { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 8px; border-radius: 999px; border: 1px solid var(--encre); background: var(--encre); color: #fff; font-size: 16px; font-weight: 600; }
.bouton-meta:hover { background: #2A2A28; }
@media (max-width: 720px) { .metamorphose { top: auto; left: 8px; right: 8px; bottom: 78px; width: auto; max-height: 72vh; padding: 18px; } }
.section.premiere { border-top: 0; }
.pz-import:hover { background: var(--doux) !important; }

/* Le Studio sur l'accueil : le grand carrousel et la bande « Brodez votre mariage ensemble » */
.carrousel-ecran { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #F5F1E6; box-shadow: 0 40px 100px rgba(11,11,12,.16); border: 1px solid var(--trait); }
.carrousel-ecran img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .8s ease; }
.carrousel-legende { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.carrousel-points { display: flex; gap: 6px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; }
.carrousel-points button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--trait-2); background: #fff; color: var(--encre); font-size: 14px; font-weight: 500; }
.carrousel-points button[aria-current="true"] { background: var(--encre); border-color: var(--encre); color: #fff; font-weight: 700; }
.bande-sombre { margin: 72px calc(-1 * var(--marge)) -140px; padding: 96px var(--marge); background: #0B0B0C; color: #fff; }
.ensemble { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px; }
.ensemble li { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.3); }
.ensemble b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.ensemble span { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.75); }
.nouveau { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; }
.nouveau li { padding: 18px; border-radius: 14px; background: #1B1B1A; border: 1px solid #3A3A38; }
.nouveau span { font-size: 13px; font-weight: 700; color: #B9F0E4; }
.nouveau b { display: block; margin-top: 6px; font-size: 18px; font-weight: 600; }
.nouveau p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.7); }
@media (max-width: 720px) { .bande-sombre { padding: 64px var(--marge); } }

/* La carte qui se retourne : l'orbe en coin, l'assistant au dos */
.carte-flip { position: relative; perspective: 1400px; }
.carte-flip > .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.carte-flip > .avant { position: relative; transform: rotateY(0); }
.carte-flip > .dos { position: absolute; inset: 0; transform: rotateY(180deg); }
.carte-flip.retournee > .avant { transform: rotateY(-180deg); }
.carte-flip.retournee > .dos { transform: rotateY(0); }
html.calme .carte-flip > .face { transition: opacity .2s ease; transform: none !important; }
html.calme .carte-flip > .dos { opacity: 0; } html.calme .carte-flip.retournee > .dos { opacity: 1; } html.calme .carte-flip.retournee > .avant { opacity: 0; }
.carte-orbe { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; filter: drop-shadow(0 3px 8px rgba(0,0,0,.25)); }
.carte-orbe > * { grid-area: 1 / 1; }
.carte-orbe .picto-retourner { color: #0B0B0C; opacity: .78; }
.carte-orbe:hover .picto-retourner { opacity: 1; }
.carte-orbe:hover { transform: scale(1.06); }
.carte-orbe:focus-visible { outline: 2px solid #0B0B0C; outline-offset: 2px; }
.pastille-date { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #fff; color: #0B0B0C; }
.pastille-date.libre { background: #0B0B0C; color: #fff; }
.pastille-date.libre::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #4FD69A; }
.pastille-date.prise { background: rgba(255,255,255,.9); color: #55555A; }
.dos { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #0B0B0C; color: #fff; overflow: hidden; }
.dos-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dos-titre { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.dos-retour { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.dos-fil { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3A3A42 transparent; display: flex; flex-direction: column; gap: 10px; }
.dos-orbe { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 4px 6px; }
.dos-fil::-webkit-scrollbar { width: 6px; } .dos-fil::-webkit-scrollbar-track { background: transparent; } .dos-fil::-webkit-scrollbar-thumb { background: #3A3A42; border-radius: 3px; }
.dos-orbe p { margin: 0; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.78); }
.dos-echange { display: flex; flex-direction: column; gap: 6px; }
.dos-q { align-self: flex-end; margin: 0; max-width: 88%; padding: 7px 11px; border-radius: 14px 14px 4px 14px; background: #fff; color: #0B0B0C; font-size: 14px; }
.dos-r { margin: 0; max-width: 94%; padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: #24242A; font-size: 14px; line-height: 1.4; }
.dos-idees { display: flex; flex-wrap: wrap; gap: 6px; }
.dos-idees button { min-height: 34px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.dos-idees button:hover { background: #24242A; }
.dos-champ { display: flex; gap: 6px; }
.dos-champ input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: #17171B; color: #fff; font: inherit; font-size: 15px; }
.dos-champ button { width: 44px; height: 44px; flex: none; border-radius: 12px; border: 0; background: #fff; color: #0B0B0C; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dos-champ button:disabled { opacity: .4; cursor: default; }
.dos-demande { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.dos-note { margin: 0; font-size: 12px; color: rgba(255,255,255,.6); }

/* Mon profil : photo, prestations, dates, demandes, questions */
.profil-photo { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--nacre); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; flex: none; }
.profil-photo img { width: 100%; height: 100%; object-fit: cover; }
.profil-note { margin: 0; font-size: 15px; color: #55555A; line-height: 1.45; }
.profil-bloc { display: grid; gap: 14px; max-width: 760px; }
.profil-bloc h2 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.prest-ligne { display: grid; grid-template-columns: 1fr 1.4fr 44px; gap: 8px; align-items: center; }
.prest-ligne:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 44px; }
@media (max-width: 560px) { .prest-ligne { grid-template-columns: 1fr 44px; } .prest-ligne > :nth-child(2):not(:last-child) { grid-column: 1; } }
.cal-tete { display: flex; align-items: center; gap: 12px; } .cal-tete b { min-width: 150px; text-align: center; font-size: 18px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 52px)); gap: 6px; }
.cal-jsem { text-align: center; font-size: 13px; font-weight: 600; color: #55555A; }
.cal-j { height: 48px; border-radius: 12px; border: 1px solid #D6D6D2; background: #fff; color: #0B0B0C; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cal-j:disabled { opacity: .35; cursor: default; }
.cal-j.libre { background: #0B0B0C; color: #fff; border-color: #0B0B0C; box-shadow: inset 0 -4px 0 #4FD69A; }
.cal-j.option { background: #FFF3D6; border-color: #F5B754; }
.cal-j.prise { background: #ECECE8; color: #8A8A86; text-decoration: line-through; }
.cal-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; } .cal-legende span { display: inline-flex; align-items: center; gap: 6px; } .cal-legende i { width: 18px; height: 18px; border-radius: 5px; }
.demandes, .questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.demandes li { display: grid; gap: 8px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #E2E2DE; }
.demandes li.nouvelle { border: 2px solid #0B0B0C; }
.demande-tete { display: flex; justify-content: space-between; gap: 12px; } .demande-tete span { color: #55555A; font-size: 14px; }
.questions li { font-size: 16px; } .questions span { color: #55555A; font-size: 13px; margin-left: 6px; }
.pastille-fiche { display: inline-flex; align-items: center; gap: 8px; margin: 20px 0 0; padding: 8px 14px; border-radius: 999px; background: #ECECE8; font-size: 16px; font-weight: 600; }
.pastille-fiche.libre { background: #0B0B0C; color: #fff; } .pastille-fiche.libre::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #4FD69A; }
.pastille-fiche.option { background: #FFF3D6; }
.fiche-faits { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 24px 0 0; font-size: 17px; } .fiche-faits dt { font-weight: 600; color: #55555A; } .fiche-faits dd { margin: 0; }
.fiche-prest { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.fiche-prest li { display: grid; gap: 6px; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid #E2E2DE; } .fiche-prest b { font-size: 19px; } .fiche-prest span { color: #3A3A3F; }
.etiquette-champ { display: grid; gap: 6px; font-size: 16px; font-weight: 600; }

.piste-dock { display: inline-flex !important; align-items: center; gap: 10px; max-width: 340px; overflow: hidden; }
.piste-dock img { width: 34px; height: 34px; border-radius: 6px; flex: none; object-fit: cover; }
.piste-dock > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Musique : choisir, lister, la journée */
.dos-haut { gap: 8px; } .dos-titre { flex: 1; min-width: 0; }
.dos-play { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; border: 0; background: #fff; color: #0B0B0C; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; flex: none; }
.choisir { display: grid; gap: 10px; }
.choisir-ligne { display: flex; gap: 8px; flex-wrap: wrap; } .choisir-ligne .champ:first-of-type { flex: 1 1 260px; width: auto; } .choisir-ligne select.champ { flex: 0 1 220px; width: auto; }
.choisir-lien { display: flex; gap: 8px; flex-wrap: wrap; } .choisir-lien .champ { flex: 1 1 180px; width: auto; }
.choisir-res, .morceaux { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.choisir-res li, .morceaux li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid #E2E2DE; flex-wrap: wrap; }
.choisir-res img, .morceaux img, .pochette-vide { width: 44px; height: 44px; border-radius: 8px; flex: none; object-fit: cover; background: var(--nacre); display: block; }
.choisir-nom { flex: 1 1 160px; min-width: 0; display: grid; } .choisir-nom b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .choisir-nom span { font-size: 14px; color: #55555A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.morceaux .opt[aria-pressed="true"] { background: #0B0B0C; color: #fff; }
.moment-mini { height: 40px; width: auto; font-size: 14px; padding: 0 8px; }
.musique-entrer { max-width: 520px; margin: 40px auto 0; }
.journee { list-style: none; margin: 56px auto 0; padding: 0; max-width: 820px; display: grid; gap: 0; }
.moment { display: grid; gap: 12px; padding: 24px 0 28px 0; border-top: 1px solid #0B0B0C; }
.moment-tete { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.moment-tete > div { flex: 1 1 240px; } .moment-tete h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -0.03em; } .moment-tete p { margin: 4px 0 0; color: #55555A; }
.moment-num { font-size: 13px; font-weight: 700; color: #55555A; padding-top: 10px; min-width: 24px; font-variant-numeric: tabular-nums; }
.musique-bientot { margin: 72px auto 0; max-width: 820px; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: #0B0B0C; color: #fff; }
.musique-bientot .surtitre, .musique-bientot .chapeau { color: rgba(255,255,255,.8); } .musique-bientot .titre { color: #fff; }

.envoi-fichier { display: grid; gap: 10px; padding: 14px; border-radius: 14px; border: 1px dashed #9A9A96; background: #fff; }
.case-droits { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; } .case-droits input { width: 20px; height: 20px; margin-top: 2px; accent-color: #0B0B0C; flex: none; }

/* Navigation ATLAS 2026 : espaces et gestes, accessibles sur écrans étroits */
.tete .dock-haut{max-width:calc(100vw - 20px);min-width:0}
.tete .dock-ligne{max-width:100%;min-width:0}
.tete .rangee{min-width:0;max-width:min(83vw,1100px);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch;white-space:nowrap;flex-wrap:nowrap!important}
.tete .rangee .outil{white-space:nowrap;flex-shrink:0}
@media(max-width:760px){.tete .rangee{max-width:calc(100vw - 155px)}}

/* ATLAS : commande de thème à droite + dock essentiel */
.dock-ligne .theme-choix{display:none!important}
.dock-ligne .theme-picto{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--trait-2,#8885);background:transparent;color:inherit;font-size:22px;display:grid;place-items:center;cursor:pointer;margin-left:8px}
.dock-ligne .theme-picto:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.atlas-dock-essentiel{z-index:80!important;pointer-events:none}
.atlas-dock-actions{pointer-events:auto;display:flex;gap:6px;align-items:center;justify-content:center;margin:auto;width:max-content;max-width:calc(100vw - 25px);padding:7px;border-radius:999px;background:#151419ee;box-shadow:0 12px 35px #0003;border:1px solid #ffffff30}
.atlas-dock-actions a{display:grid;place-items:center;width:45px;height:43px;font-size:23px;text-decoration:none;color:#fff;border-radius:100%;font-weight:400}
.atlas-dock-actions a:hover,.atlas-dock-actions a:focus-visible{background:#ffffff23;color:#fff}

/* ATLAS — dock essentiel à trois destinations explicites */
.atlas-dock-essentiel .atlas-dock-actions{gap:5px;padding:6px 9px;max-width:calc(100vw - 20px)}
.atlas-dock-essentiel .atlas-dock-actions a{width:auto;min-width:70px;height:43px;border-radius:999px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:650;white-space:nowrap;letter-spacing:.035em}
.atlas-dock-essentiel .atlas-dock-actions .atlas-dock-orb{padding-left:9px}
.atlas-dock-essentiel .atlas-dock-orb img{display:block;width:27px;height:27px;flex:0 0 27px}
@media(max-width:420px){.atlas-dock-essentiel .atlas-dock-actions a{min-width:0;padding:0 10px;font-size:11px}.atlas-dock-essentiel .atlas-dock-orb img{width:23px;height:23px;flex-basis:23px}}

/* AIME — quatre catégories visibles, identiques en structure sur chaque page */
.aime-quatre{width:min(1440px,calc(100% - 32px));margin:clamp(30px,5vw,80px) auto;padding:12px 0 28px;color:var(--encre)}
.aime-quatre-sur{font-size:12px;font-weight:650;letter-spacing:.19em;margin:0 0 19px}
.aime-quatre-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.aime-quatre-carte{min-height:230px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;border:1px solid var(--trait-2,#8885);padding:clamp(16px,2vw,30px);border-radius:18px;background:var(--carte,#f6f5f3);color:var(--encre);transition:transform .2s ease}
.aime-quatre-carte:hover{transform:translateY(-3px)}.aime-quatre-carte small{font-size:12px;color:var(--encre-3,#777)}.aime-quatre-carte strong{font-size:clamp(20px,2.5vw,35px);overflow-wrap:anywhere;letter-spacing:-.045em}.aime-quatre-carte span{align-self:end}
.aime-rubrique-ancre{min-height:26vh;scroll-margin-top:110px;max-width:1250px;margin:0 auto;padding:45px 24px;border-top:1px solid var(--trait-2,#8885);color:var(--encre)}.aime-rubrique-ancre span{font-size:12px}.aime-rubrique-ancre h2{font-size:clamp(34px,5vw,70px);margin:12px 0;letter-spacing:-.05em}.aime-rubrique-ancre p{font-size:14px}
@media(max-width:850px){.aime-quatre-grille{grid-template-columns:repeat(2,minmax(0,1fr))}.aime-quatre-carte{min-height:155px}}@media(max-width:450px){.aime-quatre-grille{gap:9px}.aime-quatre-carte{padding:14px;min-height:135px}.aime-quatre-carte strong{font-size:20px}}