/* =========================================================
   CONTENT CLUB by BRAND NEW DAY — Le cercle prive
   Edition 001 · « L'analogique dans un monde IA »

   Reprise de la feuille de la maquette. site.html porte DEUX blocs <style> :
   le premier (18 551 octets) ne contient que 58 declarations @font-face,
   le second (35 313 octets) porte toutes les regles. La reprise se fait ici
   depuis les deux blocs concatenes, dans l'ordre.

   Quatre ecarts avec la source, tous volontaires :

   1. Polices — les 58 blocs @font-face du premier bloc pointent vers des
      identifiants opaques du bundle de l'outil de maquettage : aucun n'est
      exploitable ici, et les conserver aurait fait partir l'adresse IP du
      visiteur chez un tiers des le premier octet de CSS. Deux familles
      seulement sont reellement employees : Inter, deja auto-hebergee et
      declaree par assets/bnd-site.css, et Space Mono, qui ne l'etait pas.
      Les quatre sous-ensembles de Space Mono utiles au francais (normal et
      gras, latin et latin-ext) sont extraits du bundle et poses dans
      assets/fonts/ ; ils sont declares ci-dessous. Aucune requete tierce ne
      subsiste dans cette feuille, et aucune URL absolue : les deux motifs de
      grain, dont la forme lisible porte l'URI de l'espace de noms SVG, sont
      encodes en base64.

   2. Isolement — tous les selecteurs sont portes par le conteneur
      .cc-cercle. Cette feuille est chargee APRES bnd-site.css, et l'en-tete
      comme le pied du site principal restent presents sur la page : sans ce
      prefixe, les redefinitions de :root, body, .btn, .wrap, .lead ou
      .kicker repeindraient la navigation et le pied de page aux couleurs du
      cercle. La seule regle globale est celle qui pose le fond sombre sur
      <body>, et elle est portee par la classe de gabarit — elle ne peut donc
      atteindre aucune autre page.

      Prefixer les selecteurs ne suffit pourtant pas : une regle peut ne viser
      que le conteneur et peindre quand meme au-dela. C'etait le cas des trois
      calques d'atmosphere — vignette, grain, dos de magazine — fixes au
      viewport, donc etendus a l'ecran entier, et peints par-dessus le pied du
      site. Ils sont desormais bornes au conteneur : voir « couches
      d'atmosphere » plus bas.

   3. Chrome — le bloc NAV de la maquette est repris : la page a desormais sa
      propre barre, rendue par header-cercle.php, et non celle du site. Son
      selecteur de tete passe de .nav a .cc-nav — .nav, .nav-right et .btn
      sont exactement les noms de la barre du site — et sa boite vit hors du
      conteneur .cc-cercle. Le detail est dans la section « NAV » plus bas.

      Le bloc FOOTER, lui, est repris : la page a desormais le pied de sa
      maquette, rendu par footer-cercle.php dans sa propre enveloppe
      .cc-cercle. Ses six selecteurs — footer, .foot, .foot-brand, .fb-logo,
      .fb-tag, .fr, .foot-copy et .dot — sont prefixes comme les autres, et
      les quatre qui entrent en collision avec la feuille du site sont
      neutralises propriete par propriete : voir « PIED DE PAGE » en fin de
      fichier.

      Sont ecartes de meme les blocs que le balisage n'emploie pas : #tw
      (panneau « Tweaks » de l'outil de revue), .gal* (sections photo que ce
      panneau injectait), .doors*, .rc*, .reveal-grid, .constat-sub et
      .sr-only, ainsi que body.tw-no-bw, pilotee par le meme panneau. La
      maquette ne decrit aucune regle pour .invite-text ni .lu-col : ce sont
      de simples cellules de grille, et les deux regles posees ici ne font que
      rendre explicite leur empilement en colonne.

   4. Adaptations WordPress — la maquette pose ses visuels dans <image-slot>,
      composant de l'outil de maquettage ; le theme rend de vraies <img>. La
      numerotation de la planche-contact passe donc de l'emplacement a la
      vignette, et les boutons radio simules en JavaScript deviennent de
      vrais <input type="radio">. Le detail est note a chaque endroit.

   ---------------------------------------------------------
   COLLISIONS DE CLASSES — le cœur de cette feuille
   ---------------------------------------------------------

   assets/bnd-site.css est chargee sur TOUTES les pages : l'en-tete et le
   pied du site en dependent. Les deux univers partagent des noms de classe
   tres generiques, et un selecteur plus specifique ne remplace QUE les
   proprietes qu'il declare : tout le reste fuit depuis la feuille du site.

   C'est ce qui avait produit le defaut constate : .pillar y pose
   background:var(--card) (creme), border-radius:26px, min-height:300px et
   transition — quatre proprietes que la maquette du cercle ne declare pas.
   Les quatre cartes de #club se peignaient donc en creme, se touchaient et
   depassaient la hauteur de la maquette, et leurs titres — sans couleur
   declaree, donc heritant du creme du conteneur sombre — devenaient
   invisibles.

   Croisement complet des classes employees par page-cercle-prive.php,
   sections/cercle-waitlist.php et footer-cercle.php avec celles definies par
   bnd-site.css, bnd-a11y.css, bnd-forms.css et bnd-media.css. Chaque ligne est
   neutralisee sur place, avec un commentaire « collision ». bnd-media.css n'a
   aucune classe en commun avec ces trois fichiers, et bnd-a11y.css n'en
   partage que deux, qui ne visent que des menus WordPress absents de ce pied.

     bnd-site.css
       *                       identique a la maquette — rien a faire
       html, body              hors du conteneur ; body traite plus bas
       ::selection, img, svg,
       video, a, section       redeclarees a l'identique
       .wrap                   4 proprietes, toutes redeclarees
       .lead                   4 proprietes, toutes redeclarees
       .pad-y                  2 proprietes, toutes redeclarees
       .sec-head               align-items:end et grid-template-columns
                               fuyaient : le kicker, le titre et le chapo de
                               #cadence partaient a droite
       .sec-head .lead         margin-top:22px fuyait
       .reveal(.pre/.d1-.d3)   redeclarees a l'identique
       .btn / .btn .arw        toutes proprietes redeclarees
       .hero                   padding-top et padding-bottom (jusqu'a 210px
                               et 120px) et color fuyaient
       .hero h1                6 proprietes, toutes couvertes par .hl-quote
       .hero-cta               5 proprietes, toutes redeclarees
       .pillar                 background, border-radius, min-height,
                               transition fuyaient — le defaut constate
       .pillar:hover           transform fuyait
       .pillar h3              margin-top couvert par le raccourci margin ;
                               couleur rendue explicite
       .pillar p               margin-top:12px fuyait
       .quote                  display, background, border-radius, padding
                               fuyaient : la citation de #behind recevait la
                               meme carte creme que les piliers
       .quote p                color:var(--ink) fuirait si le champ ACF
                               contenait un paragraphe

       — pied de page —
       footer                  background:var(--cobalt), color:var(--d-tx),
                               padding-top:76px et padding-bottom:44px
                               fuyaient : le pied du cercle serait paru bleu
                               nuit, texte creme, avec 120px de blanc en trop
       footer .band-top        aucun .band-top dans ce pied — rien a faire
       .foot                   margin-top:40px, pose par « .manifesto .foot »,
                               n'atteint ce pied qu'a la faveur d'un
                               .manifesto ancetre : le raccourci margin:0 auto
                               de la maquette le couvre de toute facon
       .foot-brand             aucune propriete propre dans la feuille du
                               site ; ses deux descendants suivent
       .foot-brand .big-logo   6 proprietes — aucun .big-logo dans ce pied
       .foot-brand p           font-size, color:var(--d-2), margin-top,
                               line-height et max-width : redeclarees, le
                               champ ACF de la signature pouvant contenir un
                               paragraphe
       .foot-grid, .foot-col,
       .foot-bottom, .fi       propres a la grille du pied du site — aucun de
                               ces noms dans ce pied
       .dot                    color:var(--plasma), qui vaut #FF2E63 hors du
                               conteneur : redeclaree, elle prend le rose du
                               cercle

     bnd-a11y.css
       .foot-col li,
       .foot-legal             propres aux menus WordPress du pied du site ;
                               ce pied n'a pas de menu

     bnd-forms.css  (ecrite pour un fond sombre — ce qui convient ici)
       .form-opt               font-weight fuyait ; couleur revue
       .form-error             font-size, line-height, font-weight fuyaient
       .form-status[data-tone] display, border, padding, font-size,
                               line-height fuyaient
       .form-status[ok/error]  2 proprietes chacune, redeclarees
       .form-actions           flex-wrap fuyait
       .form-actions
         .btn[disabled]        transform:none — repris tel quel
       .form-legal             4 proprietes, toutes redeclarees
       .form-trap              reprise telle quelle : le champ leurre doit
                               precisement sortir du flux

   assets/bnd-site.css n'est pas modifie.
   ========================================================= */

/* ---------- Space Mono, auto-hebergee ----------
   Extraite du bundle de la maquette (fichiers .bin de type font/woff2,
   identifies par la feuille du bundle elle-meme, qui les declarait sous
   font-family:'Space Mono'). Seuls les quatre sous-ensembles utiles a une
   page francaise sont repris : le vietnamien et les trois italiques
   n'etaient appeles par aucune regle. */
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Regular-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Regular-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Bold-latin-ext.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Bold-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Le site principal pose un beige clair sur <body>. L'univers du cercle est
   sombre de bout en bout : sans cette regle, une bande beige resterait
   visible sous le contenu et derriere la barre de navigation. Elle est
   portee par la classe de gabarit posee par body_class() : aucune autre
   page ne peut l'atteindre. */
body.page-template-page-cercle-prive { background: #0E0C0A; }

/* Variables de la maquette, reportees de :root sur le conteneur : une
   redefinition globale de --plasma ou de --flash repeindrait l'en-tete et
   le pied du site, qui vivent hors du conteneur. --noir-2 et --noir-3 ont
   la meme valeur que --noir dans la maquette ; ils sont conserves pour que
   les regles ci-dessous restent mot pour mot celles de la source.

   La barre de navigation de la page les recoit aussi : elle est rendue hors
   du conteneur — voir « NAV » plus bas — et n'heriterait donc de rien. */
.cc-cercle,
.cc-nav{
  --noir:#0E0C0A;
  --noir-2:#0E0C0A;
  --noir-3:#0E0C0A;
  --plasma:#DE0A76;
  --plasma-soft:#EE4C97;
  --plasma-fill:#B5075C;

  --flash:#F4F0E8;
  --tx:var(--flash);
  --tx-2:rgba(244,240,232,0.68);
  --tx-3:rgba(244,240,232,0.44);
  --tx-4:rgba(244,240,232,0.16);
  --hair:rgba(244,240,232,0.12);
  --hair-2:rgba(244,240,232,0.22);

  --maxw:1320px;
  --pad:clamp(20px,4.4vw,84px);

  /* Marge interieure du hero, partagee avec la barre de navigation.
     Le hero n'est pas dans un .wrap : c'est une grille de deux colonnes posee
     sur toute la largeur de la fenetre, et son texte commence donc a cette
     distance du bord de l'ecran — pas de celle d'une colonne centree. La barre
     etant transparente au-dessus de lui, le monogramme et le surtitre sont
     lus comme une seule verticale : ils doivent partir du meme point.

     La valeur est une variable et non deux clamp() jumeaux, parce que deux
     valeurs identiques ecrites a deux endroits finissent toujours par se
     desaccorder — c'est precisement ce qui s'etait produit ici, la barre
     ayant herite du --pad du reste de la page. */
  --hero-pad:clamp(36px,5.5vw,96px);
}

/* Declarations que la maquette posait sur <body>, reportees sur le
   conteneur. isolation:isolate enferme les fusions de calques (grain,
   vignette) dans l'univers du cercle : le noir du fond ne va plus se
   multiplier avec le bleu nuit du pied de page. Elle ne dit rien, en
   revanche, de l'etendue de ces calques : c'est l'affaire des glissieres
   collantes decrites plus bas. */
.cc-cercle{
  position:relative;
  isolation:isolate;
  background:var(--noir);
  font-family:'Inter',sans-serif;
  font-weight:300;
  color:var(--tx);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip et non hidden : hidden ferait du conteneur une zone defilable et
     couperait le collant de l'en-tete du site, qui vit au-dessus de lui. */
  overflow-x:clip;
}
.cc-cercle ::selection{background:var(--plasma);color:var(--flash);}
.cc-cercle img,.cc-cercle svg,.cc-cercle video{display:block;max-width:100%;}
.cc-cercle a{color:inherit;text-decoration:none;}
.cc-cercle h1,.cc-cercle h2,.cc-cercle h3{font-family:'Inter',sans-serif;}

/* L'en-tete du theme est fixe : sans cette reserve, un lien d'ancre
   (#club, #waitlist…) deposerait le haut de la section sous la barre. */
.cc-cercle section[id],.cc-cercle header[id]{scroll-margin-top:96px;}

/* collision .wrap — bnd-site.css pose max-width:1400px et les deux marges
   interieures ; les quatre proprietes sont redeclarees. */
.cc-cercle .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}

/* ---------- couches d'atmosphere : vignette, grain, dos de magazine ----------

   Les trois calques etaient fixes au viewport, comme dans la maquette — qui
   n'avait ni en-tete ni pied de page a menager. Un calque fixe ne s'arrete
   pas au conteneur : il couvre l'ecran entier, et le conteneur, positionne,
   se peint apres le <footer> du site, qui ne l'est pas. Les trois calques
   repeignaient donc le pied de page — grain en surimpression, vignette en
   produit, et l'annotation « Content Club · Edition 001 » imprimee par-dessus
   la colonne « Nous joindre ». Le pied etait pourtant identique au calcul :
   l'ecart ne se voyait qu'a l'image.

   Chaque calque est desormais une glissiere collante — position:sticky —
   enfermee dans une enveloppe posee sur toute la hauteur du conteneur.
   L'enveloppe est en position absolue : elle epouse le conteneur sans rien
   prendre au flux, et c'est elle qui borne la glissiere, parce qu'un element
   collant ne sort jamais de son bloc conteneur. Tant que le conteneur occupe
   l'ecran, la glissiere se comporte exactement comme un calque fixe ; a la
   derniere ligne du conteneur, elle s'arrete. Le pied du site, qui commence
   la ou le conteneur finit, n'est plus recouvert.

   L'enveloppe absolue n'est pas un detour : une glissiere laissee dans le
   flux devrait annuler sa propre hauteur par une marge negative, et une
   marge negative elargit d'autant la zone ou l'element collant a le droit de
   glisser — elle rendrait precisement la liberte qu'on cherche a lui retirer.
   Mesure faite : le pied restait couvert. */
.cc-cercle .vignette,
.cc-cercle .grain,
.cc-cercle .spine{position:absolute;inset:0;pointer-events:none;}

/* vignette argentique : la maquette la posait en body::after ; elle prend ici
   son propre element, faute de pouvoir imbriquer deux pseudo-elements. */
.cc-cercle .vignette{z-index:9;mix-blend-mode:multiply;}
.cc-cercle .vignette::before{content:"";display:block;position:sticky;top:0;height:100vh;
  background:radial-gradient(130% 100% at 50% 30%, transparent 58%, rgba(0,0,0,0.55) 100%);}

/* Le grain deborde de l'ecran d'un demi-viewport de chaque cote : l'animation
   le deplace de quelques pour cent, et sans cette reserve elle decouvrirait un
   bord. L'opacite et la fusion restent sur l'enveloppe : un element qui
   fusionne le fait avec ce qui l'entoure, et les poser sur la glissiere les
   enfermerait dans un groupe isole, donc sans effet. */
.cc-cercle .grain{z-index:8;opacity:0.06;mix-blend-mode:overlay;}
.cc-cercle .grain::before{content:"";display:block;position:sticky;top:-50vh;height:200vh;width:200%;margin-left:-50%;
  /* Grain argentique. Le SVG est encode en base64 et non en clair : sous sa
     forme lisible il porte l'URI de l'espace de noms SVG (w3.org), jamais
     telechargee mais qui ferait echouer la verification « aucune URL absolue
     dans la feuille ». Les octets sont les memes, et rien n'est demande au
     reseau : l'image est entierement contenue ici. */
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44MicgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
  animation:cc-cercle-grain 6s steps(6) infinite;}
@keyframes cc-cercle-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-3%,4%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion: reduce){.cc-cercle .grain::before{animation:none;}}

/* spine : annotation verticale, dos de magazine. C'est le <span> qui glisse —
   top:50vh puis translateY(-50%) le centrent dans l'ecran, comme le faisaient
   top:50% et la meme translation sur le calque fixe. La fusion reste sur
   l'enveloppe, pour la meme raison que le grain. L'alignement a droite passe
   par le texte et non par « right:8px », qui sur un element collant ne
   deplacerait rien : les decalages d'un element collant sont ses seuils
   d'adherence, pas sa position. */
.cc-cercle .spine{z-index:20;mix-blend-mode:difference;text-align:right;padding-right:8px;}
.cc-cercle .spine span{position:sticky;top:50vh;display:inline-block;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--tx-3);}
@media(max-width:1100px){.cc-cercle .spine{display:none;}}

/* ---------- emplacements photo ----------
   La maquette posait ses visuels dans <image-slot>, composant de l'outil de
   maquettage. WordPress rend une <img> ordinaire quand le champ est
   renseigne, et un cadre vide sinon : le fond raye tient lieu d'attente,
   comme dans la maquette. */
.cc-cercle .ph{position:relative;overflow:hidden;background:repeating-linear-gradient(135deg,#242019 0 4px,#171410 4px 8px);}
.cc-cercle div.ph::after{content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;
  /* Meme encodage, meme raison que pour le grain. */
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNTAnIGhlaWdodD0nMTUwJz48ZmlsdGVyIGlkPSdnJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC42JyBudW1PY3RhdmVzPScyJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI2cpJy8+PC9zdmc+");}
.cc-cercle img.ph{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(1.02);background:none;}

/* ---------- shared type ---------- */
.cc-cercle .kicker{display:inline-flex;align-items:center;gap:16px;font-family:'Inter',sans-serif;font-size:11px;font-weight:400;letter-spacing:0.4em;text-transform:uppercase;color:var(--tx-3);}
.cc-cercle .kicker::before{content:"";width:30px;height:1px;background:currentColor;flex-shrink:0;}
.cc-cercle .kicker.pl{color:var(--tx-3);}
.cc-cercle .kicker.pl::before{background:var(--plasma);}
/* collision .lead — bnd-site.css pose font-size, line-height,
   color:var(--ink-2) (encre foncee, invisible sur ce fond) et max-width. */
.cc-cercle .lead{font-family:'Inter',sans-serif;font-size:clamp(17px,1.5vw,21px);font-weight:300;line-height:1.62;color:var(--tx-2);max-width:56ch;}
/* collision .pad-y — bnd-site.css pose des rythmes plus courts. */
.cc-cercle .pad-y{padding-top:clamp(100px,13vw,190px);padding-bottom:clamp(100px,13vw,190px);}
.cc-cercle section{position:relative;}

/* buttons
   collision .btn — bnd-site.css pose display, align-items, gap, font-size,
   font-weight, letter-spacing, text-transform, padding, border-radius
   (999px), border:none, cursor, transition et line-height : les treize sont
   redeclarees ci-dessous, avec en plus la famille, le fond et la couleur que
   la maquette du cercle ajoute. */
.cc-cercle .btn,
.cc-nav .btn{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font-family:'Inter',sans-serif;font-size:11px;font-weight:400;letter-spacing:0.26em;text-transform:uppercase;padding:17px 32px;border-radius:0;border:1px solid var(--flash);background:var(--flash);color:var(--noir);cursor:pointer;transition:transform .2s ease,background .3s,color .3s,border-color .3s,opacity .3s;line-height:1;}
.cc-cercle .btn .arw{transition:transform .2s ease;}
.cc-cercle .btn:hover .arw{transform:translateX(5px);}
.cc-cercle .btn:hover,
.cc-nav .btn:hover{opacity:0.86;}
/* collision .form-actions .btn[disabled] — bnd-forms.css pose opacity,
   cursor et transform ; les trois sont reprises a l'identique. */
.cc-cercle .btn[disabled]{opacity:0.6;cursor:progress;transform:none;}
.cc-cercle .btn-ghost{background:transparent;color:var(--flash);border-color:var(--hair-2);}
.cc-cercle .btn-ghost:hover{border-color:var(--flash);opacity:1;}

/* =========================================================
   NAV — la barre propre au Content Club

   La maquette a sa propre barre, et elle ne dit pas la meme chose que celle
   du site : pas de « Brand New Day. » mais un monogramme « Content Club. /
   by BND. », cinq entrees qui sont les sections de cette page, et un seul
   appel a l'action, la guest list. C'est header-cercle.php qui la rend, et
   page-cercle-prive.php qui l'appelle par get_header('cercle') — le pendant
   exact de ce que footer-cercle.php fait deja pour le pied.

   ---------------------------------------------------------
   Pourquoi .cc-nav et non .nav, et pourquoi hors du conteneur
   ---------------------------------------------------------

   Le nom de classe de la maquette est « nav », et c'est aussi celui de la
   barre du site dans assets/bnd-site.css : fond creme, filet, flou d'arriere-
   plan, z-index 100. Le reprendre tel quel aurait fait fuir ces proprietes
   sous la barre du cercle, exactement comme le fond creme des cartes de
   .pillar l'avait fait dans #club. La barre du cercle porte donc .cc-nav, qui
   n'existe nulle part ailleurs ; les classes de ses enfants (.bar, .mono-logo,
   .nav-menu, .nav-right, .btn-pill, .rec) restent celles de la maquette.

   Meme raison pour l'identifiant : assets/bnd-site.js cherche « #nav » et lui
   pose un fond creme en style en ligne des les 40 premiers pixels de
   defilement. La barre du cercle s'appelle « cc-nav » et lui echappe ;
   assets/cc-cercle.js pose sa classe .scrolled, que ces regles decrivent.

   Elle est enfin rendue HORS du conteneur .cc-cercle, et non dedans comme le
   pied. Le conteneur porte overflow-x:clip pour retenir le grain : le
   comportement d'un descendant en position fixe sous un ancetre qui rogne
   n'est pas le meme d'un moteur a l'autre, et une barre qui disparait au
   defilement serait une panne difficile a lire. Elle recoit donc les
   variables du cercle par le selecteur de tete de fichier, et redeclare ici
   les quelques proprietes que .cc-cercle lui aurait donnees.

   collision .nav-right — bnd-site.css y pose display:flex, align-items:center
   et gap:14px pour loger le selecteur de langue, le bouton et le burger de la
   barre du site. Cette barre-ci n'a qu'un bouton : les trois sont ramenees a
   leur valeur initiale, comme dans la maquette.
   collision .btn — les treize proprietes de bnd-site.css sont deja
   redeclarees plus haut ; .cc-nav .btn a ete ajoute a ce selecteur.
   collision .dot — bnd-site.css pose color:var(--plasma), qui vaut #FF2E63
   hors du conteneur. La variable est redeclaree sur .cc-nav en tete de
   fichier, et le point du monogramme reprend le rose du cercle.
   ========================================================= */
.cc-nav{position:fixed;top:0;left:0;right:0;z-index:30;color:var(--flash);font-family:'Inter',sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent;}
.cc-nav.scrolled{background:rgba(14,12,10,0.82);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);border-bottom-color:var(--hair);}
.cc-nav a{color:inherit;text-decoration:none;}
/* La barre epouse la largeur du hero, et non celle d'une colonne centree.
   Avec max-width:1320px et le --pad du reste de la page, le monogramme
   s'enfoncait dans l'ecran a mesure que celui-ci s'elargissait : 66 px de
   decalage avec le surtitre du hero a 1440 px de large, plus de 300 px a
   1920 px. La barre n'ayant pas de fond au repos, rien ne justifiait de la
   borner : elle flotte sur le hero, elle en prend donc les marges. */
.cc-nav .bar{max-width:none;margin:0;padding:18px var(--hero-pad);display:flex;align-items:center;gap:28px;}
.cc-nav .mono-logo{display:flex;flex-direction:column;align-items:flex-start;gap:3px;color:currentColor;}
.cc-nav .mono-logo .cc{font-family:'Inter',sans-serif;font-weight:300;letter-spacing:0.16em;font-size:17px;text-transform:uppercase;line-height:1;}
.cc-nav .mono-logo .cc .dot{color:var(--plasma);font-weight:400;}
.cc-nav .mono-logo .by{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;opacity:0.6;}
.cc-nav .nav-menu{display:flex;gap:clamp(18px,2.2vw,38px);margin-left:auto;}
.cc-nav .nav-menu a{font-family:'Inter',sans-serif;font-size:11px;font-weight:400;letter-spacing:0.26em;text-transform:uppercase;color:currentColor;opacity:0.72;transition:opacity .2s,color .2s;}
.cc-nav .nav-menu a:hover{opacity:1;color:var(--plasma);}
/* Le bouton et le burger sont deux enfants d'une meme boite : elle doit les
   ranger sur une ligne. Posee en display:block — ce qu'elle etait, pour
   neutraliser le flex de bnd-site.css a une epoque ou elle n'avait qu'un
   enfant — le burger, lui-meme flex donc de niveau bloc, tombait sous le
   bouton et la barre prenait deux lignes. */
.cc-nav .nav-right{display:flex;align-items:center;gap:8px;margin-left:clamp(14px,2vw,30px);}
.cc-nav .btn-pill{border-radius:999px;background:var(--flash);color:var(--noir);padding:13px 22px 13px 18px;}
.cc-nav .btn-pill .rec{width:6px;height:6px;border-radius:50%;background:var(--plasma-fill);flex-shrink:0;}
/* Deux libelles rendus, un seul montre — voir le bloc des 620 px. */
.cc-nav .cta-short{display:none;}
/* Les six entrees demandent beaucoup de place : composees en capitales a
   0,26 em d'approche, elles mesurent a elles seules plus de 650 px. Mesure
   faite sur les fontes du depot, le rang complet — monogramme, entrees,
   bouton — ne tient qu'a partir de 1 258 px. Le seuil de 980 px repris de la
   maquette laissait donc une large bande ou les entrees passaient a la ligne
   et ou la barre doublait de hauteur.

   Entre le seuil et 1 400 px, l'approche et le corps sont resserres d'un
   cran : c'est ce qui garde les entrees sur un portable de 1 280 px au lieu
   de les masquer. */
@media(max-width:1400px){
  .cc-nav .nav-menu{gap:clamp(14px,1.6vw,28px);}
  .cc-nav .nav-menu a{font-size:10.5px;letter-spacing:0.18em;}
}

/* Le burger n existe que sous le seuil : au-dessus, les entrees sont visibles,
   et un bouton qui ouvrirait un panneau deja ouvert n aurait pas de sens.

   CES REGLES PRECEDENT LA REQUETE MEDIA, ET CE N EST PAS UN DETAIL. Ecrites
   apres, elles l emportaient sur elle a specificite egale — la derniere regle
   gagne — et « display:none » s appliquait a toutes les largeurs. Le burger ne
   paraissait jamais, les entrees restaient masquees sous le seuil, et la barre
   n avait plus de menu du tout. */
.cc-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;padding:0;margin-left:14px;background:none;border:none;cursor:pointer;flex-shrink:0;}
.cc-burger span{display:block;width:20px;height:1px;background:var(--flash);margin:0 auto;transition:transform .25s,opacity .2s;}
/* Ouvert, les trois barres deviennent une croix : le bouton annonce ce qu il
   fera au prochain clic, et non ce qu il vient de faire. */
.cc-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.cc-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.cc-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

/* Sous le seuil, les entrees passent derriere un burger, comme sur la landing.
   Elles etaient auparavant masquees : le raisonnement tenait pour cinq ancres
   de la page, que le defilement atteint de toute facon, mais la sixieme —
   « BND » — quitte la page, et rien d autre dans la barre ne ramene au site.
   Les masquer retirait une destination, pas un raccourci.

   C est .nav-menu qui porte le margin-left:auto poussant le bouton a droite :
   devenue panneau, elle emporte la poussee avec elle. Elle passe donc sur
   .nav-right des que le burger prend le relais.

   Le panneau se pose sous la barre, sur toute sa largeur, et porte son propre
   fond opaque : deploye au-dessus du hero, un fond translucide laisserait la
   photographie passer a travers le texte. */
@media(max-width:1260px){
  .cc-nav .nav-right{margin-left:auto;}
  .cc-burger{display:flex;}

  .cc-nav .nav-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin-left:0;
    padding:6px var(--hero-pad) 22px;
    background:rgba(14,12,10,0.97);
    backdrop-filter:blur(14px) saturate(1.1);
    -webkit-backdrop-filter:blur(14px) saturate(1.1);
    border-bottom:1px solid var(--hair);
  }

  .cc-nav .nav-menu.open{display:flex;}

  /* Des cibles a la taille du pouce, et un filet pour les separer : a 11 px de
     corps et 0,2 em d approche, deux entrees collees se manquent au doigt. */
  .cc-nav .nav-menu a{
    padding:16px 0;
    font-size:12px;
    letter-spacing:0.2em;
    opacity:0.85;
    border-bottom:1px solid var(--hair);
  }

  .cc-nav .nav-menu a:last-child{border-bottom:none;}
}

/* ---------- la barre en dessous de 620 px ----------

   Mesure faite sur les fontes du depot, monogramme et bouton compris : a
   390 px de large, « Rejoindre la guest list » demandait 449 px pour 318 px
   disponibles. La barre debordait donc de 105 a 160 px sur tous les
   telephones, et ce depassement — la barre vivant hors de .cc-cercle et de son
   overflow-x:clip — faisait defiler la page entiere en largeur.

   Aucune reduction typographique raisonnable ne rattrape 130 px : le libelle
   complet ne tient pas sous 430 px, meme a 10 px de corps. C'est le TEXTE qui
   doit changer, pas sa taille. Le gabarit rend donc les deux libelles — le
   long et un court, « Guest list » — et n'en montre qu'un. Le masquage par
   display:none, et non par un retrait visuel, sort la variante cachee de
   l'arbre d'accessibilite : aucun lecteur d'ecran n'annonce le bouton deux
   fois.

   Le corps est malgre tout resserre d'un cran : c'est ce qui redonne une vraie
   respiration entre les deux blocs plutot qu'un ajustement au pixel pres.
   Verifie de 320 a 620 px. */
@media(max-width:620px){
  .cc-nav .bar{padding:14px var(--hero-pad);gap:10px;}
  /* Trois elements sur une ligne au lieu de deux : la place se prend sur ce
     qui ne porte pas de sens. La pastille du bouton est un decor — elle est
     deja hors de l'arbre d'accessibilite — et le burger se contente de 30 px,
     ce qui reste au-dessus de la cible tactile recommandee une fois sa marge
     comptee. Mesure faite sur les fontes du depot : le rang tient de 320 a
     620 px, avec 14 px de marge dans le pire cas. */
  .cc-nav .btn-pill .rec{display:none;}
  .cc-burger{width:30px;height:30px;margin-left:0;}
  .cc-nav .mono-logo .cc{font-size:15px;letter-spacing:0.10em;}
  .cc-nav .mono-logo .by{font-size:9px;}
  .cc-nav .btn-pill{padding:12px 12px 12px 10px;font-size:10px;letter-spacing:0.10em;gap:0;}
  .cc-nav .cta-long{display:none;}
  .cc-nav .cta-short{display:inline;}
}

/* Sous 360 px, la marge du hero coute a elle seule 72 px des 320 px de
   l'ecran, et la barre redeborde. L'alignement avec le hero cede ici le pas :
   un monogramme decale de seize pixels se remarque a peine, une page qui
   defile en largeur se remarque immediatement. */
@media(max-width:400px){.cc-nav .mono-logo .cc{font-size:14px;letter-spacing:0.08em;}}
@media(max-width:360px){.cc-nav .bar{padding-left:20px;padding-right:20px;}}

/* reveal on scroll — meme convention que le reste du theme :
   assets/bnd-site.js et assets/cc-cercle.js posent et retirent .pre.
   collision .reveal / .reveal.pre / .reveal.d1-.d3 : bnd-site.css pose des
   durees et des retards plus courts, redeclares ici. */
.cc-cercle .reveal{transition:opacity 1.05s cubic-bezier(.2,.7,.2,1), transform 1.05s cubic-bezier(.2,.7,.2,1);}
.cc-cercle .reveal.pre{opacity:0;transform:translateY(28px);}
.cc-cercle .reveal.d1{transition-delay:.1s;}
.cc-cercle .reveal.d2{transition-delay:.2s;}
.cc-cercle .reveal.d3{transition-delay:.3s;}
@media (prefers-reduced-motion: reduce){.cc-cercle .reveal,.cc-cercle .reveal.pre{opacity:1;transform:none;transition:none;}}

/* =========================================================
   HERO : split texte / photo
   ========================================================= */
/* collision .hero — bnd-site.css pose background, color:var(--d-tx),
   padding-top:clamp(140px,17vh,210px), padding-bottom:clamp(72px,9vw,120px)
   et overflow. Les deux marges interieures fuyaient : elles s'ajoutaient au
   min-height:100svh et repoussaient la photo hors de son cadre. */
.cc-cercle .hero{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:100svh;overflow:hidden;background:var(--noir);color:var(--tx);padding:0;}
.cc-cercle .hero-inner{align-self:center;position:relative;z-index:2;padding:clamp(110px,14vh,150px) var(--hero-pad) clamp(60px,8vh,90px);display:flex;flex-direction:column;gap:clamp(22px,2.6vw,32px);}
.cc-cercle .hero-media{position:relative;min-height:100svh;background:var(--noir);}
.cc-cercle .hero-media .ph{position:absolute;inset:0;width:100%;height:100%;}
.cc-cercle .hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg, var(--noir) 0%, rgba(14,12,10,0.25) 26%, transparent 58%),
  linear-gradient(0deg, rgba(14,12,10,0.55), transparent 42%);}
.cc-cercle .hl-eyebrow{display:inline-flex;align-items:center;gap:14px;font-family:'Space Mono',monospace;font-size:clamp(11px,0.95vw,13px);letter-spacing:0.14em;text-transform:uppercase;color:#FF5C97;}
.cc-cercle .hl-eyebrow::before{content:"";width:26px;height:1px;background:var(--plasma);flex-shrink:0;}
/* collision .hero h1 — bnd-site.css y pose font-weight:900,
   letter-spacing:-0.04em, line-height:0.98, text-transform, font-size et
   color:#fff. Le <h1> de la page porte .hl-quote : (0,2,0) l'emporte sur
   (0,1,1), et les six proprietes sont redeclarees ici. */
.cc-cercle .hl-quote{font-family:'Inter',sans-serif;font-weight:200;letter-spacing:0.005em;line-height:1.08;font-size:clamp(36px,5vw,76px);text-transform:uppercase;color:var(--flash);text-wrap:balance;}
.cc-cercle .hl-quote em{font-style:italic;font-weight:200;color:var(--flash);}
.cc-cercle .hl-sub{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(15px,1.15vw,17px);line-height:1.7;color:var(--tx-2);max-width:44ch;}
/* collision .hero-cta — bnd-site.css pose margin-top:40px, display,
   align-items, gap:24px et flex-wrap : les cinq sont redeclarees. */
.cc-cercle .hero-cta{margin-top:clamp(20px,2.6vw,32px);display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.cc-cercle .hero-scroll{position:absolute;right:clamp(20px,2vw,40px);bottom:clamp(24px,4vh,44px);z-index:3;width:50px;height:50px;border:1px solid var(--plasma);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--plasma);font-size:16px;background:rgba(14,12,10,0.35);backdrop-filter:blur(3px);transition:background .25s,color .25s;}
.cc-cercle .hero-scroll:hover{background:var(--plasma);color:var(--flash);}
@media(max-width:900px){.cc-cercle .hero{grid-template-columns:1fr;min-height:auto;}.cc-cercle .hero-inner{padding-top:120px;padding-bottom:56px;}.cc-cercle .hero-media{min-height:56vh;}.cc-cercle .hl-quote{font-size:clamp(32px,7vw,50px);}}

/* ---------------------------------------------------------
   ARRIVEE — « le tirage se revele »
   ---------------------------------------------------------

   Le visiteur vient de l'accueil, fond creme. Cette page est noire : la
   bascule est un a-coup. L'animation ne la deguise pas, elle lui donne une
   duree — l'œil se pose sur une surface noire deja stable (le fond est peint
   par la classe de gabarit sur <body>, donc des le premier rendu, sans
   flash), puis la photographie monte du noir pendant que les quatre lignes
   se posent. C'est le geste du tirage argentique qui apparait dans le bain,
   sujet meme de l'edition 001 ; aucun autre element ne bouge.

   MESURE — le texte est entierement lisible a 660 ms :
     eyebrow  0 ms      → 460 ms
     titre    80 ms     → 540 ms
     chapo    140 ms    → 600 ms
     bouton   200 ms    → 660 ms
     photo    0 ms      → 900 ms  (decor : elle n'a rien a lire)
     fleche   420 ms    → 820 ms  (decor)
   Les retards sont volontairement courts : avec animation-fill-mode:both,
   un retard est un temps ou l'element est encore a son etat de depart.

   AUCUN CONTENU NE DEPEND DE L'ANIMATION. Il n'y a pas une ligne de
   JavaScript ici : l'etat masque n'existe qu'a l'interieur des @keyframes,
   jamais dans une classe posee sur l'element. Une feuille non chargee, des
   animations non supportees ou interrompues laissent donc le hero a son etat
   naturel — visible. C'est l'inverse du .pre pose par script, qui laisse un
   bloc invisible des que le script tombe.

   PAS DE DECALAGE — opacity et transform seulement, ni l'un ni l'autre ne
   participe a la mise en page. Le dezoom de la photo est contenu par
   l'overflow:hidden du .hero.

   PAS DE REJEU — une animation CSS se joue a l'affichage de la page, une
   fois. Elle ne se rearme a aucun defilement.

   NEUTRALISATION DU REVEAL — assets/bnd-site.js pose .pre sur tout .reveal
   dont le haut passe sous 0.85 de la fenetre, et assets/cc-cercle.js le
   retire a l'entree dans le champ. Les quatre lignes du hero portent .reveal :
   sur un ecran court, le bouton pouvait donc recevoir .pre pendant que
   l'animation d'arrivee le montrait, et redevenir invisible a la fin de
   celle-ci. La regle ci-dessous (quatre classes, elle l'emporte sur le
   .cc-cercle .reveal.pre plus haut) retire au hero le mecanisme de reveal :
   il appartient desormais a l'arrivee, et les deux moteurs peuvent poser
   .pre autant qu'ils veulent sans plus rien pouvoir masquer. */
.cc-cercle .hero .reveal.pre{opacity:1;transform:none;}

@keyframes cc-cercle-arrivee-ligne{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes cc-cercle-arrivee-tirage{from{opacity:0;transform:scale(1.03);}to{opacity:1;transform:none;}}
@keyframes cc-cercle-arrivee-fleche{from{opacity:0;}to{opacity:1;}}

.cc-cercle .hero-inner > *{animation:cc-cercle-arrivee-ligne .46s cubic-bezier(.2,.7,.2,1) both;}
/* Les retards reprennent .d1/.d2/.d3, deja portees par le balisage dans
   l'ordre de lecture : rien a compter en :nth-child, que l'ajout d'une ligne
   fausserait. */
.cc-cercle .hero-inner > .d1{animation-delay:.08s;}
.cc-cercle .hero-inner > .d2{animation-delay:.14s;}
.cc-cercle .hero-inner > .d3{animation-delay:.2s;}
.cc-cercle .hero-media .ph{animation:cc-cercle-arrivee-tirage .9s cubic-bezier(.2,.7,.2,1) both;}
.cc-cercle .hero-scroll{animation:cc-cercle-arrivee-fleche .4s linear .42s both;}

/* Meme garde que le reveal au defilement, quelques lignes plus haut. */
@media (prefers-reduced-motion: reduce){
  .cc-cercle .hero-inner > *,
  .cc-cercle .hero-media .ph,
  .cc-cercle .hero-scroll{animation:none;}
}

/* =========================================================
   PILLARS — les quatre cartes de #club
   ========================================================= */
.cc-cercle .pillars-sec{background:var(--noir);}
.cc-cercle .pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
/* collision .pillar — LE defaut constate par le client.
   bnd-site.css pose, pour les piliers de la page d'accueil :
     display:flex; flex-direction:column;
     background:var(--card)      -> #F6F1E6, creme
     border-radius:var(--r-lg)   -> 26px
     padding:38px 32px 40px
     min-height:300px
     transition:transform .2s
   La maquette du cercle ne declare que padding, border-left, display et
   flex-direction : fond, rayon, hauteur minimale et transition fuyaient
   depuis la feuille du site. Le pilier de la maquette est une simple
   colonne separee par un filet d'un pixel, sans fond ni rayon, dont la
   hauteur suit son contenu — les quatre proprietes sont donc ramenees ici a
   leur valeur initiale. */
.cc-cercle .pillar{padding:4px clamp(22px,2.2vw,38px);border-left:1px solid var(--hair);display:flex;flex-direction:column;background:none;border-radius:0;min-height:auto;transition:none;}
.cc-cercle .pillar:first-child{border-left:none;padding-left:0;}
/* collision .pillar:hover — bnd-site.css souleve la carte de 4px au survol.
   Une colonne sans carte n'a rien a soulever. */
.cc-cercle .pillar:hover{transform:none;}
.cc-cercle .pl-no{font-family:'Inter',sans-serif;font-size:12px;font-weight:400;letter-spacing:0.2em;color:var(--plasma);}
/* collision .pillar h3 — bnd-site.css pose font-weight:900, font-size:22px,
   letter-spacing, text-transform, line-height et margin-top:28px. Les six
   sont couvertes (margin-top par le raccourci margin). La couleur, que ni
   l'une ni l'autre feuille ne declarait, est rendue explicite : c'est elle
   qui, heritee du conteneur, ecrivait en creme sur le fond creme fuite. */
.cc-cercle .pillar h3{font-family:'Inter',sans-serif;font-weight:300;text-transform:uppercase;font-size:clamp(17px,1.4vw,21px);letter-spacing:0.02em;line-height:1.18;margin:clamp(26px,3vw,42px) 0 14px;color:var(--tx);}
/* collision .pillar p — bnd-site.css pose font-size, line-height,
   color:var(--ink-2) et margin-top:12px, ce dernier fuyait. */
.cc-cercle .pillar p{font-family:'Inter',sans-serif;font-weight:300;font-size:14px;line-height:1.6;color:var(--tx-2);margin-top:0;}
@media(max-width:820px){.cc-cercle .pillars-grid{grid-template-columns:1fr 1fr;gap:36px 0;}.cc-cercle .pillar:nth-child(3){border-left:none;padding-left:0;}}
@media(max-width:520px){.cc-cercle .pillars-grid{grid-template-columns:1fr;}.cc-cercle .pillar{border-left:none;padding-left:0;border-top:1px solid var(--hair);padding-top:26px;}.cc-cercle .pillar:first-child{border-top:none;padding-top:0;}}

/* =========================================================
   1996 : le constat
   ========================================================= */
.cc-cercle .constat{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.cc-cercle .constat-inner{max-width:1060px;}
.cc-cercle .constat-head{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(30px,4.5vw,72px);align-items:center;margin-top:clamp(36px,5vw,72px);}
.cc-cercle .constat-theme{margin-top:clamp(48px,6.5vw,96px);padding-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:20px;}
.cc-cercle .constat-lede{display:flex;flex-direction:column;}
.cc-cercle .constat-photo{position:relative;aspect-ratio:4/5;background:var(--noir);border:1px solid var(--hair);}
.cc-cercle .constat-photo .ph{position:absolute;inset:0;width:100%;height:100%;}
@media(max-width:820px){.cc-cercle .constat-head{grid-template-columns:1fr;gap:32px;}.cc-cercle .constat-photo{aspect-ratio:4/3;}}
.cc-cercle .constat-year{font-family:'Inter',sans-serif;font-weight:200;text-transform:uppercase;font-size:clamp(64px,12vw,180px);line-height:0.9;letter-spacing:0.01em;color:var(--flash);}
.cc-cercle .constat-open{margin-top:clamp(28px,3.6vw,52px);font-family:'Inter',sans-serif;font-style:italic;font-weight:300;font-size:clamp(24px,3.4vw,44px);line-height:1.24;letter-spacing:0.002em;color:var(--flash);max-width:20ch;}
.cc-cercle .constat-body{margin-top:0;display:flex;flex-direction:column;gap:clamp(24px,3vw,38px);align-items:start;}
.cc-cercle .constat-body > p{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(15.5px,1.4vw,18px);line-height:1.7;color:var(--tx-2);}
.cc-cercle .constat-things{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0;padding:0;}
.cc-cercle .constat-things li{font-family:'Inter',sans-serif;font-weight:300;text-transform:uppercase;font-size:clamp(18px,1.9vw,26px);letter-spacing:0.03em;line-height:1.1;color:var(--flash);padding-bottom:14px;border-bottom:1px solid var(--hair);}
.cc-cercle .constat-turn{margin-top:clamp(44px,6vw,88px);font-family:'Inter',sans-serif;font-weight:200;text-transform:uppercase;font-size:clamp(26px,4.2vw,52px);line-height:1.1;letter-spacing:0.005em;color:var(--flash);max-width:24ch;}
.cc-cercle .constat-turn em{font-style:italic;font-weight:200;color:var(--plasma);text-transform:none;}
/* La chute de la bascule — « son passé ? » — quitte l'italique pour des
   capitales roses posees sur leur propre ligne, un cran plus grandes que la
   question. C'est la seule respiration de la section, et elle porte le theme
   de l'edition. La regle est plus specifique que celle du dessus : les cinq
   proprietes qu'elles ont en commun sont donc reprises ici. */
.cc-cercle .constat-turn em.past{display:block;margin-top:10px;font-style:normal;font-weight:400;text-transform:uppercase;letter-spacing:0.01em;color:var(--plasma);font-size:1.34em;line-height:1.02;}
/* En dessous de 720px, clamp(24px,3vw,38px) rend 24px la ou la maquette veut
   32px entre le paragraphe et la liste. La declaration grid-template-columns
   est sans effet — .constat-body est en flex — mais elle est dans la source
   et n'est pas retiree : ce n'est pas a cette reprise de trancher. */
@media(max-width:720px){.cc-cercle .constat-body{grid-template-columns:1fr;gap:32px;}}

/* =========================================================
   FILMSTRIP : planche-contact
   ========================================================= */
.cc-cercle .filmstrip-sec{padding:0;border-bottom:1px solid var(--hair);background:var(--noir);}
.cc-cercle .filmstrip{display:flex;gap:1px;justify-content:center;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;background:var(--hair);margin:0;}
.cc-cercle .fs-tile{position:relative;flex:0 0 auto;width:clamp(260px,28vw,380px);height:clamp(320px,36vw,440px);scroll-snap-align:start;margin:0;}
.cc-cercle .fs-tile .ph{position:absolute;inset:0;width:100%;height:100%;}
/* La numerotation de planche-contact etait portee par l'<image-slot> ; elle
   passe sur la vignette, seul element present que le champ soit renseigne
   ou non — une <img> ne peut pas porter de ::before. */
.cc-cercle .fs-tile[data-tape]::before{content:attr(data-tape);position:absolute;top:14px;left:14px;z-index:2;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(244,240,232,0.65);mix-blend-mode:difference;}
.cc-cercle .filmstrip::-webkit-scrollbar{height:5px;}
.cc-cercle .filmstrip::-webkit-scrollbar-track{background:transparent;}
.cc-cercle .filmstrip::-webkit-scrollbar-thumb{background:var(--hair-2);}

/* =========================================================
   SPREAD : theme de la premiere edition
   ========================================================= */
/* minmax(0,…) et non « 1fr » seul : la valeur minimale par defaut d'une piste
   de grille est « auto », c'est-a-dire la largeur du contenu. Une photographie
   large ou un mot long y poussait sa colonne, les quatre pistes ne tenaient
   plus dans la ligne et la planche debordait. minmax(0,1fr) rend a chaque
   colonne le droit d'etre plus etroite que ce qu'elle contient ; min-width:0 et
   overflow:hidden font le meme travail pour les cellules elles-memes. */
.cc-cercle .spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);min-height:clamp(420px,46vw,580px);border-bottom:1px solid var(--hair);}
.cc-cercle .sp-img{position:relative;min-width:0;overflow:hidden;background:var(--noir-2);border-left:1px solid var(--hair);margin:0;}
.cc-cercle .sp-img:first-child{border-left:none;}
.cc-cercle .sp-img .ph{position:absolute;inset:0;width:100%;height:100%;}
.cc-cercle .sp-text{background:var(--noir-2);min-width:0;padding:clamp(30px,3vw,52px);display:flex;flex-direction:column;justify-content:center;gap:16px;border-left:1px solid var(--hair);}
.cc-cercle .sp-text h2{font-family:'Inter',sans-serif;font-weight:200;text-transform:uppercase;font-size:clamp(23px,2.3vw,34px);line-height:1.08;letter-spacing:0.005em;margin-top:6px;}
.cc-cercle .sp-text h2 em{font-style:italic;font-weight:200;color:var(--flash);}
.cc-cercle .sp-q{font-family:'Inter',sans-serif;font-style:italic;font-weight:300;font-size:clamp(15px,1.2vw,18px);color:var(--tx-2);}
.cc-cercle .sp-lead{font-family:'Inter',sans-serif;font-weight:300;font-size:14px;line-height:1.64;color:var(--tx-2);max-width:40ch;}
.cc-cercle .sp-date{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--tx-3);margin-top:4px;}
@media(max-width:900px){.cc-cercle .spread{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.cc-cercle .sp-text{grid-column:1/-1;border-left:none;border-top:1px solid var(--hair);}.cc-cercle .sp-img:nth-child(3){border-left:none;}}

/* =========================================================
   PROGRAMME : carte de soiree, en mode menu
   ========================================================= */
.cc-cercle .programme{background:var(--noir-2);border-bottom:1px solid var(--hair);}
.cc-cercle .programme-head{max-width:640px;margin:0 auto;text-align:center;}
.cc-cercle .menu-list{margin:clamp(36px,4.2vw,58px) auto 0;max-width:620px;}
.cc-cercle .menu-item{padding:clamp(22px,2.4vw,32px) 0;border-top:1px solid var(--hair);text-align:center;}
.cc-cercle .menu-list .menu-item:last-child{border-bottom:1px solid var(--hair);}
.cc-cercle .mi-no{font-family:'Space Mono',monospace;font-weight:700;font-size:15px;letter-spacing:0.08em;color:var(--plasma);}
.cc-cercle .menu-item h3{font-family:'Inter',sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:0.03em;font-size:clamp(19px,2.1vw,28px);margin-top:6px;}
.cc-cercle .menu-item p{margin-top:10px;font-family:'Inter',sans-serif;font-weight:300;font-style:italic;font-size:14.5px;line-height:1.5;color:var(--tx-2);max-width:46ch;margin-left:auto;margin-right:auto;}

/* =========================================================
   INVITE : tirage limite, section edito claire
   ========================================================= */
.cc-cercle .invite{border-top:1px solid var(--hair);}
.cc-cercle .invite-top{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2.6vw,32px);padding-bottom:clamp(40px,5vw,72px);border-bottom:1px solid var(--hair);}
.cc-cercle .invite-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(36px,5.5vw,84px);align-items:start;padding-top:clamp(40px,5vw,72px);}
.cc-cercle .invite-photo{position:relative;aspect-ratio:16/10;background:rgba(14,12,10,0.06);border:1px solid var(--hair);margin:clamp(26px,3vw,42px) 0 0;}
.cc-cercle .invite-photo .ph{position:absolute;inset:0;width:100%;height:100%;}
/* .paper renverse le contraste : les variables sont redefinies sur la
   section, jamais sur :root — le reste de la page reste sombre. */
.cc-cercle .paper{background:#F4F0E8;--tx:#0E0C0A;--tx-2:rgba(14,12,10,0.66);--tx-3:rgba(14,12,10,0.45);--tx-4:rgba(14,12,10,0.14);--hair:rgba(14,12,10,0.14);--hair-2:rgba(14,12,10,0.24);--flash:#0E0C0A;color:var(--tx);}
.cc-cercle .paper .btn{background:#0E0C0A;color:#F4F0E8;border-color:#0E0C0A;}
.cc-cercle .paper .btn-ghost{background:transparent;color:#0E0C0A;border-color:rgba(14,12,10,0.32);}
.cc-cercle .paper .btn-ghost:hover{background:#0E0C0A;color:#F4F0E8;border-color:#0E0C0A;}
@media(max-width:900px){.cc-cercle .invite-grid{grid-template-columns:1fr;gap:34px;}}
.cc-cercle .invite-h{font-family:'Inter',sans-serif;font-weight:200;font-size:clamp(30px,4.6vw,60px);line-height:1.05;letter-spacing:0.005em;text-transform:uppercase;max-width:24ch;}
.cc-cercle .invite-h em{font-style:italic;font-weight:200;color:var(--flash);}
.cc-cercle .invite-p{margin-top:0;font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(15px,1.3vw,17.5px);line-height:1.64;color:var(--tx-2);max-width:52ch;}
/* La maquette ne decrit pas .invite-text : c'est une cellule de grille dont
   les deux enfants s'empilent. La regle ne fait que le rendre explicite. */
.cc-cercle .invite-text{display:flex;flex-direction:column;}
.cc-cercle .invite-reasons{display:flex;flex-direction:column;}
.cc-cercle .invite-reasons .row{display:flex;gap:18px;align-items:baseline;padding:20px 0;border-top:1px solid var(--hair);}
.cc-cercle .invite-reasons .row:last-child{border-bottom:1px solid var(--hair);}
.cc-cercle .invite-reasons .no{font-family:'Space Mono',monospace;color:var(--plasma);font-size:13px;flex-shrink:0;}
.cc-cercle .invite-reasons p{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(15px,1.4vw,18px);line-height:1.4;color:var(--tx);}

/* =========================================================
   BEHIND : derriere le cercle
   ========================================================= */
.cc-cercle .behind{background:var(--noir-2);border-top:1px solid var(--hair);}
.cc-cercle .behind .kicker{margin-bottom:32px;}
/* collision .quote — bnd-site.css en fait une carte de temoignage :
     display:flex; flex-direction:column;
     background:var(--card)      -> #F6F1E6, creme
     border-radius:var(--r-lg)   -> 26px
     padding:34px 32px
   Ici, .quote est une simple citation composee en tres grand sur le fond
   sombre : les cinq proprietes sont ramenees a leur valeur initiale.
   flex-direction devient sans effet des lors que la boite est un bloc.
   Le margin-top:22px vient de l'attribut style= de la maquette. */
.cc-cercle .behind .quote{display:block;background:none;border-radius:0;padding:0;margin-top:22px;font-family:'Inter',sans-serif;font-weight:200;letter-spacing:0.005em;line-height:1.14;font-size:clamp(26px,3.8vw,50px);max-width:22ch;text-transform:uppercase;}
/* collision .quote p — le champ de citation accepte du HTML. Si un
   paragraphe y est saisi, bnd-site.css lui poserait color:var(--ink),
   c'est-a-dire de l'encre bleu nuit sur fond noir. */
.cc-cercle .behind .quote p{font-size:inherit;line-height:inherit;color:inherit;flex:none;}
.cc-cercle .behind .quote b{color:var(--flash);font-weight:500;font-style:normal;}
.cc-cercle .behind .body{margin-top:32px;max-width:52ch;font-family:'Inter',sans-serif;font-size:16px;font-weight:300;line-height:1.66;color:var(--tx-2);}
.cc-cercle .behind-logos{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--hair);padding-top:34px;}
.cc-cercle .behind-logos .l{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--tx-3);margin-bottom:20px;}
/* Les references sont passees de quatre a dix. En ligne libre elles
   composaient trois rangs bancals, du plus long au plus court ; la grille les
   aligne cinq par cinq, sur deux rangs egaux. Le corps baisse en consequence :
   dix noms au corps de quatre auraient occupe plus de place que la citation
   qu'ils accompagnent. align-items:baseline et non center : ce sont des mots,
   ce sont leurs lignes de base qui doivent s'aligner. */
.cc-cercle .behind-logos .names{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(20px,3vw,44px);row-gap:clamp(16px,2vw,28px);align-items:baseline;}
@media(max-width:860px){.cc-cercle .behind-logos .names{grid-template-columns:repeat(2,minmax(0,1fr));}}
.cc-cercle .behind-logos .names span{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(17px,1.9vw,26px);letter-spacing:0.01em;color:var(--tx-3);transition:color .25s;}
.cc-cercle .behind-logos .names span:hover{color:var(--tx);}

/* =========================================================
   CADENCE : les premiers noms
   ========================================================= */
.cc-cercle .cadence{background:var(--noir);border-top:1px solid var(--hair);}
/* collision .sec-head — bnd-site.css en fait une grille a deux colonnes,
   avec align-items:end et une marge basse plus courte. align-items:end
   fuyait : dans une colonne flex, l'axe transversal est horizontal, et le
   kicker, le titre et le chapo partaient se coller a droite. */
.cc-cercle .cadence .sec-head{display:flex;flex-direction:column;grid-template-columns:none;align-items:stretch;gap:20px;margin-bottom:clamp(40px,5vw,64px);}
.cc-cercle .cadence h2{font-family:'Inter',sans-serif;font-weight:200;letter-spacing:0.005em;line-height:1.1;font-size:clamp(28px,4.2vw,54px);max-width:20ch;text-transform:uppercase;}
.cc-cercle .cadence h2 em{color:var(--flash);font-style:italic;}
/* collision .sec-head .lead — bnd-site.css y ajoute margin-top:22px, qui
   s'ajoutait au gap de 20px de la colonne. */
.cc-cercle .cadence .lead{max-width:48ch;margin-top:0;}
.cc-cercle .lineup{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,58px);}
@media(max-width:860px){.cc-cercle .lineup{grid-template-columns:1fr;gap:38px;}}
/* La maquette ne decrit pas .lu-col : cellule de grille, comme .invite-text.
   Le compteur, lui, vient d'elle : chaque colonne repart de 01. */
.cc-cercle .lu-col{display:flex;flex-direction:column;counter-reset:lu;}
.cc-cercle .lu-h{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--plasma);padding-bottom:16px;border-bottom:1px solid var(--hair-2);}
/* Les avatars ont disparu de la maquette : les logos de marques et les
   portraits de createurs sont remplaces par une numerotation, et les regles
   .lu-av, .lu-q et .lu-locked qui les habillaient sont retirees avec eux.
   Le numero est un compteur CSS et non un champ : il dit le rang de la ligne
   dans sa colonne, ce qu'aucune saisie n'a a decider — et une ligne retiree
   depuis l'administration ne laisse donc pas de trou dans la serie.
   align-items:baseline aligne le chiffre sur la premiere ligne du nom. */
.cc-cercle .lu-row{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid var(--hair);counter-increment:lu;}
.cc-cercle .lu-row::before{content:counter(lu,decimal-leading-zero);font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:0.06em;color:var(--plasma);flex:0 0 auto;}
/* min-width:0 : sans lui, un nom long refuse de se couper et deborde de la
   colonne, la base d'un element flex etant sa largeur de contenu. */
.cc-cercle .lu-t{min-width:0;}
.cc-cercle .lu-n{font-family:'Inter',sans-serif;font-weight:400;font-size:16px;letter-spacing:0.01em;color:var(--tx);line-height:1.2;}
.cc-cercle .lu-r{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--tx-3);margin-top:6px;}
/* Une colonne qui n'a encore rien a annoncer : une seule ligne en italique,
   au lieu d'une liste de noms-gabarits qui se lisait comme des annonces
   faites. */
.cc-cercle .lu-soon{font-family:'Inter',sans-serif;font-weight:300;font-style:italic;font-size:16px;color:var(--tx-3);padding:15px 0;border-bottom:1px solid var(--hair);}
.cc-cercle .lu-more{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--tx-3);padding-top:18px;}
.cc-cercle .cadence-foot{margin-top:32px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--tx-3);}

/* =========================================================
   GUEST QUOTE + LIST
   ========================================================= */
.cc-cercle .guest{background:var(--noir);border-top:1px solid var(--hair);}
.cc-cercle .guest-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(30px,4.5vw,72px);align-items:start;}
.cc-cercle .g-left{display:flex;flex-direction:column;gap:clamp(28px,3.4vw,48px);}
.cc-cercle .g-quote{display:flex;flex-direction:column;justify-content:center;gap:16px;}
.cc-cercle .q-mark{font-family:'Inter',sans-serif;font-weight:300;color:var(--plasma);font-size:60px;line-height:0.4;height:32px;}
.cc-cercle .g-quote-t{font-family:'Inter',sans-serif;font-weight:200;text-transform:uppercase;font-size:clamp(21px,2.2vw,30px);line-height:1.22;letter-spacing:0.005em;}
.cc-cercle .g-quote-a{font-family:'Inter',sans-serif;font-weight:300;text-transform:uppercase;font-size:clamp(16px,1.7vw,22px);letter-spacing:0.02em;color:var(--plasma);}
.cc-cercle .g-img{position:relative;aspect-ratio:16/10;background:var(--noir);border:1px solid var(--hair);margin:0;}
.cc-cercle .g-img .ph{position:absolute;inset:0;width:100%;height:100%;}
.cc-cercle .g-form{border:1px solid var(--hair-2);padding:clamp(26px,3vw,42px);display:flex;flex-direction:column;gap:15px;justify-content:center;}
.cc-cercle .g-form h2{font-family:'Inter',sans-serif;font-weight:200;text-transform:uppercase;font-size:clamp(24px,2.5vw,38px);line-height:1.05;letter-spacing:0.005em;}
.cc-cercle .g-form > p{font-family:'Inter',sans-serif;font-weight:300;font-size:14px;line-height:1.6;color:var(--tx-2);}
@media(max-width:900px){.cc-cercle .guest-grid{grid-template-columns:1fr;gap:36px;}}

/* ---------- formulaire de liste d'attente ----------
   La maquette simulait les boutons radio avec des <button role="radio">
   pilotes en JavaScript : inutilisables sans script, et annonces comme de
   simples boutons par les lecteurs d'ecran. Le gabarit pose de vrais
   <input type="radio"> dans un <fieldset>. Les classes de la maquette sont
   conservees : seule la mecanique change. */
.cc-cercle .g-fields{display:flex;flex-direction:column;gap:18px;margin-top:6px;}
.cc-cercle .g-row{display:flex;flex-wrap:wrap;gap:14px;}
/* Le flex-basis n'est pose que dans .g-row : .g-fields empile ses enfants en
   colonne, ou une base de 190px se lirait comme une hauteur. border, padding
   et margin sont remis a zero pour le <fieldset> du groupe de roles, seul
   .g-field qui ne soit pas un <p>. */
.cc-cercle .g-field{display:flex;flex-direction:column;gap:7px;min-width:0;border:none;padding:0;margin:0;}
.cc-cercle .g-row .g-field{flex:1 1 190px;}
.cc-cercle .g-field label,.cc-cercle .g-field legend{font-family:'Space Mono',monospace;font-size:10px;font-weight:400;letter-spacing:0.08em;text-transform:uppercase;color:var(--tx-3);padding:0;}
/* collision .form-opt — bnd-forms.css pose font-weight:400,
   text-transform:none, letter-spacing et color:var(--d-3). La mention
   « (optionnel) » fait partie de l'etiquette : elle en reprend la couleur,
   au lieu de var(--tx-4), reserve aux filets et aux chiffres fantomes. */
.cc-cercle .g-field .form-opt{font-weight:400;text-transform:none;letter-spacing:0.02em;color:var(--tx-3);}
.cc-cercle .g-field input[type="text"],
.cc-cercle .g-field input[type="email"]{background:transparent;border:none;border-bottom:1px solid var(--hair-2);border-radius:0;padding:8px 2px;color:var(--tx);font-family:'Inter',sans-serif;font-weight:300;font-size:14.5px;letter-spacing:0.005em;outline:none;transition:border-color .2s;}
.cc-cercle .g-field input::placeholder{color:var(--tx-3);}
.cc-cercle .g-field input:focus-visible{border-bottom-color:var(--plasma);outline:1px solid var(--plasma);outline-offset:4px;}
.cc-cercle .g-field input[aria-invalid="true"]{border-bottom-color:var(--plasma);}

/* groupe de roles : le <input> couvre la pastille et reste focalisable au
   clavier ; il n'est jamais retire du flux d'accessibilite (pas de
   display:none), seulement rendu transparent. */
.cc-cercle .g-role{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
.cc-cercle .g-pill{position:relative;display:inline-flex;}
.cc-cercle .g-pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.cc-cercle .g-pill-t{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.02em;padding:9px 15px;border:1px solid var(--hair-2);color:var(--tx-2);transition:background .18s,border-color .18s,color .18s;}
.cc-cercle .g-pill:hover .g-pill-t{border-color:var(--flash);}
.cc-cercle .g-pill input:checked + .g-pill-t{background:var(--plasma);border-color:var(--plasma);color:var(--flash);}
.cc-cercle .g-pill input:focus-visible + .g-pill-t{outline:2px solid var(--plasma);outline-offset:3px;}

.cc-cercle .g-consent{display:flex;gap:10px;align-items:flex-start;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.01em;line-height:1.5;color:var(--tx-3);cursor:pointer;}
.cc-cercle .g-consent input{margin-top:3px;accent-color:var(--plasma);flex-shrink:0;}

/* ---------- zone de statut, erreurs, pied du formulaire ----------
   La maquette ne decrit aucun de ces elements : ils viennent du moteur de
   formulaires du theme et sont habilles par assets/bnd-forms.css, ecrite
   pour un fond sombre — ce qui convient a cette page. Toutes les proprietes
   que cette feuille pose sont redeclarees ici, avec les accents du cercle :
   le jaune BND de l'etat « ok » n'appartient pas a cet univers. */
.cc-cercle .form-status[data-tone]{display:block;border:1px solid var(--hair-2);border-radius:0;padding:14px 16px;margin-bottom:0;font-family:'Inter',sans-serif;font-size:14px;line-height:1.5;color:var(--tx);}
.cc-cercle .form-status[data-tone='ok']{border-color:var(--flash);background:rgba(244,240,232,0.08);}
.cc-cercle .form-status[data-tone='error']{border-color:var(--plasma);background:rgba(222,10,118,0.12);}
/* collision .form-error — bnd-forms.css pose font-size:13px,
   line-height:1.45, font-weight:600 et color:var(--plasma), ce dernier
   valant #FF2E63 hors du conteneur. La variante claire du rose du cercle
   tient 5,5:1 sur le noir. */
.cc-cercle .form-error{font-family:'Inter',sans-serif;font-size:13px;line-height:1.45;font-weight:600;color:var(--plasma-soft);}
/* collision .form-actions — bnd-forms.css pose margin-top:28px, display,
   flex-wrap:wrap, align-items:center et gap:18px. Le bouton et la mention
   legale s'empilent ici, ou flex-wrap n'a plus de sens. */
.cc-cercle .form-actions{margin-top:6px;display:flex;flex-direction:column;flex-wrap:nowrap;gap:14px;align-items:flex-start;}
/* collision .form-legal — bnd-forms.css pose font-size, line-height,
   color:var(--d-3) et max-width : les quatre sont redeclarees. */
.cc-cercle .form-legal{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.04em;line-height:1.55;color:var(--tx-3);max-width:40ch;}
/* .form-trap est repris tel quel de bnd-forms.css : le champ leurre doit
   precisement sortir du flux sans porter de display:none. */
@media(max-width:480px){.cc-cercle .g-row{flex-direction:column;gap:18px;}}

/* Etat de succes. La maquette le pilotait en JavaScript ; il vient ici des
   deux chemins du moteur du theme : la classe .sent posee sur le formulaire
   par assets/bnd-site.js, et l'attribut data-sent pose par le gabarit quand
   la soumission s'est faite sans JavaScript. */
.cc-cercle .wl-success{display:none;flex-direction:column;align-items:center;gap:14px;padding:32px;border:1px solid var(--plasma);background:rgba(222,10,118,0.08);}
.cc-cercle .g-fields.sent{display:none;}
.cc-cercle .g-fields.sent + .wl-success,
.cc-cercle .wl-success[data-sent]{display:flex;}
.cc-cercle .wl-success .chk{width:44px;height:44px;border-radius:50%;background:var(--plasma);color:var(--flash);display:flex;align-items:center;justify-content:center;font-weight:400;font-size:19px;}
.cc-cercle .wl-success .t{font-family:'Inter',sans-serif;font-weight:300;font-size:24px;letter-spacing:-0.01em;}
.cc-cercle .wl-success .d{font-family:'Inter',sans-serif;font-weight:300;font-size:13.5px;color:var(--tx-2);line-height:1.6;max-width:42ch;text-align:center;}

/* =========================================================
   FAQ
   ========================================================= */
.cc-cercle .faq{background:var(--noir-2);border-top:1px solid var(--hair);}
.cc-cercle .faq-list{margin-top:clamp(32px,3.6vw,50px);max-width:840px;}
.cc-cercle .faq-item{border-top:1px solid var(--hair);}
.cc-cercle .faq-list .faq-item:last-child{border-bottom:1px solid var(--hair);}
.cc-cercle .faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(15px,1.5vw,19px);color:var(--tx);}
.cc-cercle .faq-item summary::-webkit-details-marker{display:none;}
.cc-cercle .faq-item summary .plus{font-family:'Space Mono',monospace;font-size:16px;color:var(--plasma);transition:transform .2s;flex-shrink:0;}
.cc-cercle .faq-item[open] summary .plus{transform:rotate(45deg);}
.cc-cercle .faq-item .a{padding:0 0 24px;max-width:64ch;font-family:'Inter',sans-serif;font-weight:300;font-size:14.5px;line-height:1.64;color:var(--tx-2);}

/* =========================================================
   PIED DE PAGE

   Reprise du bloc <footer> de la maquette, rendu par footer-cercle.php dans
   sa propre enveloppe .cc-cercle — le conteneur de la page borne les trois
   calques d'atmosphere, et l'etendre au pied leur rendrait la liberte qu'on
   leur a retiree.

   Quatre des huit selecteurs de ce bloc portent un nom que assets/bnd-site.css
   emploie deja pour le pied de l'accueil. Chaque propriete que cette feuille y
   pose est redeclaree ci-dessous, y compris celles que la maquette laisse par
   defaut : une regle plus specifique ne remplace QUE ce qu'elle declare.
   ========================================================= */

/* collision footer — bnd-site.css pose background:var(--cobalt) (bleu nuit),
   color:var(--d-tx) (creme), padding-top:76px et padding-bottom:44px. Les
   quatre sont redeclarees : la maquette du cercle ne pose que le fond, et ses
   respirations viennent de .foot et de .foot-copy, pas du <footer>. */
.cc-cercle footer{background:var(--noir);color:var(--tx);padding-top:0;padding-bottom:0;}

/* collision .foot — bnd-site.css pose margin-top:40px sous « .manifesto .foot »,
   qui n'atteindrait ce pied qu'a la faveur d'un .manifesto ancetre. Le
   raccourci margin:0 auto de la maquette, repris tel quel, le couvre. */
.cc-cercle .foot{padding:44px var(--pad);border-top:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;max-width:var(--maxw);margin:0 auto;}

/* collision .foot-brand — la feuille du site ne pose rien sur la classe
   elle-meme, mais deux de ses descendants ont des regles. .big-logo n'existe
   pas dans ce pied ; le <p>, si : le champ ACF de la signature passe par
   wp_kses_post et peut donc contenir un paragraphe. Les cinq proprietes de
   « .foot-brand p » — font-size:14px, color:var(--d-2), margin-top:20px,
   line-height:1.6 et max-width:34ch — sont ramenees a l'heritage de .fb-tag,
   qui est le seul habillage que la maquette prevoit pour ce texte. */
.cc-cercle .foot-brand{display:flex;align-items:center;gap:18px;}
.cc-cercle .foot-brand p{font-size:inherit;color:inherit;margin-top:0;line-height:inherit;max-width:none;}

.cc-cercle .fb-logo{font-family:'Inter',sans-serif;font-weight:200;font-size:24px;letter-spacing:0.03em;}

/* collision .dot — bnd-site.css pose color:var(--plasma), qui vaut #FF2E63
   hors du conteneur. La variable est bien redefinie sur .cc-cercle, mais la
   regle est redeclaree ici pour que le point du logo tienne de lui-meme et
   non de la seule cascade des variables. */
.cc-cercle .dot{color:var(--plasma);}

.cc-cercle .fb-tag{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--tx-3);border-left:1px solid var(--hair);padding-left:16px;line-height:1.5;}

/* .fr, .fb-logo, .fb-tag et .foot-copy n'existent nulle part dans les quatre
   feuilles du site : ils sont repris mot pour mot de la maquette. */
.cc-cercle .fr{display:flex;gap:22px;flex-wrap:wrap;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--tx-3);}
.cc-cercle .fr a:hover{color:var(--plasma);}
.cc-cercle .foot-copy{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 40px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--tx-3);}
/* ---------- le pied sur un telephone ----------

   Le pied de la maquette est une ligne : monogramme a gauche, deux groupes de
   liens a droite, le tout en Space Mono de 10,5 px, capitales, approche large.
   Cette composition tient parce qu'elle est LARGE — l'approche donne de l'air
   quand la ligne en a.

   Repliee sur un telephone, elle produit exactement l'inverse : quatre liens
   capitales serres les uns contre les autres sur deux rangs, une adresse
   e-mail de trente-huit caracteres qui deborde, et trois blocs sans hierarchie
   visible. On ne lit plus une navigation, on dechiffre un bloc de texte.

   Le pied change donc de forme, plutot que de taille. Les liens passent en
   listes verticales, un par ligne, avec des cibles a la taille du pouce et un
   filet qui les separe. L'approche se resserre et le corps monte legerement :
   la lisibilite ne vient pas de la meme chose sur un ecran de 390 px que sur
   un de 1600. Les trois groupes se detachent par un filet, faute de quoi ils
   se lisent comme une seule colonne. */
@media(max-width:640px){
  .cc-cercle .foot{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding-top:32px;
    padding-bottom:8px;
  }

  /* Le monogramme et la signature s'empilent : cote a cote, le filet vertical
     comprimait la signature au point de la couper en quatre lignes. */
  .cc-cercle .foot-brand{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding-bottom:26px;
  }

  .cc-cercle .fb-tag{
    border-left:none;
    padding-left:0;
    font-size:10px;
    line-height:1.6;
  }

  /* Une liste, pas une ligne qui se replie. */
  .cc-cercle .fr{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:8px 0;
    border-top:1px solid var(--hair);
    font-size:11px;
    letter-spacing:0.04em;
  }

  .cc-cercle .fr a{
    padding:13px 0;
    /* Une adresse e-mail de trente-huit caracteres ne se coupe pas toute
       seule : sans cela elle poussait le pied hors de l'ecran. */
    overflow-wrap:anywhere;
  }

  .cc-cercle .foot-copy{
    padding-top:20px;
    padding-bottom:32px;
    border-top:1px solid var(--hair);
    font-size:10px;
  }
}

/* Mention de confidentialite sous le formulaire de la guest list. Meme role
   que .cf-privacy sur l'accueil : elle informe au moment de la collecte, elle
   ne se coche pas. */
.cc-cercle .g-privacy{margin-top:2px;font-family:'Inter',sans-serif;font-weight:300;font-size:11.5px;line-height:1.55;color:var(--tx-3);max-width:44ch;}
.cc-cercle .g-privacy a{color:var(--tx-2);text-decoration:underline;text-underline-offset:3px;}
.cc-cercle .g-privacy a:hover{color:var(--plasma);}
