/* Contact — GE/GO.
   Mêmes jetons que « Infos pratiques » et « Lieux » : on reste dans le même produit.

   Le parti pris : la page doit répondre à « comment vous joindre ? » en un coup d'œil, et à
   « comment réserver ? » avant qu'on ait le temps de se tromper. Deux blocs portent donc une
   couleur de fond — les coordonnées et le rappel réservation — et tout le reste est blanc.
   Aucune succession de cartes : les motifs de contact sont du texte, pas des produits. */

.ct{
  --c-encre:#0B0B0D; --c-texte:#2A2A2D; --c-doux:#5F6167;
  --c-trait:#E7E4DE; --c-filet:#EDEAE4; --c-tres-doux:#F7F6F3;
  --c-bleu:#F2F5F8; --c-bleu-trait:#D9E2EA;
  --c-accent:#e31f24; --c-accent-fonce:#c1121c; --c-accent-nuit:#a20f18;
  --c-r:12px; --c-r-s:10px;
  max-width:1040px;margin:0 auto;padding:0 0 56px;color:var(--c-texte);
  font-size:17px;line-height:1.62;
}
.ct :where(h1,h2,h3){color:var(--c-encre);text-wrap:balance}
.ct p{margin:0 0 .85em}
.ct p:last-child{margin-bottom:0}
/* Spécificité NULLE : les boutons gardent leur couleur sans surenchérir. */
:where(.ct-chapo,.ct-motif,.ct-piste,.ct-note,.ct-rappel,.ct-avert,.ct-reserver) a{
  color:var(--c-accent-fonce);text-underline-offset:3px;
}
:where(.ct-chapo,.ct-motif,.ct-piste,.ct-note,.ct-rappel,.ct-avert,.ct-reserver) a:hover{
  color:var(--c-accent);
}
.ct :where(a,button):focus-visible{
  outline:2px solid var(--c-accent);outline-offset:3px;border-radius:6px;
}

/* --------------------------------------------------------------------------------- HERO */
.ct-hero{padding:4px 0 0;max-width:60ch}
.ct-eyebrow{
  margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--c-accent);
}
.ct-h1{
  margin:0 0 .3em;font-size:clamp(2.2rem,5vw,3.1rem);line-height:1.05;
  letter-spacing:-.024em;font-weight:800;
}
.ct-chapo{font-size:1.1rem;color:var(--c-texte);margin:0}

/* ---------------------------------------------------------------------------- RUBRIQUES */
.ct-bloc{margin:46px 0 0;scroll-margin-top:150px}
.ct-h2{
  margin:0 0 16px;font-size:1.38rem;font-weight:800;letter-spacing:-.014em;
  padding-bottom:9px;border-bottom:1px solid var(--c-trait);
}

/* ------------------------------------------------------------------------ COORDONNÉES
   Le bloc le plus consulté de la page : il porte un fond, et l'avertissement sur les
   réservations est collé au numéro — jamais un téléphone seul qui dirait « appelez-nous ». */
.ct-coord{
  background:var(--c-tres-doux);border:1px solid var(--c-trait);
  border-radius:var(--c-r);padding:26px 28px;
}
.ct-coord .ct-h2{border-bottom-color:#DDD8CF}
.ct-coord-liste{margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 46px}
.ct-coord-item{display:flex;flex-direction:column;gap:3px;min-width:0}
.ct-coord-item dt{
  margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-doux);
}
.ct-coord-item dd{margin:0;min-width:0}
.ct-fort{
  font-size:1.18rem;font-weight:750;color:var(--c-accent-fonce);
  text-decoration:none;overflow-wrap:anywhere;
}
.ct-fort:hover{color:var(--c-accent-nuit);text-decoration:underline;text-underline-offset:4px}
.ct-avert{
  margin:20px 0 0;padding:12px 15px;border-radius:var(--c-r-s);
  background:#fff;border:1px solid var(--c-trait);
  font-size:.97rem;color:var(--c-texte);max-width:68ch;
}
.ct-coord-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}

/* Boutons — blanc sur rouge foncé : 6,2:1, au-delà du seuil AA pour du texte normal. */
.ct-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:0 22px;border-radius:999px;border:1px solid transparent;
  background:var(--c-accent-fonce);color:#fff;
  font-size:15.5px;font-weight:700;text-decoration:none;line-height:1;
  font-family:inherit;cursor:pointer;
}
.ct-btn:hover,.ct-btn:focus{background:var(--c-accent-nuit);color:#fff}
.ct-btn--second{background:#fff;color:var(--c-accent-fonce);border-color:#DCD7CF}
.ct-btn--second:hover,.ct-btn--second:focus{
  background:#fff;color:var(--c-accent-nuit);border-color:var(--c-encre);
}

/* ------------------------------------------------------------------ POURQUOI NOUS ÉCRIRE
   Du texte en deux colonnes, pas des cartes : ce sont des explications, pas une offre. */
.ct-motifs{display:grid;gap:26px 40px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-motif h3{
  margin:0 0 8px;font-size:1.04rem;font-weight:750;line-height:1.3;
  padding-left:13px;border-left:3px solid var(--c-accent);
}
.ct-motif p{font-size:.98rem;margin:0 0 .6em}
.ct-motif ul{margin:0;padding-left:1.15em;font-size:.97rem;color:var(--c-texte)}
.ct-motif li{margin:.18em 0}
.ct-note{
  margin-top:.7em;font-size:.93rem;color:var(--c-doux);
  border-left:2px solid var(--c-trait);padding-left:12px;
}

/* -------------------------------------------------------------------- RÉSERVER : LE BLOC
   Bleu clair, comme les blocs pratiques du reste du site. C'est l'information qui évite le
   plus grand nombre d'e-mails inutiles, elle doit se voir sans se lire. */
.ct-reserver{
  margin:46px 0 0;padding:28px 30px;border-radius:var(--c-r);
  background:var(--c-bleu);border:1px solid var(--c-bleu-trait);
}
.ct-res-titre{margin:0 0 .4em;font-size:1.4rem;font-weight:800}
.ct-reserver p{max-width:64ch;color:var(--c-texte)}
.ct-res-actions{margin:18px 0 0}

/* ------------------------------------------------------------------------------ PISTES */
.ct-pistes{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-piste{
  display:flex;flex-direction:column;gap:7px;
  padding:20px 22px;border:1px solid var(--c-filet);border-radius:var(--c-r);background:#fff;
}
.ct-piste h3{margin:0;font-size:1.04rem;font-weight:750}
.ct-piste p{margin:0;font-size:.96rem;color:var(--c-doux);flex:1 1 auto}
.ct-piste-lien{
  align-self:flex-start;font-size:.95rem;font-weight:650;color:var(--c-accent-fonce);
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;
}
.ct-piste-lien:hover{color:var(--c-accent-nuit)}

/* ------------------------------------------------------------------------------ RAPPEL */
.ct-rappel{
  margin:40px 0 0;padding:18px 20px;border-left:3px solid var(--c-trait);
  font-size:.96rem;color:var(--c-doux);max-width:74ch;
}

/* --------------------------------------------------------------------------- RESPONSIVE */
@media (max-width:900px){
  .ct-motifs{grid-template-columns:1fr;gap:24px}
  .ct-pistes{grid-template-columns:1fr}
}
@media (max-width:959px){
  .ct-bloc{scroll-margin-top:104px}
}
@media (max-width:600px){
  .ct{font-size:16.5px;padding-bottom:40px}
  .ct-h1{font-size:clamp(1.9rem,8vw,2.35rem)}
  .ct-chapo{font-size:1.03rem}
  .ct-bloc{margin-top:36px}
  .ct-h2{font-size:1.22rem}
  .ct-coord{padding:20px 18px}
  .ct-coord-liste{gap:14px}
  .ct-fort{font-size:1.1rem}
  .ct-coord-actions .ct-btn{width:100%}
  .ct-reserver{margin-top:36px;padding:22px 18px}
  .ct-res-actions .ct-btn{width:100%}
  .ct-piste{padding:17px 18px}
  .ct-rappel{margin-top:32px;padding:16px 16px}
}
