/* ============================================================
   PREMIÈRE SECTION DE L'ACCUEIL : une phrase, des projets, sur une grille de 3 colonnes.
   Le carrousel de l'accueil (js/carousel.js : glisser, inertie, points façon Apple, lecture automatique) est repris tel quel ;
   seule sa mise en page change.

   Une seule chose au premier plan : la phrase. Les projets viennent ensuite, la légende du projet en dernier.
     1. en haut, colonnes 1-2 : « Rémy Martinez », la phrase en grand, le bouton et ce que je fais ;
     2. au milieu : les visuels, une colonne chacun (80 %), calés en bas à gauche d'une case 4:5, coupés net aux marges ;
     3. en bas : à gauche la légende du projet de la première colonne (« 01 / 12 », nom, année, phrase),
        au centre les points, à droite la disponibilité.
   Pas de filet, pas de cadre : la grille se sent, elle ne se voit pas.
   ============================================================ */
.xs-mode{--work-gap:clamp(20px,3vw,48px);--xs-ink:#16181b;--xs-quiet:#5b6168;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  padding-top:clamp(84px,12vh,112px);padding-bottom:clamp(16px,3vh,28px);background:#fff}
.xs-mode .work-carousel{flex:1;display:flex;flex-direction:column;min-height:0}

/* ---- en haut : la phrase ---- */
.xs-top{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--work-gap)}
.xs-who{grid-column:1 / 3;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0}
.xs-name{font-size:clamp(14px,1.1vw,16px);font-weight:600;letter-spacing:-.005em;line-height:1.3;color:var(--xs-quiet);text-decoration:none}
.xs-pitch{margin:clamp(8px,1.4vh,14px) 0 0;max-width:28ch;font-size:clamp(26px,2.9vw,46px);font-weight:600;line-height:1.04;letter-spacing:-.035em;color:var(--xs-ink);text-wrap:balance}
.xs-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:clamp(16px,2.8vh,28px)}
.xs-cta{height:40px;padding-inline:18px;font-size:14.5px;flex:none}
.xs-does{margin:0;max-width:30ch;font-size:clamp(13.5px,1.05vw,15px);font-weight:400;line-height:1.4;color:var(--xs-quiet)}

/* ---- visuels : une colonne chacun (80 %), calés en bas à gauche d'une case 4:5, coupés net aux marges ---- */
.xs-mode .viewport{flex:1;display:flex;align-items:center;overflow:hidden;margin-block:0;padding-block:clamp(16px,3.2vh,40px);min-height:0}
.xs-mode .work-track{align-items:flex-end;flex:none;width:calc(100% + var(--work-gap))}   /* largeur visible + écart : 3 colonnes exactes, le reste déborde */
.xs-mode .work-slide{flex:0 0 33.3333%}
.xs-mode .work-card{width:80%;height:clamp(150px,calc(100svh - 540px),560px);aspect-ratio:auto}   /* hauteur définie : les visuels se calent dans une case de largeur 80 % de la colonne */
.xs-mode .work-image-frame{background:none;border-radius:0;overflow:hidden}
.xs-mode .work-image-frame::after,.xs-mode .work-image-shade,.xs-mode .work-logo,.xs-mode .work-summary{display:none}
.xs-mode .work-image{border-radius:0;object-fit:contain;object-position:left bottom;opacity:0}   /* invisible jusqu'à ce que le blanc soit retiré : pas de saut à l'affichage */
.xs-mode .work-image.xs-ready{opacity:1}
.xs-mode .work-card:focus-visible{outline:2px solid var(--xs-ink);outline-offset:-2px}
@media (hover:hover){.xs-mode .work-card:hover .work-image{transform:none}}
.xs-cap{display:none}

/* ---- en bas : légende du projet | points | disponibilité ---- */
.xs-foot{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--work-gap);align-items:start;margin-top:clamp(8px,1.6vh,18px)}
.xs-foot-l{grid-column:1;grid-row:1;min-width:0}
.xs-mode .xs-foot .dotnav-wrap{grid-column:2;grid-row:1;margin-top:0;justify-self:center}
.xs-top-r{grid-column:3;grid-row:1;display:flex;justify-content:flex-end;align-items:flex-start;padding-top:1px}   /* en haut à droite : au bord droit de la marge, à la hauteur du nom */
.xs-idx{margin:0 0 6px;font-size:12px;font-weight:500;line-height:1;color:var(--xs-quiet);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.xs-current{margin:0;min-height:1.3em;font-size:clamp(16px,1.25vw,18px);font-weight:600;line-height:1.25;letter-spacing:-.015em;color:var(--xs-ink);transition:opacity .25s ease}
.xs-desc{margin:3px 0 0;max-width:34ch;min-height:2.8em;font-size:clamp(13px,1vw,14.5px);font-weight:400;line-height:1.4;color:var(--xs-quiet);transition:opacity .25s ease}
.xs-current.swap,.xs-desc.swap,.xs-idx.swap{opacity:0}
.xs-year{margin-left:.5em;font-size:.78em;font-weight:500;letter-spacing:0;color:var(--xs-quiet);font-variant-numeric:tabular-nums}
.xs-avail{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--xs-quiet)}
.xs-avail-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#1f8958;box-shadow:0 0 0 4px rgba(31,137,88,.16)}

/* ---- écrans bas ---- */
@media (max-height:700px) and (min-width:761px){
  .xs-mode{padding-top:84px}
  .xs-pitch{font-size:clamp(26px,3vw,40px)}
  .xs-act{margin-top:12px}
  .xs-desc{min-height:0}
  .xs-mode .work-card{height:clamp(150px,calc(100svh - 430px),360px)}
}

/* ---- tablette ---- */
@media (min-width:761px) and (max-width:1100px){
  .xs-pitch{font-size:clamp(28px,4.6vw,44px)}
  .xs-mode .work-card{height:clamp(200px,calc(100svh - 500px),480px)}
}

/* ---- téléphone : la phrase, puis ~1,6 visuel, puis la légende, les points, la disponibilité ---- */
@media (max-width:760px){
  .xs-mode{padding-top:88px}
  .xs-top{display:flex;flex-direction:column}
  .xs-top-r{order:-1;margin-bottom:10px}
  .xs-mode .work-slide{flex-basis:62%}
  .xs-mode .work-card{width:100%;height:clamp(180px,28svh,320px)}
  .xs-foot{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
  .xs-mode .xs-foot .dotnav-wrap{order:2;align-self:center}
  .xs-foot-l{order:1}
  .xs-avail{display:inline-flex;max-width:32ch}
}
@media@media (max-width:360px){
  .xs-mode .work-slide{flex-basis:70%}
  .xs-cta{height:38px;padding-inline:14px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.xs-current,.xs-desc,.xs-idx{transition:none}}

/* ============================================================
   TÉLÉPHONE : pas de grands textes. La hiérarchie passe par la couleur (noir / gris) et la graisse (600 / 400),
   pas par la taille : sur un écran d'iPhone, tout tient entre 13 et 18 px, avec des écarts de 1 à 2 px seulement.
   On change l'échelle typographique du site (variables de system.css) puis les éléments de la première section.
   ============================================================ */
@media (max-width:760px){
  :root{
    --fs-display:18px; --fs-title:18px; --fs-section:18px; --fs-sub:17px; --fs-card:16px; --fs-lead:16px;
    --fs-body:15px; --fs-small:13px;
    --lh-head:1.25; --lh-tight:1.2; --lh-body:1.5;
    --tr-display:-.02em; --tr-head:-.02em; --tr-body:-.005em;
  }
  /* première section */
  .xs-name{font-size:14px;font-weight:600;color:var(--xs-quiet)}
  .xs-pitch{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.015em;max-width:32ch;margin-top:6px}
  .xs-does{font-size:14px;font-weight:400}
  .xs-cta{font-size:15px;height:42px;padding-inline:18px}
  .xs-current{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
  .xs-desc{font-size:14px}
  .xs-idx{font-size:13px}
  .xs-avail{font-size:13px}
  .xs-year{font-size:.9em;margin-left:.4em}
}
@media (max-width:360px){
  .xs-pitch{font-size:16px}
}

/* ============================================================
   TÉLÉPHONE : une vraie grille. Marges de 20 px, 4 colonnes de 79 px (iPhone 16, 393 px), gouttière de 12 px, unité de 8 px.
   Les éléments sont posés dans cet ordre, tous alignés à gauche sur la même marge :
     1. « Rémy Martinez »                                     (colonnes 1-4, gris)
     2. la phrase                                             (colonnes 1-4, noir, gras)
     3. le visuel                                             (colonnes 1-3 ; le 4ᵉ montre le début du suivant)
     4. légende : nom du projet + phrase  |  « 01 / 12 »      (colonnes 1-3 | colonne 4)
     5. le bouton                                             (colonnes 1-4, 48 px de haut)
     6. la disponibilité, sur une seule ligne                 (colonnes 1-4, gris)
   Espaces : 8 (nom → phrase), 24 (phrase → visuel), 12 (visuel → légende), 24 (légende → bouton), 12 (bouton → disponibilité).
   La ligne de services et la barre de points ne s'affichent pas sur téléphone : le compteur et le doigt suffisent.
   ============================================================ */
.xs-avail-short{display:none}
@media (max-width:760px){
  .xs-mode{--work-gap:12px;padding-top:84px;padding-bottom:28px}
  .xs-mode .work-carousel{display:flex;flex-direction:column;flex:1;min-height:0}
  .xs-top,.xs-who,.xs-act,.xs-top-r,.xs-foot{display:contents}

  .xs-name{order:1;margin:0;font-size:14px;font-weight:600;color:var(--xs-quiet)}
  .xs-pitch{order:2;margin:8px 0 0;max-width:none;font-size:17px;font-weight:600;line-height:1.32;letter-spacing:-.015em;text-wrap:balance}

  .xs-mode .viewport{order:3;flex:none;display:block;overflow:hidden;margin:24px 0 0;padding:0}
  .xs-mode .work-track{align-items:flex-start}
  .xs-mode .work-slide{flex:0 0 75%}                          /* 3 colonnes + 2 gouttières ; il reste une colonne pour le visuel suivant */
  .xs-mode .work-card{width:100%;height:calc((3 * (100vw - 40px) - 12px) / 4 * 1.25);aspect-ratio:auto}

  .xs-foot-l{order:4;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline;margin-top:12px;min-width:0}
  .xs-now{grid-column:1;grid-row:1 / span 2;min-width:0}
  .xs-idx{grid-column:2;grid-row:1;margin:0;font-size:13px;color:var(--xs-quiet)}
  .xs-current{font-size:15px;font-weight:600}
  .xs-desc{margin-top:2px;min-height:0;max-width:none;font-size:14px}

  .xs-cta{order:5;display:flex;justify-content:center;width:100%;height:48px;margin-top:24px;font-size:15px}
  .xs-avail{order:6;margin:12px 0 0;font-size:13px;color:var(--xs-quiet)}
  .xs-avail-long{display:none}
  .xs-avail-short{display:inline}

  .xs-does,.xs-foot-r{display:none}
  .xs-mode .dotnav-wrap{display:none}
}

/* ============================================================
   FICHE PROJET SUR TÉLÉPHONE : une feuille qui monte du bas, pleine largeur, façon iOS.
   Pas de marge sur les côtés, coins arrondis seulement en haut, une poignée au centre, la page reste visible derrière
   (un bandeau de 44 px). Elle se ferme en la tirant vers le bas (js/sheet-gesture.js), en touchant le fond ou la croix.
   ============================================================ */
@media (max-width:760px){
  .sheet{left:0;right:0;width:100%;top:max(44px,calc(env(safe-area-inset-top) + 20px));
    border-radius:28px 28px 0 0;transform:translateY(100%);opacity:1}
  .sheet.open{transform:translateY(0)}
  .sheet::before{content:"";position:absolute;z-index:4;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(0,0,0,.2)}
  .sheet.dragging{transition:none}
  .sheet-close{top:14px;right:14px;width:32px;height:32px}
  .sheet-close svg{width:32px;height:32px}
  .sheet-scroll{border-radius:28px 28px 0 0;-webkit-overflow-scrolling:touch}
  .sheet-scroll::-webkit-scrollbar{display:none}
  .sheet-in{padding:52px 20px calc(48px + env(safe-area-inset-bottom))}
  .sheet-in h2{font-size:24px;line-height:1.2;letter-spacing:-.02em;max-width:none}
  .sheet-sum{font-size:16px;line-height:1.45;letter-spacing:-.005em;margin-top:12px}
  .sheet-chips li{line-height:1.35;padding:7px 13px 8px}
  .sheet-next span{font-size:18px;letter-spacing:-.02em}
}

/* logos des clients : le logo fourni remplace le texte du nom (sur l'accueil et dans l'en-tête de la fiche) */
.xs-current{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.xs-logo{display:block;height:26px;width:auto;max-width:190px;object-fit:contain;object-position:left center}
.xs-current .xs-year{margin-left:0;vertical-align:baseline}
.sheet-eyebrow{display:flex;align-items:center;gap:10px;min-height:24px}
.sheet-logo{display:block;height:24px;width:auto;max-width:170px;object-fit:contain;object-position:left center}
.sheet-eyebrow-year{font-size:15px;font-weight:500;color:var(--muted-foreground)}
@media (max-width:760px){
  .xs-logo{height:22px;max-width:150px}
  .sheet-logo{height:22px}
}

/* ============================================================
   TÉLÉPHONE, PREMIER ÉCRAN EN DEUX MOITIÉS
   Un recruteur qui arrive sur téléphone doit comprendre deux choses sans défiler :
     moitié haute : qui je suis et ce que je fais (nom, phrase, ligne de services, bouton, disponibilité) ;
     moitié basse : la preuve (un visuel, sa légende) et, juste dessous, le début du bandeau « Ils m'ont fait confiance »,
                    pour que l'œil sache qu'il y a la suite.
   La section ne force plus la hauteur de l'écran : la suivante commence tout de suite après la légende.
   ============================================================ */
@media (max-width:760px){
  .xs-mode{min-height:0;padding-bottom:8px}
  .xs-does{display:block;order:3;margin:10px 0 0;max-width:36ch;font-size:14px;line-height:1.4;color:var(--xs-quiet);text-wrap:balance}
  .xs-cta{order:4;margin-top:16px;height:46px}
  .xs-avail{order:5;margin:10px 0 0}
  .xs-mode .viewport{order:6;margin-top:24px}
  .xs-foot-l{order:7;margin-top:10px}
  .xs-mode .work-card{height:calc((3 * (100vw - 40px) - 12px) / 4 * 1.05)}   /* case plus basse : 262 × 275 px */
  .brands{padding-top:28px;padding-bottom:12px}
  .brands-head{margin-bottom:10px}
}

/* ============================================================
   TÉLÉPHONE : de l'air. Moins d'information à la fois, des visuels plus petits, des écarts plus grands.
   Visuels : 2,3 par écran (largeur 43 % de la colonne utile) au lieu de 3 colonnes ; la légende se limite à 2 lignes.
   Espaces entre les groupes : 24 / 40 px ; à l'intérieur d'un groupe : 8 / 12 px.
   ============================================================ */
@media (max-width:760px){
  .xs-pitch{margin-top:8px}
  .xs-does{margin-top:12px}
  .xs-cta{margin-top:24px;height:46px}
  .xs-avail{margin-top:12px}
  .xs-mode .viewport{margin-top:40px}
  .xs-mode .work-slide{flex:0 0 43%}
  .xs-mode .work-card{width:100%;height:auto;aspect-ratio:4/5}
  .xs-foot-l{margin-top:16px}
  .xs-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .brands{padding-top:44px;padding-bottom:12px}
  .brands-head{text-align:left;padding-inline:20px;margin-bottom:14px}
}

/* ============================================================
   TÉLÉPHONE : « Ils m'ont fait confiance » n'apparaît qu'à moitié, au bas du premier écran.
   La première section occupe la hauteur de l'écran moins 90 px : le titre et le tiers haut des logos dépassent juste
   au-dessus de la ligne de flottaison, pour annoncer la suite. Tout l'espace gagné au-dessus sert à aérer :
   les écarts entre groupes suivent la hauteur de l'écran (svh), les visuels reprennent un peu de largeur.
   ============================================================ */
@media (max-width:760px){
  .xs-mode{min-height:calc(100svh - 90px)}
  .xs-cta{margin-top:clamp(24px,8svh,72px)}
  .xs-mode .viewport{margin-top:clamp(40px,9svh,80px)}
  .xs-mode .work-slide{flex-basis:44%}                   /* 2 visuels entiers et le début du 3ᵉ : on devine qu'on peut faire glisser */
  .xs-foot-l{margin-top:clamp(14px,3svh,28px)}
  .brands{padding-top:44px}
}

/* ============================================================
   TÉLÉPHONE : le premier écran ne garde que l'essentiel. Quatre choses, dans cet ordre :
     1. qui parle et ce qu'il pense (nom + phrase) ;
     2. le travail, grand (un visuel de 80 % de la largeur, le suivant qui dépasse) ;
     3. le nom du projet (logo ou texte), sans phrase ni compteur ;
     4. un seul bouton.
   Ligne de services, disponibilité, phrase du projet et compteur ne s'affichent plus sur ce premier écran :
   le visuel donne l'envie, le reste est plus bas ou sur la page À propos.
   ============================================================ */
@media (max-width:760px){
  .xs-does,.xs-avail,.xs-desc,.xs-idx{display:none}
  .xs-mode .viewport{order:3;margin-top:clamp(24px,4svh,40px)}
  .xs-foot-l{order:4;margin-top:14px;display:block}
  .xs-cta{order:5;margin-top:clamp(28px,6svh,56px)}
  .xs-mode .work-slide{flex-basis:80%}
  .xs-mode .work-card{width:100%;height:auto;aspect-ratio:4/5}
  .xs-current{font-size:15px}
}

/* ============================================================
   TÉLÉPHONE : visuels plus petits (on en voit 2,6 à la fois), la disponibilité revient, en tout petit sous le bouton,
   et les écarts font le travail : un grand vide entre la phrase et le travail, un vide moyen avant le bouton.
   ============================================================ */
@media (max-width:760px){
  .xs-mode .work-slide{flex-basis:38%}
  .xs-mode .work-card{width:100%;height:auto;aspect-ratio:4/5}
  .xs-mode .viewport{margin-top:clamp(40px,13svh,120px)}
  .xs-foot-l{margin-top:clamp(12px,2svh,20px)}
  .xs-cta{order:5;margin-top:clamp(36px,9svh,84px)}
  .xs-avail{display:flex;order:6;margin:12px 0 0;font-size:12.5px;line-height:1.3;color:var(--xs-quiet)}
  .xs-avail-dot{width:6px;height:6px;box-shadow:0 0 0 3px rgba(31,137,88,.16)}
}
@media (max-width:760px){
  .xs-mode .viewport{margin-top:clamp(40px,17svh,150px)}
  .xs-cta{margin-top:clamp(36px,11svh,100px)}
  .brands{padding-top:28px}
  .xs-mode{min-height:calc(100svh - 74px)}
}

/* TÉLÉPHONE : la disponibilité passe en haut à droite, sur la ligne du nom, en tout petit (11 px, gris) */
@media (max-width:760px){
  .xs-avail{position:absolute;top:2px;right:0;order:0;margin:0;max-width:54%;
    display:flex;align-items:flex-start;gap:6px;font-size:11px;font-weight:500;line-height:1.3;text-align:right;color:var(--xs-quiet)}
  .xs-avail-dot{margin-top:4px;width:5px;height:5px;box-shadow:0 0 0 2.5px rgba(31,137,88,.16)}
}
@media (max-width:760px){
  .xs-avail{white-space:nowrap;max-width:none;align-items:center}
  .xs-avail-dot{margin-top:0}
}

/* ---- grand écran : la barre du haut prend la même largeur que le contenu (bords gauche et droit alignés) ---- */
@media (min-width:900px){
  .pbar{width:min(calc(100% - 2 * var(--page-x) + 40px),calc(var(--max) - 2 * var(--page-x) + 40px))}
}
/* ---- grand écran : la phrase d'accroche tient sur deux lignes, sans retour à la ligne forcé par une largeur maximale ---- */
@media (min-width:1100px){
  .xs-pitch{max-width:none;font-size:clamp(30px,2.7vw,46px);text-wrap:wrap}
}

/* ---- points du carrousel : un point par projet (jusqu'à 16), la pilule s'élargit pour tous les contenir ---- */
.dotnav .dotnav-items:has(:nth-child(8))  { --sk-dotnav-count: 8; }
.dotnav .dotnav-items:has(:nth-child(9))  { --sk-dotnav-count: 9; }
.dotnav .dotnav-items:has(:nth-child(10)) { --sk-dotnav-count: 10; }
.dotnav .dotnav-items:has(:nth-child(11)) { --sk-dotnav-count: 11; }
.dotnav .dotnav-items:has(:nth-child(12)) { --sk-dotnav-count: 12; }
.dotnav .dotnav-items:has(:nth-child(13)) { --sk-dotnav-count: 13; }
.dotnav .dotnav-items:has(:nth-child(14)) { --sk-dotnav-count: 14; }
.dotnav .dotnav-items:has(:nth-child(15)) { --sk-dotnav-count: 15; }
.dotnav .dotnav-items:has(:nth-child(16)) { --sk-dotnav-count: 16; }

/* ---- tablette (portrait) : la phrase tient sur ses deux lignes et le carrousel suit le texte, sans grand vide ---- */
@media (min-width:761px) and (max-width:1099px){
  .xs-pitch{max-width:none;font-size:clamp(28px,4.2vw,42px)}
  .xs-mode{min-height:0}
}
@media (min-width:761px) and (max-width:1099px) and (min-height:900px){
  .xs-mode .viewport{flex:none;padding-block:56px 40px}
  .xs-mode .work-card{height:clamp(240px,34svh,420px)}
}

/* ---- fenêtre du CV : le CV s'ouvre en grand au toucher, et la fenêtre est bien centrée sur téléphone ---- */
.cvm-zoom{display:block;cursor:zoom-in}
.cvm-hint{display:none;margin:12px 0 0;font-size:13px;color:var(--xs-quiet)}
@media (max-width:760px){
  .cvm-sheet{left:0;right:0;width:100%}
  .cvm.on .cvm-sheet{transform:translateY(0)}
  .cvm-hint{display:block}
}
@media (min-width:761px) and (max-width:1099px){
  .xs-top{position:relative}
  .xs-who{grid-column:1 / -1}
  .xs-top-r{position:absolute;top:1px;right:0}
  .xs-avail{white-space:nowrap}
}

/* ---- téléphone : les points reviennent, un par projet, avec le bouton pause (le carrousel défile seul : on doit pouvoir l'arrêter) ---- */
@media (max-width:760px){
  .xs-mode .xs-foot .dotnav-wrap{display:flex;order:4;align-self:center;justify-content:center;margin-top:18px}
  .xs-mode .xs-foot .dotnav-wrap[hidden]{display:none}
}

/* ---- panneau « Projets » : les vignettes s'effacent sous les flèches, plus de bouts d'image ni de traits qui dépassent sur les côtés ---- */
.cn-items{padding-inline:52px;scroll-padding-inline:52px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 26px,#000 54px,#000 calc(100% - 54px),transparent calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,transparent 26px,#000 54px,#000 calc(100% - 54px),transparent calc(100% - 26px),transparent 100%)}
@media (max-width:640px){
  .cn-items{padding-inline:44px;scroll-padding-inline:44px}
}