/* ==========================================================================
   IA & 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
   -------------------------------------------------------------------------- */
.sd-app {
    font-family: var(--sd-font);
    font-weight: var(--sd-weight-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.01em;
}

/* 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;
}

/* Le rouge 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 rouge de bout en bout. */
.sd-slide strong {
    color: var(--sd-heading-color);
    font-weight: var(--sd-weight-strong);
}

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

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

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

/* Bloc de code (extrait de fichier) : même fond que le code en ligne, sur la
   mesure du texte. Le code qu'il contient perd son propre fond et ses marges. */
.sd-slide pre {
    margin: 0;
    max-width: var(--sd-measure);
    padding: 0.9em 1.2em;
    border-radius: 10px;
    background: rgba(18, 26, 43, 0.06);
    font-size: var(--sd-code-size);
    line-height: 1.5;
    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 tiret court, pas un disque */
.sd-slide ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.62em;
    height: 2px;
    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: 2px;
    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-weight: var(--sd-weight-strong);
    color: var(--sd-primary-color);
}

/* --------------------------------------------------------------------------
   4. Gabarit « slide » - la grille commune aux 19 slides de contenu
   -------------------------------------------------------------------------- */
.sd-slide .s {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: var(--sd-pad-y) var(--sd-pad-x);
    text-align: left;
}

.sd-slide .s-head h2 {
    font-size: var(--sd-heading2-size);
    line-height: var(--sd-heading2-line-height);
    color: var(--sd-heading-color);
    max-width: 22em;
}

.sd-slide .s-body {
    align-self: start;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.05em;
    padding: 1.7em 0 0.6em;
}

.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 rouge à gauche. Le filet dit « ceci est la conclusion,
   pas une donnée de plus » - c'est le seul ornement du corps de slide. */
.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);
    border-left: 4px solid var(--sd-primary-color);
    padding-left: 0.7em;
    margin-top: 0.3em;
    text-wrap: pretty;
}

.sd-slide .s-punch strong {
    color: var(--sd-primary-color);
    font-weight: 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: 1px solid var(--sd-rule-color);
    padding-top: 0.7em;
}

/* Échappatoire pour une slide vraiment très dense : ajouter « dense » aux
   classes du titre (## Titre .[sbs dense #slide]) resserre l'échelle de cette
   slide seule, sans toucher au reste du deck. */
.sd-slide.dense {
    --sd-text-size: 1.62vw;
    --sd-lead-size: 1.8vw;
    --sd-punch-size: 2vw;
    --sd-text-line-height: 1.4;
}

/* 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.
   Le bloc et la punchline s'élargissent de la marge. */
.sd-slide .s-main:has(> .role),
.sd-slide .s-body:has(.role) .s-punch {
    max-width: calc(var(--sd-role-width) + var(--sd-measure));
}

.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. Chapitres - pleine page sombre, une couleur d'acte par partie
   -------------------------------------------------------------------------- */

/* 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);
    color: var(--sd-dark-text-color);
}

.sd-slide.allie {
    --sd-act: var(--sd-act-allie);
}

.sd-slide.menace {
    --sd-act: var(--sd-act-menace);
}

.sd-slide.garde {
    --sd-act: var(--sd-act-garde);
}

.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: 4vw;
    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.7em;
    font-size: var(--sd-lead-size);
    font-variant-numeric: tabular-nums;
    font-weight: var(--sd-weight-strong);
    color: var(--sd-act);
}

.sd-slide .c-num::after {
    content: "";
    width: 4vw;
    height: 2px;
    background: var(--sd-act);
}

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

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

.sd-slide .c-art .sd-img {
    display: block;
}

.sd-slide .c-art img {
    width: min(38vw, 62vh);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--sd-radius);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.09),
        0 26px 70px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   6. 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: 5vw;
    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 {
    font-size: calc(var(--sd-heading1-size) * 0.72);
    line-height: 1.25;
    font-variation-settings: "wght" 400, "wdth" var(--sd-width-title);
    color: var(--sd-dark-text-color);
    max-width: 15em;
}

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

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

.sd-slide[data-num="0"] .sd-img img {
    width: min(38vw, 66vh);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--sd-radius);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.09),
        0 26px 70px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   7. Slide orateur - photo et identité, groupées et centrées
   -------------------------------------------------------------------------- */
.sd-slide .sp {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.5vw;
    padding: 0 var(--sd-pad-x);
}

.sd-slide .sp-photo img {
    width: 27vh;
    height: 27vh;
    object-fit: cover;
    border-radius: 50%;
    box-shadow:
        0 0 0 4px var(--sd-background-color),
        0 0 0 7px var(--sd-primary-color);
}

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

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

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

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

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

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

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

/* 03 et 04 sont la même question vue des deux côtés : la barre bleu→rouge
   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: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, #1b6ef3, #c1313d);
}

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

/* --------------------------------------------------------------------------
   9. Comparaison en deux colonnes
   -------------------------------------------------------------------------- */
.sd-slide .cmp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

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

.sd-slide .cmp-b {
    padding-left: 3vw;
    border-left: 1px 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-b h3 {
    color: var(--sd-primary-color);
}

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

/* --------------------------------------------------------------------------
   10. Bas de page - une ligne discrète, plus de bandeaux pleine largeur
   -------------------------------------------------------------------------- */
.sd-slide:not([data-num="0"])::before,
.sd-slide:not([data-num="0"])::after {
    position: absolute;
    bottom: 2.4vh;
    z-index: 2;
    font-size: var(--sd-chrome-size);
    line-height: 1;
    letter-spacing: 0.02em;
    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);
}

/* --------------------------------------------------------------------------
   11. Apparition pas à pas
   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;
}

/* --------------------------------------------------------------------------
   12. 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;
}