:root{
    --noir:#070a0f;
    --noir-2:#090d14;
    --or-clair:#f6e3aa;
    --or:#d9ab52;
    --texte:#e8edf4;
    --texte-doux:#8b97a8;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{
    background:var(--noir);color:var(--texte);
    font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
    overflow-x:hidden;
  }
  .phrase{display:block;text-wrap:balance}
  .entete-section p{text-wrap:balance}

  /* ---------- marque ---------- */
  .marque{display:flex;align-items:center;gap:13px}
  .sceau{
    width:44px;height:44px;border-radius:50%;flex:none;
    border:1px solid rgba(217,171,82,.5);
    background:radial-gradient(circle at 32% 26%,#131922 0%,#070a0f 72%);
    display:grid;place-items:center;
  }
  .phenix{
    display:block;width:22px;height:32px;
    background:linear-gradient(155deg,#fdf3d2 0%,var(--or) 55%,#8a6420 100%);
    -webkit-mask:var(--phenix) center / contain no-repeat;
    mask:var(--phenix) center / contain no-repeat;
  }
  .marque b{font:700 16px/1 "Segoe UI",sans-serif;letter-spacing:3.4px;text-transform:uppercase}
  .marque b em{font:italic 400 17px/1 Georgia,serif;letter-spacing:0;text-transform:none;margin-right:1px}
  .marque i{display:block;font:italic 11px/1.4 Georgia,serif;color:var(--texte-doux);letter-spacing:.6px;margin-top:5px}
  .marque i strong{
    font:italic 400 21px/1 Georgia,serif;letter-spacing:.3px;
    background:linear-gradient(100deg,#fdf3d2,var(--or) 52%,#a5762a);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }

  header{
    display:flex;align-items:center;justify-content:space-between;
    padding:26px clamp(28px,5vw,80px);position:relative;z-index:5;
  }
  nav{display:flex;align-items:center;gap:34px}
  nav a{
    color:rgba(232,237,244,.75);text-decoration:none;
    font-size:12.5px;letter-spacing:2.4px;text-transform:uppercase;
    padding:6px 0;position:relative;transition:color .25s ease;
  }
  nav a::after{
    content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
    background:linear-gradient(90deg,var(--or-clair),#8a6420);transition:right .3s ease;
  }
  nav a:hover{color:#fff}
  nav a:hover::after{right:0}
  .cta-nav{
    padding:10px 22px;border:1px solid rgba(217,171,82,.5);border-radius:2px;
    color:var(--or-clair);font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;
    text-decoration:none;transition:all .25s ease;
  }
  .cta-nav:hover{background:rgba(217,171,82,.12);border-color:var(--or)}

  /* ---------- le numero en vedette ---------- */
  .vedette{
    position:relative;overflow:hidden;
    padding:clamp(20px,3vw,40px) clamp(28px,5vw,80px) clamp(76px,8vw,110px);
  }
  .vedette::before{
    content:"";position:absolute;left:50%;top:-30%;transform:translateX(-50%);
    width:min(1100px,120%);height:130%;pointer-events:none;
    background:radial-gradient(ellipse at center,rgba(217,171,82,.12),transparent 64%);
  }
  .bloc-vedette{
    position:relative;max-width:1180px;margin:0 auto;
    display:grid;gap:clamp(34px,5vw,68px);
    grid-template-columns:1fr minmax(min(100%,300px),380px);
    align-items:center;
  }
  .fanion{
    display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
    padding:7px 16px;border-radius:999px;
    border:1px solid rgba(217,171,82,.42);background:rgba(217,171,82,.09);
    font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--or-clair);
  }
  h1{
    font:400 clamp(30px,4.4vw,54px)/1.1 Georgia,"Times New Roman",serif;
    letter-spacing:-.6px;margin-bottom:16px;max-width:640px;
  }
  h1 em{
    font-style:italic;
    background:linear-gradient(100deg,#fdf3d2,var(--or) 55%,#a5762a);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .chapo{font-size:15.5px;line-height:1.74;color:var(--texte-doux);max-width:520px;margin-bottom:30px}
  .actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .bouton-or{
    display:inline-flex;align-items:center;gap:11px;
    padding:15px 30px;border:none;border-radius:999px;cursor:pointer;text-decoration:none;
    background:linear-gradient(120deg,#f9ecc2,var(--or) 42%,#a97e33 78%,#e0bb6b);
    color:#231806;font:600 13.5px/1 "Segoe UI",sans-serif;letter-spacing:1.2px;
    box-shadow:0 12px 30px rgba(180,132,45,.3);transition:transform .2s ease;
  }
  .bouton-or:hover{transform:translateY(-2px)}
  .bouton-or svg{width:15px;height:15px;fill:#231806}
  .bouton-vide{
    display:inline-flex;align-items:center;gap:14px;
    padding:15px 30px;border:1px solid rgba(217,171,82,.5);border-radius:999px;
    color:var(--or-clair);text-decoration:none;
    font-size:12px;letter-spacing:2.6px;text-transform:uppercase;transition:all .3s ease;
  }
  .bouton-vide:hover{background:rgba(217,171,82,.12);border-color:var(--or);color:#fff}

  .porte-couverture{position:relative}
  .porte-couverture::after{
    content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:40px;
    background:radial-gradient(ellipse at center,rgba(0,0,0,.7),transparent 72%);
  }
  .porte-couverture img{
    position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:3px;
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 34px 70px rgba(0,0,0,.62);
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .porte-couverture:hover img{transform:translateY(-6px)}
  @media(max-width:860px){.bloc-vedette{grid-template-columns:1fr}.porte-couverture{max-width:320px}}

  /* ---------- sections ---------- */
  section.bande{
    position:relative;z-index:2;
    padding:clamp(72px,8vw,116px) clamp(28px,5vw,80px);
    border-top:1px solid rgba(255,255,255,.06);
  }
  section.claire{background:linear-gradient(180deg,var(--noir-2) 0%,#080b11 100%)}
  section.sombre{background:var(--noir)}
  section.or{border-top-color:rgba(217,171,82,.14)}

  .entete-section{position:relative;max-width:1000px;margin:0 auto clamp(40px,5vw,60px);text-align:center}
  .surtitre{
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;
    font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--or);margin-bottom:20px;
  }
  .surtitre::before,.surtitre::after{content:"";width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--or))}
  .surtitre::after{background:linear-gradient(90deg,var(--or),transparent)}
  .entete-section h2{
    font:400 clamp(28px,3.6vw,45px)/1.18 Georgia,"Times New Roman",serif;
    letter-spacing:-.4px;margin-bottom:16px;
  }
  .entete-section h2 em{
    font-style:italic;
    background:linear-gradient(100deg,#fdf3d2,var(--or) 55%,#a5762a);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .entete-section p{font-size:15.5px;line-height:1.72;color:var(--texte-doux);max-width:580px;margin:0 auto}

  /* ---------- articles ---------- */
  .articles{
    display:grid;gap:20px;max-width:1180px;margin:0 auto;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  }
  .article{
    position:relative;overflow:hidden;display:flex;flex-direction:column;
    padding:0 26px 24px;text-decoration:none;color:inherit;
    border:1px solid rgba(255,255,255,.08);border-radius:3px;
    background:linear-gradient(150deg,rgba(255,255,255,.032),rgba(255,255,255,.006) 50%,transparent);
    transition:border-color .4s ease,transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .article::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;
    background:linear-gradient(90deg,var(--or-clair),var(--or) 40%,transparent);
    transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .article:hover{border-color:rgba(217,171,82,.34);transform:translateY(-5px)}
  .article:hover::after{transform:scaleX(1)}

  .vignette{position:relative;margin:0 -26px 20px;height:180px;overflow:hidden;background:#05070b}
  .vignette img{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:saturate(.6) brightness(.62) contrast(1.05) sepia(.16);
    transform:scale(1.02);
    transition:filter .55s ease,transform .8s cubic-bezier(.2,.8,.2,1);
  }
  .article:hover .vignette img,.marque-carte:hover .vignette img{filter:saturate(1) brightness(.9) contrast(1.02) sepia(0);transform:scale(1.07)}
  .vignette::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(9,13,20,.25) 0%,rgba(9,13,20,.08) 34%,rgba(9,13,20,.74) 76%,#0a0e15 100%);
  }
  .duree{position:absolute;right:26px;bottom:18px;z-index:2;font-size:11.5px;letter-spacing:1.4px;color:#c3cbd8}
  .meta{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:13px}
  .meta span{
    padding:4px 11px;border:1px solid rgba(255,255,255,.12);border-radius:999px;
    font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:#98a4b6;
  }
  .meta span.categorie{border-color:rgba(217,171,82,.4);color:var(--or-clair)}
  .article h3{font:400 20px/1.32 Georgia,"Times New Roman",serif;margin-bottom:10px}
  .article p{font-size:13.6px;line-height:1.68;color:var(--texte-doux);flex:1}
  .tout-voir{display:flex;justify-content:center;margin-top:clamp(38px,4vw,54px)}

  /* ---------- rubriques ---------- */
  .rubriques{
    display:grid;gap:16px;max-width:1180px;margin:0 auto;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  }
  .rubrique{
    display:flex;flex-direction:column;gap:10px;aspect-ratio:1/1;justify-content:center;
    padding:30px 26px;text-decoration:none;color:inherit;text-align:center;
    border:1px solid rgba(255,255,255,.08);border-radius:3px;
    background:linear-gradient(165deg,rgba(255,255,255,.03),transparent);
    transition:border-color .35s ease,transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .rubrique:hover{border-color:rgba(217,171,82,.4);transform:translateY(-4px)}
  .rubrique svg{width:30px;height:30px;fill:var(--or);margin:0 auto 6px}
  .rubrique b{font:400 22px/1.3 Georgia,serif}
  .rubrique u{
    text-decoration:none;font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;
    color:rgba(217,171,82,.85);
  }
  .rubrique span{font-size:13.4px;line-height:1.66;color:var(--texte-doux)}

  /* ---------- collection ---------- */
  .collection{
    display:grid;gap:18px;max-width:1180px;margin:0 auto;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr));
  }
  .numero{
    display:block;text-decoration:none;color:inherit;
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .numero:hover{transform:translateY(-6px)}
  .numero .porte{
    position:relative;overflow:hidden;border-radius:3px;
    border:1px solid rgba(255,255,255,.1);background:#05070b;margin-bottom:12px;
  }
  .numero img{
    display:block;width:100%;aspect-ratio:520/690;object-fit:cover;
    filter:saturate(.72) brightness(.74);transition:filter .5s ease;
  }
  .numero:hover img{filter:saturate(1) brightness(1)}
  .numero:hover .porte{border-color:rgba(217,171,82,.45)}
  .numero b{display:block;font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--or);margin-bottom:5px;font-weight:600}
  .numero span{display:block;font:400 13.6px/1.5 Georgia,serif;color:#c3cbd8}

  /* ---------- vision ---------- */
  .vision{
    display:grid;gap:clamp(28px,4vw,54px);max-width:1080px;margin:0 auto;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  }
  .signataire{
    padding:28px 26px;border:1px solid rgba(255,255,255,.08);border-radius:3px;
    background:linear-gradient(165deg,rgba(255,255,255,.03),transparent);
  }
  .signataire i{
    display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:16px;
    background:linear-gradient(140deg,rgba(246,227,170,.9),rgba(217,171,82,.7));
    color:#231806;font:600 15px/1 "Segoe UI",sans-serif;font-style:normal;letter-spacing:.5px;
  }
  .signataire b{display:block;font:400 21px/1.3 Georgia,serif;margin-bottom:4px}
  .signataire u{
    display:block;text-decoration:none;font-size:10.5px;letter-spacing:2.2px;
    text-transform:uppercase;color:rgba(217,171,82,.85);margin-bottom:14px;
  }
  .signataire p{font-size:13.6px;line-height:1.72;color:var(--texte-doux)}

  /* ---------- ecosysteme ---------- */
  .trois-marques{
    display:grid;gap:20px;max-width:1180px;margin:0 auto;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  }
  .marque-carte{
    position:relative;overflow:hidden;display:flex;flex-direction:column;
    padding:0 26px 26px;text-decoration:none;color:inherit;
    border:1px solid rgba(255,255,255,.08);border-radius:3px;
    background:linear-gradient(165deg,rgba(255,255,255,.03),transparent);
    transition:border-color .4s ease,transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .marque-carte:hover{border-color:rgba(217,171,82,.34);transform:translateY(-5px)}
  .marque-carte .vignette{height:170px;margin:0 -26px 22px}
  .marque-carte.ici{border-color:rgba(217,171,82,.42)}
  .marque-carte b{font:400 21px/1.24 Georgia,serif;margin-bottom:7px}
  .marque-carte span{font-size:13.4px;line-height:1.66;color:var(--texte-doux);margin-bottom:16px}
  .marque-carte u{
    text-decoration:none;font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(217,171,82,.85);margin-top:auto;
  }
  .ici-badge{
    position:absolute;right:18px;top:16px;z-index:3;
    padding:5px 12px;border-radius:999px;
    background:linear-gradient(120deg,#f9ecc2,var(--or) 55%,#a97e33);
    color:#231806;font:600 9.5px/1 "Segoe UI",sans-serif;letter-spacing:1.8px;text-transform:uppercase;
  }

  /* ---------- final ---------- */
  .final{
    position:relative;overflow:hidden;text-align:center;
    background:linear-gradient(180deg,#070a0f 0%,#05070b 100%);
    padding:clamp(84px,9vw,130px) clamp(28px,5vw,80px);
    border-top:1px solid rgba(255,255,255,.05);
  }
  .final::before{
    content:"";position:absolute;left:50%;bottom:-46%;transform:translateX(-50%);
    width:min(1100px,120%);height:100%;pointer-events:none;
    background:radial-gradient(ellipse at center,rgba(217,171,82,.16),transparent 66%);
  }
  .final::after{
    content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
    width:min(560px,80%);height:1px;
    background:linear-gradient(90deg,transparent,rgba(217,171,82,.55),transparent);
  }
  .final h2{
    position:relative;max-width:820px;margin:0 auto 20px;
    font:400 clamp(28px,4vw,50px)/1.16 Georgia,serif;letter-spacing:-.5px;
  }
  .final h2 em{
    font-style:italic;
    background:linear-gradient(100deg,#fdf3d2,var(--or) 55%,#a5762a);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .final p{position:relative;max-width:520px;margin:0 auto 34px;font-size:15.5px;line-height:1.74;color:var(--texte-doux)}
  .courriel{position:relative;display:flex;gap:10px;max-width:520px;margin:0 auto;flex-wrap:wrap}
  .courriel input{
    flex:1;min-width:180px;padding:15px 18px;border-radius:999px;
    border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
    color:var(--texte);font:400 14px/1 "Segoe UI",sans-serif;
  }
  .courriel input::placeholder{color:#6f7b8c}
  .courriel input:focus{outline:none;border-color:rgba(217,171,82,.55)}

  /* ---------- pied ---------- */
  .pied{background:#05070b;border-top:1px solid rgba(255,255,255,.07);padding:clamp(48px,6vw,68px) clamp(28px,5vw,80px) 0}
  .pied-haut{display:grid;gap:clamp(28px,4vw,54px);max-width:1180px;margin:0 auto;grid-template-columns:1.4fr repeat(3,1fr)}
  .pied .marque{margin-bottom:18px}
  .pied-mot{font-size:13.4px;line-height:1.72;color:#6f7b8c;max-width:290px}
  .pied-col h4{font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--or);margin-bottom:15px;font-weight:600}
  .pied-col a{display:block;padding:5px 0;color:#8b97a8;text-decoration:none;font-size:13.4px;transition:color .25s ease}
  .pied-col a:hover{color:#fff}
  .pied-col a.externe::after{content:" ↗";color:rgba(217,171,82,.7);font-size:11px}
  .pied-bas{
    display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
    max-width:1180px;margin:clamp(36px,4vw,52px) auto 0;
    padding:22px 0 40px;border-top:1px solid rgba(255,255,255,.06);
    font-size:11.5px;letter-spacing:1.4px;color:#5b6675;
  }
  .pied-bas .signature{color:#8b97a8}
  .pied-bas .signature b{color:var(--or-clair);font-weight:400}

  @media(max-width:900px){
    nav a:not(.cta-nav){display:none}
    .pied-haut{grid-template-columns:1fr 1fr}
  }
  @media(max-width:560px){
    header{flex-wrap:wrap;gap:18px;justify-content:flex-start}
    .marque b{font-size:15px;letter-spacing:2.6px}
    .pied-haut{grid-template-columns:1fr}
  }

  /* ---------- page : tous les articles ---------- */
  .barre-filtre{
    display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;
    max-width:1180px;margin:0 auto clamp(30px,4vw,44px);
  }
  .champ-recherche{position:relative;flex:1;min-width:min(100%,260px);max-width:380px}
  .champ-recherche svg{
    position:absolute;left:17px;top:50%;transform:translateY(-50%);
    width:15px;height:15px;fill:#6f7b8c;pointer-events:none;
  }
  .champ-recherche input{
    width:100%;padding:14px 18px 14px 44px;border-radius:999px;
    border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
    color:var(--texte);font:400 14px/1 "Segoe UI",sans-serif;
  }
  .champ-recherche input::placeholder{color:#6f7b8c}
  .champ-recherche input:focus{outline:none;border-color:rgba(217,171,82,.55)}
  .filtres{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
  .filtre{
    padding:11px 19px;border-radius:999px;cursor:pointer;
    border:1px solid rgba(255,255,255,.12);background:transparent;color:#98a4b6;
    font:400 11px/1 "Segoe UI",sans-serif;letter-spacing:2px;text-transform:uppercase;
    transition:border-color .25s ease,color .25s ease,background .25s ease;
  }
  .filtre:hover{color:#fff;border-color:rgba(217,171,82,.4)}
  .filtre[aria-pressed="true"]{
    border-color:rgba(217,171,82,.6);color:var(--or-clair);background:rgba(217,171,82,.12);
  }
  .compteur{
    max-width:1180px;margin:0 auto 22px;text-align:center;
    font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;color:#6f7b8c;
  }
  .article.sans-image{padding-top:26px}
  .article.sans-image .meta{margin-top:0}
  .vide{
    grid-column:1/-1;padding:60px 20px;text-align:center;
    font-size:15px;line-height:1.72;color:var(--texte-doux);
  }

  /* ---------- page : un article, traitement magazine ---------- */
  .ouverture{
    position:relative;overflow:hidden;display:flex;align-items:flex-end;
    min-height:min(92vh,900px);
  }
  .ouverture .fond{position:absolute;inset:0}
  .ouverture .fond img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) brightness(.52)}
  .ouverture .fond::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(7,10,15,.62) 0%,rgba(7,10,15,.18) 26%,rgba(7,10,15,.8) 70%,var(--noir) 100%);
  }
  .ouverture .dedans{
    position:relative;width:100%;max-width:1180px;margin:0 auto;
    padding:clamp(40px,6vw,80px) clamp(28px,5vw,80px) clamp(48px,6vw,76px);
  }
  .fil{
    display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:clamp(22px,3vw,32px);
    font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:#b6c0cf;
  }
  .fil a{color:var(--or-clair);text-decoration:none;transition:color .25s ease}
  .fil a:hover{color:#fff}
  .fil span{color:rgba(255,255,255,.35)}
  /* Ecouter l'article : lecture vocale du navigateur, rien a installer, rien a distance. */
  .ecouter{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    padding:6px 14px 6px 11px;border-radius:999px;
    border:1px solid rgba(217,171,82,.45);background:rgba(7,10,15,.45);
    color:var(--or-clair);font:400 11px/1 "Segoe UI",system-ui,sans-serif;
    letter-spacing:2.2px;text-transform:uppercase;
    transition:background .25s ease,border-color .25s ease,color .25s ease;
  }
  .ecouter:hover{background:rgba(217,171,82,.16);border-color:var(--or);color:#fff}
  .ecouter svg{width:14px;height:14px;fill:currentColor;flex:none}
  .ecouter[aria-pressed="true"]{
    background:linear-gradient(118deg,#f9ecc2,var(--or) 52%,#c99a3f);
    border-color:transparent;color:#170f04;
  }
  .ecouter .onde{
    width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;
    animation:pulsation 1.4s ease-in-out infinite;
  }
  @keyframes pulsation{0%,100%{opacity:.3}50%{opacity:1}}

  .bandeau-titre{
    display:inline-block;max-width:920px;margin-bottom:clamp(26px,3vw,38px);
    padding:clamp(15px,1.9vw,22px) clamp(20px,2.6vw,30px);
    background:linear-gradient(118deg,#f9ecc2,var(--or) 46%,#c99a3f);
    box-shadow:0 18px 46px rgba(0,0,0,.55);
  }
  .bandeau-titre h1{
    font:700 clamp(21px,3vw,37px)/1.14 "Segoe UI",system-ui,sans-serif;
    text-transform:uppercase;letter-spacing:-.2px;color:#170f04;margin-bottom:7px;
  }
  .bandeau-titre p{font:600 clamp(16px,2.1vw,25px)/1.26 "Segoe UI",system-ui,sans-serif;color:#fff}

  /* Chaque phrase de l'accroche tient sur une seule ligne : la colonne est assez
     large pour la plus longue, et la taille reste raisonnable. */
  .accroche{max-width:min(100%,1040px)}
  .accroche p{
    font:italic 400 clamp(18px,2.05vw,26px)/1.42 Georgia,"Times New Roman",serif;
    color:#f2f5f9;margin-bottom:14px;text-shadow:0 2px 20px rgba(0,0,0,.75);
  }
  .accroche .appel-note{font-size:.6em;vertical-align:baseline;color:var(--or-clair);margin-left:4px}
  .reference{
    max-width:min(100%,520px);margin-top:clamp(20px,2.6vw,30px);
    font:italic 400 12.5px/1.62 Georgia,serif;color:#93a0b1;
  }

  /* ---------- le corps ---------- */
  .zone-lecture{
    display:grid;gap:clamp(30px,4vw,58px);align-items:start;
    max-width:1180px;margin:clamp(54px,7vw,86px) auto 0;padding:0 clamp(28px,5vw,80px);
    grid-template-columns:minmax(0,1fr) 230px;
  }
  .corps{min-width:0}

  /* La colonne des formations : elle reste en place pendant qu'on descend dans l'article. */
  .rail{position:sticky;top:24px}
  .rail-dedans{overflow:visible}
  .rail .toutes{
    display:block;padding:11px 0 0;text-align:right;text-decoration:none;
    font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(217,171,82,.9);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .rail .toutes:hover{color:var(--or-clair)}
  .rail h3{
    font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--or);
    padding-bottom:11px;margin-bottom:15px;font-weight:600;
    border-bottom:1px solid rgba(217,171,82,.28);
  }
  /* Meme langage que les cartes de l'Academie, en format carre et resserre. */
  .encart{
    display:block;margin-bottom:12px;text-decoration:none;color:inherit;
    border:1px solid rgba(255,255,255,.08);border-radius:3px;overflow:hidden;
    background:linear-gradient(165deg,rgba(255,255,255,.03),transparent);
    transition:border-color .3s ease,transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .encart:hover{border-color:rgba(217,171,82,.42);transform:translateY(-3px)}
  .encart .visuel{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#05070b}
  .encart .visuel img{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:saturate(.78) brightness(.72);transition:filter .45s ease,transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .encart:hover .visuel img{filter:saturate(1) brightness(.92);transform:scale(1.04)}
  .encart .visuel::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 40%,rgba(9,13,20,.72) 82%,#0a0e15 100%);
  }
  .encart .etiquettes{
    position:absolute;left:11px;right:11px;bottom:10px;z-index:2;
    display:flex;gap:6px;flex-wrap:wrap;
  }
  .encart .etiquettes i{
    font-style:normal;padding:3px 9px;border-radius:999px;
    border:1px solid rgba(255,255,255,.25);background:rgba(7,10,15,.6);
    font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;color:#d8e0ea;
  }
  .encart .etiquettes i:first-child{border-color:rgba(217,171,82,.6);color:var(--or-clair)}
  .encart .dedans{padding:11px 13px 12px}
  .encart b{
    display:block;font:400 14px/1.3 Georgia,"Times New Roman",serif;
    color:var(--texte);margin-bottom:6px;font-weight:400;
  }
  .encart .accroche-encart{font-size:11.2px;line-height:1.5;color:var(--texte-doux);margin-bottom:9px}
  .encart .bas{
    display:flex;align-items:baseline;justify-content:space-between;gap:8px;
    padding-top:8px;border-top:1px solid rgba(255,255,255,.08);
  }
  .encart .prix{font:400 17px/1 Georgia,serif;color:var(--or-clair)}
  .encart .prix em{font-style:normal;font-size:10px;color:var(--texte-doux);margin-left:4px}
  .encart .voir{
    margin-left:auto;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
    color:rgba(217,171,82,.9);white-space:nowrap;
  }
  .encart:hover .voir{color:var(--or-clair)}

  @media(max-width:1180px){
    .zone-lecture{grid-template-columns:minmax(0,1fr);max-width:820px}
    .rail{position:static;margin-top:clamp(40px,5vw,56px)}
    .encart{display:grid;grid-template-columns:110px 1fr;align-items:center}
    .encart img{aspect-ratio:1/1}
  }
  .corps p{font-size:16.5px;line-height:1.82;color:#c3cbd8;margin-bottom:20px;text-wrap:pretty}
  .corps > p:first-of-type::first-letter{
    float:left;margin:8px 13px 0 0;
    font:400 64px/.84 Georgia,"Times New Roman",serif;
    background:linear-gradient(150deg,#fdf3d2,var(--or) 52%,#a5762a);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  /* Un passage mis en gras par l'auteur : il ressort, sans prendre l'or des titres. */
  .corps p.appui{
    font-weight:600;color:#dfe6ef;
    font-size:17px;line-height:1.74;
    margin:clamp(28px,3.4vw,38px) 0;padding-left:18px;
    border-left:2px solid rgba(217,171,82,.35);
  }
  /* Le gras pose a l'interieur d'une phrase : gris clair, jamais l'or des titres. */
  .corps strong,.corps li strong{font-weight:600;color:#e4eaf2}
  .corps h2{
    font:400 clamp(22px,2.6vw,31px)/1.28 Georgia,"Times New Roman",serif;
    margin:clamp(44px,5vw,62px) 0 20px;
    background:linear-gradient(100deg,#fdf3d2,var(--or) 55%,#a5762a);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .corps h2::before{
    content:"";display:block;width:46px;height:1px;margin-bottom:18px;
    background:linear-gradient(90deg,var(--or),transparent);
  }
  .corps ul{list-style:none;margin:0 0 22px;padding:0}
  .corps ul li{
    position:relative;padding-left:25px;margin-bottom:12px;
    font-size:16px;line-height:1.8;color:#c3cbd8;text-wrap:pretty;
  }
  .corps ul li::before{
    content:"";position:absolute;left:2px;top:.74em;width:6px;height:6px;border-radius:50%;
    background:linear-gradient(140deg,var(--or-clair),var(--or));
  }

  /* l'exergue casse la colonne, comme dans le papier */
  /* L'exergue tient dans la colonne de lecture : la colonne des formations occupe
     desormais la droite, il n'y a plus de place pour deborder. */
  /* L'exergue garde l'or, a la taille du papier : le PDF le compose en 12 points
     contre 10 pour le texte courant, soit un cinquieme de plus, pas le double.
     Pas de filets : c'est le blanc autour qui le detache, comme dans l'imprime. */
  .exergue{
    width:100%;margin:clamp(46px,5.5vw,66px) 0;
    padding:0 clamp(16px,3vw,44px);text-align:center;
  }
  .exergue p{
    margin:0;font:italic 400 clamp(17px,1.9vw,20.5px)/1.52 Georgia,"Times New Roman",serif;
    background:linear-gradient(100deg,#fdf3d2,var(--or) 55%,#a5762a);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-wrap:balance;
  }
  .corps .illustration{
    width:100%;margin:clamp(42px,5vw,62px) 0;
    border:1px solid rgba(255,255,255,.09);border-radius:3px;overflow:hidden;
  }
  .corps .illustration img{display:block;width:100%;height:auto}

  .appel-note{font-size:11px;vertical-align:super;color:var(--or);text-decoration:none;margin-left:2px}
  .note-bas{
    margin-top:clamp(38px,5vw,54px);padding-top:22px;
    border-top:1px solid rgba(255,255,255,.09);
    font-size:12.8px!important;line-height:1.72!important;color:#6f7b8c!important;
  }

  /* ---------- les auteurs ---------- */
  .auteurs{
    max-width:1180px;margin:clamp(58px,7vw,92px) auto 0;padding:0 clamp(28px,5vw,80px);
    display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  }
  .auteur{
    display:flex;flex-direction:column;overflow:hidden;padding-bottom:22px;
    border:1px solid rgba(255,255,255,.08);border-radius:3px;
    background:linear-gradient(165deg,rgba(255,255,255,.032),transparent);
  }
  .auteur .portrait{
    width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;
    margin:22px 20px 16px;border:1px solid rgba(217,171,82,.45);
    filter:saturate(.9);
  }
  .auteur b{
    display:block;margin-bottom:17px;padding:12px 20px;
    background:linear-gradient(118deg,#f9ecc2,var(--or) 52%,#c99a3f);
    color:#170f04;font:700 15px/1.3 "Segoe UI",system-ui,sans-serif;
  }
  .auteur p{font-size:13.4px;line-height:1.72;color:var(--texte-doux);padding:0 20px;margin-bottom:10px}
  .auteur a{
    margin:auto 20px 0;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;
    color:rgba(217,171,82,.9);text-decoration:none;word-break:break-word;
  }
  .auteur a:hover{color:var(--or-clair)}

  .pied-article{
    max-width:1180px;margin:clamp(46px,5vw,64px) auto 0;padding:26px clamp(28px,5vw,80px) 0;
    border-top:1px solid rgba(255,255,255,.09);
    display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  }
  .pied-article .origine{font-size:12.5px;line-height:1.7;color:#5b6675;max-width:440px}
  .pied-article .origine a{color:rgba(217,171,82,.85);text-decoration:none}
  .pied-article .origine a:hover{color:var(--or-clair)}
  @media(max-width:640px){
    .corps > p:first-of-type::first-letter{font-size:52px;margin-right:10px}
  }