/* LiooPage — rendu de page (aperçu, page publique, Studio), éditeur à onglets, aperçu, partage et carte de page.
   Atelier UX du 27/09, intégré le 29/09 : un seul cercle d'identité, des actions de contact distinctes des liens,
   formulaire et questions fréquentes après les liens, pied toujours en dernier (pied 1d du lot G, D127). */

/* Identité : plus de couverture ; le cercle ouvre la page. */
.lioopage .lp-intro{padding-top:var(--space-8)}
.lioopage .lp-identity div.profile-avatar{background:var(--page-color);color:var(--page-on)}
/* D75 : logo en tête posé tel quel, sans tuile, fond, bordure, ombre ni coins forcés. L'emplacement épouse le logo,
   plafonné à --page-logo-max-w × --page-logo-max-h ; un grand logo est réduit en gardant son ratio (jamais rogné ni
   déformé), un petit garde sa taille native. Même axe que le nom : à gauche en alignement gauche. */
/* D84 : le logo en tête est toujours aligné à gauche (web comme iOS), quelle que soit la disposition. */
.lioopage .lp-logo{display:flex;justify-content:flex-start;margin:0 0 var(--space-4)}
.lioopage .lp-logo-img{display:block;width:auto;height:auto;max-width:min(calc(var(--page-logo-max-w) * var(--page-logo-scale,1)),100%);max-height:calc(var(--page-logo-max-h) * var(--page-logo-scale,1));object-fit:contain;background:none;border:0;border-radius:0;box-shadow:none;padding:0;filter:none}

/* Actions de contact : icône et texte, texte seul ou icônes seules (nom dans aria-label). */
.profile-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin:var(--space-5) 0 0;max-width:var(--studio-copy-width)}
.lioopage[data-align=centre] .profile-actions{margin-inline:auto}
.profile-actions>.profile-action:last-child:nth-child(odd){grid-column:1/-1}
.profile-action{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:0;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;line-height:1.3;text-align:center;overflow-wrap:anywhere;transition:border-color var(--dur-fast)}
.profile-action .icon{flex-shrink:0}
.profile-action[href]:hover{border-color:var(--page-color)}
.profile-actions[data-display=text] .profile-action .icon{display:none}
.profile-actions[data-display=icons]{display:flex;flex-wrap:wrap;justify-content:center}
.lioopage[data-align=gauche] .profile-actions[data-display=icons]{justify-content:flex-start}
.profile-actions[data-display=icons] .profile-action{width:var(--control);padding:0;border-radius:var(--radius-full)}
.profile-actions[data-display=icons] .profile-action>span{display:none}

/* Formulaire replié : son volet porte l'icône citron de la marque. */
.contact-disclosure>summary>.icon{box-sizing:content-box;padding:var(--space-2);border-radius:var(--radius-full);background:var(--lime);color:var(--ink)}

/* Questions fréquentes (Pro) : un volet natif par question. */
.profile-faq{display:grid;text-align:left}
.lioopage .lp-block .profile-faq>:is(h2,h3){font-size:var(--fs-24);font-weight:600;letter-spacing:var(--studio-heading-tracking);line-height:1.2;margin:0 0 var(--space-3);color:var(--page-text)}
.lioopage[data-layout=liste] .lp-block .profile-faq>:is(h2,h3){font-size:var(--fs-16)}
.faq-item{border-top:1px solid var(--page-line)}
.faq-item>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--control);cursor:pointer;list-style:none;font-size:var(--fs-14);font-weight:600;color:var(--page-text);overflow-wrap:anywhere}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary>.icon{flex-shrink:0;transition:transform var(--dur-fast)}
.faq-item[open]>summary>.icon{transform:rotate(180deg)}
.faq-item>p{margin:0 0 var(--space-4);font-size:var(--fs-14);line-height:1.6;color:var(--page-muted);white-space:pre-line;overflow-wrap:anywhere}

/* Mosaïque : questions fréquentes sur toute la largeur, après le formulaire. */
@container (min-width:600px){
 .lioopage[data-layout=mosaique] .lp-blocks>.lp-block[data-block=faq]{grid-column:1/-1}
}

/* Éditeur à onglets : les onglets et l'état du brouillon sur une ligne, un panneau visible à la fois. */
.editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin:0 0 var(--space-5)}
.editor-toolbar>.segmented{max-width:100%;overflow-x:auto}
#faq-editors{display:grid;gap:var(--space-3)}

/* Partage : identité de la page, lien, QR et exports ; le pied commun porte « Copier le lien ». */
.share-head{display:flex;align-items:center;gap:var(--space-3)}
.share-head p{margin:0}
.share-icon{display:grid;place-items:center;width:var(--control);height:var(--control);flex-shrink:0;border-radius:var(--radius-full);background:var(--info-bg);color:var(--blue)}
.share-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* Aperçu : cadre téléphone (390) ou navigateur, rendu réel de la page. */
.preview-stage{container-type:inline-size;min-width:0}
.preview-stage[data-view=mobile]{display:flex;justify-content:center}
@container(max-width:420px){.preview-stage .phone-holder{--phone-scale:.82}}
@container(max-width:350px){.preview-stage .phone-holder{--phone-scale:.7}}
@container(max-width:300px){.preview-stage .phone-holder{--phone-scale:.6}}
.browser-frame{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm)}
.browser-bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--line);background:var(--bg);min-width:0}
.browser-dots{display:flex;gap:var(--space-1);flex-shrink:0}
.browser-dots i{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-full);background:var(--line-strong)}
.browser-url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-frame{background:var(--page-bg);display:flex;justify-content:center}
.page-frame>.public-profile{box-shadow:none;border-radius:0}

/* Miniature de page (carte et accueil) : la vraie identité, sur les couleurs de la page. */
.page-card-cover{background:var(--page-bg,var(--info-bg))}
.mini-profile{background:var(--page-surface,var(--surface));color:var(--page-text,var(--text))}
.mini-profile .avatar{background:var(--page-color);color:var(--page-on)}
.mini-profile img.avatar{object-fit:cover;background:var(--page-surface,var(--surface))}
.mini-profile small{display:block;font-size:.4em;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Accueil : panneau de la page avec sa miniature ; métriques Pro légendées au-dessus du groupe. */

/* Écart aux 30 jours précédents : après le libellé (la rangée est inversée, d'où l'ordre). */

/* D119 · Page publique sur ordinateur. Rien ne change sous 600 px ni entre 600 et 960 px de page : au-delà (fenêtre
   d'environ 1024 px et plus), la page est centrée sur une largeur de lecture confortable et se met en deux colonnes.
   - Liste : identité et actions à gauche, blocs à droite (la liste des blocs garde sa colonne unique) ;
   - Mosaïque : en-tête en deux colonnes, identité d'un côté, actions de l'autre, alignées sur la moitié droite de la
     grille des blocs (même largeur, même écart) ; la grille des blocs garde ses portées ;
   - Bandeau et Vitrine (variantes larges de la Liste, D129) : voir « Dispositions du lot G » plus bas.
   Requêtes de conteneur (.lioopage) : l'aperçu « Ordinateur » de l'éditeur et la page publique suivent les mêmes règles. */
@media (min-width:1000px){
 .public-page>.public-profile[data-layout]:has(>.lioopage){max-width:1120px}
 .public-page>.public-profile[data-layout=liste]:has(>.lioopage){box-shadow:var(--shadow-sm)}
}
@container (min-width:960px){
 .public-profile .lioopage[data-layout=liste]:not([data-variant]) .lp-page{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--space-12);align-items:start;max-width:none;margin-inline:0}
 .public-profile .lioopage[data-layout=liste]:not([data-variant]) .lp-identity{grid-column:1;min-width:0}
 .public-profile .lioopage[data-layout=liste]:not([data-variant]) .lp-blocks{grid-column:2;min-width:0;padding-top:var(--space-3)}
 .public-profile .lioopage[data-layout=liste]:not([data-variant]) .lp-foot{grid-column:1/-1}
 .public-profile .lioopage[data-layout=liste] .lp-intro{padding-bottom:0}
 .public-profile .lioopage[data-layout=liste] .profile-actions{max-width:none}
 .public-profile .lioopage[data-layout=mosaique] .lp-intro:has(>.profile-actions){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--page-gap);align-items:start}
 .public-profile .lioopage[data-layout=mosaique] .lp-intro:has(>.profile-actions)>*{grid-column:1}
 .public-profile .lioopage[data-layout=mosaique] .lp-intro>.profile-actions:not(.lp-socials-boutons){grid-column:2;grid-row:1 / span 8;align-self:center;max-width:none;margin:0}
}

/* ===================================================================================================
   Lot G (maquette validée propositions-linktree, comparaison des dispositions ; D119, D126–D131).
   Couleurs de la page uniquement (--page-*) : la page garde ses couleurs en mode sombre (tokens.css).
   =================================================================================================== */
.lioopage .lp-identity{position:relative}
/* « Partager la page » : bouton rond discret en haut à droite, au-dessus de l'identité (jamais posé dessus).
   D160 : le bouton de traduction (D115), quand la page existe en anglais, est son jumeau à gauche (même .lp-round). */
.lp-topbar{display:flex;justify-content:flex-end;gap:var(--space-2);margin:0;padding:var(--space-3) var(--space-3) 0}
.lp-topbar+.lp-intro{padding-top:var(--space-2)}
.lp-round{display:inline-grid;place-items:center;width:var(--control);height:var(--control);flex:none;border-radius:var(--radius-full);border:1px solid var(--page-line);background:var(--page-surface);color:var(--page-text);cursor:pointer;padding:0;font:inherit}
.lp-round:hover:not(:disabled){border-color:var(--page-color)}
.lp-round:disabled{opacity:.4;cursor:default}
.lp-round :is(.icon,.hl-icon){width:var(--space-4);height:var(--space-4)}
/* IconButton de la bibliothèque aux couleurs de la page : survol et état désactivé restent ceux de la page. */
.lioopage .lp-round.hl-icon-btn:hover:not(:disabled){background:var(--page-surface)}
.lioopage .lp-round.hl-icon-btn:disabled{background:var(--page-surface);border-color:var(--page-line);color:var(--page-text)}

/* Réseaux sociaux (D127, D128) : icônes rondes regroupées, à l'encre de la page ; cible de 44 px ; en bas par défaut. */
.lp-socials{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-5) 0 0}
.lioopage[data-align=centre] .lp-socials,.lp-socials--bas{justify-content:center}
.lp-socials--bas{margin:0}
.lp-social{display:inline-grid;place-items:center;min-width:var(--control);height:var(--control);border-radius:var(--radius-full);border:1px solid var(--page-line);background:var(--page-surface);color:var(--page-text);transition:border-color var(--dur-fast)}
.lp-social>span{display:none}
.lp-socials:not([data-display=icons]) .lp-social{display:inline-flex;align-items:center;gap:var(--space-2);padding:0 var(--space-4);font-size:var(--fs-14);font-weight:600}
.lp-socials:not([data-display=icons]) .lp-social>span{display:inline}
.lp-socials[data-display=text] .lp-social .icon{display:none}
.lp-social[href]:hover{border-color:var(--page-color);color:var(--page-color)}
.lp-socials-wrap{display:grid;gap:var(--space-2);justify-items:center;width:100%}
.lp-socials-wrap>small{font-size:var(--fs-12);color:var(--page-muted)}
.lp-socials-wrap>.profile-actions{margin:0;width:100%}
.lioopage .lp-blocks>.lp-block[data-block=socials]{grid-column:1/-1;background:none;border:0;padding-inline:0}

/* Carrousel (D131) : défilement à crans, boutons de 44 px, sans lecture automatique ; mouvement réduit respecté. */
.lp-carousel{display:grid;gap:var(--space-3);width:100%;min-width:0;text-align:left}
.lp-carousel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-width:0}
.lioopage .lp-carousel__head>:is(h2,h3){margin:0;font-size:var(--fs-16);font-weight:600;letter-spacing:0;line-height:1.3;color:var(--page-text);overflow-wrap:anywhere}
.lp-carousel__nav{display:flex;gap:var(--space-2);flex:none}
.lp-carousel__track{display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;margin:0;padding:0 0 var(--space-1);list-style:none;overscroll-behavior-x:contain;border-radius:var(--page-radius)}
.lp-carousel__track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.lp-carousel__track{scroll-behavior:auto}}
.lp-slide{flex:0 0 82%;scroll-snap-align:start;min-width:0}
@container (min-width:600px){.lp-slide{flex-basis:46%}}
@container (min-width:960px){.lp-slide{flex-basis:31.5%}}
.lp-slide>:is(a,.lp-slide__in){display:grid;gap:var(--space-2);color:var(--page-text);text-decoration:none}
.lp-slide__img{display:block;width:100%;aspect-ratio:4/3;border-radius:var(--page-radius);overflow:hidden;background:var(--page-bg)}
.lp-slide__img img{display:block;width:100%;height:100%;object-fit:cover}
.lp-slide__title{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--space-6);font-size:var(--fs-14);font-weight:600;overflow-wrap:anywhere}
.lp-slide__title .icon{width:var(--space-4);height:var(--space-4);color:var(--page-link)}
.lp-carousel__dots{display:flex;justify-content:center;gap:var(--space-1)}
.lp-carousel__dots i{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-full);background:var(--page-line)}
.lp-carousel__dots i[aria-current=true]{background:var(--page-color)}

/* Liens (D128) : titres de section, lien mis en avant (carte 16:9), menu ⋮ ; grille de cartes en Vitrine. */
.lioopage :is(.profile-links,.lp-linkgrid)>.lp-linkhead{grid-column:1/-1;margin:var(--space-3) 0 0;font-size:var(--fs-12);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--page-muted);text-align:left;line-height:1.4}
.lioopage :is(.profile-links,.lp-linkgrid)>.lp-linkhead:first-child{margin-top:0}
.lp-linkrow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-1);min-width:0}
.lp-linkrow>.profile-link{margin:0;min-width:0}
.lp-linkrow--featured,.lp-linkrow--tile{display:block}
.lp-linkrow--featured,.profile-links>.lp-linkrow[data-seul]{grid-column:1/-1}
.lp-more{display:inline-grid;place-items:center;width:var(--control);height:var(--control);border:0;border-radius:var(--radius-full);background:none;color:var(--page-muted);cursor:pointer;padding:0}
.lioopage .lp-more:hover{background:color-mix(in srgb,var(--page-text) 6%,transparent);color:var(--page-text)}
.lp-more[aria-expanded=true]{color:var(--page-text)}
.lp-linkrow:is(.lp-linkrow--featured,.lp-linkrow--tile)>.lp-more{position:absolute;top:var(--space-2);right:var(--space-2);background:var(--page-surface);border:1px solid var(--page-line)}
.lp-menu{position:absolute;right:0;top:calc(100% + var(--space-1));z-index:5;min-width:220px;max-width:calc(100vw - var(--space-8));display:grid;padding:var(--space-1);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.lp-linkrow:is(.lp-linkrow--featured,.lp-linkrow--tile)>.lp-menu{top:calc(var(--space-2) + var(--control) + var(--space-1));right:var(--space-2)}
.lp-menu[hidden]{display:none}
.lp-menu button{display:flex;align-items:center;gap:var(--space-3);min-height:var(--control);padding:0 var(--space-3);border:0;border-radius:var(--radius-sm);background:none;color:inherit;font:inherit;font-size:var(--fs-14);text-align:left;cursor:pointer}
.lp-menu button:is(:hover,:focus-visible){background:var(--bg-2)}
.lp-menu .icon{width:var(--space-4);height:var(--space-4)}
.lp-featured{display:grid;border:1px solid var(--page-line);border-radius:var(--page-radius);overflow:hidden;background:var(--page-surface);color:var(--page-text);text-decoration:none}
.lp-featured:hover{border-color:var(--page-color)}
.lp-featured__img{display:block;aspect-ratio:16/9;background:var(--page-bg);overflow:hidden}
.lp-featured__body{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--fs-16);font-weight:600;text-align:left;overflow-wrap:anywhere}
.lp-featured__body small{display:block;font-size:var(--fs-12);font-weight:500;color:var(--page-muted)}
.lp-featured__body .icon{flex:none;color:var(--page-link)}
:is(.lp-featured__img,.lp-tile__img)>img{display:block;width:100%;height:100%;object-fit:cover}
/* Lien sans image : vignette aux couleurs de la page. */
.lp-thumb{display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(135deg,var(--page-color),color-mix(in srgb,var(--page-color) 55%,var(--page-accent)));color:var(--page-on)}
.lp-thumb .icon{width:var(--space-8);height:var(--space-8);opacity:.85}
.lp-linkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);width:100%}
@container (min-width:600px){.lp-linkgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lp-linkrow--tile{min-width:0}
.lp-linkrow--tile.lp-linkrow--featured{grid-column:1/-1}
.lp-tile{display:grid;align-content:start;height:100%;border:1px solid var(--page-line);border-radius:var(--page-radius);overflow:hidden;background:var(--page-surface);color:var(--page-text);text-decoration:none;font-size:var(--fs-14);font-weight:600;text-align:left}
.lp-tile:hover{border-color:var(--page-color)}
.lp-tile__img{display:block;aspect-ratio:4/3;background:var(--page-bg);overflow:hidden}
.lp-tile--featured .lp-tile__img{aspect-ratio:16/9}
@container (min-width:600px){.lp-tile--featured .lp-tile__img{aspect-ratio:21/9}}
.lp-tile__label{padding:var(--space-2) var(--space-3);overflow-wrap:anywhere}
/* Liste (Pro) : les liens s'empilent, le ⋮ au bout de la ligne. */
.lioopage[data-composed=true] .lp-block[data-block=links]>.profile-links:has(>.lp-linkrow){grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
/* Mosaïque (Pro) : deux colonnes sur téléphone, six sur ordinateur (portées équilibrées), le ⋮ dans le coin de la carte. */
.lioopage[data-composed=true][data-layout=mosaique] .lp-block[data-block=links]>.profile-links:has(>.lp-linkrow){grid-template-columns:repeat(2,minmax(0,1fr))}
.lioopage[data-layout=mosaique] .lp-linkrow:not(.lp-linkrow--featured){display:block}
.lioopage[data-layout=mosaique] .lp-linkrow:not(.lp-linkrow--featured)>.profile-link{height:100%}
.lioopage[data-layout=mosaique] .lp-linkrow:not(.lp-linkrow--featured)>.lp-more{position:absolute;top:var(--space-1);right:var(--space-1)}
.lioopage[data-layout=mosaique] .lp-linkrow:not(.lp-linkrow--featured)>.lp-menu{top:calc(var(--space-1) + var(--control))}
.lioopage[data-layout=mosaique] .lp-linkrow>.studio-link .studio-link-label{padding-right:var(--space-8)}
@container (min-width:600px){
 .lioopage[data-composed=true][data-layout=mosaique] .lp-block[data-block=links]>.profile-links:has(>.lp-linkrow){grid-template-columns:repeat(6,minmax(0,1fr))}
 .lioopage[data-composed=true][data-layout=mosaique] .profile-links>.lp-linkrow[data-bento-span="2"]{grid-column:span 2}
 .lioopage[data-composed=true][data-layout=mosaique] .profile-links>.lp-linkrow[data-bento-span="3"]{grid-column:span 3}
 .lioopage[data-composed=true][data-layout=mosaique] .profile-links>.lp-linkrow[data-bento-span="6"]{grid-column:1/-1}
 .lioopage[data-composed=true][data-layout=mosaique] .profile-links>.lp-linkrow[data-seul]:not([data-bento-span="6"]){grid-column:auto}
 .lioopage[data-composed=true][data-layout=mosaique] .profile-links>.lp-linkrow[data-seul][data-bento-span="2"]{grid-column:span 2}
 .lioopage[data-composed=true][data-layout=mosaique] .profile-links>.lp-linkrow[data-seul][data-bento-span="3"]{grid-column:span 3}
 /* 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"]>.profile-links:has(>.lp-linkrow){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>.lp-linkrow{grid-column:auto}
}

/* Horaires d'ouverture (D128) : état du moment, puis la semaine. */
.lp-hours{display:grid;gap:var(--space-2);text-align:left;width:100%}
.lioopage .lp-hours>:is(h2,h3){margin:0;font-size:var(--fs-16);font-weight:600;letter-spacing:0;line-height:1.3;color:var(--page-text)}
.lp-hours__now{display:inline-flex;align-items:center;gap:var(--space-2);margin:0;font-size:var(--fs-14);font-weight:600;color:var(--page-text)}
.lp-hours__now::before{content:"";flex:none;width:var(--space-2);height:var(--space-2);border-radius:var(--radius-full);background:var(--page-muted)}
.lp-hours__now[data-ouvert=true]::before{background:var(--success)}
.lp-hours dl{display:grid;gap:var(--space-1);margin:0;font-size:var(--fs-14)}
.lp-hours__row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:var(--space-4)}
.lp-hours dt{color:var(--page-muted)}
.lp-hours dd{margin:0;color:var(--page-text);text-align:right;margin-left:auto}
.lp-hours__row.is-today :is(dt,dd){font-weight:600;color:var(--page-text)}

/* Pied 1d (D127) : filet de la page, logo + légende à gauche, trois icônes à droite (noms accessibles, infobulles).
   --lp-quiet : texte secondaire de la page, 66 % de l'encre sur la surface (AA, étude § 3). Cibles de 44 px. */
.lioopage{--lp-quiet:color-mix(in srgb,var(--page-text) 66%,var(--page-surface))}
.lp-foot{container-type:inline-size;display:grid;padding:var(--space-6) var(--space-4) var(--space-3);color:var(--lp-quiet);font-size:var(--fs-12);line-height:1.3}
.lp-foot :is(a,button){color:inherit;font:inherit;background:none;border:0;padding:0 var(--space-1);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:var(--control);min-width:var(--control);text-decoration:none}
.lp-foot__rule{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--space-4);border-top:1px solid var(--page-line);padding-top:var(--space-2);text-align:left}
/* color:inherit : la règle globale p{color:var(--text-2)} d’app.css (gris fixe) ne doit pas passer sur un fond sombre. */
.lp-foot__cap,.lp-foot__icons{margin:0;color:inherit}
.lp-foot__cap{display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap;min-width:0}
.lp-foot__cap>span{display:inline-flex;align-items:center;min-height:var(--control)}
.lp-foot .lp-foot__logo{padding:0;min-width:var(--control);justify-content:flex-start}
.lp-foot .lp-foot__logo .logo-text{width:58px;opacity:.72}
.lp-foot .lp-foot__logo:hover .logo-text{opacity:1}
.lp-foot .lp-foot__cta{padding:0;min-width:0;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.lp-foot__cta:hover{color:var(--page-text)}
@container (max-width:400px){.lp-foot__made{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.lp-foot__icons{display:flex;gap:0;margin-left:auto;margin-right:calc(var(--space-2) * -1)}
.lp-foot .lp-foot__icons :is(a,button){width:var(--control);padding:0;border-radius:var(--radius-full)}
.lp-foot__icons :is(.icon,.hl-icon){width:var(--space-4);height:var(--space-4)}
.lp-foot__icons .hl-icon-btn:hover{background:none}
.lp-foot__icons :is(a,button):hover{color:var(--page-text)}

/* Fenêtres de la page (partage, QR, À propos, Signaler) : dialogue de la bibliothèque, posé dans la page. */
.lp-share{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;margin:0 0 var(--space-3)}
.lp-share__url{flex:1 1 12em;min-width:0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--bg-2);font-size:var(--fs-14);overflow-wrap:anywhere;user-select:all}
.lp-qr{display:block;width:180px;height:180px;margin:var(--space-2) auto;padding:var(--space-2);border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line)}
.lp-dialog__statut{margin:0;min-height:1.5em;font-size:var(--fs-14);color:var(--text)}
.lp-dialog__statut[role=alert]{color:var(--error)}
.lp-report{display:grid;gap:var(--space-3)}
.lp-about-report{display:grid;justify-items:start;gap:var(--space-2);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line)}

/* Dispositions du lot G (D129) : variantes de la Liste (data-layout=liste + data-variant). */
/* Bandeau : image bord à bord fondue dans le fond de la page ; le rond ou le logo dessous, jamais dessus. Sur ordinateur,
   le bandeau prend la largeur de la page, le contenu reste borné (D119). */
.lp-banner{display:block;position:relative;overflow:hidden;height:180px;background:var(--page-bg)}
.lp-banner>img{display:block;width:100%;height:100%;object-fit:cover;filter:var(--lp-filter)}
.lp-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--page-bg))}
.lioopage[data-composed=false] .lp-banner::after{background:linear-gradient(180deg,transparent 40%,var(--page-surface))}
.lp-banner--aplat{background:linear-gradient(120deg,var(--page-color),color-mix(in srgb,var(--page-color) 50%,var(--page-accent)) 60%,var(--page-accent))}
.lioopage[data-variant=bandeau] .lp-banner+.lp-topbar{position:absolute;top:0;right:0}
.lioopage[data-variant=bandeau] .lp-banner~.lp-intro{padding-top:var(--space-4)}
@container (min-width:600px){.lioopage[data-variant=bandeau] .lp-banner{height:260px}}
/* Vitrine : carrousel à la une sous l'identité (sans carte autour), liens en grille de cartes image. */
.lioopage[data-variant=vitrine] .lp-blocks>.lp-block:first-child:has(>.lp-carousel){background:none;border:0;padding-inline:0}
.lioopage[data-variant=vitrine] .lp-block[data-block=links]{background:none;border:0;padding:0}
/* Bandeau et Vitrine prennent la largeur sur ordinateur (D119). */
@media (min-width:1000px){
 .public-page>.public-profile:is([data-layout=bandeau],[data-layout=vitrine]):has(>.lioopage){max-width:1120px;box-shadow:none}
}
.lioopage[data-composed][data-layout=liste]:is([data-variant=bandeau],[data-variant=vitrine]) .lp-page{max-width:none}
@container (min-width:960px){
 .lioopage[data-variant=bandeau] .lp-identity>:not(.lp-banner,.lp-topbar),.lioopage[data-variant=bandeau] :is(.lp-blocks,.lp-foot){max-width:var(--studio-list-max);margin-inline:auto;width:100%}
 .lioopage[data-variant=vitrine] .lp-page{padding:0 var(--space-6) var(--space-6)}
 .public-profile .lioopage:is([data-variant=bandeau],[data-variant=vitrine]) .lp-blocks{padding-top:var(--space-6)}
 .lioopage[data-variant=vitrine] .lp-intro:has(>.profile-actions){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-12);align-items:center;text-align:left}
 .lioopage[data-variant=vitrine] .lp-intro:has(>.profile-actions)>*{grid-column:1}
 .lioopage[data-variant=vitrine] .lp-intro>.profile-actions:not(.lp-socials-boutons){grid-column:2;grid-row:1 / span 8;margin:0;max-width:none}
 .lioopage[data-variant=vitrine] .lp-intro :is(.profile-avatar,.profile-bio){margin-left:0}
}