/* ═══════════════════════════════════════════════════════════════
   CONTACT · 12/10/2026
   L'ouverture vient du modèle des pages d'offre (offre-design.css).
   Le formulaire est celui de l'accueil (#appel, sections.css).
   Ici : les lieux, et la grille des expertises.
   ═══════════════════════════════════════════════════════════════ */

.ct-ouverture .ouverture-titre { max-width: 14ch; }

/* ─── Le mot du titre : le pointillé de l'accueil, un repère de destination ───
   Posé d'emblée (pas d'animation au chargement : c'est le plus grand
   élément du premier écran, cf. offre-design.css). Le mouvement ne vient
   qu'au survol. */
.ct-titre em {
  position: relative;
  display: inline-block;
  margin-left: 0.06em;
  padding: 0.02em 0.24em 0.06em;
  border-radius: 0.2em;
  background:
    linear-gradient(90deg, var(--or) 55%, transparent 0) 0 0 / 18px 3px repeat-x,
    linear-gradient(90deg, var(--or) 55%, transparent 0) 0 100% / 18px 3px repeat-x,
    linear-gradient(var(--or) 55%, transparent 0) 0 0 / 3px 18px repeat-y,
    linear-gradient(var(--or) 55%, transparent 0) 100% 0 / 3px 18px repeat-y,
    #fff;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.35);
  transform: rotate(-2.5deg);
  transition: transform 600ms var(--ressort), box-shadow 600ms ease;
  cursor: default;
}
/* Le repère : un losange doré cerclé, épinglé au coin comme une destination */
.ct-repere {
  position: absolute;
  top: -0.22em; right: -0.22em;
  width: 0.42em; height: 0.42em;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.5);
  transition: transform 600ms var(--ressort);
}
.ct-repere::before {
  content: '';
  position: absolute;
  inset: 32%;
  background: var(--or);
  transform: rotate(45deg);
}
.ct-repere::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(209, 163, 38, 0.6);
}
@keyframes ct-defile { to { background-position: 18px 0, -18px 100%, 0 -18px, 100% 18px, 0 0; } }
@keyframes ct-onde { from { box-shadow: 0 0 0 0 rgba(209, 163, 38, 0.6); } to { box-shadow: 0 0 0 0.3em rgba(209, 163, 38, 0); } }
.ct-titre em:hover {
  transform: rotate(0deg) translateY(-0.04em);
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.45);
  animation: ct-defile 900ms linear infinite;
}
.ct-titre em:hover .ct-repere { transform: translate(0.08em, -0.08em) scale(1.12); }
.ct-titre em:hover .ct-repere::after { animation: ct-onde 1.2s ease-out infinite; }

/* ─── Les trois repères de l'ouverture : le survol de la page ───
   Pas la sélection « Figma » du modèle Web design (cadre et poignées) :
   le pointillé arrondi du mot « aller. », une légère élévation et le
   repère en losange épinglé au coin. */
.ct-ouverture .od-propriete { border-radius: 14px; transition: background-color 0.3s ease, box-shadow 0.4s ease, transform 0.5s var(--ressort); }
.ct-ouverture .od-propriete::before {
  inset: 0;
  border-radius: inherit;
  transform: none;
  background:
    linear-gradient(90deg, var(--or) 55%, transparent 0) 0 0 / 12px 1.5px repeat-x,
    linear-gradient(90deg, var(--or) 55%, transparent 0) 0 100% / 12px 1.5px repeat-x,
    linear-gradient(var(--or) 55%, transparent 0) 0 0 / 1.5px 12px repeat-y,
    linear-gradient(var(--or) 55%, transparent 0) 100% 0 / 1.5px 12px repeat-y;
}
.ct-ouverture .od-propriete .od-propriete-icone::after {
  content: '';
  position: absolute;
  top: 8px; right: 10px;
  width: 7px; height: 7px;
  background: var(--or);
  opacity: 0;
  transform: rotate(45deg) scale(0.4);
  transition: opacity 0.3s ease, transform 0.5s var(--ressort);
}
.ct-ouverture .od-propriete-icone { position: static; }
.ct-ouverture .od-propriete:hover {
  background: #fff;
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}
.ct-ouverture .od-propriete:hover::before { animation: ct-defile-fin 900ms linear infinite; }
.ct-ouverture .od-propriete:hover .od-propriete-icone { transform: none; }
.ct-ouverture .od-propriete:hover .od-propriete-icone::after { opacity: 1; transform: rotate(45deg) scale(1); }
@keyframes ct-defile-fin { to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; } }

/* ─── Nous trouver ─── */
.ct-trouver-titre { max-width: 18ch; margin: 0 0 var(--e7); }
.ct-studios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); }
.ct-studio {
  display: grid;
  overflow: hidden;
  border-radius: var(--r4);
  background: var(--noir-2, #141414);
  box-shadow: inset 0 0 0 1px var(--trait-nuit);
  color: var(--sur-noir);
  transition: transform 600ms var(--ressort), box-shadow 400ms ease;
}
.ct-studio:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.6), 0 40px 80px -50px rgba(209, 163, 38, 0.5); }
.ct-plan { position: relative; display: block; height: 220px; pointer-events: auto; overflow: hidden; background: #1D1D1D; }
.ct-plan iframe { display: block; width: 100%; height: calc(100% + 180px); margin-top: -90px; border: 0; filter: saturate(0.85); transition: filter 400ms ease; }
.ct-studio:hover .ct-plan iframe { filter: none; }
.ct-studio-corps { display: grid; gap: 6px; padding: var(--e5) var(--e5) var(--e5); }
.ct-studio-corps .donnee { color: var(--or); }
.ct-studio-ville { font-size: var(--t4); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.ct-studio-adresse { color: var(--sur-noir-2); font-size: var(--p-4); }
.ct-studio-pied { display: flex; align-items: center; justify-content: space-between; margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--trait-nuit); }
.ct-heure .horloge { display: inline-flex; align-items: center; gap: 8px; color: var(--sur-noir-2); font-size: var(--p-4); font-variant-numeric: tabular-nums; }
.ct-heure .horloge-h { font-size: inherit; font-weight: 500; letter-spacing: 0; line-height: 1; color: var(--sur-noir); }
.ct-heure-bloc { display: inline-flex; align-items: baseline; gap: 8px; }
.ct-heure-bloc small { color: var(--sur-noir-2); font-size: var(--p-5); }
.ct-heure i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.18); }
.ct-aller { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; color: var(--or); font-size: var(--p-4); font-weight: 500; }
.ct-aller svg, .ct-canal-aller svg, .ct-xp-aller svg { width: 16px; height: 16px; transition: transform 400ms var(--ressort); }
.ct-aller:hover svg { transform: translate(2px, -2px); }
.ct-aller:hover { color: #F2D27A; }

.ct-canaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); margin-top: var(--e5); }
/* Trois canaux (e-mail, téléphone, fiche Google, 21/10/2026) : le dernier prend toute la ligne, l'adresse e-mail ne tient pas sur un tiers de largeur. */
.ct-canal:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ct-canal { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: var(--e4); padding: var(--e4) var(--e5); border-radius: var(--r4); box-shadow: inset 0 0 0 1px var(--trait-nuit); color: var(--sur-noir); text-decoration: none; transition: background 300ms ease, box-shadow 300ms ease; }
.ct-canal:hover { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.6); }
.ct-canal-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(209, 163, 38, 0.12); color: var(--or); }
.ct-canal-ic svg { width: 22px; height: 22px; }
.ct-canal-ic--g { background: #fff; }
.ct-canal-ic--g img { width: 26px; height: 26px; }
.ct-canal-texte { display: grid; gap: 3px; min-width: 0; }
.ct-canal-texte .donnee { color: var(--or); }
.ct-canal-texte b { display: flex; align-items: center; gap: 8px; overflow: hidden; font-size: var(--p-2); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ct-canal-texte small { color: var(--sur-noir-2); font-size: var(--p-5); }
.ct-etoiles { display: inline-flex; gap: 2px; }
.ct-etoiles i { width: 13px; height: 13px; background: var(--or); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ct-canal-aller { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--trait-nuit); color: var(--or); transition: background 300ms ease, color 300ms ease; }
.ct-canal:hover .ct-canal-aller { background: var(--or); color: #111; }

/* ─── Nos expertises : trois familles, des rangées à flèche ─── */
.ct-xp-titre { max-width: 18ch; margin: 0 0 var(--e7); }
.ct-familles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e6); align-items: start; }
.ct-famille { display: grid; }
.ct-famille-titre { display: flex; align-items: baseline; gap: 10px; margin: 0 0 var(--e3); color: var(--encre-3); font-size: var(--p-5); letter-spacing: 0.08em; text-transform: uppercase; }
.ct-famille-num { color: var(--or-lisible); }
.ct-xp {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4) 0;
  border-top: 1px solid var(--trait);
  color: var(--encre);
  text-decoration: none;
}
.ct-xp:last-child { border-bottom: 1px solid var(--trait); }
.ct-xp::before { content: ''; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--or); transition: width 600ms var(--ressort); }
.ct-xp:hover::before { width: 100%; }
.ct-xp-texte { display: grid; gap: 3px; }
.ct-xp-nom { font-size: var(--p-2); font-weight: 500; line-height: 1.3; transition: color 250ms ease; }
.ct-xp-quoi { color: var(--encre-3); font-size: var(--p-4); }
.ct-xp-aller { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--trait); color: var(--or-lisible); transition: background 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.ct-xp:hover .ct-xp-nom { color: var(--or-lisible); }
.ct-xp:hover .ct-xp-aller { background: var(--or); box-shadow: none; color: #111; }
.ct-xp:hover .ct-xp-aller svg { transform: translate(2px, -2px); }

@media (max-width: 900px) {
  .ct-studios, .ct-canaux { grid-template-columns: minmax(0, 1fr); }
  .ct-familles { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
}
@media (prefers-reduced-motion: reduce) {
  .ct-titre em, .ct-titre em:hover, .ct-repere, .ct-repere::after, .ct-studio, .ct-xp::before, .ct-ouverture .od-propriete, .ct-ouverture .od-propriete::before { animation: none !important; transition: none !important; }
}

/* « Et bien plus » : la dernière ligne d'une famille, en retrait doré */
.ct-xp--plus .ct-xp-nom { color: var(--or-lisible); }
.ct-xp--plus .ct-xp-aller { background: color-mix(in srgb, var(--or) 14%, transparent); box-shadow: none; }