/* =========================================================================
   AVENTECH — BIBLIOTHÈQUE DE BLOCS
   Dépend de aventech-tokens.css, à charger avant ce fichier.

   Principe de gouvernance : chaque bloc est fermé. L'équipe éditoriale
   choisit un bloc et remplit son contenu ; elle ne choisit ni couleur,
   ni police, ni espacement. Aucune classe de ce fichier n'expose de
   réglage typographique ou chromatique.
   ========================================================================= */

/* -------------------------------------------------------------------------
   ATOMES — boutons
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--f-body);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-md);
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.btn--primary{background:var(--c-brand);color:#fff}
.btn--primary:hover{background:var(--c-brand-text);color:#fff}
.btn--secondary{background:var(--c-card);color:var(--c-brand-text);border-color:var(--c-line)}
.btn--secondary:hover{border-color:var(--c-brand);background:var(--c-brand);color:#fff}
.btn--ghost{background:transparent;color:var(--c-ink-soft);border-color:var(--c-line)}
.btn--ghost:hover{color:var(--c-brand-text);border-color:var(--c-brand)}
.btn--disabled,.btn[aria-disabled="true"]{background:var(--c-paper-2);color:var(--c-ink-soft);cursor:default;pointer-events:none}

/* Bouton pose sur le degrade ou sur une surface sombre.
   Blanc plein, libelle rouge fonce. Au survol il se teinte de rose pale
   plutot que de virer au noir, qui jurait avec le degrade.             */
.btn--onbrand{background:#fff;color:var(--c-brand-text);border-color:#fff}
.btn--onbrand:hover{background:var(--c-brand-tint);color:var(--c-brand-text);border-color:var(--c-brand-tint)}
.btn--onbrand:active{background:var(--c-brand-tint);transform:translateY(1px)}

/* Puces de filtre et badges                                                */
.chip{
  display:inline-block;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);
  background:var(--c-card);border:1px solid var(--c-line);color:var(--c-ink-soft);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer;
  transition:all var(--t-fast) var(--ease);
}
.chip:hover{border-color:var(--c-brand);color:var(--c-brand-text)}
.chip[aria-pressed="true"]{background:var(--c-brand);border-color:var(--c-brand);color:#fff}

.badge{
  display:inline-block;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);
  background:var(--c-brand-wash);border:1px solid var(--c-brand-line);
  color:var(--c-brand-text);font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:.06em;text-transform:uppercase;
}
.badge--neutral{background:var(--c-paper-2);border-color:var(--c-line);color:var(--c-ink-soft)}

/* -------------------------------------------------------------------------
   BLOC 1 — Fil d'Ariane
   Indispensable sur un site à quatre niveaux de profondeur, et lu par
   Google pour construire le chemin affiché dans les résultats.
   ------------------------------------------------------------------------- */
.blk-crumb{font-size:var(--fs-sm);color:var(--c-ink-soft);padding:var(--sp-5) 0 0}
.blk-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0;padding:0;max-width:none}
.blk-crumb li{margin:0;display:flex;align-items:center;gap:var(--sp-2)}
.blk-crumb li+li::before{content:"/";color:var(--c-line)}
.blk-crumb a{color:var(--c-ink-soft);text-decoration:none}
.blk-crumb a:hover{color:var(--c-brand-text);text-decoration:underline}
.blk-crumb [aria-current]{color:var(--c-ink);font-weight:var(--fw-medium)}

/* -------------------------------------------------------------------------
   BLOC 2 — Hero de page
   Trois variantes : rubrique, article, produit avec visuel.
   ------------------------------------------------------------------------- */
.blk-hero{padding:var(--sp-7) 0 var(--sp-6)}
.blk-hero__title{
  font-family:var(--f-display);font-weight:var(--fw-regular);
  font-size:var(--fs-hero);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);margin:0 0 var(--sp-4);
}
.blk-hero__lead{font-size:var(--fs-md);color:var(--c-ink-soft);max-width:60ch;margin:0}
.blk-hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}

/* Variante article : titre en Montserrat, car les titres Wikitech sont
   longs et se replient systématiquement sur deux ou trois lignes.        */
.blk-hero--article .blk-hero__title{
  font-family:var(--f-body);font-weight:var(--fw-bold);
  font-size:var(--fs-3xl);line-height:var(--lh-heading);letter-spacing:0;
}
.blk-hero__meta{display:flex;flex-wrap:wrap;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--c-ink-soft);margin-top:var(--sp-4)}

/* -------------------------------------------------------------------------
   BLOC 3 — Sommaire ancré
   Réservé aux pages Wikitech longues. Améliore la navigation et permet
   à Google d'afficher des liens de section sous le résultat.
   ------------------------------------------------------------------------- */
.blk-toc{
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);
  padding:var(--sp-5);margin:0 0 var(--sp-6);
}
.blk-toc__title{
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--c-ink-soft);margin:0 0 var(--sp-3);
}
.blk-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;max-width:none}
.blk-toc li{margin:0;border-bottom:1px solid var(--c-line)}
.blk-toc li:last-child{border-bottom:0}
.blk-toc a{
  display:block;padding:var(--sp-3) 0;color:var(--c-ink);text-decoration:none;
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
}
.blk-toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);color:var(--c-brand);margin-right:var(--sp-3);font-variant-numeric:tabular-nums}
.blk-toc a:hover{color:var(--c-brand-text)}

/* -------------------------------------------------------------------------
   BLOC 4 — Encart
   Deux tonalités seulement. Pas de vert, pas de bleu, pas d'orange :
   la palette reste monochrome rouge.
   ------------------------------------------------------------------------- */
.blk-note{
  border-left:3px solid var(--c-line);border-radius:0;
  background:var(--c-card);padding:var(--sp-4) var(--sp-5);margin:var(--sp-5) 0;
}
.blk-note__label{
  display:block;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--c-ink-soft);margin-bottom:var(--sp-2);
}
.blk-note p:last-child{margin-bottom:0}
.blk-note--key{border-left-color:var(--c-brand);background:var(--c-brand-wash)}
.blk-note--key .blk-note__label{color:var(--c-brand-text)}

/* -------------------------------------------------------------------------
   BLOC 5 — Tableau de caractéristiques
   Passe en liste empilée sous 768px : un tableau technique à six colonnes
   est illisible sur mobile, or 35 % de ton trafic y est.
   ------------------------------------------------------------------------- */
.blk-specs{margin:var(--sp-5) 0}
.blk-specs table{margin:0}
.blk-specs th[scope="row"]{
  font-weight:var(--fw-medium);color:var(--c-ink-soft);
  width:38%;background:transparent;text-transform:none;letter-spacing:0;font-size:var(--fs-sm);
}
@media (max-width:767px){
  .blk-specs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .blk-specs tr{display:block;border-bottom:1px solid var(--c-line);padding:var(--sp-3) 0}
  .blk-specs th[scope="row"],.blk-specs td{display:block;width:auto;border:0;padding:var(--sp-1) 0}
  .blk-specs th[scope="row"]{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em}
}

/* -------------------------------------------------------------------------
   BLOC 6 — Alternance texte / image
   Motif dominant des pages solution. L'inversion est une classe,
   pas un réglage libre.
   ------------------------------------------------------------------------- */
.blk-split{display:grid;gap:var(--sp-6);align-items:center;padding:var(--section-y) 0}
.blk-split__media img{width:100%;border-radius:var(--r-lg);display:block}
.blk-split__body>*:last-child{margin-bottom:0}
@media (min-width:768px){
  .blk-split{grid-template-columns:1fr 1fr;gap:var(--sp-7)}
  .blk-split--reverse .blk-split__media{order:2}
}

/* -------------------------------------------------------------------------
   BLOC 7 — Grille de cartes
   ------------------------------------------------------------------------- */
.blk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--sp-5);padding:var(--sp-5) 0}
.card{
  display:flex;flex-direction:column;background:var(--c-card);
  border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-card);transition:transform var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.card:hover{transform:translateY(-3px);border-color:var(--c-brand)}
.card__media{aspect-ratio:1.55/1;background:var(--c-paper-2);position:relative;overflow:hidden;border-bottom:1px solid var(--c-line)}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__tag{position:absolute;top:var(--sp-3);left:var(--sp-3);z-index:2}
.card__body{padding:var(--sp-4) var(--sp-4) var(--sp-5);display:flex;flex-direction:column;flex:1}
.card__title{
  font-family:var(--f-display);font-weight:var(--fw-regular);font-size:var(--fs-lg);
  line-height:var(--lh-display);letter-spacing:var(--ls-display);margin:0 0 var(--sp-2);
}
.card__title a{color:var(--c-ink);text-decoration:none}
.card__title a:hover{color:var(--c-brand-text)}
.card__desc{font-size:var(--fs-sm);color:var(--c-ink-soft);margin:0 0 var(--sp-4);flex:1;max-width:none}
.card__actions{display:flex;gap:var(--sp-3)}

/* -------------------------------------------------------------------------
   BLOC 8 — Chiffres clés
   ------------------------------------------------------------------------- */
.blk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:var(--sp-5);padding:var(--section-y) 0;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.stat__value{
  font-family:var(--f-display);font-weight:var(--fw-regular);font-size:var(--fs-3xl);
  line-height:1;letter-spacing:var(--ls-display);color:var(--c-brand);
  display:block;font-variant-numeric:tabular-nums;
}
.stat__label{display:block;font-size:var(--fs-sm);color:var(--c-ink-soft);margin-top:var(--sp-2)}

/* -------------------------------------------------------------------------
   BLOC 9 — Questions fréquentes
   Balisage details/summary : accessible au clavier sans JavaScript,
   et exploitable par Google pour les extraits enrichis.
   ------------------------------------------------------------------------- */
.blk-faq{margin:var(--sp-6) 0;border-top:1px solid var(--c-line)}
.blk-faq details{border-bottom:1px solid var(--c-line)}
.blk-faq summary{
  padding:var(--sp-4) var(--sp-6) var(--sp-4) 0;cursor:pointer;position:relative;
  font-weight:var(--fw-semibold);font-size:var(--fs-md);list-style:none;
}
.blk-faq summary::-webkit-details-marker{display:none}
.blk-faq summary::after{
  content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  color:var(--c-brand);font-size:var(--fs-xl);line-height:1;font-weight:var(--fw-regular);
}
.blk-faq details[open] summary::after{content:"\2013"}
.blk-faq summary:hover{color:var(--c-brand-text)}
.blk-faq__answer{padding:0 0 var(--sp-4)}
.blk-faq__answer>*:last-child{margin-bottom:0}

/* -------------------------------------------------------------------------
   BLOC 10 — Appel à l'action
   ------------------------------------------------------------------------- */
.blk-cta{
  background:var(--c-night);color:#fff;border-radius:var(--r-lg);
  padding:var(--sp-7) var(--sp-6);margin:var(--section-y) 0;text-align:center;
}
.blk-cta__title{
  font-family:var(--f-display);font-weight:var(--fw-regular);font-size:var(--fs-2xl);
  line-height:var(--lh-display);letter-spacing:var(--ls-display);color:#fff;margin:0 0 var(--sp-3);
}
/* Le texte d'accompagnement doit rester en blanc pur. Un blanc adouci
   à 85 ou 90 % tombe à 3,8 de contraste sur le rouge clair, sous le
   seuil AA. Sur fond sombre on pouvait se permettre du gris ; ici non. */
.blk-cta p{color:#fff;opacity:.94;margin:0 auto var(--sp-5);max-width:52ch}

/* Sur le dégradé, le bouton plein blanc à texte rouge foncé atteint
   7,14 et reste le plus lisible.                                       */
.blk-cta .btn--secondary{background:#fff;color:var(--c-brand-text);border-color:#fff}
.blk-cta .btn--secondary:hover{background:var(--c-brand-tint);color:var(--c-brand-text);border-color:var(--c-brand-tint)}

/* Variante dégradé rouge vers nuit.
   Repli en aplat rouge si le dégradé n'est pas supporté.               */
.blk-cta--brand{background:var(--c-brand);background:var(--c-brand-grad)}

/* Sur le dégradé, un bouton rouge tombe à 2,98 de contraste contre
   l'extrémité nuit : sous le seuil de 3 exigé pour un élément
   d'interface. Le bouton principal rouge est donc interdit ici.        */
.blk-cta--brand .btn--primary,
.blk-band .btn--primary{background:#fff;color:var(--c-brand-text);border-color:#fff}
.blk-cta--brand .btn--primary:hover,
.blk-band .btn--primary:hover{background:var(--c-brand-tint);color:var(--c-brand-text);border-color:var(--c-brand-tint)}

/* Bandeau pleine largeur, sans arrondi : recrutement, bas de page.     */
.blk-band{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--c-brand);background:var(--c-brand-grad);
  color:#fff;padding:var(--section-y) 0;border-radius:0;margin:0;
}

/* FILIGRANE — le A Aventech en fond.
   Pseudo-element plutot qu'une balise img : invisible pour les lecteurs
   d'ecran et pour Google, ce qui est correct puisqu'il ne porte aucune
   information. Le contenu passe au-dessus via z-index.

   Les quatre traces du ruban sont remplis en gris OPAQUES, jamais en
   semi-transparence. C'est ce qui evite les coutures : deux calques
   translucides qui se chevauchent s'additionnent et creent une bande
   plus claire ; deux traces opaques, non. La differenciation vient donc
   de la valeur de gris (255 / 219 / 189 / 158), et une seule opacite
   globale est appliquee ici.                                           */
.blk-band--mark::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-4%;top:50%;transform:translateY(-50%);
  width:min(46%,520px);aspect-ratio:461.92/417.8;
  background:url("../img/a-mark.svg") center/contain no-repeat;
  /* 12 % est un plafond mesure, pas une preference : au-dela, le blanc
     eclaircit le fond rouge et le texte blanc passe sous 4,5.
     A 12 % il est a 4,51, a 14 % il tombe a 4,41.                      */
  opacity:.12;
}
.blk-band>*{position:relative;z-index:1}

/* Sur mobile, le filigrane passe derriere le texte centre et nuit a la
   lisibilite : on le reduit et on le decale.                           */
@media (max-width:767px){
  .blk-band--mark::before{width:70%;right:-18%;opacity:.09}
}
@media (prefers-reduced-motion:no-preference){
  .blk-band--mark::before{transition:opacity var(--t-base) var(--ease)}
}
.blk-band .u-eyebrow{color:#fff;opacity:.85}
.blk-band h2{color:#fff}
.blk-band p{color:#fff;opacity:.94}

/* Dans un bloc centre, la boite de mesure des paragraphes doit elle-meme
   etre centree, sinon le texte se centre dans une boite calee a gauche. */
.blk-band[style*="center"] p,
.blk-band--center p,
.blk-cta p{margin-inline:auto}

/* -------------------------------------------------------------------------
   BLOC 11 — Pages liées
   Maillage interne entre pages Wikitech : le levier qui fait remonter
   les pages faibles en s'appuyant sur les pages fortes.
   ------------------------------------------------------------------------- */
.blk-related{padding:var(--section-y) 0 0;border-top:1px solid var(--c-line);margin-top:var(--sp-7)}
.blk-related__title{font-size:var(--fs-xl);margin-bottom:var(--sp-5)}
.blk-related ul{list-style:none;padding:0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));max-width:none}
.blk-related li{margin:0}
.blk-related a{
  display:block;padding:var(--sp-4);background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-md);color:var(--c-ink);text-decoration:none;font-weight:var(--fw-medium);
  font-size:var(--fs-sm);transition:border-color var(--t-base) var(--ease);
}
.blk-related a:hover{border-color:var(--c-brand);color:var(--c-brand-text)}

/* -------------------------------------------------------------------------
   BLOC 12 — Formulaire
   ------------------------------------------------------------------------- */
.blk-form{display:grid;gap:var(--sp-4);max-width:560px}
.field{display:grid;gap:var(--sp-2)}
.field label{font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.field input,.field textarea,.field select{
  font:inherit;font-size:var(--fs-base);padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--c-line);border-radius:var(--r-sm);background:#fff;color:var(--c-ink);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--c-brand-text);outline-offset:1px;border-color:var(--c-brand)}
.field__hint{font-size:var(--fs-xs);color:var(--c-ink-soft)}
.field__error{font-size:var(--fs-sm);color:var(--c-error)}
.field--invalid input{border-color:var(--c-error);background:var(--c-error-wash)}


/* =========================================================================
   BLOC 14 — IMAGES
   Toute image du site passe par ce composant. Le conteneur impose la
   proportion, l'image la remplit en recadrage. Consequence directe :
   plus aucun saut de mise en page au chargement, puisque la place est
   reservee avant que l'image n'arrive.
   ========================================================================= */
.media{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--c-paper-2);        /* visible pendant le chargement    */
  aspect-ratio:var(--ratio-photo);
}
.media img{width:100%;height:100%;object-fit:cover;display:block}

.media--wide{aspect-ratio:var(--ratio-wide)}
.media--card{aspect-ratio:var(--ratio-card)}
.media--portrait{aspect-ratio:var(--ratio-portrait)}
.media--free{aspect-ratio:auto}       /* schemas techniques, plans        */

/* Schemas et plans : jamais de recadrage, jamais de fond gris.          */
.media--diagram{background:var(--c-card);border:1px solid var(--c-line);aspect-ratio:auto}
.media--diagram img{object-fit:contain;height:auto}

/* TEINTE DE MARQUE — usage exceptionnel, verifie sur photos reelles.
   Mesures sur la photothèque Aventech : la teinte assombrit de 25 %,
   ecrase le canal bleu (0,73 -> 0,51 sur une photo de ciel) et remonte
   la saturation d'une photo travaillee en quasi monochrome de 0,03 a
   0,29, detruisant son traitement.
   La photothèque applique deja la charte : fond desature, accent rouge.
   Elle n'a donc pas besoin d'etre teintee.
   Reserve aux seules banques d'images generiques hors charte, et
   uniquement sur des visuels sans ciel bleu et sans rouge existant.    */
.media--tint::after{
  content:"";position:absolute;inset:0;
  background:var(--c-brand);mix-blend-mode:multiply;opacity:.15;
}

/* VOILE DE LISIBILITE, obligatoire des qu'un texte se superpose.        */
.media--scrim::after{content:"";position:absolute;inset:0;background:var(--scrim)}
.media__overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:var(--sp-5);color:#fff;
}
.media__overlay h2,.media__overlay h3{color:#fff;margin:0 0 var(--sp-2)}
.media__overlay p{color:#fff;margin:0}
.media__overlay .u-eyebrow{color:#fff;opacity:.85}

/* Legende sous l'image.                                                  */
.media__caption{
  font-size:var(--fs-sm);color:var(--c-ink-soft);
  margin:var(--sp-3) 0 0;max-width:var(--measure);
}

/* Cadre discret pour les visuels sur fond clair qui manquent de limite. */
.media--framed{border:1px solid var(--c-line)}

/* =========================================================================
   BLOC 15 — WIKITECH
   Gabarit de l'encyclopedie. Elle porte 58 % des impressions du site et
   ses neuf articles cumulent 5 322 clics sur douze mois : c'est le
   moteur du referencement, et le gabarit le plus soigne du projet.
   ========================================================================= */

/* Recherche interne. Neuf articles aujourd'hui, mais l'encyclopedie a
   vocation a grossir : la recherche est prevue des maintenant.          */
.wiki-search{position:relative;max-width:520px;margin:0 0 var(--sp-5)}
.wiki-search input{
  width:100%;font:inherit;font-size:var(--fs-base);
  padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-8);
  border:1px solid var(--c-line);border-radius:var(--r-pill);
  background:var(--c-card);color:var(--c-ink);
}
.wiki-search input:focus{outline:2px solid var(--c-brand-text);outline-offset:1px;border-color:var(--c-brand)}
.wiki-search::before{
  content:"";position:absolute;left:var(--sp-4);top:50%;
  width:16px;height:16px;margin-top:-8px;pointer-events:none;
  border:2px solid var(--c-ink-soft);border-radius:50%;
}
.wiki-search::after{
  content:"";position:absolute;left:32px;top:50%;margin-top:4px;
  width:7px;height:2px;background:var(--c-ink-soft);
  transform:rotate(45deg);pointer-events:none;
}

.wiki-filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-6)}

/* Vignette d'article. Le sur-titre porte le mot-cle cible, jamais l'URL. */
.wiki-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
/* Vignette. Recadrage serre : les photos Aventech sont tres detaillees
   et deviennent illisibles reduites en entier a 300px de large.        */
.wiki-card__media{
  aspect-ratio:var(--ratio-card);background:var(--c-paper-2);
  overflow:hidden;border-bottom:1px solid var(--c-line);
}
.wiki-card__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--t-base) var(--ease)}
.wiki-card:hover .wiki-card__media img{transform:scale(1.04)}
.wiki-card__body{display:flex;flex-direction:column;flex:1;padding:var(--sp-5)}
.wiki-card:hover{border-color:var(--c-brand);transform:translateY(-3px)}
.wiki-card .u-eyebrow{margin-bottom:var(--sp-2)}
.wiki-card__title{
  font-family:var(--f-body);font-weight:var(--fw-semibold);
  font-size:var(--fs-lg);line-height:var(--lh-heading);margin:0 0 var(--sp-3);
}
.wiki-card__title a{color:var(--c-ink);text-decoration:none}
/* La zone cliquable couvre toute la vignette, sans imbriquer de liens.   */
.wiki-card__title a::after{content:"";position:absolute;inset:0}
.wiki-card{position:relative}
.wiki-card__title a:hover{color:var(--c-brand-text)}
.wiki-card__desc{font-size:var(--fs-sm);color:var(--c-ink-soft);margin:0 0 var(--sp-4);flex:1;max-width:none}
.wiki-card__meta{font-size:var(--fs-xs);color:var(--c-ink-soft);letter-spacing:.04em;text-transform:uppercase}

.wiki-grid{
  display:grid;gap:var(--sp-5);
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
}

/* Mise en avant de l'article pivot.                                      */
.wiki-card--lead{background:var(--c-night);border-color:var(--c-night)}
.wiki-card--lead .wiki-card__media{border-bottom-color:var(--c-night)}
.wiki-card--lead .wiki-card__title a{color:#fff}
.wiki-card--lead .wiki-card__desc,.wiki-card--lead .wiki-card__meta{color:#c8ccd4}
.wiki-card--lead .u-eyebrow{color:#fff;opacity:.85}
.wiki-card--lead:hover{border-color:var(--c-brand)}
@media (min-width:768px){.wiki-card--lead{grid-column:span 2}}



/* Classes de gabarit — remplacent les styles en ligne, qui n'auraient
   jamais suivi une evolution de la charte.                             */
.blk-band--center{text-align:center}
.blk-band__title{
  font-family:var(--f-display);font-weight:var(--fw-regular);
  font-size:var(--fs-2xl);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);color:#fff;margin:0 0 var(--sp-3);
}
.blk-band__lead{margin:0 auto var(--sp-5);max-width:52ch}
.prose__hero{margin-bottom:var(--sp-6)}
.wiki-aside__box{margin-top:var(--sp-5)}
.wiki-aside__box p{font-size:var(--fs-sm)}

/* Bandeau en deux colonnes.
   Gauche : appel a l'action propre a la page, saisi par la redaction.
   Droite : bloc contact generique, identique sur tout le site.
   Le filigrane du A reste cale a droite, derriere la colonne contact.  */
.blk-band__grid{display:grid;gap:var(--sp-6)}
@media (min-width:900px){
  .blk-band__grid{grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start}
  .blk-band--split .blk-band__contact{text-align:right}
  .blk-band--split .blk-band__contact .u-eyebrow{text-align:right}
}
.blk-band__grid h2{
  font-family:var(--f-display);font-weight:var(--fw-regular);
  font-size:var(--fs-2xl);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);color:#fff;margin:0 0 var(--sp-4);
}
.blk-band__grid p{color:#fff;opacity:.94;max-width:52ch;margin:0 0 var(--sp-4)}
.blk-band--split .blk-band__contact p{margin-left:auto}
.blk-band__grid p:last-of-type{margin-bottom:var(--sp-5)}

/* Renvoi vers les solutions, en pied d'article.                        */
.blk-cross{padding:var(--section-y) 0}
.blk-cross__cards{
  display:grid;gap:var(--sp-5);margin-top:var(--sp-6);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
}
.blk-cross .card__body{text-align:center;align-items:center}
.blk-cross .card__title{font-family:var(--f-body);font-weight:var(--fw-semibold);font-size:var(--fs-lg);letter-spacing:0}


/* Conteneur de gabarit.
   Astra place le contenu dans un conteneur en display:flex, prevu pour sa
   barre laterale. Sans enveloppe, chaque section de premier niveau devient
   une colonne : l'article, le sommaire et le bandeau se retrouvent cote a
   cote. Cette enveloppe occupe toute la ligne et retablit un flux normal. */
.aventech-page{
  display:block;
  width:100%;
  max-width:100%;
  flex:1 1 100%;   /* si le parent est en flex */
  grid-column:1/-1; /* si le parent est en grid */
  min-width:0;
}
.aventech-page>*{width:100%}




/* ---- Neutralisation des conteneurs du theme parent ----
   position:sticky echoue des qu'un ancetre porte overflow:hidden, meme
   sur le seul axe horizontal. Astra l'applique pour eviter les
   debordements. On le retire, sur nos gabarits uniquement.
   Un enfant ne pouvant pas corriger son parent, il faut passer par la
   classe posee sur <body>.                                             */
/* overflow:hidden casse position:sticky pour tous les descendants, car il
   cree un conteneur de defilement. overflow-x:clip bloque le debordement
   horizontal sans cet effet de bord. A appliquer sur html ET body : les
   extensions d'en-tete collant posent souvent la regle sur la racine.  */
html.aventech-template,
body.aventech-template{
  overflow-x:clip;
  overflow-y:visible;
}

.aventech-template #page,
.aventech-template .site-content,
.aventech-template .ast-container,
.aventech-template #primary,
.aventech-template #main,
.aventech-template .entry-content,
.aventech-template .aventech-page{
  overflow:visible;
}

/* Le conteneur du contenu ne doit pas brider notre largeur.            */
.aventech-template #primary,
.aventech-template .entry-content{max-width:none;width:100%;padding:0;margin:0}





/* =========================================================================
   MISE EN PAGE DE L'ARTICLE — une seule colonne, une seule largeur
   Tout est aligne sur la meme verticale : fil d'Ariane, titre, image,
   sommaire, texte. C'est la regle p{max-width:68ch} du socle qui creait
   le decalage entre le texte et l'image ; on la neutralise ici et on
   confie la largeur de ligne a la colonne elle-meme.
   ========================================================================= */
.aventech-page .wrap{max-width:1180px}
.aventech-page .blk-band .wrap{max-width:var(--w-max)}

.wiki-layout{display:block;max-width:none;margin-inline:auto}

/* Deux colonnes a partir de 1000px. L'enveloppe .aventech-page neutralise
   le conteneur flex d'Astra : la grille peut donc fonctionner ici, ce qui
   n'etait pas le cas avant.                                             */
@media (min-width:1000px){
  .wiki-layout{
    display:grid;
    grid-template-columns:minmax(0,68ch) 300px;
    gap:var(--sp-7);
    align-items:start;
  }
  /* La colonne accompagne la lecture. Le decalage haut vient de la
     variable mesuree par le script, avec un repli a 100px si le script
     n'a pas encore tourne. La hauteur est bornee pour que les articles
     longs restent atteignables au defilement interne.                  */
  .wiki-layout__aside{
    position:sticky;
    top:calc(var(--aventech-header-h, 100px) + var(--sp-4));
    max-height:calc(100vh - var(--aventech-header-h, 100px) - var(--sp-6));
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  .wiki-layout__aside::-webkit-scrollbar{width:6px}
  .wiki-layout__aside::-webkit-scrollbar-thumb{background:var(--c-line);border-radius:var(--r-pill)}
}

/* Le texte occupe toute la colonne. A 17px sur 880px, la ligne fait
   environ 80 caracteres : un peu au-dessus de l'ideal typographique,
   mais l'alignement avec les images prime.                             */
.prose{font-size:1.0625rem}
.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose .u-lead,
.blk-hero__lead{max-width:none}

.blk-toc{margin-bottom:var(--sp-6)}
/* Sommaire sur deux colonnes de liens uniquement sous 1000px, quand il
   repasse en pleine largeur au-dessus du texte.                        */
@media (min-width:700px) and (max-width:999px){
  .blk-toc ol{columns:2;column-gap:var(--sp-6)}
  .blk-toc li{break-inside:avoid}
}
.wiki-aside__box{margin-top:var(--sp-5)}
.wiki-aside__box p{font-size:var(--fs-sm)}

/* Bandeau centre : la boite de mesure doit elle-meme etre centree.     */
.blk-band--center .blk-band__grid{max-width:62ch;margin-inline:auto}
.blk-band--center .blk-band__grid p{margin-inline:auto}
.blk-band--center .blk-band__grid h2{text-align:center}

/* =========================================================================
   PRIORITE TYPOGRAPHIQUE

   Trois sources definissent les polices sur la meme page : la charte
   Aventech, les reglages de typographie d'Astra, et les polices globales
   du kit Elementor. Nos regles ciblaient body et h2 — des selecteurs de
   niveau element, les plus faibles possible. A force egale, la derniere
   feuille chargee l'emporte, et ce n'est pas la notre.

   On rattache donc les regles a .aventech-page, ce qui les fait passer
   devant sans recourir a !important. Portee limitee a nos gabarits : le
   reste du site continue d'utiliser ses reglages actuels.
   ========================================================================= */

body.aventech-template,
.aventech-page,
.aventech-page p,
.aventech-page li,
.aventech-page td,
.aventech-page th,
.aventech-page dd,
.aventech-page dt,
.aventech-page figcaption,
.aventech-page summary,
.aventech-page label,
.aventech-page input,
.aventech-page textarea,
.aventech-page select,
.aventech-page button,
.aventech-page a,
.aventech-page span,
.aventech-page strong,
.aventech-page em{
  font-family:var(--f-body);
}

/* Titres : Montserrat a partir du H2, conformement a la charte.        */
.aventech-page h2,
.aventech-page h3,
.aventech-page h4,
.aventech-page h5,
.aventech-page h6,
.aventech-page .blk-related__title,
.aventech-page .wiki-card__title,
.aventech-page .blk-hero--article .blk-hero__title{
  font-family:var(--f-body);
  font-weight:var(--fw-semibold);
}
.aventech-page .blk-hero--article .blk-hero__title{font-weight:var(--fw-bold)}

/* Bebas : titres courts uniquement.                                    */
.aventech-page h1,
.aventech-page .u-display,
.aventech-page .blk-hero__title,
.aventech-page .blk-band__title,
.aventech-page .card__title,
.aventech-page .stat__value{
  font-family:var(--f-display);
  font-weight:var(--fw-regular);
  letter-spacing:var(--ls-display);
}
/* ...sauf le titre d'article, deja rebascule en Montserrat ci-dessus.  */

/* Sur-titres et libelles.                                              */
.aventech-page .u-eyebrow,
.aventech-page .blk-toc__title,
.aventech-page .blk-note__label,
.aventech-page .wiki-card__meta,
.aventech-page .badge{
  font-family:var(--f-body);
  font-weight:var(--fw-semibold);
}

/* Tailles de texte — valeurs de la charte, reaffirmees dans cette portee
   parce qu'Astra les redefinit avec ses propres reglages.
   Le texte courant est a 16px, pas 18 : c'est l'echelle du socle.      */
.aventech-page .prose,
.aventech-page .prose p,
.aventech-page .prose li{
  font-size:var(--fs-base);
  line-height:var(--lh-loose);
  color:var(--c-ink);
}
.aventech-page .blk-hero__lead{font-size:var(--fs-md)}

/* Tailles et interlignages de titres.
   Astra impose 42px et un interlignage d'environ 1,45 : soit 52px de
   hauteur de ligne sur un titre de 36. La charte dit 36px et 1,2, soit
   43px. On fixe les deux ensemble, sinon un seul oubli laisse passer
   la valeur du theme parent.

   1,2 est un plancher, pas une preference. En dessous de 1,1, l'accent
   d'une capitale de la ligne basse vient toucher la ligne du dessus :
   Equipements, Eolien, Integration. A 1,2 il reste 7px de degagement.  */
.aventech-page h1{font-size:var(--fs-3xl);line-height:var(--lh-display)}
.aventech-page h2{font-size:var(--fs-2xl);line-height:var(--lh-heading)}
.aventech-page h3{font-size:var(--fs-xl);line-height:var(--lh-heading)}
.aventech-page h4{font-size:var(--fs-lg);line-height:var(--lh-heading)}
.aventech-page h5,
.aventech-page h6{font-size:var(--fs-md);line-height:var(--lh-heading)}

/* Marges de titres : Astra en ajoute egalement. On revient au rythme
   de la charte, plus serre au-dessus qu'en dessous pour que le titre
   reste visuellement attache au texte qu'il annonce.                   */
.aventech-page .prose h2{margin:var(--sp-7) 0 var(--sp-4)}
.aventech-page .prose h3{margin:var(--sp-6) 0 var(--sp-3)}
.aventech-page .prose h4{margin:var(--sp-5) 0 var(--sp-3)}
.aventech-page .prose>h2:first-child,
.aventech-page .prose>h3:first-child{margin-top:0}
.aventech-page .blk-hero__title{font-size:var(--fs-3xl);line-height:var(--lh-display)}
.aventech-page .blk-hero--article .blk-hero__title{line-height:var(--lh-heading)}
.aventech-page .blk-band__title{font-size:var(--fs-2xl);line-height:var(--lh-display)}
.aventech-page .wiki-card__title{font-size:var(--fs-lg);line-height:var(--lh-heading)}
.aventech-page .blk-toc__title,
.aventech-page .u-eyebrow,
.aventech-page .blk-note__label{font-size:var(--fs-xs)}
@media (min-width:768px){
  .aventech-page .blk-hero__title{font-size:var(--fs-hero)}
  .aventech-page .blk-hero--article .blk-hero__title{font-size:var(--fs-3xl)}
}

/* La colonne est calee sur la mesure de lecture, pas les paragraphes.
   Consequence : texte, images, tableaux et encarts ont exactement la
   meme largeur, sans avoir a gonfler la taille du texte.               */
.aventech-page .prose{max-width:68ch}

/* Encart lateral : filet et libelle repris sur le rouge du bouton, soit
   --c-brand-text (7,14 de contraste sur blanc). Le rouge vif serait a
   4,88 sur ce fond, sous le seuil pour un texte de cette taille.       */
.aventech-page .wiki-aside__box{border-left-color:var(--c-brand-text)}
.aventech-page .wiki-aside__box .blk-note__label{color:var(--c-brand-text)}

/* Bloc de maillage interne : l'espace au-dessus cumulait la marge du
   bloc, son remplissage et la marge haute des h2 du contenu, qui
   s'appliquait aussi a son titre. Trois sources pour un seul ecart.    */
.aventech-page .blk-related{
  margin-top:var(--sp-6);
  padding-top:var(--sp-5);
}
.aventech-page .prose .blk-related__title{
  margin:0 0 var(--sp-4);
  font-size:var(--fs-xl);
}

/* Bandeau de bas de page : plus de respiration avant, moins dedans.
   Le vide qui precede separe deux sections ; le remplissage interne
   n'a pas besoin d'etre aussi genereux, le dégradé suffit a marquer
   le changement de registre.                                          */
.aventech-page .blk-band{
  margin-top:var(--sp-9);
  padding-block:clamp(2.25rem,3.5vw,3rem);
}

/* =========================================================================
   TITRES EN BEBAS — H1 et H2 du corps d'article
   Arbitrage du 29 juillet 2026 : Bebas descend du seul H1 aux H2 des
   articles. Elle est condensee, donc elle fait tenir environ 45 signes
   par ligne a 36px dans la colonne de lecture : les titres de section
   Wikitech tiennent sur deux lignes au maximum.

   Restent en Montserrat : les H3 et H4, pour garder un contraste de
   hierarchie, et les titres de navigation — vignettes de l'index, bloc
   de suggestions — ou un titre d'article complet en capitales condensees
   serait penible a lire dans une carte etroite.
   ========================================================================= */
.aventech-page h1,
.aventech-page .blk-hero__title,
.aventech-page .blk-hero--article .blk-hero__title,
.aventech-page .prose h2{
  font-family:var(--f-display);
  font-weight:var(--fw-regular);
  letter-spacing:var(--ls-display);
}

/* Interlignage : Bebas n'a pas de jambages descendants, on peut serrer.
   Mais les capitales accentuees depassent la hauteur de capitale, et se
   toucheraient en dessous de 1,1 sur un titre de deux lignes.          */
.aventech-page h1,
.aventech-page .blk-hero__title,
.aventech-page .blk-hero--article .blk-hero__title{line-height:1.08}
.aventech-page .prose h2{line-height:1.12}

/* Bebas paraissant optiquement plus petite a taille egale, on compense
   legerement sur les titres de section.                               */
.aventech-page .prose h2{font-size:2.5rem}

/* Les titres de navigation restent en Montserrat.                     */
.aventech-page .wiki-card__title,
.aventech-page .prose .blk-related__title,
.aventech-page .blk-toc__title{
  font-family:var(--f-body);
  font-weight:var(--fw-semibold);
  letter-spacing:0;
}

/* Bebas etendue aux titres de bandeau et de bloc de suggestions.
   Le bandeau en deux colonnes produit un <h2> nu dans .blk-band__grid,
   sans la classe .blk-band__title : il echappait a la regle.
   Seules les vignettes de l'index restent en Montserrat, un titre
   d'article complet en capitales condensees y serait illisible.       */
.aventech-page .blk-band__grid h2,
.aventech-page .blk-band__title,
.aventech-page .prose .blk-related__title{
  font-family:var(--f-display);
  font-weight:var(--fw-regular);
  letter-spacing:var(--ls-display);
  line-height:1.12;
}
.aventech-page .blk-band__grid h2,
.aventech-page .blk-band__title{font-size:2.5rem}
.aventech-page .prose .blk-related__title{font-size:2rem}


/* Vignette mise en avant : rouge de marque plutot que nuit ardoise.
   Aplat et non degrade — la charte reserve le degrade aux grandes
   surfaces, jamais aux cartes.
   Le blanc pur est obligatoire ici : sur #E30613 il atteint 4,88, mais
   tout blanc adouci tombe sous le seuil de 4,5.                       */
.aventech-page .wiki-card--lead{
  background:var(--c-brand);
  border-color:var(--c-brand);
}
.aventech-page .wiki-card--lead:hover{border-color:var(--c-brand-text)}
.aventech-page .wiki-card--lead .wiki-card__media{border-bottom-color:var(--c-brand)}
.aventech-page .wiki-card--lead .wiki-card__title a{color:#fff}
.aventech-page .wiki-card--lead .wiki-card__title a:hover{color:#fff;text-decoration:underline}
.aventech-page .wiki-card--lead .wiki-card__desc,
.aventech-page .wiki-card--lead .wiki-card__meta{color:#fff}
.aventech-page .wiki-card--lead .u-eyebrow{color:#fff;opacity:.85}

/* Respiration avant le pied de page.
   Ne s'applique pas quand la page se termine par un bandeau pleine
   largeur : celui-ci doit rester au contact du pied de page, c'est ce
   qui donne la continuite des deux aplats sombres.                    */
.aventech-page>*:last-child:not(.blk-band){margin-bottom:var(--sp-9)}