/* ==========================================================================
   HAB 360 — direction artistique 2026
   ==========================================================================

   Surcouche activable dans Reglages > General. Elle est chargee APRES
   hab360.css et se contente de neutraliser puis de redeclarer : rien n est
   supprime dans la feuille de base, si bien que desactiver le reglage
   retablit l apparence precedente a l identique.

   Ce qu elle corrige : le site empruntait le vocabulaire des interfaces
   logicielles — surtitres en pilule de verre, titre en degrade multicolore,
   pictogrammes cyan et violet, apparitions au defilement partout. Elle le
   remplace par un vocabulaire tire du lieu : filets, aplats francs, une
   seule couleur d accent, et la geometrie rayonnante de la coupole.

   Regle de travail : chaque bloc dit ce qu il neutralise ET redeclare la
   valeur de remplacement, sans quoi la propriete retombe sur un defaut
   inattendu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Le surtitre : la pilule de verre devient un cartel
   Un cartel de musee ne s enferme pas dans une gelule : il s annonce par un
   filet et se lit en petites capitales. Le pictogramme disparait — il ne
   portait aucune information que le texte ne donnait deja.
   -------------------------------------------------------------------------- */
:is(.hab360, .editor-styles-wrapper) .hab-eyebrow {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  gap: 16px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--hab-muted);
}

:is(.hab360, .editor-styles-wrapper) .hab-eyebrow::before {
  content: "";
  flex: none;
  width: 34px;
  height: 1px;
  background: var(--hab-accent);
}

:is(.hab360, .editor-styles-wrapper) .hab-eyebrow__icon { display: none; }

/* --------------------------------------------------------------------------
   2. Le titre : une seule couleur, mate
   La seconde ligne etait peinte d un degrade cyan vers violet vers or, anime
   en boucle. C est la signature la plus reconnaissable des pages generees.
   Le fond doit etre neutralise ET la couleur du texte redeclaree : le
   background-clip laissait le texte transparent.
   -------------------------------------------------------------------------- */
:is(.hab360, .editor-styles-wrapper) .hab-shine,
:is(.hab360, .editor-styles-wrapper) .hab-exp-hero .hab-shine {
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--hab-accent);
  animation: none;
}

/* --------------------------------------------------------------------------
   3. La palette : l or seul
   Le cyan et le violet ne venaient ni de la pierre, ni du verre, ni des
   projections. Les pictogrammes portent leur couleur en attribut : le CSS
   la surcharge, l attribut de presentation ayant une specificite nulle.
   -------------------------------------------------------------------------- */
:is(.hab360, .editor-styles-wrapper) svg[stroke="#4CC7E6"],
:is(.hab360, .editor-styles-wrapper) svg[stroke="#8B6CF0"],
:is(.hab360, .editor-styles-wrapper) svg[stroke="#EFC780"] {
  stroke: var(--hab-accent);
}

/* --------------------------------------------------------------------------
   4. Le verre depoli : des aplats et des filets
   Le flou est conserve la ou il sert la lisibilite — l en-tete fixe et le
   tiroir, qui flottent au-dessus du contenu defilant. Il disparait partout
   ou il n etait que decoratif.
   -------------------------------------------------------------------------- */
:is(.hab360, .editor-styles-wrapper) :is(.hab-tag, .hab-btn--ghost, .hab-burger, .hab-card__kicker) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:is(.hab360, .editor-styles-wrapper) .hab-tag {
  background: rgba(234, 240, 250, 0.05);
  border-color: rgba(234, 240, 250, 0.14);
}

:is(.hab360, .editor-styles-wrapper) .hab-btn--ghost {
  background: transparent;
  border-color: rgba(234, 240, 250, 0.3);
}

:is(.hab360, .editor-styles-wrapper) .hab-btn--ghost:hover {
  background: rgba(234, 240, 250, 0.08);
  border-color: var(--hab-accent);
}

:is(.hab360, .editor-styles-wrapper) .hab-burger {
  background: transparent;
  border-color: rgba(234, 240, 250, 0.22);
}

:is(.hab360, .editor-styles-wrapper) .hab-card__kicker {
  background: var(--hab-bg);
  border-color: rgba(234, 240, 250, 0.2);
}

/* --------------------------------------------------------------------------
   5. Les apparitions au defilement : reservees aux titres
   Quarante elements surgissaient les uns apres les autres. Le procede garde
   son effet quand il souligne l entree d une section, il devient un tic
   quand il s applique a chaque paragraphe et a chaque carte.
   -------------------------------------------------------------------------- */
:is(.hab360, .editor-styles-wrapper) .js [data-reveal]:not(.hab-h1):not(.hab-h2),
.js :is(.hab360, .editor-styles-wrapper) [data-reveal]:not(.hab-h1):not(.hab-h2) {
  animation: none;
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   6. La coupole
   La halle est coiffee d une verriere de 1865 dont les nervures rayonnent
   depuis un oculus. Le motif la cite : un eventail de fines nervures dorees
   qui monte du bas de la section et s eteint avant d atteindre le texte.
   Il est dessine en gradient, sans image ni requete supplementaire, et
   s efface pour qui demande moins d animation ou un affichage simplifie.
   -------------------------------------------------------------------------- */
:is(.hab360, .editor-styles-wrapper) .hab-ticker + .hab-section,
:is(.hab360, .editor-styles-wrapper) .hab-lieu-final {
  position: relative;
  isolation: isolate;
}

:is(.hab360, .editor-styles-wrapper) .hab-ticker + .hab-section::before,
:is(.hab360, .editor-styles-wrapper) .hab-lieu-final::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: min(1400px, 130%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  background: repeating-conic-gradient(
    from 180deg at 50% 100%,
    rgba(213, 162, 78, 0.16) 0deg 0.32deg,
    rgba(213, 162, 78, 0) 0.32deg 5.6deg
  );
  -webkit-mask-image: radial-gradient(ellipse 62% 88% at 50% 100%, #000 12%, rgba(0, 0, 0, 0) 74%);
  mask-image: radial-gradient(ellipse 62% 88% at 50% 100%, #000 12%, rgba(0, 0, 0, 0) 74%);
}

/* Le pied de page reprend l oculus, en plus discret. */
:is(.hab360, .editor-styles-wrapper) .hab-footer {
  position: relative;
  isolation: isolate;
}

:is(.hab360, .editor-styles-wrapper) .hab-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  width: min(1100px, 120%);
  aspect-ratio: 2.4 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg at 50% 0%,
    rgba(213, 162, 78, 0.11) 0deg 0.3deg,
    rgba(213, 162, 78, 0) 0.3deg 6deg
  );
  -webkit-mask-image: radial-gradient(ellipse 58% 92% at 50% 0%, #000 10%, rgba(0, 0, 0, 0) 70%);
  mask-image: radial-gradient(ellipse 58% 92% at 50% 0%, #000 10%, rgba(0, 0, 0, 0) 70%);
}

@media (prefers-reduced-motion: reduce) {
  :is(.hab360, .editor-styles-wrapper) .hab-ticker + .hab-section::before,
  :is(.hab360, .editor-styles-wrapper) .hab-lieu-final::before,
  :is(.hab360, .editor-styles-wrapper) .hab-footer::before { display: none; }
}

/* --------------------------------------------------------------------------
   7. Un filet sous les titres de section
   Le trait reprend la largeur du filet du cartel : la page se tient par une
   meme mesure, repetee, plutot que par des effets.
   -------------------------------------------------------------------------- */
:is(.hab360, .editor-styles-wrapper) .hab-head .hab-h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin-top: 22px;
  background: var(--hab-accent);
}

@media (max-width: 760px) {
  :is(.hab360, .editor-styles-wrapper) .hab-eyebrow::before { width: 22px; }
  :is(.hab360, .editor-styles-wrapper) .hab-head .hab-h2::after { margin-top: 16px; }
}

/* --------------------------------------------------------------------------
   8. L appel a l action : un filet, plus une boite
   Le bloc etait cerne d un contour et rempli d un degrade or vers violet vers
   cyan — le meme residu que le titre de l accueil, oublie au premier passage.
   Mesure : le contour valait 1,34 : 1 d ecart avec le fond, son fond 1,17 ;
   c est donc le contour qui portait a lui seul la delimitation, et le retirer
   sans rien redeclarer aurait laisse une tache diffuse.
   Il adopte ici la grammaire du reste du site : un filet, le texte pose
   dessous. Un appel a l action n a pas besoin d etre encadre pour etre lu,
   il a besoin d etre isole et de porter un bouton franc.
   -------------------------------------------------------------------------- */
:is(.hab360, .editor-styles-wrapper) .hab-cta__inner {
  padding: clamp(30px, 4vw, 48px) 0 clamp(44px, 6vw, 76px);
  border: 0;
  border-top: 1px solid var(--hab-accent);
  border-radius: 0;
  background: none;
}

/* --------------------------------------------------------------------------
   9. Les halos de fond : une seule source, chaude
   Trois halos radiaux — cyan, violet, or — flottaient derriere chaque page du
   site. Le fond en nappe multicolore est, avec le titre en degrade, l autre
   signature des pages generees. Seul l or subsiste : une lumiere unique et
   chaude, qui evoque la projection plutot qu un fond d application.
   -------------------------------------------------------------------------- */
:is(.hab360, .editor-styles-wrapper) :is(.hab-halo--cyan, .hab-halo--violet) { display: none; }

/* --------------------------------------------------------------------------
   10. Les messages du formulaire
   La confirmation etait cyan, derniere occurrence de cette couleur. Elle passe
   a l or. L erreur prend une teinte fonctionnelle distincte : une couleur d
   etat ne releve pas de la palette de marque, et un message d erreur doit se
   reconnaitre autrement que par la lecture de son texte.
   -------------------------------------------------------------------------- */
:is(.hab360, .editor-styles-wrapper) .hab-form__msg--ok {
  border-color: rgba(213, 162, 78, 0.45);
  background: rgba(213, 162, 78, 0.1);
  color: var(--hab-ink);
}

:is(.hab360, .editor-styles-wrapper) .hab-form__msg--err {
  border-color: rgba(199, 90, 74, 0.55);
  background: rgba(199, 90, 74, 0.14);
  color: #F0C4BC;
}