/* Contact: WhatsApp first, a short form, then how to come to the nursery. */
.ct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 96px); align-items: start; padding-block: clamp(8px, 2vh, 24px) clamp(64px, 10vh, 120px); }
.ct__ways { display: grid; gap: 28px; }
.wa { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 4px; align-items: center; padding: clamp(24px, 2.6vw, 36px); border-radius: 16px; background: var(--zellige); color: #f6f6f2; text-decoration: none; transition: background-color .25s; }
.wa:hover { background: var(--zellige-deep, #0a3a2d); }
.wa:focus-visible { outline: 3px solid var(--zellige); outline-offset: 4px; }
.wa svg { grid-row: span 3; align-self: start; inline-size: 44px; block-size: 44px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wa__t { font: 400 clamp(30px, 2.8vw, 42px)/1.05 var(--font-serif); letter-spacing: -.02em; }
.wa__n { font: 500 17px/1.3 var(--font-text); }
.wa__s { font: 400 14px/1.4 var(--font-text); color: rgba(246,246,242,.75); }
.wa__s::before { content: ""; display: inline-block; inline-size: 8px; block-size: 8px; margin-inline-end: 8px; border-radius: 50%; background: #9fd0b4; vertical-align: 1px; }
.wa__s.is-closed::before { background: rgba(246,246,242,.45); }
.ways { list-style: none; margin: 0; padding: 0; display: grid; }
.ways li { display: flex; gap: 14px; align-items: flex-start; padding-block: 16px; border-block-end: 1px solid rgba(18,20,18,.12); }
.ways li:first-child { border-block-start: 1px solid rgba(18,20,18,.12); }
.ways svg { inline-size: 24px; block-size: 24px; flex: none; fill: none; stroke: var(--zellige); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ways b { display: block; font: 500 14px/1.3 var(--font-text); opacity: .65; }
.ways a { font: 400 22px/1.3 var(--font-serif); color: var(--encre); text-decoration: none; }
.ways a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.ct__form { padding: clamp(24px, 3vw, 40px); border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgba(18,20,18,.06), 0 20px 50px -30px rgba(18,20,18,.35); }
.cf, .cf-done { display: grid; gap: 18px; }
.cf[hidden], .cf-done[hidden], .ct [hidden] { display: none; }
.cf .b { justify-self: start; }
.cf label small { font-weight: 400; opacity: .6; }
.cf .small a { color: inherit; }
.cf-done { justify-items: start; outline: none; animation: doneIn .5s cubic-bezier(.16,1,.3,1); }
.cf-done > svg { inline-size: 44px; block-size: 44px; padding: 10px; border-radius: 50%; background: var(--menthe); fill: none; stroke: var(--zellige); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
@keyframes doneIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .cf-done { animation: none; } }

.venir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); align-items: center; scroll-margin-top: 0; }
.venir__txt { display: grid; gap: 28px; justify-items: start; }
.vi { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; font: 400 17px/1.45 var(--font-text); }
.vi li { display: flex; gap: 14px; align-items: flex-start; }
.vi b { font-weight: 600; }
.vi svg, .venir .b svg { inline-size: 22px; block-size: 22px; flex: none; fill: none; stroke: var(--zellige); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.venir .b--z svg { stroke: currentColor; }
.venir__acts { display: flex; flex-wrap: wrap; gap: 12px; }
.map { margin: 0; display: grid; gap: 10px; }
.map svg { display: block; inline-size: 100%; block-size: auto; border-radius: 12px; box-shadow: 0 1px 0 rgba(18,20,18,.06), 0 20px 50px -30px rgba(18,20,18,.35); }
.map figcaption { font: 400 13px/1.3 var(--font-text); opacity: .6; }
.map text { font-family: var(--font-text); }
.map__sea { font-size: 15px; font-style: italic; fill: #4f7178; font-family: var(--font-serif) !important; }
.map__city { font-size: 24px; fill: #121412; font-family: var(--font-serif) !important; }
.map__lbl { font-size: 14px; fill: rgba(18,20,18,.6); }
.map__us { font-size: 15px; font-weight: 600; fill: #f6f6f2; }
.map__n text { font-size: 13px; font-weight: 600; fill: #121412; }
@media (prefers-reduced-motion: no-preference) { .map__pin circle:first-child { animation: pulse 2.6s ease-out infinite; transform-origin: center; transform-box: fill-box; } }
@keyframes pulse { 0% { transform: scale(.6); opacity: .35; } 100% { transform: scale(1.6); opacity: 0; } }

@media (max-width: 900px) { .ct, .venir { grid-template-columns: minmax(0, 1fr); } }

/* right-to-left: phone numbers and e-mail addresses are typed left to right */
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }
/* the map labels are placed from their left edge: keep that anchor in Arabic */
[dir="rtl"] .map text { direction: ltr; }
