/* ============================================================
   EchoFirst — page Contact. Charger APRÈS echofirst.css ET pages.css :
   le héros réutilise .page-hero (pages.css), le corps réutilise
   section.sec / .sec-head / .lead / .eyebrow.

   Toutes les règles sont préfixées .ct- (ou qualifiées par .page-hero,
   qui n'est porté que par cette page) : aucune ne peut atteindre une
   autre page du site. Aucune règle de type non plus (pas de « .ct-card p »)
   — chaque paragraphe porte sa classe, pour qu'aucun bloc n'hérite en
   silence des marges ou de la taille d'un voisin.

   Principe de la page : c'est un ROUTEUR, pas un collecteur. La grille
   « .ct-routes » est donc l'élément dominant ; l'adresse e-mail reste
   accessible d'emblée (lien dans l'intro du héros) mais ne crie pas.
   ============================================================ */

/* ------------------------------------------------------------
   HÉROS — adresse cliquable dans l'intro.
   Volontairement PAS de gros bouton ici : un .btn teal dans le héros
   capterait le clic avant que la grille de raccourcis n'ait été lue,
   et remplirait la boîte de questions déjà traitées ailleurs.
   ------------------------------------------------------------ */
.ct-mail-inline{
  color:#fff;font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(79,210,224,.55);text-decoration-thickness:1.5px;
  text-underline-offset:4px;transition:text-decoration-color .2s;
}
.ct-mail-inline:hover{text-decoration-color:var(--teal-vif);}
.ct-mail-inline:focus-visible{outline:3px solid var(--teal-vif);outline-offset:3px;border-radius:3px;}

/* ------------------------------------------------------------
   LES QUATRE RACCOURCIS
   Grille 2×2 et non 4×1 : à 1140 px, quatre colonnes laisseraient
   ~250 px de texte par carte (≈ 30 caractères par ligne) ; deux
   colonnes en donnent ~530 px, soit une mesure lisible.
   ------------------------------------------------------------ */
.ct-routes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px;}
@media(max-width:760px){.ct-routes{grid-template-columns:1fr;gap:16px;margin-top:32px;}}

.ct-route{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
  border-radius:20px;padding:26px 28px 22px;box-shadow:0 1px 4px rgba(16,57,110,.06);
  transition:transform .22s var(--ease-out),box-shadow .22s,border-color .22s;
}
/* Levée au survol : mêmes valeurs que .fsess (pages.css) — un seul geste
   de carte sur tout le site. Sous (hover:hover) pour ne pas laisser l'état
   collé après un tap au doigt. */
@media(hover:hover){
  .ct-route:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(16,57,110,.13);border-color:#c4d2e6;}
}
/* Le clavier voit la même carte s'allumer que la souris (la carte n'est pas
   focalisable : c'est le lien qu'elle contient qui porte le focus). */
.ct-route:focus-within{border-color:var(--teal);box-shadow:0 12px 30px rgba(0,162,181,.14);}

.ct-num{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.14em;line-height:1;color:var(--teal-ink);}
.ct-route h3{margin:10px 0 0;font-size:18px;font-weight:700;color:var(--navy);line-height:1.32;text-wrap:pretty;}
.ct-desc{margin:10px 0 0;font-size:14.5px;color:var(--grey);line-height:1.65;text-wrap:pretty;}

/* margin-top:auto → les actions s'alignent au bas des quatre cartes,
   quelle que soit la longueur du texte. */
.ct-acts{margin:auto 0 0;padding-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:2px 24px;}
.ct-go{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-size:14.5px;font-weight:600;color:var(--teal-ink);text-decoration:none;
}
.ct-go .ct-arrow{transition:transform .2s var(--ease-out);}
@media(hover:hover){
  .ct-go:hover{text-decoration:underline;text-underline-offset:3px;}
  .ct-go:hover .ct-arrow{transform:translateX(3px);}
}
.ct-go:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px;}
/* Action secondaire : même gabarit, poids visuel moindre. */
.ct-go--soft{color:var(--grey);font-weight:500;}
@media(hover:hover){.ct-go--soft:hover{color:var(--navy);}}

/* ------------------------------------------------------------
   TEXTE ÉDITABLE (the_content() côté WordPress) — n'existe que si
   Félix en a saisi un ; la page est complète sans lui.
   ------------------------------------------------------------ */
section.sec.ct-note{padding:80px 0 0;}
.ct-note-bd{max-width:760px;font-size:16px;color:var(--grey);line-height:1.75;}
.ct-note-bd > * + *{margin-top:14px;}
.ct-note-bd h2,.ct-note-bd h3{color:var(--navy);}
.ct-note-bd a{color:var(--teal-ink);text-underline-offset:3px;}

/* ------------------------------------------------------------
   COORDONNÉES
   ------------------------------------------------------------ */
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;}
@media(max-width:820px){.ct-grid{grid-template-columns:1fr;gap:16px;margin-top:30px;}}

.ct-card{background:var(--tint);border:1px solid var(--border);border-radius:20px;padding:26px 28px;}
.ct-card h3{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);}

/* L'e-mail est le seul canal direct : sa carte est la seule teintée teal. */
.ct-card--mail{background:var(--teal-light);border-color:rgba(0,162,181,.22);}

/* Adresse + délai sur une même ligne tant qu'ils tiennent, l'un sous l'autre
   sinon. Rangée flex explicite plutôt qu'un enchaînement d'éléments inline :
   l'espacement reste le même dans les deux cas. */
.ct-mailrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:10px;}

/* padding vertical : porte le lien à 44 px de haut au plus petit corps
   (19 px sur mobile), soit la cible tactile visée ; le filet reste à 8 px
   sous la ligne de texte. */
.ct-mail{
  display:inline-block;padding:10px 0 8px;line-height:1.3;
  font-size:clamp(19px,2.4vw,24px);font-weight:700;letter-spacing:-.4px;
  color:var(--navy);text-decoration:none;overflow-wrap:break-word;
  border-bottom:2px solid rgba(0,162,181,.4);
  transition:color .2s,border-color .2s;
}
.ct-mail:hover{color:var(--teal-ink);border-bottom-color:var(--teal);}
.ct-mail:focus-visible{outline:3px solid var(--navy);outline-offset:4px;border-radius:4px;}

.ct-delay{
  display:inline-flex;align-items:center;gap:8px;margin:0;
  font-size:12.5px;font-weight:600;color:var(--teal-ink);
  background:#fff;border-radius:20px;padding:5px 13px;
}
.ct-delay .ct-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0;}

.ct-tip{margin:14px 0 0;font-size:14px;color:var(--grey);line-height:1.7;}

.ct-postal{margin:12px 0 0;font-style:normal;font-size:16px;font-weight:600;color:var(--navy);line-height:1.6;}

/* Avertissement « ce n'est pas un lieu de formation ». Le couple ambre du
   système (#FBEFD8 / filet #9a6a16) sert d'alerte ailleurs (places basses) ;
   ici le TEXTE est en --ink (12,6:1 sur ce fond) et non dans l'ambre foncé,
   qui n'atteint que 4,1:1 — insuffisant pour du texte courant. */
.ct-warn{
  margin:16px 0 0;padding:13px 16px;background:#FBEFD8;
  border-left:3px solid #9a6a16;border-radius:0 12px 12px 0;
  font-size:13.5px;line-height:1.6;color:var(--ink);
}
.ct-warn strong{color:var(--navy);font-weight:700;}
.ct-warn a{color:var(--navy);font-weight:600;text-underline-offset:3px;}

/* Identifiants administratifs : utiles aux services formation qui montent
   une convention, inutiles à tous les autres → bande discrète, en bas. */
.ct-ids{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px;
  padding:20px 26px;background:var(--grey-light);border:1px solid var(--border);border-radius:20px;
}
.ct-ids-lead{flex:1 1 240px;margin:0;font-size:13px;color:var(--grey);line-height:1.6;}
.ct-ids dl{display:flex;flex-wrap:wrap;gap:16px 32px;margin:0;}
.ct-ids dl > div{display:flex;flex-direction:column;gap:2px;}
.ct-ids dt{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);}
/* tabular-nums : ces chiffres se comparent et se recopient — les chasses
   doivent être régulières. */
.ct-ids dd{margin:0;font-size:14.5px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;}

/* ------------------------------------------------------------
   Accessibilité mouvement : la page ne porte que des transitions de
   survol ; en « reduce », elles disparaissent entièrement.
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .ct-route,.ct-go .ct-arrow,.ct-mail,.ct-mail-inline{transition:none;}
  .ct-route:hover{transform:none;}
  .ct-go:hover .ct-arrow{transform:none;}
}