/* ==========================================================================
   VIGNELLI — DESIGN WEB INDUSTRIEL
   Charte graphique du site À LA PELLE.
   Variables, grille 12 colonnes, composants de base.

   Toute page du site lie ce fichier et n'ajoute que son CSS spécifique.
   N'écrivez jamais une couleur ni une taille en dur : utilisez les variables.

   Palette révisée le 15/08/2026 à la demande d'Arnaud : dominance bleu et vert.
   ========================================================================== */

/* --- 1. VARIABLES ------------------------------------------------------- */

:root {
  /* Palette — quatre valeurs, pas une de plus */
  --vg-bleu: #0e3a54;   /* dominante : texte, aplats profonds, en-tête, pied */
  --vg-vert: #157f5f;   /* dominante secondaire : action, signalisation, filets */
  --vg-clair: #eef2f4;  /* fond de section, séparation des blocs */
  --vg-blanc: #ffffff;  /* fond principal, texte sur aplat foncé */

  /* Nuances de service, dérivées des deux dominantes — pas de nouvelles teintes */
  --vg-bleu-fonce: #08283a;
  --vg-vert-fonce: #0f5f46;
  --vg-filet: rgba(14, 58, 84, 0.16);
  --vg-attenue: rgba(14, 58, 84, 0.72); /* 5,2:1 sur blanc — reste lisible */

  /* Typographie — une seule famille */
  --vg-police: "Helvetica Neue", Helvetica, Inter, Univers, Arial, sans-serif;

  /* Échelle d'espacement — multiples de 8, aucune valeur hors échelle */
  --vg-e1: 8px;
  --vg-e2: 16px;
  --vg-e3: 24px;
  --vg-e4: 32px;
  --vg-e5: 48px;
  --vg-e6: 64px;
  --vg-e7: 96px;
  --vg-e8: 128px;

  /* Grille */
  --vg-conteneur: 1280px;
  --vg-gouttiere: 24px;
  --vg-marge: clamp(24px, 5vw, 96px);

  /* Longueur de ligne confortable : 65 à 75 caractères */
  --vg-mesure: 68ch;

  /* Transitions — états uniquement, jamais de mise en scène */
  --vg-transition: 150ms ease;
}

/* --- 2. BASE ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--vg-blanc);
  color: var(--vg-bleu);
  font-family: var(--vg-police);
  font-size: 1rem;
  font-weight: 400;
  /* ⭐ AÉRATION DEMANDÉE PAR ARNAUD LE 28/08/2026, ET POURQUOI C'EST ICI.
     Il voulait un retour à la ligne après chaque point, pour aérer.
     ⛔ Mesuré avant d'écrire : la mesure du site est de 68 signes, et la
        phrase médiane du site en fait 80. Sur ordinateur 57 % des phrases
        déborderaient et se couperaient toutes seules ; sur téléphone 83 %.
        Le lecteur n'aurait plus distingué un retour voulu d'un repli subi,
        et l'effet n'aurait été obtenu qu'une fois sur deux.
     ⭐ L'interligne donne le même air, sur les 63 pages d'un coup, sans
        toucher un seul mot — et s'annule en une ligne. 1,65 → 1,78. */
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bords nets partout : c'est la signature de la charte. */
button,
input,
select,
textarea,
.vg-bouton,
.vg-carte,
.vg-champ {
  border-radius: 0;
}

/* Focus clavier visible — ne jamais supprimer. */
:focus-visible {
  outline: 2px solid var(--vg-bleu);
  outline-offset: 2px;
}

/* ⛔ ET SUR LES APLATS BLEUS, CET ANNEAU ÉTAIT INVISIBLE.
   Le pied de page et les bandes d'affirmation ont --vg-bleu POUR FOND :
   l'anneau et le fond avaient la même valeur, #0e3a54. Contraste 1:1, sur
   758 liens de pied. Un visiteur au clavier perdait toute trace de sa
   position pendant douze tabulations, sur chacune des 63 pages.
   Échec WCAG 2.4.7, relevé par audit le 27/08/2026, corrigé le 28.
   ⚠ .vg-bande est traitée en même temps : elle a le même fond, et le jour
      où on y met un lien le défaut serait revenu sans prévenir. */
.vg-pied :focus-visible,
.vg-bande :focus-visible {
  outline-color: var(--vg-blanc);
}

/* --- 3. TYPOGRAPHIE ----------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--vg-e3);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.1;
}

h3 {
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p {
  /* ⭐ 24 px → 32 px, le pas suivant de l'échelle. Deux paragraphes se
     séparent maintenant à l'œil sans qu'on ait à lire pour le voir.
     ⚠ On reste sur un pas de la grille : une valeur libre casserait le
        rythme vertical de toute la charte. */
  margin: 0 0 var(--vg-e4);
  max-width: var(--vg-mesure);
}

/* Chapô — le paragraphe d'ouverture d'une section */
.vg-chapo {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: var(--vg-mesure);
}

/* Étiquette — surtitre technique en majuscules */
.vg-etiquette {
  display: block;
  margin: 0 0 var(--vg-e2);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Numéro de section — 01, 02, 03. Ancre la lecture. */
.vg-numero {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--vg-attenue);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--vg-transition);
}

a:hover {
  color: var(--vg-vert-fonce);
}

/* --- 4. GRILLE 12 COLONNES ---------------------------------------------- */

.vg-conteneur {
  width: 100%;
  max-width: var(--vg-conteneur);
  margin-inline: auto;
  padding-inline: var(--vg-marge);
}

.vg-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--vg-gouttiere);
}

.vg-col-3 { grid-column: span 3; }
.vg-col-4 { grid-column: span 4; }
.vg-col-6 { grid-column: span 6; }
.vg-col-8 { grid-column: span 8; }
.vg-col-12 { grid-column: span 12; }

/* En dessous de 900px, tout repasse en pleine largeur : sous 3 colonnes,
   le texte n'est plus lisible. */
@media (max-width: 900px) {
  .vg-col-3,
  .vg-col-4,
  .vg-col-6,
  .vg-col-8 {
    grid-column: span 12;
  }
}

/* --- 5. SECTIONS -------------------------------------------------------- */

/* L'air est le matériau principal : une section respire à 96px minimum. */
.vg-section {
  padding-block: var(--vg-e7);
}

@media (min-width: 1100px) {
  .vg-section {
    padding-block: var(--vg-e8);
  }
}

/* Alterner blanc et clair pour rythmer le défilement. */
.vg-section--clair {
  background: var(--vg-clair);
}

.vg-section--fonce {
  background: var(--vg-bleu);
  color: var(--vg-blanc);
}

.vg-section--fonce .vg-numero {
  color: rgba(255, 255, 255, 0.72);
}

/* Bande d'affirmation — une phrase, pleine largeur, sur aplat. */
.vg-bande {
  padding-block: var(--vg-e5);
  background: var(--vg-bleu);
  color: var(--vg-blanc);
}

/* Variante accent : aplat vert, texte blanc (4,9:1 — conforme AA). */
.vg-bande--accent {
  background: var(--vg-vert);
  color: var(--vg-blanc);
}

.vg-bande p {
  margin: 0;
  max-width: none;
  font-size: 1.125rem;
}

/* Filet de titre — trait d'accent au-dessus d'une section. */
.vg-filet-accent {
  width: 64px;
  height: 4px;
  margin-bottom: var(--vg-e3);
  background: var(--vg-vert);
}

/* --- 6. BOUTONS --------------------------------------------------------- */

.vg-bouton {
  display: inline-block;
  padding: var(--vg-e2) var(--vg-e4);
  border: 1px solid var(--vg-bleu);
  background: var(--vg-bleu);
  color: var(--vg-blanc);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  transition: background var(--vg-transition), color var(--vg-transition),
    border-color var(--vg-transition);
}

/* Principal — un seul par écran. Le vert signale l'action, il ne décore pas. */
.vg-bouton--principal {
  border-color: var(--vg-vert);
  background: var(--vg-vert);
  color: var(--vg-blanc);
}

.vg-bouton--principal:hover {
  border-color: var(--vg-vert-fonce);
  background: var(--vg-vert-fonce);
  color: var(--vg-blanc);
}

/* Secondaire — filet bleu, fond transparent. */
.vg-bouton--secondaire {
  background: transparent;
  color: var(--vg-bleu);
}

.vg-bouton--secondaire:hover {
  background: var(--vg-bleu);
  color: var(--vg-blanc);
}

/* Au survol, un bouton s'assombrit ou s'inverse. Il ne se soulève pas,
   ne grandit pas, ne change pas de forme. */

/* --- 6 bis. BOUTONS PARLANTS -------------------------------------------
   Demandés par Arnaud le 28/08/2026 : « on doit savoir à quoi ça sert rien
   qu'en le regardant ». On gagne en taille, en verbe et en flèche.
   ⛔ Ni arrondi, ni ombre, ni mouvement : la règle de la section 6 tient.
   ⛔ Ni opacité sur le texte : blanc plein sur --vg-vert donne 4,96:1 ;
      délavé à 82 % il tombe à 3,89:1 et ne passe plus. Mesuré deux fois,
      par Cowork le 28/08 à 16h25 et recalculé ici le même jour à 16h34. */

.vg-appel {
  display: inline-flex;
  align-items: center;
  gap: var(--vg-e5);
  padding: var(--vg-e3) var(--vg-e3) var(--vg-e3) var(--vg-e4);
  min-height: 44px;
  border: 1px solid var(--vg-vert);
  background: var(--vg-vert);
  color: var(--vg-blanc);
  font-family: inherit;
  text-decoration: none;
  transition: background var(--vg-transition), border-color var(--vg-transition);
}

.vg-appel:hover {
  background: var(--vg-vert-fonce);
  border-color: var(--vg-vert-fonce);
}

/* Le verbe. C'est lui qu'on lit à un mètre. */
.vg-appel-action {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}

/* La promesse. Distinguée par la taille et l'interlettrage — jamais par une
   opacité, voir le commentaire de contraste ci-dessus. */
.vg-appel-promesse {
  display: block;
  margin-top: var(--vg-e1);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vg-blanc);
}

/* La flèche : le seul signe universel de « ça mène quelque part ».
   Typographique, donc plate. Elle ne bouge pas au survol. */
.vg-appel-fleche {
  font-size: 1.75rem;
  line-height: 1;
}

/* Variante 2 — le godet, séparé du texte par un filet, comme les schémas. */
.vg-appel--outil { gap: 0; padding: 0; }

.vg-appel--outil .vg-appel-marque {
  display: grid;
  place-items: center;
  padding: 0 var(--vg-e3);
  border-right: 1px solid var(--vg-blanc);
}

.vg-appel--outil .vg-appel-dit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--vg-e3) var(--vg-e4);
}

.vg-appel--outil .vg-appel-action { font-size: 1.25rem; }

/* Variante 3 — le bandeau. Aplat et filets, comme tout le reste du site. */
.vg-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vg-e4);
  padding: var(--vg-e5) var(--vg-e4);
  background: var(--vg-bleu);
  color: var(--vg-blanc);
}

.vg-bandeau-dit { max-width: 44ch; }

.vg-bandeau-question {
  margin: 0 0 var(--vg-e1);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.vg-bandeau-precision { margin: 0; color: rgba(255, 255, 255, 0.8); } /* 8,26:1, conforme */

.vg-bandeau-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vg-e2);
}

.vg-bandeau-tel {
  color: var(--vg-blanc);
  text-decoration: none;
  border-bottom: 1px solid var(--vg-blanc);
  padding-bottom: 2px;
}

/* Téléphone : le bouton prend la largeur, la flèche reste à droite. */
@media (max-width: 560px) {
  .vg-appel { display: flex; width: 100%; justify-content: space-between; gap: var(--vg-e3); }
  .vg-appel-action { font-size: 1.125rem; }
  .vg-appel--outil { justify-content: flex-start; }
}


/* --- 7. CARTES ET FICHES PRODUITS --------------------------------------- */

/* Les blocs se distinguent par leur fond et leurs filets, pas par la profondeur. */
.vg-carte {
  border: 1px solid var(--vg-filet);
  background: var(--vg-blanc);
  padding: var(--vg-e4);
}

/* Image de produit : fond neutre, cadrage constant d'une fiche à l'autre. */
.vg-produit-image {
  aspect-ratio: 4 / 3;
  background: var(--vg-clair);
  margin: calc(var(--vg-e4) * -1) calc(var(--vg-e4) * -1) var(--vg-e3);
  object-fit: contain;
  width: calc(100% + var(--vg-e4) * 2);
}

/* Caractéristiques : libellé à gauche, valeur à droite, alignées d'une fiche
   à l'autre — c'est ce qui permet la comparaison en un coup d'oeil. */
.vg-caracteristiques {
  margin: var(--vg-e3) 0 0;
  border-top: 1px solid var(--vg-filet);
  font-size: 0.9375rem;
}

.vg-caracteristiques div {
  display: flex;
  justify-content: space-between;
  gap: var(--vg-e2);
  padding: var(--vg-e1) 0;
  border-bottom: 1px solid var(--vg-filet);
}

.vg-caracteristiques dt {
  color: var(--vg-attenue);
}

.vg-caracteristiques dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
}

/* --- 8. FORMULAIRES ----------------------------------------------------- */

.vg-champ-groupe {
  margin-bottom: var(--vg-e3);
}

/* Étiquette visible au-dessus du champ, jamais uniquement en texte d'aide. */
.vg-champ-groupe label {
  display: block;
  margin-bottom: var(--vg-e1);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vg-champ {
  width: 100%;
  padding: var(--vg-e2);
  border: 1px solid var(--vg-bleu);
  background: var(--vg-blanc);
  color: var(--vg-bleu);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  min-height: 44px;
  transition: border-color var(--vg-transition);
}

/* ⛔ CETTE RÈGLE PORTAIT `outline: none`, contre le commentaire ci-dessus
   qui dit « ne jamais supprimer ». Elle vise :focus — donc le clavier — et
   bat :focus-visible en spécificité : elle gagnait dans tous les cas.
   L'indication de focus des 21 champs se réduisait à un pixel de bordure,
   de la même couleur. ⚠ Pire : les boutons radio n'ont pas cette classe et
   GARDAIENT l'anneau — l'indication changeait de nature au milieu du même
   formulaire. Échec WCAG 2.4.11, relevé par audit le 27/08, corrigé le 28.
   ⭐ La bordure épaissie reste : box-sizing: border-box est posé plus haut,
      le champ ne bouge donc pas. L'anneau s'y ajoute, il ne la remplace pas. */
.vg-champ:focus {
  border-width: 2px;
}

/* Une erreur se signale par un filet épais et un texte explicite,
   pas par une couleur inventée hors palette. */
.vg-champ[aria-invalid="true"] {
  border-width: 3px;
}

.vg-erreur {
  display: block;
  margin-top: var(--vg-e1);
  font-size: 0.875rem;
  font-weight: 500;
}

/* --- 9. EN-TÊTE ET PIED DE PAGE ----------------------------------------- */

.vg-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vg-e3);
  padding-block: var(--vg-e3);
  border-bottom: 1px solid var(--vg-bleu);
}

.vg-nav {
  display: flex;
  align-items: center;
  gap: var(--vg-e4);
  font-size: 0.9375rem;
}

.vg-nav a {
  text-decoration: none;
}

.vg-pied {
  padding-block: var(--vg-e6);
  background: var(--vg-bleu);
  color: var(--vg-blanc);
}

.vg-pied a {
  color: var(--vg-blanc);
}

/* --- 10. UTILITAIRES ---------------------------------------------------- */

/* Lien d'évitement — premier élément du body, vers #contenu. */
.vg-evitement {
  position: absolute;
  left: -9999px;
  padding: var(--vg-e2) var(--vg-e3);
  background: var(--vg-vert);
  color: var(--vg-blanc);
  font-weight: 500;
}

.vg-evitement:focus {
  left: var(--vg-marge);
  top: var(--vg-e2);
  z-index: 10;
}

.vg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Aplat de protection sous du texte posé sur une photo. */
.vg-voile {
  position: relative;
  isolation: isolate;
}

.vg-voile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(14, 58, 84, 0.72);
}

/* Respecter le réglage système : ici le mouvement est déjà minimal. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}