/* ============================================================================
   VELIX DIGITAL — Pages secondaires (contact, mentions légales, confidentialité)
   Réutilise les tokens de styles.css. Aucune redéfinition de couleur ou de police :
   ces pages doivent être indiscernables de la home en termes d'identité.
   ============================================================================ */

/* ============ EN-TÊTE DE PAGE ============ */
/* Pas de hero plein écran ici : ces pages sont utilitaires, on va droit au contenu.
   Le padding-top dégage la nav flottante.

   Le fond dérive de celui du hero d'accueil (.hero-sky) : mêmes teintes, mêmes
   points d'ancrage, opacités réduites et hauteur écrasée. Une page secondaire
   doit se reconnaître comme faisant partie du même site sans rivaliser avec
   l'accueil. */
.page-head {
  position: relative;
  padding: clamp(150px, 15vw, 190px) 0 clamp(var(--sp-7), 5vw, var(--sp-8));
  overflow-x: clip;
  text-align: center;
}
.page-head::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 15% 0%, #ffeef6 0%, transparent 58%),
    radial-gradient(110% 95% at 88% 6%, #e9d8ff 0%, transparent 62%),
    radial-gradient(90% 70% at 50% 0%, rgba(184, 77, 214, 0.10) 0%, transparent 68%),
    linear-gradient(180deg, #fdf3f6 0%, #f7efff 46%, var(--bg) 100%);
}
/* Fondu bas : la jonction avec le corps de page ne doit pas se voir. */
.page-head::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; z-index: -1;
  height: 120px;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
}
.page-head h1 {
  /* Plus de présence que l'ancien plafond de 56px : ces pages portent l'offre,
     elles ne sont pas des mentions légales. */
  font-size: clamp(38px, 6.2vw, 74px);
  line-height: 1.04; font-weight: 700; color: var(--ink-strong);
  letter-spacing: -0.025em;
  max-width: 20ch; margin-inline: auto;
}
.page-head .page-sub {
  margin-top: var(--sp-5); font-size: 18.5px; line-height: 1.6;
  color: var(--ink-soft);
  /* Centré et borné : une ligne de mesure confortable, pas toute la largeur. */
  max-width: 58ch; margin-inline: auto;
}
.page-head .kicker { margin-bottom: var(--sp-4); }
.page-head .breadcrumb { justify-content: center; }

/* ---- Variante vitrine : en-tête illustré ----
   Pour les pages qui vendent (Cas clients). Une illustration de ciel de la même
   famille que le hero d'accueil, mais distincte — la page listing ne doit pas
   être un doublon de l'accueil. Le centre de l'image est volontairement vide :
   c'est ce qui garde le H1 et la barre de filtres lisibles par-dessus. */
.page-head--vitrine { padding-bottom: var(--sp-6); }
.page-head--vitrine .page-head-sky {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
}
.page-head--vitrine .page-head-bg {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  /* 50 % : l'illustration devient une ambiance plutôt qu'un sujet, et laisse le
     titre porter la page. Le fond de page apparaît au travers, ce qui rapproche
     l'image de la teinte du site — et améliore au passage le contraste du texte. */
  opacity: 0.5;
}
/* Bascule clair/sombre. `display: none` sur le conteneur inactif : le navigateur
   ne télécharge pas l'image d'un <picture> non affiché, donc une seule des deux
   pèse sur le chargement. Une opacité ou une visibilité n'aurait pas cet effet. */
.page-head-img { position: absolute; inset: 0; }
.page-head-img--dark { display: none; }
html[data-theme="dark"] .page-head-img--light { display: none; }
html[data-theme="dark"] .page-head-img--dark { display: block; }
/* Fondu bas : la jonction entre l'illustration et le fond de page ne doit pas
   se voir. Il double le ::after générique, qui reste pour les autres variantes. */
.page-head--vitrine .page-head-sky::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
  height: 45%;
  /* color-mix sur --bg : le fondu suit le thème sans valeur codée en dur. */
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg) 75%, transparent) 55%, var(--bg) 100%);
}
/* Voile derrière le texte : garantit le contraste du titre même si l'illustration
   est plus chargée que prévu à cet endroit. Clair en mode clair, sombre en mode
   sombre — dans les deux cas il pousse le fond à l'opposé de la couleur du texte. */
/* Voile allégé (0,72 -> 0,34) depuis le passage de l'illustration à 50 % : le
   contraste du titre atteint 10:1 sans lui, il n'a donc plus à compenser quoi que
   ce soit — il ne servait plus qu'à délaver l'image une seconde fois. */
.page-head--vitrine::before {
  background: radial-gradient(58% 50% at 50% 38%, rgba(255, 253, 255, 0.34) 0%, rgba(255, 250, 255, 0.12) 58%, transparent 82%);
}
/* La surcharge sombre de ce voile vit dans la section « THÈME SOMBRE » en bas de
   fichier : la règle générique .page-head::before y est redéfinie, et à
   spécificité égale c'est le dernier déclaré qui gagne. */
.page-head--vitrine .container { position: relative; z-index: 2; }

/* Toutes les pages secondaires partagent désormais le même format d'en-tête
   (illustration + titre centré, sans fil d'Ariane). Seule la largeur du corps
   varie : les pages de texte long gardent `container-narrow` pour la lisibilité.
   L'ancienne variante `--utilitaire` a disparu avec ses derniers usages.

   Un en-tête en `container-narrow` doit quand même laisser le titre respirer :
   « Politique de confidentialité » sur 29 caractères tiendrait mal en 20ch. */
.page-head--vitrine .container-narrow h1 {
  font-size: clamp(32px, 4.6vw, 58px);
  max-width: 24ch;
}

/* ============================================================================
   PAGE 404
   La seule page où l'agence peut montrer son métier plutôt que s'excuser.
   Le chiffre est traité comme les chiffres-clés du site (le « 50+ » de l'accueil) :
   même dégradé, même graisse — c'est ce qui la rattache à l'identité au lieu d'en
   faire une page d'erreur générique.
   ============================================================================ */
.erreur-head { padding-bottom: var(--sp-7); }

.erreur-chiffre {
  /* Volontairement énorme : à cette échelle le chiffre devient une texture, pas
     une information — d'où l'aria-hidden dans le gabarit, le <h1> porte le sens. */
  font-size: clamp(120px, 26vw, 340px);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.045em;
  background: linear-gradient(96deg, var(--purple-deep) 10%, var(--purple) 55%, var(--lavender) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: var(--sp-4);
  user-select: none;
}

.erreur-titre {
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.1; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink-strong);
  max-width: 18ch; margin-inline: auto;
}
.erreur-titre em {
  font-style: normal;
  background: linear-gradient(96deg, var(--purple-deep), var(--purple));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.erreur-sub { max-width: 52ch; }

.erreur-actions {
  margin-top: var(--sp-6);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
}

/* ---- Suggestions ---- */
.erreur-suggestions { padding-top: var(--sp-6); }
.erreur-section-head { text-align: center; margin-inline: auto; }
.erreur-section-head h2 {
  font-size: clamp(24px, 3vw, 36px); font-weight: 700; color: var(--ink-strong);
  letter-spacing: -0.015em;
}
.erreur-section-head h2 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--purple-deep), var(--purple));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.erreur-section-head p { margin-top: var(--sp-2); color: var(--ink-soft); font-size: 16.5px; }

.erreur-retour { margin-top: var(--sp-6); text-align: center; font-size: 15.5px; }
.erreur-retour a { color: var(--purple-deep); font-weight: 600; transition: color 0.22s; }
.erreur-retour a:hover { color: var(--purple); }

html[data-theme="dark"] .erreur-titre em,
html[data-theme="dark"] .erreur-section-head h2 em {
  background: linear-gradient(96deg, #c9a0f2, #e08cf5);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="dark"] .erreur-chiffre {
  background: linear-gradient(96deg, #a86ee0 10%, #c9a0f2 55%, #e08cf5 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="dark"] .erreur-retour a { color: #c9a0f2; }


/* Fil d'Ariane : sur une page secondaire, l'utilisateur doit toujours voir la sortie. */
.breadcrumb {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-5); font-size: 14px; color: var(--ink-soft);
}
.breadcrumb a {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--ink-soft); transition: color 0.25s;
}
.breadcrumb a:hover { color: var(--purple-deep); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ============ CORPS DE PAGE ============ */
.page-body { padding: clamp(var(--sp-5), 3vw, var(--sp-6)) 0 clamp(var(--sp-8), 8vw, var(--sp-9)); }

/* Les filtres trient les cartes : ils leur appartiennent, pas au titre. Le
   padding-bottom de .page-head et le padding-top de .page-body cumulaient 112px
   sous la barre, qui se retrouvait orpheline entre le sous-titre et la grille.
   On resserre en dessous, on garde l'air au-dessus. */
.page-head:has(.projets-filtres) { padding-bottom: var(--sp-5); }

.legal-block { margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-7)); }
.legal-block:last-child { margin-bottom: 0; }
.legal-block h2 {
  font-size: clamp(21px, 2.4vw, 27px); font-weight: 700;
  color: var(--ink-strong); margin-bottom: var(--sp-4); letter-spacing: -0.01em;
}
.legal-block h3 {
  font-size: 17px; font-weight: 600; color: var(--ink-strong);
  margin: 24px 0 10px;
}
.legal-block p,
.legal-block li { font-size: 16px; line-height: 1.72; color: var(--ink-soft); }
.legal-block p + p { margin-top: var(--sp-3); }
.legal-block a { color: var(--purple-deep); text-decoration: underline; text-underline-offset: 3px; }
.legal-block a:hover { color: var(--purple); }
.legal-block ul { margin: 14px 0 0; padding-left: 0; list-style: none; }
.legal-block ul li {
  position: relative; padding-left: 26px; margin-bottom: var(--sp-2);
}
.legal-block ul li::before {
  content: ""; position: absolute; left: 8px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--purple);
}

/* Tableau de données (mentions légales, cookies) */
.legal-table {
  width: 100%; margin-top: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; background: var(--card);
}
.legal-row {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 4px 20px; padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
}
.legal-row:last-child { border-bottom: none; }
.legal-row dt { font-weight: 600; color: var(--ink-strong); }
.legal-row dd { color: var(--ink-soft); margin: 0; }
@media (max-width: 620px) {
  .legal-row { grid-template-columns: 1fr; gap: 2px; }
}

.legal-updated {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-soft);
}

/* ============ FORMULAIRE DE CONTACT ============ */
.contact-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }

.form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3.4vw, 42px);
  box-shadow: var(--card-shadow);
}

.field { margin-bottom: var(--sp-5); }
.field:last-of-type { margin-bottom: var(--sp-5); }

.field label {
  display: block; margin-bottom: var(--sp-2);
  font-size: 15px; font-weight: 600; color: var(--ink-strong);
}
.field .optional { font-weight: 500; color: var(--ink-soft); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: inherit; font-size: 16px; /* 16px : évite le zoom automatique iOS */
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
}
.field textarea { min-height: 138px; resize: vertical; line-height: 1.6; }
.field select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6377' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  padding-right: 44px;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(184, 77, 214, 0.4); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--purple);
  /* background-color, pas le raccourci `background` : celui-ci effacerait
     l'image de flèche du select et ses réglages de position. */
  background-color: var(--card);
  box-shadow: 0 0 0 4px rgba(184, 77, 214, 0.16);
}

/* État d'erreur : la bordure rouge ne porte pas seule l'information (daltonisme) —
   le message texte sous le champ la double systématiquement. */
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #d3455b;
  /* background-color : le raccourci ferait disparaître la flèche du select
     précisément au moment où le champ demande l'attention. */
  background-color: rgba(211, 69, 91, 0.04);
}
.field.has-error input:focus-visible,
.field.has-error textarea:focus-visible {
  box-shadow: 0 0 0 4px rgba(211, 69, 91, 0.16);
}
.field-error {
  display: none;
  margin-top: var(--sp-2); font-size: 14px; font-weight: 500; color: #c13650;
}
.field-error::before { content: "⚠ "; }
.field.has-error .field-error { display: block; }

.field-hint { margin-top: var(--sp-2); font-size: 13.5px; color: var(--ink-soft); }

/* Piège à robots : invisible pour l'humain, rempli par les scripts automatiques.
   `position: absolute` + `left: -9999px` plutôt que `display: none`, que certains
   robots savent détecter. aria-hidden + tabindex="-1" l'écartent des lecteurs d'écran. */
.hp-field {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) 20px; }
.form-actions .btn-primary { border: none; cursor: pointer; font-family: inherit; }
.form-actions .btn-primary[disabled] { opacity: 0.6; cursor: progress; }

/* Résumé d'erreurs en tête de formulaire : role="alert" pour l'annonce vocale,
   tabindex="-1" pour recevoir le focus au moment de la soumission invalide. */
.form-summary {
  display: none;
  margin-bottom: var(--sp-5); padding: 15px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(211, 69, 91, 0.4);
  background: rgba(211, 69, 91, 0.07);
  font-size: 15px; color: #a92e46; font-weight: 500;
}
.form-summary.is-visible { display: block; }
.form-summary:focus-visible { outline: 2px solid #d3455b; outline-offset: 2px; }
.form-summary ul { margin: 8px 0 0; padding-left: 20px; }
.form-summary li { margin-bottom: 4px; }
.form-summary a { color: #a92e46; text-decoration: underline; }

/* Confirmation après envoi */
.form-success {
  display: none;
  text-align: center; padding: clamp(30px, 4vw, 48px) 20px;
}
.form-success.is-visible { display: block; }
.form-success .success-mark {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--purple-deep), var(--purple));
  box-shadow: 0 14px 34px -10px rgba(96, 42, 150, 0.5);
}
.form-success .success-mark svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.form-success h2 { font-size: clamp(23px, 2.8vw, 30px); font-weight: 700; color: var(--ink-strong); margin-bottom: var(--sp-3); }
.form-success p { font-size: 16.5px; color: var(--ink-soft); max-width: 46ch; margin: 0 auto; }
.form-success .btn-ghost { margin-top: var(--sp-5); }

/* ============ COLONNE LATÉRALE CONTACT ============ */
.contact-aside { display: flex; flex-direction: column; gap: var(--sp-4); }

.aside-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: var(--card-shadow);
}
.aside-card h2 { font-size: 18px; font-weight: 700; color: var(--ink-strong); margin-bottom: var(--sp-4); }

.contact-direct { display: flex; flex-direction: column; gap: var(--sp-3); }
.contact-direct a,
.contact-direct span {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 24px;
  font-size: 15.5px; color: var(--ink-soft);
  transition: color 0.22s;
}
.contact-direct a:hover { color: var(--purple-deep); }
.contact-direct svg {
  flex-shrink: 0; width: 19px; height: 19px;
  fill: none; stroke: var(--purple); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.aside-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.aside-list li { display: flex; gap: var(--sp-3); font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.aside-list svg { flex-shrink: 0; width: 19px; height: 19px; margin-top: 1px; }
.aside-list .check-bg { fill: rgba(89, 216, 201, 0.22); stroke: none; }
.aside-list .check-mark { fill: none; stroke: #1f9e8f; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ============ THÈME SOMBRE ============ */
html[data-theme="dark"] .page-head::before {
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(184, 77, 214, 0.2) 0%, transparent 70%),
    linear-gradient(180deg, #1d1430 0%, var(--bg) 100%);
}
/* Variante vitrine : ici le fond est une illustration, pas un dégradé. Le
   ::before ne sert plus qu'à assombrir la zone du texte pour garantir le
   contraste du titre clair. Déclaré après la règle générique ci-dessus, qu'il
   doit écraser à spécificité égale. */
html[data-theme="dark"] .page-head--vitrine::before {
  background: radial-gradient(58% 50% at 50% 38%, rgba(12, 8, 18, 0.3) 0%, rgba(12, 8, 18, 0.12) 58%, transparent 82%);
}
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .aside-card,
html[data-theme="dark"] .legal-table { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--ink);
}
html[data-theme="dark"] .field input:focus-visible,
html[data-theme="dark"] .field select:focus-visible,
html[data-theme="dark"] .field textarea:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--purple);
}
/* La règle groupée ci-dessus utilise la propriété raccourcie `background`, ce qui
   réinitialise repeat/position/size. Sans les redéclarer ici, la flèche du select
   repartait en mosaïque sur toute la largeur du champ (`repeat` + `auto`). */
html[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a99fb8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-color: rgba(255, 255, 255, 0.04);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
/* Le focus change la couleur de fond : sans cette règle, le raccourci du bloc
   :focus-visible effacerait de nouveau la flèche. */
html[data-theme="dark"] .field select:focus-visible {
  background-color: rgba(255, 255, 255, 0.07);
}
html[data-theme="dark"] .field-error { color: #ff8ba0; }
html[data-theme="dark"] .form-summary { color: #ff8ba0; background: rgba(211, 69, 91, 0.14); }
html[data-theme="dark"] .form-summary a { color: #ff8ba0; }
html[data-theme="dark"] .legal-block a { color: var(--lavender); }
html[data-theme="dark"] .aside-list .check-mark { stroke: #59d8c9; }

/* ============ MOUVEMENT RÉDUIT ============ */
@media (prefers-reduced-motion: reduce) {
  .field input, .field select, .field textarea { transition: none; }
}