/* Accueil téléphonique: the call card and the owner's summary on the green visual band.
   Every class here starts with .at- ; shared classes and :root tokens are never restyled. */

/* The masked digits of the caller's number (U+2022 only): the display fonts' bullets are tiny or sit high,
   so that one character borrows the system sans. If none of these fonts exists, the page font's bullet is used. */
@font-face { font-family: "at-dot"; src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"); unicode-range: U+2022; }
@font-face { font-family: "at-dot-lg"; src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"); unicode-range: U+2022; size-adjust: 115%; }

/* Two columns hung from one line: both captions share a baseline. The call is the long piece, so the summary
   travels beside it while the visitor reads (sticky, under the header) and comes to rest level with the call's end. */
.at-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  max-width: 1060px;
  margin: 64px auto 24px; /* the bottom margin keeps the cards' shadow inside the green band */
  text-align: start;
}
.at-col { display: grid; gap: 18px; align-content: start; min-width: 0; }
.at-col-sum { position: sticky; top: 112px; }
.at-cap { margin: 0; font: 400 11.5px/1.4 "Inter", sans-serif; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-hi); }

/* Both cards take the homepage browser frame's treatment: 6px radius, the same long soft shadow. */
.at-call, .at-sum { border-radius: 6px; color: var(--ink); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(244, 239, 228, .14); }
.at-call { background: #FFFFFF; padding: 34px 40px 32px; }
.at-sum { background: var(--ivory); padding: 30px 32px 28px; }

/* The call */
.at-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.at-status { display: inline-flex; align-items: center; gap: 10px; font: 400 11px/1.4 "Inter", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); }
.at-status i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.at-tag { font: 400 10.5px/1 "Inter", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 7px 10px 6px; }
.at-num { margin: 26px 0 0; font: 400 34px/1.1 "at-dot", var(--f-serif); letter-spacing: .01em; white-space: nowrap; }
.at-biz { margin: 8px 0 0; font: 400 14px/1.5 var(--f-sans); color: var(--muted); }
.at-wave { display: block; width: 100%; height: 40px; margin: 28px 0 30px; fill: none; stroke: var(--green); stroke-width: 2; }
.at-wave path { vector-effect: non-scaling-stroke; }

.at-script { list-style: none; margin: 0; padding: 28px 0 0; border-top: 1px solid var(--line); display: grid; gap: 22px; }
.at-line { display: grid; gap: 4px; padding-inline-start: 18px; border-inline-start: 1px solid var(--line); }
.at-bot { border-inline-start-color: var(--green); }
.at-who { font: 400 10.5px/1.6 "Inter", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #8A877F; }
.at-bot .at-who { color: var(--green); }
/* Both speakers talk Darija: Arabic script in every language. On wide screens each sentence keeps its own line
   (the \n in the strings, shown from 641px) and the translation breaks at the same place, so the two read line for line.
   The Arabic block shrinks to its longest sentence and sits on the page's reading edge, with its lines starting
   together on the right, as Arabic is read. On phones the same text flows as one paragraph. */
.at-ar { justify-self: start; width: -webkit-fit-content; width: fit-content; max-width: 100%; font: 400 21px/1.7 "Amiri", "IBM Plex Sans Arabic", serif; color: var(--ink); text-align: start; text-wrap: pretty; }
.at-tr { font: 400 14px/1.55 var(--f-sans); color: var(--muted); text-wrap: pretty; }
@media (min-width: 641px) {
  .at-ar, .at-tr { white-space: pre-line; }
  .at-ar { text-wrap: wrap; } /* "pretty" would break a sentence that exactly fills its shrink-wrapped box */
}

.at-done { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.at-pill { font: 500 10.5px/1 "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; background: var(--green); color: var(--ivory); padding: 10px 16px; }
.at-sent { font: 400 13px/1.4 var(--f-sans); color: var(--muted); }

/* The summary, as the owner receives it */
.at-sum-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; font: 400 10.5px/1.4 "Inter", sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.at-sum-t { color: var(--gold-text); }
.at-sum-time { color: #8A877F; letter-spacing: .12em; }
.at-sum-h { margin: 16px 0 0; font: 400 30px/1.15 var(--f-serif); letter-spacing: -.005em; }
.at-dl { margin: 22px 0 0; }
.at-dl div { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(22, 22, 22, .1); }
.at-dl dt { font: 400 10.5px/1.4 "Inter", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #8A877F; }
.at-dl dd { margin: 0; font: 400 15px/1.5 var(--f-sans); text-wrap: balance; }
.at-dl [dir="ltr"] { white-space: nowrap; font-family: "at-dot-lg", var(--f-sans); }
.at-note { margin: 0; padding-top: 14px; border-top: 1px solid rgba(22, 22, 22, .1); font: 400 13px/1.5 var(--f-sans); color: var(--green); }

/* FAQ: the two long answers are short paragraphs (f2.a, f5.a); a half-line between them, the usual space after the last. */
.at-a p { text-wrap: pretty; }
.at-a p:not(:last-child) { margin-bottom: 14px; }

/* Arabic: no letter-spacing or capitals on Arabic script, slightly larger sizes for the Naskh text. */
[dir="rtl"] .at-cap, [dir="rtl"] .at-status, [dir="rtl"] .at-tag, [dir="rtl"] .at-who, [dir="rtl"] .at-pill,
[dir="rtl"] .at-sum-head, [dir="rtl"] .at-sum-time, [dir="rtl"] .at-dl dt {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif; letter-spacing: 0; text-transform: none;
}
[dir="rtl"] .at-cap { font-size: 15px; font-weight: 500; }
[dir="rtl"] .at-status, [dir="rtl"] .at-who, [dir="rtl"] .at-sum-head, [dir="rtl"] .at-dl dt { font-size: 13.5px; }
[dir="rtl"] .at-tag, [dir="rtl"] .at-pill { font-size: 13px; }
[dir="rtl"] .at-ar { font-size: 22px; }
[dir="rtl"] .at-tr { font-size: 15px; }
[dir="rtl"] .at-sum-h { line-height: 1.5; letter-spacing: 0; }
[dir="rtl"] .at-dl dd { font-size: 16px; }

@media (min-width: 961px) and (max-width: 1100px) {
  .at-call { padding-inline: 32px; }
  .at-ar, [dir="rtl"] .at-ar { font-size: 20px; } /* the longest sentence still fits on one line */
  .at-sum-h { font-size: 27px; } /* "Nouveau rendez-vous" stays on one line in the narrower column */
}
@media (max-width: 960px) {
  .at-stage { grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 580px; }
  .at-col-sum { position: static; }
}
@media (max-width: 760px) {
  .at-stage { margin-top: 44px; }
}
@media (max-width: 560px) {
  .at-stage { margin-bottom: 16px; }
  .at-call, .at-sum { box-shadow: 0 36px 70px -36px rgba(0, 0, 0, .55), 0 0 0 1px rgba(244, 239, 228, .14); }
  .at-call { padding: 26px 22px 24px; }
  .at-sum { padding: 24px 22px 20px; }
  .at-num { margin-top: 22px; font-size: 27px; }
  .at-wave { margin: 22px 0 24px; }
  .at-script { padding-top: 24px; gap: 20px; }
  .at-line { padding-inline-start: 14px; }
  .at-ar { font-size: 19px; }
  .at-sum-h { font-size: 26px; }
  .at-dl div { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  [dir="rtl"] .at-ar { font-size: 20px; }
}