/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   STYLE DE PRÉSENTATION (2026-10-09) : fenêtre « Présentations PowerPoint », composant Shared/StylesPresentationChoix.razor
   (cartes des styles intégrés et du masque du cabinet, aperçu en cinq diapositives, couvertures, agrandissement). Préfixe
   spc- ; titres, liens et boutons : règles de la fenêtre (memo-). Couleurs : jetons de l'application (clair et sombre). Les
   aperçus sont des images de diapositives (fond blanc) : leur cadre reste neutre dans les deux thèmes.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.spc { display: flex; flex-direction: column; gap: 10px; }
.spc .memo-rang { margin-bottom: 0; }
.spc .memo-rang.sans-titre { justify-content: flex-end; }   /* titre porté par l'étape « Style » de la fenêtre : le lien seul, à droite */
.spc-fixe { display: flex; align-items: center; gap: 8px; font-size: .78rem; line-height: 1.4; color: var(--tx2, #c9d6da);
            padding: 8px 10px; border-radius: 10px; border: 1px solid var(--o8, rgba(255,255,255,.12));
            background: color-mix(in oklab, var(--surf-2, #13202b) 70%, transparent); }
.spc-fixe svg { flex: 0 0 auto; color: var(--brand, #00b1cf); }

/* Cartes : vignette (couverture), nom, une phrase. */
/* 13/10 : dix styles, deux rangées de cinq ; plus étroit, autant de colonnes que la place en tient (deux sur téléphone, plus bas). */
.spc-cartes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 960px) { .spc-cartes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.spc-carte { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 6px 6px 10px; border-radius: 12px; cursor: pointer; min-width: 0;
             border: 1px solid var(--o8, rgba(255,255,255,.12)); color: var(--tx1, #e9f1f2);
             background: color-mix(in oklab, var(--surf-2, #13202b) 80%, transparent);
             transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.spc-carte:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand, #00b1cf) 45%, var(--o8, rgba(255,255,255,.12))); }
.spc-carte:focus-visible { outline: 2px solid var(--brand, #00b1cf); outline-offset: 2px; }
.spc-carte.choisi { border-color: var(--brand, #00b1cf); box-shadow: 0 0 0 1px var(--brand, #00b1cf) inset, 0 12px 26px -18px color-mix(in srgb, var(--brand, #00b1cf) 60%, transparent); }
.spc-carte.choisi::after { content: "✓"; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
                           font-size: .7rem; font-weight: 800; color: var(--brand-contrast, #04131a); background: var(--brand, #00b1cf); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.spc-carte.vu { border-style: dashed; border-color: color-mix(in srgb, var(--brand, #00b1cf) 60%, transparent); }
.spc-carte[aria-disabled="true"]:not(.choisi) { opacity: .78; }
.spc-carte.squelette { cursor: default; min-height: 150px; }
.spc-carte.squelette:hover { transform: none; }
.spc-vignette { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #fff;
                box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx1, #e9f1f2) 12%, transparent); }
.spc-carte.squelette .spc-vignette { background: color-mix(in srgb, var(--tx1, #e9f1f2) 8%, transparent); }
.spc-vignette img, .spc-vue-img img, .spc-couv-vis img, .spc-zoom-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.spc-carte-t { padding: 2px 4px 0; font-weight: 750; font-size: .86rem; }
.spc-carte-d { padding: 0 4px; color: var(--mut1, #9fb3ba); font-size: .72rem; line-height: 1.4;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Aperçu absent : carte neutre (jamais une image cassée). */
.spc-vide { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
            color: var(--mut1, #9fb3ba); font-size: .74rem; font-weight: 600; text-align: center;
            background: linear-gradient(135deg, color-mix(in oklab, var(--memo-a, var(--brand, #00b1cf)) 14%, var(--surf-2, #13202b)),
                                                color-mix(in oklab, var(--memo-b, var(--brand, #00b1cf)) 10%, var(--surf-1, #0e1620))); }
.spc-vide.cabinet { color: var(--brand, #00b1cf); }

/* L'aperçu déplié du style retenu (ou regardé). */
.spc-apercu { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 12px;
              border: 1px solid var(--o8, rgba(255,255,255,.12)); background: color-mix(in oklab, var(--surf-2, #13202b) 60%, transparent); }
.spc-apercu-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.spc-apercu-tete strong { font-size: .9rem; color: var(--tx1, #e9f1f2); }
.spc-apercu-tete span { flex: 1 1 260px; min-width: 0; font-size: .76rem; line-height: 1.45; color: var(--mut1, #9fb3ba); }
.spc-choisir { padding: 7px 12px; font-size: .8rem; }

/* « Recommandé » (2026-10-09) : le style qui convient au modèle choisi, un signal sur la vignette, jamais un choix. */
.spc-reco { position: absolute; top: 12px; left: 12px; z-index: 1; max-width: calc(100% - 52px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            font-size: .6rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
            color: var(--brand-contrast, #04131a); background: linear-gradient(90deg, var(--memo-a, var(--brand, #00b1cf)), var(--memo-b, var(--brand2, #3a7bd5)));
            box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.spc-carte.reco:not(.choisi) { border-color: color-mix(in srgb, var(--brand, #00b1cf) 38%, var(--o8, rgba(255,255,255,.12))); }
.spc-apercu-tete .spc-reco-note { flex: 0 0 auto; font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: var(--brand-strong, var(--brand, #00b1cf));
                                  background: color-mix(in srgb, var(--brand, #00b1cf) 13%, transparent); border: 1px solid color-mix(in srgb, var(--brand, #00b1cf) 30%, transparent); }
.spc-couvertures { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spc-couv-t { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mut1, #9fb3ba); margin-right: 4px; }
.spc-couv { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 10px; cursor: pointer; font: inherit;
            border: 1px solid var(--o8, rgba(255,255,255,.14)); background: transparent; color: var(--tx2, #c9d6da); font-size: .78rem; }
.spc-couv:hover:not(:disabled) { border-color: color-mix(in srgb, var(--brand, #00b1cf) 55%, transparent); }
.spc-couv.on { border-color: var(--brand, #00b1cf); color: var(--tx1, #e9f1f2); font-weight: 650;
               background: color-mix(in srgb, var(--brand, #00b1cf) 14%, transparent); }
.spc-couv:disabled { cursor: default; opacity: .7; }
.spc-couv-vis { display: block; width: 64px; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: #fff; }
/* 13/10 (Arthur : grand aperçu et quatre petits alignés en bas) : la colonne du grand aperçu vaut la moitié + 17,5 px, de sorte que
   son image 16:9 et sa légende aient la hauteur des deux rangées de petits (légendes de 16 px + 5, écart de 10 px :
   grand − 2 petits = 31 × 16/9). Calé en bas pour qu'un pixel d'arrondi ne se voie qu'en haut. */
.spc-vues { display: grid; grid-template-columns: calc(50% + 17.5px) repeat(2, minmax(0, 1fr)); gap: 10px; }
.spc-vue { display: flex; flex-direction: column; gap: 5px; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; color: var(--tx2, #c9d6da); font: inherit; min-width: 0; }
.spc-vue.premiere { grid-column: 1; grid-row: span 2; align-self: end; }
.spc-vue-img { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #fff;
               box-shadow: 0 0 0 1px color-mix(in srgb, var(--tx1, #e9f1f2) 14%, transparent), 0 10px 22px -18px rgba(0,0,0,.7);
               transition: transform .16s ease, box-shadow .16s ease; }
.spc-vue:hover .spc-vue-img { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--brand, #00b1cf), 0 14px 26px -18px rgba(0,0,0,.7); }
.spc-vue:focus-visible { outline: none; }
.spc-vue:focus-visible .spc-vue-img { box-shadow: 0 0 0 2px var(--brand, #00b1cf); }
.spc-vue-t { font-size: .72rem; line-height: 16px; height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--mut1, #9fb3ba); }
.spc-note { font-size: .7rem; line-height: 1.45; color: var(--mut1, #9fb3ba); }

/* Agrandissement : au-dessus de la fenêtre, la diapositive à la largeur disponible. */
.spc-zoom { position: fixed; inset: 0; z-index: 12100; display: flex; align-items: center; justify-content: center; padding: 24px;
            background: rgba(4, 12, 18, .82); }
.spc-zoom-f { margin: 0; width: min(1180px, 100%); display: flex; flex-direction: column; gap: 10px; }
.spc-zoom-img { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -20px rgba(0,0,0,.8); }
.spc-zoom-img .spc-vide span { font-size: .9rem; }
.spc-zoom figcaption { display: flex; align-items: center; justify-content: center; gap: 12px; color: #e9f1f2; font-size: .82rem; }
.spc-zoom figcaption span { flex: 0 1 auto; min-width: 0; text-align: center; }
.spc-zoom-btn { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; font-size: 1.3rem; line-height: 1;
                color: #e9f1f2; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.spc-zoom-btn:hover { background: rgba(255,255,255,.18); }
.spc-zoom-btn:focus-visible { outline: 2px solid var(--brand, #00b1cf); outline-offset: 2px; }
.spc-zoom-btn.fermer { margin-left: 8px; }

@media (max-width: 720px) {
    .spc-vues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spc-vue.premiere { grid-column: span 2; grid-row: auto; align-self: auto; }
}
@media (max-width: 520px) {
    .spc-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .spc-carte-d { display: none; }
    .spc-zoom { padding: 12px; }
    .spc-zoom figcaption { gap: 8px; font-size: .74rem; }
}

/*  PASSE MOBILE, LOT B (2026-10-11). Tablette et paysage de téléphone (521 à 1024 px) : la phrase de chaque carte était coupée
    à deux lignes (7 cartes sur 7 à 768, 812 et 844 px) ; elle s'affiche entière. Sous 520 px, elle reste masquée (ci-dessus). */
@media (min-width: 521px) and (max-width: 1024px) {
    .spc-carte-d { display: block; -webkit-line-clamp: unset; overflow: visible; }
}
/*  Au doigt : précédente, suivante et fermer de l'agrandissement à 44 px. */
@media (pointer: coarse) {
    .spc-zoom-btn { width: 44px; height: 44px; }
}

/* ═══ 2026-10-15 : ONGLETS « Styles intégrés » | « Personnalisés » et MASQUES (cabinet, client du dossier) ═══════════════════════
   Sélecteur segmenté en tête de l'étape ; l'onglet « Personnalisés » range les masques en cartes au format des styles, avec un
   aperçu DESSINÉ d'après le thème du masque (spc-mq-, couleurs et polices passées en variables par le composant). */
.spc-onglets { display: inline-flex; align-self: flex-start; max-width: 100%; padding: 3px; gap: 3px; border-radius: 11px;
               border: 1px solid var(--o8, rgba(255,255,255,.14)); background: color-mix(in oklab, var(--surf-2, #13202b) 70%, transparent); }
.spc-onglet { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 14px; border: 0; border-radius: 8px; cursor: pointer;
              font: inherit; font-size: .82rem; font-weight: 650; color: var(--tx2, #c9d6da); background: transparent; white-space: nowrap;
              transition: background .15s ease, color .15s ease; }
.spc-onglet:hover { color: var(--tx1, #e9f1f2); }
.spc-onglet.on { color: var(--tx1, #e9f1f2); background: color-mix(in srgb, var(--brand, #00b1cf) 20%, transparent);
                 box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand, #00b1cf) 45%, transparent) inset; }
.spc-onglet:focus-visible { outline: 2px solid var(--brand, #00b1cf); outline-offset: 1px; }
.spc-onglet-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: .68rem; font-weight: 750;
                color: var(--mut1, #9fb3ba); background: color-mix(in srgb, var(--tx1, #e9f1f2) 9%, transparent); }
.spc-onglet.on .spc-onglet-n { color: var(--brand-contrast, #04131a); background: var(--brand, #00b1cf); }
.spc-panneau { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.spc-rappel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .78rem; color: var(--tx2, #c9d6da); }
.spc-perso-vide { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--tx2, #c9d6da); }

/* Cartes des masques : même grille et même format que les styles (quatre colonnes au plus : jamais une rangée presque vide). */
.spc-cartes.perso { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .spc-cartes.perso { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
.spc-carte.ajout { cursor: default; border-style: dashed; background: transparent; }
.spc-carte.ajout:hover { transform: none; border-color: color-mix(in srgb, var(--brand, #00b1cf) 55%, transparent); }
.spc-carte.ajout.occupe { opacity: .7; }
.spc-ajout-lien { position: relative; display: flex; flex-direction: column; gap: 5px; cursor: pointer; min-width: 0; }
.spc-ajout-lien input[type=file], .spc-ajout-cible input[type=file], .spc-remplacer input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.spc-ajout-lien:focus-within .spc-vignette, .spc-ajout-cible:focus-within { outline: 2px solid var(--brand, #00b1cf); outline-offset: 2px; }
.spc-carte.ajout .spc-vignette { background: color-mix(in srgb, var(--brand, #00b1cf) 6%, transparent); box-shadow: none;
                                 border: 1px dashed color-mix(in srgb, var(--brand, #00b1cf) 40%, transparent); }
.spc-ajout-vis { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 10px;
                 text-align: center; color: var(--brand-strong, var(--brand, #00b1cf)); font-size: .74rem; font-weight: 650; }
.spc-ajout-cibles { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.spc-ajout-cible { position: relative; display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 10px; border-radius: 9px; cursor: pointer;
                   font-size: .76rem; font-weight: 650; color: var(--tx1, #e9f1f2); text-align: center; overflow: hidden;
                   border: 1px solid color-mix(in srgb, var(--brand, #00b1cf) 40%, transparent); background: color-mix(in srgb, var(--brand, #00b1cf) 10%, transparent); }
.spc-ajout-cible span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spc-ajout-cible:hover { background: color-mix(in srgb, var(--brand, #00b1cf) 18%, transparent); }

/* Les aperçus dessinés : une couverture et une page de contenu aux couleurs et aux polices du thème du masque. Unités relatives à
   la largeur du cadre (cqw) : la même diapositive en vignette et en grand. */
.spc-mq { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; container-type: inline-size;
          background: var(--mq-fond, #fff); color: var(--mq-texte, #222); font-family: var(--mq-corps, system-ui, sans-serif); text-align: left; }
.spc-mq-couv .spc-mq-logo { position: absolute; top: 9cqw; left: 8cqw; width: 11cqw; height: 3.4cqw; border-radius: 1cqw; opacity: .9; }
.spc-mq-couv .spc-mq-filet { position: absolute; left: 8cqw; top: 40cqw; width: 12cqw; height: 1cqw; background: var(--mq-trait, currentColor); }
.spc-mq-couv .spc-mq-t { position: absolute; left: 8cqw; right: 10cqw; top: 23cqw; font-family: var(--mq-titres, Georgia, serif); font-size: 7.2cqw; line-height: 1.05; font-weight: 700;
                          display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spc-mq-couv .spc-mq-s { position: absolute; left: 8cqw; right: 10cqw; top: 44cqw; font-size: 3.4cqw; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spc-mq-bande { position: absolute; left: 0; right: 0; bottom: 0; height: 2.6cqw; display: flex; }
.spc-mq-bande i { flex: 1 1 0; }
.spc-mq-page .spc-mq-et { position: absolute; left: 6cqw; top: 5cqw; font-size: 2.3cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mq-etiquette, currentColor); }
.spc-mq-page .spc-mq-t { position: absolute; left: 6cqw; right: 8cqw; top: 9cqw; font-family: var(--mq-titres, Georgia, serif); font-size: 4.4cqw; line-height: 1.12; font-weight: 700;
                          color: var(--mq-titre, currentColor); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spc-mq-page .spc-mq-filet { position: absolute; left: 6cqw; right: 6cqw; top: 21cqw; height: .45cqw; background: var(--mq-trait, currentColor); }
.spc-mq-corps { position: absolute; left: 6cqw; right: 6cqw; top: 25cqw; bottom: 9cqw; display: grid; grid-template-columns: 1fr 1.15fr; gap: 5cqw; }
.spc-mq-points { display: flex; flex-direction: column; gap: 1.6cqw; font-size: 2.6cqw; line-height: 1.3; min-width: 0; }
.spc-mq-points b { font-family: var(--mq-titres, Georgia, serif); font-size: 2.9cqw; color: var(--mq-titre, currentColor); }
.spc-mq-points span { position: relative; padding-left: 2.6cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spc-mq-points span::before { content: ""; position: absolute; left: 0; top: .55em; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--mq-trait, currentColor); }
.spc-mq-graphe { display: flex; align-items: flex-end; gap: 2cqw; border-bottom: .3cqw solid color-mix(in srgb, var(--mq-texte, #222) 35%, transparent); padding: 0 1cqw; }
.spc-mq-graphe i { flex: 1 1 0; border-radius: .5cqw .5cqw 0 0; }
.spc-mq-pied { position: absolute; left: 6cqw; right: 6cqw; bottom: 3cqw; display: flex; justify-content: space-between; font-size: 1.9cqw; opacity: .7; }

/* L'aperçu déplié d'un masque : couverture en grand, page de contenu, vignette du fichier ; thème et contrôle dessous. */
.spc-mq-vues { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; align-items: end; }
.spc-mq-vue { margin: 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.spc-mq-vue figcaption { font-size: .72rem; line-height: 16px; color: var(--mut1, #9fb3ba); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spc-mq-cadre { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #fff;
                box-shadow: 0 0 0 1px color-mix(in srgb, var(--tx1, #e9f1f2) 14%, transparent), 0 10px 22px -18px rgba(0,0,0,.7); }
.spc-mq-cadre img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.spc-mq-theme { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.spc-mq-bloc { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.spc-mq-nuancier { display: flex; flex-wrap: wrap; gap: 6px; }
.spc-mq-pastille { width: 26px; height: 26px; border-radius: 7px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx1, #e9f1f2) 22%, transparent); }
.spc-mq-polices { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .95rem; color: var(--tx1, #e9f1f2); }
.spc-mq-polices em { font-style: normal; font-family: system-ui, sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                     color: var(--mut1, #9fb3ba); margin-right: 4px; }
.spc-mq-controle summary { cursor: pointer; font-size: .78rem; font-weight: 650; color: var(--tx2, #c9d6da); }
.spc-mq-controle[open] summary { margin-bottom: 8px; }
.spc-mq-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.spc-mq-actions { display: inline-flex; align-items: center; gap: 14px; }
.spc-remplacer { position: relative; display: inline-flex; overflow: hidden; }
@media (max-width: 720px) {
    .spc-mq-vues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spc-mq-vue.premiere { grid-column: span 2; }
}
@media (max-width: 520px) {
    .spc-cartes.perso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spc-onglets { align-self: stretch; }
    .spc-onglet { flex: 1 1 0; justify-content: center; padding: 6px 8px; min-height: 40px; }
}