/* ══════════════════════════════════════════════════════════════════════
   REVO PC · SOCLE DU THÈME « Relief et lumière » (2026)
   Commun au site (www), à la boutique (pc) et à l'espace compte :
   police, couleurs, ombres, base typographique, icônes.
   Clair par défaut. Sombre (doux, pas noir) avec <html data-theme="dark">.

   Ce fichier existe en trois exemplaires identiques :
     assets/socle.css · pc/assets/socle.css · compte/assets/socle.css
   Modifier celui de assets/ puis recopier (outil : .claude/outils/socle.js).
   ══════════════════════════════════════════════════════════════════════ */

/* Police hébergée sur le site (Google Sans Flex, licence OFL) : un fichier variable par alphabet, graisses 400 à 700 */
@font-face{font-family:'Google Sans Flex';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/google-sans-flex-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Google Sans Flex';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/google-sans-flex-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Police de secours aux mêmes proportions : le texte ne saute pas quand la vraie police arrive */
@font-face{font-family:'Revo Secours';src:local('Arial');ascent-override:93%;descent-override:24%;line-gap-override:0%;size-adjust:101%}

@property --tour{syntax:'<angle>';initial-value:0deg;inherits:false}

:root{
  color-scheme:light;
  --police:'Google Sans Flex','Revo Secours','Segoe UI',system-ui,-apple-system,sans-serif;

  /* Surfaces et textes */
  --fond:#F2F4F9;            /* fond de page : gris légèrement bleuté */
  --bloc:#FFFFFF;            /* tuiles */
  --creux:#F1F3F8;           /* zones en creux dans une tuile (champs, lignes) */
  --encre:#171A24;           /* titres */
  --texte:#3F4350;           /* texte courant */
  --discret:#6A6F7D;         /* texte secondaire */
  --trait:rgba(0,0,0,.08);
  --trait-fort:rgba(0,0,0,.16);
  --verre:rgba(255,255,255,.78);
  --verre-bord:rgba(255,255,255,.7);
  --voile:rgba(242,244,249,.74);   /* barre de navigation translucide */
  /* Lavis : deux lueurs très légères (bleu, violet) en haut de la page */
  --lavis:radial-gradient(1100px 560px at 10% -160px,rgba(26,108,255,.11),transparent 70%),radial-gradient(1000px 600px at 94% -180px,rgba(168,85,247,.11),transparent 70%);

  /* Couleurs */
  --bleu:#1A5FE0;   --bleu-vif:#3B82FF; --ciel:#7CC4FF; --bleu-pale:#E6EEFF;  --bleu-rvb:26,95,224;
  --azur:#1A5FE0;   --azur-rvb:26,95,224;   /* le bleu d'origine : --bleu, lui, prend la couleur de la rubrique sur les pages qui en ont une */
  --vert:#0E8F47;   --vert-vif:#12A150; --vert-pale:#E1F6E9;                  --vert-rvb:18,161,80;
  --orange:#D9531F; --orange-vif:#F2622E; --orange-pale:#FFE8DA;              --orange-rvb:242,98,46;
  --jaune:#FFC83D;  --jaune-texte:#8A6400; --jaune-pale:#FFF1C9;              --jaune-rvb:255,184,0;
  --rouge:#D4343A;  --rouge-pale:#FDE7E7;                                      --rouge-rvb:229,72,77;
  --violet:#6D5CF5; --violet-pale:#EEEBFF;                                     --violet-rvb:109,92,245;
  --sarcelle:#0B8480; --sarcelle-pale:#DCF4F2;                                 --sarcelle-rvb:18,163,156;
  --cyan:#0B79B8;   --cyan-pale:#DDF1FD;                                       --cyan-rvb:21,151,221;
  --rose:#C22A7C;   --rose-pale:#FDE6F2;                                       --rose-rvb:224,71,154;
  --ardoise:#475670; --ardoise-pale:#E9EDF3;                                   --ardoise-rvb:95,113,144;
  --ambre:#A86E00;  /* le jaune quand il sert de trait (icônes, textes) */

  /* Dégradé de la marque (bleu vers violet) : boutons, onglet actif, mots mis en avant */
  --degrade:linear-gradient(135deg,#1A6CFF 0%,#6D5CF5 55%,#A855F7 100%);
  --degrade-texte:linear-gradient(90deg,#1A6CFF,#6D5CF5 55%,#A855F7);
  --degrade-ombre:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(40,30,120,.35),0 12px 26px -8px rgba(109,92,245,.75);
  --degrade-ombre-haut:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(40,30,120,.35),0 18px 38px -8px rgba(109,92,245,.95);

  /* Touche : petit carré en relief, comme une touche de clavier, qui porte une icône en couleurs */
  --touche:linear-gradient(180deg,#FFFFFF,#F2F3F7);
  --touche-ombre:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.06),0 8px 16px -10px rgba(0,0,0,.32);

  /* Tuiles sombres (mises en avant), identiques dans les deux thèmes */
  --nuit:#0B0B10; --nuit-2:#15161D; --nuit-texte:#B4B7C3; --nuit-trait:rgba(255,255,255,.1);

  /* Rayons */
  --r:28px; --r-m:20px; --r-s:14px; --r-xs:10px;
  --marge-tuile:32px;   /* marge intérieure des tuiles */

  /* Relief : ombres en plusieurs couches */
  --bord:inset 0 1px 0 rgba(255,255,255,.95);
  --relief-petit:0 0 0 1px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.05),0 6px 14px -6px rgba(0,0,0,.12);
  --relief:0 0 0 1px rgba(0,0,0,.035),0 1px 2px rgba(0,0,0,.05),0 10px 20px -8px rgba(0,0,0,.08),0 30px 50px -28px rgba(0,0,0,.2);
  --relief-haut:0 0 0 1px rgba(0,0,0,.035),0 2px 4px rgba(0,0,0,.05),0 20px 36px -12px rgba(0,0,0,.14),0 50px 80px -34px rgba(0,0,0,.32);
  --lueur-bleue:0 34px 70px -34px rgba(109,92,245,.5);

  --doux:cubic-bezier(.2,.8,.2,1);
  --large:1240px;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --fond:#1E2027;
  --bloc:#2A2D37;
  --creux:#22252D;
  --encre:#F4F5F8;
  --texte:#C9CDD7;
  --discret:#9BA1AE;
  --trait:rgba(255,255,255,.09);
  --trait-fort:rgba(255,255,255,.18);
  --verre:rgba(42,45,55,.8);
  --verre-bord:rgba(255,255,255,.1);
  --voile:rgba(30,32,39,.76);
  --lavis:radial-gradient(1100px 560px at 10% -160px,rgba(26,108,255,.16),transparent 70%),radial-gradient(1000px 600px at 94% -180px,rgba(168,85,247,.14),transparent 70%);

  --bleu:#6BA2FF;   --bleu-pale:rgba(77,141,255,.16);   --azur:#6BA2FF;
  --vert:#4ADE94;   --vert-pale:rgba(61,214,140,.14);
  --orange:#FF9567; --orange-pale:rgba(255,138,91,.15);
  --jaune-texte:#FFD666; --jaune-pale:rgba(255,200,61,.14);
  --rouge:#FF8086;  --rouge-pale:rgba(229,72,77,.16);
  --violet:#A99BFF; --violet-pale:rgba(139,124,255,.16);
  --sarcelle:#4FD6CD; --sarcelle-pale:rgba(18,163,156,.18);
  --cyan:#6CC8FF;   --cyan-pale:rgba(21,151,221,.18);
  --rose:#FF8EC8;   --rose-pale:rgba(224,71,154,.18);
  --ardoise:#B6C2D6; --ardoise-pale:rgba(150,165,190,.16);
  --ambre:#FFD666;
  --degrade-texte:linear-gradient(90deg,#6BA2FF,#9C8CFF 55%,#CB8EFF);

  --touche:linear-gradient(180deg,#3C404E,#30333F);
  --touche-ombre:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -2px 0 rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.05),0 8px 16px -10px rgba(0,0,0,.7);

  --nuit:#121319; --nuit-2:#1A1C24;

  --bord:inset 0 1px 0 rgba(255,255,255,.07);
  --relief-petit:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.3),0 6px 14px -6px rgba(0,0,0,.45);
  --relief:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.3),0 10px 20px -8px rgba(0,0,0,.35),0 30px 50px -28px rgba(0,0,0,.6);
  --relief-haut:0 0 0 1px rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.3),0 20px 36px -12px rgba(0,0,0,.45),0 50px 80px -34px rgba(0,0,0,.75);
  --lueur-bleue:0 34px 70px -34px rgba(139,124,255,.6);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--lavis),var(--fond);background-repeat:no-repeat;color:var(--texte);font-family:var(--police);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{color:var(--encre);font-weight:600;letter-spacing:-.018em;line-height:1.1;text-wrap:balance}
strong,b{font-weight:600}
::selection{background:rgba(var(--violet-rvb),.24)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

/* Barre de défilement discrète */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--trait-fort);border-radius:99px;border:2px solid var(--fond)}

/* Icônes : <svg class="ico"><use href="/assets/icones.svg#nom"/></svg> (Phosphor, style deux tons) */
.ico{width:1.2em;height:1.2em;fill:currentColor;flex-shrink:0;vertical-align:-.22em;display:inline-block}

/* Icônes en couleurs (Fluent, le jeu d'icônes de Windows 11) : <img class="ico icc" src="/assets/ic/nom.svg">,
   utilisées là où l'icône illustre (menus, tuiles, onglets). Outil : .claude/outils/icones-couleur.js */
.icc{object-fit:contain;max-width:none}

/* Couleurs de rubrique. t-… : sur un lien de menu, un onglet, une étiquette, une tuile. cat-… : sur <body>, pour que la page rappelle sa rubrique.
   --ct / --cat : couleur du trait et du texte · --cr / --cat-rvb : la teinte en R,V,B (fonds, lueurs) ·
   --cp : fond plein (onglet actif), toujours assez foncé pour un texte blanc. */
.t-vert{--ct:var(--vert);--cr:var(--vert-rvb);--cp:#0D8A45}        .cat-vert{--cat:var(--vert);--cat-rvb:var(--vert-rvb)}
.t-bleu{--ct:var(--azur);--cr:var(--azur-rvb);--cp:#1A62E6}        .cat-bleu{--cat:var(--azur);--cat-rvb:var(--azur-rvb)}
.t-violet{--ct:var(--violet);--cr:var(--violet-rvb);--cp:var(--degrade)} .cat-violet{--cat:var(--violet);--cat-rvb:var(--violet-rvb)}
.t-orange{--ct:var(--orange);--cr:var(--orange-rvb);--cp:#D4521A}  .cat-orange{--cat:var(--orange);--cat-rvb:var(--orange-rvb)}
.t-rouge{--ct:var(--rouge);--cr:var(--rouge-rvb);--cp:#D4343A}     .cat-rouge{--cat:var(--rouge);--cat-rvb:var(--rouge-rvb)}
.t-jaune{--ct:var(--ambre);--cr:var(--jaune-rvb);--cp:#A86E00}     .cat-jaune{--cat:var(--ambre);--cat-rvb:var(--jaune-rvb)}
.t-sarcelle{--ct:var(--sarcelle);--cr:var(--sarcelle-rvb);--cp:#0B8480} .cat-sarcelle{--cat:var(--sarcelle);--cat-rvb:var(--sarcelle-rvb)}
.t-cyan{--ct:var(--cyan);--cr:var(--cyan-rvb);--cp:#0B79B8}        .cat-cyan{--cat:var(--cyan);--cat-rvb:var(--cyan-rvb)}
.t-rose{--ct:var(--rose);--cr:var(--rose-rvb);--cp:#C22A7C}        .cat-rose{--cat:var(--rose);--cat-rvb:var(--rose-rvb)}
.t-ardoise{--ct:var(--ardoise);--cr:var(--ardoise-rvb);--cp:#475670} .cat-ardoise{--cat:var(--ardoise);--cat-rvb:var(--ardoise-rvb)}
/* Sur une surface sombre (tuile « nuit »), les traits prennent leur version claire */
.nuit,.sur-sombre{--bleu:#7CC4FF;--azur:#7CC4FF;--vert:#4ADE94;--orange:#FF9567;--rouge:#FF8086;--violet:#B4A8FF;--sarcelle:#4FD6CD;--cyan:#6CC8FF;--rose:#FF8EC8;--ardoise:#B6C2D6;--ambre:#FFD666}

/* Pastille : la « touche » qui porte une icône en couleurs */
.pastille{width:54px;height:54px;border-radius:16px;display:inline-grid;place-items:center;flex-shrink:0;color:var(--encre);font-weight:600;line-height:0;
  background:var(--touche);box-shadow:var(--touche-ombre)}
.pastille .ico{width:30px;height:30px}
.pastille.petite{width:40px;height:40px;border-radius:12px}
.pastille.petite .ico{width:23px;height:23px}
.pastille.grande{width:64px;height:64px;border-radius:19px}
.pastille.grande .ico{width:36px;height:36px}

/* Icônes de sens : oui (vert), non (rouge), attention (orange) */
.ico.i-ok{color:var(--vert)}
.ico.i-ko{color:var(--rouge)}
.ico.i-alerte{color:var(--orange)}

@keyframes tourner{to{--tour:360deg}}
@keyframes flotter{50%{transform:translateY(-8px)}}

@media(max-width:680px){
  body{font-size:16px}
  :root{--r:24px;--r-m:18px;--marge-tuile:24px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}