/*
Theme Name:   Avangard — Blocksy Child
Theme URI:    https://www.avangard.at/
Description:  Thème enfant Blocksy aux couleurs d'Avangard. Charte issue du logo : dégradé violet #8459D8 vers cyan #8DD0E6. Fournit les variables de marque, les composants de la maquette et les surcharges Blocksy.
Author:       Avangard
Author URI:   https://www.avangard.at/
Template:     blocksy
Version:      1.0.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  blocksy-child
*/

/* ==========================================================================
   1. VARIABLES DE MARQUE
   Modifier une valeur ici se répercute sur tout le site.
   ========================================================================== */

:root{
  /* Fonds */
  --av-bg:#070E1C;
  --av-bg-2:#0A162B;
  --av-surface:#0E1E38;
  --av-surface-2:#132743;
  --av-line:rgba(141,208,230,.14);
  --av-line-strong:rgba(141,208,230,.28);

  /* Signature de marque */
  --av-violet:#8459D8;
  --av-violet-deep:#6B3FCC;
  --av-cyan:#8DD0E6;
  --av-cyan-bright:#5BC8E0;
  --av-grad:linear-gradient(135deg,#8459D8 0%,#8AA9E1 52%,#8DD0E6 100%);
  --av-grad-soft:linear-gradient(135deg,rgba(132,89,216,.16),rgba(141,208,230,.16));

  /* Texte */
  --av-text:#E9F0F9;
  --av-text-2:#A9BCD4;
  --av-text-3:#7488A5;

  /* Sémantique */
  --av-ok:#3ED598;
  --av-warn:#F2B705;
  --av-crit:#F2545B;

  /* Structure */
  --av-r:14px;
  --av-r-lg:20px;
  --av-shadow:0 18px 48px rgba(0,0,0,.42);
}

/* Alignement des variables Blocksy sur la charte Avangard ------------------ */
:root{
  --theme-palette-color-1:#8DD0E6;   /* accent principal */
  --theme-palette-color-2:#8459D8;   /* accent secondaire */
  --theme-palette-color-3:#E9F0F9;   /* titres */
  --theme-palette-color-4:#A9BCD4;   /* texte courant */
  --theme-palette-color-5:#0E1E38;   /* surfaces */
  --theme-palette-color-6:#0A162B;   /* fond alterné */
  --theme-palette-color-7:#070E1C;   /* fond principal */
  --theme-palette-color-8:#132743;   /* bordures et surfaces hautes */

  --theme-text-color:var(--av-text-2);
  --theme-link-initial-color:var(--av-cyan);
  --theme-link-hover-color:#ffffff;
  --theme-content-spacing:1.05em;
  --theme-border-radius:var(--av-r);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body{
  background:var(--av-bg);
  color:var(--av-text-2);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  color:#fff;
  line-height:1.16;
  font-weight:750;
  letter-spacing:-.02em;
}
h1{font-size:clamp(2.1rem,5vw,3.55rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem)}
h3{font-size:1.2rem;letter-spacing:-.01em}

strong,b{color:#fff;font-weight:650}
a{transition:color .2s}
hr,.wp-block-separator{border-color:var(--av-line);opacity:1}
::selection{background:var(--av-violet);color:#fff}

/* ==========================================================================
   3. TYPOGRAPHIE UTILITAIRE
   ========================================================================== */

.av-eyebrow{
  display:inline-block;
  font-size:.735rem;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;margin-bottom:14px;
  background:var(--av-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.av-lead{font-size:1.16rem;color:var(--av-text-2);max-width:64ch}
.av-muted{color:var(--av-text-3);font-size:.94rem}
.av-grad-text{
  background:var(--av-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.av-center{text-align:center}
.av-narrow{max-width:820px;margin-left:auto;margin-right:auto}

/* ==========================================================================
   4. BOUTONS
   ========================================================================== */

.av-btn,
.wp-block-button__link{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.92em 1.75em;border-radius:11px;
  font-weight:700;font-size:.965rem;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s,box-shadow .18s,background .2s,border-color .2s;
  text-decoration:none;
}
.av-btn-primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background:var(--av-grad);color:#0A1224;
  box-shadow:0 10px 30px rgba(132,89,216,.3);
}
.av-btn-primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  color:#0A1224;transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(132,89,216,.42);
}
.av-btn-ghost,
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;color:#fff;border-color:var(--av-line-strong);
}
.av-btn-ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  color:#fff;border-color:var(--av-cyan);background:rgba(141,208,230,.08);
}
.av-btn-sm{padding:.66em 1.2em;font-size:.88rem}
.av-btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}

/* ==========================================================================
   5. SECTIONS ET GRILLES
   ========================================================================== */

.av-section{padding:96px 0;position:relative}
.av-section.is-tight{padding:64px 0}
.av-section.is-alt{background:var(--av-bg-2)}

.av-grid{display:grid;gap:22px}
.av-g2{grid-template-columns:repeat(2,1fr)}
.av-g3{grid-template-columns:repeat(3,1fr)}
.av-g4{grid-template-columns:repeat(4,1fr)}
.av-g5{grid-template-columns:repeat(5,1fr)}
.av-split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}

/* ==========================================================================
   6. CARTES
   ========================================================================== */

.av-card{
  background:var(--av-surface);
  border:1px solid var(--av-line);
  border-radius:var(--av-r-lg);
  padding:30px 27px;
  transition:transform .22s,border-color .22s,background .22s;
}
.av-card:hover{
  transform:translateY(-4px);
  border-color:var(--av-line-strong);
  background:var(--av-surface-2);
}
.av-card h3{margin-bottom:.45em}
.av-card p:last-child{margin-bottom:0}
.av-card.is-feature{background:var(--av-grad-soft);border-color:var(--av-line-strong)}

.av-ic{
  width:46px;height:46px;border-radius:12px;
  background:var(--av-grad-soft);border:1px solid var(--av-line-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;margin-bottom:18px;
}
.av-more{
  display:inline-block;margin-top:14px;
  font-size:.88rem;font-weight:700;color:var(--av-cyan-bright);
}
.av-more::after{content:" →";transition:margin .2s}
.av-card:hover .av-more::after{margin-left:4px}

/* Étapes numérotées -------------------------------------------------------- */
.av-num{
  width:42px;height:42px;border-radius:50%;
  background:var(--av-grad);color:#0A1224;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;margin-bottom:16px;
}

/* Statistiques ------------------------------------------------------------- */
.av-stat{text-align:center;padding:26px 18px}
.av-stat .n{
  font-size:2.35rem;font-weight:800;line-height:1.1;
  background:var(--av-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.av-stat .l{font-size:.88rem;color:var(--av-text-3);margin-top:8px}

/* ==========================================================================
   7. LISTES
   ========================================================================== */

.av-checks{list-style:none;padding:0;margin:0}
.av-checks li{position:relative;padding-left:30px;margin-bottom:.72em}
.av-checks li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:15px;height:15px;border-radius:4px;background:var(--av-grad);
}
.av-checks li::after{
  content:"";position:absolute;left:5px;top:.75em;
  width:4px;height:8px;border:solid #0A1224;border-width:0 2px 2px 0;
  transform:rotate(43deg);
}

.av-arrows{list-style:none;padding:0;margin:0}
.av-arrows li{position:relative;padding-left:26px;margin-bottom:.6em}
.av-arrows li::before{
  content:"→";position:absolute;left:0;
  color:var(--av-cyan-bright);font-weight:800;
}

/* ==========================================================================
   8. BADGES
   ========================================================================== */

.av-tags{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 0;padding:0;list-style:none}
.av-tag{
  display:inline-block;padding:6px 14px;border-radius:30px;
  font-size:.79rem;font-weight:700;
  background:rgba(141,208,230,.10);
  border:1px solid var(--av-line-strong);
  color:var(--av-cyan);
}
.av-tag.is-violet{
  background:rgba(132,89,216,.14);
  border-color:rgba(132,89,216,.4);
  color:#C3AEF5;
}
.av-tag.is-solid{background:var(--av-grad);color:#0A1224;border-color:transparent}

/* ==========================================================================
   9. TABLEAUX
   ========================================================================== */

.av-table-wrap{overflow-x:auto;border:1px solid var(--av-line);border-radius:var(--av-r-lg)}
.av-table-wrap table,
.wp-block-table table{
  width:100%;border-collapse:collapse;font-size:.93rem;
}
.av-table-wrap th,.av-table-wrap td,
.wp-block-table th,.wp-block-table td{
  padding:14px 18px;text-align:left;
  border-bottom:1px solid var(--av-line);vertical-align:top;
}
.av-table-wrap thead th,
.wp-block-table thead th{
  background:var(--av-surface);color:#fff;font-weight:750;
  font-size:.83rem;letter-spacing:.05em;text-transform:uppercase;
}
.av-table-wrap tbody tr:last-child td{border-bottom:0}
.av-table-wrap tbody tr:hover{background:rgba(141,208,230,.035)}

/* ==========================================================================
   10. SCHÉMAS D'ARCHITECTURE
   ========================================================================== */

.av-arch{
  background:#060B16;border:1px solid var(--av-line);
  border-radius:var(--av-r-lg);padding:28px;
}
.av-arch-row{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.av-arch-row.is-one{grid-template-columns:1fr}
.av-node{border-radius:12px;padding:16px 14px;text-align:center;border:1px solid var(--av-line)}
.av-node .t{font-weight:750;font-size:.86rem;color:#fff}
.av-node .s{font-size:.76rem;color:var(--av-text-3);margin-top:5px;line-height:1.45}
.av-node.is-in{background:var(--av-surface)}
.av-node.is-core{background:var(--av-grad);border-color:transparent}
.av-node.is-core .t{color:#0A1224;font-size:.95rem}
.av-node.is-core .s{color:rgba(10,18,36,.72)}
.av-node.is-out{background:var(--av-surface-2)}
.av-arch-flow{
  text-align:center;color:var(--av-cyan-bright);
  letter-spacing:.6em;margin:12px 0;font-size:.8rem;opacity:.75;
}

/* ==========================================================================
   11. ENCADRÉS ET CTA
   ========================================================================== */

.av-callout{
  border-left:3px solid;border-image:var(--av-grad) 1;
  background:var(--av-grad-soft);
  padding:22px 26px;border-radius:0 var(--av-r) var(--av-r) 0;margin:2rem 0;
}
.av-callout p:last-child{margin-bottom:0}
.av-callout .t{color:#fff;font-weight:750;display:block;margin-bottom:.35em}

.av-cta{
  border-radius:24px;padding:60px 44px;text-align:center;
  position:relative;overflow:hidden;
  background:
    radial-gradient(620px 300px at 50% -30%,rgba(132,89,216,.36),transparent 65%),
    linear-gradient(140deg,#0E1E38,#132743);
  border:1px solid var(--av-line-strong);
}
.av-cta h2{margin-bottom:.4em}
.av-cta p{max-width:600px;margin:0 auto 1.8rem;color:var(--av-text-2)}
.av-cta .av-btn-row{justify-content:center;margin-top:0}

/* ==========================================================================
   12. HERO
   ========================================================================== */

.av-hero{
  position:relative;overflow:hidden;padding:110px 0 100px;
  background:
    radial-gradient(900px 460px at 12% -8%,rgba(132,89,216,.30),transparent 62%),
    radial-gradient(820px 460px at 88% 8%,rgba(141,208,230,.20),transparent 60%),
    linear-gradient(180deg,#070E1C 0%,#0A162B 100%);
}
.av-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(141,208,230,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(141,208,230,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 30%,#000 12%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 12%,transparent 72%);
}
.av-hero > *{position:relative;z-index:1}

.av-page-hero{
  padding:78px 0 62px;position:relative;overflow:hidden;
  background:
    radial-gradient(760px 380px at 18% -20%,rgba(132,89,216,.24),transparent 62%),
    linear-gradient(180deg,#070E1C,#0A162B);
  border-bottom:1px solid var(--av-line);
}

/* ==========================================================================
   13. FAQ
   ========================================================================== */

.av-faq details{
  border:1px solid var(--av-line);border-radius:var(--av-r);
  background:var(--av-surface);margin-bottom:12px;overflow:hidden;
}
.av-faq summary{
  cursor:pointer;padding:18px 22px;font-weight:700;color:#fff;font-size:1rem;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.av-faq summary::-webkit-details-marker{display:none}
.av-faq summary::after{content:"+";font-size:1.35rem;color:var(--av-cyan-bright);line-height:1}
.av-faq details[open] summary::after{content:"−"}
.av-faq details[open] summary{border-bottom:1px solid var(--av-line)}
.av-faq .av-faq-body{padding:18px 22px 4px}

/* ==========================================================================
   14. FORMULAIRES (Contact Form 7 / WPForms)
   ========================================================================== */

.av-form label,
.wpcf7 label,
.wpforms-field-label{
  display:block;font-size:.85rem;font-weight:700;color:#fff;margin-bottom:7px;
}
.av-form input,.av-form select,.av-form textarea,
.wpcf7 input:not([type=submit]),.wpcf7 select,.wpcf7 textarea,
.wpforms-field input:not([type=submit]),.wpforms-field select,.wpforms-field textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:.95rem;
  background:var(--av-bg-2);border:1px solid var(--av-line-strong);
  border-radius:10px;color:var(--av-text);
  transition:border-color .2s,box-shadow .2s;
}
.av-form input:focus,.av-form select:focus,.av-form textarea:focus,
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus,
.wpforms-field input:focus,.wpforms-field select:focus,.wpforms-field textarea:focus{
  outline:none;border-color:var(--av-cyan);
  box-shadow:0 0 0 3px rgba(141,208,230,.14);
}
.av-form textarea,.wpcf7 textarea,.wpforms-field textarea{min-height:150px;resize:vertical}
.wpcf7 input[type=submit],
.wpforms-submit{
  background:var(--av-grad);color:#0A1224;border:0;
  padding:.92em 1.75em;border-radius:11px;font-weight:700;cursor:pointer;
}

/* ==========================================================================
   15. BLOCS GUTENBERG — HARMONISATION
   ========================================================================== */

.wp-block-group.has-background{border-radius:var(--av-r-lg)}
.wp-block-image img{border-radius:var(--av-r-lg)}
.wp-block-quote{
  border-left:3px solid;border-image:var(--av-grad) 1;
  background:var(--av-grad-soft);padding:22px 26px;
}
.wp-block-code,pre{
  background:#060B16;border:1px solid var(--av-line);
  border-radius:var(--av-r);padding:18px;color:var(--av-text-2);
}

/* ==========================================================================
   16. EN-TÊTE ET PIED DE PAGE BLOCKSY

   Blocksy sort son en-tête et son pied de page en clair par défaut.
   Ces règles les alignent sur la charte sombre d'Avangard sans passer
   par le personnalisateur, ce qui les rend versionnables avec le thème.
   ========================================================================== */

/* --- En-tête ------------------------------------------------------------ */
header.ct-header,
header.ct-header [data-row],
header.ct-header [data-row="middle"],
.ct-header [data-id="logo"],
#offcanvas .ct-panel-inner{
  background-color:var(--av-bg) !important;
}
header.ct-header{border-bottom:1px solid var(--av-line)}

/* En-tête collant : léger voile pour rester lisible au défilement */
header.ct-header [data-sticky] [data-row]{
  background-color:rgba(7,14,28,.92) !important;
  backdrop-filter:saturate(160%) blur(12px);
}

/* Liens du menu principal */
.ct-header .menu > li > a,
.ct-header [data-id="menu"] a,
#offcanvas .menu a{
  color:var(--av-text-2) !important;
  font-weight:600;
  letter-spacing:.01em;
}
.ct-header .menu > li > a:hover,
.ct-header .menu > li.current-menu-item > a,
.ct-header .menu > li.current-page-ancestor > a,
#offcanvas .menu a:hover{
  color:#fff !important;
}

/* Soulignement dégradé de l'élément actif */
.ct-header .menu > li.current-menu-item > a::after,
.ct-header .menu > li.current-page-ancestor > a::after{
  content:"";display:block;height:2px;margin-top:6px;border-radius:2px;
  background:var(--av-grad);
}

/* Sous-menus */
.ct-header .sub-menu{
  background:var(--av-surface) !important;
  border:1px solid var(--av-line-strong);
  border-radius:var(--av-r);
  box-shadow:var(--av-shadow);
  padding:8px;
}
.ct-header .sub-menu li a{
  color:var(--av-text-2) !important;
  border-radius:9px;padding:9px 12px;
}
.ct-header .sub-menu li a:hover{
  background:var(--av-grad-soft);
  color:#fff !important;
}

/* Icônes de l'en-tête : recherche, menu burger */
.ct-header [data-id="search"] svg,
.ct-header .ct-toggle svg,
.ct-header [data-id="trigger"] svg{
  fill:var(--av-text-2);
}
.ct-header [data-id="search"]:hover svg,
.ct-header .ct-toggle:hover svg{fill:#fff}

/* Identité : on garde l'inscription texte, on masque l'image du logo.
   Le nom du site est déjà lisible et évite le doublon logo + texte. */
.ct-header .site-logo-container img,
.ct-header [data-id="logo"] img{display:none !important}

.ct-header .site-title,
.ct-header .site-title a{
  color:#fff !important;
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-.02em;
  line-height:1.1;
}
/* Point d'accent aux couleurs de marque après le nom */
.ct-header .site-title a::after{
  content:"";display:inline-block;
  width:7px;height:7px;border-radius:50%;
  background:var(--av-grad);
  margin-left:5px;vertical-align:middle;
}
.ct-header .site-description{
  color:var(--av-text-3) !important;
  font-size:.76rem;letter-spacing:.06em;
}

/* --- Alignement de la barre de navigation -------------------------------
   Par défaut Blocksy pousse le menu à l'extrême droite. On le ramène
   vers le centre pour qu'il soit lisible sans balayer toute la largeur. */
.ct-header [data-row="middle"] > div{
  grid-template-columns:auto 1fr auto !important;
}
.ct-header [data-id="menu"]{
  justify-self:center;
  margin-right:auto;
  margin-left:48px;
}
.ct-header .menu{gap:4px}
.ct-header .menu > li > a{padding-left:14px;padding-right:14px}

@media (max-width:1100px){
  .ct-header [data-id="menu"]{margin-left:24px}
  .ct-header .menu > li > a{padding-left:10px;padding-right:10px;font-size:.9rem}
}

/* --- Pied de page ------------------------------------------------------- */
footer.ct-footer,
footer.ct-footer [data-row],
footer.ct-footer [data-column]{
  background-color:#050A14 !important;
  color:var(--av-text-3);
}
footer.ct-footer{border-top:1px solid var(--av-line)}
footer.ct-footer a{color:var(--av-text-2) !important}
footer.ct-footer a:hover{color:var(--av-cyan) !important}
footer.ct-footer .widget-title,
footer.ct-footer h3{
  color:var(--av-text-3) !important;
  font-size:.79rem;letter-spacing:.15em;text-transform:uppercase;font-weight:800;
}
footer.ct-footer .menu{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;padding:0;list-style:none}

/* --- Panneau mobile ----------------------------------------------------- */
#offcanvas{background-color:var(--av-bg) !important}
#offcanvas .menu > li > a{
  padding:13px 4px;font-size:1.02rem;
  border-bottom:1px solid var(--av-line);
}

/* ==========================================================================
   17. ANIMATION À L'APPARITION
   ========================================================================== */

.av-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.av-reveal.is-visible{opacity:1;transform:none}

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */

@media (max-width:1000px){
  .av-g4,.av-g5{grid-template-columns:repeat(2,1fr)}
  .av-split{grid-template-columns:1fr;gap:36px}
}
@media (max-width:860px){
  .av-g2,.av-g3{grid-template-columns:1fr}
  .av-section{padding:68px 0}
  .av-arch-row{grid-template-columns:1fr}
  .av-cta{padding:44px 24px}
  .av-btn-row .av-btn{width:100%;justify-content:center}
}
@media (max-width:620px){
  .av-g4,.av-g5{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .av-reveal{opacity:1;transform:none}
  *{transition:none!important;animation:none!important}
}

@media print{
  .av-cta,.ct-header,[data-footer]{display:none}
  body{background:#fff;color:#111}
  h1,h2,h3{color:#000}
  .av-card{border:1px solid #ccc;background:#fff}
}