/* aircyber4.css — charte d /aircyber3 appliquee au contenu integral d /aircyber.
 *
 * Parti pris : le balisage et le contenu ne sont PAS touches. La page conserve
 * ses 7 538 mots, ses 34 h2, ses 94 h3, ses 7 blocs de donnees structurees et ses
 * 113 liens — donc son referencement. Seule la couche de style change, en
 * redefinissant les utilitaires Tailwind a l interieur du conteneur .a4.
 * La specificite (.a4 .classe = 0,2,0) l emporte sur celle de Tailwind (0,1,0) :
 * aucun !important n est necessaire, sauf sur les degrades de boutons.
 */

.a4{
  --a4-fond:#050914; --a4-fond2:#08111F;
  --a4-bleu:#1677FF; --a4-bleu-clair:#2E9BFF; --a4-bleu-action:#0F62D8;
  --a4-cyan:#25D9FF; --a4-vert:#28D17C; --a4-orange:#FFB020; --a4-rouge:#FF4D5A;
  --a4-txt:#F4F7FA; --a4-txt-doux:#AAB7C7; --a4-ligne:rgba(255,255,255,.09);
  --a4-ligne-forte:rgba(255,255,255,.16);
  background:var(--a4-fond); color:var(--a4-txt-doux);
}

/* ---- Fonds de section : deux surfaces sombres qui alternent ---- */
.a4 .bg-gray-900,
.a4 .bg-gray-900\/50,
.a4 .bg-gray-900\/80{background:var(--a4-fond)}
.a4 .bg-gray-800\/50,
.a4 .bg-gray-800\/30,
.a4 .bg-gray-800\/20,
.a4 .bg-gray-800{background:var(--a4-fond2)}
.a4 .bg-gray-900\/40,
.a4 .bg-gray-700\/50{background:rgba(255,255,255,.022)}

/* ---- Bordures fines, jamais de gros traits ---- */
.a4 [class*="border-gray-7"],
.a4 [class*="border-gray-8"]{border-color:var(--a4-ligne)}
.a4 [class*="border-red-500"]{border-color:rgba(22,119,255,.24)}
.a4 [class*="border-orange-500"]{border-color:rgba(255,176,32,.24)}
.a4 [class*="border-green-500"]{border-color:rgba(40,209,124,.28)}
.a4 .border-4{border-width:1px}
.a4 [class*="shadow"]{box-shadow:none}

/* ---- Texte ---- */
.a4 .text-white{color:var(--a4-txt)}
.a4 .text-gray-200{color:#E4EAF1}
.a4 .text-gray-300{color:#C3CDDA}
.a4 .text-gray-400{color:var(--a4-txt-doux)}
.a4 .text-gray-500{color:#7C8A9C}

/* Le rouge du site devient le bleu aeronautique : c est le changement de
   charte le plus visible. L orange est conserve, mais adouci. */
.a4 .text-red-400,.a4 .text-red-500,.a4 .text-red-300{color:var(--a4-bleu-clair)}
.a4 .text-orange-400,.a4 .text-orange-500{color:var(--a4-orange)}
.a4 .bg-red-500\/5{background:rgba(22,119,255,.05)}
.a4 .bg-red-500\/10{background:rgba(22,119,255,.10)}
.a4 .bg-red-500\/20{background:rgba(22,119,255,.18)}
.a4 .bg-orange-500\/10{background:rgba(255,176,32,.10)}

/* ---- Boutons : un seul bleu d action, dont le survol ASSOMBRIT ---- */
.a4 .bg-gradient-to-r.from-red-500,
.a4 .bg-gradient-to-br.from-red-500,
.a4 .bg-red-600{background-image:none!important;background-color:var(--a4-bleu-action)!important;
  color:#fff!important;box-shadow:none}
.a4 .bg-gradient-to-r.from-red-500:hover,
.a4 .bg-gradient-to-br.from-red-500:hover,
.a4 .bg-red-600:hover{background-color:#0B5ED7!important}
/* degrades decoratifs (aplats de fond, pastilles) : atténués, pas supprimés */
.a4 .from-red-500\/20,.a4 .from-red-500\/10{--tw-gradient-from:rgba(22,119,255,.14)}
.a4 .to-orange-500\/20,.a4 .to-orange-500\/10{--tw-gradient-to:rgba(255,176,32,.10)}
/* titres en degrade : on garde l effet mais dans la palette */
.a4 .bg-clip-text{background-image:linear-gradient(90deg,var(--a4-bleu-clair),var(--a4-cyan))!important}

/* ---- Typographie : plus massive, plus resserree ---- */
.a4 h1{font-size:clamp(2.4rem,5.2vw,3.9rem);line-height:1.04;letter-spacing:-.025em;color:var(--a4-txt)}
.a4 h2{font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.12;letter-spacing:-.02em}
.a4 h3{letter-spacing:-.01em}
.a4 p{line-height:1.7}

/* ---- Rayons harmonises ---- */
.a4 .rounded-2xl{border-radius:1rem}
.a4 .rounded-xl{border-radius:.8rem}
.a4 .rounded-lg{border-radius:.6rem}

/* ---- Tableaux : lisibles, et defilables sans coupure sur telephone ---- */
.a4 table{border-color:var(--a4-ligne)}
.a4 thead th{color:var(--a4-txt);border-bottom:1px solid var(--a4-ligne-forte);
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.a4 tbody tr:hover td,.a4 tbody tr:hover th{background:rgba(255,255,255,.03)}
.a4 table{display:block;overflow-x:auto;max-width:100%}

/* ---- Encadres d appel a l action : alignes sur la charte ---- */
.a4 .lpc{background:linear-gradient(180deg,rgba(22,119,255,.07),rgba(37,217,255,.03));
  border-color:rgba(22,119,255,.26)}
.a4 .lpc-bouton--p{background:var(--a4-bleu-action)}
.a4 .lpc-bouton--p:hover{background:#0B5ED7}
.a4 .lpc-bouton--s:hover{border-color:rgba(46,155,255,.6);color:var(--a4-bleu-clair)}

/* ---- Focus visible : la page n en definissait aucun ---- */
.a4 :focus-visible{outline:2px solid var(--a4-cyan);outline-offset:2px;border-radius:.4rem}

@media(prefers-reduced-motion:reduce){
  .a4 *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---- Composants qui portaient leur propre palette ---- */
/* Le bloc « Ce qui est inclus » a son CSS dedie (prefixe inc-) : il echappait donc
   aux redefinitions d utilitaires ci-dessus. */
.a4 .inc-audit .inc-ico{background:rgba(22,119,255,.10);border-color:rgba(22,119,255,.22);color:var(--a4-bleu-clair)}
.a4 .inc-livr  .inc-ico{background:rgba(255,176,32,.10);border-color:rgba(255,176,32,.22);color:var(--a4-orange)}
.a4 .inc-audit:hover{border-color:rgba(22,119,255,.45)}
.a4 .inc-livr:hover{border-color:rgba(255,176,32,.45)}
.a4 .inc-carte{background:rgba(255,255,255,.022);border-color:var(--a4-ligne)}
.a4 .inc-carte:hover{background:rgba(255,255,255,.045)}
.a4 .inc-tag{background:rgba(22,119,255,.10);color:var(--a4-bleu-clair);border-color:rgba(22,119,255,.22)}
.a4 .inc-c1 b{color:var(--a4-bleu-clair)}
.a4 .inc-c2 b{color:var(--a4-orange)}
.a4 .inc-c3 b{color:var(--a4-vert)}
.a4 .inc-sep.a i{background:linear-gradient(90deg,transparent,rgba(22,119,255,.45))}
.a4 .inc-sep.a i:last-child{background:linear-gradient(270deg,transparent,rgba(22,119,255,.45))}
.a4 .inc-sep.l i{background:linear-gradient(90deg,transparent,rgba(255,176,32,.45))}
.a4 .inc-sep.l i:last-child{background:linear-gradient(270deg,transparent,rgba(255,176,32,.45))}
.a4 .inc-badge{background:rgba(40,209,124,.10);color:#6EE7B7;border-color:rgba(40,209,124,.22)}

/* Encadre d appel a l action historique de la page */
.a4 .cta-box{border-color:rgba(22,119,255,.35)!important;
  background:linear-gradient(180deg,rgba(22,119,255,.07),rgba(37,217,255,.03))}

/* Pastilles et jalons restes en rouge ou orange vif */
.a4 .bg-orange-500{background-color:var(--a4-orange)}
.a4 .bg-orange-500\/20{background-color:rgba(255,176,32,.20)}
.a4 .bg-red-600\/20{background-color:rgba(22,119,255,.18)}
.a4 [class*="border-red-500\/50"]{border-color:rgba(22,119,255,.45)}
.a4 .bg-red-500,.a4 .bg-red-400{background-color:var(--a4-bleu-action)}

/* SVG dont la couleur vient d un utilitaire : l attribut class d un SVG n est pas
   une chaine, les selecteurs de classe fonctionnent mais pas .className en JS. */
.a4 svg.text-red-400,.a4 svg.text-red-500{color:var(--a4-bleu-clair)}
.a4 svg.text-orange-400,.a4 svg.text-orange-500{color:var(--a4-orange)}

/* Pastilles d initiales des temoignages */
.a4 .bg-red-900\/30{background-color:rgba(22,119,255,.18)}