/* ==========================================================================
   AI & InnerSource - MISE EN FORME DES ÉLÉMENTS
   --------------------------------------------------------------------------
   Aucune valeur littérale ici : tout vient des tokens de theme.css.
   Ordre de chargement SliDesk : slidesk.css → templates/**.css → themes/**.css
   → CSS des plugins. Les règles ci-dessous sont donc préfixées par .sd-app ou
   .sd-slide là où elles doivent passer devant SliDesk ou devant les plugins.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonte auto-hébergée (sous-ensemble latin : le deck n'utilise rien d'autre)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 75% 125%;
    font-display: block;
    src: url("../../assets/fonts/archivo-variable.woff2") format("woff2");
}

@font-face {
    font-family: "Archivo";
    font-style: italic;
    font-weight: 400 700;
    font-stretch: 75% 125%;
    font-display: block;
    src: url("../../assets/fonts/archivo-variable-italic.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   2. Base typographique
   Une seule famille, deux voix : les titres sur l'axe wdth étendu (122), le
   texte à la largeur normale. C'est tout le contraste typographique du deck.
   -------------------------------------------------------------------------- */
.sd-app {
    font-family: var(--sd-font);
    font-weight: var(--sd-weight-text);
    font-variation-settings: "wght" var(--sd-weight-text), "wdth" var(--sd-width-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.sd-slide h1,
.sd-slide h2,
.sd-slide h3 {
    margin: 0;
    text-align: left;
    text-wrap: balance;
    font-variation-settings:
        "wght" var(--sd-weight-title),
        "wdth" var(--sd-width-title);
    letter-spacing: -0.015em;
}

/* Paragraphes alignés à gauche comme les listes : c'est ce qui met fin
   à l'alternance centré / aligné d'une slide à l'autre. */
.sd-slide p {
    margin: 0 0 0.55em;
    text-align: left;
}

.sd-slide p:last-child {
    margin-bottom: 0;
}

/* L'accent est réservé aux marqueurs, aux numéros, au filet de punchline
   et aux liens. Le gras se distingue par la graisse et l'encre, pas par
   la couleur - sinon le deck est teal de bout en bout. */
.sd-slide strong {
    color: var(--sd-heading-color);
    font-weight: var(--sd-weight-strong);
    font-variation-settings: "wght" var(--sd-weight-strong), "wdth" var(--sd-width-text);
}

.sd-slide em {
    font-style: italic;
}

.sd-slide a {
    color: var(--sd-primary-color);
    text-underline-offset: 0.18em;
    text-decoration-thickness: var(--sd-hairline);
}

/* Anneau de focus visible sur les deux fonds : l'anneau par défaut du
   navigateur est sombre, donc invisible sur les slides en teal profond. */
.sd-slide a:focus-visible {
    outline: 3px solid var(--sd-primary-color);
    outline-offset: 3px;
    border-radius: 2px;
}

.sd-slide code {
    font-family: var(--sd-font-mono);
    font-size: 0.86em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: rgba(5, 107, 106, 0.1);
    color: var(--sd-heading-color);
}

/* Bloc de code (extrait de fichier) : fond teal très dilué, filet d'accent à
   gauche. Le code qu'il contient perd son propre fond et ses marges. */
.sd-slide pre {
    margin: 0;
    width: fit-content;
    max-width: var(--sd-measure);
    padding: 0.9em 1.2em;
    border-left: 3px solid var(--sd-primary-color);
    background: rgba(5, 107, 106, 0.07);
    font-size: var(--sd-code-size);
    line-height: 1.55;
    white-space: pre-wrap;
    text-align: left;
}

.sd-slide pre code {
    padding: 0;
    background: none;
    font-size: inherit;
    color: var(--sd-text-color);
}

/* --------------------------------------------------------------------------
   3. Listes - SliDesk n'en style aucune, tout est à poser ici
   -------------------------------------------------------------------------- */
.sd-slide ul,
.sd-slide ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sd-slide li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: var(--sd-list-gap);
}

.sd-slide li:last-child {
    margin-bottom: 0;
}

/* Puce : un trait court, pas un disque. */
.sd-slide ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 0.66em;
    height: var(--sd-hairline);
    border-radius: var(--sd-hairline);
    background: var(--sd-primary-color);
}

/* Second niveau : plus petit, atténué, marqué par un filet vertical */
.sd-slide li ul,
.sd-slide li ol {
    margin-top: 0.35em;
}

.sd-slide li li {
    font-size: 0.86em;
    color: var(--sd-muted-color);
    padding-left: 1.15em;
    margin-bottom: 0.3em;
}

.sd-slide li li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.28em;
    bottom: 0.28em;
    width: var(--sd-hairline);
    height: auto;
    background: var(--sd-rule-color);
}

/* Liste numérotée : réservée aux vraies séquences (la feuille de route) */
.sd-slide ol > li {
    padding-left: 2.7em;
    margin-bottom: 0.7em;
}

.sd-slide ol > li::before {
    content: counter(list-item, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-variant-numeric: tabular-nums;
    font-variation-settings: "wght" var(--sd-weight-title), "wdth" var(--sd-width-title);
    color: var(--sd-primary-color);
}

/* --------------------------------------------------------------------------
   4. Gabarit « slide » - deux colonnes
   Le titre tient dans la colonne de gauche et y reste ; le corps coule à
   droite sur toute la hauteur. Le quart bas gauche reste vide : c'est là que
   se pose la vignette caméra pendant la visio.
   -------------------------------------------------------------------------- */
.sd-slide .s {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: var(--sd-col-title) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: var(--sd-col-gap);
    padding: var(--sd-pad-y) var(--sd-pad-x) calc(var(--sd-pad-y) + 2vh);
    text-align: left;
}

.sd-slide .s > .s-head {
    grid-area: 1 / 1;
    align-self: start;
}

.sd-slide .s > .s-body {
    grid-area: 1 / 2;
}

.sd-slide .s > .s-note {
    grid-area: 2 / 2;
}

.sd-slide .s-head h2 {
    font-size: var(--sd-heading2-size);
    line-height: var(--sd-heading2-line-height);
    color: var(--sd-heading-color);
    text-wrap: pretty;
}

/* Titre à deux niveaux. Les 12 slides de pilier s'écrivent
   « ## **Pilier** <br/> précision » : le pilier prend la voix étendue,
   la précision reste en largeur normale, sous lui. C'est le même mécanisme
   que la couverture, et ça tient dans la colonne étroite sans se replier
   en quatre lignes molles. */
.sd-slide .s-head h2:has(strong) {
    font-size: calc(var(--sd-heading2-size) * 0.7);
    line-height: 1.22;
    letter-spacing: 0;
    color: var(--sd-text-color);
    font-variation-settings: "wght" 450, "wdth" var(--sd-width-text);
}

.sd-slide .s-head h2 strong {
    display: block;
    margin-bottom: 0.26em;
    font-size: 1.68em;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--sd-heading-color);
    font-variation-settings: "wght" var(--sd-weight-title), "wdth" var(--sd-width-title);
}

.sd-slide .s-head h2 br {
    display: none;
}

.sd-slide .s-body {
    align-self: stretch;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.05em;
    /* aligne optiquement la première ligne du corps sur celle du titre,
       qui est plus gros donc pose sa ligne de base un peu plus bas */
    padding-top: 0.25vw;
}

.sd-slide .s-lead,
.sd-slide .s-main,
.sd-slide .s-punch,
.sd-slide .s-note {
    max-width: var(--sd-measure);
}

.sd-slide .s-lead {
    font-size: var(--sd-lead-size);
    line-height: 1.35;
    color: var(--sd-heading-color);
    text-wrap: pretty;
}

.sd-slide .s-main > :not(:first-child) {
    margin-top: 0.75em;
}


/* La punchline : filet d'accent à gauche. Le filet dit « ceci est la
   conclusion, pas une donnée de plus » - seul ornement du corps de slide.
   Elle suit le contenu à un intervalle fixe, elle ne tombe pas en bas de la
   colonne : la conclusion appartient au raisonnement qui la précède. */
.sd-slide .s-punch {
    font-size: var(--sd-punch-size);
    line-height: 1.25;
    color: var(--sd-heading-color);
    font-variation-settings: "wght" var(--sd-weight-title), "wdth" 108;
    border-left: 5px solid var(--sd-primary-color);
    padding-left: 0.7em;
    margin-top: 0.5em;
    text-wrap: pretty;
}

.sd-slide .s-punch strong {
    color: var(--sd-primary-color);
    font-weight: inherit;
    font-variation-settings: inherit;
}

/* Source / renvoi, en bas du bloc de contenu */
.sd-slide .s-note {
    align-self: end;
    font-size: var(--sd-note-size);
    line-height: 1.4;
    color: var(--sd-muted-color);
    border-top: var(--sd-hairline) solid var(--sd-rule-color);
    padding-top: 0.7em;
}

/* Une colonne : la comparaison, le bloc de code, et toute slide marquée
   « wide » dans ses classes (## Titre .[sbs wide #slide]). */
.sd-slide .s-wide,
.sd-slide.wide .s {
    --sd-measure: 70vw;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.sd-slide .s-wide > .s-head,
.sd-slide.wide .s > .s-head {
    grid-area: 1 / 1;
}

.sd-slide .s-wide > .s-body,
.sd-slide.wide .s > .s-body {
    grid-area: 2 / 1;
    padding-top: 1.6vw;
}

.sd-slide .s-wide > .s-note,
.sd-slide.wide .s > .s-note {
    grid-area: 3 / 1;
}

.sd-slide .s-wide .s-head h2,
.sd-slide.wide .s-head h2 {
    font-size: calc(var(--sd-heading2-size) * 1.12);
    max-width: 24em;
}

/* Deux échappatoires d'échelle, à poser dans les classes du titre
   (## Titre .[sbs dense #slide]). Elles ne valent que pour la slide marquée.
   « dense » resserre une slide trop pleine ; « large » ouvre une slide courte,
   dont le corps tient lieu de chapeau et qui sinon pose trois lignes
   minuscules en haut d'une colonne vide. */
.sd-slide.dense {
    --sd-text-size: 1.52vw;
    --sd-lead-size: 1.7vw;
    --sd-punch-size: 1.9vw;
    --sd-text-line-height: 1.4;
}

.sd-slide.large {
    --sd-text-size: 1.95vw;
}

/* Blocs par rôle (<div class="step role"> + ### Rôle) : l'intitulé passe en
   marge, sur la ligne de base du premier paragraphe. Les rôles se lisent d'un
   coup d'œil en colonne, et le texte garde sa mesure sans ajouter de lignes. */
.sd-slide .role {
    display: grid;
    grid-template-columns: var(--sd-role-width) minmax(0, 1fr);
    align-items: baseline;
}

.sd-slide .role > * {
    grid-column: 2;
}

.sd-slide .role > h3 {
    grid-column: 1;
    font-size: var(--sd-heading3-size);
    line-height: var(--sd-heading3-line-height);
    color: var(--sd-heading-color);
}

/* Plus d'air entre deux rôles qu'entre deux paragraphes d'un même rôle */
.sd-slide .s-main > .role + .role {
    margin-top: 1.7em;
}

/* --------------------------------------------------------------------------
   5. Hexagone
   La forme de la marque InnerSource Commons, et le seul traitement appliqué
   aux images : toutes y passent - couverture, chapitres, photo de l'orateur -
   et toutes gardent leurs couleurs d'origine, comme la photo découpée en
   hexagone sur le visuel d'annonce du talk.
   -------------------------------------------------------------------------- */
.sd-slide .c-art .sd-img:not(.isc-mark),
.sd-slide[data-num="0"] > .sd-img:not(.isc-mark) {
    margin: 0;
    clip-path: var(--isc-hex);
}

.sd-slide .c-art .sd-img:not(.isc-mark) img,
.sd-slide[data-num="0"] > .sd-img:not(.isc-mark) img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* léger zoom : les illustrations portent du texte français sur leurs bords,
       l'hexagone en coupe l'essentiel, ce recadrage finit le travail. */
    transform: scale(1.12);
}

/* La marque InnerSource Commons ne passe jamais au duotone : elle est posée
   telle quelle, sur fond sombre comme sur le visuel d'annonce du talk. */
.sd-slide .c-art .isc-mark {
    margin: 0;
    width: 13vw;
}

.sd-slide .c-art .isc-mark img {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   6. Chapitres - pleine page sombre
   -------------------------------------------------------------------------- */

/* Les slides sombres réutilisent tout le CSS clair : seules les encres changent. */
.sd-slide[data-num="0"],
.sd-slide.chapter {
    --sd-heading-color: var(--sd-dark-heading-color);
    --sd-text-color: var(--sd-dark-text-color);
    --sd-muted-color: var(--sd-dark-muted-color);
    --sd-rule-color: rgba(233, 247, 247, 0.28);
    --sd-primary-color: var(--isc-teal-bright);
    --isc-warn: var(--isc-amber);
    color: var(--sd-dark-text-color);
}

/* L'acte « nemesis » bascule l'accent sur l'ambre : puces, numéros et filet de
   punchline passent au chaud dans toute la partie « menace ». Une variable,
   un acte - et l'ambre ne sert à rien d'autre dans le deck. */
.sd-slide.menace {
    --sd-primary-color: var(--isc-warn);
}

.sd-slide .c {
    position: absolute;
    inset: 0;
    background: var(--sd-dark-bg);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5vw;
    padding: var(--sd-pad-y) var(--sd-pad-x);
}

.sd-slide .c-text {
    color: var(--sd-text-color);
}

/* Le numéro reprend celui de l'agenda : il dit où on en est dans le plan. */
.sd-slide .c-num {
    display: flex;
    align-items: center;
    gap: 0.9em;
    margin: 0 0 0.6em;
    font-size: var(--sd-lead-size);
    font-variant-numeric: tabular-nums;
    font-variation-settings: "wght" var(--sd-weight-title), "wdth" var(--sd-width-title);
    color: var(--sd-primary-color);
}

.sd-slide .c-num::after {
    content: "";
    width: 5vw;
    height: 3px;
    background: var(--sd-primary-color);
}

.sd-slide .c-text h2 {
    font-size: calc(var(--sd-heading2-size) * 1.78);
    line-height: 1.02;
    max-width: 11em;
}

.sd-slide .c-lead {
    margin-top: 1.1em;
    max-width: 26em;
}

/* Slide de fin : elle reste affichée pendant tout le temps des questions.
   Elle doit donner le nom, le lien et qui nous reçoit, sans se replier. */
.sd-slide.outro .c-lead {
    max-width: 34em;
}

.sd-slide .c-art .sd-img:not(.isc-mark) {
    display: block;
    width: min(33vw, 56vh);
    aspect-ratio: 1 / 1.1547;
}

/* --------------------------------------------------------------------------
   7. Couverture (première slide : un h1, pas de gabarit possible)
   -------------------------------------------------------------------------- */
.sd-slide[data-num="0"] {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6vw;
    padding: 0 var(--sd-pad-x);
    background: var(--sd-dark-bg);
}

/* Le titre du talk est dans un <strong>, le sous-titre suit après un <br/> :
   on s'appuie dessus pour donner deux niveaux au lieu d'un pavé de trois lignes. */
.sd-slide[data-num="0"] h1 {
    position: relative;
    font-size: calc(var(--sd-heading1-size) * 0.62);
    line-height: 1.28;
    font-variation-settings: "wght" 400, "wdth" var(--sd-width-text);
    color: var(--sd-dark-text-color);
    max-width: 16em;
    letter-spacing: 0;
    /* laisse la place au bandeau d'événement posé en ::before */
    padding-top: 3.6vw;
}

.sd-slide[data-num="0"] h1 br {
    display: none;
}

.sd-slide[data-num="0"] h1 strong {
    display: block;
    margin-bottom: 0.26em;
    font-size: 1.85em;
    line-height: var(--sd-heading1-line-height);
    color: var(--sd-dark-heading-color);
    letter-spacing: -0.02em;
    font-variation-settings: "wght" var(--sd-weight-title), "wdth" var(--sd-width-title);
}

/* Le bandeau d'événement : qui nous reçoit, et quand. */
.sd-slide[data-num="0"] h1::before {
    content: var(--sd-cover-kicker) "  ·  " var(--sd-cover-date);
    position: absolute;
    top: 0;
    left: 0;
    font-size: calc(var(--sd-chrome-size) * 1.15);
    line-height: 1;
    color: var(--isc-teal-bright);
    font-variation-settings: "wght" var(--sd-weight-strong), "wdth" var(--sd-width-text);
}

.sd-slide[data-num="0"] > .sd-img:not(.isc-mark) {
    flex: none;
    width: min(34vw, 62vh);
    aspect-ratio: 1 / 1.1547;
}

/* La marque InnerSource Commons, posée telle quelle : son hexagone noir et son
   tissage blanc tiennent sur le teal sombre, c'est l'usage qu'en fait le visuel
   d'annonce du talk. Aucune retouche, aucune plaque. */
.sd-slide[data-num="0"] .isc-mark {
    position: absolute;
    top: 6vh;
    right: var(--sd-pad-x);
    margin: 0;
    width: 6vw;
}

.sd-slide[data-num="0"] .isc-mark img {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   8. Slide orateur - hexagone, comme sur le visuel d'annonce du talk
   -------------------------------------------------------------------------- */
.sd-slide .sp {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4vw;
    padding: 0 var(--sd-pad-x);
}

.sd-slide .sp-photo {
    flex: none;
    width: 25vh;
    aspect-ratio: 1 / 1.1547;
    padding: 0.4vh;
    background: var(--isc-teal);
    clip-path: var(--isc-hex);
}

.sd-slide .sp-photo .sd-img {
    margin: 0;
    width: 100%;
    height: 100%;
    clip-path: var(--isc-hex);
}

.sd-slide .sp-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sd-slide .sp-id h2 {
    font-size: calc(var(--sd-heading2-size) * 1.3);
    margin-bottom: 0.3em;
}

.sd-slide .sp-id p,
.sd-slide .sp-id p strong {
    font-size: var(--sd-lead-size);
    color: var(--sd-muted-color);
}

.sd-slide .sp-id .company-logo {
    display: block;
    margin: 1.2em 0 0;
}

.sd-slide .sp-id .company-logo img {
    width: 12vw;
    height: auto;
}

/* --------------------------------------------------------------------------
   9. Agenda
   -------------------------------------------------------------------------- */
.sd-slide .a-list {
    font-size: 1.12em;
    gap: 0;
}

.sd-slide .a-list ol > li {
    margin-bottom: 0.6em;
}

.sd-slide .a-list ol > li::before {
    color: var(--sd-muted-color);
}

/* 02 et 03 sont la même question vue des deux côtés : la barre teal→ambre
   le dit, et laisse le bord gauche des intitulés intact. */
.sd-slide .a-duo {
    position: relative;
    padding: 0.5em 0;
    margin: 0.15em 0;
}

.sd-slide .a-duo::before {
    content: "";
    position: absolute;
    left: -1.5em;
    top: 0.25em;
    bottom: 0.25em;
    width: 5px;
    border-radius: 5px;
    background: linear-gradient(180deg, var(--isc-teal-ink), var(--isc-amber-ink));
}

.sd-slide .a-duo ol > li::before {
    color: var(--sd-primary-color);
}

/* --------------------------------------------------------------------------
   10. Comparaison en deux colonnes
   -------------------------------------------------------------------------- */
.sd-slide .cmp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    max-width: var(--sd-measure);
}

.sd-slide .cmp-a {
    padding-right: 3vw;
}

.sd-slide .cmp-b {
    padding-left: 3vw;
    border-left: var(--sd-hairline) solid var(--sd-rule-color);
}

.sd-slide .cmp-col h3 {
    font-size: var(--sd-heading3-size);
    line-height: var(--sd-heading3-line-height);
    margin-bottom: 0.7em;
}

.sd-slide .cmp-a h3 {
    color: var(--sd-muted-color);
}

.sd-slide .cmp-a li::before {
    background: var(--sd-rule-color);
}

.sd-slide .cmp-b h3 {
    color: var(--sd-primary-color);
}

.sd-slide .cmp li {
    font-size: 0.92em;
}

/* --------------------------------------------------------------------------
   11. Bas de page - une ligne discrète, mais lisible après encodage vidéo
   -------------------------------------------------------------------------- */
.sd-slide:not([data-num="0"])::before,
.sd-slide:not([data-num="0"])::after {
    position: absolute;
    bottom: 2.6vh;
    z-index: 2;
    font-size: var(--sd-chrome-size);
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--sd-muted-color);
    font-variant-numeric: tabular-nums;
}

.sd-slide:not([data-num="0"])::before {
    content: var(--sd-chrome-left);
    left: var(--sd-pad-x);
}

.sd-slide:not([data-num="0"])::after {
    content: var(--sd-chrome-right) "  ·  " attr(data-num);
    right: var(--sd-pad-x);
}

/* Les chapitres sont des respirations pleine page : aucun bandeau dessus.
   Les slides sombres du deck ne portent donc jamais de chrome, couverture
   et slide de fin comprises. */
.sd-slide.chapter::before,
.sd-slide.chapter::after {
    content: none;
}

/* --------------------------------------------------------------------------
   12. Apparition pas à pas
   Seule animation du deck, et elle répond à une action : rien ne bouge à
   l'arrivée sur une slide.
   Le CSS des plugins est chargé après celui-ci : il faut une spécificité
   supérieure pour ajouter le déplacement à leur fondu.
   -------------------------------------------------------------------------- */
.sd-app .sbs .step {
    opacity: 0;
    transform: translateY(0.25em);
    transition:
        opacity var(--animationSBSSteps),
        transform var(--animationSBSSteps);
}

.sd-app .sbs .step.step-shown {
    opacity: 1;
    transform: none;
}

.sd-app .steps li {
    opacity: 0;
    transition: opacity var(--animationSteps);
}

.sd-app .steps li.step-shown {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .sd-app .sbs .step {
        transform: none;
    }
}

@media print {
    .sd-app .sbs .step,
    .sd-app .steps li {
        opacity: 1;
        transform: none;
    }
}

/* Reste de la slide pour les gabarits sans zone de contenu (chapitre, agenda,
   comparaison) : n'y arrivent normalement que les notes du conférencier, déjà
   masquées par SliDesk. display:contents évite d'introduire une boîte, tout en
   laissant apparaître un contenu oublié hors bloc - donc visible à la relecture. */
.sd-slide .s-rest {
    display: contents;
}

/* --------------------------------------------------------------------------
   13. Conteneurs de bloc vides
   Un bloc [[...]] non utilisé laisse son conteneur en place : il ne doit rien
   occuper. :not(:has(*)) couvre aussi le cas « uniquement des blancs ».
   À garder en dernier : même spécificité que .c-num { display: flex }, donc
   c'est l'ordre qui tranche.
   -------------------------------------------------------------------------- */
.sd-slide .s-lead:not(:has(*)),
.sd-slide .s-main:not(:has(*)),
.sd-slide .s-punch:not(:has(*)),
.sd-slide .s-note:not(:has(*)),
.sd-slide .c-lead:not(:has(*)),
.sd-slide .c-art:not(:has(*)),
.sd-slide .a-duo:not(:has(*)),
.sd-slide .c-num:not(:has(*)) {
    display: none;
}