/* ATHENORA — page d'accueil. Le socle est dans site.css.
   Une bande par rubrique du site : sur-titre, titre, texte, bouton vers la page. */

/* texte courant de l'accueil : plein sur ciel, ciel adouci sur nuit et sur bleu */
[data-bg=ciel]{--lead:var(--nuit)}
[data-bg=nuit],[data-bg=bleu]{--lead:rgba(222,236,247,.92)}

/* ══ 1 · Hero ══ */
.hero{min-height:max(100vh,760px);align-items:center}
.hero-voile{background:linear-gradient(180deg,rgba(5,8,46,.7) 0%,rgba(5,8,46,.3) 45%,rgba(5,8,46,.78) 84%,#05082E 100%)}
.hero-foyer{background:radial-gradient(ellipse 62% 52% at 50% 46%,rgba(5,8,46,.45) 0%,rgba(5,8,46,.15) 55%,rgba(5,8,46,0) 100%)}
.hero-chouette{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);height:114vh;max-width:96vw;width:auto;opacity:.035;display:block;z-index:1;pointer-events:none}
.hero-titrage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8vw;margin-top:-4vh}
.hero h1{display:flex;flex-direction:column;align-items:center;margin:0;font:inherit}
.hero-logo{width:clamp(280px,38vw,530px);height:auto;display:block}
.hero .kick{display:block;margin-top:30px}
.hero .h1{display:block}
/* invite au scroll : cinq chevrons qui s'allument de haut en bas, trois à quatre
   visibles à la fois. Une seule animation, décalée par --i ; rien ne se déplace,
   c'est l'ordre d'allumage qui fait descendre le regard. */
.cue{position:absolute;left:50%;bottom:8vh;z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;transition:opacity .55s ease}
.cue-ch{display:block;opacity:0;animation:cue-cascade 2.8s ease-in-out infinite;
animation-delay:calc((var(--i) - 4) * .336s)}
@keyframes cue-cascade{0%{opacity:0}15%{opacity:.9}29%{opacity:.9}44%{opacity:0}100%{opacity:0}}

/* ══ Les bandes de rubrique ══ */
.bloc{align-items:center}
.bloc-contenu{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:120px 8vw;max-width:960px}
/* image de fond : plus haute que la bande, elle glisse en parallaxe (accueil.js) */
.fond{position:absolute;inset:-25% 0;width:100%;height:150%;object-fit:cover;display:block;will-change:transform}
/* mot fantôme : traverse lentement sa bande */
.fantome{position:absolute;left:-2vw;top:0;font-family:var(--serif);font-weight:800;font-size:15vw;line-height:1;color:var(--nuit);opacity:.042;white-space:nowrap;pointer-events:none;z-index:1;will-change:transform}
.surtitre{font-size:13px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;color:var(--acc)}
.h2{margin-top:34px}
.lead{font-size:22px;line-height:1.6;color:var(--lead);margin-top:44px;max-width:58ch}
.lead.suite{margin-top:26px}
.filet-long{width:220px;height:1px;background:rgba(5,8,46,.3);margin:48px 0}
.m48{margin-top:48px} .m52{margin-top:52px} .m56{margin-top:56px}

/* ══ 2 · Vision ══ */
#vision .fond{inset:-25% auto auto -2%;width:148%}
#vision .veil{background:linear-gradient(180deg,#DEECF7 0%,rgba(222,236,247,.93) 34%,rgba(222,236,247,.93) 66%,#DEECF7 100%)}
#vision .fantome{font-size:17vw}
/* diptyque : plein | filet | réserve */
.diptyque{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;margin-top:48px}
.diptyque p{font-family:var(--serif);font-weight:800;max-width:16ch}
.diptyque .plein{font-size:clamp(21px,2vw,29px);line-height:1.6;color:var(--nuit);text-align:right;padding:6px 44px 6px 0}
.diptyque .reserve{font-size:clamp(19px,1.8vw,26px);line-height:1.7;color:rgba(5,8,46,.48);text-align:left;padding:6px 0 6px 44px}
.diptyque .filet{width:1px;background:var(--bleu);align-self:stretch;flex:none}
.trait{width:64px;height:1px;background:var(--bleu);margin-top:48px}

/* ══ 3 · Expertises : les six manières d'agir ══ */
#expertises .bloc-contenu{max-width:none;width:min(860px,88vw)}
#expertises .fantome{left:auto;right:0;color:var(--ciel);opacity:.06}
.sous{font-size:20px;line-height:1.65;color:rgba(222,236,247,.84);margin-top:24px}
.verbes{width:100%;margin-top:38px}
.verbes li{border-top:1px solid rgba(222,236,247,.2)}
.verbes li:last-child{border-bottom:1px solid rgba(222,236,247,.2)}
.verbe{position:relative;display:flex;align-items:center;gap:24px;padding:17px 14px;text-align:left;transition:padding-left .5s var(--ease)}
.verbe-sym{flex:none;width:76px;display:flex;justify-content:center;color:var(--or)}
.verbe-txt{font-family:var(--serif);font-weight:800;font-size:clamp(24px,2.3vw,34px);line-height:1.25;color:var(--blanc);transition:color .5s}
.verbe-fleche{margin-left:auto;color:var(--or);font-size:26px;opacity:0;transform:translateX(-18px);transition:opacity .5s,transform .5s var(--ease)}
.verbe:hover,.verbe:focus-visible{padding-left:29px}
.verbe:hover .verbe-txt,.verbe:focus-visible .verbe-txt{color:var(--or)}
.verbe:hover .verbe-fleche,.verbe:focus-visible .verbe-fleche{opacity:1;transform:translateX(0)}
/* la puce : au survol de la ligne, le déploiement s'échelonne — les yeux s'écartent, puis le bec
   descend, puis les sourcils s'ouvrent ; au retour, tout se referme ensemble */
.verbe .sym{width:66px;height:66px}
.verbe .sym use{transition:transform .85s var(--ease),opacity .6s,stroke-width .85s}
.verbe:hover .sym use,.verbe:focus-visible .sym use{transform:none;opacity:1;stroke-width:5}
.verbe:hover .pt .fc,.verbe:focus-visible .pt .fc{transition-delay:.07s}
.verbe:hover .pt .fa,.verbe:hover .pt .fb,.verbe:focus-visible .pt .fa,.verbe:focus-visible .pt .fb{transition-delay:.14s}
.signature{font-size:18px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--or);margin-top:52px}

/* ══ 4 · Cas clients ══ */
#cas-clients .bloc-contenu{max-width:860px}
#cas-clients .veil{background:linear-gradient(180deg,#DEECF7 0%,rgba(222,236,247,.97) 34%,rgba(222,236,247,.97) 66%,#DEECF7 100%)}
#cas-clients .lead{max-width:52ch}
.note{font-size:18px;line-height:1.7;color:rgba(5,8,46,.8);max-width:56ch}

/* ══ 5 · Cercles ══ */
#cercles .bloc-contenu{max-width:1020px}
#cercles .veil{background:linear-gradient(180deg,#3065AF 0%,rgba(48,101,175,.92) 34%,rgba(48,101,175,.92) 66%,#3065AF 100%)}
#cercles .lead{max-width:56ch}
.apercu-cercles{display:flex;gap:56px;margin-top:56px;align-items:flex-start;flex-wrap:wrap;justify-content:center}
/* !important : la révélation au scroll pose sa transition en ligne ; on garde celle du soulèvement au survol */
.apercu-cercle{width:240px;text-align:left;border-top:1px solid rgba(255,255,255,.55);padding-top:22px;transition:transform .6s var(--ease),opacity 1s var(--ease),translate 1s var(--ease)!important}
.apercu-cercle:hover,.apercu-cercle:focus-visible{transform:translateY(-10px)}
.apercu-cercle .num{font-size:12px;font-weight:400;letter-spacing:.24em;color:var(--blanc)}
.apercu-cercle h3{font-family:var(--serif);font-weight:800;font-size:26px;line-height:1.3;color:var(--blanc);margin-top:14px;min-height:calc(3*1.3em)}
.apercu-cercle .desc{font-size:15px;line-height:1.6;color:rgba(222,236,247,.78);margin-top:14px}

/* ══ 5b · Les associés ══ */
.band#associes{background:linear-gradient(160deg,#05082E 0%,#05082E 55%,#080d3d 100%)}
.apercu-associes{display:flex;gap:72px;margin-top:56px;justify-content:center;flex-wrap:wrap}
.apercu-associe{width:220px;text-align:center}
.apercu-associe .cadre{width:220px;height:264px;overflow:hidden;background:rgba(222,236,247,.06);border:1px solid rgba(205,182,102,.45)}
.apercu-associe img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.apercu-associe figcaption{margin-top:20px}
.apercu-associe h3{font-family:var(--serif);font-weight:800;font-size:24px;line-height:1.25;color:var(--blanc)}
.apercu-associe .fonction{display:block;margin-top:8px;font-size:14px;letter-spacing:.06em;color:rgba(222,236,247,.72)}

/* ══ 6 · Éclairages : trois lignes qui sortent de leur cache — pleine, en contour, accentuée ══ */
#eclairages .bloc-contenu{max-width:1000px}
.lignes{margin-top:56px;display:flex;flex-direction:column;gap:8px;font-size:inherit;font-weight:inherit}
.lignes>span{display:block;overflow:hidden;padding:4px 0}
.lignes [data-mask]{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(38px,4.2vw,62px);line-height:1.22;color:var(--nuit)}
.lignes .contour{color:transparent;-webkit-text-stroke:1.5px var(--nuit)}
.lignes .accent{color:var(--bleu)}
#eclairages .filet-long{margin:52px 0 0}

/* ══ 7 · Contact ══ */
.contact{min-height:max(calc(100vh - 128px),640px);flex-direction:column;justify-content:flex-start}
.contact .veil{background:linear-gradient(180deg,#05082E 0%,rgba(5,8,46,.9) 36%,rgba(5,8,46,.93) 74%,#05082E 100%)}
.contact-corps{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;padding:120px 8vw 40px}
.contact-grille{display:grid;grid-template-columns:1.25fr 1fr;gap:90px;align-items:center;width:min(1120px,100%)}
.contact-texte{text-align:left}
.contact .lead{margin-top:38px;max-width:52ch}
.contact-carte{text-align:left;background:rgba(255,255,255,.045);border:1px solid rgba(205,182,102,.55);backdrop-filter:blur(10px);color:var(--blanc);padding:44px 44px 48px;display:flex;flex-direction:column;gap:30px}
.contact-carte h3{font-family:var(--serif);font-weight:800;font-size:30px;line-height:1.2;color:var(--blanc);margin-bottom:6px}
.contact-carte .etiquette{font-size:11px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--or)}
.contact-carte .valeur{margin-top:8px;font-size:21px;font-weight:300;line-height:1.4;color:var(--blanc)}
.contact-carte a.valeur{display:inline-block;border-bottom:1px solid rgba(222,236,247,.25);padding-bottom:3px;transition:border-color .3s}
.contact-carte a.valeur:hover{color:var(--blanc);border-bottom-color:var(--or)}

/* ══ Le fil : geste fédérateur en marge gauche — trait continu, segment qui se remplit au scroll,
   losange-curseur et nom de la section en vertical. Il prend le ton de la bande traversée. ══ */
.fil{position:fixed;left:44px;top:0;bottom:0;z-index:90;pointer-events:none;
  --fil:var(--or);--fil-pale:rgba(205,182,102,.15);--fil-fond:var(--nuit);--fil-rail:rgba(222,236,247,.22)}
.fil[data-ton=ciel]{--fil:var(--bleu);--fil-pale:rgba(48,101,175,.15);--fil-fond:var(--ciel);--fil-rail:rgba(5,8,46,.18)}
.fil[data-ton=bleu]{--fil:var(--blanc);--fil-pale:rgba(255,255,255,.15);--fil-fond:var(--bleu)}
.fil span{position:absolute;top:0;display:block}
.fil-rail{left:0;bottom:0;width:1px;background:var(--fil-rail);transition:background .6s}
.fil-fill{left:0;width:1px;height:100%;background:linear-gradient(180deg,var(--fil-pale),var(--fil));transform:scaleY(0);transform-origin:top}
.fil-node{left:-3px;width:7px;height:7px;border:1px solid var(--fil);background:var(--fil-fond);transform:rotate(45deg);transition:background .4s,border-color .4s}
.fil-label{left:12px;font-size:10px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--fil);writing-mode:vertical-rl;white-space:nowrap;opacity:0;transition:opacity .5s,color .4s}

@media (prefers-reduced-motion:reduce){
  .cue-ch{animation:none}.cue-ch:last-child{opacity:.9}
}

/* ══ Écrans étroits (rien ne s'applique à partir de 1024 px) ══ */
@media (max-width:1023px){
  .fil{display:none}   /* l'en-tête compact occupe sa marge */
  .contact-grille{grid-template-columns:1fr;gap:56px}
  .contact-carte{max-width:520px}
}
@media (max-width:767px){
  .hero{min-height:max(100svh,560px)}
  .hero-titrage{padding:0 6vw;margin-top:0}
  .hero .kick{margin-top:26px}
  .cue{bottom:5vh}
  .bloc-contenu,#expertises .bloc-contenu{box-sizing:border-box;width:100%;max-width:none;padding:80px 6vw}
  .h2{margin-top:26px}
  .lead{font-size:18px;line-height:1.65;margin-top:32px}
  .lead.suite{margin-top:20px}
  .lead br{display:none}
  .sous{font-size:17px}
  .note{font-size:17px}
  .filet-long{width:160px;margin:40px 0}
  /* diptyque : les deux phrases l'une sous l'autre, le filet à l'horizontale */
  .diptyque{flex-direction:column;align-items:center;margin-top:40px}
  .diptyque p{max-width:none}
  .diptyque .plein,.diptyque .reserve{text-align:center;padding:0}
  .diptyque .filet{width:40px;height:1px;align-self:center;margin:14px 0}
  .trait{margin-top:40px}
  /* les six manières d'agir */
  .verbes{margin-top:30px}
  .verbe{gap:8px;padding:13px 0}
  .verbe:hover,.verbe:focus-visible{padding-left:0}
  .verbe-sym{width:44px;margin-left:-8px}
  .verbe .sym{width:48px;height:48px}
  .verbe-txt{font-size:clamp(19px,5.3vw,24px)}
  .verbe-fleche{font-size:20px;opacity:.7;transform:none}
  .signature{font-size:13px;letter-spacing:.24em;line-height:1.9;margin-top:40px}
  .m48,.m52,.m56{margin-top:40px}
  /* les trois cercles, l'un sous l'autre */
  .apercu-cercles{flex-direction:column;align-items:stretch;gap:30px;width:100%;margin-top:44px}
  .apercu-cercle{width:auto}
  .apercu-cercle h3{min-height:0;font-size:24px}
  /* les deux associés, côte à côte */
  .apercu-associes{gap:20px;margin-top:44px;flex-wrap:nowrap}
  .apercu-associe{flex:1;width:auto;max-width:220px;min-width:0}
  .apercu-associe .cadre{box-sizing:border-box;width:100%;height:auto;aspect-ratio:220/264}
  .apercu-associe h3{font-size:20px}
  .apercu-associe .fonction{font-size:13px;letter-spacing:.03em}
  .lignes{margin-top:44px}
  .lignes [data-mask]{font-size:clamp(27px,7.6vw,38px)}
  .lignes .contour{-webkit-text-stroke-width:1px}
  #eclairages .filet-long{margin:40px 0 0}
  .contact{min-height:0}
  .contact-corps{padding:80px 6vw 56px}
  .contact .lead{margin-top:28px}
  .contact-carte{padding:32px 26px 36px;gap:24px}
  .contact-carte h3{font-size:26px}
  .contact-carte .valeur{font-size:18px}
}
/* sans survol (tactile) : la flèche des lignes reste visible, elle dit qu'on peut toucher */
@media (hover:none){
  .verbe-fleche{opacity:.7;transform:none}
}

/* ══ Éclairages épinglés (section Éclairages) : une rangée qui défile ══
   Titres seuls, tous au même format et à la même hauteur (signatures alignées en bas) : trois visibles sur
   ordinateur (un tiers chacun), un seul sur mobile (sans amorce du suivant). Au moins trois articles (complétés par les derniers publiés).
   Cartes : cartes.css ; défilement et flèches : site.js ([data-carrousel]). */
/* la rangée passe sur une vitre de toute la largeur de la fenêtre : bande floue (le fond de la section et le mot en
   filigrane y sont floutés), à peine blanchie, détachée par une ombre légère ; les articles gardent la largeur du
   contenu (--contenu), au centre */
.epingles{--contenu:min(1000px,84vw);box-sizing:border-box;width:100vw;margin:56px calc(50% - 50vw) 0;padding:36px calc((100vw - var(--contenu)) / 2) 32px;text-align:left;background:rgba(255,255,255,.08);box-shadow:0 10px 28px -20px rgba(5,8,46,.14),0 -10px 28px -20px rgba(5,8,46,.07);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.epingles-piste{display:flex;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.epingles-piste::-webkit-scrollbar{display:none}
.epingles-piste:focus-visible{outline:2px solid var(--acc);outline-offset:6px}
.epingle{flex:0 0 calc((100% - 80px) / 3);scroll-snap-align:start;padding-bottom:4px}
.epingle .carte-titre{font-size:18px;line-height:1.4}
.epingle .carte-rubrique{margin-top:auto;padding-top:22px}
.epingles-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.epingles-nav[hidden]{display:none}
.epingles-nav button{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:18px;cursor:pointer;transition:border-color .35s,color .35s}
.epingles-nav button:hover:not([disabled]){border-color:var(--acc);color:var(--acc)}
.epingles-nav button[disabled]{opacity:.3;cursor:default}

@media (max-width:1023px){
  .epingles{--contenu:88vw;margin-top:44px;padding-top:28px;padding-bottom:24px}
  .epingle{flex-basis:calc((100% - 40px) / 2)}
}
@media (max-width:767px){
  .epingles{padding-top:24px;padding-bottom:20px}
  .epingles-piste{gap:24px}
  .epingle{flex-basis:100%}
}