/* ==========================================================================
   CHARTE IMPÉRIALE — al-quran.fr (v1, 18/10/2026)
   Feuille chargée en dernier sur toutes les pages : elle fixe les jetons de
   la charte (couleurs, typographie, espacements, ornements) et uniformise
   les composants communs. Les autres feuilles décrivent la fonction ; celle-ci
   décide de l'apparence. Toute valeur visuelle nouvelle passe par un jeton.
   Ornements : zellige de Fès généré géométriquement (img/zellige/) —
   rosaces à 12 branches à trois couronnes, étoiles à 6 et à 4 branches,
   médaillon à 16 branches. Aucune photo, aucun motif emprunté.
   ========================================================================== */

:root {
  /* — Couleurs de la charte (les seules autorisées) — */
  --ch-carmin:      #7a0a0a;   /* pourpre impérial : titres, cadres, actif   */
  --ch-carmin-fonce:#4f0505;   /* barres, pied de page                       */
  --ch-or:          #b8902c;   /* filets, ornements, bordures                */
  --ch-or-clair:    #ead49b;   /* texte sur carmin                           */
  --ch-ivoire:      #fbf7ee;   /* feuillet                                   */
  --ch-parchemin:   #f3ead6;   /* encarts, cartes                            */
  --ch-hors-page:   #efe7d6;   /* fond extérieur                             */
  --ch-encre:       #231c14;   /* texte arabe et corps                       */
  --ch-sepia:       #4e3b28;   /* traductions                                */
  --ch-vert:        #1f5a46;   /* zellige : étoile à 6 (accent secondaire)   */
  --ch-cobalt:      #1f3f6e;   /* zellige : couronne (liens visités, info)   */
  --ch-filet:       rgba(184,144,44,.45);
  --ch-voile:       rgba(122,10,10,.05);

  /* — Typographie — */
  --ch-titre:  'Cinzel', 'Trajan Pro', Georgia, serif;
  --ch-texte:  'Lora', Georgia, 'Times New Roman', serif;
  --ch-arabe:  'Amiri', 'Amiri Quran', 'Scheherazade New', serif;
  --ch-corps:  17px;
  --ch-interligne: 1.78;

  /* — Espacements (échelle 4) — */
  --ch-1: 4px; --ch-2: 8px; --ch-3: 12px; --ch-4: 16px; --ch-5: 24px; --ch-6: 32px; --ch-7: 48px;

  /* — Ornements — */
  --ch-zellige:      url("../img/zellige/fes.svg");
  --ch-zellige-pale: url("../img/zellige/fes_pale.svg");
  --ch-frise:        url("../img/zellige/fes_band.svg");
  --ch-rosace:       url("../img/zellige/rosace16.svg");
  --ch-rosace-or:    url("../img/zellige/rosace16_or.svg");

  /* Alignement des anciennes variables sur la charte : toutes les feuilles
     existantes héritent ainsi des mêmes teintes. */
  --rouge: var(--ch-carmin);
  --or: var(--ch-or);
  --or-clair: var(--ch-or-clair);
  --parchemin: var(--ch-ivoire);
  --hors-page: var(--ch-hors-page);
  --texte: var(--ch-encre);
  --texte-fr: var(--ch-sepia);
  --or-fade: var(--ch-filet);
  --rouge-fade: var(--ch-voile);
}

/* ---------- Fond extérieur : zellige de Fès, version estompée ---------- */
html {
  background-color: var(--ch-hors-page);
  background-image: var(--ch-zellige-pale);
  background-size: 284px auto;
  background-repeat: repeat;
}
body { color: var(--ch-encre); font-family: var(--ch-texte); }

/* ---------- Barre de navigation ---------- */
.gr-langbar {
  background: linear-gradient(180deg, #8a0f0f 0%, var(--ch-carmin) 45%, var(--ch-carmin-fonce) 100%);
  border-bottom: 2px solid var(--ch-or);
  box-shadow: 0 3px 0 var(--ch-carmin-fonce), 0 6px 18px rgba(0,0,0,.22);
  position: sticky; top: 0; z-index: 1000;   /* barre fixe en haut, sur toutes les pages */
}
html { scroll-padding-top: 120px; }   /* une ancre (#phrase) ne passe pas sous la barre */
@media (max-width: 1180px) { html { scroll-padding-top: 80px; } }
.gr-langbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 12px;
  background: var(--ch-frise) repeat-x center / auto 12px;
  border-bottom: 1px solid var(--ch-or);
  pointer-events: none; opacity: .95;
}
.gr-langbar .gr-menu-btn, .gr-langbar .gr-input, .gr-langbar select, .gr-zoom-controls button {
  border-radius: 0 !important;
  border-color: var(--ch-or) !important;
}
.gr-dropdown-menu { border: 1px solid var(--ch-or); border-top: 3px solid var(--ch-or); border-radius: 0; }
.imperial-page-wrap { padding-top: 40px; }

/* ---------- Feuillet ---------- */
.page { background: var(--ch-ivoire); box-shadow: 0 10px 30px rgba(35,28,20,.20); }
.frame-outer { border: 3px double var(--ch-carmin); inset: 9px; }
.frame-inner { border: 1px solid var(--ch-or); inset: 17px; }
.frame-inner::before, .frame-inner::after,
.frame-outer::before, .frame-outer::after {
  content: ""; position: absolute; width: 34px; height: 34px;
  background: var(--ch-rosace-or) center / contain no-repeat;
}
.frame-inner::before { top: -17px; left: -17px; }
.frame-inner::after  { top: -17px; right: -17px; }
.frame-outer::before { bottom: -9px; left: -9px; width: 34px; height: 34px; }
.frame-outer::after  { bottom: -9px; right: -9px; width: 34px; height: 34px; }
.watermark { opacity: .035; }

/* ---------- Bandeau de page ---------- */
.page-masthead { text-align: center; margin: var(--ch-2) 0 var(--ch-3); }
.badge-imp {
  font-family: var(--ch-titre); letter-spacing: .18em; font-size: 12px;
  background: linear-gradient(180deg, #8a0f0f, var(--ch-carmin-fonce));
  color: var(--ch-or-clair); border: 1px solid var(--ch-or);
  box-shadow: inset 0 0 0 2px var(--ch-carmin-fonce), inset 0 0 0 3px rgba(234,212,155,.5);
  padding: 6px 16px; border-radius: 0;
}
.title-flourish { margin: var(--ch-3) 0 var(--ch-1); gap: 14px; }
.title-flourish::before, .title-flourish::after { width: 90px; height: 1px; }
.title-flourish-mark {
  display: inline-block; width: 46px; height: 46px; font-size: 0; color: transparent;
  background: var(--ch-rosace) center / contain no-repeat;
}
.title-main {
  font-family: var(--ch-titre); color: var(--ch-carmin); font-weight: 700;
  letter-spacing: .06em; font-size: clamp(22px, 3.4vw, 34px);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
[dir="rtl"] .title-main, .title-main:lang(ar) { font-family: var(--ch-arabe); letter-spacing: 0; text-transform: none; }
.page-subtitle {
  font-family: var(--ch-titre); letter-spacing: .14em;
  background: linear-gradient(180deg, #8a0f0f, var(--ch-carmin-fonce)); color: var(--ch-or-clair);
  border: 1px solid var(--ch-or); border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--ch-carmin-fonce), inset 0 0 0 3px rgba(234,212,155,.45);
}
[dir="rtl"] .page-subtitle { font-family: var(--ch-arabe); letter-spacing: 0; }

/* ---------- Frise de zellige ---------- */
.zellij-band {
  height: 30px; max-width: 700px; margin: var(--ch-4) auto var(--ch-6);
  background: var(--ch-frise) repeat-x center / auto 30px;
  border-top: 2px solid var(--ch-or); border-bottom: 2px solid var(--ch-or);
  box-shadow: 0 -4px 0 -2px var(--ch-carmin), 0 4px 0 -2px var(--ch-carmin);
}

/* ---------- Onglets, boutons, pastilles ---------- */
.lect-subnav-btn, .lect-tab, .tx-mode-btn, .pager-btn {
  font-family: var(--ch-titre); font-size: 12.5px; letter-spacing: .08em;
  border: 1px solid var(--ch-or) !important; border-radius: 0 !important;
  background: var(--ch-ivoire); color: var(--ch-carmin);
  padding: 7px 14px;
}
[dir="rtl"] .lect-subnav-btn, .lect-subnav-btn:lang(ar) { font-family: var(--ch-arabe); font-size: 15px; letter-spacing: 0; }
.lect-subnav-btn:hover, .lect-tab:hover { background: var(--ch-parchemin); }
.lect-subnav-btn.active, .lect-tab.active {
  background: linear-gradient(180deg, #8a0f0f, var(--ch-carmin-fonce)); color: var(--ch-or-clair);
  box-shadow: inset 0 0 0 2px var(--ch-carmin-fonce), inset 0 0 0 3px rgba(234,212,155,.5);
}

/* ---------- Titres de section ---------- */
.lect-sec-h, .ch-h2 {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ch-titre); color: var(--ch-carmin); letter-spacing: .12em;
  text-transform: uppercase; font-size: 15px; margin: var(--ch-7) 0 var(--ch-4);
}
.lect-sec-h::before, .ch-h2::before {
  content: ""; flex: 0 0 26px; height: 26px; background: var(--ch-rosace-or) center / contain no-repeat;
}
.lect-sec-h::after, .ch-h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ch-or), transparent); }
[dir="rtl"] .lect-sec-h::after, [dir="rtl"] .ch-h2::after { background: linear-gradient(270deg, var(--ch-or), transparent); }
[dir="rtl"] .lect-sec-h, [dir="rtl"] .ch-h2 { font-family: var(--ch-arabe); letter-spacing: 0; font-size: 20px; }

/* ---------- Prose : justifiée et ornée, partout ---------- */
.ui-prose p, .ui-prose .scribes-intro, .ui-prose .scribes-explain, .lect-intro, .lect-read p,
.dd-mot p, .blog-body p, .et-body p, .lect-card p, .ch-prose p {
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto;
}
.lect-intro { text-align: justify; text-align-last: center; }
[dir="rtl"] .ui-prose p, [dir="rtl"] .lect-intro, [dir="rtl"] .dd-mot p, [dir="rtl"] .ch-prose p { text-align: justify; hyphens: none; }
.ui-prose .sep .sep-d::before, .tx-sep span, .ch-sep::before {
  content: ""; display: inline-block; width: 30px; height: 30px; font-size: 0;
  background: var(--ch-rosace-or) center / contain no-repeat; vertical-align: middle;
}
.ch-sep { display: flex; align-items: center; justify-content: center; gap: 14px; margin: var(--ch-6) 0; }
.ch-sep::after, .ch-sep > span { display: none; }
.ch-sep::before { box-shadow: 0 0 0 0 transparent; }
.ch-sep { background: linear-gradient(90deg, transparent, var(--ch-or) 30%, transparent 30%, transparent 70%, var(--ch-or) 70%, transparent) center / 100% 1px no-repeat; }

/* Lettrine */
.ch-lettrine::first-letter {
  float: left; font-family: var(--ch-titre); font-weight: 700; color: var(--ch-carmin);
  font-size: 3.6em; line-height: .82; padding: 6px 10px 0 0;
  text-shadow: 1px 1px 0 var(--ch-or-clair);
}
[dir="rtl"] .ch-lettrine::first-letter { float: none; font-size: inherit; padding: 0; text-shadow: none; font-family: inherit; }

/* ---------- Cartes ---------- */
.lect-card, .sura-card, .ch-card {
  border-radius: 0 !important; border: 1px solid var(--ch-filet);
  border-top: 3px solid var(--ch-or); background: #fffdf7;
}

/* ---------- Tableaux ---------- */
table.table-imp, .stats-table, .ch-table { border-collapse: collapse; }
.ch-table th, .stats-table th { background: var(--ch-carmin); color: var(--ch-or-clair); font-family: var(--ch-titre); letter-spacing: .06em; }
.ch-table td, .ch-table th { border: 1px solid var(--ch-filet); padding: 8px 10px; }

/* ---------- Pied de page ---------- */
.footer-imperial {
  margin-top: var(--ch-7); padding: 0 0 var(--ch-5);
  background: linear-gradient(180deg, var(--ch-carmin), var(--ch-carmin-fonce));
  border-top: 2px solid var(--ch-or); max-width: none !important;
}
.footer-imperial .footer-zellij {
  max-width: none; height: 40px; margin: 0 0 var(--ch-5);
  background: var(--ch-frise) repeat-x center / auto 40px;
  border-bottom: 2px solid var(--ch-or); border-top: 0;
}
.footer-links { gap: 12px 14px; padding: 0 var(--ch-4); }
.footer-links a { color: var(--ch-or-clair) !important; font-family: var(--ch-titre); letter-spacing: .08em; }
.footer-links a:hover { color: #fff !important; }
.footer-sep { color: var(--ch-or); }
.footer-sig { color: var(--ch-or-clair); opacity: .85; margin-top: var(--ch-3); font-family: var(--ch-titre); font-size: 12px; letter-spacing: .1em; }

/* ---------- Liens ---------- */
.page a { color: var(--ch-carmin); text-decoration-color: var(--ch-filet); text-underline-offset: 3px; }
.page a:hover { color: #a01212; }

/* ---------- Mobile ---------- */
@media (max-width: 1180px) {
  .gr-collapsible { background: var(--ch-carmin-fonce) !important; border-bottom: 2px solid var(--ch-or); }
}
@media (max-width: 720px) {
  html { background-size: 200px auto; }
  .imperial-page-wrap { padding: 32px 8px 40px; }
  .page { padding: 22px 16px 32px; }
  .frame-outer { inset: 5px; } .frame-inner { inset: 11px; }
  .frame-inner::before, .frame-inner::after, .frame-outer::before, .frame-outer::after { width: 24px; height: 24px; }
  .frame-inner::before { top: -12px; left: -12px; } .frame-inner::after { top: -12px; right: -12px; }
  .frame-outer::before { bottom: -6px; left: -6px; } .frame-outer::after { bottom: -6px; right: -6px; }
  .title-flourish-mark { width: 36px; height: 36px; }
  .title-flourish::before, .title-flourish::after { width: 50px; }
  .zellij-band { height: 22px; background-size: auto 22px; margin-bottom: var(--ch-5); }
  .lect-subnav-btn { font-size: 11.5px; padding: 6px 10px; }
  .footer-imperial .footer-zellij { height: 28px; background-size: auto 28px; }
  .ui-prose p, .lect-intro, .dd-mot p, .ch-prose p { hyphens: auto; }
}
@media (max-width: 420px) {
  .title-main { font-size: 21px; }
  .badge-imp { font-size: 10.5px; letter-spacing: .12em; }
}
@media print {
  html { background: none; }
  .gr-langbar::after, .zellij-band, .footer-imperial .footer-zellij { display: none; }
}

/* ==========================================================================
   Page « Comment nous traduisons » (methode.php)
   ========================================================================== */
.mt { max-width: 860px; margin: 0 auto; font-size: var(--ch-corps); line-height: var(--ch-interligne); color: var(--ch-encre); }
.mt p { margin: 0 0 var(--ch-4); }
[dir="rtl"] .mt { font-family: var(--ch-arabe); font-size: 20px; line-height: 1.95; }
.mt-intro { font-size: 19px; line-height: 1.8; color: #2e2410; margin-top: var(--ch-5) !important; }
[dir="rtl"] .mt-intro { font-size: 22px; }
.mt-principes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--ch-4); }
.mt-principe { position: relative; padding: var(--ch-5) var(--ch-5) var(--ch-4); }
.mt-principe-n {
  position: absolute; top: -16px; inset-inline-start: 18px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ch-carmin); color: var(--ch-or-clair); font-family: var(--ch-titre); font-size: 15px;
  border: 1px solid var(--ch-or); transform: rotate(45deg);
}
.mt-principe-n::after { content: attr(data-n); display: inline-block; transform: rotate(-45deg); font-size: 15px; }
.mt-ar { font-family: var(--ch-arabe); font-size: 1.12em; font-style: normal; }
.mt-principe h3 { font-family: var(--ch-titre); color: var(--ch-carmin); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin: 4px 0 var(--ch-2); }
[dir="rtl"] .mt-principe h3 { font-family: var(--ch-arabe); font-size: 21px; letter-spacing: 0; }
.mt-principe p { margin: 0; font-size: 16px; }
[dir="rtl"] .mt-principe p { font-size: 19px; }
.mt-couches { list-style: none; margin: 0; padding: 0; position: relative; }
.mt-couches::before {
  content: ""; position: absolute; top: 40px; bottom: 40px; inset-inline-start: 39px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--ch-or) 0 8px, transparent 8px 14px);
}
.mt-couche { display: grid; grid-template-columns: 80px 1fr; gap: var(--ch-5); margin: 0 0 var(--ch-6); position: relative; }
.mt-couche-medal {
  width: 80px; height: 80px; position: relative;
  background: var(--ch-rosace) center / contain no-repeat;
  filter: drop-shadow(0 3px 6px rgba(35,28,20,.25));
}
.mt-couche-medal span {
  position: absolute; inset: 27px; display: flex; align-items: center; justify-content: center;
  background: var(--ch-ivoire); border: 1px solid var(--ch-or); border-radius: 50%;
  font-family: var(--ch-titre); font-weight: 700; color: var(--ch-carmin); font-size: 15px;
}
[dir="rtl"] .mt-couche-medal span { font-family: var(--ch-arabe); font-size: 18px; }
.mt-couche-body { background: #fffdf7; border: 1px solid var(--ch-filet); border-top: 3px solid var(--ch-carmin); padding: var(--ch-5) var(--ch-5) var(--ch-3); position: relative; }
.mt-couche-body::before {
  content: ""; position: absolute; top: 28px; inset-inline-start: -9px; width: 16px; height: 16px;
  background: #fffdf7; border-inline-start: 1px solid var(--ch-filet); border-bottom: 1px solid var(--ch-filet); transform: rotate(45deg);
}
[dir="rtl"] .mt-couche-body::before { transform: rotate(-45deg); }
.mt-couche-h { font-family: var(--ch-titre); color: var(--ch-carmin); font-size: 21px; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
[dir="rtl"] .mt-couche-h { font-family: var(--ch-arabe); font-size: 26px; letter-spacing: 0; }
.mt-couche-sub { font-style: italic; color: var(--ch-sepia); margin: 2px 0 var(--ch-4) !important; text-align: start !important; }
[dir="rtl"] .mt-couche-sub { font-style: normal; }
.mt-chiffres { display: flex; flex-wrap: wrap; gap: var(--ch-3); border-top: 1px solid var(--ch-filet); padding-top: var(--ch-3); margin-top: var(--ch-2); }
.mt-chiffre { flex: 1 1 150px; display: flex; flex-direction: column; }
.mt-chiffre b { font-family: var(--ch-titre); font-size: 28px; line-height: 1.1; color: var(--ch-carmin); }
.mt-chiffre span { font-size: 14px; color: var(--ch-sepia); line-height: 1.35; }
[dir="rtl"] .mt-chiffre span { font-size: 17px; }
.mt-regard {
  margin: 0; padding: var(--ch-5) var(--ch-6); position: relative;
  background: linear-gradient(135deg, #fffdf7, var(--ch-parchemin));
  border: 1px solid var(--ch-or); border-inline-start: 5px solid var(--ch-carmin);
  font-style: italic; color: #2e2410;
}
[dir="rtl"] .mt-regard { font-style: normal; }
.mt-regard::before {
  content: ""; position: absolute; top: -20px; inset-inline-end: 22px; width: 40px; height: 40px;
  background: var(--ch-rosace-or) center / contain no-repeat;
}
.mt-regard footer { font-style: normal; font-family: var(--ch-titre); font-size: 12.5px; letter-spacing: .1em; color: var(--ch-carmin); text-align: end; }
[dir="rtl"] .mt-regard footer { font-family: var(--ch-arabe); font-size: 17px; letter-spacing: 0; }
.mt-liens { display: flex; flex-wrap: wrap; gap: var(--ch-2); justify-content: center; margin: var(--ch-4) 0 var(--ch-2); }
.mt-quote { text-align: center !important; font-family: var(--ch-titre); color: var(--ch-carmin); font-size: 17px; letter-spacing: .03em; line-height: 1.6; max-width: 640px; margin: 0 auto var(--ch-4) !important; }
[dir="rtl"] .mt-quote { font-family: var(--ch-arabe); font-size: 22px; }
@media (max-width: 720px) {
  .mt-principes { grid-template-columns: 1fr; gap: var(--ch-5); }
  .mt-couches::before { inset-inline-start: 27px; }
  .mt-couche { grid-template-columns: 56px 1fr; gap: var(--ch-3); }
  .mt-couche-medal { width: 56px; height: 56px; }
  .mt-couche-medal span { inset: 18px; font-size: 12px; }
  .mt-couche-body { padding: var(--ch-4) var(--ch-4) var(--ch-2); }
  .mt-couche-body::before { top: 20px; }
  .mt-couche-h { font-size: 18px; }
  .mt-regard { padding: var(--ch-5) var(--ch-4); }
  .mt-intro { font-size: 17.5px; }
}
@media (max-width: 520px) {
  .mt-couches::before { display: none; }
  .mt-couche { grid-template-columns: 1fr; gap: 0; }
  .mt-couche-medal { width: 46px; height: 46px; position: absolute; top: -14px; inset-inline-end: 10px; z-index: 2; }
  .mt-couche-medal span { inset: 15px; font-size: 10px; }
  .mt-couche-body::before { display: none; }
  .mt-couche-body { padding-top: var(--ch-5); }
  .mt-principe p, .mt-couche-body p, .mt-regard p { text-align: start; hyphens: auto; }
}

/* Diwan : structure du texte en mots */
.ui-dv-structure { margin: var(--ch-5) 0 var(--ch-6); }
.ui-dv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-dv-table { width: 100%; font-size: 15px; background: #fffdf7; }
.ui-dv-table td:not(:first-child), .ui-dv-table th:not(:first-child) { text-align: end; white-space: nowrap; }
.ui-dv-table small { color: var(--ch-sepia); font-size: 12.5px; }
.ui-dv-table .ui-dv-ref td { background: var(--ch-parchemin); font-style: italic; }
.ui-dv-sub { font-family: var(--ch-titre); color: var(--ch-carmin); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin: var(--ch-5) 0 var(--ch-3); }
[dir="rtl"] .ui-dv-sub { font-family: var(--ch-arabe); font-size: 19px; letter-spacing: 0; }
.ui-dv-ecarts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ui-dv-ecart { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 7px 12px; background: #fffdf7; border: 1px solid var(--ch-filet); border-inline-start: 4px solid var(--ch-or); }
.ui-dv-n-retire, .ui-dv-n-ajoute { border-inline-start-color: var(--ch-carmin); }
.ui-dv-ecart-ref { font-family: var(--ch-titre); color: var(--ch-carmin); font-size: 13px; min-width: 52px; }
.ui-dv-ecart-ar { font-family: var(--ch-arabe); font-size: 21px; }
.ui-dv-arrow { color: var(--ch-or); }
.ui-dv-ecart-n { font-style: italic; color: var(--ch-sepia); font-size: 14px; }
.ui-dv-n-retire .ui-dv-ecart-n, .ui-dv-n-ajoute .ui-dv-ecart-n { color: var(--ch-carmin); font-style: normal; font-weight: 600; }
.ui-dv-ecart-r { margin-inline-start: auto; font-size: 13px; color: var(--ch-sepia); }
.ui-dv-concl { margin-top: var(--ch-4); padding: var(--ch-4) var(--ch-5); background: linear-gradient(135deg, #fffdf7, var(--ch-parchemin)); border: 1px solid var(--ch-or); border-inline-start: 5px solid var(--ch-carmin); text-align: justify; }
@media (max-width: 720px) { .ui-dv-table { font-size: 13.5px; } .ui-dv-ecart-r { margin-inline-start: 0; flex-basis: 100%; } }