/* vwp — design system par jetons (§4.4)
   LA CHARTE EXISTANTE EST CONSERVEE (decision Adrien, 2026-09-30) : couleurs et logo
   relevés dans les options Avada du site, pas redessinés.

     primary_color   #6796BF   le bleu de la marque, celui des disques du logo
     link_color      #000000   noir, celui du mot « Webmaster Pro »
     sep_color       #E0DEDE   filets
     footer_bg       #E9EAEE   fond de pied
     footer_text     #4C4C4C   texte secondaire
     testimonial_bg  #F6F6F6   surface alternative
     typographie     Raleway, repli Arial / Helvetica

   UN SEUL ECART, et il est calcule : #6796BF rend 3,14 sur blanc. C est suffisant pour un
   aplat ou un element d interface, PAS pour du texte (4,5 requis) — et le bouton bleu actuel
   sert du blanc a 3,14, donc illisible aux normes. La couleur de marque est donc conservee
   telle quelle pour les aplats (--marque), et une variante de MEME TEINTE, simplement plus
   foncee, porte le texte et les liens (--accent #4578A4, 4,69 sur blanc). A l oeil la
   difference est minime ; au controle elle fait passer toute la typographie.

   Regle absolue (§4.6) : aucune couleur n est declaree UNIQUEMENT dans un bloc de media query.
*/

:root{
  /* --- fond et surfaces (charte) --- */
  --ground:        #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F6F6F6;
  --pied-bg:       #E9EAEE;

  /* --- encre : le noir du logo, puis la rampe --- */
  --ink:           #000000;
  --ink-2:         #4C4C4C;
  --ink-3:         #6B6B6B;

  /* --- filets --- */
  --rule:          #D0CECE;
  --rule-soft:     #E0DEDE;

  /* --- la couleur de marque : aplats, disques, elements graphiques. JAMAIS du texte. --- */
  --marque:        #6796BF;
  --marque-soft:   #EAF1F7;

  /* --- accent : meme teinte que la marque, assez foncee pour porter du texte --- */
  --accent:        #42729D;
  --accent-hover:  #38627F;
  --accent-soft:   #EAF1F7;
  --on-accent:     #FFFFFF;
  --focus:         #38627F;

  /* --- signal : etats et compteurs, jamais decoratif --- */
  --signal:        #8A5108;
  --signal-soft:   #FBF1E0;
  --on-signal:     #FFFFFF;

  /* --- typographie (charte : Raleway) --- */
  --font-titre: "Raleway", Arial, Helvetica, sans-serif;
  --font-texte: "Raleway", Arial, Helvetica, sans-serif;
  --font-data:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- echelle fluide : supprime les media queries de taille de texte --- */
  --step--1: clamp(.82rem, .79rem + .12vw, .89rem);
  --step-0:  clamp(.95rem, .91rem + .18vw, 1.06rem);
  --step-1:  clamp(1.14rem, 1.07rem + .32vw, 1.33rem);
  --step-2:  clamp(1.37rem, 1.25rem + .55vw, 1.78rem);
  --step-3:  clamp(1.64rem, 1.44rem + .92vw, 2.37rem);
  --step-4:  clamp(1.97rem, 1.63rem + 1.5vw, 3.16rem);

  /* --- espace et forme --- */
  --gap:          1rem;
  --gap-2:        1.5rem;
  --section:      clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --wrap:         76rem;
  --wrap-narrow:  42rem;
  --radius:       4px;
  --radius-2:     8px;
  --shadow:       0 1px 2px rgb(0 0 0 / .06), 0 1px 8px rgb(0 0 0 / .04);

  /* --- toute mesure partagee entre composants devient un jeton (§4.4) --- */
  --header-h:     84px;   /* hauteur du logo de la charte : 84 px */
  --tap:          44px;

  color-scheme: light;
}

/* Theme sombre : la charte n en definit pas. Les roles sont inverses en gardant la teinte
   de la marque, qui s eclaircit pour rester lisible sur fond sombre. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:       #14171A;
    --surface:      #1B1F23;
    --surface-2:    #23282D;
    --pied-bg:      #1B1F23;
    --ink:          #F2F4F6;
    --ink-2:        #C2C7CC;
    --ink-3:        #9BA2A9;
    --rule:         #3A4148;
    --rule-soft:    #272C31;
    --marque:       #6796BF;
    --marque-soft:  #1C2A36;
    --accent:       #8FB9DC;
    --accent-hover: #AECDE8;
    --accent-soft:  #1C2A36;
    --on-accent:    #0F1215;
    --focus:        #AECDE8;
    --signal:       #E0A64B;
    --signal-soft:  #2A2113;
    --on-signal:    #0F1215;
    color-scheme: dark;
  }
}

:root[data-theme="dark"]{
  --ground:       #14171A;
  --surface:      #1B1F23;
  --surface-2:    #23282D;
  --pied-bg:      #1B1F23;
  --ink:          #F2F4F6;
  --ink-2:        #C2C7CC;
  --ink-3:        #9BA2A9;
  --rule:         #3A4148;
  --rule-soft:    #272C31;
  --marque:       #6796BF;
  --marque-soft:  #1C2A36;
  --accent:       #8FB9DC;
  --accent-hover: #AECDE8;
  --accent-soft:  #1C2A36;
  --on-accent:    #0F1215;
  --focus:        #AECDE8;
  --signal:       #E0A64B;
  --signal-soft:  #2A2113;
  --on-signal:    #0F1215;
  color-scheme: dark;
}