/* ============================================================
   NOS MARQUES (§12) — feuille dédiée à nos-marques.php
   Ne réutilise que les jetons de style.css : --bg, --bg-2, --card,
   --ink, --ink-soft, --ocre, --blue, --line, les titres en Fraunces
   et les libellés en JetBrains Mono. Le nav et le footer restent
   ceux du reste du site.

   PARTI GRAPHIQUE — LE NUANCIER
   Aucun logo n'est utilisé : les droits et les fichiers officiels ne
   sont pas vérifiés. Chaque marque est donc composée typographiquement,
   comme une teinte sur un nuancier d'atelier : une pastille de couleur
   prise dans la palette TDH (et non dans la charte de la marque), une
   grande initiale en filigrane, le nom en Fraunces, et un trait de
   pinceau qui se remplit au survol. Le traitement est identique pour
   les quatre marques : rien ne cherche à évoquer une identité visuelle.
   ============================================================ */

.mq{ background:var(--bg); color:var(--ink); overflow-x:clip; }

/* ------------------------------------------------------------
   EN-TÊTE
   ------------------------------------------------------------ */
.mq-hero{
  position:relative;
  padding:6rem 6vw 4.5rem;
  isolation:isolate;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}

/* halos colorés, très diffus — décor pur */
.mq-halo{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.mq-halo i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(80px); opacity:0.32; will-change:transform;
}
.mq-halo i:nth-child(1){
  width:44vw; height:44vw; top:-22%; left:-10%;
  background:radial-gradient(circle, var(--ocre), transparent 68%);
  animation:mqDerive1 18s ease-in-out infinite alternate;
}
.mq-halo i:nth-child(2){
  width:38vw; height:38vw; bottom:-26%; right:-8%;
  background:radial-gradient(circle, var(--blue), transparent 68%);
  animation:mqDerive2 22s ease-in-out infinite alternate;
}
.mq-halo i:nth-child(3){
  width:32vw; height:32vw; top:24%; left:46%;
  background:radial-gradient(circle, var(--green, #7FA25B), transparent 68%);
  animation:mqDerive3 26s ease-in-out infinite alternate;
}
@keyframes mqDerive1{ to{ transform:translate3d(9vw, 7vh, 0) scale(1.2); } }
@keyframes mqDerive2{ to{ transform:translate3d(-8vw, -6vh, 0) scale(0.86); } }
@keyframes mqDerive3{ to{ transform:translate3d(-6vw, 8vh, 0) scale(1.15); } }

/* grille technique très discrète, comme sur la page prestations */
.mq-hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(243,239,230,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,239,230,0.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 30%, #000, transparent 78%);
          mask-image:radial-gradient(ellipse 70% 65% at 50% 30%, #000, transparent 78%);
}

.mq-hero-inner{ position:relative; z-index:2; max-width:920px; margin:0 auto; text-align:center; }

.mq-eyebrow{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.8rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--ocre); font-weight:500;
  border:1px solid rgba(232,162,61,0.35); border-radius:99px;
  padding:0.55rem 1.3rem; margin:1.8rem 0 1.6rem;
  background:rgba(232,162,61,0.06);
}
.mq-eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--ocre);
  box-shadow:0 0 8px var(--ocre); flex:none;
}

.mq-title{
  font-family:'Fraunces', serif; font-weight:700;
  font-size:clamp(2.15rem, 5.2vw, 3.9rem); line-height:1.06; letter-spacing:-0.02em;
  margin-bottom:1.4rem;
}
.mq-title .mq-accent{ color:var(--ocre); }

.mq-lead{
  color:var(--ink-soft); line-height:1.75;
  font-size:clamp(1rem, 1.5vw, 1.15rem);
  max-width:60ch; margin:0 auto;
}

/* La mise au point sur l'absence de partenariat : lisible, pas noyée. */
.mq-avertissement{
  max-width:64ch; margin:2.2rem auto 0;
  padding:1rem 1.3rem;
  border:1px solid var(--line); border-left:3px solid var(--ocre);
  border-radius:4px;
  background:var(--card);
  color:var(--ink-soft);
  font-size:0.92rem; line-height:1.7; text-align:left;
}

/* ------------------------------------------------------------
   LES QUATRE MARQUES
   ------------------------------------------------------------ */
.mq-liste{ padding:4.5rem 6vw 3rem; }

.mq-grille{
  list-style:none; margin:0 auto; padding:0;
  max-width:1100px;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.6rem;
}

.mq-carte{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:2rem 1.9rem 1.6rem;
  display:flex; flex-direction:column;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.mq-carte > article{ display:flex; flex-direction:column; height:100%; }

/* liseré de teinte en haut de carte : le repère couleur du nuancier */
.mq-carte::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:8px 8px 0 0;
  background:linear-gradient(90deg, var(--accent), transparent 85%);
}
.mq-carte:hover{
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,0.28);
}
/* le clavier doit voir la même chose que la souris */
.mq-carte:focus-within{
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
}

/* --- la plaque : index, initiale en filigrane, nom, trait --- */
.mq-plaque{ position:relative; margin-bottom:1.1rem; }

.mq-index{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem; letter-spacing:0.18em;
  color:var(--ink-soft); opacity:0.65;
  margin-bottom:0.35rem;
}

/* grande initiale traitée en filigrane, derrière le nom : c'est un motif
   décoratif de nuancier, pas une marque — d'où aria-hidden côté HTML. */
.mq-initiale{
  position:absolute; top:-1.1rem; right:-0.4rem;
  font-family:'Fraunces', serif; font-weight:900;
  font-size:5.6rem; line-height:1;
  color:var(--accent); opacity:0.14;
  pointer-events:none; user-select:none;
}

.mq-nom{
  font-family:'Fraunces', serif; font-weight:600;
  font-size:clamp(1.75rem, 3vw, 2.35rem); line-height:1.1;
  letter-spacing:0.005em;
  color:var(--ink);
  margin:0 0 0.7rem;
}

/* trait de pinceau sous le nom : court au repos, il se déploie au survol */
.mq-trait{
  display:block; height:4px; width:52px; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 15%, transparent));
  transition:width .45s cubic-bezier(.2,.8,.3,1);
}
.mq-carte:hover .mq-trait,
.mq-carte:focus-within .mq-trait{ width:130px; }

.mq-desc{
  color:var(--ink-soft); line-height:1.75; font-size:0.98rem;
  margin-bottom:1.4rem;
}

/* --- lien vers le site officiel --- */
.mq-liens{ margin-top:auto; }

.mq-site{
  display:inline-flex; align-items:baseline; gap:0.6rem; flex-wrap:wrap;
  text-decoration:none;
  border:1px solid var(--line); border-radius:4px;
  padding:0.65rem 1rem;
  background:rgba(243,239,230,0.02);
  transition:border-color .25s ease, background .25s ease;
}
.mq-site:hover{
  border-color:color-mix(in srgb, var(--accent) 60%, transparent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}
.mq-site-label{
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent);
}
.mq-site-hote{ color:var(--ink); font-size:0.9rem; }
.mq-fleche{ color:var(--accent); font-size:0.9rem; }

/* --- chantiers liés (branchement à venir, voir nos-marques.php) --- */
.mq-chantiers{
  margin-top:1.3rem; padding-top:1.1rem;
  border-top:1px solid var(--line);
}
.mq-chantiers-titre{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:0.6rem;
}
.mq-chantiers-liste{ list-style:none; margin:0; padding:0; display:grid; gap:0.4rem; }
.mq-chantiers-liste a{
  color:var(--ink); text-decoration:none; font-size:0.92rem;
  border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s ease;
}
.mq-chantiers-liste a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.mq-chantiers-tout{
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
  transition:color .2s ease;
}
.mq-chantiers-tout:hover{ color:var(--ocre); }

/* ------------------------------------------------------------
   LE MOT DE LA FIN — message imposé, repris mot pour mot
   ------------------------------------------------------------ */
.mq-mot{ padding:3.5rem 6vw 4rem; }
.mq-mot-inner{
  max-width:820px; margin:0 auto; text-align:center;
  background:var(--bg-2);
  border:1px solid var(--line); border-radius:10px;
  padding:3rem 2.2rem;
}
.mq-mot-inner .mq-eyebrow{ margin-top:0; }
.mq-mot-titre{
  font-family:'Fraunces', serif; font-weight:600;
  font-size:clamp(1.6rem, 3.2vw, 2.3rem); line-height:1.15;
  margin-bottom:1.2rem;
}
.mq-mot-texte{
  color:var(--ink-soft); line-height:1.8;
  font-size:clamp(1rem, 1.5vw, 1.12rem);
  max-width:62ch; margin:0 auto;
}

/* ------------------------------------------------------------
   APPEL À L'ACTION
   ------------------------------------------------------------ */
.mq-cta{
  padding:0 6vw 6rem;
  text-align:center;
}
.mq-cta-inner{ max-width:720px; margin:0 auto; }
.mq-cta h2{
  font-family:'Fraunces', serif; font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.5rem); line-height:1.1;
  margin-bottom:0.9rem;
}
.mq-cta p{ color:var(--ink-soft); line-height:1.7; margin-bottom:2rem; }
.mq-cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ------------------------------------------------------------
   UTILITAIRE — texte réservé aux lecteurs d'écran
   ------------------------------------------------------------ */
.mq-invisible{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:900px){
  .mq-grille{ grid-template-columns:1fr; }
  .mq-hero{ padding:5rem 6vw 3.5rem; }
  .mq-liste{ padding:3.5rem 6vw 2rem; }
}
@media (max-width:560px){
  .mq-carte{ padding:1.7rem 1.4rem 1.3rem; }
  .mq-initiale{ font-size:4.4rem; top:-0.7rem; }
  .mq-mot-inner{ padding:2.2rem 1.4rem; }
  .mq-avertissement{ font-size:0.88rem; padding:0.9rem 1.05rem; }
  .mq-cta-actions .btn-primary,
  .mq-cta-actions .btn-secondary{ width:100%; text-align:center; }
}

/* ------------------------------------------------------------
   ACCESSIBILITÉ — animations réduites
   Le focus clavier, lui, reste celui de style.css (contour ocre) :
   rien ici ne le neutralise.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .mq-halo i{ animation:none; }
  .mq-carte,
  .mq-trait,
  .mq-site{ transition:none; }
  .mq-carte:hover{ transform:none; }
  .mq-carte:hover .mq-trait,
  .mq-carte:focus-within .mq-trait{ width:52px; }
}

/* Contraste renforcé : on n'y perd que des effets, jamais de l'information. */
@media (prefers-contrast:more){
  .mq-halo{ display:none; }
  .mq-initiale{ opacity:0.08; }
  .mq-desc, .mq-lead, .mq-mot-texte{ color:var(--ink); }
}