/* ===================================================================
   WIDES, feuille d'extensions (site/extensions.css).
   Créée au lot L2 de l'édition souple (13/10/2026), vide à l'origine.
   Chargée juste après styles.css : à spécificité égale, une règle
   écrite ici l'emporte sur styles.css.

   À QUOI ELLE SERT. Le cas rare qu'aucun composant (cmp-) ni aucun
   utilitaire (u-) du catalogue ne couvre. Avant d'écrire ici, chercher
   d'abord dans le catalogue : la plupart des demandes se règlent par
   une classe existante, sans une ligne de CSS.

   RÈGLES, contrôlées automatiquement à chaque envoi (contrôle de
   charte) ; une règle qui en sort est refusée avec sa raison :
   1. Sélecteurs : chaque sélecteur commence par une classe préfixée
      « x- » (exemple : .x-board-note, .x-board-note strong). Jamais un
      sélecteur global : ni *, ni :root, ni html, ni body, ni un nom de
      balise seul, ni une classe du site (cmp-, u-, btn-, tile, etc.)
      en tête de sélecteur. Une extension ne restyle jamais un
      composant commun : elle s'ajoute à côté, sur une classe x- posée
      dans la page.
   2. Valeurs : jetons du :root de styles.css seulement, par var(--...).
      Couleurs : var(--navy), var(--bordeaux), var(--muted), etc. ;
      aucune valeur hexadécimale, rgb, hsl ni nom de couleur. Tailles
      de texte : var(--fs-12) à var(--fs-64). Espacements :
      var(--space-3xs) à var(--space-4xl). Aucune variable nouvelle.
   3. Polices : aucune déclaration font-family ; la charte n'en a que
      deux, déjà posées par le site.
   4. Ressources : ni url( ni @import, sous aucune forme.
   5. Contraste : texte rouge = var(--bordeaux) sur fond clair,
      var(--red-on-dark) sur fond sombre ; var(--red) n'est jamais une
      couleur de texte. Aucun dégradé, aucune ombre décorative. Une
      extension qui pose un fond sombre (var(--navy), var(--navy-deep))
      met aussi la classe u-on-dark sur le même élément dans la page
      (class="x-... u-on-dark") : les classes u- qu'il contient basculent
      alors seules en variantes lisibles sur fond sombre.
   6. Largeurs : jamais de largeur fixe en px qui ferait déborder la
      page à 390px ; max-width plutôt que width.
   7. Jamais !important : il est réservé aux utilitaires u- du site.

   Chaque règle porte une ligne de commentaire au-dessus : ce qu'elle
   fait, sur quelle page, à quelle date.
   =================================================================== */

/* Carte OCT en grand en haut de chaque vignette e1 à e4 OCT, page Corneal Epithelial OCT, 20/10/2026 */
.x-stage-img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-sm);
}

/* Grading O1 à O4 : une seule vignette par grade (grade en grand, photo, puis texte de l'échelle), deux vignettes par ligne ; la photo et la carte de texte se soudent visuellement, page Meibomian Gland Expression, 20/10/2026 */
.x-mge-pairs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-md);
    row-gap: 0;
    margin: var(--space-lg) 0 var(--space-xl);
}

.x-mge-pairs .dx-stages {
    display: contents;
}

.x-mge-pairs .dx-stage-num {
    display: none;
}

.x-mge-pairs .dx-stage {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.x-mge-pairs .x-mge-photos .dx-stage {
    border-top: 1px solid var(--border);
    border-bottom: 0;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: 0;
}

.x-mge-pairs .x-mge-photos .dx-stage-num {
    display: block;
    font-size: var(--fs-30);
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: var(--space-xs);
}

.x-mge-pairs .x-stage-img {
    margin-bottom: 0;
}

.x-mge-pairs .x-mge-photos .dx-stage-c1 {
    grid-column: 1;
    grid-row: 1;
}

.x-mge-pairs .dx-stage-c1 {
    grid-column: 1;
    grid-row: 2;
}

.x-mge-pairs .x-mge-photos .dx-stage-c2 {
    grid-column: 2;
    grid-row: 1;
}

.x-mge-pairs .dx-stage-c2 {
    grid-column: 2;
    grid-row: 2;
}

.x-mge-pairs .x-mge-photos .dx-stage-c3 {
    grid-column: 1;
    grid-row: 3;
    margin-top: var(--space-md);
}

.x-mge-pairs .dx-stage-c3 {
    grid-column: 1;
    grid-row: 4;
}

.x-mge-pairs .x-mge-photos .dx-stage-c4 {
    grid-column: 2;
    grid-row: 3;
    margin-top: var(--space-md);
}

.x-mge-pairs .dx-stage-c4 {
    grid-column: 2;
    grid-row: 4;
}

@media (max-width: 640px) {
    .x-mge-pairs {
        grid-template-columns: minmax(0, 1fr);
    }

    .x-mge-pairs .x-mge-photos .dx-stage-c1 {
        grid-column: 1;
        grid-row: 1;
    }

    .x-mge-pairs .dx-stage-c1 {
        grid-column: 1;
        grid-row: 2;
    }

    .x-mge-pairs .x-mge-photos .dx-stage-c2 {
        grid-column: 1;
        grid-row: 3;
        margin-top: var(--space-md);
    }

    .x-mge-pairs .dx-stage-c2 {
        grid-column: 1;
        grid-row: 4;
    }

    .x-mge-pairs .x-mge-photos .dx-stage-c3 {
        grid-column: 1;
        grid-row: 5;
    }

    .x-mge-pairs .dx-stage-c3 {
        grid-column: 1;
        grid-row: 6;
    }

    .x-mge-pairs .x-mge-photos .dx-stage-c4 {
        grid-column: 1;
        grid-row: 7;
    }

    .x-mge-pairs .dx-stage-c4 {
        grid-column: 1;
        grid-row: 8;
    }
}

/* Photos d'expression O1 à O4 dans un même cadre allongé, centré sur le bord de la paupière, page Meibomian Gland Expression, 20/10/2026 */
.x-stage-img-wide.x-stage-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Grades e1 à e4 OCT en beaucoup plus grand dans les vignettes, page Corneal Epithelial OCT, 20/10/2026 */
.x-stage-num-big.dx-stage-num {
    font-size: var(--fs-30);
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: var(--space-2xs);
}

/* Bandeau du haut plus haut, page WIDES Concept, 20/10/2026 */
.x-hero-tall.hero-compact {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-2xl);
}

@media (max-width: 640px) {
    .x-hero-tall.hero-compact {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-xl);
    }
}

/* Surtitre du haut de page nettement plus grand, page WIDES Concept, 20/10/2026 */
.x-label-big.section-label {
    font-size: var(--fs-24);
    margin-bottom: var(--space-sm);
}

@media (max-width: 640px) {
    .x-label-big.section-label {
        font-size: var(--fs-18);
    }
}

/* Phrase signature du WIDES Concept, plus claire et plus marquée que le chapô, page WIDES Concept, 20/10/2026 */
.x-signature.hero-intro {
    color: var(--text-on-dark);
    font-weight: 600;
    margin-top: var(--space-sm);
}

/* Tous les encadrés Clinical take-home message sur le même fond bleu clair, pages de traitement, de diagnostic, eTAO et Treatments, 19/10/2026 */
.x-callout-blue.tx-callout,
.x-callout-blue.dx-callout,
.x-callout-blue.cmp-takehome {
    background: var(--surface-sunken);
}

/* Phrase d'introduction du haut de page en plus grand, page Diagnostic, 19/10/2026 */
.x-intro-big.hero-intro {
    color: var(--text-on-dark);
    font-size: var(--fs-30);
    line-height: 1.4;
    max-width: var(--max-w-narrow);
}

@media (max-width: 640px) {
    .x-intro-big.hero-intro {
        font-size: var(--fs-24);
    }
}

/* Vignettes des appareils de même format carré (recadrage au centre), page Thermal, 18/10/2026 */
.x-fig-uniform.clinical-figure {
    width: 100%;
}

.x-fig-uniform.x-fig-uniform.x-fig-uniform.clinical-figure img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Légendes sous les figures à la largeur de l'image, à la demande de Pablo, pages eTAO, Diagnostics, Treatments et familles de traitements, 18/10/2026 */
.x-caption-wide.cmp-figure figcaption,
.x-caption-wide.clinical-figure figcaption {
    max-width: none;
}

/* Tous les portraits des membres et du président : fond bleu pâle derrière les photos transparentes, sans contour, page Network, 18/10/2026 */
.x-portrait-round.member-card__portrait,
.x-portrait-round.cmp-chairman__portrait {
    background-color: var(--surface-sunken);
    border: 0;
}

/* Bandeau bleu du haut plus haut, page d'accueil, 18/10/2026 */
.x-hero-roomy.cmp-hero-home__band {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

@media (max-width: 640px) {
    .x-hero-roomy.cmp-hero-home__band {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-lg);
    }
}

/* Lignes du grand titre plus espacées, page d'accueil, 18/10/2026 */
.x-title-airy.cmp-hero-home__title {
    line-height: 1.2;
}

/* Grand titre en bleu très pâle (hors mots en rose), page d'accueil, 18/10/2026 */
.x-title-pale.cmp-hero-home__title {
    color: var(--text-on-dark);
}