/*
Theme Name: Outils Web
Description: Thème léger pour un site d'outils en ligne : mobile d'abord, aucune police web, aucun jQuery.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 8.1
Author: José Perez
License: GPL-2.0-or-later
Text Domain: outils-web
*/

/*
 * Système de design de Calkavo (refonte du 09/11/2026, demande de José : « c'est hypermoche, je veux des outils avec de
 * vrais thèmes en fonction de la niche »).
 *  - Base commune ici : jetons, typographie, grille, en-tête, bandeau de page, pied.
 *  - Une palette par catégorie (classe .ow-cat-<clé> posée sur <body>, les cartes et les liens) : --c (accent, texte
 *    blanc lisible dessus en AA), --c-fond (teinte claire), --c-doux, --c-fonce. Les décors de chaque catégorie sont dans
 *    l'extension (assets/css/cat/<clé>.css), chargés seulement sur ses pages ; ceux d'un outil dans assets/css/outils/<id>.css.
 *  - Aucune police téléchargée : la pile système est rendue tout de suite (LCP), et les titres gagnent leur caractère
 *    par la graisse et l'approche serrée plutôt que par une police de 40 Ko.
 *  - Contrastes vérifiés en AA (texte courant ≥ 4,5:1) ; mode sombre selon le réglage du système.
 */
:root{
  --ow-page:#f6f5f1;--ow-carte:#fff;--ow-fond:#fff;--ow-texte:#17202b;--ow-texte-2:#545e6c;--ow-bord:#e5e2da;--ow-bord-fort:#aeb5bf;
  --ow-resultat:var(--c-fond);--ow-erreur:#b42318;--ow-alerte:#fff4e5;
  --ow-rayon:16px;--ow-rayon-p:10px;
  --ow-ombre:0 1px 2px rgba(23,32,43,.06),0 10px 30px -14px rgba(23,32,43,.22);
  --ow-ombre-f:0 2px 4px rgba(23,32,43,.06),0 18px 40px -18px rgba(23,32,43,.35);
  --ow-police:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ow-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --c:#2546c7;--c-fond:#eef2ff;--c-doux:#d6defc;--c-fonce:#1b318c;--ow-sur-accent:#fff;
  --ow-accent:var(--c);--ow-focus:var(--c);
  color-scheme:light;
}
.ow-cat-sante{--c:#be123c;--c-fond:#fff1f3;--c-doux:#ffd5dc;--c-fonce:#881337}
.ow-cat-temps{--c:#6d28d9;--c-fond:#f5f1ff;--c-doux:#e2d7ff;--c-fonce:#4c1d95}
.ow-cat-maths{--c:#1d4ed8;--c-fond:#eef3ff;--c-doux:#d3e0ff;--c-fonce:#1e3a8a}
.ow-cat-conversions{--c:#0e7490;--c-fond:#eaf8fb;--c-doux:#c5ecf4;--c-fonce:#155e75}
.ow-cat-argent{--c:#15803d;--c-fond:#edf8f0;--c-doux:#cbeed6;--c-fonce:#14532d}
.ow-cat-texte{--c:#a21caf;--c-fond:#fbf0fc;--c-doux:#f3d3f7;--c-fonce:#701a75}
.ow-cat-fichiers{--c:#c2410c;--c-fond:#fff3ec;--c-doux:#ffdcc8;--c-fonce:#7c2d12}
/* ia-pme, 11/11/2026 : catégories des outils IA (mêmes valeurs AA que les palettes de calkavo réutilisées). */
.ow-cat-prompts{--c:#6d28d9;--c-fond:#f5f1ff;--c-doux:#e2d7ff;--c-fonce:#4c1d95}
.ow-cat-conformite{--c:#1d4ed8;--c-fond:#eef3ff;--c-doux:#d3e0ff;--c-fonce:#1e3a8a}
.ow-cat-bureautique{--c:#0e7490;--c-fond:#eaf8fb;--c-doux:#c5ecf4;--c-fonce:#155e75}
.ow-cat-automatisation{--c:#c2410c;--c-fond:#fff3ec;--c-doux:#ffdcc8;--c-fonce:#7c2d12}
.ow-cat-formation{--c:#047857;--c-fond:#ecfdf5;--c-doux:#c8f2df;--c-fonce:#064e3b}/* 12/11/2026 : rubrique formation */
[class*="ow-cat-"]{--ow-accent:var(--c);--ow-focus:var(--c);--ow-resultat:var(--c-fond)}
@media (prefers-color-scheme:dark){
  :root{--ow-page:#0f1319;--ow-carte:#171c24;--ow-fond:#11161d;--ow-texte:#e9edf2;--ow-texte-2:#a7b0bd;--ow-bord:#283140;--ow-bord-fort:#4a5568;
    --ow-erreur:#ff8a80;--ow-alerte:#3a2c12;--ow-ombre:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);--ow-ombre-f:0 18px 40px -18px rgba(0,0,0,.8);
    --c:#8ea6ff;--c-fond:#161d33;--c-doux:#24305a;--c-fonce:#c7d3ff;--ow-sur-accent:#0b1020;color-scheme:dark}
  .ow-cat-sante{--c:#fb7185;--c-fond:#2a141a;--c-doux:#4a1f2a;--c-fonce:#ffd1d8}
  .ow-cat-temps{--c:#b49cff;--c-fond:#1e1733;--c-doux:#33275a;--c-fonce:#e4dbff}
  .ow-cat-maths{--c:#86a8ff;--c-fond:#131d36;--c-doux:#22325e;--c-fonce:#d5e1ff}
  .ow-cat-conversions{--c:#5fd0e8;--c-fond:#0e2429;--c-doux:#16414b;--c-fonce:#c9f2fa}
  .ow-cat-argent{--c:#5ee08f;--c-fond:#102419;--c-doux:#1a4029;--c-fonce:#c9f5d8}
  .ow-cat-texte{--c:#ec8cf6;--c-fond:#28122d;--c-doux:#47204f;--c-fonce:#fbd7ff}
  .ow-cat-fichiers{--c:#ff9d63;--c-fond:#2b1a0f;--c-doux:#4b2b16;--c-fonce:#ffdcc6}
  .ow-cat-prompts{--c:#b49cff;--c-fond:#1e1733;--c-doux:#33275a;--c-fonce:#e4dbff}
  .ow-cat-conformite{--c:#86a8ff;--c-fond:#131d36;--c-doux:#22325e;--c-fonce:#d5e1ff}
  .ow-cat-bureautique{--c:#5fd0e8;--c-fond:#0e2429;--c-doux:#16414b;--c-fonce:#c9f2fa}
  .ow-cat-automatisation{--c:#ff9d63;--c-fond:#2b1a0f;--c-doux:#4b2b16;--c-fonce:#ffdcc6}
  .ow-cat-formation{--c:#5ee08f;--c-fond:#0f2a1f;--c-doux:#174a35;--c-fonce:#cdf7df}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--ow-page);color:var(--ow-texte);font:16px/1.62 var(--ow-police);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--c-fonce);text-decoration-thickness:1px;text-underline-offset:3px}
@media (prefers-color-scheme:dark){a{color:var(--c)}}
a:hover{text-decoration-thickness:2px}
img,svg{max-width:100%}
img{height:auto}
:focus-visible{outline:3px solid var(--ow-focus);outline-offset:2px;border-radius:4px}
h1,h2,h3{line-height:1.18;letter-spacing:-.022em;font-weight:780;text-wrap:balance}
h1{font-size:clamp(1.65rem,6vw,2.6rem);margin:.15rem 0 .5rem}
.ow-sauter{position:absolute;left:-9999px}
.ow-sauter:focus{left:1rem;top:1rem;background:var(--ow-carte);padding:.5rem 1rem;z-index:10}
.ow-conteneur{max-width:880px;margin:0 auto;padding:0 16px}
.ow-page-accueil .ow-conteneur{max-width:1120px}
.ow-ico{width:24px;height:24px;flex:none}
.ow-ico--mini{width:16px;height:16px;vertical-align:-3px;margin-right:.35rem}

/* En-tête du site */
.ow-entete{background:color-mix(in srgb,var(--ow-carte) 88%,transparent);border-bottom:1px solid var(--ow-bord);position:sticky;top:0;z-index:20;backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.ow-entete .ow-conteneur{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:58px}
.ow-logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:820;font-size:1.18rem;letter-spacing:-.03em;text-decoration:none;color:var(--ow-texte)}
.ow-logo svg{width:30px;height:30px;flex:none}
.ow-hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.2rem}
.ow-hero__cta .ow-btn{text-decoration:none;display:inline-flex;align-items:center}
.ow-hero__cta .ow-btn:not(.ow-btn--2){background:#1d4ed8;color:#fff}
/* ia-pme (11/11/2026) : menu principal, kit conformité en bouton (palette conformité), prompts discrets. */
.ow-menu ul{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
.ow-menu a{display:inline-flex;align-items:center;min-height:40px;padding:0 .7rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:.92rem;color:var(--ow-texte-2)}
.ow-menu a:hover{color:var(--ow-texte);background:var(--ow-page)}
.ow-menu a[aria-current="page"]{color:var(--ow-texte)}
.ow-menu .ow-menu__cta a{background:#1d4ed8;color:#fff;padding:0 1rem}
.ow-menu .ow-menu__cta a:hover{background:#1e40af;color:#fff}
.ow-menu .ow-menu__discret a{font-weight:500;font-size:.86rem}
@media (max-width:640px){.ow-menu .ow-menu__discret,.ow-menu li:not(.ow-menu__cta){display:none}.ow-logo span{font-size:.95rem}}
@media (prefers-color-scheme:dark){.ow-menu .ow-menu__cta a{background:#3b6cf0}}
.ow-langues{display:flex;gap:2px;list-style:none;margin:0;padding:3px;font-size:.8rem;background:var(--ow-page);border:1px solid var(--ow-bord);border-radius:999px}
.ow-langues a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:32px;padding:0 .45rem;text-decoration:none;border-radius:999px;color:var(--ow-texte-2);text-transform:uppercase;font-weight:700;letter-spacing:.03em}
.ow-langues a:hover{color:var(--ow-texte)}
.ow-langues a[aria-current="true"]{background:var(--ow-carte);color:var(--ow-texte);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* Bandeau de page (outil, catégorie, accueil) */
.ow-main{display:block;padding-bottom:2.5rem}
.ow-hero{position:relative;background:linear-gradient(180deg,var(--c-fond),color-mix(in srgb,var(--c-fond) 40%,var(--ow-page)));border-bottom:1px solid color-mix(in srgb,var(--c-doux) 70%,transparent);padding:.6rem 0 1.6rem;overflow:hidden;isolation:isolate}
.ow-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;pointer-events:none;background-image:var(--ow-motif,radial-gradient(color-mix(in srgb,var(--c) 22%,transparent) 1px,transparent 1.4px));background-size:var(--ow-motif-taille,18px 18px);-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 100%);mask-image:linear-gradient(90deg,transparent 30%,#000 100%)}
.ow-hero--outil{padding-bottom:3.4rem}
.ow-hero__ligne{display:flex;align-items:flex-start;gap:.9rem;margin-top:.5rem}
.ow-hero__txt{flex:1;min-width:0}
.ow-hero__ico{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:16px;background:var(--c);color:var(--ow-sur-accent);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--c) 70%,transparent);margin-top:.2rem}
.ow-hero__ico .ow-ico{width:30px;height:30px}
@media (min-width:640px){.ow-hero__ico{width:68px;height:68px;border-radius:20px}.ow-hero__ico .ow-ico{width:38px;height:38px}.ow-hero__ligne{gap:1.2rem}}
.ow-hero .ow-chapeau{font-size:1.06rem;color:var(--ow-texte-2);margin:0;max-width:62ch}
.ow-ariane{font-size:.84rem;color:var(--ow-texte-2);margin:.2rem 0 0}
.ow-ariane ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.ow-ariane li+li::before{content:"›";margin-right:.3rem;opacity:.7}
.ow-ariane a{color:var(--ow-texte-2)}
.ow-fav{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--ow-bord);background:var(--ow-carte);color:var(--ow-texte-2);cursor:pointer;transition:transform .15s ease,color .15s}
.ow-fav[data-attente]{visibility:hidden}
.ow-fav svg{fill:transparent;transition:fill .2s}
.ow-fav:hover{color:var(--c);transform:scale(1.06)}
.ow-fav[aria-pressed="true"]{color:#c27c00;border-color:#f1c75b;background:#fff8e1}
.ow-fav[aria-pressed="true"] svg{fill:#f5b400}
@media (prefers-color-scheme:dark){.ow-fav[aria-pressed="true"]{background:#3a2e0a;border-color:#8a6a10;color:#ffd666}}

/* Accueil */
.ow-hero--accueil{background:radial-gradient(1200px 380px at 85% -10%,#e6ecff 0,transparent 60%),radial-gradient(900px 340px at -10% 0,#fdeef2 0,transparent 55%),var(--ow-page);padding:2.2rem 0 1.8rem;text-align:left}
@media (prefers-color-scheme:dark){.ow-hero--accueil{background:radial-gradient(1200px 380px at 85% -10%,#18224a 0,transparent 60%),radial-gradient(900px 340px at -10% 0,#2a1520 0,transparent 55%),var(--ow-page)}}
.ow-hero--accueil::before{display:none}
.ow-hero--accueil h1{font-size:clamp(2rem,8vw,3.4rem);max-width:16ch;margin-bottom:.6rem}
.ow-hero__sur{display:inline-block;margin:0 0 .4rem;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ow-texte-2)}
.ow-hero--accueil .ow-chapeau{font-size:1.1rem;color:var(--ow-texte-2);max-width:60ch;margin:0 0 1.2rem}
.ow-recherche{position:relative;max-width:620px}
.ow-recherche svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ow-texte-2);pointer-events:none}
.ow-recherche input{width:100%;font:inherit;font-size:1.08rem;min-height:56px;padding:.8rem 1rem .8rem 3rem;border-radius:16px;border:1.5px solid var(--ow-bord-fort);background:var(--ow-carte);color:var(--ow-texte);box-shadow:var(--ow-ombre)}
.ow-recherche input:focus{outline:3px solid #2546c7;outline-offset:2px;border-color:#2546c7}
.ow-promesse{font-size:.88rem;color:var(--ow-texte-2);margin:.8rem 0 1rem}
.ow-puces-cat{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.ow-puces-cat a{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.35rem .8rem .35rem .55rem;border-radius:999px;background:var(--ow-carte);border:1px solid var(--ow-bord);color:var(--ow-texte);text-decoration:none;font-size:.9rem;font-weight:600;transition:border-color .15s,transform .15s}
.ow-puces-cat a .ow-ico{width:20px;height:20px;color:var(--c)}
.ow-puces-cat a:hover{border-color:var(--c);transform:translateY(-1px)}
/* Illustration du flanc droit de l'accueil (09/11/2026) : position absolue = ne pousse rien (CLS 0) ; seulement au-delà
   de 1080 px, où le titre (16ch), la recherche (620 px) et le chapeau (60ch) laissent la place. Les puces de catégories
   sont alors limitées à la même largeur pour ne pas passer dessous. */
.ow-hero__illu{display:none}
@media (min-width:1080px){
  .ow-hero--accueil .ow-conteneur{position:relative}
  .ow-hero__illu{display:block;position:absolute;right:16px;top:50%;transform:translateY(-50%);width:400px;height:320px;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(23,32,43,.14))}
  .ow-hero--accueil .ow-puces-cat{max-width:620px}
}

/* Pied */
.ow-pied{border-top:1px solid var(--ow-bord);background:var(--ow-carte);font-size:.9rem;color:var(--ow-texte-2);padding:2rem 0 2.4rem}
.ow-pied__marque{display:flex;align-items:center;gap:.5rem;font-weight:800;color:var(--ow-texte);font-size:1.05rem;margin:0 0 .3rem}
.ow-pied__marque svg{width:26px;height:26px}
.ow-pied p{margin:0 0 1rem;max-width:60ch}
.ow-pied ul{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem 1.2rem;padding:0;margin:.5rem 0}
.ow-pied a{color:var(--ow-texte-2)}
.ow-pied a:hover{color:var(--ow-texte)}
.ow-pied nav ul{margin:0 0 1rem;gap:.4rem}
.ow-pied nav a{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;padding:.3rem .65rem;border-radius:999px;border:1px solid var(--ow-bord);min-height:36px}
.ow-pied nav a .ow-ico{width:18px;height:18px;color:var(--c)}
.ow-pied nav a:hover{border-color:var(--c)}

@media print{.ow-entete,.ow-pied,.ow-pub,.ow-fav,.ow-ensuite,.ow-proches,.ow-faq,.ow-sauter,.ow-langues,.ow-hero::before{display:none!important}body{background:#fff;color:#000}.ow-hero{background:none;border:0;padding:0}}