/* Composition LiooStudio — styles centralisés, partagés par aperçu et page publique. */
:root{--studio-card-image:240px;--studio-panel-width:320px;--studio-dot:1px;--studio-grid-step:20px;--studio-selected-ring:0 0 0 2px var(--blue);--studio-filter-mono:grayscale(1) contrast(1.05);--studio-filter-soft:contrast(.92) brightness(1.05) saturate(.9);--studio-filter-contrast:contrast(1.15) saturate(1.12);--studio-filter-vintage:sepia(.45) contrast(.95) brightness(1.05)}
.contact-preview{border:0;padding:0;margin:0;min-width:0}
.contact-preview :disabled{opacity:1;color:var(--page-text);-webkit-text-fill-color:var(--page-text)}
.contact-preview .profile-button:disabled{opacity:.65}
.composition-order{display:grid;gap:var(--space-2);padding:0;list-style:none;margin:var(--space-4) 0}
.composition-order li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);cursor:grab;padding:var(--space-1)}
.composition-order li>.row{flex-shrink:0;gap:var(--space-1)}
.composition-order li.selected{border-color:var(--blue);background:var(--info-bg)}
.composition-order li.dragging{opacity:.45}
.element-settings{display:grid;gap:var(--space-3);border-top:1px solid var(--line);padding-top:var(--space-5);margin-top:var(--space-5)}
.element-settings .field{margin:0}
.element-settings h3{font-size:var(--fs-16);margin:0}
.element-settings input[type=file]{max-width:100%}
.element-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);height:100%;overflow-wrap:anywhere}
.element-content h2{font-size:var(--fs-24);line-height:1.25;margin:0;color:var(--page-text)}
.element-content p{color:var(--page-muted);margin:0;font-size:var(--fs-14);line-height:1.65}
.element-text{white-space:pre-wrap}
.element-image{width:100%;height:var(--studio-card-image);object-fit:cover;border-radius:var(--page-radius);filter:var(--lp-filter,none)}
.element-divider{border:0;border-top:1px solid var(--page-line);width:100%;margin:var(--space-4) 0}
.lioopage [data-element-filter=aucun]{--lp-filter:none}
.lioopage [data-element-filter=noir-et-blanc]{--lp-filter:var(--studio-filter-mono)}
.lioopage [data-element-filter=doux]{--lp-filter:var(--studio-filter-soft)}
.lioopage [data-element-filter=contraste]{--lp-filter:var(--studio-filter-contrast)}
.lioopage [data-element-filter=vintage]{--lp-filter:var(--studio-filter-vintage)}
.lioopage [data-element-filter=bichromie]{--lp-filter:var(--lp-bichromie)}
.lioopage [data-element-corners=nets]{--page-radius:0;--page-button-radius:0}
.lioopage [data-element-corners=doux]{--page-radius:var(--radius-md);--page-button-radius:var(--radius-sm)}
.lioopage [data-element-corners=ronds]{--page-radius:var(--radius-lg);--page-button-radius:var(--radius-full)}
/* Le rond de l'identité reste un rond quels que soient les angles choisis (retour B) : photo ou initiales, jamais un carré. */
.lioopage .lp-identity .profile-avatar{border-radius:50%}
.lioopage[data-composed=true] .lp-block{border-radius:var(--page-radius)}
/* Les dispositions reprennent les compositions de l'atelier : identité sobre, cartes visuelles,
   premier projet dominant en Bento, colonne de récit en Éditorial, couverture en Focus. */
.lioopage[data-composed=true] .profile-bio{max-width:65ch;white-space:pre-wrap}
.lioopage[data-composed=true][data-align=centre] .profile-bio{margin-inline:auto}
@container (min-width:600px){
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block[data-block=contact]{grid-column:1/-1}
 .lioopage[data-composed=true] .lp-blocks>.lp-block[data-span=wide]{grid-column:1/-1}
}

@media(max-width:650px){.element-image{height:auto;max-height:var(--studio-card-image)}}
.hl-shell[data-route^=studio] .page-heading>div:first-child{flex:1 1 var(--studio-panel-width)}
.hl-shell[data-route^=studio] .page-heading .actions{flex:1 1 var(--studio-panel-width)}

.composition-order [data-drag-handle]{cursor:grab;flex-shrink:0;padding:var(--space-1)}
.composition-order [data-drag-handle]:active{cursor:grabbing}
.composition-order [data-action=element-select]{flex:1}

/* Retour aux proportions de l’artefact validé : identité légère, cartes et liens éditoriaux.
   Ces règles ne concernent que les compositions Studio ; le socle LiooPage reste distinct. */
:root{--studio-name:var(--fs-40);--studio-name-mobile:var(--fs-40);--studio-avatar:60px;--studio-copy-width:460px;--studio-hero-image:260px;--studio-card-min:170px;--studio-link-min:104px;--studio-list-max:680px;--studio-weight:600;--studio-tracking:-.055em;--studio-heading-tracking:-.035em}
.lioopage[data-composed=true] .lp-page{padding:var(--space-6)}
.lioopage[data-composed=true] .lp-intro{padding:0 0 var(--space-8)}
.lioopage[data-composed=true] .lp-identity .profile-avatar{width:var(--studio-avatar);height:var(--studio-avatar);margin-top:0;margin-bottom:var(--space-4);border:0;border-radius:var(--radius-full);background:var(--page-color);color:var(--page-on);font-size:var(--fs-24);font-weight:var(--studio-weight)}
.lioopage[data-composed=true] .lp-intro :is(h1,h2){font-size:var(--studio-name-mobile);font-weight:var(--studio-weight);letter-spacing:var(--studio-tracking);line-height:1.1;margin:0 0 var(--space-3)}
.lioopage[data-composed=true] .lp-intro .profile-job{font-size:var(--fs-14);font-weight:var(--studio-weight);color:var(--page-link);margin:0 0 var(--space-3)}
.lioopage[data-composed=true] .lp-intro .profile-bio{font-size:var(--fs-14);line-height:1.65;max-width:var(--studio-copy-width);margin-block:0}
.lioopage[data-composed=true] .lp-blocks{padding:0;align-items:stretch}
.lioopage[data-composed=true] .lp-block{padding:var(--space-5);display:flex;flex-direction:column;align-content:initial;justify-content:flex-start;gap:var(--space-3);background:var(--page-surface);border:1px solid var(--page-line)}
.lioopage[data-composed=true] .element-content{width:100%}
.lioopage[data-composed=true] :is(.element-content,.studio-contact-card)>h2{font-size:var(--fs-24);font-weight:var(--studio-weight);letter-spacing:var(--studio-heading-tracking);line-height:1.2;margin:0}
.lioopage[data-composed=true] .element-content>p{font-size:var(--fs-12);line-height:1.6}
.lioopage[data-composed=true] .element-image{height:var(--studio-hero-image);border-radius:calc(var(--page-radius)*.6)}
.lioopage[data-composed=true] .studio-go{align-self:flex-start;margin-top:auto}
.studio-contact-card{display:flex;flex-direction:column;gap:var(--space-3);min-height:var(--studio-card-min);height:100%}
.studio-eyebrow{font-size:var(--fs-12);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.lioopage[data-composed=true] .lp-block:is([data-block=vcard],[data-block=appointment]){display:flex;align-content:initial;background:var(--page-accent);border-color:var(--page-accent);color:var(--page-accent-on)}
.lioopage[data-composed=true] .lp-block[data-block=links]{padding:0;background:transparent;border:0;grid-column:1/-1}
.lioopage[data-composed=true] .profile-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--page-gap)}
.lioopage[data-composed=true] .profile-link.studio-link{min-height:var(--studio-link-min);padding:var(--space-5);border-radius:var(--page-radius);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--space-4);font-size:var(--fs-14);font-weight:var(--studio-weight);white-space:normal;line-height:1.4;text-align:left;transition:background var(--dur-fast),border-color var(--dur-fast)}
.lioopage[data-composed=true] .studio-link .icon{align-self:flex-end;color:var(--page-link)}
.lioopage[data-composed=true] .studio-link-label{overflow-wrap:anywhere;max-width:100%}
.lioopage[data-composed=true] .studio-link:hover{background:color-mix(in srgb,var(--page-color) 5%,var(--page-surface));border-color:var(--page-color)}
.lioopage[data-composed=true] .public-contact>h2{font-size:var(--fs-24);font-weight:var(--studio-weight);letter-spacing:var(--studio-heading-tracking);margin-bottom:var(--space-2)}
.lioopage[data-composed=true] .public-contact>p{font-size:var(--fs-12);margin-bottom:var(--space-6)}
.lioopage[data-composed=true] .lp-block:has(>.element-divider){padding:0;background:transparent;border:0;grid-column:1/-1}
@container (min-width:600px){
 .lioopage[data-composed=true] .lp-page{padding:var(--space-10)}
 .lioopage[data-composed=true] .lp-intro :is(h1,h2){font-size:var(--studio-name)}
 .lioopage[data-composed=true] .profile-links{grid-template-columns:repeat(3,minmax(0,1fr))}
 .lioopage[data-composed=true] .lp-block[data-block=contact]{padding:var(--space-8)}
 .lioopage[data-composed=true] :is(form.public-contact,.contact-preview){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-5)}
 .lioopage[data-composed=true] :is(form.public-contact,.contact-preview)>:not(.field),
 .lioopage[data-composed=true] :is(form.public-contact,.contact-preview)>.field:has(textarea){grid-column:1/-1}
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block:has(.element-image):first-of-type .element-image{flex:1;min-height:var(--studio-hero-image)}
 .lioopage[data-composed=true][data-layout=liste] .lp-page{max-width:var(--studio-list-max);margin-inline:auto}
 .lioopage[data-composed=true][data-layout=liste] .lp-block[data-block=links] .profile-links{grid-template-columns:1fr}
 .lioopage[data-composed=true][data-layout=liste] .profile-link.studio-link{min-height:var(--control);flex-direction:row;align-items:center}
 .lioopage[data-composed=true][data-layout=liste] .studio-link .icon{align-self:center}
}
/* Liste reste une liste même dans le téléphone ; les champs suivent la palette choisie. */
.public-profile:has(>.lioopage[data-composed=true][data-layout=liste]){max-width:var(--studio-list-max)}
.lioopage[data-composed=true][data-layout=liste] .profile-links{grid-template-columns:1fr}
.lioopage[data-composed=true][data-layout=liste] .profile-link.studio-link{min-height:var(--control);flex-direction:row;align-items:center;padding:var(--space-4) var(--space-5)}
.lioopage[data-composed=true][data-layout=liste] .studio-link .icon{align-self:center}
.lioopage[data-composed=true] .public-contact .field :is(input,textarea,select){background:var(--page-bg);color:var(--page-text);border-color:var(--page-line)}
.lioopage[data-composed=true] .contact-preview .profile-button:disabled{color:var(--page-on);-webkit-text-fill-color:var(--page-on)}
/* Priorité sur l’ancienne grille organisation : aucun centrage ni colonne étroite hérités. */
.lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block{display:flex;align-content:initial}
.lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block[data-block=links]{grid-column:1/-1}
.lioopage[data-composed=true] .element-content{height:auto;flex:1}
@container (min-width:600px){
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block:has(.element-image):first-of-type .element-image{height:var(--studio-hero-image);min-height:0;flex:initial}
}


/* Bento adaptatif : les portées sont calculées sur les seuls éléments visibles.
   Pas de placement dense : l’ordre visuel reste l’ordre de lecture et de tabulation. */
@container (max-width:599px){
 .lioopage[data-composed=true][data-layout=mosaique] .profile-links>.studio-link:last-child:nth-child(odd){grid-column:1/-1}
}
@container (min-width:600px){
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks,
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks:has(>[data-block=contact]){grid-template-columns:repeat(6,minmax(0,1fr))}
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block[data-bento-span]{grid-row:auto}
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block[data-bento-span="2"]{grid-column:span 2}
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block[data-bento-span="3"]{grid-column:span 3}
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block[data-bento-span="4"]{grid-column:span 4}
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block[data-bento-span="6"]{grid-column:1/-1}
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block[data-bento-hero=true]{grid-row:span 2}
 /* Liens en Bento : six colonnes, fins de rangée équilibrées (balancedSpans), aucune case vide. */
 .lioopage[data-composed=true][data-layout=mosaique] .profile-links{grid-template-columns:repeat(6,minmax(0,1fr))}
 .lioopage[data-composed=true][data-layout=mosaique] .profile-links>.studio-link[data-bento-span="2"]{grid-column:span 2}
 .lioopage[data-composed=true][data-layout=mosaique] .profile-links>.studio-link[data-bento-span="3"]{grid-column:span 3}
 .lioopage[data-composed=true][data-layout=mosaique] .profile-links>.studio-link[data-bento-span="6"]{grid-column:1/-1}
 /* AV-015 : liens en raccourcis, empilés, quand la Mosaïque les pose à côté du grand bloc contact. */
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block[data-block=links][data-bento-span="2"]{grid-column:span 2}
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block[data-block][data-bento-span="4"]{grid-column:span 4}
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block[data-block=links][data-bento-span="2"] .profile-links{grid-template-columns:minmax(0,1fr)}
 .lioopage[data-composed=true][data-layout=mosaique] .lp-blocks>.lp-block[data-block=links][data-bento-span="2"] .profile-links>.studio-link{grid-column:auto;min-height:var(--control)}
}

.composition-order li:not(.selected):not(:focus-within)>.row{display:none}

/* Formulaire replié : une seule entrée native, utilisable au clavier et au toucher. */
.contact-disclosure{width:100%;min-width:0}
.contact-disclosure>summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);cursor:pointer;list-style:none;text-align:left;min-height:var(--control);color:var(--page-text)}
.contact-disclosure>summary::-webkit-details-marker{display:none}
.contact-disclosure>summary>span{display:grid;gap:var(--space-2);min-width:0}
.contact-disclosure>summary strong{font-size:var(--fs-24);font-weight:600;letter-spacing:var(--studio-heading-tracking);line-height:1.2}
.contact-disclosure>summary small{font-size:var(--fs-12);color:var(--page-muted);line-height:1.5}
.contact-disclosure>summary>.icon{flex-shrink:0;transition:transform var(--dur-fast)}
.contact-disclosure[open]>summary>.icon{transform:rotate(180deg)}
.lioopage .contact-disclosure>.public-contact{margin-top:var(--space-6)}

/* Liste : proportions de l’artefact d’origine, et non celles des grandes cartes Bento. */
.lioopage[data-composed=true][data-layout=liste]{background:var(--page-bg)}
.lioopage[data-composed=true][data-layout=liste] .lp-block:not([data-block=links]):not(:has(>.element-divider)){padding:var(--space-4)}
.lioopage[data-composed=true][data-layout=liste] .element-content{padding:0;border:0;border-radius:var(--page-radius);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-4);align-items:center}
.lioopage[data-composed=true][data-layout=liste] .element-content:has(.element-image){grid-template-columns:var(--space-12) minmax(0,1fr) auto}
.lioopage[data-composed=true][data-layout=liste] .element-image{width:100%;height:var(--space-12);grid-column:1;grid-row:1 / span 3;object-fit:cover;border-radius:var(--radius-sm)}
.lioopage[data-composed=true][data-layout=liste] .element-content>h2{font-size:var(--fs-16);grid-column:1;line-height:1.3}
.lioopage[data-composed=true][data-layout=liste] .element-content>p{grid-column:1;font-size:var(--fs-12)}
.lioopage[data-composed=true][data-layout=liste] .element-content:has(.element-image)>:is(h2,p){grid-column:2}
.lioopage[data-composed=true][data-layout=liste] .element-content>.studio-go{grid-column:2;grid-row:1 / span 3;margin:0;align-self:center}
.lioopage[data-composed=true][data-layout=liste] .element-content:has(.element-image)>.studio-go{grid-column:3}
.lioopage[data-composed=true][data-layout=liste] .studio-contact-card{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-4)}
.lioopage[data-composed=true][data-layout=liste] .studio-contact-card>h2{font-size:var(--fs-16);grid-column:1}
.lioopage[data-composed=true][data-layout=liste] .studio-contact-card>.studio-go{grid-column:2;grid-row:1 / span 2;align-self:center;margin:0}
/* Page étroite (téléphone, aperçu de l'éditeur à 1440 px) : le bouton « Enregistrer le contact » passe sous le texte au
   lieu de l'écraser en une colonne de quelques lettres (audit personnalisation, « Not / re / con / tact »). */
@container (max-width:519px){
 .lioopage[data-composed=true][data-layout=liste] .studio-contact-card{grid-template-columns:minmax(0,1fr)}
 .lioopage[data-composed=true][data-layout=liste] .studio-contact-card>.studio-go{grid-column:1;grid-row:auto;justify-self:start}
}
.lioopage[data-composed=true][data-layout=liste] .contact-disclosure>summary strong{font-size:var(--fs-16)}
@container(min-width:600px){
 .lioopage[data-composed=true][data-layout=liste] .element-content:has(.element-image){grid-template-columns:var(--space-16) minmax(0,1fr) auto}
 .lioopage[data-composed=true][data-layout=liste] .element-image{height:var(--space-16)}
}
/* Le téléphone du Studio (390 px) se cale sur la place de la scène, barre latérale comprise, pas sur l'écran. */
/* LiooPass sur le web (D79) : état d'enregistrement et actions sous le choix de la couleur et du logo. */

/* Éléments Galerie et Documents de la LiooPage (lot 10B), aux couleurs de la page. La vidéo : ui.VideoFacade. */
.lp-gallery{align-self:stretch;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:var(--space-2);margin:0;padding:0;list-style:none;width:100%}
.lp-gallery figure{margin:0;display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.lp-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:calc(var(--page-radius)*.6);background:var(--page-line);filter:var(--lp-filter,none)}
.lp-gallery figcaption{font-size:var(--fs-12);line-height:1.4;color:var(--page-muted);overflow-wrap:anywhere}
.lp-docs{align-self:stretch;display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:0;list-style:none;width:100%}
.lp-docs a{display:flex;align-items:center;gap:var(--space-3);min-height:var(--control);padding:var(--space-2) var(--space-3);border:1px solid var(--page-line);border-radius:var(--page-button-radius);background:var(--page-surface);color:var(--page-text);font-size:var(--fs-14);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.lp-docs a:focus-visible{outline:3px solid var(--page-focus);outline-offset:3px}
.lp-docs a>span{flex:1;min-width:0}
.lp-docs small{color:var(--page-muted);font-weight:500;white-space:nowrap}
/* Vidéos (D113) : vignette générée et bouton Lecture aux couleurs de la page (rôles D112 : contraste vérifié par page_style). */
.lioopage .hl-video{--hl-video-bg:var(--page-color);--hl-video-on:var(--page-on);--hl-video-accent:var(--page-accent);--hl-video-accent-on:var(--page-accent-on);--hl-video-text:var(--page-text);--hl-video-muted:var(--page-muted);--hl-video-focus:var(--page-focus)}
.lioopage .hl-video__stage{border-radius:var(--page-radius)}
.lp-videos{align-self:stretch;display:flex;flex-direction:column;gap:var(--space-5);margin:0;padding:0;list-style:none;width:100%}
/* Galerie, vidéo, documents : toujours en colonne (titre, puis le média sur toute la largeur), quelle que soit la disposition. */
.lioopage .element-content.element-media,.lioopage[data-composed=true][data-layout] .element-content.element-media{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-3)}
.lioopage[data-composed=true][data-layout] .element-content.element-media>:is(h2,p){grid-column:auto}
/* Lot G (D128, D131) : éditeurs de l'atelier LiooStudio (espace client, jetons de l'interface). Réglages Pro des liens et
   image du bandeau ; les composants CarouselField et HoursField sont dans components.css. */
.lp-linksets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.lp-linkset{min-width:0}
.lp-linkset__header{display:flex;flex-wrap:wrap;align-items:end;gap:var(--space-2)}
.lp-linkset__header>.hl-field{flex:1 1 220px;min-width:0}
.lp-linkset .hl-accordion__subtitle{overflow-wrap:anywhere}
.lp-banner-pick,.lp-links-pro{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}