/* H&C — page Contact (/contact/).
   Se charge après fiche.css (sections `.fb`, hero `.fh`, projecteur `.rig`, rideau `.diag`, pied de page).
   Choix de l'utilisateur sur la planche du 2026-10-15 : haut de page « le guichet » (piste 1).
   Les sections suivent docs/03-contenus/07-contact-faq.md §1 :

   1. Hero · `.cth`  : mur clair, projecteur sur rail ; à gauche titre, promesse, deux boutons (WhatsApp,
                       rendez-vous) et coordonnées ; à droite le formulaire complet dans une carte blanche
                       (objet → équipe destinataire, champs conditionnels, `?objet=`). contact.js.
   2. Rendez-vous · `.ctr` : 20 minutes avec un conseiller, sélecteur de créneaux (maquette de l'outil ❓).
   3. Nous trouver · `.ctm` : plan schématique, carte Google après accord, horaires, visite, ailleurs.
   3 bis. Nos représentations · `.ctp` : les 14 pays, téléphones et e-mails (calendrier 2027), Dakar en carte jaune.
   4. Réseaux · `.ctn` : LinkedIn, Facebook, Instagram, YouTube.
   5. FAQ · `.ctf` (le gabarit `.diag`) : trois questions + lien vers /faq/, puis le pied de page.
   États partagés : `.cts` (confirmation du formulaire et du rendez-vous).
   ≤ 1000 px : tout s'empile ; ≤ 560 px : champs et créneaux en une colonne. */

:root { --ct-ink-soft: #4b5569; --ct-line: rgb(22 33 61 / 0.12); }

/* Bouton plein « encre » : le pendant sombre du bouton jaune (pas de contour). */
.btn--ink { padding-left: 7px; background: var(--ink); color: #fff; }
.btn--ink:hover { background: #26365e; }
.btn--ink .btn__icon { background: rgb(255 255 255 / 0.14); }
.btn--ink:hover .btn__icon { background: rgb(255 255 255 / 0.22); transform: rotate(-10deg); }
.btn--ink .btn__label { flex: 1; text-align: left; }

.cth :is(a, button, input, select, textarea):focus-visible,
.ctr :is(a, button, input, select, textarea):focus-visible,
.ctm :is(a, button):focus-visible,
.ctn a:focus-visible,
.ctf :is(a, summary):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* =========================================================
   1. Hero — le guichet
   ========================================================= */
.cth { --rig-x: 24%; --rig-y: 12px; --rig-w: 72px; --rig-tilt: 0deg; padding-bottom: clamp(48px, 6vw, 96px); }
.cth .cone { --spread: 20deg; --throw: 700px; }
.cth__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  column-gap: clamp(28px, 5.5vw, 88px);
  margin-top: clamp(14px, 2.2vw, 30px);
}
.cth__copy { display: grid; justify-items: start; gap: 18px; padding-top: clamp(4px, 1.4vw, 20px); }
.cth__copy .stitle { max-width: 11ch; font-size: clamp(2.3rem, 4.1vw, 3.6rem); }
.cth__copy .fb__lead { max-width: 42ch; font-size: clamp(1.0625rem, 1.4vw, 1.2rem); color: #3d475c; }
.cth__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.cth__co { display: grid; gap: 14px; width: 100%; margin: clamp(10px, 2vw, 26px) 0 0; padding: clamp(18px, 2vw, 26px) 0 0; border-top: 1px solid var(--ct-line); list-style: none; }
.cth__co li { display: flex; align-items: center; gap: 14px; }
.cth__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; }
.cth__ic svg { width: 20px; height: 20px; stroke-width: 1.8; }
.cth__co li > span:last-child { display: grid; gap: 1px; min-width: 0; }
.cth__co small { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #5b6478; }
.cth__co a { font-size: 1.0625rem; font-weight: 500; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.cth__co a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; text-decoration-thickness: 2px; }

.cth__card, .ctr__card { color: var(--ink); }
.cth__card {
  position: relative;
  padding: clamp(22px, 3vw, 40px);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 0 40px 80px -40px rgb(22 33 61 / 0.5);
}
.cth__form { gap: 16px; }
.cth__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin-bottom: 2px; }
.cth__ct { margin: 0; font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 500; letter-spacing: -0.015em; }
.cth__sub { margin: 0; font-size: 0.875rem; color: #5b6478; }
.cth__to { display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 0; font-size: 0.875rem; line-height: 1.4; color: #5b6478; }
.cth__to::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.42em; border-radius: 50%; background: rgb(22 33 61 / 0.25); transition: background-color 0.3s; }
.cth__to.is-set { color: var(--ink); font-weight: 500; }
.cth__to.is-set::before { background: var(--gold); }
.cth__hint { margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--wall); font-size: 0.875rem; line-height: 1.45; color: var(--ct-ink-soft); }
.cth__hint a { color: var(--ink); font-weight: 500; text-underline-offset: 4px; }
.cth__form .form__f em { margin-left: 6px; font-style: normal; font-weight: 400; color: #8791a5; }
.cth__form .form__f select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316213d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.cth__form .form__f textarea { min-height: 128px; }
.cth__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cth__form .diag__go { margin-top: 4px; }
.cth__form .diag__go .btn { min-height: 54px; }

/* =========================================================
   Confirmations (formulaire, rendez-vous)
   ========================================================= */
.cts { display: grid; justify-items: start; gap: 14px; outline: none; }
.cts__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.cts__ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cts__t { margin: 6px 0 0; font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.cts__d { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--ct-ink-soft); }
.cts__d b { color: var(--ink); font-weight: 600; }
.cts__when { display: grid; gap: 2px; width: 100%; margin: 4px 0; padding: 16px 20px; border-radius: 18px; background: var(--wall); }
.cts__when b { font-size: 1.125rem; font-weight: 600; }
.cts__when span { font-size: 0.9375rem; color: var(--ct-ink-soft); }
.cts__add { display: grid; gap: 10px; width: 100%; }
.cts__add > p { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5b6478; }
.cts__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.cts__link {
  appearance: none;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgb(22 33 61 / 0.3);
  text-underline-offset: 5px;
  cursor: pointer;
}
.cts__link:hover { text-decoration-color: currentColor; }

/* =========================================================
   2. Rendez-vous — vingt minutes avec un conseiller
   ========================================================= */
.ctr { --rig-x: 24%; --rig-y: 12px; --rig-w: 72px; --rig-tilt: -5deg; padding-bottom: clamp(64px, 8vw, 120px); }
.ctr .cone { --spread: 20deg; --throw: 820px; }
.ctr__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(28px, 6vw, 110px);
}
.ctr__tx { display: grid; justify-items: start; gap: 18px; }
.ctr__ex { margin: 6px 0 0; font-size: 0.8125rem; line-height: 1.45; color: rgb(255 255 255 / 0.55); }
.ctr__card { padding: clamp(22px, 3vw, 40px); border-radius: 28px; background: var(--paper); box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.7); }
.ctr__form { display: grid; gap: 16px; }
.ctr__head { display: flex; align-items: center; gap: 14px; }
.ctr__ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.ctr__ic svg { width: 22px; height: 22px; stroke-width: 1.8; }
.ctr__head h3 { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -0.015em; }
.ctr__head p { margin: 2px 0 0; font-size: 0.875rem; color: #5b6478; }

.ctr__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ctr__day {
  appearance: none;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 12px 4px;
  border: 0;
  border-radius: 18px;
  background: var(--wall);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.3s var(--ease-out);
}
.ctr__day small { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.ctr__day b { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 500; line-height: 1.1; }
.ctr__day span { font-size: 0.8125rem; opacity: 0.7; }
.ctr__day:hover { background: #d6dce8; }
.ctr__day.is-on { background: var(--ink); color: #fff; }
.ctr__day.is-on:hover { background: var(--ink); }

.ctr__slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ctr__slot {
  appearance: none;
  padding: 12px 6px;
  border: 0;
  border-radius: 999px;
  background: var(--wall);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s;
}
.ctr__slot:hover:not(:disabled) { background: #d6dce8; }
.ctr__slot[aria-pressed="true"], .ctr__slot[aria-pressed="true"]:hover:not(:disabled) { background: var(--gold); }
.ctr__slot:disabled { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }
.ctr__pick { margin: 0; min-height: 1.5em; font-size: 0.9375rem; color: #5b6478; }
.ctr__pick.is-set { color: var(--ink); font-weight: 600; }
.ctr__pick.is-err { color: #b3261e; font-weight: 500; }

/* =========================================================
   3. Nous trouver
   ========================================================= */
.ctm__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: stretch; gap: clamp(20px, 3vw, 40px); margin-top: clamp(26px, 3.6vw, 48px); }
.ctm__map { position: relative; min-height: 460px; overflow: hidden; border-radius: 28px; background: var(--night); }
.ctm__frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.ctm__side { display: grid; align-content: start; gap: 14px; }
.ctm__card { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: start; gap: 16px; padding: 22px; border-radius: 24px; background: var(--wall); }
.ctm__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff; }
.ctm__ic svg { width: 21px; height: 21px; stroke-width: 1.8; }
.ctm__card h3 { margin: 2px 0 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #5b6478; }
.ctm__card p { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--ct-ink-soft); }
.ctm__card .ctm__big { font-size: 1.25rem; font-weight: 500; color: var(--ink); }
.ctm__open { display: flex; align-items: center; gap: 8px; margin-top: 8px !important; font-size: 0.9375rem !important; font-weight: 500; color: var(--ink) !important; }
.ctm__open:empty { display: none; }
.ctm__open::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #9aa3b5; }
.ctm__open.is-open::before { background: #2a9d5c; box-shadow: 0 0 0 4px rgb(42 157 92 / 0.18); }
.ctm__card .ctm__ex { margin-top: 10px; font-size: 0.8125rem; color: #7a8498; }
.ctm__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 14px; }
.ctm__link { font-size: 1rem; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: rgb(22 33 61 / 0.3); text-underline-offset: 5px; }
.ctm__link:hover { text-decoration-color: currentColor; }

/* =========================================================
   3 bis. Nos représentations — le répertoire des 14 pays (calendrier 2027)
   Nuit + projecteur sur rail ; Dakar (siège) en carte jaune sur deux colonnes, puis une carte par pays.
   ========================================================= */
.ctp { --rig-x: 78%; --rig-y: 12px; --rig-w: 72px; --rig-tilt: 5deg; padding-bottom: clamp(64px, 8vw, 120px); }
.ctp .cone { --spread: 20deg; --throw: 820px; }
.ctp__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: clamp(26px, 3.6vw, 48px) 0 0; padding: 0; list-style: none; }
.ctp__c { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 22px; border-radius: 24px; background: rgb(255 255 255 / 0.07); color: #fff; }
.ctp__c h3 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
.ctp__k { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.ctp__ad { margin: 0 0 6px; font-size: 0.9375rem; line-height: 1.4; }
.ctp__tel { display: grid; gap: 2px; margin: 0 0 8px; padding: 0; list-style: none; }
.ctp__tel a { font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; color: inherit; text-decoration: none; }
.ctp__tel a:hover, .ctp__ml:hover { text-decoration: underline; text-underline-offset: 4px; }
.ctp__ml { font-size: 0.9375rem; color: var(--gold-strong); overflow-wrap: anywhere; text-decoration: none; }
.ctp__c--hq { grid-column: span 2; background: var(--gold); color: var(--ink); }
.ctp__c--hq .ctp__ml { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.ctp__notes { display: grid; gap: 8px; margin-top: 22px; }
.ctp__ex { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: rgb(255 255 255 / 0.6); }

/* =========================================================
   4. Réseaux sociaux
   ========================================================= */
.ctn { padding-block: clamp(56px, 7vw, 96px); }
.ctn__in { display: grid; gap: clamp(26px, 3.6vw, 44px); }
.ctn__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ctn__tile {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.ctn__tile b { font-size: 1.125rem; font-weight: 500; }
.ctn__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; transition: background-color 0.25s, color 0.25s; }
.ctn__ic svg { width: 24px; height: 24px; stroke-width: 1.7; }
.ctn__go svg { width: 18px; height: 18px; color: #5b6478; stroke-width: 1.8; }
.ctn__tile:hover { transform: translateY(-4px); box-shadow: 0 22px 36px -22px rgb(22 33 61 / 0.5); }
.ctn__tile:hover .ctn__ic { background: var(--gold); color: var(--ink); }

/* =========================================================
   5. FAQ courte (le rideau devant le pied de page)
   ========================================================= */
.ctf { min-height: 0; padding-bottom: clamp(72px, 9vw, 130px); }
.ctf__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.ctf__card { padding-block: clamp(10px, 1.4vw, 18px); }
.ctf__q { border-top: 1px solid var(--ct-line); }
.ctf__q:first-child { border-top: 0; }
.ctf__q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.2rem);
  font-weight: 500;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.ctf__q summary::-webkit-details-marker { display: none; }
.ctf__q summary::after {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wall) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316213d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: background-color 0.25s, rotate 0.35s var(--ease-out);
}
.ctf__q[open] summary::after { rotate: 45deg; background-color: var(--gold); }
.ctf__a p { margin: 0 0 20px; max-width: 52ch; font-size: 1rem; line-height: 1.55; color: var(--ct-ink-soft); }
.ctf__a a { color: var(--ink); font-weight: 500; text-underline-offset: 4px; }

/* =========================================================
   Tablette et mobile
   ========================================================= */
@media (max-width: 1000px) {
  .cth__grid, .ctr__grid, .ctm__grid { grid-template-columns: minmax(0, 1fr); }
  .cth__grid { row-gap: clamp(28px, 5vw, 44px); }
  .cth__copy .stitle { max-width: none; }
  .cth__copy .fb__lead { max-width: 56ch; }
  .ctm__map { min-height: 380px; }
  .ctn__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ctp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctp__c:last-child { grid-column: span 2; }
}
@media (max-width: 820px) {
  .cth, .ctr, .ctp { --rig-x: 62%; --rig-w: 62px; --rig-tilt: 0deg; }
  .ctr .cone, .cth .cone, .ctp .cone { --spread: 14deg; }
}
@media (max-width: 560px) {
  .cth__btns { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cth__btns .btn { justify-content: flex-start; }
  .cth__card, .ctr__card { padding: 20px 18px; border-radius: 24px; }
  .ctr__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ctr__days { gap: 6px; }
  .ctr__day { padding: 10px 2px; border-radius: 16px; }
  .ctm__map { min-height: 420px; }
  .ctn__tiles { grid-template-columns: minmax(0, 1fr); }
  .ctp__list { grid-template-columns: minmax(0, 1fr); }
  .ctp__c--hq, .ctp__c:last-child { grid-column: auto; }
  .cts__btns { gap: 10px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ctn__tile, .ctr__day, .ctf__q summary::after { transition: none; }
}