/*
 * LA FEUILLE PARTAGÉE DES PAGES DE VITRINE — /difference, /methode, /faq.
 *
 * La landing garde son CSS DANS la page (c'est la porte d'entrée, elle ne
 * dépend de rien) ; les pages intérieures partagent cette feuille, même
 * origine, pour ne pas diverger à la première retouche. La palette, le
 * bloc-marque, l'idiome surtitre/filet/h1 sont ceux de la landing, à la
 * valeur près.
 */
:root {
  --lime:  #A0E810;
  --ink:   #002028;
  --ink2:  #003038;
  --teal:  #A8E0D8;
  --mint:  #D0F0EC;
  --paper: #F8F8F8;
  --body:  #36545B;
  --muted: #6F858A;
  --rule:  #D0F0EC;
  --carte: #ffffff;
  --bordure: rgba(0, 32, 40, .11);
  --verre: rgba(248, 248, 248, .9);
  --bande: var(--bande);
  --bloc: #002028;
  --bloc2: #003038;
  --ok: #33520B;
}
html { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html .fr { display: none; }
html[data-lang="fr"] .fr { display: revert; }
html[data-lang="fr"] .en { display: none; }

/* Le conteneur : borné à 1400px — au-delà, le contenu éditorial flotte.
   Les marges gardent les seuils du produit (24 → 40 → 64). */
.page { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1280px) { .page { padding: 0 40px; } }
@media (min-width: 1536px) { .page { padding: 0 64px; } }

/*
 * L'EN-TÊTE — collant, pleine largeur, verre dépoli : la porte vers
 * l'application reste sous le pouce, du premier au dernier écran.
 */
header.site {
  position: sticky; top: 0; z-index: 80;
  background: var(--verre);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
header.site .barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 13px; padding-bottom: 13px;
}
.marque { line-height: 1; text-decoration: none; }
.marque .mot { font-size: 17px; font-weight: 800; letter-spacing: -0.045em; }
.marque .a { color: var(--ink); }
.marque .b { color: var(--lime); }
.marque .signature { margin-top: 4px; font-size: 7.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.17em; color: var(--muted); }
.droite { display: flex; align-items: center; gap: 12px; }
@media (max-width: 420px) {
  .droite { gap: 6px; }
  .langues .sep { display: none; }
}
@media (max-width: 419px) { header.site .cta { display: none; } }
/* Les très petits écrans : chaque bouton de barre perd quelques pixels. */
@media (max-width: 379px) {
  header.site .menu summary, header.site .theme { width: 34px; height: 34px; }
  header.site .langues a { min-width: 36px; min-height: 36px; padding: 4px 5px; }
  .marque .signature { display: none; }
}


/* La navigation des pages — en ligne sur grand écran, burger en dessous. */
.pages { display: none; }
@media (min-width: 880px) {
  .pages { display: flex; gap: clamp(14px, 1.8vw, 26px); }
  .pages a {
    font-size: 13px; font-weight: 700; color: var(--body);
    text-decoration: none; padding: 6px 2px;
    border-bottom: 2px solid transparent;
    transition: color .12s ease, border-color .12s ease;
  }
  .pages a:hover { color: var(--ink); border-color: var(--lime); }
  .pages a[aria-current="page"] { color: var(--ink); border-color: var(--lime); }
}

/* Le menu mobile — un <details> natif : aucun script. */
.menu { display: none; }
@media (max-width: 879px) { .menu { display: block; } }
.menu summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--bordure); color: var(--ink);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.menu[open] summary { background: var(--mint); }
.menu .panneau {
  position: absolute; right: 16px; left: 16px; top: calc(100% + 8px); z-index: 70;
  max-width: 420px; margin-left: auto; padding: 10px;
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: 16px; box-shadow: 0 24px 56px -20px rgba(0, 32, 40, .32);
  display: grid;
}
.menu .panneau a {
  padding: 13px 16px; border-radius: 10px;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  text-decoration: none; border-bottom: 0;
}
.menu .panneau a[aria-current="page"] { background: var(--mint); }
.menu .panneau a:hover { background: var(--mint); }
.menu .panneau .porte {
  margin-top: 6px; border-top: 1px solid var(--rule); padding-top: 12px;
  color: var(--ink); border-radius: 0 0 9px 9px;
}
.langues { display: flex; align-items: center; gap: 2px; }
/* Deux liens, plus deux boutons : chaque langue a désormais son adresse,
   et un lien est ce qui mène à une adresse — pour le lecteur comme pour le
   robot qui suit les liens. */
.langues a {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  font: inherit; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--muted); padding: 5px 7px; border-radius: 6px;
}
.langues a[aria-current="true"] { color: var(--ink); background: var(--mint); }
.langues .sep { color: var(--rule); font-size: 10px; }
.cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px;
  background: var(--bloc); color: #fff;
  border-radius: 12px; text-decoration: none;
  font-size: 13px; font-weight: 700;
  transition: background-color .16s ease, transform .16s ease;
}
.cta:hover { background: var(--bloc2); transform: translateY(-2px); }
.cta:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (max-width: 520px) { header.site .cta .libelle { display: none; } }
@media (prefers-reduced-motion: reduce) { .cta:hover { transform: none; } }

/* Le fil d'Ariane des pages intérieures : revenir est un geste, pas une chasse. */
.retour { display: inline-block; margin-top: 20px; font-size: 13px; font-weight: 600; color: var(--body); text-decoration: none; }
.retour:hover { color: var(--ink); }

.surtitre { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
.filet { width: 34px; height: 3px; margin-top: 12px; background: var(--lime); border-radius: 2px; }
h1 {
  margin: 18px 0 0; max-width: 24ch;
  /* Fluide : 30px sur petit écran, 52px plafonnés vers 1500 — la pente
     suit l'écran, sans paliers. */
  font-size: clamp(30px, 23px + 1.9vw, 52px); font-weight: 800;
  text-transform: uppercase; line-height: 1.06; letter-spacing: -0.035em;
}
h1 .suite { display: block; color: var(--lime); }
.entete { padding: 26px 0 8px; }
.sub { margin: 20px 0 0; max-width: 58ch; font-size: clamp(14.5px, 13.5px + 0.3vw, 16.5px); line-height: 1.7; color: var(--body); }
.sub strong, .intro strong, .d strong { color: var(--ink); }

.section { padding: clamp(42px, 3.6vw, 72px) 0 8px; }
.section.teintee {
  background: var(--bande);
  box-shadow: 0 0 0 100vmax var(--bande);
  clip-path: inset(0 -100vmax);
  padding-bottom: clamp(42px, 3.6vw, 72px);
  margin-top: clamp(42px, 3.6vw, 72px);
}
.section h2 {
  margin: 14px 0 0;
  font-size: clamp(21px, 18px + 0.7vw, 30px); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.03em; line-height: 1.12;
  max-width: 30ch;
}
.section .intro { margin: 14px 0 0; max-width: 62ch; font-size: clamp(14px, 13px + 0.3vw, 16px); line-height: 1.7; color: var(--body); }

.faits { margin: 26px 0 0; display: grid; gap: 16px; }
@media (min-width: 768px) { .faits { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1280px) { .faits { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
/*
 * LES FAITS — en cartes, plus en filets nus : le filet lime devient le
 * chapeau de la carte (la signature du site, portée par une surface),
 * et la carte prend le même relief au survol que les outils.
 */
.fait {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: 18px; padding: 22px 24px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fait::before {
  content: ""; display: block; width: 26px; height: 3px;
  border-radius: 2px; background: var(--lime); margin-bottom: 14px;
}
.fait:hover {
  transform: translateY(-3px);
  border-color: var(--teal);
  box-shadow: 0 20px 44px -26px rgba(0, 32, 40, .3);
}
@media (prefers-reduced-motion: reduce) { .fait:hover { transform: none; } }
.fait .t { font-size: clamp(14.5px, 14px + 0.2vw, 16.5px); font-weight: 700; color: var(--ink); }
.fait .d { margin: 8px 0 0; font-size: clamp(13px, 12.5px + 0.25vw, 15px); line-height: 1.65; color: var(--body); }

/*
 * LE FACE-À-FACE — « ce qu'on voit ailleurs / ce que nous faisons ».
 * Deux colonnes qui vendent la différence sans nommer personne : la
 * colonne encre porte la nôtre, et c'est la seule pleine.
 */
.contraste { margin: 28px 0 0; display: grid; gap: 14px; max-width: 1240px; }
@media (min-width: 768px) { .contraste { grid-template-columns: 1fr 1fr; gap: 18px; } }
.colonne { border-radius: 16px; padding: 22px; }
.colonne.eux { background: var(--carte); border: 1px solid var(--bordure); }
.colonne.nous { background: var(--bloc); color: #fff; }
.colonne .titre { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.colonne.eux .titre { color: var(--muted); }
.colonne.nous .titre { color: var(--lime); }
.colonne ul { margin: 14px 0 0; padding: 0; list-style: none; }
.colonne li { position: relative; padding-left: 22px; margin-top: 10px; font-size: clamp(13px, 12.5px + 0.25vw, 15px); line-height: 1.6; }
.colonne.eux li { color: var(--body); }
.colonne.nous li { color: rgba(255, 255, 255, .92); }
.colonne li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.colonne.eux li::before { content: "—"; color: var(--muted); }
.colonne.nous li::before { content: "✓"; color: var(--lime); }

/* Les pas numérotés de la méthode. */
.pas { margin: 26px 0 0; display: grid; gap: 16px; counter-reset: pas; }
@media (min-width: 768px) { .pas { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1280px) { .pas { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.unpas {
  counter-increment: pas;
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: 18px; padding: 22px 24px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.unpas:hover {
  transform: translateY(-3px);
  border-color: var(--teal);
  box-shadow: 0 20px 44px -26px rgba(0, 32, 40, .3);
}
@media (prefers-reduced-motion: reduce) { .unpas:hover { transform: none; } }
.unpas .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--bloc); color: var(--lime);
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.unpas .n::before { content: counter(pas); }
.unpas .t { margin: 10px 0 0; font-size: 15px; font-weight: 700; }
.unpas .d { margin: 6px 0 0; font-size: clamp(13px, 12.5px + 0.25vw, 15px); line-height: 1.65; color: var(--body); }

.serment {
  margin: 28px 0 0; max-width: 62ch;
  font-size: clamp(14px, 13.5px + 0.25vw, 16px); font-weight: 600; line-height: 1.65; color: var(--ink);
  border-left: 3px solid var(--lime); padding-left: 16px;
}

/* La FAQ en plis natifs — aucun script, le HTML sait faire. */
.faq { margin: 26px 0 0; max-width: 940px; }
.faq details {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: 14px; margin-top: 10px;
  padding: 0 18px;
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 16px 0; font-size: clamp(14px, 13.5px + 0.25vw, 16px); font-weight: 700; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 18px; font-weight: 600; color: var(--muted); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq .r { padding: 0 0 16px; font-size: clamp(13px, 12.5px + 0.25vw, 15px); line-height: 1.7; color: var(--body); max-width: 66ch; }
.faq .r p { margin: 0 0 8px; }

/* Le rappel final et le pied — ceux de la landing, réduits. */
.finale { padding: 52px 0 40px; text-align: center; }
.finale h2 { margin: 0; font-size: clamp(23px, 20px + 0.7vw, 34px); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; }
.finale h2 .suite { display: block; color: var(--lime); }
.finale .actions { margin-top: 22px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.finale .cta { padding: 13px 22px; font-size: 14px; }
.suivantes { margin-top: 16px; font-size: 13px; color: var(--body); }
.suivantes a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid var(--teal); }
.suivantes a:hover { border-color: var(--ink); }

footer.site { border-top: 1px solid var(--rule); padding: 20px 0 34px; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
footer.site a { color: var(--body); }
footer.site .legaux { display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer.site .legaux a { font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--teal); padding-bottom: 1px; }
footer.site .copy { margin: 12px 0 0; }

/*
 * LES OUTILS ET LES PUBLICS — les cartes des pages Produit et Solutions.
 * Une carte = une question, ses réponses cochées, sa porte vers l'app.
 */
.outils { margin: 26px 0 0; display: grid; gap: 18px; }
@media (min-width: 700px)  { .outils { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .outils { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.outil {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: 16px; padding: 22px;
  scroll-margin-top: 24px;
}
.outil .nom { font-size: 15px; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); }
.outil .question { margin: 8px 0 0; font-size: clamp(13px, 12.5px + 0.25vw, 15px); font-weight: 600; color: var(--body); }
.outil ul { margin: 12px 0 0; padding: 0; list-style: none; }
.outil li {
  position: relative; padding-left: 20px; margin-top: 8px;
  font-size: clamp(12.5px, 12px + 0.25vw, 14.5px); line-height: 1.55; color: var(--body);
}
.outil li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--ok); }
.outil .porte {
  display: inline-block; margin-top: 14px;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  text-decoration: none; border-bottom: 1.5px solid var(--teal);
}
.outil .porte:hover { border-color: var(--ink); }

/* Les puces de modules — la grammaire mono des étiquettes du produit. */
.puces { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.puce {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; padding: 4px 9px; border-radius: 999px;
  background: var(--mint); color: var(--ink2);
}

/* Le mini-bandeau de chiffres des pages intérieures. */
.reperes { margin: 30px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
@media (min-width: 900px) { .reperes { grid-template-columns: repeat(4, 1fr); } }
.repere b { display: block; font-size: clamp(22px, 19px + 0.8vw, 34px); font-weight: 700; line-height: 1; }
.repere b .plus { color: var(--lime); }
.repere .quoi { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--ink); }
.repere .detail { margin-top: 2px; font-size: 11px; color: var(--muted); }

/*
 * LE PIED INSTITUTIONNEL — les colonnes du produit, à la lettre :
 * Produit, Solutions, Ressources, Preuve, Entreprise, Légal.
 */
footer.site .colonnes {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 24px 18px; padding-bottom: 24px; margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 640px)  { footer.site .colonnes { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { footer.site .colonnes { grid-template-columns: repeat(6, 1fr); } }
footer.site .col .titre {
  font-size: 9.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink); margin: 0 0 10px;
}
footer.site .col a {
  display: block; margin-top: 6px;
  font-size: 12px; font-weight: 600; color: var(--body);
  text-decoration: none;
}
footer.site .col a:hover { color: var(--ink); }
footer.site .col .ext { color: var(--muted); font-size: 10px; }

/*
 * LE DUO D'ENTÊTE — le texte à gauche, une carte-illustration à droite :
 * une page qui montre quelque chose du produit dès le premier écran.
 */
.duo { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 52px; align-items: center; }
}

/* La carte-illustration : blanche, bordée, étiquetée. */
.vitrail {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: 18px; padding: 20px 20px 18px;
  box-shadow: 0 24px 54px -30px rgba(0, 32, 40, .25);
}
.v-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.v-titre {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.v-tag {
  font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: rgba(0, 32, 40, .06);
  border-radius: 6px; padding: 3px 7px;
}
.v-note { margin: 12px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--muted); }

/* La mini file de décision. */
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table th {
  text-align: left; padding: 0 8px 7px 0;
  font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.mini-table td { padding: 9px 8px 9px 0; border-top: 1px solid var(--rule); font-size: 12.5px; }
.mini-table .m { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.mini-table .niveau { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mini-table .fort { color: var(--ok); }
.mini-table .veille { color: var(--muted); }

/* La couverture : championnats en puces, deux compteurs. */
.couverture .puces { margin: 0; }
.couverture .compteurs { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.couverture .compteurs b { display: block; font-size: 26px; font-weight: 700; line-height: 1; }
/* Enfant direct seulement : les spans de langue, à l'intérieur, gardent
   leur affichage d'une seule langue. */
.couverture .compteurs div > span { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 600; color: var(--muted); }

/* Annoncé face à observé : trois bandes, la plus faible reste affichée. */
.bandes .bande { margin-top: 12px; }
.bandes .bande:first-child { margin-top: 0; }
.bandes .ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bandes .duo-chiffres { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink); }
.bandes .duo-chiffres .obs { color: var(--muted); }
.bandes .n { font-size: 9.5px; color: var(--muted); }
.bandes .barres { margin-top: 5px; display: grid; gap: 3px; }
.bandes .barre-a, .bandes .barre-o { height: 7px; border-radius: 4px; background: var(--bloc); }
.bandes .barre-o { background: var(--lime); }

/*
 * LES ICÔNES DES CARTES — le trait de la landing : une pastille menthe,
 * un pictogramme au trait, jamais de couleur criarde.
 */
.icone {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--mint); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}

/* Les cartes prennent du relief au survol — discret, mais vivant. */
.outil { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.outil:hover {
  transform: translateY(-3px);
  border-color: var(--teal);
  box-shadow: 0 20px 44px -26px rgba(0, 32, 40, .3);
}
@media (prefers-reduced-motion: reduce) { .outil:hover { transform: none; } }

/*
 * LE MODE SOMBRE — les mêmes jetons, renversés. Le clair reste le défaut
 * absolu ; ce bloc ne s'applique que quand theme.js pose data-theme.
 */
html[data-theme="sombre"] {
  color-scheme: dark;
  --paper: #05161A;
  --carte: #0B2328;
  --ink:   #E9F4F1;
  --ink2:  #F4FBF9;
  --body:  #A9C1BF;
  --muted: #7E9896;
  --mint:  #123037;
  --teal:  #2A5A60;
  --rule:  #16363D;
  --bordure: rgba(233, 244, 241, .14);
  --verre: rgba(5, 22, 26, .88);
  --bande: rgba(18, 48, 55, .55);
  --bloc:  #0A2C33;
  --bloc2: #0E3841;
  --ok:    #B4F03C;
}
/* Sur fond sombre, la porte principale passe au lime — la grammaire du
   produit lui-même, qui vit en sombre avec des portes lime. */
html[data-theme="sombre"] .cta { background: var(--lime); color: #002028; }
html[data-theme="sombre"] .cta:hover { background: var(--lime); filter: brightness(1.07); }

/* Le bouton de thème : trois icônes, une seule visible — celle du mode actuel. */
.theme {
  appearance: none; cursor: pointer; background: none;
  border: 1px solid var(--bordure); border-radius: 10px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.theme:hover { background: var(--mint); }
.theme:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.theme .ic { display: none; }
html[data-mode="clair"] .theme .ic-clair { display: inline-flex; }
html[data-mode="sombre"] .theme .ic-sombre { display: inline-flex; }
html[data-mode="systeme"] .theme .ic-systeme { display: inline-flex; }
html:not([data-mode]) .theme .ic-clair { display: inline-flex; }