/**
 * Tokens de design — CDOS 30
 *
 * Valeurs relevées sur la production (universal.css / 76.css générés par Oxygen),
 * puis rationalisées : les maxima desktop reproduisent l'existant à l'identique,
 * les valeurs fluides corrigent la mise à l'échelle mobile.
 *
 * Aucune couleur ni taille ne doit être écrite en dur ailleurs que dans ce fichier.
 */

:root {

  /* ---------------------------------------------------------------
   * Couleurs de marque — relevées sur la production
   * --------------------------------------------------------------- */

  --c-marine:        #0a1f47;  /* couleur dominante : titres, header, footer */
  --c-vert:          #00a652;
  --c-rouge:         #ed334f;
  --c-ambre:         #fcb030;
  --c-bleu:          #0082c7;
  --c-bleu-pale:     #d1e5f2;  /* fonds de section sur l'accueil */

  /*
   * LES DEUX COULEURS COMPLÉMENTAIRES DE LA CHARTE.
   *
   * Elles ne sont pas des couleurs de rubrique : elles n'ouvrent
   * aucune section du site et ne désignent rien. Elles servent là où
   * les sept autres ne peuvent pas.
   *
   * CDOS30-2 est le décor du hero quand le fond porte déjà la couleur
   * de rubrique : sur la rubrique CDOS 30, un coq marine sur un aplat
   * marine ne se voit pas. Elle coïncide avec le bleu foncé de « Gérer
   * son association » — même valeur, deux emplois, et c'est ici qu'elle
   * est écrite une fois.
   *
   * CDOS30-3 est l'accent ponctuel : la page Newsletters, l'annuaire
   * des comités. Jamais du texte — 2,39:1 sur blanc.
   */
  --c-cdos30-2:      #0050b4;
  --c-cdos30-3:      #ff8823;

  /* Neutres — légèrement biaisés vers le marine plutôt que gris pur */
  --c-blanc:         #ffffff;
  --c-gris-05:       #f9f9fa;  /* fond de page alterné (existant) */
  --c-gris-10:       #eef0f3;
  --c-gris-20:       #dee1e3;  /* filets (existant) */
  --c-gris-40:       #98a1a8;  /* texte désactivé (existant) */
  --c-gris-60:       #606e79;  /* texte secondaire (existant) */
  --c-gris-80:       #374047;
  --c-noir:          #111418;

  /* ---------------------------------------------------------------
   * Rôles sémantiques — c'est ce que les composants utilisent
   * --------------------------------------------------------------- */

  --couleur-texte:            var(--c-noir);
  --couleur-texte-doux:       var(--c-gris-60);
  --couleur-titre:            var(--c-marine);
  --couleur-fond:             var(--c-blanc);
  --couleur-fond-alt:         var(--c-gris-05);
  --couleur-fond-accent:      var(--c-bleu-pale);
  --couleur-fond-inverse:     var(--c-marine);
  --couleur-texte-inverse:    var(--c-blanc);
  --couleur-filet:            var(--c-gris-20);

  /* Le filet qui sépare deux sections d'une page est plus marqué que
     celui d'une carte : relevé à #b2b2b2 sur la production. */
  --couleur-separateur:       #b2b2b2;
  --couleur-menu:             #575756;  /* gris chaud des rubriques, charte */

  /* Lien : la production utilise #0074db.
     Ratio 4,65:1 sur blanc — conforme AA pour du texte courant, de peu.
     À ne pas éclaircir sans revérifier au contraste. */
  --couleur-lien:             #0074db;
  --couleur-lien-survol:      var(--c-cdos30-2);

  /* Accents fonctionnels. L'ambre ne passe JAMAIS en couleur de texte
     sur fond clair (2,0:1) — réservé aux aplats et aux filets. */
  --couleur-accent-1:         var(--c-bleu);
  --couleur-accent-2:         var(--c-vert);
  --couleur-accent-3:         var(--c-rouge);
  --couleur-accent-4:         var(--c-ambre);

  --couleur-focus:            var(--c-bleu);

  /* ---------------------------------------------------------------
   * Typographie
   * Barlow (400/600/700/900) et Barlow Condensed (600), auto-hébergées.
   * --------------------------------------------------------------- */

  --police-titre:  "Barlow", "Helvetica Neue", Arial, sans-serif;
  --police-texte:  "Barlow", "Helvetica Neue", Arial, sans-serif;
  --police-label:  "Barlow Condensed", "Barlow", Arial, sans-serif;

  --graisse-normale:  400;
  --graisse-medium:   600;
  --graisse-forte:    700;
  --graisse-extra:    900;

  /* Échelle fluide.
     Les maxima reprennent l'existant (h1 2.92rem, h2 2.2rem) pour que le
     rendu desktop soit identique ; les minima corrigent la hiérarchie
     cassée de la prod, où h3 avait la même taille que h2 et h5 était
     plus petit que h6. */
  --t-h1:      clamp(2.05rem, 1.55rem + 2.10vw, 2.92rem);
  --t-h2:      clamp(1.65rem, 1.35rem + 1.25vw, 2.20rem);
  --t-h3:      clamp(1.35rem, 1.20rem + 0.65vw, 1.65rem);
  --t-h4:      clamp(1.15rem, 1.08rem + 0.32vw, 1.30rem);
  --t-h5:      1.05rem;
  --t-h6:      0.95rem;

  /* Le titre du bloc « Présentation de rubrique » : 2,2 rem à 1920 px
     de fenêtre, 1,6 rem sur un téléphone de 390. */
  --t-rubrique:     clamp(1.6rem, 1.447rem + 0.627vw, 2.2rem);

  --t-corps:        1rem;      /* 16px, comme la prod */
  --t-corps-grand:  1.125rem;
  --t-petit:        0.875rem;
  --t-mini:         0.8125rem;

  /*
   * Le menu principal et les libellés des réseaux sociaux ont leurs
   * propres tailles, relevées sur la production : 13 px pour le menu,
   * 12 px pour les libellés. Elles ne se déduisent pas de l'échelle du
   * thème, et elles ne se lisent pas non plus dans la maquette, dont la
   * typographie est exprimée en points.
   */
  --t-menu:         0.8125rem;
  --t-reseaux:      0.75rem;

  --interligne-titre:  1.15;   /* la prod est à 1.2 sur h2 */
  --interligne-corps:  1.55;   /* la prod est à 1.3 : trop serré pour lire */
  --interlettre-label: 0.08em;

  /* ---------------------------------------------------------------
   * Espacements — échelle unique, plus de valeurs arbitraires
   * --------------------------------------------------------------- */

  --e-3xs:  0.25rem;
  --e-2xs:  0.5rem;
  --e-xs:   0.75rem;
  --e-s:    1rem;
  --e-m:    1.5rem;
  --e-l:    2rem;
  --e-xl:   3rem;
  --e-2xl:  4rem;

  /* Rythme vertical des sections : 75px en desktop, comme la prod. */
  --e-section: clamp(2.5rem, 1.5rem + 4vw, 4.6875rem);

  /* ---------------------------------------------------------------
   * Grille
   * La prod fige 122px de padding horizontal, ce qui déborde sous 800px.
   * Ici la gouttière se resserre et la largeur utile reste identique.
   * --------------------------------------------------------------- */

  --largeur-contenu:   1196px;   /* 1440 - 2 × 122, la mesure actuelle */
  --largeur-texte:     68ch;     /* mesure de lecture des articles */
  --gouttiere:         clamp(1.25rem, 8.5vw, 7.625rem);
  --colonnes-gap:      clamp(1.25rem, 2.5vw, 2rem);

  /* ---------------------------------------------------------------
   * Divers
   * L'identité visuelle est anguleuse : aucun coin arrondi, nulle part.
   *
   * La version en ligne pose 3 px sur ses boutons ; la maquette, non.
   * C'est la maquette qui fait foi — les 3 px étaient une dérive
   * d'Oxygen, pas une intention. Le jeton reste, à zéro : il tient
   * ensemble les boutons, les étiquettes et les champs de formulaire,
   * qui doivent s'arrondir ou rester carrés d'un seul mouvement.
   * --------------------------------------------------------------- */

  /* Les chevrons de la charte : le dessin, sa largeur, son écart au texte. */
  --chevrons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath d='M2 2l4 4-4 4M12 2l4 4-4 4M22 2l4 4-4 4' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevrons-largeur: 65px;
  --chevrons-ecart:   20px;

  /*
   * Le retrait de composition : la gouttière de gauche où vivent les
   * chevrons des blocs de titre. Tout ce qui compose la page s'aligne
   * sur son bord droit, c'est-à-dire sur le début du h1 ; seuls les
   * blocs qui portent un chevron tout à gauche s'y reculent.
   */
  --retrait-composition: calc(var(--chevrons-largeur) + var(--chevrons-ecart));

  /* Le titre d'une fiche en colonnes. */
  --t-fiche-titre: 1.5rem;

  --rayon:         0;
  --rayon-bouton:  0;
  --rayon-rond:    50%;

  --ombre-carte:   0 1px 2px rgba(10, 31, 71, 0.06),
                   0 8px 24px -16px rgba(10, 31, 71, 0.25);

  --transition:    200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Épaisseur et décalage des contours de focus clavier (RGAA 10.7) */

  /*
   * Sa couleur. L'accueil n'appartient à aucune rubrique : sans cette
   * variable, la frise prendrait le marine par défaut et disparaîtrait
   * sur le fond marine du hero. Ambre, d'après la maquette.
   */
  --frise-home-couleur: var(--c-ambre);

  /*
   * Le voile des diapositives du hero.
   *
   * Noir à 20 %, comme la maquette en production. C'est peu : sur une
   * photo claire, le blanc du titre peut descendre sous 4,5:1. Même
   * choix assumé que pour les bulles, le temps que le client tranche
   * sur le RGAA. Un dégradé montant vers le bas — plus sombre sous le
   * texte, transparent en haut — rendrait le titre lisible sans
   * éteindre l'image.
   */
  --voile-slide: rgb(0 0 0 / 0.2);

  /* La pastille du bandeau en cours. Ambre de la charte ; si la maquette
     demande un autre orange, c'est ici. */
  --slider-pastille-active: var(--c-ambre);

  --focus-epaisseur: 3px;
  --focus-decalage:  2px;

  /*
   * Les chemins des masques ne sont pas ici.
   *
   * On y avait mis --bec-fichier et consorts, avec un chemin relatif.
   * Mais une URL relative posée dans une variable personnalisée n'est
   * pas résolue par rapport à la feuille qui la déclare : Chrome la
   * résout par rapport à celle qui l'UTILISE. Le même --bec-fichier
   * tombait donc juste depuis base.css et à côté depuis
   * components/motifs.css, où « ../img/ » désigne assets/css/img/.
   * Rien dans le code ne le laissait voir, et un masque introuvable
   * masque tout.
   *
   * Ils sont maintenant écrits en absolu par cdos30_masques_css(),
   * dans inc/assets.php, qui connaît l'adresse du thème. Voir aussi
   * --slider-pastille-active et --voile-slide, restés ici : ce sont
   * des couleurs, pas des chemins.
   */
}

/* ===============================================================
 * Couleurs de rubrique
 *
 * Chaque rubrique de premier niveau porte une couleur, et ses pages
 * filles en héritent. C'était déjà la règle du site — elle était
 * simplement appliquée à la main : le modèle Oxygen de « Sport et
 * femmes » recopiait #ed334f vingt-cinq fois, celui des « Maisons
 * Sport Santé » recopiait #00a652 douze fois, pour deux structures
 * par ailleurs identiques.
 *
 * Ici, une classe sur le <body> et trois variables. Le reste du thème
 * ne connaît que --couleur-rubrique.
 *
 * Trois tokens par rubrique, parce qu'une couleur de marque ne fait
 * pas les trois métiers :
 *   --couleur-rubrique       l'aplat, le filet, la pastille
 *   --couleur-rubrique-texte la même, pour du texte sur fond blanc
 *   --couleur-sur-rubrique   le texte lisible SUR l'aplat
 *
 * Mesures faites sur la palette réelle, seuils WCAG AA.
 *
 * ---------------------------------------------------------------
 * État au 6 septembre : --couleur-rubrique-texte porte la couleur
 * EXACTE de la charte, comme la maquette en ligne.
 *
 * Ce n'est pas l'usage pour lequel ce token a été créé. Il devait
 * porter une variante assombrie, chaque couleur de marque étant trop
 * claire pour du texte sur blanc — quatre rubriques sur sept tombent
 * sous 4,5:1, l'ambre jusqu'à 1,84. La consigne du chantier est de
 * coller à la maquette et de consigner l'écart : le client tranchera
 * sur l'ensemble des réserves RGAA, pas rubrique par rubrique.
 *
 * Les valeurs conformes sont conservées en commentaire à côté de
 * chacune. Revenir en arrière, ou n'en reprendre qu'une, se fait ici
 * et nulle part ailleurs : aucun composant ne connaît ces couleurs.
 * Voir « Réserve 4 » du registre RGAA.
 * =============================================================== */

:root {
  /* Valeurs par défaut : la rubrique racine, le marine du CDOS. */
  --couleur-rubrique:       var(--c-marine);

  /*
   * Les bulles d'actions ont leur propre paire de couleurs, relevée sur
   * les PNG de la production : un fond et un accompagnement, plus vifs
   * que la couleur de rubrique. « institution » et « violences » n'ayant
   * pas de bulle en production, elles retombent sur la rubrique.
   */
  --couleur-bulle:          var(--couleur-rubrique);
  --couleur-bulle-accent:   var(--couleur-rubrique);

  /*
   * Texte et pictogrammes des bulles.
   *
   * Blanc partout, comme la maquette en production — y compris sur le
   * jaune (1,8:1) et le vert (2,2:1), où il en faudrait 4,5. C'est un
   * choix assumé le temps que le client tranche sur le RGAA — la même
   * consigne que pour --couleur-rubrique-texte ci-dessous. Pour
   * revenir à la version lisible, remplacer par
   * var(--couleur-sur-rubrique) : rien d'autre à toucher.
   */
  --couleur-sur-bulle:      var(--c-blanc);
  --couleur-rubrique-texte: var(--c-marine);
  --couleur-sur-rubrique:   var(--c-blanc);
}

/* CDOS 30 — racine. Blanc sur marine : 16,16:1. */
.rubrique-institution {
  --couleur-rubrique:       #0a1f47;
  --couleur-rubrique-texte: #0a1f47;
  --couleur-sur-rubrique:   var(--c-blanc);
}

/*
 * Éducation et Citoyenneté — rouge.
 * Aucun texte ne passe AA sur cet aplat : blanc 4,05, marine 3,99.
 * Réservé aux grands titres et aux éléments d'interface (seuil 3:1).
 * Pour du texte courant, utiliser la variante assombrie.
 */
.rubrique-education {
  --couleur-bulle:          #ed334f;
  --couleur-bulle-accent:   #e01426;
  --couleur-rubrique:       #ed334f;
  --couleur-rubrique-texte: #ed334f;   /* maquette — 4,05:1 ; conforme : #ea1636 */
  --couleur-sur-rubrique:   var(--c-blanc);
}

/*
 * Santé et bien-être — vert.
 *
 * Le blanc sur cet aplat donne 3,19:1 ; le marine en donnait 5,06, et
 * c'est lui qui était en place. Le blanc a été demandé le 24 septembre,
 * sur le rendu : c'est la maquette. Écart assumé et versé au registre
 * RGAA — il passe le seuil des grands textes et des éléments
 * d'interface (3:1), pas celui du texte courant (4,5).
 *
 * Les deux autres aplats clairs — l'ambre et le rose — gardent le
 * marine pour l'instant : la demande portait sur le vert seul.
 */
.rubrique-sante {
  --couleur-bulle:          #00c650;
  --couleur-bulle-accent:   #00a527;
  --couleur-rubrique:       #00a652;
  --couleur-rubrique-texte: #00a652;   /* maquette — 3,19:1 ; conforme : #008944 */
  --couleur-sur-rubrique:   var(--c-blanc);   /* maquette — 3,19:1 ; lisible : var(--c-marine), 5,06 */
}

/*
 * Politiques publiques et Haut-niveau — bleu.
 * Même réserve que le rouge : blanc 4,19, marine 3,86.
 */
.rubrique-politiques {
  --couleur-bulle:          #0067c0;
  --couleur-bulle-accent:   #0095d8;
  --couleur-rubrique:       #0082c7;
  --couleur-rubrique-texte: #0082c7;   /* maquette — 4,19:1 ; conforme : #007cbe */
  --couleur-sur-rubrique:   var(--c-blanc);
}

/*
 * Professionnalisation — ambre, et plus bas Violences — rose.
 * Les deux cas les plus lourds : il faudrait leur retirer 40 à 44 % de
 * luminosité pour du texte lisible, quand les autres s'en tirent avec
 * 4 à 17 %. L'ambre deviendrait un brun, le rose un magenta.
 */
.rubrique-professionnalisation {
  --couleur-bulle:          #ffbb00;
  --couleur-bulle-accent:   #ff9600;
  --couleur-rubrique:       #fcb030;
  --couleur-rubrique-texte: #fcb030;   /* maquette — 1,84:1 ; conforme : #a76902 */
  --couleur-sur-rubrique:   var(--c-marine);
}

/* Gérer son association — bleu foncé. La seule couleur de rubrique
   directement lisible en texte sur blanc : 7,48:1. */
.rubrique-association {
  --couleur-bulle:          var(--c-cdos30-2);
  --couleur-bulle-accent:   #00278c;
  --couleur-rubrique:       var(--c-cdos30-2);
  --couleur-rubrique-texte: var(--c-cdos30-2);
  --couleur-sur-rubrique:   var(--c-blanc);
}

/* Violences sexistes et sexuelles — rose. Marine dessus : 7,04:1. */
.rubrique-violences {
  --couleur-rubrique:       #ff81c0;
  --couleur-rubrique-texte: #ff81c0;   /* maquette — 2,29:1 ; conforme : #e70074 */
  --couleur-sur-rubrique:   var(--c-marine);
}

/* L'ancien nom de CDOS30-3, gardé le temps que les feuilles qui s'en
   servent soient relues. La valeur n'est plus écrite deux fois. */
:root { --c-orange: var(--c-cdos30-3); }

/*
 * Hors rubrique — CDOS30-3. La production la pose sur l'annuaire des
 * comités et sur les newsletters.
 *
 * LE TEXTE LA PREND, ET C'EST UN CHANGEMENT DU 3 NOVEMBRE. Elle en
 * était exclue ici, au motif de ses 2,39:1 sur blanc — mesure juste,
 * conclusion trop large. Les sept rubriques posent toutes leur couleur
 * en texte malgré des chiffres comparables, le rose à 2,29 et l'ambre à
 * 1,84 ; en exclure la seule huitième faisait de l'orange une couleur
 * de second rang, et des pages Newsletters et Annuaire les seules du
 * site sans couleur à leurs titres. Relevé en production : le chapô,
 * les titres de section et le fil d'Ariane y sont bien orange.
 *
 * L'écart est donc traité comme les autres — porté au registre, avec sa
 * variante conforme. Celle-ci coûte d'ailleurs moins cher que pour le
 * rose ou l'ambre : 11 % de luminosité pour atteindre 3:1, 29 % pour
 * 4,5, là où le rose en demande 40 et l'ambre 44.
 *
 * Une nuance de fidélité, dite ici parce qu'elle ne se voit pas
 * ailleurs : la production garde son titre de page en marine et ne met
 * l'orange que sur le reste. Le thème colore le titre comme il colore
 * celui des sept autres rubriques — la cohérence du site a été
 * préférée à la lettre d'une page.
 *
 * Sur l'aplat orange, le texte reste marine — 6,77:1 — comme sur
 * l'ambre et le rose, qui ont la même clarté.
 */
/*
 * La bulle orange a sa paire, comme les bulles d'actions : un fond et
 * un accompagnement. Les deux sont relevés sur la maquette des
 * newsletters fournie le 3 novembre — fond orange, graphisme dans un
 * ton plus clair. L'accompagnement y mesure #fca72a, à deux points de
 * l'ambre de la charte : c'est la valeur du dessin qui est reprise,
 * pas l'ambre, parce qu'une bulle n'est pas une rubrique et que rien
 * n'oblige les deux à coïncider.
 */
/*
 * Agenda — rouge, le même que l'Éducation et Citoyenneté : c'est une
 * couleur de page, pas une rubrique (voir cdos30_couleurs_de_page()).
 * Mêmes réserves de contraste que la rubrique rouge.
 */
.rubrique-agenda {
  --couleur-bulle:          #ed334f;
  --couleur-bulle-accent:   #e01426;
  --couleur-rubrique:       #ed334f;
  --couleur-rubrique-texte: #ed334f;   /* maquette — 4,05:1 ; conforme : #ea1636 */
  --couleur-sur-rubrique:   var(--c-blanc);
}

.rubrique-general {
  --couleur-bulle:          var(--c-cdos30-3);
  --couleur-bulle-accent:   #fca72a;
  --couleur-sur-bulle:      var(--c-blanc);
  --couleur-rubrique:       var(--c-cdos30-3);
  --couleur-rubrique-texte: var(--c-cdos30-3);   /* maquette — 2,39:1 ; conformes : #e2791f (3:1), #b56019 (4,5:1) */
  --couleur-sur-rubrique:   var(--c-marine);
}

/*
 * LE DÉCOR DU HERO, QUAND LA COULEUR DE RUBRIQUE EST CELLE DU FOND.
 *
 * Le coq du bandeau prend la couleur de rubrique. Sur CDOS 30 — et sur
 * une page qui ne choisit aucune rubrique, qui retombe sur le même
 * marine — cela donne un coq marine sur un fond marine : le décor est
 * là, il ne se voit pas. La feuille du bandeau le notait depuis
 * l'annuaire sans que rien ne le corrige.
 *
 * La charte a sa réponse, et c'est le client qui la donne : CDOS30-2.
 * La production l'applique déjà partout sur la rubrique CDOS 30, photo
 * ou pas — les fichiers s'y appellent « Coq-bleu-1 », quand les autres
 * rubriques ont « Coq-rose-rouge » et leurs semblables.
 *
 * La règle vit ici, avec les rubriques, et non dans la feuille du
 * bandeau : c'est une décision de palette, pas de composant.
 */
.rubrique-institution,
body:not([class*="rubrique-"]) { --couleur-decor-hero: var(--c-cdos30-2); }

/*
 * Sous 62 rem, le chevron cesse d'être une valeur fixe et suit le corps
 * du titre, pour rester à la hauteur de ses capitales quand celui-ci se
 * resserre. Le facteur est celui qui redonne exactement 65 px à 992 px,
 * où le titre vaut 29,4 : en dessous, les deux se réduisent ensemble.
 *
 * Le retrait de composition étant calculé sur cette largeur, il suit de
 * lui-même — la page reste alignée sur le début du titre sans qu'on ait
 * à l'écrire une seconde fois.
 */
@media (max-width: 62rem) {
  :root { --chevrons-largeur: calc(var(--t-rubrique) * 65 / 29.4); }
}

/*
 * La gouttière de composition disparaît et tout repart du bord de la
 * page. Les blocs à chevron gardent le leur dans sa colonne, à
 * l'intérieur du bloc : c'est alors leur titre seul qui est en retrait,
 * et tout le reste — chevrons, chapôs, encarts, grilles — s'aligne sur
 * le bord. C'est ce que fait la production.
 *
 * ## POURQUOI 62 REM ET NON 48
 *
 * Cette gouttière n'existe qu'à gauche : elle décale donc le contenu
 * vers la droite, et les marges de la page ne sont pas égales. Sur un
 * grand écran c'est voulu — la maquette ne cale pas la page sur la
 * marge du conteneur mais sur le début du titre h1, et les chevrons
 * vivent dans ce décalage.
 *
 * Mais le bloc « Présentation » passe en superposition à 62 rem : son
 * titre n'est plus à gauche de son texte, il est au-dessus. Il n'y a
 * donc plus rien à aligner sur un début de titre, et le retrait ne
 * décale plus qu'une chose — la page entière, d'un côté. Relevé par
 * Pascal en mode tablette : entre 48 et 62 rem, les marges gauche et
 * droite différaient de quatre-vingt-cinq pixels sans raison visible.
 *
 * La bascule est donc remontée là où elle cesse d'avoir un sens. Le
 * triptyque y gagne au passage la même largeur.
 *
 * Écrit ici, au même endroit que le jeton, pour que tous ceux qui s'en
 * servent — contenu de page, titre de page, bandeau pleine largeur —
 * basculent ensemble.
 */
@media (max-width: 62rem) {
  :root { --retrait-composition: 0px; }
}