/**
 * Bloc « Triptyque » — les trois colonnes de l'accueil.
 *
 * Chaque colonne porte sa classe de rubrique : le bec, la pastille et
 * les titres de contenus en tirent leur couleur sans qu'aucune valeur
 * soit écrite ici.
 *
 * Deux natures de colonne. Le carrousel a un en-tête puis une piste de
 * contenus qui défile ; l'image est un panneau plein sur lequel le
 * médaillon blanc vient se poser. L'en-tête est le même dans les deux
 * cas — c'est son habillage qui change.
 */

/*
 * Pas d'aplat derrière le triptyque : les cartes portent leur propre
 * filet, et un fond coloré sous trois blocs déjà cadrés ajoute une
 * quatrième boîte dont la maquette ne veut pas.
 */
.triptyque {
  padding-block: var(--e-l);
}

/*
 * LES TROIS COLONNES, ET LEUR GOUTTIÈRE QUI SE REFERME.
 *
 * Les proportions viennent de la maquette d'origine, mesurée : sur une
 * largeur utile de 1036, les cartes font 327,47 et l'agenda 319,88. Les
 * latérales sont donc un peu plus larges que le centre — sept virgule
 * six pixels — et trois colonnes égales, ce qu'il y avait ici, ne
 * rendent pas ce dessin.
 *
 * La gouttière vaut 2,953 % de la largeur utile tant qu'il y a la place,
 * puis se referme linéairement jusqu'à ZÉRO à 48 rem — la rupture où
 * les colonnes s'empilent. Les blocs se touchent donc au moment précis
 * où ils passent l'un sous l'autre, sans palier intermédiaire : c'est ce
 * que décrit la maquette, et c'est aussi ce qui évite une plage de
 * largeurs où trois colonnes collées seraient illisibles.
 *
 * Le coefficient 0,0957 n'est pas choisi : il est ce qui fait passer la
 * gouttière de 32,8 px (2,953 % de 1111, notre largeur utile) à zéro sur
 * les 343 px qui séparent 1111 de 768.
 */
.triptyque__colonnes {
  display: grid;
  /*
   * « minmax(0, …) » et non « 31.61fr » seul : une fraction ne descend
   * pas sous la largeur minimale de son contenu, et un titre long
   * suffisait à faire enfler sa colonne — mesuré : 653 px pour la
   * première au lieu de 351. Le zéro autorise la colonne à tenir la
   * proportion quoi qu'elle porte, et c'est le texte qui se replie.
   */
  grid-template-columns: minmax(0, 31.61fr) minmax(0, 30.88fr) minmax(0, 31.61fr);
  gap: clamp(0px, (100% - 48rem) * 0.0957, 2.953%);
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

@media (max-width: 47.999rem) {
  .triptyque__colonnes {
    grid-template-columns: 1fr;
    gap: var(--e-m);
  }
}

/*
 * LE FILET DES CARTES LATÉRALES.
 *
 * Huit pixels, et de largeur FIXE — décision de Pascal : un filet qui
 * maigrit avec le bloc finit par disparaître sur tablette, là où il est
 * le plus utile pour séparer la carte de l'aplat.
 *
 * Sa teinte n'est pas écrite : c'est la couleur de rubrique à 20 % sur
 * du blanc. Vérifié contre la maquette, les deux tombent au centième —
 * #0082c7 à 20 % donne #cce6f4, #00a652 donne #cceddc. Une valeur
 * dérivée plutôt que recopiée, et le jour où une rubrique change de
 * couleur son cadre suit sans qu'on y pense.
 *
 * L'encastrement du contenu vaut 7,893 % de la largeur de carte — les
 * 25,845 px de la maquette, mesurés depuis le BORD EXTÉRIEUR. Le filet
 * en fait partie, d'où le retrait de ses huit pixels : la somme des deux
 * redonne la mesure. Le pourcentage se calcule sur la zone de grille,
 * donc sur la largeur pleine de la carte — c'est bien ce qu'on veut.
 *
 * « overflow » repasse à visible : les becs sortent de la carte dans la
 * maquette, et « hidden » les coupait. La piste du carrousel a son
 * propre « overflow-x », elle n'avait pas besoin de celui-ci.
 */
.triptyque__colonne {
  display: flex;
  flex-direction: column;
  overflow: visible;
  background-color: var(--couleur-fond);
}

.triptyque__colonne:first-child,
.triptyque__colonne:last-child:not(:first-child) {
  padding: calc(7.893% - 8px);
  border: 8px solid color-mix(in srgb, var(--couleur-rubrique) 20%, #fff);
}

@media (max-width: 47.999rem) {
  .triptyque__colonne:first-child,
  .triptyque__colonne:last-child:not(:first-child) {
    padding: var(--e-m);
  }
}

/* ---------------------------------------------------------------
 * L'en-tête, commun aux deux natures
 * --------------------------------------------------------------- */

.triptyque__entete,
.triptyque__medaillon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.triptyque__entete {
  padding: 0 0 var(--e-m);
}

/*
 * Les deux lignes de l'en-tête sont à 34,94 px dans la maquette, soit
 * le plafond de « --t-h2 » à un quart de pixel près. Elles étaient sur
 * « --t-h3 », qui plafonne à 26,4 : un tiers de trop petit, sur les six
 * mots les plus visibles du bloc. Et elles sont composées SOLIDES —
 * 34,94 d'interligne pour 34,94 de corps — ce qui serre les deux lignes
 * en un seul bloc de titre au lieu de deux lignes qui flottent.
 */
/*
 * LES TITRES TIENNENT SUR UNE LIGNE, TOUJOURS.
 *
 * 12,67 cqw est la mesure de la maquette ramenée en proportion : 34,94 px
 * de corps pour 275,78 px de largeur utile. Le mot le plus long —
 * « JE M'INFORME », 6,61 fois le corps — en demanderait 15,12 pour
 * déborder ; on garde donc deux bons points de réserve, de quoi encaisser
 * une fonte de substitution un peu plus large.
 *
 * Le plafond reste celui de « --t-h2 », pour que le titre ne grossisse
 * pas au-delà de la maquette sur un grand écran. Et « nowrap » tient lieu
 * de garde-fou : si un jour un intitulé plus long arrive, il débordera
 * visiblement au lieu de passer en silence sur deux lignes et de décaler
 * tout ce qui suit.
 */
.triptyque__titre,
.triptyque__sous-titre {
  font-size: clamp(1rem, 12.67cqw, 2.2rem);
  white-space: nowrap;
}

.triptyque__titre {
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}

.triptyque__lien {
  color: inherit;
  text-decoration: none;
}

/*
 * Le lien de l'en-tête couvre toute sa zone : la maquette veut que le
 * bloc de titre soit cliquable, pas seulement le mot. Les contenus du
 * carrousel, eux, gardent leurs propres liens — ils sont plus bas, hors
 * de cette zone.
 */
.triptyque__lien::before {
  content: "";
  position: absolute;
  inset: 0;
}

.triptyque__lien:hover,
.triptyque__lien:focus-visible { text-decoration: underline; }

/* Le sous-titre : même taille que le titre, en graisse légère. C'est le
   contraste de graisse qui les distingue, pas celui de taille. */
.triptyque__sous-titre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: var(--graisse-normale);
  line-height: 1;
  text-transform: uppercase;
  color: var(--couleur-titre);
}

/*
 * Sauf dans le médaillon de l'agenda, où la maquette descend le
 * sous-titre à 25,96 px — « --t-h3 ». Ce n'est pas une inattention du
 * dessin : « JE PROGRAMME » est plus long que « JE M'INFORME » et doit
 * tenir dans un cercle, pas dans une carte. Les deux partageaient la
 * même valeur ici, ce qui effaçait la hiérarchie que la maquette pose.
 */
/*
 * Le médaillon se mesure sur SA colonne, qui n'a ni filet ni
 * encastrement : les proportions n'y sont pas les mêmes. 10,92 cqw pour
 * « AGENDA » et 8,12 pour « JE PROGRAMME » — 34,94 et 25,96 rapportés aux
 * 319,88 du bloc. C'est ce rapport-là, et non une inattention du dessin,
 * qui fait le sous-titre de l'agenda plus petit que celui des cartes :
 * « JE PROGRAMME » est plus long que « JE M'INFORME » et doit tenir dans
 * un cercle, pas dans une carte.
 */
.triptyque__medaillon .triptyque__titre { font-size: clamp(1rem, 10.92cqw, 2.2rem); }
.triptyque__medaillon .triptyque__sous-titre { font-size: clamp(0.8rem, 8.12cqw, 1.65rem); }

/* La pastille de la charte, sous le sous-titre. */
.triptyque__pastille {
  width: 0.936rem;                       /* 14,98 px dans la maquette */
  height: 0.936rem;
  margin-top: var(--e-m);
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-rubrique);
}

/*
 * Le bec, accroché au coin extérieur : à gauche sur la première
 * colonne, à droite sur la dernière, rien au milieu. Le balisage est
 * identique partout, c'est le CSS qui tranche — si l'ordre des colonnes
 * change dans le back-office, il n'y a rien à reprendre.
 */
/*
 * LE BEC SORT DE LA CARTE.
 *
 * Il était ancré sur l'en-tête, donc à l'intérieur du retrait : il
 * mordait sur le titre au lieu de déborder du cadre. La maquette le
 * fait sortir de dix pixels à gauche de la carte — c'est ce débord qui
 * fait qu'il « accroche » le coin au lieu de s'y poser.
 *
 * L'ancrage passe donc sur la COLONNE. Pour un élément positionné, le
 * bloc conteneur est la boîte de REMPLISSAGE de son ancêtre, donc juste
 * à l'intérieur du filet : « -18px » vaut les huit pixels du filet plus
 * les dix du débord, sans avoir à connaître l'encastrement.
 *
 * Et les deux becs ne sont pas à la même hauteur dans la maquette — le
 * bleu à 38,83, le vert à 76,85, mesurés depuis le haut de la carte. Ce
 * n'est pas une symétrie ratée, ce sont deux positions. Moins les huit
 * pixels du filet, qui ne comptent pas depuis la boîte de remplissage.
 */
/*
 * La colonne devient un CONTENEUR de requête : les titres se dimensionnent
 * sur sa largeur et non sur celle de la fenêtre. C'est ce qui leur permet
 * de tenir sur une ligne quelle que soit la place — trois colonnes serrées
 * sur une grande fenêtre sont plus étroites qu'une colonne seule sur un
 * téléphone, et une mesure en « vw » ne sait pas faire la différence.
 */
.triptyque__colonne {
  position: relative;
  container-type: inline-size;
}

.triptyque__bec {
  --bec-taille: 3.75rem;                 /* 60 px */
  --bec-couleur: var(--couleur-rubrique);

  display: none;
  position: absolute;
  z-index: 1;
}

.triptyque__colonne:first-child .triptyque__bec,
.triptyque__colonne:last-child .triptyque__bec { display: block; }

/* Le fichier pointe à droite ; la première colonne le retourne. */
/*
 * LES DEUX BECS POINTENT DANS LE MÊME SENS — vers la droite, comme le
 * fichier les dessine. Ils ne sont donc pas en miroir, et aucun des
 * deux n'est retourné : celui de gauche pointe vers l'intérieur de sa
 * carte, celui de droite vers l'extérieur. Arbitré le 2 novembre, après
 * mesure : le code les mettait en miroir, ce qui paraissait logique et
 * n'était pas le dessin.
 *
 * Les débords ne sont pas symétriques non plus — dix pixels à gauche,
 * huit à droite, relevés dans le SVG.
 *
 * ## DEUX POURCENTAGES QUI NE SE RÉFÈRENT PAS AU MÊME
 *
 * Le bec est dans l'en-tête, qui est positionné : c'est donc LUI le
 * bloc conteneur, et non la colonne. Un « -18px » calculé depuis le
 * bord de la carte tombait de vingt-huit pixels à côté — mesuré, le bec
 * restait 9,7 px À L'INTÉRIEUR au lieu de sortir de dix.
 *
 * Il faut donc remonter l'encastrement, et c'est là que ça se gâte :
 * le « 7,893 % » du remplissage se calcule sur la largeur PLEINE de la
 * carte, tandis qu'un « left » en pourcentage se calcule sur la boîte
 * de remplissage de l'en-tête, c'est-à-dire la carte moins ses deux
 * encastrements et ses deux filets, soit 84,214 % d'elle. Le même
 * retrait s'y écrit donc 9,372 % — 9,372 × 0,84214 = 7,893.
 *
 * Deux pourcentages de même valeur apparente qui ne mesurent pas la
 * même chose : c'est le genre d'égalité qu'on écrit sans y penser et
 * qu'on ne retrouve jamais en relisant.
 */
.triptyque__colonne:first-child .triptyque__bec {
  top: 1.927rem;                         /* 38,83 - 8 */
  left: calc(-9.372% - 10px);
}

/* « :not(:first-child) » : avec une seule colonne, les deux règles
   s'appliqueraient et le bec aurait deux ancrages contraires. */
.triptyque__colonne:last-child:not(:first-child) .triptyque__bec {
  top: 4.303rem;                         /* 76,85 - 8 */
  right: calc(-9.372% - 8px);
}

/* ---------------------------------------------------------------
 * Colonne « image » — le panneau et son médaillon
 * --------------------------------------------------------------- */

.triptyque__panneau {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 20rem;
}

.triptyque__panneau .triptyque__image {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.triptyque__medaillon {
  grid-area: 1 / 1;
  justify-content: center;
  width: 65.5%;                          /* 209,50 sur 319,88 */
  aspect-ratio: 1;

  /*
   * Trois pour cent, et non « --e-m » : dans la maquette « JE
   * PROGRAMME » mesure 196,75 pour un médaillon de 209,50, soit 94 %
   * de sa largeur. Vingt-quatre pixels de réserve de chaque côté lui
   * en laissaient trop peu et le coupaient en deux lignes.
   */
  padding: 3%;
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-fond);
}

/* Dans le médaillon, le bec sort du cercle par le haut à droite. */
/*
 * LE BEC DU MÉDAILLON MONTE ET SORT, ET PASSE DERRIÈRE LE TITRE.
 *
 * Deux corrections pour un même défaut. Vers 1200 px de large, il
 * mordait sur « AGENDA » jusqu'à en recouvrir le dernier A : le cercle
 * rétrécit avec sa colonne tandis que le titre, borné par son plancher
 * de clamp, ne rétrécit plus. Il remonte donc et sort du cercle par la
 * droite, là où il n'y a rien à recouvrir.
 *
 * Et surtout : si le chevauchement revenait — une rubrique au titre
 * plus long, une fonte de substitution plus large —, c'est le TITRE qui
 * doit rester lisible. Un ornement qui passe devant un mot est un
 * ornement mal posé. L'ordre de peinture le dit maintenant, au lieu de
 * dépendre de la place disponible.
 */
.triptyque__medaillon .triptyque__bec {
  --bec-taille: 2.5rem;

  display: block;
  z-index: 0;
  top: 2%;
  right: -4%;
  bottom: auto;
  left: auto;
  transform: none;
}

.triptyque__medaillon :is(.triptyque__titre, .triptyque__sous-titre) {
  position: relative;
  z-index: 1;
}

.triptyque__medaillon .triptyque__pastille { margin-top: var(--e-s); }

/* ---------------------------------------------------------------
 * Colonne « carrousel » — la piste et ses commandes
 * --------------------------------------------------------------- */

/*
 * Le même écart qu'entre le titre d'article et son texte — « --e-2xs ».
 * Il valait « --e-xl », six fois plus : la pastille flottait seule au
 * milieu d'un blanc qui coupait la carte en deux.
 */
.triptyque__carrousel {
  position: relative;
  margin-top: var(--e-3xs);
}

.triptyque__piste {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;                 /* la pagination remplace la barre */
  overscroll-behavior-x: contain;
}

.triptyque__piste::-webkit-scrollbar { display: none; }

/*
 * Plus de retrait ici : c'est la colonne qui le porte désormais, une
 * fois pour toutes. Deux retraits superposés décalaient le texte par
 * rapport à l'image alors que la maquette les aligne sur la même
 * verticale.
 */
.triptyque__item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding-inline: 0;
}

/*
 * Les deux copies qui font la boucle, posées par le script aux
 * extrémités de la piste. Rien à leur ajouter ici : elles doivent être
 * strictement identiques à ce qu'elles copient, sans quoi le recalage
 * se verrait. La classe existe pour qu'on puisse les reconnaître dans
 * l'inspecteur.
 */


/*
 * La carte du triptyque se lit de haut en bas : titre, extrait, puis
 * l'image. L'ordre du balisage sert les archives, où l'image vient en
 * premier ; ici c'est la grille qui décide, sans toucher au gabarit.
 */
/*
 * Dans le triptyque, la carte n'a ni cadre ni ombre : la colonne est
 * déjà un panneau blanc posé sur un aplat, un second contour à
 * l'intérieur du premier ne sépare plus rien. Elles gardent leur cadre
 * dans les archives, où elles se touchent.
 */
.triptyque__item .carte {
  display: flex;
  flex-direction: column;
  gap: var(--e-2xs);
  border: 0;
  border-radius: 0;
}

.triptyque__item .carte:hover { box-shadow: none; }

.triptyque__item .carte__corps { order: 1; }
.triptyque__item .carte__media { order: 2; }

/* La date et la catégorie n'apparaissent pas sur l'accueil : le titre
   et l'extrait suffisent à donner envie d'ouvrir. */
.triptyque__item .carte__meta { display: none; }

/*
 * 14,98 px dans la maquette, et 13,48 pour le chapô — soit l'écart le
 * plus faible du thème entre un titre et son texte. C'est voulu : dans
 * une carte aussi étroite, c'est la COULEUR qui distingue le titre, pas
 * sa taille. « --t-h5 » valait 16,8 px et aplatissait les deux.
 */
/*
 * Deux lignes au plus, et des points de suspension au-delà — pour le
 * titre comme pour le chapô. Sans cela un titre long décale l'image
 * d'une carte et casse l'alignement des trois.
 *
 * « -webkit-line-clamp » est préfixé mais c'est la seule écriture que
 * tous les navigateurs comprennent aujourd'hui ; la forme standard
 * « line-clamp » est posée à côté, pour le jour où elle suffira.
 */
.triptyque__item .carte__titre,
.triptyque__item .carte__extrait {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.triptyque__item .carte__titre {
  font-size: 0.936rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--couleur-rubrique-texte);
}

.triptyque__item .carte__titre a { color: inherit; }

.triptyque__item .carte__extrait {
  font-size: 0.8425rem;                  /* 13,48 px */
  line-height: 1.2;
  color: var(--couleur-texte);
}

/*
 * Le « plus » de la charte, entre le texte et l'image. Dessiné plutôt
 * que chargé : un cercle et deux traits ne valent pas un fichier.
 */
.triptyque__item .carte__corps::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: var(--e-2xs);
  border: 1px solid var(--couleur-rubrique);
  border-radius: var(--rayon-rond);
  color: var(--couleur-rubrique);
  font-family: var(--police-titre);
  font-size: var(--t-petit);
  line-height: 1;
}

/*
 * L'image REMPLIT sa boîte, quitte à être rognée — « cover ». Les
 * boîtes doivent être identiques d'une carte à l'autre : une image
 * qui s'adapte laisse des bandes vides, et trois cartes côte à côte
 * avec des bandes de tailles différentes ne s'alignent plus.
 */
.triptyque__item .carte__media img,
.triptyque__item .carte__media picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * Le carrousel prend la hauteur qui reste : les trois colonnes sont de
 * même hauteur, et sans cela l'image s'arrêtait bien au-dessus du bas
 * de la carte alors que la maquette la descend jusqu'à l'encastrement.
 */
.triptyque__carrousel { flex: 1 1 auto; }

.triptyque__piste,
.triptyque__item,
.triptyque__item .carte { height: 100%; }

/*
 * La boîte garde son rapport et se cale en BAS de la carte : les trois
 * colonnes font la même hauteur, et sans cela le blanc qui reste se
 * logeait sous l'image au lieu de rester au-dessus, entre le texte et
 * elle. « margin-top: auto » le pousse là où la maquette le met.
 */
.triptyque__item .carte__media {
  flex: 0 0 auto;
  margin-top: auto;
}

/*
 * Le rapport vient de la maquette : 275,78 sur 213,01. Ce n'est pas du
 * 3/2, qui donnait une image trop basse et mangeait la place du texte.
 */
.triptyque__item .carte__media {
  min-height: 0;
  aspect-ratio: 275.78 / 213.01;
  overflow: hidden;
}

.triptyque__vide {
  margin: 0;
  padding: var(--e-m);
  color: var(--couleur-texte-doux);
  font-style: italic;
}

/* ---------------------------------------------------------------
 * Les commandes — créées par le script
 * --------------------------------------------------------------- */

/*
 * LES COMMANDES SONT DANS L'IMAGE, PAS SOUS ELLE.
 *
 * La maquette les pose au bas de la zone image, centrées sur la carte,
 * à vingt pixels du bord inférieur. Elles étaient sous l'image, en
 * gris, avec une pagination à points entre les deux flèches.
 *
 * Trois boutons blancs sur une photo : le contraste n'est pas garanti,
 * une image claire les avalerait. D'où le voile sombre dégradé derrière
 * eux — il ne se voit pas sur une image foncée et sauve la lisibilité
 * sur une image claire, sans rien ajouter au dessin.
 */
.triptyque__commandes {
  position: absolute;
  right: 0;
  bottom: 1.25rem;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;                         /* 10 px entre les anneaux */
  padding: 0;
  pointer-events: none;
}

.triptyque__commandes > * { pointer-events: auto; }

/*
 * Les flèches sont grises et discrètes, comme la maquette : elles
 * accompagnent le carrousel sans concurrencer le titre de l'article,
 * qui est le seul élément coloré de la colonne.
 */
/*
 * Le bouton EST l'anneau : 34,94 px, la mesure de la maquette. Ce n'est
 * pas la cible de 44 px qu'on vise ailleurs dans le thème — c'est une
 * réserve, portée au registre RGAA, et non un oubli. Trente-cinq passe
 * le minimum de 24 px du critère de taille de cible ; le confort de 44
 * est une exigence de niveau supérieur, et l'élargir ici ferait des
 * boutons qui se chevauchent sur le dessin fourni.
 */
/*
 * LA LUEUR VA SUR LE BOUTON, PAS SUR LE DESSIN.
 *
 * Elle était posée sur le « ::before », qui porte le masque. Or le
 * masque s'applique APRÈS le filtre : l'ombre était dessinée autour du
 * rectangle, puis découpée avec lui. Elle existait et ne se voyait
 * nulle part. Sur le bouton, qui n'est pas masqué, « drop-shadow »
 * prend le rendu déjà découpé de son enfant et suit la forme réelle.
 */
.triptyque__fleche,
.triptyque__bascule {
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 3px rgb(0 0 0 / 0.55));
  width: 2.184rem;                       /* 34,94 px */
  height: 2.184rem;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: opacity var(--transition);
}

.triptyque__fleche:hover,
.triptyque__bascule:hover { opacity: 0.75; }

/*
 * Inertes faute de contenu à faire défiler. Ils restent visibles pour
 * que les cartes gardent la même allure, mais assez éteints pour qu'on
 * ne cherche pas à les presser. « disabled » fait le reste — hors du
 * parcours clavier, et annoncé comme tel.
 */
.triptyque__fleche[disabled],
.triptyque__bascule[disabled] {
  opacity: 0.4;
  cursor: default;
}

.triptyque__fleche[disabled]:hover,
.triptyque__bascule[disabled]:hover { opacity: 0.4; }

/*
 * Les flèches de la charte, en masque.
 *
 * Elles remplacent les chevrons typographiques « ‹ › » que le script
 * posait dans le bouton : un caractère dépend de la fonte installée et
 * ne ressemble jamais tout à fait au dessin de la maquette. Le masque
 * prend la couleur du bouton, donc il suit ses états sans rien de plus.
 *
 * Le bouton reste une cible de 44 px ; seul le dessin fait 1.25rem.
 */
/*
 * Le masque porte l'anneau ET le glyphe, donc il occupe tout le bouton.
 * Il prend la couleur du bouton, ce qui laisse le survol et le focus se
 * régler une seule fois, sur « color ».
 */
.triptyque__fleche::before,
.triptyque__bascule::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: currentcolor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.triptyque__fleche--precedent::before {
  -webkit-mask-image: var(--triptyque-precedent-fichier);
  mask-image: var(--triptyque-precedent-fichier);
}

.triptyque__fleche--suivant::before {
  -webkit-mask-image: var(--triptyque-suivant-fichier);
  mask-image: var(--triptyque-suivant-fichier);
}

/*
 * La bascule change de dessin avec son état, et pas seulement de
 * libellé : « aria-pressed » parle aux technologies d'assistance, le
 * glyphe parle à tout le monde. Pressé veut dire « le défilement est
 * suspendu », donc le bouton propose de reprendre.
 */
.triptyque__bascule::before {
  -webkit-mask-image: var(--triptyque-pause-fichier);
  mask-image: var(--triptyque-pause-fichier);
}

.triptyque__bascule[aria-pressed="true"]::before {
  -webkit-mask-image: var(--triptyque-lecture-fichier);
  mask-image: var(--triptyque-lecture-fichier);
}

/*
 * Les flèches sont posées sur les bords de la piste, comme la maquette.
 * En dessous de 30rem la colonne est trop étroite pour qu'elles ne
 * mordent pas sur le texte : elles rejoignent les points.
 */
/*
 * Les flèches ne vont plus se coller aux bords de la piste : elles sont
 * dans la barre de commandes, au centre, comme la maquette. La règle
 * qui les y envoyait au-dessus de 30 rem est retirée plutôt que
 * neutralisée — une règle morte qu'on laisse finit par être réveillée
 * par accident.
 */

/*
 * La pagination à points est retirée : la maquette ne la montre pas, et
 * la place entre les deux flèches revient à la bascule. On y perd
 * l'indication de position — avec trois contenus, savoir qu'on est au
 * deuxième n'est pas rien — et c'est consigné au registre pour être
 * rediscuté avec la cliente.
 *
 * Le focus est blanc, et non de la couleur de rubrique : l'anneau est
 * posé sur une photo, où une couleur moyenne peut se perdre. Le double
 * liseré — blanc dessus, marine dessous — tient sur les deux.
 */
.triptyque__fleche:focus-visible,
.triptyque__bascule:focus-visible {
  outline: var(--focus-epaisseur) solid #fff;
  outline-offset: var(--focus-decalage);
  box-shadow: 0 0 0 calc(var(--focus-epaisseur) * 2) var(--c-marine);
}

@media (prefers-reduced-motion: reduce) {
  .triptyque__piste { scroll-behavior: auto; }
  .triptyque__fleche,
  .triptyque__bascule { transition: none; }
}