/* HOOJ Digital — identité « Assemblage » (31/10/2026)
   Violet #6836C5, encre #24202D, blanc. Titres : Saira Semi Condensed ; texte : Plus Jakarta Sans.
   Tablette d'abord, puis téléphone et bureau. Pas d'animation forte ; mouvement réduit respecté. */

@font-face { font-family: 'Saira SC'; src: url('/assets/fonts/saira-semi-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Saira SC'; src: url('/assets/fonts/saira-semi-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Saira SC'; src: url('/assets/fonts/saira-semi-condensed-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Jakarta'; src: url('/assets/fonts/plus-jakarta-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Jakarta'; src: url('/assets/fonts/plus-jakarta-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Jakarta'; src: url('/assets/fonts/plus-jakarta-sans-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --violet: #6836C5;            /* boutons, marque */
  --violet-fonce: #5729AE;
  --violet-doux: #A98BF0;       /* accents sur fond sombre */
  --accent: #B9A2F7;            /* texte accentué, liens */
  --violet-pale: rgba(124, 77, 224, .18);
  --encre: #FFFFFF;             /* titres */
  --texte: rgba(236, 232, 245, .82);
  --gris: rgba(222, 215, 236, .62);
  --fond: #0E0B1C;
  --blanc: rgba(255, 255, 255, .045);   /* surfaces (cartes) */
  --surface-forte: #17122C;
  --bord: rgba(196, 181, 253, .14);
  --nuit: #0A0815;
  --rayon: 18px;
  --ombre: inset 0 1px rgba(255, 255, 255, .05), 0 24px 60px -24px rgba(0, 0, 0, .55);
  --titre: 'Saira SC', 'Arial Narrow', system-ui, sans-serif;
  --corps: 'Jakarta', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --largeur: 1160px;
  --spot-x: 50vw;
  --spot-y: 40vh;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
html { background: var(--fond); }
body { margin: 0; overflow-x: hidden; background: var(--fond); color: var(--texte); font: 400 17px/1.65 var(--corps); -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--violet-doux); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titre); color: var(--encre); line-height: 1.1; margin: 0; letter-spacing: -.005em; }
h1 { font-weight: 700; font-size: clamp(2.5rem, 6vw, 4.4rem); }
h2 { font-weight: 700; font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-weight: 600; font-size: 1.35rem; line-height: 1.2; }
p { margin: 0; }
.mot-violet { color: var(--accent); background: linear-gradient(100deg, #C9B6FF, #9D7BF2 60%, #EF806D); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.lien-evitement { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--encre); color: #fff; padding: 10px 16px; border-radius: 10px; }
.lien-evitement:focus { left: 12px; }
.conteneur { width: min(var(--largeur), 100% - 40px); margin-inline: auto; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 30; background: rgba(14, 11, 28, .72); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.entete.defile { border-bottom-color: var(--bord); }
.entete-int { display: flex; align-items: center; gap: 24px; height: 76px; }
.marque { display: inline-flex; flex-shrink: 0; }
.marque img { height: 54px; width: auto; }
.nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav a { color: var(--encre); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 9px 12px; border-radius: 10px; }
.nav a:hover { background: var(--violet-pale); color: #fff; }
.nav a[aria-current="page"] { color: var(--accent); }
.nav .bouton { margin-left: 8px; color: #fff; }
.nav .bouton:hover { color: #fff; background: var(--violet-fonce); }
@media (max-width: 900px) { .nav .nav-option { display: none; } }
@media (max-width: 520px) { .marque img { height: 44px; } .nav .nav-client { display: none; } .entete-int { height: 64px; } }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 22px; border-radius: 999px; border: 2px solid var(--violet); background: var(--violet); color: #fff; font: 700 1rem/1.2 var(--corps); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.bouton:hover { background: var(--violet-fonce); border-color: var(--violet-fonce); color: #fff; }
.bouton:active { transform: translateY(1px); }
.bouton svg { flex-shrink: 0; }
.bouton { box-shadow: 0 10px 30px -10px rgba(104, 54, 197, .8); }
.bouton-clair { background: transparent; color: #fff; border-color: rgba(196, 181, 253, .4); box-shadow: none; }
.bouton-clair:hover { background: var(--violet-pale); color: #fff; border-color: var(--violet-doux); }
.bouton-blanc { background: #fff; border-color: #fff; color: var(--violet); box-shadow: none; }
.bouton-blanc:hover { background: #EFE9FB; border-color: #EFE9FB; color: var(--violet-fonce); }
.bouton-petit { min-height: 42px; padding: 8px 18px; font-size: .95rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- Surtitres ---------- */
.surtitre { display: inline-flex; align-items: center; gap: 10px; font: 600 .82rem/1 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-doux); margin-bottom: 18px; }
.surtitre::before { content: ''; width: 18px; height: 3px; border-radius: 3px; background: currentColor; }

/* ---------- Accueil : héros ---------- */
.heros { position: relative; overflow: hidden; padding: 72px 0 88px; }
.heros-int { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.heros h1 .mot-violet { display: block; }
.heros .chapo { font-size: 1.2rem; max-width: 36em; margin-top: 24px; color: var(--texte); }
.heros-visuel { position: relative; display: grid; place-items: center; min-height: 360px; }
.assemblage { width: min(300px, 70%); height: auto; overflow: visible; }
.assemblage .bande { transform-box: fill-box; }
.assemblage { filter: drop-shadow(0 0 40px rgba(124, 77, 224, .55)); }
.assemblage .bande-g { fill: #7C4DE0; animation: entreG .9s cubic-bezier(.2, .8, .2, 1) both, flotteG 7s 1s ease-in-out infinite alternate; }
.assemblage .bande-d { fill: #B9A2F7; animation: entreD .9s .12s cubic-bezier(.2, .8, .2, 1) both, flotteD 7s 1.1s ease-in-out infinite alternate; }
@keyframes flotteG { to { transform: translate(-6px, 4px); } }
@keyframes flotteD { to { transform: translate(6px, -4px); } }
@keyframes entreG { from { transform: translate(-28px, 10px); opacity: 0; } }
@keyframes entreD { from { transform: translate(28px, -10px); opacity: 0; } }
.heros-etiquette { position: absolute; background: rgba(23, 18, 44, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--bord); border-radius: 14px; padding: 10px 14px; box-shadow: var(--ombre); font: 600 .9rem/1.3 var(--corps); color: var(--encre); display: flex; align-items: center; gap: 10px; }
.heros-etiquette img { width: 28px; height: auto; }
.heros-etiquette small { display: block; font-weight: 400; color: var(--gris); font-size: .8rem; }
.etiquette-1 { top: 8%; right: 0; }
.etiquette-2 { bottom: 10%; left: 0; }
.pastille-icone { width: 30px; height: 30px; border-radius: 9px; background: var(--violet-pale); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
@media (max-width: 900px) {
  .heros { padding: 48px 0 64px; }
  .heros-int { grid-template-columns: 1fr; gap: 36px; }
  .heros-visuel { min-height: 280px; order: -1; }
  .assemblage { width: 200px; }
  .etiquette-1 { top: 4%; right: 4%; }
  .etiquette-2 { bottom: 4%; left: 4%; }
}
@media (max-width: 520px) { .heros .chapo { font-size: 1.08rem; } }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-claire { background: rgba(255, 255, 255, .025); border-block: 1px solid var(--bord); }
.section-tete { max-width: 760px; margin-bottom: 48px; }
.section-tete .intro { font-size: 1.12rem; margin-top: 18px; }
@media (max-width: 760px) { .section { padding: 64px 0; } .section-tete { margin-bottom: 32px; } }

/* Offres */
.offres { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.offres-3 { grid-template-columns: 1.1fr 1fr 1fr; }
@media (max-width: 1100px) { .offres-3 { grid-template-columns: 1fr 1fr; } .offres-3 .offre-avenir { grid-column: 1 / -1; } }
.offre { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 36px; border-radius: 24px; background: var(--blanc); border: 1px solid var(--bord); box-shadow: var(--ombre); }
.offre { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.offre-sombre { background: linear-gradient(160deg, rgba(52, 37, 65, .85), rgba(23, 18, 44, .9)); border-color: rgba(239, 128, 109, .25); color: #E3DCEA; }
.offre-avenir { border-style: dashed; background: transparent; box-shadow: none; }
.offre-sombre h3, .offre-sombre .offre-titre { color: #fff; }
.offre-entete { display: flex; align-items: center; gap: 14px; }
.offre-entete img { width: 48px; height: auto; }
.offre-titre { font: 700 1.9rem/1.05 var(--titre); color: var(--encre); }
.offre-sous { font: 600 .82rem/1.2 var(--corps); letter-spacing: .12em; text-transform: uppercase; color: var(--violet-doux); }
.offre-sombre .offre-sous { color: #EF806D; }
.offre ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.offre li { display: flex; gap: 10px; align-items: flex-start; }
.offre li::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 4px; border-radius: 6px; background: var(--violet-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9A2F7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.offre-sombre li::before { background-color: rgba(239, 128, 109, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF806D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.offre .actions { margin-top: auto; padding-top: 8px; }
.offre-sombre .bouton { background: #EF806D; border-color: #EF806D; color: #2A1B33; box-shadow: 0 10px 30px -10px rgba(239, 128, 109, .7); }
.offre-sombre .bouton:hover { background: #F49A8A; border-color: #F49A8A; }
.offre-sombre .bouton-clair { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.offre-sombre .bouton-clair:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 900px) { .offres { grid-template-columns: 1fr; } .offre { padding: 28px; } }

/* Cartes */
.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.carte { padding: 28px; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--bord); }
.section-claire .carte { background: rgba(255, 255, 255, .035); }
.carte { transition: border-color .2s, transform .2s, background .2s; }
.carte:hover { border-color: rgba(185, 162, 247, .35); background: rgba(255, 255, 255, .06); transform: translateY(-2px); }
.carte h3 { margin: 18px 0 10px; }
.carte p { color: var(--gris); font-size: .98rem; }
.icone { width: 46px; height: 46px; border-radius: 14px; background: var(--violet-pale); color: var(--accent); display: grid; place-items: center; }
@media (max-width: 1000px) { .grille-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grille, .grille-4, .grille-2 { grid-template-columns: 1fr; } .carte { padding: 22px; } }

/* Démarche : étapes numérotées */
.etapes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: etape; }
.etapes-3 { grid-template-columns: repeat(3, 1fr); }
.etapes li { counter-increment: etape; position: relative; padding: 28px 24px 24px; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--bord); }
.etapes li::before { content: counter(etape, decimal-leading-zero); display: block; font: 700 2.4rem/1 var(--titre); color: var(--violet-doux); margin-bottom: 16px; }
.etapes h3 { margin-bottom: 8px; }
.etapes p { color: var(--gris); font-size: .98rem; }
@media (max-width: 1000px) { .etapes { grid-template-columns: repeat(2, 1fr); } .etapes-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .etapes, .etapes-3 { grid-template-columns: 1fr; } }

/* Bandeau violet */
.bandeau { position: relative; overflow: hidden; border-radius: 28px; background: linear-gradient(120deg, #5729AE, #6836C5 45%, #8A5BE6); box-shadow: 0 30px 80px -30px rgba(104, 54, 197, .8); color: #EDE6FB; padding: 56px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.bandeau h2 { color: #fff; }
.bandeau p { margin-top: 14px; font-size: 1.1rem; max-width: 34em; }
.bandeau .actions { margin-top: 0; }
.bandeau::after { content: ''; position: absolute; right: -60px; bottom: -80px; width: 300px; height: 400px; background: url('/assets/img/hooj-digital-symbole-blanc.svg') center / contain no-repeat; opacity: .08; pointer-events: none; }
@media (max-width: 900px) { .bandeau { grid-template-columns: 1fr; padding: 40px 28px; } }

/* Atouts (ligne de chiffres / garanties) */
.atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--blanc); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.atout { padding: 28px; }
.atout + .atout { border-left: 1px solid var(--bord); }
.atout strong { display: block; font: 700 1.5rem/1.15 var(--titre); color: var(--encre); margin-bottom: 6px; }
.atout span { color: var(--gris); font-size: .96rem; }
@media (max-width: 760px) { .atouts { grid-template-columns: 1fr; } .atout + .atout { border-left: 0; border-top: 1px solid var(--bord); } }

/* Vidéo */
.video { border-radius: 22px; overflow: hidden; border: 1px solid var(--bord); box-shadow: var(--ombre); background: #000; aspect-ratio: 16 / 9; }
.video video { width: 100%; height: 100%; object-fit: cover; }
.legende { margin-top: 12px; font-size: .92rem; color: var(--gris); text-align: center; }

/* Questions */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq + .faq-titre { margin-top: 40px; }
.faq-titre { font: 600 1.25rem/1.2 var(--titre); color: var(--encre); margin: 0 0 16px; }
.faq details { background: var(--blanc); border: 1px solid var(--bord); border-radius: 16px; }
.section-claire .faq details { background: rgba(255, 255, 255, .035); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 600; color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex-shrink: 0; width: 12px; height: 12px; border-right: 2.5px solid var(--violet-doux); border-bottom: 2.5px solid var(--violet-doux); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { padding: 0 22px 20px; color: var(--texte); }


/* Formulaire de contact (assets/js/contact.js : mêmes noms de champs et classes d'état) */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.contact-infos p { margin-top: 18px; font-size: 1.08rem; }
.contact-infos ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.contact-infos li { display: flex; gap: 12px; align-items: center; color: var(--encre); font-weight: 600; }
.hd-contact { display: grid; gap: 18px; padding: 32px; border-radius: 24px; background: rgba(23, 18, 44, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--bord); box-shadow: var(--ombre); }
.hd-contact-sujets { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-contact-sujets label { cursor: pointer; }
.hd-contact-sujets input { position: absolute; opacity: 0; pointer-events: none; }
.hd-contact-sujets span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--bord); font-weight: 600; font-size: .95rem; color: var(--texte); background: rgba(255, 255, 255, .03); }
.hd-contact-sujets input:checked + span { border-color: var(--violet-doux); background: var(--violet-pale); color: #fff; }
.hd-contact-sujets input:focus-visible + span { outline: 3px solid var(--violet-doux); outline-offset: 2px; }
.hd-contact-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hd-contact-champ { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; color: var(--encre); }
.hd-contact-champ em { font-style: normal; font-weight: 400; color: var(--gris); }
.hd-contact input:not([type=radio]), .hd-contact textarea { width: 100%; font: 400 1rem/1.4 var(--corps); color: var(--encre); padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--bord); background: rgba(0, 0, 0, .25); transition: border-color .15s, background .15s; }
.hd-contact input::placeholder, .hd-contact textarea::placeholder { color: rgba(222, 215, 236, .4); }
.hd-contact input:focus, .hd-contact textarea:focus { outline: none; border-color: var(--violet-doux); background: rgba(0, 0, 0, .35); }
.hd-contact textarea { resize: vertical; min-height: 130px; }
.hd-contact-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hd-contact-aide, .hd-contact-autre { font-size: .9rem; color: var(--gris); }
.hd-contact-etat { font-weight: 600; min-height: 1.4em; }
.hd-contact-etat.ok { color: #6EE7B7; }
.hd-contact-etat.erreur { color: #FCA5A5; }
.hd-contact .bouton { justify-self: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 560px) { .hd-contact { padding: 22px; } .hd-contact-grille { grid-template-columns: 1fr; } .hd-contact .bouton { justify-self: stretch; } }

/* ---------- Pied de page ---------- */
.pied { position: relative; background: rgba(10, 8, 21, .88); border-top: 1px solid var(--bord); color: #B9B2C6; padding: 64px 0 28px; margin-top: 0; }
.pied-int { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.pied img { height: 58px; width: auto; }
.pied-slogan { margin-top: 18px; color: #DDD7E8; font-size: 1rem; max-width: 22em; }
.pied h3 { font: 600 .8rem/1 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-doux); margin-bottom: 16px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pied a, .pied .footer-cookies { color: #DDD7E8; text-decoration: none; font: inherit; font-size: .96rem; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.pied a:hover, .pied .footer-cookies:hover { color: #fff; text-decoration: underline; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .9rem; }
@media (max-width: 900px) { .pied-int { grid-template-columns: 1fr 1fr; } .pied-marque { grid-column: 1 / -1; } }
@media (max-width: 520px) { .pied-int { grid-template-columns: 1fr; } }

/* Barre d'action sur téléphone (page Masie) */
.barre-action { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: #1E1638; border: 1px solid var(--bord); color: #fff; font-weight: 600; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); transform: translateY(140%); transition: transform .25s; }
.barre-action.visible { transform: none; }
@media (min-width: 761px) { .barre-action { display: none; } }

/* ---------- Pages d'articles (Strasbourg, Conseils, 404) ---------- */
.article { padding: 56px 0 80px; }
.article-int { width: min(760px, 100% - 40px); margin-inline: auto; }
.fil { font-size: .92rem; color: var(--gris); margin-bottom: 18px; }
.fil a { color: var(--gris); }
.article h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.article .chapo { font-size: 1.18rem; margin: 20px 0 32px; color: var(--encre); }
.article h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin: 44px 0 14px; }
.article h3 { font-size: 1.25rem; margin: 28px 0 8px; }
.article p { margin: 0 0 16px; }
.article ul, .article ol { padding-left: 1.2em; margin: 0 0 18px; }
.article li { margin-bottom: 8px; }
.article li::marker { color: var(--violet-doux); }
.article strong { color: #fff; }
.liste-articles { list-style: none; padding: 0 !important; display: grid; gap: 14px; }
.liste-articles li { margin: 0; }
.liste-articles a { display: block; padding: 22px 24px; border-radius: var(--rayon); background: var(--blanc); backdrop-filter: blur(6px); border: 1px solid var(--bord); text-decoration: none; color: var(--texte); transition: border-color .15s, box-shadow .15s; }
.liste-articles a:hover { border-color: var(--violet-doux); box-shadow: var(--ombre); }
.liste-articles strong { display: block; font: 600 1.25rem/1.25 var(--titre); color: var(--encre); margin-bottom: 6px; }
.encart { margin: 48px auto 0; width: min(760px, 100% - 40px); display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 28px 30px; border-radius: 22px; background: linear-gradient(120deg, #5729AE, #6836C5 50%, #8A5BE6); color: #EDE6FB; }
.encart strong { color: #fff; font: 700 1.3rem/1.2 var(--titre); display: block; margin-bottom: 4px; }
@media (max-width: 640px) { .encart { grid-template-columns: 1fr; } }

/* Utilitaires */
.centre { text-align: center; margin-inline: auto; }
.mt-l { margin-top: 48px; }
.visuel-masie { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(239, 128, 109, .1); border-color: rgba(239, 128, 109, .3) !important; border: 1px solid var(--bord); font-weight: 600; color: var(--encre); font-size: .92rem; margin-bottom: 22px; }
.visuel-masie img { width: 30px; height: auto; }

/* ---------- Décor (même direction artistique que la page de maintenance) ---------- */
.decor { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.decor .sol {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; opacity: .7; overflow: hidden;
  transform: perspective(520px) rotateX(62deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 70%, transparent);
}
.decor .sol::before {
  content: ''; position: absolute; left: 0; right: 0; top: -64px; bottom: 0;
  background-image: linear-gradient(rgba(185, 162, 247, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 162, 247, .16) 1px, transparent 1px);
  background-size: 64px 64px; will-change: transform; animation: solDefile 6s linear infinite;
}
@keyframes solDefile { to { transform: translateY(64px); } }
.decor .lueur { position: absolute; border-radius: 50%; opacity: .5; will-change: transform; }
.decor .lueur-1 { width: 760px; height: 760px; left: -240px; top: -260px; background: radial-gradient(circle, #5729AE 0%, rgba(87, 41, 174, .45) 35%, transparent 70%); animation: lueur1 16s ease-in-out infinite alternate; }
.decor .lueur-2 { width: 680px; height: 680px; right: -260px; top: 12%; background: radial-gradient(circle, #8A5BE6 0%, rgba(138, 91, 230, .4) 35%, transparent 70%); opacity: .3; animation: lueur2 19s ease-in-out infinite alternate; }
.decor .lueur-3 { width: 560px; height: 560px; left: 36%; bottom: -300px; background: radial-gradient(circle, #EF806D 0%, rgba(239, 128, 109, .4) 35%, transparent 70%); opacity: .14; animation: lueur1 22s ease-in-out infinite alternate-reverse; }
@keyframes lueur1 { to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes lueur2 { to { transform: translate(-100px, 60px) scale(.9); } }
.decor .halo { position: absolute; inset: 0; background: radial-gradient(420px circle at var(--spot-x) var(--spot-y), rgba(124, 77, 224, .16), transparent 70%); }
.decor .grain { position: absolute; inset: -50%; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.decor .etincelles span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #B9A2F7; box-shadow: 0 0 10px #B9A2F7; opacity: 0; animation: monte linear infinite; }
@keyframes monte { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-70vh); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .decor *, .decor *::before { animation: none !important; } .decor .etincelles, .decor .halo { display: none; } }

/* Titres : dégradé lilas → corail qui ondule */
.mot-violet { background: linear-gradient(100deg, #B9A2F7 0%, #9D7BF0 40%, #EF806D 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: reflet 8s ease-in-out infinite alternate; }
@keyframes reflet { to { background-position: 100% 0; } }
.surtitre::before { width: 22px; background: linear-gradient(90deg, #B9A2F7, #EF806D); }
/* Pastille d'en-tête (point corail qui pulse) */
.surtitre-puce { padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(239, 128, 109, .1); border: 1px solid rgba(239, 128, 109, .32); color: #F7B3A6; font-weight: 800; font-size: .76rem; }
.surtitre-puce::before { content: none; }
.surtitre-puce i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #EF806D; }
.surtitre-puce i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(239, 128, 109, .6); animation: pouls 1.8s ease-out infinite; }
@keyframes pouls { from { transform: scale(1); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
/* Boutons et cartes : lueur au survol */
.bouton { transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.bouton:not(.bouton-clair):not(.bouton-blanc):hover { transform: translateY(-2px); box-shadow: 0 20px 50px -12px rgba(124, 77, 224, 1); }
.bouton-clair:hover { transform: translateY(-2px); }
.nav .nav-client { border: 1px solid var(--bord); border-radius: 999px; background: rgba(255, 255, 255, .04); padding: 9px 16px; }
.nav .nav-client:hover { background: rgba(255, 255, 255, .09); border-color: rgba(196, 181, 253, .35); }
.carte:hover, .etapes li:hover { box-shadow: 0 24px 60px -30px rgba(124, 77, 224, .9); border-color: rgba(185, 162, 247, .35); }
.etapes li { transition: border-color .2s, box-shadow .2s, transform .2s; }
.etapes li:hover { transform: translateY(-2px); }
.etapes li::before { background: linear-gradient(100deg, #B9A2F7, #EF806D); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offre { transition: border-color .25s, box-shadow .25s, transform .25s; }
.offre:hover { transform: translateY(-3px); border-color: rgba(185, 162, 247, .4); box-shadow: 0 30px 70px -30px rgba(124, 77, 224, .9); }

/* Héros : symbole qui s'assemble, anneaux en orbite, éclat */
.heros-visuel .anneau { position: absolute; width: min(440px, 96%); aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(196, 181, 253, .22); animation: tourne 40s linear infinite; }
.heros-visuel .anneau-2 { width: min(320px, 70%); border-style: solid; border-color: rgba(196, 181, 253, .1); animation-duration: 26s; animation-direction: reverse; }
.heros-visuel .anneau::after { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #EF806D; box-shadow: 0 0 16px #EF806D; }
.heros-visuel .anneau-2::after { top: auto; bottom: -5px; background: #B9A2F7; box-shadow: 0 0 16px #B9A2F7; }
@keyframes tourne { to { transform: rotate(360deg); } }
.heros-visuel .eclat { position: absolute; width: 260px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(185, 162, 247, .55), transparent 62%); opacity: 0; animation: eclat 1.6s .7s ease-out both; }
@keyframes eclat { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
.assemblage { position: relative; filter: drop-shadow(0 0 46px rgba(124, 77, 224, .65)); }
.assemblage .bande-g { animation: entreG 1.2s cubic-bezier(.65, 0, .35, 1) both, flotteG 7s 1.3s ease-in-out infinite alternate; }
.assemblage .bande-d { animation: entreD 1.2s cubic-bezier(.65, 0, .35, 1) both, flotteD 7s 1.3s ease-in-out infinite alternate; }
@keyframes entreG { from { transform: translate(-46px, -22px) rotate(-8deg); opacity: .2; } }
@keyframes entreD { from { transform: translate(46px, 22px) rotate(8deg); opacity: .2; } }
.heros-etiquette { animation: flotte 7s ease-in-out infinite alternate; z-index: 1; }
.etiquette-2 { animation-delay: -3.5s; }
@keyframes flotte { to { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .heros-visuel *, .mot-violet, .surtitre-puce i { animation: none !important; } }
/* Le contenu passe au-dessus du fond animé */
.entete, main, .pied { position: relative; z-index: 1; }
.entete { position: sticky; z-index: 30; }

/* Apparition douce au défilement (site.js ajoute .a-reveler puis .visible) */
.a-reveler { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.a-reveler.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .a-reveler { opacity: 1; transform: none; } }

/* Lien de navigation fixé en haut : marque claire */
.offre-avenir .icone { background: rgba(255, 255, 255, .06); }

/* Exemple d'appel (page Masie, à la place de l'ancienne vidéo) */
.appel { position: relative; border-radius: 24px; border: 1px solid var(--bord); background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: 0 30px 80px -30px rgba(104, 54, 197, .7); padding: 22px; backdrop-filter: blur(8px); }
.appel-tete { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--bord); }
.appel-tete div { flex: 1; display: flex; flex-direction: column; }
.appel-tete strong { font-weight: 700; color: #fff; }
.appel-tete small, .appel-ticket small { color: rgba(237, 230, 251, .62); font-size: .85rem; }
.appel-point { width: 12px; height: 12px; border-radius: 50%; background: #3DDC97; box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); animation: appelPouls 1.8s ease-out infinite; }
@keyframes appelPouls { to { box-shadow: 0 0 0 12px rgba(61, 220, 151, 0); } }
.appel-fil { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.bulle { max-width: 88%; padding: 12px 15px; border-radius: 16px; font-size: .95rem; line-height: 1.5; color: #EDE6FB; }
.bulle b { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 3px; }
.bulle-ia { background: rgba(239, 128, 109, .12); border: 1px solid rgba(239, 128, 109, .3); border-bottom-left-radius: 4px; }
.bulle-ia b { color: #EF806D; }
.bulle-client { justify-self: end; background: rgba(124, 77, 224, .22); border: 1px solid rgba(185, 162, 247, .3); border-bottom-right-radius: 4px; }
.bulle-client b { color: var(--accent); }
.appel-ticket { margin-top: 18px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(61, 220, 151, .08); border: 1px solid rgba(61, 220, 151, .3); }
.appel-ticket div { display: flex; flex-direction: column; }
.appel-ticket strong { color: #fff; }
.appel-coche { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #3DDC97; color: #0E0B1C; }
.appel-note { margin-top: 12px; text-align: center; font-size: .8rem; color: rgba(237, 230, 251, .45); }
@media (prefers-reduced-motion: no-preference) {
  .appel-fil .bulle, .appel-ticket { opacity: 0; transform: translateY(10px); animation: appelArrive .5s cubic-bezier(.2, .8, .2, 1) forwards; }
  .appel-fil .bulle:nth-child(1) { animation-delay: .5s; }
  .appel-fil .bulle:nth-child(2) { animation-delay: 2.2s; }
  .appel-fil .bulle:nth-child(3) { animation-delay: 3.4s; }
  .appel-ticket { animation-delay: 4.8s; }
}
@keyframes appelArrive { to { opacity: 1; transform: none; } }

.nav .bouton { border-radius: 999px; }
@media (max-width: 520px) {
  .heros-visuel { min-height: 270px; }
  .heros-etiquette { display: none; }
  .assemblage { width: 140px; }
  .heros-visuel .anneau { width: 250px; }
  .heros-visuel .anneau-2 { width: 180px; }
  .heros-visuel .eclat { width: 200px; }
}
/* Pages de lecture (articles) : sol plus discret */
body:has(main.article) .decor .sol { opacity: .35; }

/* Téléphones et tablettes : animations allégées (vitesse) ; l'aspect reste le même à l'arrêt */
@media (max-width: 1024px) {
  .mot-violet { animation: none; background-position: 30% 0; }
  .decor .grain { display: none; }
  .assemblage .bande-g { animation: entreG 1.2s cubic-bezier(.65, 0, .35, 1) both; }
  .assemblage .bande-d { animation: entreD 1.2s cubic-bezier(.65, 0, .35, 1) both; }
  .decor .etincelles span:nth-child(n+9) { display: none; }
}