/* =========================================================================
   DELIGOA — socle visuel du site public
   -------------------------------------------------------------------------
   Lot 1 : tokens, reinitialisation, typographie, mise en page, RTL,
   accessibilite. Les styles de sections arrivent aux lots 2 et 3.

   REGLE RTL : ce fichier n'utilise QUE des proprietes logiques
   (margin-inline, padding-block, inset-inline-start, text-align: start,
   border-inline-start...). Aucune propriete physique left/right. La version
   arabe est donc rendue par la meme feuille de style, sans surcharge.
   ========================================================================= */

/* -------------------------------------------------------------------------
   MARQUE — point de changement unique
   -------------------------------------------------------------------------
   La couleur principale est decrite par ses trois canaux HSL. Modifier
   --brand-h / --brand-s / --brand-l recalcule l'integralite de la palette :
   survols, fonds doux, ombres colorees, bordures. Aucune autre valeur de
   couleur de marque n'est ecrite en dur dans ce fichier.

   VALEUR ACTUELLE : PROVISOIRE. L'orange ci-dessous est celui herite du
   template ; il tient lieu de token en attendant la charte DELIGOA.
   A remplacer ici, et dans content/site.json -> brandColor (pour la balise
   <meta name="theme-color">).
   ------------------------------------------------------------------------- */
:root {
  --brand-h: 23;
  --brand-s: 100%;
  --brand-l: 58%;

  --brand: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --brand-strong: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 10%));
  --brand-text: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 21%));
  --brand-soft: hsl(var(--brand-h) var(--brand-s) 96%);
  --brand-border: hsl(var(--brand-h) calc(var(--brand-s) - 30%) 88%);
  --brand-contrast: #ffffff;
  --brand-shadow: hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 0.28);

  /* Neutres */
  --ink: #14141a;
  --ink-2: #2b2b35;
  --ink-muted: #63636f;
  --line: #e8e8ee;
  --surface: #ffffff;
  --surface-alt: #fafafc;

  /* Etats */
  --focus: #1a63d8;

  /* Rythme — echelle d'espacement */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Formes */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;

  /* Elevations */
  --shadow-s: 0 1px 2px rgb(20 20 26 / 0.04), 0 4px 12px rgb(20 20 26 / 0.04);
  --shadow-m: 0 2px 4px rgb(20 20 26 / 0.04), 0 12px 28px rgb(20 20 26 / 0.06);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Typographie — fluide, sans media query */
  --font-latin: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-sans: var(--font-latin);

  --text-s: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --text-m: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-l: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  --text-3xl: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);

  /* Mise en page */
  --content-width: 1160px;
  --header-height: 4.5rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
}

/* L'arabe recoit sa propre famille : Plus Jakarta Sans ne couvre pas
   l'alphabet arabe. La police n'est chargee que sur /ar/ (voir src/seo.js). */
html[lang="ar"] {
  --font-sans: var(--font-arabic);
  --text-m: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  line-height: 1.8;
}

/* -------------------------------------------------------------------------
   REINITIALISATION
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 5.5rem; /* degage l'en-tete collant */
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-m);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-s);
  line-height: 1.2;
  /* Plus Jakarta Sans donne a sa ponctuation des approches larges. En 800,
     combine a un interlettrage serre, une fausse espace apparait avant
     « , » et « . » — ce qu'un lecteur francais lit comme une faute. En 700
     avec ce tracking, la virgule se recolle au mot. Il subsiste une legere
     approche devant le point, propre au dessin de la police. */
  font-weight: 700;
  letter-spacing: -0.008em;
  text-wrap: balance;
  color: var(--ink);
}

/* L'arabe ne se prete ni au crenage negatif ni aux majuscules forcees. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  letter-spacing: normal;
  line-height: 1.45;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-l); }

p {
  margin: 0 0 var(--space-m);
  color: var(--ink-muted);
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* -------------------------------------------------------------------------
   MISE EN PAGE
   ------------------------------------------------------------------------- */
.container {
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(3rem, 2rem + 5vw, var(--space-3xl));
}

.section--tint {
  background: var(--surface-alt);
}

#services-complementaires.section {
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.section--brand-tint {
  background: var(--brand-soft);
}

/* -------------------------------------------------------------------------
   ACCESSIBILITE
   ------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  z-index: 100;
  padding: var(--space-xs) var(--space-m);
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-s);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform 0.15s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   COMPOSANTS PARTAGES
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.8125rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-s);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    transform 0.18s ease, box-shadow 0.18s ease;
}

.btn--primary {
  background: var(--brand);
  color: var(--ink);
  box-shadow: 0 8px 20px var(--brand-shadow);
}

.btn--primary:hover {
  background: var(--brand-strong);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.btn--outline:hover {
  border-color: var(--brand);
  color: var(--brand-text);
}

/* Etiquette d'etat d'un service ou d'un moyen de paiement.
   Les libelles eux-memes viennent du contenu, jamais du CSS. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--surface-alt);
  color: var(--ink-muted);
  border: 1px solid var(--line);
}

/* A l'echelle du panneau, l'etiquette pleine taille pesait autant que le
   titre : cette variante la remet a sa place. */
.badge--compact {
  padding: 0.15rem 0.5rem;
  font-size: 0.6875rem;
}

.badge--primary {
  background: var(--brand-soft);
  color: var(--brand-text);
  border-color: var(--brand-border);
}

.card {
  padding: var(--space-l);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}

/* Grille auto-adaptative : aucune media query, aucun debordement mobile. */
.grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

/* -------------------------------------------------------------------------
   PREFERENCES UTILISATEUR
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   EN-TETE
   -------------------------------------------------------------------------
   Un seul balisage sert les deux affichages.

   Sous le point de rupture : bouton de menu, et le panneau devient une
   superposition en position fixe. Il ne participe donc jamais au flux, ce
   qui garantit que l'en-tete garde sa hauteur et que le hero ne descend
   pas d'un pixel a l'ouverture.

   Au-dessus : aucun bouton de menu, le panneau redevient une rangee, et le
   selecteur de langue se replie en liste deroulante.
   ========================================================================= */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  border-block-end: 1px solid var(--line);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* En haut de page, la barre se confond avec le hero : pas de filet, pas
   d'ombre. Des que la page defile, elle se detache de ce qui passe dessous.
   Sans script, le filet reste — il vaut mieux une separation permanente
   qu'aucune. */
.has-js .site-header:not([data-defile]) {
  border-block-end-color: transparent;
}

.site-header[data-defile] {
  box-shadow: 0 6px 24px rgb(20 20 26 / 0.06);
}

/* Le flou est porte par une couche interne, jamais par l'en-tete lui-meme :
   backdrop-filter fait de son element un bloc conteneur pour les
   descendants en position fixe. Applique a .site-header, il ferait resoudre
   la superposition mobile contre l'en-tete au lieu de la fenetre, et le
   panneau se replierait sur la hauteur de la barre. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-block-size: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 700;
  font-size: var(--text-l);
  letter-spacing: -0.01em;
}

.brand__logo {
  block-size: 2rem;
  inline-size: auto;
  max-inline-size: 9rem;
  object-fit: contain;
}

/* Verrouillage icone + logotype, rapport ~6:1 : c'est la hauteur qui pilote,
   la largeur suit. 2.5rem dans une barre de 4.5rem laisse l'icone lisible
   sans etouffer la navigation. */
.brand__logo--lockup {
  block-size: 2.5rem;
  max-inline-size: 15rem;
}

/* Entre 72em et 80em, la navigation complete est deja affichee et le
   verrouillage a 2.5rem faisait deborder la barre de 41px a 1152px. A 2rem
   il tient, et le logotype reste lisible. Au-dela de 80em, la place est la. */
@media (min-width: 64em) and (max-width: 80em) {
  .brand__logo--lockup {
    block-size: 2rem;
  }
}

@media (max-width: 22.5em) {
  .brand__logo--lockup {
    block-size: 1.75rem;
  }
}

.brand__name {
  color: var(--ink);
}

/* Bouton de menu — n'apparait que si le script a pris la main. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: 2.75rem;
  padding: var(--space-xs) var(--space-s);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--text-s);
  font-weight: 700;
  cursor: pointer;
}

.has-js .nav-toggle {
  display: inline-flex;
}

.nav-toggle__bars {
  display: grid;
  gap: 3px;
  inline-size: 1rem;
}

.nav-toggle__bars span {
  block-size: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

body.nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Sans JavaScript, le panneau reste en flux : la navigation fonctionne. */
.site-header__inner {
  position: relative;
}

.site-header__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding-block-end: var(--space-m);
}

/* Menu mobile DELIGOA : panneau compact sous l'en-tete, hauteur liee au
   contenu — pas d'ecran blanc plein viewport. */
.has-js .site-header__panel {
  display: none;
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline: 0;
  inset-block-end: auto;
  z-index: 45;
  max-block-size: min(34rem, calc(100dvh - var(--header-height) - 1.5rem));
  overflow-y: auto;
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: 0 18px 40px hsl(220 20% 10% / 0.12);
  overscroll-behavior: contain;
}

.has-js body.nav-open .site-header__panel {
  display: flex;
}

.site-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-nav a {
  display: block;
  padding-block: 0.55rem;
  font-size: var(--text-m);
  font-weight: 600;
  color: var(--ink-2);
  transition: color 0.16s ease;
}

.site-nav a:hover {
  color: var(--brand-text);
}

/* ---------- selecteur de langue ---------- */
.flag {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 50%;
}

.lang {
  position: relative;
  align-self: stretch;
}

.lang__button {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  padding-block: 0.35rem;
  padding-inline: 0.45rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--text-s);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.16s ease;
}

.has-js .lang__button {
  display: inline-flex;
}

.lang__button:hover {
  border-color: var(--brand-border);
}

.lang__chevron {
  display: inline-flex;
  color: var(--ink-muted);
  transition: transform 0.18s ease;
}

.lang__chevron .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.lang.is-open .lang__chevron {
  transform: rotate(180deg);
}

/* Sans JS : liste toujours visible. Avec JS : deroulante compacte. */
.lang__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.has-js .lang__list {
  display: none;
  position: absolute;
  inset-block-start: calc(100% + 0.4rem);
  inset-inline-start: 0;
  z-index: 60;
  min-inline-size: 11rem;
  padding: var(--space-2xs);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
}

.has-js .lang.is-open .lang__list {
  display: flex;
}

.lang__option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-m);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color 0.16s ease, color 0.16s ease;
}

.lang__option:hover {
  background: var(--surface-alt);
}

.lang__option[aria-current="true"] {
  color: var(--brand-text);
}

.lang__name {
  flex: 1 1 auto;
}

.lang__check {
  display: inline-flex;
  visibility: hidden;
  color: var(--brand);
}

.lang__check .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.lang__option[aria-current="true"] .lang__check {
  visibility: visible;
}

.site-header__cta {
  align-self: stretch;
  justify-content: center;
}

/* Dans le panneau mobile, la liste ouverte reste dans le flux : les quatre
   langues agrandissent le panneau au lieu d'etre rognees par son overflow. */
@media (max-width: 63.999em) {
  .lang__button,
  .lang__option {
    min-block-size: 2.75rem;
  }

  .has-js .lang.is-open .lang__list {
    position: static;
    inset: auto;
    margin-block-start: 0.4rem;
  }
}

/* ---------- affichage large ----------
   Seuil cale sur la langue la plus encombrante : mesure faite, l'espagnol
   demande environ 1050 px de contenu pour tenir sur une seule ligne. En
   deca, la barre bascule sur la superposition mobile plutot que de replier
   ses intitules. */
@media (min-width: 64em) {
  .site-header__inner {
    position: relative;
  }

  /* Aucun bouton de menu en affichage large, script ou non. */
  .nav-toggle,
  .has-js .nav-toggle {
    display: none;
  }

  .site-header__panel,
  .has-js .site-header__panel {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--space-l);
    max-block-size: none;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  /* La navigation n'est plus poussee contre le logo : elle se centre dans
     l'espace laisse libre entre le verrouillage et les actions. En flux —
     elle ne peut donc pas venir chevaucher le bouton, quelle que soit la
     longueur des intitules. */
  .site-header__panel {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .site-nav {
    margin-inline: auto;
  }

  .site-nav ul {
    flex-direction: row;
    gap: var(--space-l);
  }

  .site-nav a {
    position: relative;
    padding-block: 0.4rem;
    font-size: var(--text-s);
    font-weight: 600;
    white-space: nowrap;
  }

  /* Un trait qui se deploie sous l'intitule survole, et qui reste sous la
     section en cours de lecture. */
  .site-nav a::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 2px;
    border-radius: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transition: transform 0.18s ease;
  }

  .site-nav a:hover::after,
  .site-nav a[aria-current]::after {
    transform: scaleX(1);
  }

  .site-nav a[aria-current] {
    color: var(--ink);
  }

  /* Le selecteur de langue s'efface : il ne concurrence plus le bouton. */
  .lang__button {
    background: transparent;
    border-color: transparent;
  }

  .lang__button:hover {
    background: var(--surface-alt);
    border-color: var(--line);
  }

  .site-header__cta {
    box-shadow: 0 8px 20px var(--brand-shadow);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
  }

  .site-header__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px var(--brand-shadow);
  }

  .lang {
    align-self: auto;
  }

  .has-js .lang__list {
    inset-inline-start: auto;
    inset-inline-end: 0;
    min-inline-size: 12rem;
  }

  .site-header__cta {
    align-self: auto;
  }
}

/* A partir de 76em, la barre a de quoi centrer la navigation en son milieu
   plutot qu'entre le logo et les actions — un centre franc se lit mieux.
   Pas avant : mesure faite, l'espagnol a 1024 px viendrait toucher le
   bouton d'un pixel. Le centrage est physique — `left`, non
   `inset-inline-start` — parce qu'un milieu est le meme dans les deux sens
   de lecture. */
@media (min-width: 76em) {
  .site-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-inline: 0;
  }
}

/* =========================================================================
   EN-TETE DE SECTION
   ========================================================================= */
/* En-tete de section — le dessin d'origine : le titre centre entre deux
   filets qui s'effacent vers l'exterieur, son dernier membre en orange, et
   un sous-titre gris dessous. Les filets ne sont que decoratifs : sous 34em
   ils n'ont plus la place de respirer, ils disparaissent. */
.section__head {
  margin-block-end: clamp(2rem, 1.4rem + 2vw, 3rem);
  text-align: center;
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
}

.eyebrow h2 {
  margin: 0;
}

.eyebrow .rule {
  flex: 0 1 7rem;
  block-size: 1px;
  background: linear-gradient(to right, transparent, #cfcfd4 40%, #cfcfd4 60%, transparent);
}

@media (max-width: 34em) {
  .eyebrow .rule {
    display: none;
  }
}

.text-brand {
  color: var(--brand-text);
}

.eyebrow-sub {
  margin: var(--space-s) auto 0;
  max-inline-size: 46ch;
  color: var(--ink-muted);
  font-size: var(--text-m);
}

.section__lead {
  margin-block-end: 0;
  font-size: var(--text-l);
}

.icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* =========================================================================
   SERVICES — bloc « Envoyer un colis » allege
   ========================================================================= */
.parcel--lite {
  display: flex;
  align-items: flex-start;
  margin-block-start: var(--space-m);
  margin-inline: auto;
  max-inline-size: 52rem;
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.parcel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
  margin-block-end: var(--space-2xs);
}

.parcel__title {
  margin: 0;
  font-size: var(--text-l);
}

.parcel__text {
  margin: 0;
  max-inline-size: 46ch;
  color: var(--ink-muted);
  font-size: var(--text-s);
}

.services__note {
  margin-block-start: var(--space-m);
  margin-block-end: 0;
  font-size: var(--text-s);
  color: var(--ink-muted);
}

/* =========================================================================
   POURQUOI DELIGOA — tuiles illustrees (composition ZIP Features)
   ========================================================================= */
.features-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: start;
  justify-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40em) {
  .features-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .features-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.feature-tile {
  text-align: center;
  padding: var(--space-xs);
  max-inline-size: 16rem;
}

.feature-tile__title {
  margin: var(--space-s) 0 var(--space-2xs);
  font-size: var(--text-m);
}

.feature-tile__text {
  margin: 0;
  font-size: var(--text-s);
  color: var(--ink-muted);
}

.feature-illu {
  inline-size: 5.375rem;
  block-size: 5.375rem;
  margin: 0 auto;
}

.feature-illu img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.value__icon {
  display: grid;
  place-items: center;
  inline-size: 4rem;
  block-size: 4rem;
  margin: var(--space-2xs) auto var(--space-m);
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
}

.value__icon .icon {
  inline-size: 1.875rem;
  block-size: 1.875rem;
}

.value__title {
  margin-block-end: var(--space-xs);
  font-size: var(--text-m);
}

.value__text {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-s);
}

/* =========================================================================
   COMMENT CA FONCTIONNE
   ========================================================================= */
/* Le parcours en trois temps, dans sa mise en page d'origine : trois
   pastilles rondes, les deux exterieures descendues, reliees par un trait
   pointille. Le decalage et les traits sont du decor — sous 48em tout
   revient en colonne, sans pointilles, et le propos ne change pas.

   La numerotation vient du compteur CSS : elle reste juste que les etapes
   soient celles du build ou celles du Panel Admin. */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-xl);
  text-align: center;
}

.step {
  position: relative;
}

.step__art {
  display: grid;
  place-items: center;
  inline-size: clamp(8rem, 5rem + 10vw, 10.625rem);
  block-size: clamp(8rem, 5rem + 10vw, 10.625rem);
  margin: 0 auto var(--space-m);
  border-radius: 50%;
  background: hsl(var(--brand-h) var(--brand-s) 97.5%);
  box-shadow: 0 14px 30px hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 0.12);
}

.step__illu {
  inline-size: 80%;
  block-size: 80%;
  object-fit: contain;
}

.step__number {
  color: var(--brand);
  font-size: clamp(2.5rem, 1.8rem + 3vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
}

.step__number::before {
  counter-increment: step;
  content: counter(step);
}

.step__title {
  margin-block-end: var(--space-2xs);
  font-size: var(--text-l);
}

.step__text {
  margin: 0 auto;
  max-inline-size: 26ch;
  color: var(--ink-muted);
  font-size: var(--text-s);
}

@media (min-width: 48em) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    padding-block-start: 1.25rem;
  }

  .step:nth-of-type(odd) {
    transform: translateY(2.5rem);
  }

  /* Les traits relient une pastille a la suivante. Ils sont poses en fond
     d'un pseudo-element : rien a lire, rien a atteindre au clavier. En
     lecture arabe la page se retourne, le trait avec elle.

     nth-of-type et non nth-child : la liste s'ouvre sur le <template> de
     l'hydratation, qui decalerait la parite d'un rang et ferait descendre
     l'etape du milieu au lieu des deux autres. */
  .step:not(:last-of-type)::after {
    content: "";
    position: absolute;
    inset-block-start: 4.5rem;
    inset-inline-start: 68%;
    inline-size: 64%;
    block-size: 3.75rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
  }

  .step:nth-of-type(odd)::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 60' fill='none'><path d='M0 50 C 70 50, 90 10, 220 10' stroke='%23ff9b57' stroke-width='2' stroke-dasharray='4 6' stroke-linecap='round'/></svg>");
  }

  .step:nth-of-type(even)::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 60' fill='none'><path d='M0 10 C 130 10, 150 50, 220 50' stroke='%23ff9b57' stroke-width='2' stroke-dasharray='4 6' stroke-linecap='round'/></svg>");
  }

  html[dir="rtl"] .step:not(:last-of-type)::after {
    transform: scaleX(-1);
  }
}

/* =========================================================================
   HERO
   -------------------------------------------------------------------------
   Fixe, sans narration. Le discours a gauche, les deux applications a
   droite, visibles des l'arrivee : DELIGOA se presente par son produit et
   non par une photographie de categorie.

   La composition des appareils — tablette en fond, telephone devant — est
   une mise en page, pas une animation : elle ne depend donc ni du script ni
   du reglage de mouvement, seulement de la largeur disponible.
   ========================================================================= */
.hero {
  position: relative;
  padding-block: clamp(2rem, 1.2rem + 4vw, 4rem);
}

.hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
}

/* Sans cette contrainte, les elements de grille refusent de descendre sous
   la largeur minimale de leur contenu. */
.hero__copy,
.hero__visual {
  min-inline-size: 0;
}

/* Decor : ambiance de fond, aucune information. Tant que le fichier n'est
   pas depose sous assets/, la couche n'est pas ecrite du tout. */
.hero__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.55;
}

/* Voile : le decor porte l'ambiance, jamais au prix de la lisibilite. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--surface) 88%, transparent),
    color-mix(in srgb, var(--surface) 70%, transparent)
  );
}

.hero__decor picture {
  display: contents;
}

.hero__decor-image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Sur petit ecran, une seule maquette reste assez grande pour etre lisible.
   L'application Commerce est presentee plus bas dans la page. */
.hero__visual .device--tablet {
  display: none;
}

.hero__visual .device--phone {
  max-inline-size: 16rem;
}

@media (min-width: 56em) {
  .hero__layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
  }

  /* Composition des deux appareils : la tablette en fond, le telephone
     devant, comme sur la reference validee. Elle ne depend que de la place
     disponible — ni du script, ni du reglage de mouvement — parce qu'elle
     ne bouge pas. */
  .hero__visual .devices__set {
    position: relative;
    display: block;
    aspect-ratio: 4 / 2.9;
  }

  .hero__visual .device {
    position: absolute;
    display: block;
    max-inline-size: none;
  }

  .hero__visual .device--tablet {
    inset-inline-end: 0;
    inset-block-start: 0;
    inline-size: 71%;
  }

  .hero__visual .device--phone {
    inset-inline-start: 0;
    inset-block-end: 0;
    inline-size: 30%;
    z-index: 2;
  }
}

/* =========================================================================
   ENSEIGNES — carousel de logos conditionnel
   -------------------------------------------------------------------------
   Sans script ou avec mouvement reduit, tous les logos valides restent
   visibles dans une grille. Le script n'active les trois emplacements
   alternes qu'a partir de 48em et uniquement si le mouvement est accepte.
   ========================================================================= */
.brand-showcase {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  text-align: center;
}

.brand-showcase__title {
  max-inline-size: 22ch;
  margin: 0 auto clamp(2rem, 1.25rem + 3vw, 3.5rem);
  font-size: var(--text-2xl);
}

.brand-carousel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
  max-inline-size: 56rem;
  margin-inline: auto;
}

.brand-carousel__column {
  display: contents;
}

.brand-mark {
  display: grid;
  place-items: center;
  min-inline-size: 0;
  min-block-size: 6.5rem;
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.brand-mark__logo {
  inline-size: auto;
  max-inline-size: min(9rem, 100%);
  block-size: auto;
  max-block-size: 3.5rem;
  object-fit: contain;
}

@media (min-width: 48em) {
  .brand-carousel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-l);
  }
}

@media (min-width: 48em) and (prefers-reduced-motion: no-preference) {
  .brand-carousel.is-animated .brand-carousel__column {
    display: grid;
    min-block-size: 7.5rem;
    overflow: hidden;
  }

  .brand-carousel.is-animated .brand-mark {
    grid-area: 1 / 1;
    min-block-size: 7.5rem;
    opacity: 0;
    filter: blur(2px);
    transform: translateY(35%);
  }

  .brand-carousel.is-animated .brand-mark.is-current {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  .brand-carousel.is-animated .brand-mark.is-entering {
    animation: brand-logo-enter 260ms var(--ease-in-out) var(--brand-delay) both;
  }

  .brand-carousel.is-animated .brand-mark.is-leaving {
    animation: brand-logo-leave 260ms var(--ease-in-out) var(--brand-delay) both;
  }
}

@keyframes brand-logo-enter {
  from { opacity: 0; filter: blur(2px); transform: translateY(35%); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes brand-logo-leave {
  from { opacity: 1; filter: blur(0); transform: translateY(0); }
  to { opacity: 0; filter: blur(2px); transform: translateY(-35%); }
}

/* =========================================================================
   BIEN PLUS QUE LA LIVRAISON DE REPAS — traversee des cinq univers
   -------------------------------------------------------------------------
   Trois etats pour un seul balisage.

   Par defaut — etroit, sans script, ou mouvement reduit : rien n'est
   epingle, rien n'est transforme. Les cinq panneaux s'enchainent, tous
   lisibles. C'est l'etat de repli, et c'est lui qui garantit que
   l'information ne depend jamais de l'effet.

   En affichage large, avec script et mouvement accepte : la zone s'epingle
   et la progression du defilement fait passer les univers au premier plan
   l'un apres l'autre, dans la meme composition.

   Aucun minuteur, aucune lecture automatique : la narration avance et
   recule avec le visiteur.
   ========================================================================= */
.stage {
  --step-length: clamp(12rem, 26vh, 16rem);
  --panel-gap: 17%;
  position: relative;
  padding-block: clamp(2rem, 1.2rem + 4vw, 4rem);
}

.stage__layout {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
}

/* Sans cette contrainte, les elements de grille refusent de descendre sous
   la largeur minimale de leur contenu : le rail de panneaux, qui defile
   pourtant dans sa propre boite, elargissait toute la page. */
.stage__copy,
.stage__visual {
  min-inline-size: 0;
}

/* Le contenu passe devant le decor. */
.stage__layout {
  position: relative;
  z-index: 1;
}

.stage__sentinels {
  display: none;
}

/* Le titre de la section. En narration il reste dans la zone epinglee : il
   tient la traversee du debut a la fin, pendant que les univers defilent en
   face de lui. */
.stage__title {
  margin-block-end: 0;
  max-inline-size: 14ch;
}

.hero__eyebrow {
  margin-block-end: var(--space-m);
  color: var(--brand-text);
  font-size: var(--text-s);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero__title {
  margin-block-end: var(--space-m);
  max-inline-size: 15ch;
}

.hero__lead {
  max-inline-size: 46ch;
  font-size: var(--text-l);
  color: var(--ink-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-block-start: var(--space-l);
}

/* ---------- jauge de progression ----------
   Repere de lecture pendant la narration. Sans narration elle n'indique
   rien, donc elle n'existe pas. */
/* Progression verticale des univers. Elle n'indique quelque chose que
   pendant la narration : ailleurs, elle n'existe pas. */
.rail {
  display: none;
  position: relative;
}

/* Le fil qui relie les points : c'est lui qui fait lire la suite comme une
   progression et non comme une simple liste. */
.rail::before {
  content: '';
  position: absolute;
  inset-block: 0.9rem;
  inset-inline-start: 0.25rem;
  inline-size: 2px;
  background: var(--line);
}

.rail__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding-block: 0.45rem;
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--ink-muted);
  opacity: 0.5;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.rail__dot {
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--line);
  /* Le point se detache du fil qu'il recouvre. */
  box-shadow: 0 0 0 4px var(--surface);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.rail__label {
  white-space: nowrap;
}

.rail__item.is-active {
  opacity: 1;
  color: var(--brand-text);
}

.rail__item.is-active .rail__dot {
  transform: scale(1.5);
  background: var(--brand);
}

/* ---------- pile de panneaux ---------- */
/* Etat de repli, ecran etroit : rail a defilement horizontal plutot que
   cinq panneaux empiles, qui allongeaient le hero de pres de deux ecrans.
   Ce n'est pas un carrousel : rien ne defile tout seul, le visiteur fait
   glisser a son rythme, et le debord du panneau suivant le lui indique. */
.deck {
  display: flex;
  gap: var(--space-m);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-block-end: var(--space-xs);
  /* Le rail deborde volontairement de la gouttiere pour que le panneau
     suivant reste visible au bord de l'ecran. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}

.deck::-webkit-scrollbar {
  display: none;
}

.deck > .panel {
  flex: 0 0 min(82%, 20rem);
  scroll-snap-align: center;
}

@media (min-width: 48em) {
  .deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .deck > .panel {
    flex: none;
  }
}

.panel {
  position: relative;
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}

.panel__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-m);
  overflow: hidden;
}

.panel__media picture {
  display: contents;
}

/* Remplissage deterministe : en element de grille, un block-size en
   pourcentage ne se resolvait pas et l'image restait 66px plus courte que
   son cadre, laissant une bande claire en haut. Le positionnement absolu
   supprime l'ambiguite, quel que soit l'etat du panneau. */
.panel__image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.panel__plate {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
}

/* L'etat appartient a l'univers, pas a la section des services : il voyage
   avec son panneau. Il se pose sous le titre, discret, pour ne disputer la
   vedette ni a l'image, ni au titre, ni a la jauge. */
.panel__state {
  display: block;
}

.panel__label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.panel__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--ink);
}

.panel__badge .icon {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.panel__title {
  font-size: var(--text-l);
  font-weight: 700;
}

.panel__text {
  font-size: var(--text-s);
  color: var(--ink-muted);
}

/* ---------- reserves d'image ----------
   Elles disparaissent des qu'une photographie est renseignee : ce ne sont
   pas des elements de design, ce sont des emplacements en attente. */
.slot {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  color: var(--brand-text);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 10px,
      color-mix(in srgb, var(--brand) 7%, transparent) 10px 20px),
    var(--brand-soft);
}

.slot .icon {
  inline-size: 2rem;
  block-size: 2rem;
  opacity: 0.55;
}

.panel__tag {
  position: absolute;
  inset-block-end: var(--space-xs);
  inset-inline-start: var(--space-xs);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- appareils ---------- */
.devices__set {
  display: grid;
  gap: var(--space-l);
  justify-items: center;
}

.device {
  margin: 0;
  inline-size: 100%;
  max-inline-size: 22rem;
}

/* Chassis : une coque sombre, un ecran encastre, et des ombres empilees
   plutot qu'une seule ombre plate. C'est ce qui separe un appareil credible
   d'un rectangle borde. */
.device__body {
  position: relative;
  padding: var(--device-bezel);
  background: linear-gradient(160deg, #2b2b35, #15151b 60%);
  border-radius: var(--device-radius);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.14) inset,
    0 2px 6px rgb(20 20 26 / 0.18),
    0 18px 38px rgb(20 20 26 / 0.22),
    0 42px 72px rgb(20 20 26 / 0.14);
}

.device__screen {
  overflow: hidden;
  background: var(--surface);
  border-radius: calc(var(--device-radius) - var(--device-bezel));
}

/* Encoche et indicateur : deux details suffisent a faire lire l'objet
   comme un telephone. Ils se posent au-dessus de l'ecran. */
.device__notch,
.device__indicator,
.device__lens {
  position: absolute;
  z-index: 3;
  background: #15151b;
}

.device__notch {
  inset-block-start: calc(var(--device-bezel) + 0.35rem);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 26%;
  block-size: 0.55rem;
  border-radius: 999px;
}

.device__indicator {
  inset-block-end: calc(var(--device-bezel) + 0.4rem);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 30%;
  block-size: 0.2rem;
  border-radius: 999px;
  background: rgb(20 20 26 / 0.25);
}

.device__lens {
  inset-block-start: 50%;
  inset-inline-start: calc(var(--device-bezel) / 2);
  transform: translateY(-50%);
  inline-size: 0.3rem;
  block-size: 0.3rem;
  border-radius: 50%;
  background: #3a3a45;
}

.device--phone {
  --device-bezel: 0.55rem;
  --device-radius: 2.1rem;
}

.device--phone .device__screen {
  aspect-ratio: 9 / 19.5;
}

.device--tablet {
  --device-bezel: 0.7rem;
  --device-radius: 1.5rem;
  max-inline-size: 34rem;
}

.device--tablet .device__screen {
  aspect-ratio: 4 / 3;
}

/* =========================================================================
   MAQUETTES D'INTERFACE
   -------------------------------------------------------------------------
   Ecrans en HTML et CSS : leurs intitules viennent du contenu, donc ils
   sont traduits et suivent la direction de lecture. Tout y est dimensionne
   en em pour que les deux appareils se reduisent d'un bloc.
   ========================================================================= */
.ui {
  block-size: 100%;
  font-size: clamp(6px, 0.9vw, 10px);
  line-height: 1.35;
  word-spacing: 0.12em;
  background: var(--surface-alt);
}

.ui__wordmark {
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.ui__section {
  margin: 1.4em 0 0.7em;
  font-size: 1.15em;
  font-weight: 700;
  color: var(--ink);
}

/* Trait de remplissage : un contenu reel viendra s'y substituer. Aucune
   donnee inventee n'est affichee a la place. */
.skel {
  display: block;
  inline-size: var(--w, 60%);
  block-size: 0.7em;
  border-radius: 0.35em;
  background: var(--line);
}

.skel[data-tone='faint'] {
  opacity: 0.55;
}

/* ---------- application Client ---------- */
.ui--client {
  display: flex;
  flex-direction: column;
  /* Retrait superieur cale sur l'encoche du chassis. */
  padding: 3.2em 1.4em 0;
  background: var(--surface);
}

.ui-address,
.ui-search {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
}

.ui-address {
  margin-block-start: 1.1em;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--ink);
}

.ui-address__icon {
  color: var(--brand);
}

.ui-address__chevron {
  color: var(--ink-muted);
}

.ui-address .icon,
.ui-search .icon {
  inline-size: 1.2em;
  block-size: 1.2em;
}

.ui-address__chevron .icon {
  inline-size: 1em;
  block-size: 1em;
}

.ui-search {
  margin-block-start: 1em;
  padding: 0.75em 1em;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 1em;
}

.ui-cats {
  display: flex;
  gap: 0.75em;
  margin-block-start: 1.3em;
}

.ui-cat {
  display: grid;
  justify-items: center;
  gap: 0.4em;
  flex: 1 1 0;
  min-inline-size: 0;
}

.ui-cat__icon {
  display: grid;
  place-items: center;
  inline-size: 3em;
  block-size: 3em;
  border-radius: 1em;
  background: var(--brand-soft);
  color: var(--brand-text);
}

.ui-cat:first-child .ui-cat__icon {
  background: var(--brand);
  color: var(--ink);
}

.ui-cat__icon .icon {
  inline-size: 1.5em;
  block-size: 1.5em;
}

.ui-cat__label {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 100%;
}

.ui-cards {
  display: grid;
  gap: 0.8em;
}

.ui-card {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.8em;
  border-radius: 1em;
  background: var(--surface);
  border: 1px solid var(--line);
}

.slot--card {
  inline-size: 4.5em;
  block-size: 4.5em;
  border-radius: 0.8em;
  flex: none;
}

.slot--card .icon,
.slot--mini .icon {
  inline-size: 1.4em;
  block-size: 1.4em;
}

.ui-card__body {
  display: grid;
  gap: 0.25em;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.ui-card__title {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--ink);
}

.ui-card__meta {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.9em;
  color: var(--ink-muted);
}

.ui-card__pin {
  display: inline-flex;
  color: var(--brand);
}

.ui-card__pin .icon {
  inline-size: 1em;
  block-size: 1em;
}

.ui-tabs {
  display: flex;
  gap: 0.35em;
  margin-block-start: auto;
  padding-block: 0.9em 1.6em;
  border-block-start: 1px solid var(--line);
}

.ui-tab {
  display: grid;
  justify-items: center;
  gap: 0.25em;
  flex: 1 1 0;
  min-inline-size: 0;
  color: var(--ink-muted);
  font-size: 0.75em;
  font-weight: 600;
}

.ui-tab__label {
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-tab.is-active {
  color: var(--brand-text);
}

.ui-tab .icon {
  inline-size: 1.5em;
  block-size: 1.5em;
}

/* ---------- application Commerce ---------- */
.ui--merchant {
  display: grid;
  grid-template-columns: 12em 1fr;
}

.ui-side {
  padding: 1.5em 1.1em;
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
}

.ui-nav {
  display: grid;
  gap: 0.25em;
  margin-block-start: 1.6em;
}

.ui-nav__item {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.6em 0.75em;
  border-radius: 0.7em;
  font-size: 1em;
  font-weight: 600;
  color: var(--ink-muted);
}

.ui-nav__item.is-active {
  background: var(--brand-soft);
  color: var(--brand-text);
}

.ui-nav .icon {
  inline-size: 1.3em;
  block-size: 1.3em;
}

.ui-main {
  padding: 1.5em 1.6em;
  min-inline-size: 0;
}

.ui-main__head {
  display: flex;
  align-items: center;
  gap: 0.8em;
}

.ui-main__title {
  font-size: 1.5em;
  font-weight: 800;
  color: var(--ink);
}

/* Pastille de demonstration : ce qui suit est une interface d'exemple, pas
   une performance de DELIGOA ni d'un commerce reel. */
.ui-demo {
  padding: 0.25em 0.6em;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  font-size: 0.85em;
  font-weight: 700;
  color: var(--ink-muted);
}

.ui-stats {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 0.9em;
  margin-block-start: 1.3em;
}

.ui-stat {
  display: grid;
  gap: 0.5em;
  padding: 1em;
  border-radius: 0.9em;
  background: var(--surface);
  border: 1px solid var(--line);
}

.ui-stat__label {
  font-size: 0.9em;
  font-weight: 600;
  color: var(--ink-muted);
}

.ui-stat__value {
  font-size: 2em;
  font-weight: 800;
  color: var(--ink);
}

.ui-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.4em;
  block-size: 3.2em;
}

.ui-chart__bar {
  flex: 1 1 0;
  block-size: var(--h);
  border-radius: 0.25em 0.25em 0 0;
  background: var(--brand);
  opacity: 0.75;
}

.ui-orders {
  display: grid;
  gap: 0.5em;
}

.ui-order {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.7em 0.9em;
  border-radius: 0.8em;
  background: var(--surface);
  border: 1px solid var(--line);
}

.slot--mini {
  inline-size: 2.2em;
  block-size: 2.2em;
  border-radius: 0.5em;
  flex: none;
}

.ui-order__ref {
  flex: 1 1 auto;
  font-size: 1em;
  font-weight: 700;
  color: var(--ink);
}

.ui-order__state {
  padding: 0.25em 0.6em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 700;
  background: var(--brand-soft);
  color: var(--brand-text);
}

.ui-order__state[data-state='1'] {
  background: #e8f5ec;
  color: #1c7a43;
}

.ui-order__state[data-state='2'] {
  background: var(--surface-alt);
  color: var(--ink-muted);
}

/* =========================================================================
   HERO NARRATIF — mode anime
   -------------------------------------------------------------------------
   Ce bloc, et lui seul, epingle la zone et transforme les panneaux. Il est
   conditionne a trois choses : un ecran assez grand pour porter la
   narration, un script actif, et un visiteur qui n'a pas demande a reduire
   les animations.

   Si l'une manque, rien de ce qui suit ne s'applique et le hero reste la
   pile lisible definie plus haut. L'information est la meme dans les deux
   cas : ce bloc ne fait que la mettre en scene.
   ========================================================================= */
@media (min-width: 56em) and (min-height: 38em) and (prefers-reduced-motion: no-preference) {
  .has-js .stage {
    block-size: calc(100svh - var(--header-height) + var(--steps) * var(--step-length));
    padding-block: 0;
  }

  .has-js .stage__pin {
    position: sticky;
    inset-block-start: var(--header-height);
    display: grid;
    align-items: center;
    block-size: calc(100svh - var(--header-height));
    overflow: hidden;
  }

  .has-js .stage__layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
  }

  /* Le rail est HORS DU FLUX, pose contre le bord des panneaux.
     En faire une troisieme colonne etait arithmetiquement impossible sans
     degrader le reste : a 1440px le conteneur mesure 1096px, dont 478 pour
     le texte et 562 pour les panneaux — il ne restait que 56px, moins que
     le rail lui-meme. Le titre y perdait 8px, les boutons s'empilaient et
     le panneau actif 47px de large. Hors du flux, le rail ne prend rien a
     personne : les proportions d'origine sont conservees au pixel. */
  .has-js .rail {
    display: grid;
    position: absolute;
    /* Aligne sur le bord de la colonne de contenu, pas sur celui du
       conteneur : sans cela le rail depassait dans la gouttiere et cassait
       l'alignement vertical avec les sections suivantes. */
    inset-inline-end: var(--gutter);
    inset-block-start: 50%;
    transform: translateY(-50%);
    z-index: 3;
  }

  /* Rail etroit : un fil, des points, six libelles, rien d'autre. */
  .has-js .rail__item {
    font-size: 0.8125rem;
    gap: 0.4rem;
  }

  /* L'eventail se dissout avant d'atteindre le rail. Sans ce fondu, les
     panneaux les plus lointains passaient sous les libelles et les deux
     series de textes se telescopaient. Faire disparaitre la matiere vaut
     mieux qu'empiler un fond opaque par-dessus : le degrade prolonge la
     profondeur deja a l'oeuvre dans l'eventail.

     Un degrade n'a pas de forme logique en CSS, d'ou la seule regle de ce
     fichier conditionnee a la direction de lecture.

     `has-js` est pose sur <html> : la variante droite-a-gauche s'ecrit donc
     sans combinateur entre les deux, sinon le selecteur reclame un .has-js
     descendant de <html> qui n'existe pas et le masque reste inverse. */
  .has-js .deck {
    -webkit-mask-image: linear-gradient(to right, #000 66%, transparent 92%);
    mask-image: linear-gradient(to right, #000 66%, transparent 92%);
  }

  html[dir='rtl'].has-js .deck {
    -webkit-mask-image: linear-gradient(to left, #000 66%, transparent 92%);
    mask-image: linear-gradient(to left, #000 66%, transparent 92%);
  }

  /* Reperes de progression : une rangee par etape, sur toute la hauteur de
     la zone. L'observateur les regarde franchir le milieu de l'ecran, ce qui
     evite d'ecouter le defilement. */
  .has-js .stage__sentinels {
    display: grid;
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    /* Hauteur de la zone moins celle de l'ecran epingle : les reperes se
       repartissent sur la distance reellement parcourue, et il reste une
       longueur d'etape apres le dernier pour le lire sans que l'epingle ne
       se relache. */
    block-size: calc(100% - (100svh - var(--header-height)));
    grid-auto-rows: 1fr;
    pointer-events: none;
  }

  .has-js .stage__visual {
    position: relative;
    block-size: min(74vh, 34rem);
    overflow: hidden;
  }

  /* L'eventail occupe toute la scene : les univers se relaient a la meme
     place, ce qui est exactement la composition demandee. */
  .has-js .deck {
    position: absolute;
    inset: 0;
    display: block;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Eventail de panneaux. Chaque panneau ne connait que sa distance a
     l'etape active : --dx signee pour la translation (et donc retournee en
     lecture arabe), --ad absolue pour la profondeur. */
  /* Le visuel occupe tout le panneau ; l'etiquette se pose dessus. Les
     panneaux en retrait ne montrent donc plus qu'un bandeau, et leurs
     descriptions ne peuvent plus se chevaucher. */
  .has-js .panel {
    position: absolute;
    /* Decalage vertical assez franc pour que l'etiquette de chaque panneau
       en retrait depasse de celle du panneau qui le couvre. */
    inset-block-start: calc(var(--ad, 0) * 1.5%);
    inset-inline-start: 0;
    inline-size: 46%;
    block-size: calc(97% - var(--ad, 0) * 9%);
    padding: 0;
    overflow: hidden;
    transform:
      translateX(calc(var(--dx, 0) * 38%))
      scale(calc(1 - var(--ad, 0) * 0.02));
    opacity: calc(1 - var(--ad, 0) * 0.22);
    z-index: calc(20 - var(--ad, 0));
    box-shadow: var(--shadow-m);
    transition:
      transform 0.6s cubic-bezier(0.22, 0.7, 0.25, 1),
      block-size 0.6s cubic-bezier(0.22, 0.7, 0.25, 1),
      opacity 0.5s ease;
  }

  .has-js .panel__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .has-js .panel__plate {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: var(--space-m) var(--space-s) var(--space-s);
    background: linear-gradient(to top,
      color-mix(in srgb, var(--surface) 96%, transparent) 62%,
      transparent);
  }

  /* L'etiquette s'efface avec la distance. Le rail annonce desormais les
     six univers : la repeter sur chaque panneau en retrait faisait deux
     series de libelles concurrentes, et celles des panneaux lointains
     flottaient dans la zone estompee sans support lisible. */
  .has-js .panel__plate {
    opacity: calc(1 - var(--ad, 0) * 0.55);
    transition: opacity 0.5s ease;
  }

  /* La description n'appartient qu'au panneau au premier plan : sur les
     autres elle serait illisible et se superposerait a ses voisines. */
  .has-js .panel__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: calc(1 - var(--ad, 0));
    transition: opacity 0.4s ease;
  }

  .has-js .panel__title {
    font-size: var(--text-m);
  }

  /* L'etiquette de reserve ne concerne que le panneau lu. */
  .has-js .panel__tag {
    inset-block-end: auto;
    inset-block-start: var(--space-xs);
    opacity: calc(1 - var(--ad, 0));
  }
}

/* Mise a l'echelle des maquettes sur la largeur de l'appareil, quelle que
   soit la taille a laquelle il est affiche. */
.device__screen {
  container-type: inline-size;
}

.device--phone .ui {
  font-size: clamp(5px, 4.4cqw, 12px);
}

.device--tablet .ui {
  font-size: clamp(5px, 2.2cqw, 11px);
}

/* =========================================================================
   REJOINDRE DELIGOA — commerces et livreurs
   ========================================================================= */
.join {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .join {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.join__card {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  padding: var(--space-l);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.join__card:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: 0 16px 36px hsl(220 20% 10% / 0.08);
}

.join__icon {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
}

.join__icon .icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.join__title {
  margin: 0;
  font-size: var(--text-l);
}

.join__text {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-s);
}

.join__points {
  display: grid;
  gap: var(--space-2xs);
  margin-block: var(--space-2xs) var(--space-s);
  padding-inline-start: 1.1em;
  list-style: disc;
  color: var(--ink-2);
  font-size: var(--text-s);
}

.join__card .btn {
  justify-self: start;
  margin-block-start: auto;
}

.join__note {
  margin: var(--space-l) 0 0;
  font-size: var(--text-s);
  color: var(--ink-muted);
}

/* =========================================================================
   QUESTIONS FREQUENTES — accordeon natif
   ========================================================================= */
.faq {
  display: grid;
  gap: var(--space-xs);
  max-inline-size: 52rem;
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}

.faq__item[open] {
  border-color: var(--brand-border);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

/* Le marqueur : un chevron dessine en CSS, retourne a l'ouverture. Il suit
   la direction de lecture grace a margin-inline-start. */
.faq__question::after {
  content: "";
  flex: none;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  margin-inline-start: auto;
  border-inline-end: 2px solid var(--brand-strong);
  border-block-end: 2px solid var(--brand-strong);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__question::after {
  transform: rotate(225deg);
}

.faq__answer {
  margin: 0;
  padding: 0 var(--space-m) var(--space-m);
}

.join__note,
.services__note {
  text-align: center;
}

/* =========================================================================
   PIED DE PAGE
   -------------------------------------------------------------------------
   Le pied d'origine, rendu a son dessin : fond gris clair, trois colonnes —
   la marque, les liens, le contact — puis une barre basse separee par un
   filet. Rien de sombre : c'etait le principal ecart avec la direction
   validee.

   Les lignes telephone et adresse existent dans la page mais restent
   masquees tant que le Panel Admin ne les renseigne pas ; les icones
   sociales suivent la meme regle. Une icone qui ne mene nulle part vaut
   moins que son absence.
   ========================================================================= */
.site-footer {
  margin-block-start: var(--space-xl);
  background: #f3f4f6;
  color: #3f3f47;
}

.footer-grid {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-xl);
}

@media (min-width: 48em) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: 3rem;
  }
}

.site-footer h2 {
  margin-block-end: var(--space-m);
  color: var(--ink);
  font-size: var(--text-m);
}

.site-footer a {
  color: #4a4a52;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--brand);
}

/* Le verrouillage est dessine pour un fond clair : ici le fond l'est deja,
   il n'a plus besoin de la plaque blanche que portait le pied sombre. */
.site-footer .brand__logo--lockup {
  block-size: 2.375rem;
  inline-size: auto;
  max-inline-size: 14rem;
}

.footer-tagline {
  margin-block: var(--space-s) 0;
  max-inline-size: 34ch;
  color: #5b5b64;
  font-size: var(--text-s);
}

.footer-col ul,
.social-list,
.contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col ul,
.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  font-size: var(--text-s);
}

/* L'attribut `hidden` doit l'emporter sur toute regle de disposition : sans
   cela, un `display: flex` pose plus loin rend visible une ligne que le
   script garde masquee faute de donnee — un telephone sans numero. */
[hidden] {
  display: none !important;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
}

.contact-list .ico {
  flex: 0 0 auto;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-block-start: 0.125rem;
  color: var(--brand);
}

.contact-list .ico svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.social-list:has(li:not([hidden])) {
  margin-block-start: var(--space-m);
}

.social-list a {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: #fff;
  color: #5b5b64;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.social-list a:hover {
  background: var(--brand);
  color: var(--ink);
  transform: translateY(-1px);
}

.social-list svg {
  inline-size: 0.9375rem;
  block-size: 0.9375rem;
  fill: currentColor;
}

.footer-bottom {
  border-block-start: 1px solid #e4e5ea;
}

.footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-m);
  color: #6b6b73;
  font-size: var(--text-s);
}

.footer-bottom__inner p {
  margin: 0;
}

.footer-bottom__inner p {
  margin: 0;
}

/* =========================================================================
   ILS UTILISENT DELIGOA — grille de temoignages
   ========================================================================= */
.testimonials__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.testimonial {
  display: grid;
  align-content: start;
  gap: var(--space-s);
}

.testimonial__quote {
  margin: 0;
  font-size: var(--text-m);
}

.testimonial__author {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-s);
  font-weight: 600;
}

/* =========================================================================
   OBTENEZ L'APPLICATION — composition ZIP cta-grid restauree
   ========================================================================= */
.apps__panel {
  background:
    radial-gradient(600px 300px at 0% 0%, #ffe4cc, transparent 70%),
    linear-gradient(135deg, #ffeeda 0%, #fff4e6 100%);
  border-radius: 1.625rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, 1rem + 2vw, 3.125rem);
  box-shadow: 0 24px 60px hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 0.1);
}

.apps__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 56em) {
  .apps__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.apps__text {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.apps__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem);
  line-height: 1.15;
}

.apps__lead {
  margin: 0;
  max-inline-size: 50ch;
  color: #4d4d57;
  font-size: var(--text-m);
}

.apps__stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-block-start: var(--space-xs);
}

/* Plaque de magasin : le dessin sombre du site d'origine. Sans `href`, elle
   reste une mention — meme forme, sans effet de survol ni curseur de lien. */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  padding: 0.65rem var(--space-m);
  border-radius: var(--radius-m);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

a.store-badge:hover,
a.store-badge:focus-visible {
  transform: translateY(-2px);
  opacity: 0.92;
}

.store-badge--soon {
  opacity: 0.72;
}

.store-badge__glyph svg {
  inline-size: 1.65rem;
  block-size: 1.65rem;
  display: block;
}

.store-badge__text {
  display: grid;
  line-height: 1.2;
  text-align: start;
}

.store-badge__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}

.store-badge__name {
  font-size: var(--text-m);
  font-weight: 700;
}

.apps__device {
  display: grid;
  justify-items: center;
}

.apps__device .device {
  max-inline-size: 17rem;
  filter: drop-shadow(0 20px 30px hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 0.2));
}

.store-badge__platform {
  font-size: 0.6875rem;
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .store-badge {
    transition: none;
  }
}