/* =========================================================================
   HLS QSE — Surcharge de thème HESK
   -------------------------------------------------------------------------
   IMPORTANT : ne jamais modifier app.css ni les fichiers de theme/hesk3/.
   Ils sont écrasés à chaque mise à jour de HESK et par le personnalisateur
   de thème de l'administration. Toute personnalisation visuelle vient ici.
   Ce fichier est chargé en dernier via head.txt.

   -------------------------------------------------------------------------
   RÈGLE DE CONDUITE, apprise à mes frais (version du 26 juillet 2026)
   -------------------------------------------------------------------------
   La première version de ce fichier surchargeait l'échelle typographique et
   les espacements de HESK. Trois défauts en ont résulté :

   1. CHEVAUCHEMENT DE TEXTE. HESK positionne la ligne « Les champs
      obligatoires… » avec une marge NÉGATIVE :
        .article__heading + .article-heading-tip { margin-top: -32px }
      calibrée sur le `margin: 0 0 32px` du titre. Ma surcharge réduisait ce
      titre à 10px de marge basse : la ligne remontait de 32px dans un espace
      qui n'en réservait que 10.

   2. EFFET « TROP ZOOMÉ ». La base de HESK est `.wrapper { font-size: 14px }`.
      Je passais le corps des articles à 16px, les titres jusqu'à 29px contre
      20px, et je réduisais le conteneur de 1070px à 760px.

   3. PAGES D'ARTICLES DÉGRADÉES, conséquence du même excès.

   => On ne touche PLUS : `line-height` global, `font-size` des titres,
      marges de `.article__heading` et `.article-heading-tip`, largeur de
      `.contr`, marqueur de champ obligatoire (l'astérisque de HESK est
      positionné en absolu, le remplacer casse le calage).

   => Ce qui est légitime : police, couleurs, rayons, ombres, états de focus,
      et un gain de lisibilité MESURÉ sur le corps de texte des articles.

   Les règles spécifiques à une page sont préfixées par la classe que HESK
   pose sur <html> (voir theme/hesk3/customer/inc/header.inc.php ligne 58) :
   page-view-article, page-create-ticket, page-view-category, page-login…
   ========================================================================= */

:root {
  /* --- Tokens du site vitrine --- */
  --hls-green: #059669;
  --hls-green-d: #047857;   /* 5,48:1 sur blanc — utilisé dès qu'il y a du texte */
  --hls-green-light: #f0fdf4;
  --hls-dark: #080f1e;
  --hls-dark-2: #111827;
  --hls-text: #374151;
  --hls-muted: #6b7280;
  --hls-border: #e8e0d8;
  --hls-radius: 12px;
  --hls-radius-sm: 8px;
  --hls-shadow: 0 4px 24px rgba(0, 0, 0, .08);
  --hls-shadow-lg: 0 8px 40px rgba(0, 0, 0, .16);
  --hls-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Lato, Arial, sans-serif;

  /* --- Remappage des variables de thème HESK --- */
  --primary: #080f1e;
  --secondary: #059669;
  --surface: #ffffff;
  --foreground: #080f1e;
  --main-background: #f7faf8;
  --input-bg: #ffffff;
  --input-clr: #111827;
}

/* =========================================================================
   1. Police
   Uniquement la famille. Ni taille, ni interligne, ni interlettrage :
   HESK les a calibrés, et Inter a une hauteur d'x plus grande que Lato —
   toucher aux tailles produit immédiatement un effet « zoomé ».
   ========================================================================= */
body,
button,
input,
select,
textarea,
.btn,
.wrapper,
.main__content,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hls-font);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================================
   2. Boutons — reprise de .btn-primary du site
   ========================================================================= */
.btn,
.btn--blue,
.btn-action {
  font-family: var(--hls-font);
  border-radius: var(--hls-radius);
  transition: background-color .2s, border-color .2s, transform .15s, box-shadow .2s;
}

.btn--blue,
.btn-action {
  background-color: var(--hls-green-d);
  border-color: var(--hls-green-d);
  color: #fff;
}

.btn--blue:hover,
.btn--blue:focus-visible,
.btn-action:hover,
.btn-action:focus-visible {
  background-color: #065f46;
  border-color: #065f46;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(4, 120, 87, .28);
}

.btn--blue:active,
.btn-action:active {
  transform: translateY(0) scale(.99);
  transition-duration: .06s;
}

.btn--blue-border,
.btn-border {
  border-radius: var(--hls-radius);
  border: 1.5px solid rgba(4, 120, 87, .45);
  color: var(--hls-green-d);
  background: transparent;
}

.btn--blue-border:hover,
.btn-border:hover {
  border-color: var(--hls-green-d);
  background: rgba(4, 120, 87, .07);
}

.btn-link,
.btn-empty {
  color: var(--hls-green-d);
}

/* =========================================================================
   3. Champs de formulaire
   Rayons et anneau de focus. Ni hauteur ni taille de police imposées :
   c'est ce qui déformait la mise en page du formulaire de demande.
   ========================================================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
select,
textarea,
.form-control {
  border-radius: var(--hls-radius-sm);
  font-family: var(--hls-font);
  transition: border-color .18s, box-shadow .18s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--hls-green);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .14);
  outline: none;
}

/* Visibilité du focus clavier — accessibilité (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--hls-green-d);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================================
   4. Cartes et blocs
   Rayons et ombres uniquement. Aucune marge, aucun remplissage : ce sont eux
   qui provoquaient les chevauchements.
   ========================================================================= */
.ticket,
.preview,
.block__head {
  border-radius: var(--hls-radius);
}

.ticket,
.preview {
  border: 1px solid var(--hls-border);
  box-shadow: var(--hls-shadow);
  background: #fff;
}

a.preview {
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

a.preview:hover,
a.preview:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--hls-shadow-lg);
  border-color: var(--hls-green);
}

.preview__title {
  color: var(--hls-dark);
  transition: color .2s;
}

a.preview:hover .preview__title {
  color: var(--hls-green-d);
}

.preview__text {
  color: var(--hls-muted);
}

/* =========================================================================
   5. Lisibilité du corps des articles
   C'est le contenu qui reçoit le plus de trafic organique, donc le seul
   endroit où j'accepte de toucher à la typographie — modérément.

   HESK utilise 14px / interligne 1,71. On passe à 15px / 1,72 : environ 7 %
   de plus, perceptible en confort de lecture, sans effet de loupe. La version
   précédente montait à 16px avec un interligne de 1,78, d'où le rendu jugé
   trop zoomé.

   La largeur du conteneur (.contr, 1070px) n'est PAS touchée. On limite
   seulement la longueur de ligne du texte courant, ce qui est la bonne façon
   de faire : le reste de la page garde sa mise en page.
   ========================================================================= */
html.page-view-article .block--description.browser-default,
html.page-view-article .ticket--article .block--description {
  font-size: 15px;
  line-height: 1.72;
  color: var(--hls-text);
  max-width: 72ch;
}

html.page-view-article .block--description p {
  margin-bottom: 1em;
}

html.page-view-article .block--description ul,
html.page-view-article .block--description ol {
  margin: 0 0 1.1em 1.35em;
}

html.page-view-article .block--description li {
  margin-bottom: .4em;
}

html.page-view-article .block--description a {
  color: var(--hls-green-d);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

html.page-view-article .block--description a:hover {
  color: #065f46;
}

html.page-view-article .block--description strong {
  color: var(--hls-dark);
}

html.page-view-article .block--description blockquote {
  margin: 1.4em 0;
  padding: 12px 18px;
  background: var(--hls-green-light);
  border-left: 3px solid var(--hls-green);
  border-radius: 0 var(--hls-radius-sm) var(--hls-radius-sm) 0;
}

html.page-view-article .block--description code {
  background: #f3f4f6;
  border-radius: 4px;
  padding: .12em .38em;
}

html.page-view-article .block--description table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3em 0;
}

html.page-view-article .block--description th,
html.page-view-article .block--description td {
  border: 1px solid var(--hls-border);
  padding: 8px 11px;
  text-align: left;
}

html.page-view-article .block--description th {
  background: var(--hls-green-light);
  color: var(--hls-dark);
}

/* =========================================================================
   6. Formulaire de demande
   Encadré et champs soignés, portés par la classe de page pour ne rien
   affecter ailleurs. Aucune reprise des marges de titre : c'est ce qui
   produisait le chevauchement avec « Les champs obligatoires… ».
   ========================================================================= */
html.page-create-ticket .form-submit-ticket {
  background: #fff;
  border: 1px solid var(--hls-border);
  border-radius: 16px;
  padding: 30px 32px 26px;
  box-shadow: 0 1px 2px rgba(8, 15, 30, .05), 0 10px 30px rgba(8, 15, 30, .07);
}

html.page-create-ticket .form-submit-ticket .form-control {
  background: #fcfdfc;
  border-radius: 10px;
}

html.page-create-ticket .form-submit-ticket .form-control:focus {
  background: #fff;
}

/* Zone de dépôt des pièces jointes */
html.page-create-ticket .param--attach .attach {
  border: 1.5px dashed rgba(5, 150, 105, .38);
  border-radius: var(--hls-radius);
  background: var(--hls-green-light);
  transition: border-color .2s, background .2s;
}

html.page-create-ticket .param--attach .attach:hover {
  border-color: var(--hls-green);
  background: #e9fbf1;
}

/* Captcha */
html.page-create-ticket .captcha-block {
  background: #fafaf8;
  border: 1px solid var(--hls-border);
  border-radius: var(--hls-radius);
  padding: 16px;
}

/* Bouton d'envoi : c'est le point d'arrivée du tunnel de devis du site */
html.page-create-ticket .form-submit-ticket .btn-full {
  border-radius: var(--hls-radius);
}

@media (max-width: 719px) {
  html.page-create-ticket .form-submit-ticket {
    padding: 20px 16px 18px;
    border-radius: 12px;
  }
}

/* =========================================================================
   7. Suggestions d'articles pendant la saisie
   ========================================================================= */
.suggest-preview {
  border-radius: var(--hls-radius-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.suggest-preview:hover {
  transform: translateY(-2px);
  border-color: var(--hls-green);
  box-shadow: var(--hls-shadow);
}

.suggest-preview__title {
  color: var(--hls-dark);
}

.suggest-preview__text {
  color: var(--hls-muted);
}

/* Suggestion de correction d'adresse email */
.email-suggestion:not(:empty) {
  margin-top: 6px;
  padding: 8px 12px;
  background: #fffbeb;
  border-left: 3px solid #d97706;
  border-radius: 0 var(--hls-radius-sm) var(--hls-radius-sm) 0;
  color: #78350f;
}

/* =========================================================================
   8. Divers
   ========================================================================= */
.wrapper {
  background: var(--main-background);
}

.icon-in-circle {
  background: var(--hls-green-light);
  color: var(--hls-green-d);
}

.lightgrey {
  color: var(--hls-muted);
}

a {
  color: var(--hls-green-d);
}

a:hover {
  color: #065f46;
}

.notification,
.notice-flash {
  border-radius: var(--hls-radius);
}

.help-search input[type="text"],
.help-search input[type="search"] {
  border-radius: 50px;
}

.loading-overlay {
  backdrop-filter: blur(3px);
  background: rgba(255, 255, 255, .78);
}

/* =========================================================================
   9. Respect de la préférence système de réduction des animations
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .btn--blue:hover,
  .btn-action:hover,
  a.preview:hover,
  .suggest-preview:hover {
    transform: none;
  }
}