/* =====================================================================
   pop-eyes.fr — feuille de style commune
   Règles de mise en page : voir REGLES_mise-en-page_site.md.
   Toute page du site charge ce fichier ; ce qui lui est propre reste
   dans la page elle-même.
   ===================================================================== */

@font-face { font-family:'Spectral'; src:url('/fonts/spectral-300.woff2') format('woff2');
             font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Spectral'; src:url('/fonts/spectral-400.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Spectral'; src:url('/fonts/spectral-400-italic.woff2') format('woff2');
             font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Spectral'; src:url('/fonts/spectral-600.woff2') format('woff2');
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Jost'; src:url('/fonts/jost-400.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Phonetique'; src:url('/fonts/phonetique-400.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; size-adjust:99.1%; }

:root { --ikb:#2D20D2; --gris:#8a8a8a; --gris-noir:#9a9a9a; --filet:#e6e6e6;
        --filet-noir:#333; --encre:#111; --alerte:#B3261E;
        /* Zones sûres de l'iPhone (caméra / Dynamic Island, barre d'accueil). Les pages
           déclarent viewport-fit=cover : le noir va jusqu'au bord, mais rien d'écrit ne
           doit passer dessous. Sur ordinateur, ces valeurs valent 0 : rien ne change. */
        --zh:env(safe-area-inset-top,0px);
        --zg:calc(env(safe-area-inset-left,0px) + 8px);
        --zd:calc(env(safe-area-inset-right,0px) + 8px);
        --zb:env(safe-area-inset-bottom,0px); }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:#fff; color:var(--encre); font-family:'Spectral',Georgia,serif;
       font-weight:300; line-height:1.5; -webkit-font-smoothing:antialiased; }
h1 { font-family:'Jost',Helvetica,Arial,sans-serif; font-weight:400; line-height:1.12;
     letter-spacing:.01em; margin:0; }
h2, .titre { display:block; font-family:'Jost',Helvetica,Arial,sans-serif; font-weight:400;
             font-size:clamp(18px,3.8vw,21px); letter-spacing:.14em; text-transform:uppercase;
             line-height:1.2; margin:0 0 .55em; }

/* ---- couleur : noir, blanc, gris au repos ; le bleu se découvre au survol ---- */
a { color:inherit; text-decoration:none; border-bottom:1px solid var(--filet); padding-bottom:1px;
    transition:color .15s, border-color .15s, background-color .15s; }
a:hover, a:focus-visible { color:var(--ikb); border-color:var(--ikb); }
:focus-visible { outline:2px solid var(--encre); outline-offset:3px; }
.cta { display:inline-block; border:0; background:var(--encre); color:#fff; cursor:pointer;
       font-family:'Jost',Helvetica,Arial,sans-serif; font-size:12px; letter-spacing:.26em;
       text-transform:uppercase; padding:16px 26px 15px 30px; }
.cta:hover, .cta:focus-visible { background:var(--ikb); color:#fff; }
.cta[disabled] { background:var(--gris); cursor:wait; }

/* dans le noir : texte gris → blanc, filet → bleu ; bouton blanc → bleu */
.noir a { color:var(--gris-noir); border-color:var(--filet-noir); }
.noir a:hover, .noir a:focus-visible { color:#fff; border-color:var(--ikb); }
.noir :focus-visible { outline-color:#fff; }
.noir .cta { background:#fff; color:var(--encre); border:0; }
.noir .cta:hover, .noir .cta:focus-visible { background:var(--ikb); color:#fff; }

/* ---- ossature ---- */
.cadre { display:grid; grid-template-columns:minmax(0,34fr) minmax(0,66fr); min-height:100vh; }
.appui { background:var(--encre); color:#fff;
         padding:calc(var(--zh) + clamp(28px,4vw,56px)) max(clamp(22px,3vw,48px), var(--zd))
                 clamp(28px,4vw,56px) max(clamp(22px,3vw,48px), var(--zg)); }
/* La colonne reste en vue pendant la lecture. Elle a trois étages :
   le logo, fixe en haut ; le contenu, qui défile pour lui-même s'il est plus
   haut que l'écran ; une petite barre de liens, fixe en bas. */
.colle { position:sticky; top:clamp(28px,4vw,56px); display:flex; flex-direction:column;
         height:calc(100vh - 2 * clamp(28px,4vw,56px)); }
.defile { flex:1 1 auto; min-height:0; overflow-y:auto;
          scrollbar-width:thin; scrollbar-color:#333 transparent; }
/* L'écart sous le logo appartient à la colonne, pas au contenu qui défile :
   ce qui défile passe toujours sous une marge nette, jamais collé au logo. */
.colle > .defile { margin-top:calc(clamp(26px,3vw,38px) - .042 * clamp(200px,20vw,300px)); }
/* Écart logo → texte du noir (deux colonnes) : resserré de .042 × la largeur du logo, soit
   1,6 fois la hauteur des capitales (nombre d'or) entre le pied des lettres et le haut des
   minuscules du texte. Il suit la taille du logo. Empilé : voir plus bas (22 px). */
.defile > .sous-logo:first-child { margin-top:0; }
.lg { height:auto; display:block; flex:0 0 auto; }
.appui .lg { width:clamp(200px,20vw,300px); }
.sous-logo { margin-top:clamp(26px,3vw,38px); }
.contenu { padding:clamp(28px,4vw,56px) max(clamp(22px,4vw,72px), var(--zd))
                   calc(var(--zb) + clamp(44px,6vw,80px)) max(clamp(22px,4vw,72px), var(--zg)); max-width:44rem; }
.liens { list-style:none; padding:14px 0 0; margin:18px 0 0; flex:0 0 auto;
         border-top:1px solid var(--filet-noir);
         display:flex; flex-direction:row; justify-content:space-between; gap:18px; }
.liens a, .liens-barre a { font-family:'Jost',Helvetica,Arial,sans-serif; font-size:11px;
                           letter-spacing:.16em; text-transform:uppercase; }
.repere { display:inline-block; width:0; height:0; vertical-align:baseline; }

/* ---- barre du bas : n'existe que dans la mise en page empilée ---- */
.barre { display:none; }

/* Mise en page empilée : téléphone en hauteur, mais aussi toute fenêtre trop
   basse pour la colonne (téléphone à l'horizontale). Même condition dans site.js. */
@media (max-width:900px), (max-height:560px) {
  .cadre { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .colle { position:static; height:auto; }
  .defile { overflow:visible; }
  .appui { padding:calc(var(--zh) + clamp(24px,6.5vw,36px)) max(clamp(22px,6vw,36px), var(--zd))
                   clamp(26px,6.5vw,38px) max(clamp(22px,6vw,36px), var(--zg)); }
  .appui .lg { width:clamp(190px,52vw,250px); }
  .sous-logo { margin-top:22px; }
  .colle > .defile { margin-top:22px; }
  .liens { display:none; }
  .contenu { padding-bottom:calc(var(--zb) + 96px); }
  .barre { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:5; align-items:center;
           justify-content:space-between; gap:14px; background:var(--encre);
           padding:12px max(18px, var(--zd)) calc(12px + var(--zb)) max(18px, var(--zg));
           transform:translateY(110%); transition:transform .25s ease; }
  .barre.visible { transform:none; }
  .liens-barre { display:flex; gap:22px; }
  .barre .cta { padding:12px 16px 11px 19px; font-size:11px; }
}