/* Peau commune du site « Le ciel de CabinetPilot » (12/10/2026) : jetons, base, boutons, pastilles, en-tête de verre, pied, bandeau de consentement, apparitions. Chargée par l'accueil et les pages générées du blog. */
:root{
  --citron:#d6fd70;--citron-2:#bcec3b;--noir:#131313;--blanc:#fff;
  --ciel-haut:#06306b;--ciel:#0f5ba6;--ciel-bas:#1f7fd0;--ciel-clair:#38c6f6;
  --violet:oklch(0.42 0.17 305);--violet-2:oklch(0.3 0.12 305);
  --petrole:oklch(0.45 0.11 225);--petrole-2:oklch(0.3 0.08 225);
  --foret:oklch(0.45 0.12 155);--foret-2:oklch(0.3 0.08 155);
  --terre:oklch(0.55 0.15 40);--terre-2:oklch(0.38 0.11 40);
  --bordeaux:oklch(0.42 0.17 10);--bordeaux-2:oklch(0.28 0.11 10);
  --nuit:oklch(0.3 0.08 260);--nuit-2:oklch(0.2 0.06 260);
  --fond:#f6f8fc;--fond-2:#eef2f8;--surface:#fff;--texte:#131313;--texte-2:#4d5566;--filet:#e3e7ef;--filet-fort:#c8cfdb;--champ-bord:#9aa3b5;
  --titre:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;--corps:'Inter','Segoe UI',system-ui,sans-serif;
  --ressort:cubic-bezier(.22,1,.36,1);--r:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--corps);color:var(--texte);background:var(--fond);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.conteneur{max-width:1240px;margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--titre);letter-spacing:-.035em;line-height:1.05;margin:0}
h2.t{font-size:clamp(34px,4.2vw,56px);font-weight:800;max-width:20ch}
.sous{font-size:18px;color:var(--texte-2);max-width:62ch;margin:16px 0 0;line-height:1.55}
.centre{text-align:center}.centre .sous,.centre h2.t{margin-left:auto;margin-right:auto}
section.bloc{padding:clamp(80px,9vw,130px) 0}
.etiq{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texte-2);margin-bottom:18px}
.etiq::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--citron);box-shadow:0 0 0 1px var(--noir) inset}
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:999px;font-family:var(--titre);font-weight:700;font-size:16px;text-decoration:none;transition:transform .25s var(--ressort),background .2s,box-shadow .25s;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-citron{background:var(--citron);color:var(--noir);box-shadow:0 10px 30px -10px rgb(214 253 112 / .8)}
.btn-citron:hover{background:var(--citron-2)}
.btn-citron .fleche{width:28px;height:28px;border-radius:50%;background:var(--noir);color:var(--citron);display:grid;place-items:center;font-size:14px;transition:transform .25s var(--ressort)}
.btn-citron:hover .fleche{transform:translate(2px,-2px)}
/* « Demander une démo » : le bouton « Buy Template » du modèle Aeline. Au survol il se resserre (95 %) et passe au blanc ;
   dans l'en-tête, il apparaît en grandissant au chargement (fill-mode backwards : l'animation finie ne bloque pas le survol) */
a.btn-citron[href^="/demo"]{transition:transform .3s cubic-bezier(.19,1,.22,1),background-color .3s cubic-bezier(.19,1,.22,1),box-shadow .3s}
a.btn-citron[href^="/demo"]:hover{transform:scale(.95);background:#fff;box-shadow:0 10px 30px -14px rgb(214 253 112 / .6)}
.entete a.btn-citron[href^="/demo"]{animation:bouton-apparait .75s cubic-bezier(.34,1.56,.64,1) .25s backwards}
@keyframes bouton-apparait{from{transform:scale(0);opacity:0}}
.btn-verre{background:rgb(255 255 255 / .14);color:#fff;border-color:rgb(255 255 255 / .35);backdrop-filter:blur(10px)}
.btn-verre:hover{background:rgb(255 255 255 / .22)}
.pastille{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.p-rouge{background:#fbe9ea;color:#99000c}.p-vert{background:#e3f6ee;color:#006940}.p-orange{background:#fdeede;color:#894101}.p-bleu{background:#e6f0fb;color:#0c57a6}.p-gris{background:#eceff5;color:#4d5566}
:focus-visible{outline:3px solid var(--citron);outline-offset:3px}

/* ——— en-tête de verre ——— */
.entete{position:fixed;inset:16px 16px auto;z-index:40;display:flex;justify-content:center;pointer-events:none;transition:inset .3s var(--ressort)}
.entete .barre{pointer-events:auto;display:flex;align-items:center;gap:14px;width:min(1240px,100%);height:64px;padding:0 10px 0 22px;border-radius:999px;background:rgb(10 30 70 / .42);border:1px solid rgb(255 255 255 / .18);backdrop-filter:blur(18px) saturate(140%);color:#fff;box-shadow:0 20px 50px -20px rgb(0 0 0 / .5);transition:background .4s,box-shadow .4s}
html.defile .entete{inset:10px 16px auto}
html.defile .entete .barre{background:rgb(10 20 45 / .8);box-shadow:0 20px 50px -18px rgb(0 0 0 / .6)}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
/* logo de l'en-tête : jamais écrasé par le menu (il l'était : 14 px de haut à l'écran) ; 32 px, 38 px sur grand écran */
.logo img{display:block;height:32px;width:auto;max-width:none;flex:none}
@media (min-width:1400px){.entete .logo img{height:38px}}
.entete nav{display:flex;gap:2px}
.entete nav a{padding:8px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;opacity:.92;transition:background .2s;white-space:nowrap}
.entete nav a:hover{background:rgb(255 255 255 / .12)}
.entete .actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.entete .actions .btn{height:44px;padding:0 14px;font-size:15px}
@media (min-width:1400px){.entete .barre{width:min(1320px,100%)}}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid rgb(255 255 255 / .35);background:transparent;color:#fff;font-size:20px;cursor:pointer}
/* bouton clair / sombre : rond de 44 px, lune en mode clair (ce vers quoi on bascule), soleil en mode sombre */
.bascule-theme{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgb(255 255 255 / .35);background:transparent;color:#fff;cursor:pointer;transition:background .2s}
.bascule-theme:hover{background:rgb(255 255 255 / .12)}
.bascule-theme svg{display:block}
.bascule-theme .ico-soleil,html[data-theme="sombre"] .bascule-theme .ico-lune{display:none}
html[data-theme="sombre"] .bascule-theme .ico-soleil{display:block}
.tiroir{display:none;position:fixed;inset:92px 16px auto;z-index:39;background:var(--surface);color:var(--texte);border-radius:24px;padding:18px;box-shadow:0 30px 80px -20px rgb(0 20 60 / .5);flex-direction:column;gap:4px}
.tiroir a{padding:12px 14px;border-radius:12px;text-decoration:none;font-weight:600}
.tiroir a:hover{background:var(--fond)}
.tiroir-theme{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 14px;font-weight:600}
.tiroir .bascule-theme{color:inherit;border-color:var(--filet-fort)}
.tiroir .bascule-theme:hover{background:var(--fond)}
html.menu-ouvert .tiroir{display:flex}

.nuage{position:absolute;width:60vw;height:30vw;border-radius:50%;filter:blur(60px);background:radial-gradient(closest-side,rgb(255 255 255 / .55),rgb(255 255 255 / 0));pointer-events:none;animation:nuage linear infinite}
.nuage.a{left:-20vw;top:18vh;animation-duration:70s}
.nuage.b{right:-25vw;top:38vh;width:50vw;animation-duration:95s;animation-direction:reverse}
.nuage.c{left:20vw;bottom:-6vh;width:70vw;height:24vw;animation-duration:120s}
@keyframes nuage{from{transform:translateX(-6vw)}to{transform:translateX(8vw)}}

.nav-bientot{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--citron);color:var(--noir);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}

/* ——— pied ——— */
/* comme le pied du modèle Aeline : une carte arrondie posée sur le fond de page, à 12 px des bords, qui apparaît en
   grandissant (75 % → 100 %) et en fondu quand elle entre dans l'écran (classe .vu posée par blog.js et le script de l'accueil) */
.pied{background:var(--fond);color:rgb(255 255 255 / .75);font-size:14px;padding:12px}
.pied>.conteneur{max-width:none;background:var(--ciel-haut);border-radius:var(--r);padding:56px clamp(20px,4vw,48px) 28px}
.js .pied>.conteneur{opacity:0;transform:scale(.75);transition:opacity 1s var(--ressort),transform 1s var(--ressort)}
.js .pied.vu>.conteneur{opacity:1;transform:none}
.pied .colonnes{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px;margin-bottom:40px}
.pied h3.pied-titre{color:#fff;font-family:var(--corps);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
.pied a{display:block;text-decoration:none;margin:7px 0;color:rgb(255 255 255 / .75)}
.pied a:hover{color:#fff}
.pied .legal{border-top:1px solid rgb(255 255 255 / .15);padding-top:20px;font-size:12.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pied .legal a{display:inline-block;margin:0 10px;padding:6px 0;min-height:24px}

/* ——— Bandeau de consentement : refuser et accepter sont deux boutons identiques (recommandation de la CNIL) ——— */
.consentement{position:fixed;right:0;bottom:1rem;left:0;z-index:2000;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem 1.75rem;width:min(100% - 2rem,820px);margin-inline:auto;padding:1.25rem 1.5rem;border-radius:1.25rem;background:var(--surface);color:var(--texte);font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;letter-spacing:normal;box-shadow:0 6px 13px #00000017,0 24px 24px #00000014,0 53px 32px #0000000d;transition:opacity 180ms cubic-bezier(.23,1,.32,1),transform 180ms cubic-bezier(.23,1,.32,1),visibility 0s linear 180ms}
.consentement[data-ouvert="false"]{visibility:hidden;opacity:0;transform:translateY(16px)}
.consentement[data-ouvert="true"]{visibility:visible;opacity:1;transform:none;transition:opacity 260ms cubic-bezier(.23,1,.32,1),transform 320ms cubic-bezier(.23,1,.32,1),visibility 0s}
.consentement h2{margin:0;font-size:1rem;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--texte)}
.consentement p{margin:.25rem 0 0;max-width:62ch;font-size:.875rem;line-height:1.5;color:#55554f}
.consentement a{letter-spacing:normal;font-weight:600;color:#131313;text-decoration:underline;text-underline-offset:.2em}
.consentement-boutons{display:flex;gap:.625rem}
.bouton-choix{min-width:112px;min-height:44px;padding:0 1.25rem;border:1px solid #131313;border-radius:999px;background:#fff;color:#131313;font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;transition:background-color 150ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.bouton-choix:hover{background:#f2f2ef}}
.bouton-choix:active{transform:scale(.97)}
.bouton-choix:focus-visible{outline:2px solid #131313;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.consentement[data-ouvert="false"]{transform:none}}
@media (max-width:639px){.consentement{grid-template-columns:minmax(0,1fr);padding:1.125rem 1.125rem 1rem}.consentement-boutons>*{flex:1}}

/* ——— apparitions ——— */
.js .revele{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ressort),transform .9s var(--ressort)}
.js .revele.vu{opacity:1;transform:none}
.js .revele[data-delai="1"]{transition-delay:.12s}.js .revele[data-delai="2"]{transition-delay:.24s}.js .revele[data-delai="3"]{transition-delay:.36s}.js .revele[data-delai="4"]{transition-delay:.48s}.js .revele[data-delai="5"]{transition-delay:.6s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .revele,.js .pied>.conteneur{opacity:1;transform:none}}
/* menu complet à partir de 1280 px (logo, six rubriques et trois boutons) ; en dessous, le menu tiroir */
@media (max-width:1279px){.entete nav,.entete .actions .btn-verre{display:none}.burger{display:block}}
@media (max-width:1000px){.pied .colonnes{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.conteneur{padding:0 16px}.pied .colonnes{grid-template-columns:1fr}.entete .actions .btn-citron{display:none}}

/* ——— mode sombre : choix du visiteur (bouton de l'en-tête), clair par défaut, jamais déduit du système. L'attribut est posé
   par le script en tête de <head> avant les feuilles de style ; blog.js (pages générées) et le script de l'accueil le basculent.
   Nuit bleutée cohérente avec le ciel : fond #0b1326, surface #141e36 ; citron et dégradés du ciel inchangés ; les sections déjà
   sombres (.nuit, .diff, .final, .pied, .penny) ne bougent pas.
   Contrastes WCAG 2.2 calculés (texte 4,5:1 ; bords et icônes 3:1) :
     #eef2f9 sur #0b1326 (texte / fond)                16,5:1
     #eef2f9 sur #141e36 (texte / surface)             14,7:1
     #eef2f9 sur #101a30 (texte / fond 2)              15,4:1
     #aab4c8 sur #0b1326 (texte doux / fond)            8,9:1
     #aab4c8 sur #141e36 (texte doux / surface)         7,9:1
     #aab4c8 sur #101a30 (texte doux / fond 2)          8,3:1
     #d6fd70 sur #0b1326 (citron / fond)               16,0:1
     #131313 sur #d6fd70 (texte des boutons citron)    16,1:1
     #131313 sur #eef2f9 (boutons du consentement)     16,5:1
     #ffb4b9 sur #43171c (pastille rouge)               9,1:1
     #8fe6bf sur #0f3324 (pastille verte)               9,4:1
     #ffc48a sur #3d2410 (pastille orange)              9,3:1
     #9cc8ff sur #122a4d (pastille bleue)               8,3:1
     #c3cbdb sur #1e2a42 (pastille grise)               8,8:1
     #f5e9a6 sur #2d2810 (bandeau « en construction ») 12,0:1
     bord des champs rgb(255 255 255 / .38) sur #141e36  3,5:1
     filet fort rgb(255 255 255 / .26) sur #141e36       2,3:1 (décoratif, comme #c8cfdb sur blanc en clair : 1,6:1)
   (node outils/contrastes.mjs ne lit pas ce fichier : ratios calculés avec la formule WCAG 2.2, luminance relative sRGB.) ——— */
html[data-theme="sombre"]{
  --fond:#0b1326;--fond-2:#101a30;--surface:#141e36;--texte:#eef2f9;--texte-2:#aab4c8;
  --filet:rgb(255 255 255 / .1);--filet-fort:rgb(255 255 255 / .26);--champ-bord:rgb(255 255 255 / .38);
  color-scheme:dark;
}
html[data-theme="sombre"] .p-rouge{background:#43171c;color:#ffb4b9}
html[data-theme="sombre"] .p-vert{background:#0f3324;color:#8fe6bf}
html[data-theme="sombre"] .p-orange{background:#3d2410;color:#ffc48a}
html[data-theme="sombre"] .p-bleu{background:#122a4d;color:#9cc8ff}
html[data-theme="sombre"] .p-gris{background:#1e2a42;color:#c3cbdb}
html[data-theme="sombre"] .tiroir{box-shadow:0 30px 80px -20px rgb(0 0 0 / .8);border:1px solid var(--filet)}
/* bandeau de consentement : surface sombre, boutons clairs */
html[data-theme="sombre"] .consentement{border:1px solid var(--filet);box-shadow:0 6px 13px #00000066,0 24px 24px #00000055,0 53px 32px #00000044}
html[data-theme="sombre"] .consentement p{color:var(--texte-2)}
html[data-theme="sombre"] .consentement a{color:var(--texte)}
html[data-theme="sombre"] .bouton-choix{background:#eef2f9;color:#131313;border-color:#eef2f9}
@media (hover:hover) and (pointer:fine){html[data-theme="sombre"] .bouton-choix:hover{background:#d5dce8}}
html[data-theme="sombre"] .bouton-choix:focus-visible{outline-color:var(--citron)}
/* le changement de mode : 200 ms après un clic seulement (classe posée par le script), jamais au chargement ni en mouvement réduit */
@media (prefers-reduced-motion:no-preference){html.transition-theme *{transition:background-color .2s,color .2s,border-color .2s,fill .2s,stroke .2s}}