/* ============================================================
   DESSIGNE — interactions et survols
   Règles valables sur TOUT le site.

   Boutons : au survol, le fond passe à une couleur plus
   contrastée, et le texte bascule en noir ou blanc selon la
   luminance de ce fond.
     • rouge        → rouge profond #4A0D08, texte blanc
     • clair/crème  → ocre #A48054, texte noir
     • transparent  → se remplit de sa propre couleur de contour
   ============================================================ */

:root {
  --rouge-fonce: #4A0D08;
  --gold-fonce:  #8D6C41;
}

/* ---- Rouge → rouge profond ---- */
.dessigne-page .btn--rouge:hover,
.dessigne-page .btn--rouge:focus-visible {
  background: var(--rouge-fonce);
  border-color: var(--rouge-fonce);
  color: #FFFFFF;
  filter: none;
}

/* ---- Clairs (crème / blanc) → ocre ---- */
.dessigne-page .btn--cream:hover,
.dessigne-page .btn--cream:focus-visible,
.dessigne-page .hero .btn--ink:hover,
.dessigne-page .hero .btn--ink:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #000000;
}

/* ---- Transparents → couleur de leur contour ---- */
/* contour ink */
.dessigne-page .btn--ghost:hover,
.dessigne-page .btn--ghost:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
}
/* contour crème (sur fond sombre) */
.dessigne-page .btn--ghost-l:hover,
.dessigne-page .btn--ghost-l:focus-visible,
.dessigne-page .hero .btn--ghost:hover,
.dessigne-page .hero .btn--ghost:focus-visible {
  background: var(--cream);
  border-color: var(--cream);
  color: #000000;
}

/* ---- Sombre : garde le bordeaux du design, texte au contraste ---- */
.dessigne-page .btn--ink:hover,
.dessigne-page .btn--ink:focus-visible {
  background: var(--burg);
  border-color: var(--burg);
  color: #FFFFFF;
}

/* ---- Or → ocre foncé ---- */
.dessigne-page .btn--gold:hover,
.dessigne-page .btn--gold:focus-visible {
  background: var(--gold-fonce);
  border-color: var(--gold-fonce);
  color: #FFFFFF;
}

/* ---- Lien fléché « Tous nos projets » ---- */
.dessigne-page .arrow-link { transition: color .25s ease, border-color .25s ease; }
.dessigne-page .arrow-link:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ============================================================
   CARTES PROJET — même animation que les cartes de service
   (élévation + ombre douce, cf. .formule:hover)
   ============================================================ */
.dessigne-page .pcard {
  transition: transform .35s ease;
}
.dessigne-page .pcard__media {
  transition: box-shadow .35s ease;
}
.dessigne-page .pcard:hover {
  transform: translateY(-4px);
}
.dessigne-page .pcard:hover .pcard__media {
  box-shadow: 0 34px 72px -38px rgba(38, 36, 33, .45);
}

/* ============================================================
   CARROUSEL — flèches ramenées sous les vignettes,
   de part et d'autre des puces
   ============================================================ */
.dessigne-page .carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
}

.dessigne-page .carousel__nav .carousel__dots {
  margin-top: 0;
}

/* On annule le positionnement absolu sur les bords des photos */
.dessigne-page .carousel__arrow {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  width: 44px;
  height: 44px;
  min-width: 0;
  padding: 0;
  font-size: 19px;
  line-height: 1;
  flex: 0 0 44px;
}

/* Bouton clair → ocre au survol, comme la règle générale */
.dessigne-page .carousel__arrow:hover,
.dessigne-page .carousel__arrow:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #000000;
}

/* La zone de defilement accepte le geste horizontal ; le defilement
   vertical de la page reste au navigateur. Sans pan-y, le doigt qui
   part legerement de travers fait defiler la page au lieu du
   carrousel, ou l'inverse. */
.dessigne-page .carousel__viewport,
.dessigne-page .hero-carousel {
  touch-action: pan-y;
}

/* Une image se « prend » au glisser-deposer natif du navigateur : le
   geste part alors au systeme au lieu du script, et le curseur reste
   bloque en mouvement. */
.dessigne-page .carousel__track img,
.dessigne-page .hc__track img {
  -webkit-user-drag: none;
  user-select: none;
}

@media (max-width: 860px) {
  /* Navigation resserree : une vignette par vue, fleches plus petites. */
  .dessigne-page .carousel__nav { gap: 18px; margin-top: 28px; }
  .dessigne-page .carousel__arrow { width: 40px; height: 40px; flex: 0 0 40px; font-size: 17px; }
}

/* ============================================================
   PAGES PROJET — corrections de style
   ============================================================ */

/* Titres de section : le mot en <em> etait en 400 alors que le reste
   du titre est en 500, d'ou l'ecart d'epaisseur entre "Pieces" et
   "maitresses". On aligne les deux. */
.dessigne-page .sec__head .display em,
.dessigne-page .sec__head .display i,
.dessigne-page .valeurs__head .display em,
.dessigne-page .valeurs__head .display i {
  font-weight: 500;
}

/* Elements cliquables : empeche la selection de texte au clic,
   qui faisait apparaitre le surlignage bleu du navigateur. */
.dessigne-page .visite__tab,
.dessigne-page .visite__step,
.dessigne-page .visite__step-info,
.dessigne-page .pill,
.dessigne-page .carousel__arrow,
.dessigne-page .carousel__dot,
.dessigne-page .hc__dot,
.dessigne-page .nav__burger {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Astra repeint tout <button> au survol et au focus avec sa couleur
   d'accent (#045cb4), depuis son CSS inline. Le burger n'a pas de fond
   et ses trois barres suivent currentColor, herite de la barre de nav :
   il doit garder ce comportement dans les deux modes de la nav. */
.dessigne-page .nav__burger:hover,
.dessigne-page .nav__burger:focus,
.dessigne-page .nav__burger:active {
  background-color: transparent;
  color: inherit;
  border-color: transparent;
}

/* Le corps d'une pastille ouverte reste selectionnable : c'est du contenu. */
.dessigne-page .pill.is-open .pill__body {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* Cartes "autres projets" : suppression du filet tirete sous l'image. */
.dessigne-page .ocard__cap {
  border-top: none;
}

/* ============================================================
   SELECTION DE TEXTE
   Astra impose ::selection { background:#046bd2 } — un bleu accent
   totalement hors palette, visible des qu'un texte est selectionne.
   On le remplace par la creme du design.
   ============================================================ */
.dessigne-page ::selection {
  background: var(--cream);
  color: var(--ink);
}
.dessigne-page ::-moz-selection {
  background: var(--cream);
  color: var(--ink);
}

/* La barre d'onglets et le selecteur mobile sont des controles :
   une selection ne doit pas pouvoir y demarrer non plus. */
.dessigne-page .visite__tabs,
.dessigne-page .visite__stepper,
.dessigne-page .visite__pills,
.dessigne-page .carousel__nav,
.dessigne-page .carousel__dots,
.dessigne-page .hc__dots {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* mais le corps d'une pastille ouverte reste copiable */
.dessigne-page .pill.is-open .pill__body {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* ============================================================
   ASTRA REPEINT LES <button> EN BLEU

   Le CSS inline d'Astra pose, en 0-1-1 :
     button:hover, button:focus {
       background-color: var(--ast-global-color-1);   (#045cb4)
       color: #fff; border-color: var(--ast-global-color-1);
     }
   Tout bouton du theme qui ne declare pas ces proprietes DANS LE
   MEME ETAT et a une specificite superieure passe donc au bleu
   accent d'Astra. C'etait le cas des onglets de la visite guidee :
   l'onglet survole, et celui garde en focus apres un clic, se
   remplissait de bleu. Ce n'etait pas une selection de texte (la
   selection est deja neutralisee plus haut dans cette feuille).

   Regle : chaque controle du thème rend explicites background-color,
   border-color et color sur hover / focus / active. Prefixer par
   .dessigne-page suffit a passer devant Astra.
   ============================================================ */

/* Onglets de piece — le style tient dans la couleur du texte et le
   filet dore de l'onglet actif : ni fond ni bordure, dans tous les
   etats. La couleur est deja tenue par overrides.css. */
.dessigne-page .visite__tab,
.dessigne-page .visite__tab:hover,
.dessigne-page .visite__tab:focus,
.dessigne-page .visite__tab:focus-visible,
.dessigne-page .visite__tab:active {
  background-color: transparent;
  border-color: transparent;
}

/* Fleches du selecteur mobile de la visite : pastille grise, chiffre
   encre. Meme fond au repos et a l'appui. */
.dessigne-page .visite__step,
.dessigne-page .visite__step:hover,
.dessigne-page .visite__step:focus,
.dessigne-page .visite__step:focus-visible,
.dessigne-page .visite__step:active {
  background-color: rgba(38, 36, 33, .06);
  border-color: transparent;
  color: var(--ink);
}

/* Fleches du carrousel : un clic souris laisse la fleche en :focus
   sans declencher :focus-visible ; sans cette remise a l'etat de
   repos elle resterait bleue une fois relachee. Le dore est reserve
   au survol et au focus clavier — regle placee apres, donc gagnante
   a specificite egale. */
.dessigne-page .carousel__arrow:focus {
  background-color: var(--paper);
  border-color: rgba(38, 36, 33, .12);
  color: var(--ink);
}
.dessigne-page .carousel__arrow:hover,
.dessigne-page .carousel__arrow:focus-visible {
  background-color: var(--gold);
  border-color: var(--gold);
  color: #000000;
}