/* ==========================================================================
   MOSAÏCA — CONTACT
   Préfixe : .ct-   ·   Page : contact.html

   Une seule action principale : le formulaire. Tout le reste — bannière,
   coordonnées, réseaux — l'accompagne sans jamais lui disputer l'écran.

   Aucune carte répétée, aucun carrousel, aucun accordéon, aucune photo
   de bureau. Deux zones, un bloc de coordonnées, rien d'autre.

   PALETTE — celle du site
   Bleu nuit, bleu ardoise, gris minéral, blanc, or maîtrisé.
   Aucun beige, aucun crème : var(--sable) n'apparaît pas dans ce fichier.

   SOMMAIRE
   1. Jetons et socle
   2. Bannière
   3. Composition en deux zones
   4. Formulaire
   5. États du formulaire (succès, erreur, Bookings)
   6. Bloc de coordonnées
   7. Paliers
   ========================================================================== */

.ct{
  --ct-ink:#071726;          /* bleu nuit */
  --ct-steel:#1B3B55;        /* bleu ardoise */
  --ct-mineral:#F3F6F8;      /* gris minéral froid — jamais de crème */
  --ct-line:#DCE4E9;
  --ct-line-strong:#C3CFD9;
  --ct-gold:#C9A45C;         /* or Mosaïca */
  --ct-gold-deep:#836919;    /* même or, assombri pour tenir AA sur fond clair */
  --ct-text:#12222F;
  --ct-text-soft:#4E5F6D;
  --ct-on-ink:#EEF3F7;
  --ct-on-ink-soft:rgba(238,243,247,.78);
  --ct-danger:#A32020;
  --ct-ease:cubic-bezier(.22,.61,.36,1);

  color:var(--ct-text);
  background:#fff;
  font-family:'Space Grotesk',Arial,sans-serif;
}

.ct-wrap{
  max-width:1140px;margin-inline:auto;
  padding-inline:clamp(1.35rem,4vw,2.75rem);
}

.ct-skip{
  position:absolute;left:-9999px;top:0;z-index:1200;
  padding:.85rem 1.4rem;background:var(--ct-ink);color:#fff;
  font-size:1rem;font-weight:600;text-decoration:none;
}
.ct-skip:focus{left:.75rem;top:.75rem}

/* Focus premium, identique partout : un seul dessin pour les liens, les
   boutons et les champs. */
.ct a:focus-visible,
.ct button:focus-visible,
.ct summary:focus-visible{
  outline:2px solid var(--ct-gold);outline-offset:3px;border-radius:1px;
}


/* ==========================================================================
   2. BANNIÈRE
   Compacte : 440-500px sur ordinateur, 380-440px au téléphone. Jamais un
   plein écran, aucun parallaxe, aucun mouvement.

   Le mur de mosaïque n'est calme que sur sa moitié gauche — l'arc doré
   occupe la droite. Le voile est donc horizontal : franc là où le texte
   se pose, nul là où la matière doit rester lisible. Il ne dépasse jamais
   0,86 d'opacité, et la zone dorée reste presque intacte : l'image n'est
   noircie à aucun endroit.
   ========================================================================== */

.ct-hero{
  position:relative;
  display:flex;align-items:center;
  /* 440px à 1024 → 500px à 1600 et au-delà. */
  min-height:clamp(27.5rem,20rem + 11.7vw,31.25rem);
  overflow:hidden;isolation:isolate;
  background:var(--ct-ink);
  color:var(--ct-on-ink);
}

.ct-hero-media{position:absolute;inset:0;z-index:0}
.ct-hero-media img{
  width:100%;height:100%;
  object-fit:cover;object-position:42% 52%;
  display:block;
}

.ct-hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(7,23,38,.86) 0%,
      rgba(7,23,38,.82) 30%,
      rgba(7,23,38,.60) 52%,
      rgba(7,23,38,.26) 70%,
      rgba(7,23,38,.06) 86%,
      rgba(7,23,38,0) 96%),
    linear-gradient(180deg,
      rgba(7,23,38,.26) 0%,
      rgba(7,23,38,0) 36%,
      rgba(7,23,38,0) 68%,
      rgba(7,23,38,.30) 100%);
}

.ct-hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:1140px;margin-inline:auto;
  padding:clamp(2rem,4vw,3rem) clamp(1.35rem,4vw,2.75rem);
  box-sizing:border-box;
}

.ct-eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ct-gold);
  margin-bottom:clamp(.9rem,1.8vw,1.3rem);
}
.ct-eyebrow::before{content:"";width:2rem;height:1px;background:var(--ct-gold);flex:none}

/* Le H1 de Contact reste franchement sous le grand titre de la page
   d'accueil (qui monte à 4,4rem) : cette page ouvre une conversation,
   elle n'ouvre pas le site. */
.ct-hero-title{
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-weight:600;
  font-size:clamp(1.9rem,3.1vw,2.75rem);
  line-height:1.11;letter-spacing:-.02em;
  margin:0;color:var(--ct-on-ink);
  max-width:760px;
  /* balance répartit les lignes plutôt que d'abandonner un mot seul en
     fin de phrase : aucun retour n'est écrit en dur dans le HTML. */
  text-wrap:balance;
}

.ct-hero-lead{
  margin:clamp(1rem,2vw,1.4rem) 0 0;
  font-size:clamp(1.02rem,1.25vw,1.15rem);
  line-height:1.64;
  color:var(--ct-on-ink-soft);
  max-width:min(760px,62ch);
  text-wrap:pretty;
}


/* ==========================================================================
   3. COMPOSITION EN DEUX ZONES
   Le formulaire domine : 1,55 contre 1. Les coordonnées l'accompagnent
   dans un seul bloc minéral — pas une grille de cartes.
   ========================================================================== */

.ct-main{padding-block:clamp(3.25rem,5.5vw,5rem)}

.ct-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start;
}

.ct-h2{
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-weight:600;
  font-size:clamp(1.6rem,2.5vw,2.15rem);
  line-height:1.18;letter-spacing:-.018em;
  margin:0;color:var(--ct-text);
  max-width:22ch;text-wrap:balance;
}
.ct-lead{
  margin:1rem 0 0;
  font-size:clamp(1rem,1.15vw,1.08rem);
  line-height:1.7;color:var(--ct-text-soft);
  max-width:56ch;text-wrap:pretty;
}


/* ==========================================================================
   4. FORMULAIRE
   Libellés toujours visibles — jamais de libellé flottant qui disparaît
   dès la première frappe. Champs hauts, bordures discrètes, focus franc.
   ========================================================================== */

.ct-form{margin-top:clamp(2rem,3.5vw,2.75rem)}
.ct-form fieldset{border:0;padding:0;margin:0}

.ct-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1rem,2vw,1.5rem);
}

.ct-field{margin-bottom:clamp(1.25rem,2.2vw,1.6rem)}
.ct-field label{
  display:block;
  font-size:.95rem;font-weight:600;
  color:var(--ct-text);margin-bottom:.5rem;
}
/* La mention « facultatif » est portée par le libellé, pas par un
   marqueur à décoder : c'est l'information dont le lecteur a besoin. */
.ct-field label .ct-opt{
  font-weight:400;color:var(--ct-text-soft);
}

.ct-field input,
.ct-field select,
.ct-field textarea{
  width:100%;
  min-height:52px;
  padding:.85rem 1rem;
  border:1px solid var(--ct-line-strong);
  border-radius:2px;
  background:#fff;
  font-family:'Space Grotesk',Arial,sans-serif;
  font-size:1rem;line-height:1.5;color:var(--ct-text);
  /* Aucune transition sur la bordure ni sur le halo : le voyant de focus
     doit être là à l'instant où le champ reçoit le curseur. Animé, il
     arrive en retard — et il n'arrive pas du tout si l'onglet est
     ralenti, si le rendu est suspendu ou si le moteur saute la
     transition. Un indicateur d'accessibilité ne se met pas à la merci
     d'une animation. */
}
.ct-field textarea{min-height:170px;resize:vertical;padding-top:.9rem}

/* La flèche du menu déroulant est dessinée en CSS : deux icônes ne
   justifiaient pas une police ni une bibliothèque. */
.ct-field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231B3B55' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:10px 6px;
  padding-right:2.75rem;
}

.ct-field input::placeholder,
.ct-field textarea::placeholder{color:#8A98A4}

.ct-field input:hover,
.ct-field select:hover,
.ct-field textarea:hover{border-color:var(--ct-steel)}

/* Focus premium : la bordure fonce et un halo doré double le repère.
   Deux signaux, jamais un seul — le halo seul disparaît sur fond clair
   pour un daltonisme deutan, la bordure seule est trop discrète. */
.ct-field input:focus-visible,
.ct-field select:focus-visible,
.ct-field textarea:focus-visible{
  outline:none;
  border-color:var(--ct-steel);
  box-shadow:0 0 0 3px rgba(201,164,92,.42);
}

/* Erreur : la bordure, un message explicite, et aria-invalid pour les
   lecteurs d'écran. La couleur n'est jamais le seul porteur. */
.ct-field input[aria-invalid="true"],
.ct-field select[aria-invalid="true"],
.ct-field textarea[aria-invalid="true"]{
  border-color:var(--ct-danger);
}
.ct-error{
  display:none;
  margin-top:.45rem;
  font-size:.92rem;line-height:1.45;color:var(--ct-danger);
}
.ct-error.is-on{display:block}

/* --- Consentement --- */
.ct-consent{
  display:flex;align-items:flex-start;gap:.8rem;
  margin:clamp(1.5rem,2.5vw,2rem) 0 0;
  padding-top:clamp(1.35rem,2.4vw,1.75rem);
  border-top:1px solid var(--ct-line);
}
/* 24px : le minimum posé par WCAG 2.5.8 pour une cible isolée. La case
   n'est cependant jamais la seule cible — le libellé lui est associé par
   `for`, et ses deux lignes offrent une surface bien plus large. */
.ct-consent input[type=checkbox]{
  width:1.5rem;height:1.5rem;flex:none;margin-top:.1rem;
  accent-color:var(--ct-steel);
}
/* `display:block` et non `flex` : ce libellé contient une phrase ET un
   lien. En flex, le lien devient un élément de flux distinct et se
   détache de la phrase — « … conformément à sa » restait seul, et
   « politique de confidentialité » partait à droite. La hauteur
   minimale suffit à garantir la cible tactile. */
.ct-consent label{
  min-height:44px;
  display:block;
  padding-block:.35rem;
  font-size:.98rem;line-height:1.6;color:var(--ct-text-soft);
}
.ct-consent a{color:var(--ct-steel);text-decoration:underline;text-underline-offset:2px}
.ct-consent a:hover{color:var(--ct-gold-deep)}

/* --- Champ piège ---
   Invisible pour l'œil ET pour le lecteur d'écran, hors de l'ordre de
   tabulation : seul un robot qui remplit tous les champs le remplira.
   display:none est évité — certains robots l'ignorent explicitement. */
.ct-hp{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- Bouton principal --- */
.ct-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:54px;padding:1rem 2rem;
  border:1px solid var(--ct-gold);border-radius:2px;
  background:var(--ct-gold);color:#0D0D0D;   /* 7,9:1 */
  font-family:'Space Grotesk',Arial,sans-serif;
  font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;
  transition:background .25s var(--ct-ease),border-color .25s var(--ct-ease);
}
.ct-submit::after{content:"\2192";transition:transform .25s var(--ct-ease)}
.ct-submit:hover{background:#D8B879;border-color:#D8B879}
.ct-submit:hover::after{transform:translateX(4px)}
.ct-submit:focus-visible{outline:2px solid var(--ct-steel);outline-offset:3px}
.ct-submit[disabled]{opacity:.62;cursor:progress}
.ct-submit[disabled]:hover{background:var(--ct-gold);border-color:var(--ct-gold)}
.ct-submit[disabled]::after{transform:none}

.ct-actions{margin-top:clamp(1.5rem,2.5vw,2rem)}


/* ==========================================================================
   5. ÉTATS DU FORMULAIRE
   Une zone aria-live unique porte les deux messages : le lecteur d'écran
   n'a qu'un seul endroit à surveiller.
   ========================================================================== */

.ct-status{margin-top:clamp(1.25rem,2.2vw,1.75rem)}
.ct-status:empty{margin-top:0}

.ct-msg{
  padding:1.1rem 1.35rem;
  border-left:3px solid;
  font-size:1rem;line-height:1.62;
}
.ct-msg--ok{
  border-left-color:var(--ct-gold-deep);
  background:var(--ct-mineral);color:var(--ct-text);
}
.ct-msg--err{
  border-left-color:var(--ct-danger);
  background:#FBF2F2;color:#7A1919;
}
.ct-msg--err a{color:inherit;text-underline-offset:2px}

/* --- Microsoft Bookings ---
   Ne paraît qu'après un envoi réussi : la prise de rendez-vous ne doit
   jamais concurrencer le formulaire tant que celui-ci n'a pas abouti.
   [hidden] est respecté par défaut ; la règle ci-dessous ne fait que
   décrire l'état visible. */
.ct-book[hidden]{display:none}
.ct-book{
  margin-top:clamp(1.5rem,2.6vw,2rem);
  padding-top:clamp(1.5rem,2.6vw,2rem);
  border-top:1px solid var(--ct-line);
}
.ct-book h3{
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-weight:600;font-size:clamp(1.15rem,1.7vw,1.35rem);
  line-height:1.24;margin:0 0 .5rem;color:var(--ct-text);
}
.ct-book p{
  margin:0 0 1.15rem;font-size:1rem;line-height:1.65;
  color:var(--ct-text-soft);max-width:52ch;
}
.ct-book-link{
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:48px;padding:.8rem 1.6rem;
  border:1px solid var(--ct-steel);border-radius:2px;
  color:var(--ct-steel);text-decoration:none;
  font-size:.88rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:background .25s var(--ct-ease),color .25s var(--ct-ease);
}
.ct-book-link::after{content:"\2192";transition:transform .25s var(--ct-ease)}
.ct-book-link:hover{background:var(--ct-steel);color:#fff}
.ct-book-link:hover::after{transform:translateX(4px)}


/* ==========================================================================
   6. BLOC DE COORDONNÉES
   Un seul bloc minéral, posé à côté du formulaire. Pas trois cartes
   empilées : les coordonnées d'un cabinet tiennent en une colonne.
   ========================================================================== */

.ct-aside{
  background:var(--ct-mineral);
  padding:clamp(1.75rem,3vw,2.5rem);
  border-top:2px solid var(--ct-gold-deep);
}

.ct-aside-name{
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-weight:600;font-size:clamp(1.2rem,1.7vw,1.4rem);
  line-height:1.2;margin:0 0 .5rem;color:var(--ct-text);
}
.ct-aside-tag{
  margin:0 0 clamp(1.5rem,2.4vw,1.9rem);
  font-size:.98rem;line-height:1.6;color:var(--ct-text-soft);
}

.ct-coords{margin:0;font-style:normal}
.ct-coords > div + div{
  margin-top:1.15rem;padding-top:1.15rem;
  border-top:1px solid var(--ct-line);
}
.ct-coords dt,.ct-coord-k{
  display:block;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ct-gold-deep);margin-bottom:.4rem;
}
.ct-coords dd,.ct-coord-v{
  margin:0;font-size:1rem;line-height:1.62;color:var(--ct-text);
}
.ct-coords a{
  color:var(--ct-text);text-decoration:none;
  border-bottom:1px solid var(--ct-line-strong);
  transition:color .2s,border-color .2s;
}
.ct-coords a:hover{color:var(--ct-gold-deep);border-bottom-color:var(--ct-gold-deep)}
/* Téléphone et courriel sont des cibles tactiles à part entière. */
.ct-coords a[href^="tel:"],
.ct-coords a[href^="mailto:"]{
  display:inline-flex;align-items:center;min-height:44px;
}

/* --- Réseaux ---
   Deux icônes en SVG écrit à la main : aucune police d'icônes, aucune
   bibliothèque chargée pour deux tracés. */
.ct-social{
  display:flex;align-items:center;gap:.6rem;
  margin-top:clamp(1.5rem,2.4vw,1.9rem);
  padding-top:clamp(1.35rem,2.2vw,1.6rem);
  border-top:1px solid var(--ct-line);
}
.ct-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border:1px solid var(--ct-line-strong);border-radius:2px;
  color:var(--ct-steel);
  transition:background .22s var(--ct-ease),border-color .22s var(--ct-ease),color .22s var(--ct-ease);
}
.ct-social a:hover{background:var(--ct-steel);border-color:var(--ct-steel);color:#fff}
.ct-social svg{width:19px;height:19px;display:block}


/* ==========================================================================
   7. PALIERS
   1024px — les deux colonnes se resserrent ; en dessous, deux colonnes
            cesseraient d'être confortables et la page passe en une seule.
     767px — téléphone : le formulaire précède les coordonnées, ce que
            l'ordre du document assure déjà sans réordonnancement.
   ========================================================================== */

@media(max-width:1024px){
  /* 440px à 1024 → 400px à 768 : la bannière reste dans la fourchette
     demandée de part et d'autre du basculement en une seule colonne. */
  .ct-hero{min-height:clamp(25rem,17.5rem + 15.6vw,27.5rem)}
  .ct-hero-media img{object-position:34% 52%}

  /* Deux colonnes ne restent pas confortables : la colonne du formulaire
     descendrait sous 400px, ce qui casserait la ligne « prénom / nom ».
     On passe donc à une seule colonne dès la tablette. */
  .ct-grid{grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,5vw,3.5rem)}
  .ct-aside{max-width:34rem}
}

@media(max-width:767px){
  /* 380px à 360 → 440px à 767. */
  .ct-hero{min-height:clamp(23.75rem,20.5rem + 14.7vw,27.5rem);align-items:flex-end}
  /* Le cadre est cinq fois plus étroit que l'image : on garde le fragment
     le plus calme et le plus matériel du mur, sans l'arc. */
  .ct-hero-media img{object-position:26% 50%}
  /* Le voile bascule à la verticale : le texte occupe toute la largeur et
     se lit sur le bas. La moitié haute du mur reste intacte. */
  .ct-hero-veil{
    background:linear-gradient(180deg,
      rgba(7,23,38,.28) 0%,
      rgba(7,23,38,.18) 30%,
      rgba(7,23,38,.70) 66%,
      rgba(7,23,38,.88) 100%);
  }
  .ct-hero-inner{padding-bottom:clamp(1.75rem,6vw,2.5rem)}

  /* Prénom/nom et courriel/téléphone passent l'un sous l'autre : à cette
     largeur, deux champs côte à côte deviennent illisibles. */
  .ct-row{grid-template-columns:minmax(0,1fr)}

  .ct-main{padding-block:clamp(2.5rem,7vw,3.5rem)}
  .ct-submit{width:100%}
  .ct-book-link{width:100%;justify-content:center}
  .ct-aside{max-width:none}
}

/* Téléphone en paysage : la hauteur utile fond. La bannière se cale sur
   son contenu plutôt que sur une valeur qui dépasserait l'écran. */
@media(orientation:landscape) and (max-height:520px){
  .ct-hero{min-height:0;padding-block:clamp(1.5rem,5vh,2.5rem)}
}

/* Aucune transition n'est indispensable à la compréhension de cette page :
   toutes peuvent disparaître sans rien retirer au sens. */
@media(prefers-reduced-motion:reduce){
  .ct *,.ct *::before,.ct *::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
  }
}