/* ==========================================================================
   chrome.css — le one-screen du site, porte par les pages SECONDAIRES.

   POURQUOI CE FICHIER EXISTE
   Un article de « Comprendre » et un document legal ont chacun leur propre
   adresse : c est ce qui les rend indexables, et c est non negociable. Mais
   ouverts DIRECTEMENT par cette adresse — depuis Google, depuis un partage —
   ils servaient une page autonome qui defile, sans rien du one-screen. Le
   visiteur arrivait sur autre chose que le site.

   ⛔ La fausse bonne idee, ecartee : rediriger vers l accueil en ouvrant le
   panneau. Le contenu ne serait alors plus a son adresse, et un moteur
   indexerait une URL vide qui redirige — exactement le defaut repare le
   2026-08-26 avec /en/.

   ✅ Ce qu on fait a la place : la page autonome RESSEMBLE au one-screen avec
   son panneau ouvert. Fond en galets, chrome flottante en pastilles de verre,
   contenu dans un panneau identique a celui du site, fermeture qui ramene a
   l accueil. Le contenu reste inline, a son adresse, donc indexable.

   ⚠ TOUT EST SOUS `html.sc`, une classe posee par assets/chrome.js.
   Sans JavaScript, la page retombe exactement sur sa mise en page autonome
   d avant — le contenu est le meme, seule la presentation change. C est
   volontaire : la matiere de verre a besoin de canvas de toute facon.

   ⚠ DUPLICATION ASSUMEE avec index.html : les galets, les pastilles et le
   panneau y sont ecrits en dur. Les reprendre ici est une COPIE, pas un
   partage — index.html est monofichier par choix, et le verre y est assez
   fragile pour qu on ne le refactore pas a l occasion d autre chose. Si le
   fond ou une pastille change la-bas, le reporter ici. En echange, ce fichier
   sert les 7 pages secondaires (2 de Comprendre, 4 legales, la 404) au lieu
   d etre recopie sept fois.
   ========================================================================== */

/* --- LES VARIABLES DU SITE ------------------------------------------------
   pages.css apporte le theme sous d autres noms (--ivory, --charbon…) ; la
   chrome, elle, a ete ecrite avec ceux d index.html. On redonne donc ici les
   quelques variables dont elle a besoin, aux memes valeurs.
   ------------------------------------------------------------------------ */
:root {
  --sc-card: #FFF7EA;
  --sc-ink: #3A2410;
  --sc-ink-2: #6E4E2E;
  --sc-line: rgba(200, 85, 61, .16);
  --sc-ocre: #E5A02C;
  --sc-terra: #C8553D;
  --sc-terra-cta: #A8412A;
  --sc-bordeaux: #6B1F1F;
  --sc-live: #4ade80;
  --sc-cta-ink: #FFF7EA;
  --sc-accent-text: #A8412A;
  --sc-pill-inset: inset 0 1.4px 0 rgba(255,255,255,.95), inset 0 -1.4px 0 rgba(255,255,255,.4), inset 0 0 22px rgba(255,255,255,.25);
  --sc-hd-h: 56px;
  --sc-verre: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.04) 46%, rgba(255,255,255,.14));
  --sc-verre-bord: rgba(200, 85, 61, .35);

  /* Meme echelle qu index.html : en rem avec plancher absolu, pour que le
     reglage de police du navigateur agrandisse le texte sans jamais le
     reduire sous le dessin. */
  --sc-t-xs: clamp(max(0.75rem, 12px), 1.7vmin, 0.78125rem);
  --sc-t-sm: clamp(max(0.8125rem, 13px), 2.1vmin, 0.96875rem);
  --sc-t-md: clamp(max(0.9375rem, 15px), 2.6vmin, 1.1875rem);
  --sc-t-lg: clamp(max(1.125rem, 18px), 3.4vmin, 1.5rem);
  --sc-t-glyph: max(1.0625rem, 17px);
}
/* ⚠ Valeurs reprises TELLES QUELLES d index.html — y compris ce qui surprend :
   le bouton d action reste terracotta a texte creme en sombre (le site ne
   surcharge ni --terra-cta ni --cta-ink), et le bord des pastilles ne change
   pas non plus. Seul le panneau de menu prend un bord creme, comme .fcpanel.
   Les inventer « au jugé » donnait une chrome presque juste, ce qui est pire
   qu une chrome differente : l oeil voit que quelque chose cloche sans savoir
   quoi. */
html.dark {
  --sc-card: #241810;
  --sc-ink: #F7E1C8;
  --sc-ink-2: rgba(247, 225, 200, .72);
  --sc-line: rgba(247, 225, 200, .14);
  --sc-accent-text: #F49B92;
  --sc-pill-inset: inset 0 1.4px 0 rgba(255,255,255,.5), inset 0 -1.4px 0 rgba(255,255,255,.2), inset 0 0 22px rgba(255,255,255,.12);
  --sc-verre: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.03) 46%, rgba(255,255,255,.09));
}

/* --- LE CADRE ------------------------------------------------------------
   Une seule hauteur d ecran, jamais de defilement de page : c est le corps du
   panneau qui defile, comme dans le site.
   ------------------------------------------------------------------------ */
html.sc, html.sc body { height: 100%; overflow: hidden; }
/* ⚠ `align-items` et `justify-content` sont remis a plat exprès : la 404 centre
   son contenu en posant un flex sur <body>, et ces deux proprietes survivraient
   au changement de direction — l en-tete et le pied se retrouveraient centres
   et retrecis au lieu de tenir toute la largeur.
   ⚠ Le rembourrage de <body> l est aussi : les pages legales en portent 40/24/80,
   qui mangerait la hauteur de l ecran. Il est rendu au corps du panneau. */
html.sc body {
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  margin: 0; padding: 0; min-height: 0;
}

/* Un contenu qui n a pas sa propre mise en page interieure (les pages legales,
   la 404) recoit ici les marges que <body> portait.
   ⚠ La gouttiere de 24 px est portee par le SCROLLEUR, pas par le contenu :
   ces pages sont en `box-sizing: border-box`, si bien qu un rembourrage pose
   sur .wrap se serait pris SUR ses 760 px de largeur de lecture au lieu de
   s ajouter autour — 712 px de texte au lieu de 760, soit trois caracteres
   perdus par ligne sans que rien ne le signale. */
html.sc .sc-corps-pad { padding: clamp(18px, 3.5vmin, 34px) 24px clamp(36px, 6vmin, 64px); }
html.sc .sc-corps-pad > * { margin-inline: auto; }
/* La 404 tient en un ecran : son contenu se centre dans le panneau plutot que
   de rester colle en haut d une grande carte vide.
   ⚠ `safe center` et pas `center` : sur un conteneur qui defile, un centrage
   simple pousse le haut du contenu HORS de la zone atteignable des que celui-ci
   depasse. Le mot-cle « safe » retombe sur un alignement au debut dans ce cas.
   Un navigateur qui l ignore jette la declaration et retombe au meme endroit. */
html.sc .sc-corps-centre { display: flex; flex-direction: column; justify-content: safe center; }
/* Le « ← Retour a l accueil » des documents legaux fait doublon avec la croix
   du panneau et le logo, exactement comme dans l iframe du site. */
html.sc .back { display: none; }

/* ⚠ pages.css et article.css n ont PAS de reset `box-sizing` — index.html si.
   Sans cette regle une pastille de 48 px en fait 52 (ses deux bordures de 2 px
   s ajoutent par-dessus) et le pied enfle de 4 px. On borne le reset a la
   chrome : l etendre au contenu du panneau changerait la mesure de lecture des
   articles (41rem + 40px de marge interieure deviendraient 41rem tout compris,
   soit 4 caracteres perdus par ligne). */
html.sc .sc-header, html.sc .sc-header *,
html.sc .sc-footer, html.sc .sc-footer *,
html.sc .sc-menu, html.sc .sc-menu *,
html.sc .sc-tete, html.sc .sc-tete *,
html.sc .sc-panneau { box-sizing: border-box; }

/* Meme raison : article.css met le corps a 1.72 pour de la lecture longue. Sur
   une pastille, cette interligne ajoute 4 px de haut a chaque etiquette. */
html.sc .sc-header, html.sc .sc-menu, html.sc .sc-tete { line-height: 1.5; }

/* Le voile calme des articles autonomes laisse la place aux deux lueurs du
   site : ici le texte est lu DANS le panneau, qui est opaque — le fond
   redevient donc du decor, et peut reprendre celui de l accueil. */
html.sc body::before { display: none; }
html.sc body {
  background-color: #F7E1C8;
  background-image:
    radial-gradient(68% 58% at 8% -6%, rgba(229,160,44,.34), transparent 60%),
    radial-gradient(64% 62% at 96% 108%, rgba(200,85,61,.22), transparent 62%);
}
html.sc.dark body {
  background-color: #140D08;
  background-image:
    radial-gradient(68% 58% at 8% -6%, rgba(229,160,44,.16), transparent 60%),
    radial-gradient(64% 62% at 96% 108%, rgba(200,85,61,.20), transparent 62%);
}

/* --- LE FOND EN GALETS ---------------------------------------------------
   Le verre ne montre RIEN au-dessus d un aplat : il deplace des pixels, il
   lui faut donc des aretes. D ou les galets, et d ou leur placement — les
   pastilles sont a des positions fixes, on fait passer un bord sous chacune.
   Le liseré est ce qui se tord ; le remplissage, lui, ne sert qu a poser la
   couleur.
   ------------------------------------------------------------------------ */
.sc-bgfx {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  --g1: rgba(200,85,61,.11); --g2: rgba(229,160,44,.15); --g3: rgba(107,31,31,.06);
  --b1: rgba(200,85,61,.44); --b2: rgba(229,160,44,.54); --b3: rgba(107,31,31,.26);
  /* Deux decoupes combinees : la ronde vide le centre (c est la que vit le
     panneau), la basse eteint le fond sur la hauteur exacte du pied, ou un
     liseré tombant sous une mention faisait chuter le contraste. */
  -webkit-mask-image: radial-gradient(66% 60% at 50% 46%, transparent 28%, #000 86%),
    linear-gradient(to top, transparent 0, #000 var(--sc-footer-h, 64px));
  mask-image: radial-gradient(66% 60% at 50% 46%, transparent 28%, #000 86%),
    linear-gradient(to top, transparent 0, #000 var(--sc-footer-h, 64px));
  -webkit-mask-composite: source-in; mask-composite: intersect;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html.dark .sc-bgfx {
  --g1: rgba(229,160,44,.09); --g2: rgba(244,155,146,.08); --g3: rgba(229,160,44,.05);
  --b1: rgba(229,160,44,.44); --b2: rgba(244,155,146,.38); --b3: rgba(229,160,44,.24);
}
.sc-bgfx svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sc-bgfx .bgfx-p { display: none; }
@media (max-aspect-ratio: 1/1) {
  .sc-bgfx .bgfx-l { display: none; }
  .sc-bgfx .bgfx-p { display: block; }
}
.sc-bgfx path { stroke-width: 2; vector-effect: non-scaling-stroke; }
.sc-bgfx .g1 { fill: var(--g1); stroke: var(--b1); }
.sc-bgfx .g2 { fill: var(--g2); stroke: var(--b2); }
.sc-bgfx .g3 { fill: var(--g3); stroke: var(--b3); }

/* --- L EN-TETE -----------------------------------------------------------*/
.sc-header {
  flex: none; position: relative; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 9px 20px; min-height: var(--sc-hd-h);
  font-family: var(--font-body);
}
.sc-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sc-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: var(--sc-t-lg); letter-spacing: -.02em;
  text-decoration: none; color: var(--sc-ink); flex: none;
}
.sc-logo .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sc-live); box-shadow: 0 0 8px rgba(74,222,128,.8);
  animation: scPulse 2.2s infinite;
}
@keyframes scPulse { 50% { opacity: .35; } }
.sc-socials { display: flex; gap: 12px; margin-left: 6px; }
.sc-socials a { display: flex; opacity: .75; transition: opacity .15s, transform .15s; }
.sc-socials a:hover { opacity: 1; transform: translateY(-2px); }
.sc-socials img { width: 16px; height: 16px; }
html.dark .sc-socials img { filter: brightness(1.6); }
.sc-mid { flex: 1; display: flex; justify-content: center; min-width: 0; }
.sc-right { display: flex; align-items: center; gap: 10px; }

/* La pastille « Exploration et decouverte » : meme matiere que sur le site. */
.sc-explore {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: var(--sc-t-sm); text-decoration: none; color: var(--sc-ink);
  border: 2px solid var(--sc-verre-bord); border-radius: 999px; padding: 7px 16px;
  background: var(--sc-verre);
  box-shadow: var(--sc-pill-inset), 0 8px 20px -10px rgba(107,31,31,.35);
  backdrop-filter: blur(9px) saturate(1.5); -webkit-backdrop-filter: blur(9px) saturate(1.5);
  transition: transform .18s cubic-bezier(.2,.9,.3,1.4), border-color .18s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-explore::after { content: "→"; color: var(--sc-accent-text); font-weight: 800; transition: transform .18s; display: inline-block; }
.sc-explore:hover { transform: translateY(-2px); border-color: var(--sc-ocre); }
.sc-explore:hover::after { transform: translateX(3px); }

.sc-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--sc-terra-cta); color: var(--sc-cta-ink);
  font-weight: 700; font-size: var(--sc-t-sm); border: none; text-decoration: none;
  padding: 9px 18px; border-radius: 999px; box-shadow: 0 4px 0 var(--sc-bordeaux);
  transition: transform .12s cubic-bezier(.2,.9,.3,1.4); white-space: nowrap;
}
.sc-cta:hover { transform: translateY(-1px); }
.sc-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sc-bordeaux); }

.sc-theme {
  width: 40px; height: 40px; min-width: 44px; min-height: 44px;
  border-radius: 999px; border: 1.5px solid var(--sc-line);
  background: none; color: var(--sc-ink-2); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.sc-theme:hover { color: var(--sc-accent-text); border-color: var(--sc-accent-text); }
.sc-theme svg { width: 17px; height: 17px; }
html:not(.dark) .sc-theme .ic-soleil,
html.dark .sc-theme .ic-lune { display: none; }

/* --- LA SCENE ET LE PANNEAU ----------------------------------------------
   Le panneau reprend trait pour trait celui du site (.legal-ov) : une carte
   opaque a 20 px de rayon, un bandeau de titre, une croix. Il n est PAS en
   verre — sur le site non plus : le verre est pour la chrome qui flotte, pas
   pour le contenu qu on lit.
   ------------------------------------------------------------------------ */
html.sc .sc-scene { flex: 1; min-height: 0; position: relative; z-index: 5; }
html.sc .sc-panneau {
  position: absolute; inset: 10px 16px; z-index: 30;
  background: var(--sc-card); border-radius: 20px;
  box-shadow: 0 30px 70px -20px rgba(20,13,8,.45);
  display: flex; flex-direction: column; overflow: hidden;
}
@media (max-width: 720px) { html.sc .sc-panneau { inset: 8px 10px; } }

/* Le bandeau de titre n existe QUE dans le one-screen : hors de lui, c est la
   chrome propre a la page (ou le fil d Ariane) qui joue ce role. */
.sc-tete { display: none; }
html.sc .sc-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 18px; flex: none;
  font-weight: 800; font-size: var(--sc-t-md); color: var(--sc-ink);
  font-family: var(--font-display);
}
.sc-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-x {
  width: 36px; height: 36px; min-width: 44px; min-height: 44px;
  border-radius: 11px; border: 1.5px solid var(--sc-line); background: var(--sc-card);
  cursor: pointer; font-size: var(--sc-t-glyph); color: var(--sc-ink);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; flex: none; line-height: 1;
}
.sc-x:hover { border-color: var(--sc-accent-text); color: var(--sc-accent-text); }

/* Le corps du panneau est le seul element qui defile. `tabindex="0"` est pose
   par chrome.js et n est PAS decoratif : sans lui, un visiteur au clavier ne
   pourrait pas faire defiler la page — le corps du document, lui, est fige. */
html.sc .sc-corps {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html.sc .sc-corps:focus-visible { outline: 2px solid var(--sc-ocre); outline-offset: -3px; }

/* Dans le one-screen, la chrome propre a la page fait doublon avec celle du
   shell : le titre est dans le bandeau, les liens legaux dans le pied. */
html.sc .a-tete, html.sc .a-pied { display: none; }
html.sc .a-corps { padding-top: 2px; }
html.sc .a-fil { padding-top: clamp(10px, 2vmin, 18px); }

/* --- LE PIED : une barre a deux rangees, comme sur le site ----------------
   Rangee 1 : [Chat] … [Menu]. Rangee 2 : la ligne legale. Les deux pastilles
   vivent DANS la barre, elles n y flottent pas par-dessus.
   ------------------------------------------------------------------------ */
.sc-footer {
  flex: none; position: relative; z-index: 10;
  padding: 8px 16px; font-size: var(--sc-t-xs); color: #66482A;
  display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "fc . menu" "info info info";
  row-gap: 4px; align-items: center; line-height: 1.4;
  font-family: var(--font-body);
}
html.dark .sc-footer { color: var(--sc-ink-2); }
.sc-footer a { font-weight: 700; text-decoration: none; color: var(--sc-ink-2); }
.sc-footer a:hover { color: var(--sc-accent-text); }
.sc-ft-info {
  grid-area: info; min-width: 0;
  display: flex; justify-content: space-between; gap: 12px;
}
.sc-ft-info > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 559px) { .sc-ft-info > .sc-ft-long { display: none; } }

/* --- LES DEUX PASTILLES DU PIED ------------------------------------------*/
.sc-pill {
  width: 104px; height: 48px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--sc-verre);
  border: 2px solid var(--sc-verre-bord); border-radius: 999px;
  cursor: pointer; color: var(--sc-ink); text-decoration: none;
  font-weight: 800; font-size: var(--sc-t-xs); font-family: inherit;
  box-shadow: var(--sc-pill-inset), 0 14px 30px -12px rgba(107,31,31,.45);
  backdrop-filter: blur(9px) saturate(1.5); -webkit-backdrop-filter: blur(9px) saturate(1.5);
  transition: box-shadow .2s, border-color .2s;
}
.sc-pill:hover, .sc-pill:focus-visible {
  border-color: var(--sc-ocre);
  box-shadow: var(--sc-pill-inset), 0 0 0 3px rgba(229,160,44,.35), 0 14px 30px -12px rgba(107,31,31,.45);
}
.sc-fc { grid-area: fc; }
.sc-menu-btn { grid-area: menu; }
.sc-fc .ic { flex: none; width: 20px; height: 20px; display: flex; }
.sc-menu-btn .bars { display: flex; flex-direction: column; gap: 3.5px; }
.sc-menu-btn .bars i { display: block; width: 16px; height: 2.5px; border-radius: 2px; background: var(--sc-terra-cta); }
.sc-menu-btn .bars i:nth-child(2) { width: 11px; }

/* --- LE MENU : une seule feuille de verre --------------------------------
   Meme parti que sur le site (choix Doreld du 2026-08-11) : une surface, les
   entrees separees par un filet, pas sept cartes qui flottent.
   ------------------------------------------------------------------------ */
.sc-menu {
  position: fixed; right: 16px; bottom: calc(var(--sc-footer-h, 64px) + 14px); z-index: 41;
  width: min(320px, calc(100vw - 32px)); max-height: min(70vh, 560px);
  border-radius: 22px; display: none; flex-direction: column; overflow: auto;
  border: 1.5px solid var(--sc-verre-bord);
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.07) 46%, rgba(255,255,255,.19));
  backdrop-filter: blur(11px) saturate(1.55); -webkit-backdrop-filter: blur(11px) saturate(1.55);
  box-shadow: var(--sc-pill-inset), 0 24px 48px -18px rgba(107,31,31,.5);
  font-family: var(--font-body);
}
html.dark .sc-menu {
  border-color: rgba(247, 225, 200, .3);
  background: linear-gradient(180deg, rgba(36,24,16,.74), rgba(36,24,16,.56) 46%, rgba(36,24,16,.68));
}
.sc-menu.open { display: flex; }
.sc-menu a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 16px; text-decoration: none; color: var(--sc-ink);
  font-size: var(--sc-t-sm); min-height: 44px;
}
.sc-menu a + a { border-top: 1px solid var(--sc-verre-bord); }
.sc-menu a .t { font-weight: 800; }
.sc-menu a .d { color: var(--sc-ink-2); font-size: var(--sc-t-xs); }
.sc-menu a:hover { background: rgba(229,160,44,.16); }
/* La premiere entree est l action : elle garde son relief, comme sur le site. */
.sc-menu a.act { background: var(--sc-terra-cta); color: var(--sc-cta-ink); font-weight: 800; }
.sc-menu a.act .d { color: rgba(255,247,234,.8); }
html.dark .sc-menu a.act .d { color: rgba(42,22,8,.72); }
.sc-menu a.act:hover { filter: brightness(1.06); }

/* --- LA MATIERE : verre refractif ----------------------------------------
   Seul Chromium sait referencer un filtre SVG depuis backdrop-filter. Ailleurs
   on garde le flou pose plus haut, qui reste correct. La classe `lens` n est
   ajoutee que si le navigateur sait faire.
   ------------------------------------------------------------------------ */
html.lens .sc-explore { backdrop-filter: url(#scLensExplore) blur(1.5px) saturate(1.5) brightness(1.04); }
html.lens .sc-fc { backdrop-filter: url(#scLensFc) blur(1.5px) saturate(1.5) brightness(1.04); }
html.lens .sc-menu-btn { backdrop-filter: url(#scLensMenu) blur(1.5px) saturate(1.5) brightness(1.04); }
html.lens .sc-menu { backdrop-filter: url(#scLensPanel) blur(1.6px) saturate(1.55); }

.sc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- TELEPHONE -----------------------------------------------------------
   Meme reorganisation que sur le site : l en-tete passe en grille de deux
   rangees plutot que de comprimer quatre elements sur une ligne — sans quoi la
   pastille « Exploration et decouverte » tombait a 36 px de large, c est-a-dire
   a rien du tout.
   ⚠ Les 44 px des deux boutons s obtiennent par min-height, PAS par du
   rembourrage, pour ne pas elargir la pilule.
   ------------------------------------------------------------------------ */
.sc-lbl-court { display: none; }
@media (max-width: 720px) {
  .sc-header {
    display: grid; grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand brand theme" "mid mid cta";
    align-items: center; column-gap: 8px; row-gap: 8px; padding: 8px 14px;
  }
  .sc-right { display: contents; }
  .sc-brand { grid-area: brand; justify-self: start; gap: 6px; min-width: 0; }
  .sc-socials { margin-left: 0; }
  .sc-socials a { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; margin: 0 -13px; }
  .sc-socials a:first-child { margin-left: -7px; }
  .sc-theme { grid-area: theme; justify-self: end; }
  .sc-mid { grid-area: mid; justify-content: flex-start; min-width: 0; }
  .sc-explore { font-size: var(--sc-t-xs); padding: 7px clamp(6px, 2vw, 14px); gap: 4px; max-width: 100%; min-height: 44px; }
  .sc-cta { grid-area: cta; justify-self: end; min-height: 44px; }
  .sc-cta .sc-lbl-long { display: none; }
  .sc-cta .sc-lbl-court { display: inline; }
  /* Le logo est le retour a l accueil : il doit se viser au doigt. */
  .sc-logo { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-logo .dot { animation: none; }
  .sc-explore, .sc-cta, .sc-pill { transition: none; }
}

/* --- OUVERT DANS LE PANNEAU DU SITE --------------------------------------
   La page est alors dans une iframe : le shell porte deja le fond, la chrome
   et le titre. chrome.js n injecte rien, et rien de ce fichier ne s applique
   puisque `html.sc` n est jamais posee. Cette regle ne sert que de garde-fou
   si les deux classes se croisaient.
   ------------------------------------------------------------------------ */
html.embedded .sc-header, html.embedded .sc-footer,
html.embedded .sc-bgfx, html.embedded .sc-tete,
html.embedded .sc-menu { display: none !important; }