/* =====================================================================
   E'Potto — habillage « magazine ».
   Généré depuis la maquette validée (localhost:4321). Chargé APRÈS
   style.css et blocks.css : les gabarits front produisent le markup de la
   maquette, les pages sur mesure gardent l'ancien.
   ===================================================================== */

/* =====================================================================
   E'Potto — propal landing « magazine »
   Parti pris : densité de kiosque plutôt que respiration de blog. Titres
   en Anton (condensé, impact), interface en Archivo, chapôs en serif pour
   la respiration éditoriale. Angles francs, filets nets, aucune ombre
   diffuse : c'est ce qui sépare une page de presse d'un template.
   ===================================================================== */

:root{
  --ink:#0B0E13;          /* encre presque noire, légèrement bleutée */
  --ink-2:#3D454F;
  --ink-3:#6B7480;
  --paper:#FFFFFF;
  --wash:#ECEEF1;         /* gris papier journal */
  --line:#D8DCE1;
  --line-2:#E9ECEF;
  --marque:#0F5F96;       /* bleu E'Potto durci pour l'écran */
  --flash:#E8362B;        /* rouge d'actualité */
  --anton:'Anton',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  --ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --lecture:'Source Serif 4',Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--marque);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}

/* ---------- kicker commun ---------- */
.k{
  display:inline-block;font-family:var(--ui);font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--c,var(--marque));
  padding:0 0 0 9px;position:relative;line-height:1.6;
}
.k::before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:3px;background:var(--c,var(--marque))}
.k-flash{color:#fff}
.k-flash::before{background:var(--flash);width:4px}
.k-blanc{color:#fff}
.k-blanc::before{background:var(--flash)}

/* ---------- bandeau de service ---------- */
.bandeau{background:var(--ink);color:#fff}
.bandeau-in{display:flex;align-items:center;gap:16px;height:34px;font-size:12px;letter-spacing:.02em}
.jour{font-weight:600;text-transform:capitalize}
.bandeau-s{color:#9AA3AE;border-left:1px solid #2A313B;padding-left:16px}
.bandeau-a{margin-left:auto;color:#fff;font-weight:600;border-bottom:2px solid var(--flash);padding-bottom:1px}
.bandeau-a:hover{color:var(--flash)}

/* ---------- en-tête ---------- */
.tete{background:var(--paper);border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:20}
.tete-in{display:flex;align-items:center;gap:26px;height:66px}
.logo{
  font-family:var(--anton);font-size:31px;line-height:1;letter-spacing:-.01em;
  text-transform:none;white-space:nowrap;
}
.logo i{color:var(--flash);font-style:normal}
.nav{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.045em;
  white-space:nowrap;padding:24px 0 22px;border-bottom:3px solid transparent;margin-bottom:-3px;
}
.nav a:hover{border-bottom-color:var(--c,var(--marque));color:var(--c,var(--marque))}
.tete-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.rech{
  width:36px;height:36px;border:1px solid var(--line);background:var(--paper);
  display:grid;place-items:center;cursor:pointer;padding:0;
}
.rech svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.rech:hover{border-color:var(--ink)}
.btn-abo{
  background:var(--flash);color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:10px 16px;white-space:nowrap;
}
.btn-abo:hover{background:var(--ink)}

/* ---------- la une ---------- */
main{padding:22px 0 60px}
.une{
  display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,.78fr) minmax(0,.72fr);
  gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:22px;
}
.une-g{position:relative;background:var(--ink);overflow:hidden;min-height:430px;display:block}
.une-i{position:absolute;inset:0}
.une-i img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.une-g::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,8,11,.94) 0%,rgba(6,8,11,.72) 34%,rgba(6,8,11,.12) 66%,rgba(6,8,11,0) 100%);
}
.une-g:hover .une-i img{transform:scale(1.035)}
.une-b{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 28px 24px;color:#fff}
.une-b h1{
  font-family:var(--anton);font-weight:400;margin:9px 0 10px;
  font-size:clamp(30px,3.6vw,50px);line-height:.99;letter-spacing:-.006em;
  text-wrap:balance;text-shadow:0 1px 24px rgba(0,0,0,.34);
}
.une-c{
  font-family:var(--lecture);font-size:15.5px;line-height:1.5;color:#DDE2E8;
  margin:0 0 10px;max-width:56ch;
}
.une-d{font-size:12px;font-weight:600;color:#9AA3AE;text-transform:uppercase;letter-spacing:.06em}

.une-d2{display:grid;grid-template-rows:1fr 1fr;gap:1px;background:var(--line)}

/* ---------- carte ---------- */
.c{background:var(--paper);display:flex;flex-direction:column;padding:0 0 14px}
.c-i{display:block;overflow:hidden;background:var(--wash)}
.c-i img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.c:hover .c-i img{transform:scale(1.04)}
.c-b{display:flex;flex-direction:column;gap:5px;padding:12px 16px 0}
.c-t{
  font-family:var(--anton);font-weight:400;font-size:19px;line-height:1.09;
  letter-spacing:.002em;text-wrap:balance;
}
.c:hover .c-t{color:var(--marque)}
.c-d{font-size:11.5px;color:var(--ink-3);font-weight:500}
.c-s .c-t{font-size:17px}

/* ---------- fil « en continu » ---------- */
.fil{background:var(--paper);padding:14px 16px 12px;display:flex;flex-direction:column}
.fil-h{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:2px solid var(--ink);
}
.pastille{width:8px;height:8px;background:var(--flash);border-radius:50%;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
.fl{display:grid;grid-template-columns:38px 8px 1fr;gap:8px;align-items:start;padding:9px 0;border-bottom:1px solid var(--line-2)}
.fl-h{font-size:12px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:1px}
.fl-p{width:3px;height:13px;background:var(--c,var(--marque));margin-top:3px}
.fl-t{font-size:13.5px;font-weight:600;line-height:1.28}
.fl:hover .fl-t{color:var(--marque)}
.fil-plus{
  margin-top:auto;padding-top:12px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--marque);
}
.fil-plus:hover{text-decoration:underline}

/* ---------- bande de 4 ---------- */
.bande{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:34px;
}

/* ---------- section rubrique ---------- */
.sec{margin:0 0 34px}
.sec-h{display:flex;align-items:baseline;gap:14px;border-top:4px solid var(--c);padding-top:10px;margin-bottom:14px}
.sec-h h2{
  font-family:var(--anton);font-weight:400;font-size:26px;line-height:1;margin:0;
  text-transform:uppercase;letter-spacing:.005em;
}
.sec-a{
  margin-left:auto;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--c);white-space:nowrap;
}
.sec-a:hover{text-decoration:underline}
.sec-g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px}

.lead{display:flex;flex-direction:column;gap:9px}
.lead-i{overflow:hidden;background:var(--wash)}
.lead-i img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.lead:hover .lead-i img{transform:scale(1.035)}
.lead-t{
  font-family:var(--anton);font-weight:400;font-size:26px;line-height:1.05;
  text-wrap:balance;
}
.lead:hover .lead-t{color:var(--c)}
.lead-c{font-family:var(--lecture);font-size:15px;line-height:1.5;color:var(--ink-2)}
.lead-d{font-size:11.5px;color:var(--ink-3);font-weight:500}

.sec-l{display:flex;flex-direction:column}
.r{display:grid;grid-template-columns:30px 1fr 88px;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.r:first-child{padding-top:0}
.r-n{
  font-family:var(--anton);font-size:19px;line-height:1;color:var(--line);
  font-variant-numeric:tabular-nums;padding-top:2px;transition:color .2s;
}
.r:hover .r-n{color:var(--c)}
.r-b{display:flex;flex-direction:column;gap:4px;min-width:0}
.r-t{font-size:15px;font-weight:700;line-height:1.24;text-wrap:balance}
.r:hover .r-t{color:var(--c)}
.r-d{font-size:11.5px;color:var(--ink-3);font-weight:500}
.r-i{overflow:hidden;background:var(--wash)}
.r-i img{width:88px;aspect-ratio:1/1;object-fit:cover}

/* ---------- newsletter ---------- */
.nl{
  background:var(--ink);color:#fff;padding:34px 36px;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:30px;align-items:center;margin:0 0 10px;
}
.nl h2{
  font-family:var(--anton);font-weight:400;font-size:clamp(24px,2.5vw,33px);
  line-height:1.03;margin:9px 0 8px;text-wrap:balance;
}
.nl p{margin:0;color:#A9B2BD;font-family:var(--lecture);font-size:15.5px}
.nl-f{display:flex;gap:0;border:2px solid #fff}
.nl-f input{
  flex:1;min-width:0;border:0;padding:14px 15px;font-family:var(--ui);font-size:15px;
  background:transparent;color:#fff;
}
.nl-f input::placeholder{color:#79828E}
.nl-f button{
  border:0;background:var(--flash);color:#fff;font-family:var(--ui);font-weight:700;
  font-size:13.5px;text-transform:uppercase;letter-spacing:.05em;padding:0 22px;cursor:pointer;
}
.nl-f button:hover{background:#fff;color:var(--ink)}

/* ---------- pied ---------- */
.pied{background:var(--paper);border-top:3px solid var(--ink);margin-top:40px;padding:32px 0 0}
.pied-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.6fr);gap:34px;padding-bottom:26px}
.logo-p{font-size:27px;display:inline-block;margin-bottom:9px}
.pied-l p{margin:0;color:var(--ink-2);font-family:var(--lecture);font-size:14.5px;max-width:46ch}
.pied-n{display:flex;flex-direction:column;gap:8px}
.pied-n a{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.pied-n a:hover{color:var(--marque)}
.pied-c{border-top:1px solid var(--line);padding:14px 20px;font-size:12px;color:var(--ink-3)}

/* ---------- adaptations ---------- */
@media (max-width:1080px){
  .une{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .fil{grid-column:1 / -1}
  .fil-plus{margin-top:12px}
  .bande{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .sec-g{grid-template-columns:1fr;gap:18px}
  .nl{grid-template-columns:1fr;padding:26px 22px}
  .pied-in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .bandeau-s{display:none}
  /* la nav passe sous le logo : sans wrap ni hauteur libre, elle reste
     coincée sur la ligne du header et se fait couper */
  .tete-in{height:auto;gap:12px;flex-wrap:wrap;padding-top:10px}
  .logo{font-size:25px}
  .nav{order:3;width:100%;border-top:1px solid var(--line-2);gap:16px;margin-top:2px}
  .nav a{padding:10px 0 9px;font-size:12.5px}
  .tete{position:static}
  .une{grid-template-columns:1fr}
  .une-g{min-height:330px}
  .une-d2{grid-template-rows:auto auto}
  .bande{grid-template-columns:1fr}
  .r{grid-template-columns:26px 1fr 70px}
  .r-i img{width:70px}
  .pied-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- repli quand l'article n'a pas de photo ---------- */
.vide{
  display:grid;place-items:center;aspect-ratio:16/9;
  background:
    repeating-linear-gradient(135deg,transparent 0 11px,color-mix(in srgb,var(--c) 7%,transparent) 11px 22px),
    color-mix(in srgb,var(--c) 12%,#fff);
  border-bottom:3px solid var(--c);
}
.vide-t{
  font-family:var(--anton);font-size:26px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--c);opacity:.62;
}
.r-i .vide{aspect-ratio:1/1}
.r-i .vide-t{font-size:12px}

/* =====================================================================
   PAGES RUBRIQUE ET ARTICLE
   ===================================================================== */

.ariane{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-3);padding:16px 0 24px;flex-wrap:wrap}
.ariane a{font-weight:600;color:var(--ink-2)}
.ariane a:hover{color:var(--marque);text-decoration:underline}
.ariane b{font-weight:600;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
.nav a.on{border-bottom-color:var(--c);color:var(--c)}

/* ---------- en-tête de rubrique ---------- */
.rub-h{padding:8px 0 22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.rub-fil{display:block;width:64px;height:6px;background:var(--c);margin-bottom:14px}
.rub-h h1{
  font-family:var(--anton);font-weight:400;font-size:clamp(34px,5vw,58px);
  line-height:.98;margin:0 0 10px;text-transform:uppercase;letter-spacing:-.005em;
}
.rub-h p{font-family:var(--lecture);font-size:17px;line-height:1.55;color:var(--ink-2);margin:0 0 10px;max-width:62ch}
.rub-n{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c)}

/* ---------- article vedette de rubrique ---------- */
.ved{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  background:var(--ink);color:#fff;margin-bottom:26px;overflow:hidden;
}
.ved-i{overflow:hidden;background:#111}
.ved-i img{width:100%;height:100%;min-height:280px;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.ved:hover .ved-i img{transform:scale(1.035)}
.ved-b{padding:28px 30px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.ved-t{font-family:var(--anton);font-weight:400;font-size:clamp(23px,2.6vw,33px);line-height:1.04;text-wrap:balance}
.ved-c{font-family:var(--lecture);font-size:15.5px;line-height:1.55;color:#C9D0D8}
.ved-d{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#8F98A3}
.ved .vide{min-height:280px;aspect-ratio:auto}

/* ---------- grille de rubrique ---------- */
.grille{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:34px;
}
.grille.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vide-msg{font-family:var(--lecture);color:var(--ink-2);padding:20px 0 34px}

/* ---------- article ---------- */
.art{padding-bottom:10px}

.art-g{display:grid;grid-template-columns:210px minmax(0,1fr);gap:44px;align-items:start;padding-bottom:20px}
.som{position:sticky;top:88px}
.som-in{position:relative;padding-left:14px}
.som-h{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-3);margin-bottom:10px;
}
.som ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;counter-reset:s}
.som li{counter-increment:s}
.som a{
  font-size:13px;font-weight:600;line-height:1.32;color:var(--ink-3);
  display:block;transition:color .18s;
}
.som a::before{content:counter(s) ". ";color:var(--ink-3);font-family:var(--ui);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.som a:hover{color:var(--ink)}
.som a.on{color:var(--c)}
.som a.on::before{color:var(--c)}
.som-p{position:absolute;left:0;top:26px;bottom:0;width:2px;background:var(--line-2)}
.som-p span{display:block;width:2px;background:var(--c);height:0}

/* corps de lecture */
.art-body{max-width:none;font-family:var(--lecture);font-size:18.5px;line-height:1.72;color:#171B21}
.art-body>*{max-width:none}
.art-body p{margin:0 0 20px}
.art-body h2{
  font-family:var(--anton);font-weight:400;font-size:29px;line-height:1.08;
  margin:38px 0 14px;scroll-margin-top:96px;letter-spacing:-.004em;
}
.art-body h2::after{content:"";display:block;width:46px;height:4px;background:var(--c);margin-top:10px}
.art-body ul,.art-body ol{margin:0 0 20px;padding-left:22px}
.art-body li{margin-bottom:8px}
.art-body a{color:var(--marque);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.art-body a:hover{background:color-mix(in srgb,var(--marque) 10%,transparent)}
.art-body img{margin:22px 0;width:100%;height:auto}
.art-body figure{margin:22px 0}
.art-body figcaption{font-family:var(--ui);font-size:12.5px;color:var(--ink-3);margin-top:7px}
.art-body blockquote{
  margin:26px 0;padding:4px 0 4px 20px;border-left:4px solid var(--c);
  font-size:21px;line-height:1.45;font-weight:600;font-style:normal;
}
.art-body table{width:100%;border-collapse:collapse;margin:22px 0;font-family:var(--ui);font-size:15px}
.art-body th{background:var(--ink);color:#fff;text-align:left;padding:10px 13px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.art-body td{padding:10px 13px;border-bottom:1px solid var(--line)}
.art-body tr:nth-child(even) td{background:#F7F8F9}
.art-body>*:first-child{margin-top:0}

.suite{margin-top:64px}

@media (max-width:980px){
  .grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .art-g{grid-template-columns:1fr;gap:22px}
  .som{position:static}
  .som-in{padding-left:0;border-top:2px solid var(--ink);padding-top:12px}
  .som-p{display:none}
  .som ol{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
  .ved{grid-template-columns:1fr}
  .ved-i img{min-height:210px}
}
@media (max-width:640px){
  .grille,.grille.g3{grid-template-columns:1fr}
  .art-body{font-size:17.5px}
  .art-body h2{font-size:25px}
  .som ol{grid-template-columns:1fr}
  .ariane{padding-bottom:16px}
  .suite{margin-top:42px}
}

/* =====================================================================
   CORRECTIFS — image d'article contenue, liste de rubrique respirée
   ===================================================================== */

/* ---------- l'image de tête revient dans la colonne de lecture ----------
   Le plein écran écrase le texte et casse le rythme de lecture : dans un
   magazine, la photo est calée sur la colonne et porte une légende. */
.art-col{min-width:0}
.art-img{margin:0 0 26px;background:var(--wash)}
.art-img img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.art-img figcaption{
  font-family:var(--ui);font-size:12.5px;line-height:1.45;color:var(--ink-3);
  padding:8px 2px 0;border-bottom:1px solid var(--line);padding-bottom:9px;
}

/* ---------- liste de rubrique ---------- */
.liste{
  background:var(--paper);border:1px solid var(--line);
  padding:0 24px;margin-bottom:34px;
}
.li{
  display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;
  padding:22px 0;border-bottom:1px solid var(--line-2);align-items:start;
}
.li:last-child{border-bottom:none}
.li-i{overflow:hidden;background:var(--wash);display:block}
.li-i img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.li:hover .li-i img{transform:scale(1.04)}
.li-b{display:flex;flex-direction:column;gap:8px;padding-top:2px}
.li-t{
  font-family:var(--anton);font-weight:400;font-size:23px;line-height:1.08;
  text-wrap:balance;transition:color .18s;
}
.li:hover .li-t{color:var(--c)}
.li-c{font-family:var(--lecture);font-size:15px;line-height:1.55;color:var(--ink-2)}
.li-d{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-3);font-weight:500}
.li-d b{color:var(--c);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11.5px}
.li-sep{width:3px;height:3px;border-radius:50%;background:var(--line);display:inline-block}
.vide-li{aspect-ratio:3/2}

/* ---------- l'accueil respire aussi entre les blocs ---------- */
.bande{gap:14px;background:transparent;border:0;padding:0}
.bande .c{border:1px solid var(--line)}
.grille.g3{gap:14px;background:transparent;border:0}
.grille.g3 .c{border:1px solid var(--line)}

@media (max-width:820px){
  .liste{padding:0 16px}
  .li{grid-template-columns:150px minmax(0,1fr);gap:16px;padding:18px 0}
  .li-t{font-size:19px}
  .li-c{display:none}
}
@media (max-width:520px){
  .li{grid-template-columns:1fr;gap:12px}
  .li-i img{aspect-ratio:16/9}
}


/* =====================================================================
   EN-TÊTE D'ARTICLE — on reprend la composition de l'original (centrée,
   aérée : kicker de rubrique, titre, chapô large, puis date et durée) et
   on n'en change que l'habillage : Anton pour le titre, Archivo pour les
   repères, palette de la refonte.
   ===================================================================== */

.art-h{
  max-width:820px;margin:0 auto;padding:22px 0 26px;text-align:center;
}
.art-k{
  display:inline-block;font-family:var(--ui);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c);
  text-decoration:none;padding:0;
}
.art-k::before{display:none}          /* pas de barre : le kicker est centré */
.art-k:hover{text-decoration:underline;text-underline-offset:3px}
.art-h h1{
  font-family:var(--anton);font-weight:400;
  font-size:clamp(31px,4.3vw,52px);line-height:1.02;letter-spacing:-.008em;
  margin:14px 0 0;text-wrap:balance;
}
.art-meta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:22px;font-family:var(--ui);font-size:12px;font-weight:500;
  color:var(--ink-3);text-transform:none;letter-spacing:0;
}
.art-meta .pt{width:3px;height:3px;border-radius:50%;background:var(--line);display:inline-block}

/* un filet fin ferme l'en-tête et ouvre la lecture */
.art-h::after{
  content:"";display:block;width:56px;height:3px;background:var(--c);
  margin:24px auto 0;
}

/* ---------------------------------------------------------------------
   Sous-titres du corps : le bleu de l'ancien thème ne convient plus.
   Le H2 porte déjà la couleur (Anton + filet) ; le H3 se distingue par
   la graisse et un tiret court, sans concurrencer le niveau au-dessus.
   --------------------------------------------------------------------- */
.art-body h3{
  font-family:var(--ui);font-weight:700;font-size:19.5px;line-height:1.3;
  color:var(--ink);margin:30px 0 10px;letter-spacing:-.005em;
  display:flex;align-items:baseline;gap:10px;
}
.art-body h3::before{
  content:"";flex:0 0 auto;width:16px;height:3px;background:var(--c);
  transform:translateY(-4px);
}
.art-body h4{
  font-family:var(--ui);font-weight:700;font-size:16.5px;color:var(--ink-2);
  margin:24px 0 8px;letter-spacing:.01em;
}

@media (max-width:640px){
  .art-h{padding:16px 0 20px;text-align:left}
  .art-h::after{margin-left:0}
  .art-meta{justify-content:flex-start}
  }


/* =====================================================================
   BLOCS D'ARTICLE — réécrits pour la refonte magazine
   Reprend exactement le balisage produit par le thème (mêmes classes
   .ep-*), mais dans le nouveau langage : angles francs, filets épais,
   Anton pour les titres, couleur de la rubrique (--c) comme accent.
   Remplace assets/css/blocks.css : aucun coin arrondi mou, aucune ombre
   diffuse, aucun dégradé.
   ===================================================================== */

.article-body .ep-essential,
.article-body .ep-note,
.article-body .ep-prcon,
.article-body .ep-comparo,
.article-body .ep-specs,
.article-body .ep-figures,
.article-body .ep-budget,
.article-body .ep-steps,
.article-body .ep-faq,
.article-body .ep-quote,
.article-body .ep-gallery,
.article-body .ep-lireaussi,
.article-body .ep-lettre{ margin:34px 0; }

/* le label commun à plusieurs blocs */
.ep-label{
  display:block;font-family:var(--ui);font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;line-height:1.4;
}

/* ---------------------------------------------------------------------
   1. L'essentiel à retenir — c'est le résumé : il doit arrêter l'œil
   --------------------------------------------------------------------- */
/* On garde la composition d'origine — fanion à l'étoile, fond teinté, coins
   arrondis — et on ne change que la teinte et les polices. La couleur suit la
   RUBRIQUE de l'article (--c, posée sur <article>), pas le bleu de marque :
   le bloc s'accorde ainsi au reste de la page. */
.article-body .ep-essential{
  position:relative;background:color-mix(in srgb,var(--c,var(--marque)) 8%,#fff);
  border-radius:16px;padding:28px 32px 26px 106px;color:var(--ink);border:0;
}
.article-body .ep-essential::before{
  content:"";position:absolute;left:32px;top:0;width:46px;height:58px;
  background:var(--c,var(--marque));
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
}
.article-body .ep-essential::after{
  content:"";position:absolute;left:45px;top:14px;width:19px;height:19px;display:block;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2.6l3.1 6.3 6.9.9-5.1 4.8 1.3 6.8-6.2-3.4-6.2 3.4 1.3-6.8L2 9.8l6.9-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ep-essential .ep-label,
.ep-essential>h2,.ep-essential>h3,.ep-essential>h4{
  font-family:var(--ui);font-size:17px;font-weight:700;letter-spacing:0;
  text-transform:none;color:var(--c,var(--marque));margin:0 0 10px;padding:0;border:0;
}
.ep-essential>h2::after,.ep-essential>h3::after,.ep-essential>h4::after{display:none}
.ep-essential>h3::before{display:none}
.ep-essential ul,.ep-essential ol{
  margin:0;padding-left:20px;list-style:disc;
  font-family:var(--lecture);font-size:16.5px;line-height:1.7;color:var(--ink-2);
}
.ep-essential li{margin-bottom:8px;padding:0}
.ep-essential li::before{display:none}
.ep-essential li:last-child{margin-bottom:0}
.ep-essential li strong,.ep-essential li b{color:var(--ink)}
.ep-essential a{color:var(--c,var(--marque));text-decoration:underline;text-underline-offset:2px}
@media (max-width:560px){
  .article-body .ep-essential{padding:74px 22px 24px 22px}
  .article-body .ep-essential::before{left:22px}
  .article-body .ep-essential::after{left:35px}
}

/* ---------------------------------------------------------------------
   2. Note / remarque
   --------------------------------------------------------------------- */
/* Structure d'origine (pastille ronde + « i »), mais la pastille est pleine
   et un filet coloré souligne le bloc : il ressort au lieu de se fondre. */
.article-body .ep-note{
  position:relative;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--marque);border-radius:14px;
  box-shadow:0 2px 12px -7px rgba(11,14,19,.22);
  padding:24px 30px 24px 100px;min-height:104px;
  display:flex;flex-direction:column;justify-content:center;
}
.article-body .ep-note::before{
  content:"";position:absolute;left:28px;top:50%;transform:translateY(-50%);
  width:50px;height:50px;border-radius:50%;background:var(--marque);
}
.article-body .ep-note::after{
  content:"i";position:absolute;left:28px;top:50%;transform:translateY(-50%);
  width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  font-family:var(--lecture);font-style:italic;font-weight:700;font-size:25px;
  color:#fff;line-height:1;
}
.ep-note .ep-label,
.ep-note>h2,.ep-note>h3,.ep-note>h4{
  font-family:var(--ui);font-size:13.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--marque);margin:0 0 8px;border:0;
}
.ep-note>h2::after,.ep-note>h3::after,.ep-note>h4::after{display:none}
.ep-note>h3::before{display:none}
.ep-note p{margin:0 0 10px;font-family:var(--lecture);font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.ep-note p:last-child{margin-bottom:0}

.article-body .ep-note--alert{
  background:#FDF1F0;border-color:color-mix(in srgb,var(--flash) 28%,transparent);
  border-left-color:var(--flash);
}
.article-body .ep-note--alert::before{background:var(--flash)}
.article-body .ep-note--alert::after{content:"!";color:#fff;font-style:normal;font-family:var(--ui)}
.ep-note--alert .ep-label,
.ep-note--alert>h2,.ep-note--alert>h3,.ep-note--alert>h4{color:var(--flash)}

.article-body .ep-note--star{border-left-color:var(--c,var(--marque))}
.article-body .ep-note--star::before{background:var(--c,var(--marque))}
.article-body .ep-note--star::after{
  content:"";
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2.6l3.1 6.3 6.9.9-5.1 4.8 1.3 6.8-6.2-3.4-6.2 3.4 1.3-6.8L2 9.8l6.9-.9z'/%3E%3C/svg%3E") center/21px no-repeat;
}
.ep-note--star .ep-label{color:var(--c,var(--marque))}
@media (max-width:560px){
  .article-body .ep-note{padding:80px 22px 22px;min-height:0}
  .article-body .ep-note::before,.article-body .ep-note::after{left:22px;top:26px;transform:none}
}

/* ---------------------------------------------------------------------
   3. Points forts / points faibles
   --------------------------------------------------------------------- */
/* Le blanc pur cerné d'un trait tranchait avec le gris de la page. On reprend
   l'arrondi de l'original, on pose les mêmes ombres douces que les autres
   encadrés, et chaque colonne reçoit un fond très pâle à sa propre couleur :
   le bloc s'assoit dans la page au lieu de flotter dessus. */
.article-body .ep-prcon{
  --vert:#177E5B;
  background:#fff;border:1px solid var(--line);border-radius:0;
  box-shadow:0 2px 12px -7px rgba(11,14,19,.22);
  padding:14px;
}
.ep-prcon .wp-block-columns{
  display:grid;grid-template-columns:1fr 1fr;gap:14px!important;margin:0;
}
.ep-prcon .wp-block-column{
  margin:0;padding:20px 22px 18px;border-radius:0;
}
.ep-pro{background:color-mix(in srgb,var(--vert,#177E5B) 6%,#fff)}
.ep-con{background:color-mix(in srgb,var(--flash) 5%,#fff)}
.ep-prcon .wp-block-column:first-child{border-right:0}
.ep-prcon .ep-prcon-title{
  font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;margin:0 0 14px;padding:2px 0 2px 12px;
  border-bottom:0;border-left:3px solid currentColor;
}
.ep-pro .ep-prcon-title{color:#177E5B}
.ep-con .ep-prcon-title{color:var(--flash)}
.ep-prcon ul{margin:0;padding:0;list-style:none}
.ep-prcon li{
  font-family:var(--lecture);font-size:15.5px;line-height:1.5;color:var(--ink-2);
  padding:9px 0 9px 26px;position:relative;margin:0;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
}
.ep-prcon li:last-child{border-bottom:0;padding-bottom:2px}
.ep-pro li::before{
  content:"";position:absolute;left:3px;top:1.05em;width:10px;height:5px;
  border-left:2.5px solid #177E5B;border-bottom:2.5px solid #177E5B;transform:rotate(-45deg);
}
.ep-con li::before{
  content:"\00d7";position:absolute;left:1px;top:.52em;color:var(--flash);
  font-size:18px;font-weight:700;line-height:1;font-family:var(--ui);
}
@media (max-width:640px){
  .ep-prcon .wp-block-columns{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------
   4. Comparatif — tableau de presse : en-tête plein, gagnant surligné
   --------------------------------------------------------------------- */
.article-body .ep-comparo{overflow-x:auto}
.ep-comparo table{width:100%;border-collapse:collapse;font-family:var(--ui);font-size:15px;min-width:520px}
.ep-comparo thead th{
  background:var(--ink);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:12px 14px;text-align:left;border:0;
}
.ep-comparo thead th:first-child{background:#000}
.ep-comparo tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.ep-comparo tbody td:first-child{
  font-weight:700;color:var(--ink);background:var(--wash);
  font-size:14px;width:30%;
}
.ep-comparo tbody tr:last-child td{border-bottom:0}
/* la cellule mise en gras par l'auteur = la meilleure : on la signale */
.ep-comparo tbody td:not(:first-child) strong{
  display:inline-block;background:#FFF3C4;box-shadow:inset 0 -2px 0 #E8B900;
  padding:1px 5px;font-weight:700;
}
.ep-comparo figcaption,.ep-comparo .wp-element-caption{
  font-family:var(--ui);font-size:12.5px;color:var(--ink-3);padding-top:9px;
}

/* ---------------------------------------------------------------------
   5. Fiche technique
   --------------------------------------------------------------------- */
.article-body .ep-specs{
  background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--c,var(--marque));
  overflow-x:auto;
}
.ep-specs table{width:100%;border-collapse:collapse;font-family:var(--ui);font-size:15px}
.ep-specs td{padding:11px 18px;border-bottom:1px solid var(--line-2)}
.ep-specs td:first-child{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);width:45%;
}
.ep-specs td:last-child{font-weight:600;color:var(--ink);text-align:right}
.ep-specs tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------------------
   6. En chiffres — les nombres portent, donc ils sont en Anton
   --------------------------------------------------------------------- */
.article-body .ep-figures{
  background:var(--paper);border:1px solid var(--line);padding:20px 22px;
}
.ep-figures .ep-fig-title{
  font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--c,var(--marque));margin:0 0 12px;
}
.ep-figures table{width:100%;border-collapse:collapse}
.ep-figures td{padding:11px 0;border-bottom:1px solid var(--line-2);vertical-align:baseline}
.ep-figures tr:last-child td{border-bottom:0}
.ep-figures td:first-child{font-family:var(--lecture);font-size:16px;color:var(--ink-2)}
.ep-figures td:last-child{
  text-align:right;font-family:var(--anton);font-size:25px;line-height:1;
  color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.ep-figures td:last-child strong{font-weight:400;color:var(--c,var(--marque))}
.ep-figures figcaption,.ep-figures .wp-element-caption,.ep-figures .ep-fig-source{
  font-family:var(--ui);font-size:12px;color:var(--ink-3);padding-top:10px;
}

/* ---------------------------------------------------------------------
   7. Budget par tranches
   --------------------------------------------------------------------- */
.article-body .ep-budget{background:var(--paper);border:1px solid var(--line);padding:6px 22px}
.ep-budget .ep-budget-title{
  font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding:14px 0 4px;margin:0;
}
.ep-budget>.ep-budget-row{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;
  padding:15px 0;border-bottom:1px solid var(--line-2);align-items:start;
}
.ep-budget>.ep-budget-row:last-child{border-bottom:0}
.ep-budget>.ep-budget-row::before{display:none}
.ep-budget-label{
  font-family:var(--anton);font-size:17px;line-height:1.15;color:#fff;
  background:var(--ink);padding:7px 11px;text-align:center;
}
.ep-budget>.ep-budget-row:nth-of-type(4n+1) .ep-budget-label{background:#177E5B}
.ep-budget>.ep-budget-row:nth-of-type(4n+2) .ep-budget-label{background:var(--marque)}
.ep-budget>.ep-budget-row:nth-of-type(4n+3) .ep-budget-label{background:#C97A0E}
.ep-budget>.ep-budget-row:nth-of-type(4n+4) .ep-budget-label{background:var(--flash)}
.ep-budget-text p{margin:0;font-family:var(--lecture);font-size:16px;line-height:1.55;color:var(--ink-2)}
@media (max-width:560px){
  .ep-budget>.ep-budget-row{grid-template-columns:1fr;gap:8px}
  .ep-budget-label{justify-self:start;padding:5px 12px}
}

/* ---------------------------------------------------------------------
   8. Étapes — le numéro devient un vrai repère typographique
   --------------------------------------------------------------------- */
.article-body .ep-steps{counter-reset:et;display:flex;flex-direction:column;gap:0}
.ep-steps .ep-step{
  counter-increment:et;position:relative;padding:20px 0 20px 62px;
  border-bottom:1px solid var(--line);background:transparent;
}
.ep-steps .ep-step:first-child{border-top:1px solid var(--line)}
.ep-steps .ep-step::before{
  content:counter(et);position:absolute;left:0;top:17px;
  font-family:var(--anton);font-size:34px;line-height:1;color:var(--c,var(--marque));
  width:44px;text-align:left;
}
.ep-step h2,.ep-step h3,.ep-step h4,.ep-step .ep-step-title{
  font-family:var(--ui);font-weight:700;font-size:18px;line-height:1.25;
  margin:0 0 7px;color:var(--ink);
}
.ep-step h2::after,.ep-step h3::after{display:none}
.ep-step p{margin:0 0 9px;font-family:var(--lecture);font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.ep-step p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------------
   9. Questions fréquentes
   --------------------------------------------------------------------- */
.article-body .ep-faq{border-top:2px solid var(--ink)}
.ep-faq details{border-bottom:1px solid var(--line);background:transparent;padding:0}
.ep-faq summary{
  cursor:pointer;list-style:none;padding:15px 40px 15px 0;position:relative;
  font-family:var(--ui);font-weight:700;font-size:16.5px;line-height:1.35;color:var(--ink);
}
.ep-faq summary::-webkit-details-marker{display:none}
.ep-faq summary::after{
  content:"";position:absolute;right:6px;top:22px;width:11px;height:11px;
  border-right:2.5px solid var(--c,var(--marque));border-bottom:2.5px solid var(--c,var(--marque));
  transform:rotate(45deg);transition:transform .2s;
}
.ep-faq details[open] summary::after{transform:rotate(-135deg);top:26px}
.ep-faq details[open] summary{color:var(--c,var(--marque))}
.ep-faq details>*:not(summary){
  font-family:var(--lecture);font-size:16.5px;line-height:1.65;color:var(--ink-2);
  margin:0 0 15px;padding-right:40px;
}

/* ---------------------------------------------------------------------
   10. Citation
   --------------------------------------------------------------------- */
.article-body .ep-quote{
  border-left:5px solid var(--c,var(--marque));padding:6px 0 6px 24px;background:transparent;
}
.ep-quote p{
  font-family:var(--anton);font-weight:400;font-size:26px;line-height:1.14;
  color:var(--ink);margin:0 0 10px;font-style:normal;
}
.ep-quote cite{
  font-family:var(--ui);font-size:12.5px;font-weight:600;font-style:normal;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
}

/* ---------------------------------------------------------------------
   11. Galerie
   --------------------------------------------------------------------- */
.article-body .ep-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.ep-gallery .wp-block-image{margin:0}
.ep-gallery .wp-block-image img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

/* ---------------------------------------------------------------------
   12. À lire aussi — renvoi interne
   --------------------------------------------------------------------- */
/* Carte d'origine : pastille d'icône teintée par la rubrique liée, texte au
   centre, flèche ronde à droite. Seules la typo et la palette changent. */
.article-body .ep-lireaussi{
  display:flex;align-items:center;gap:20px;background:#fff;
  border:1px solid var(--line);border-radius:18px;padding:16px 22px;
  color:var(--ink);text-decoration:none;
  box-shadow:0 2px 12px -7px rgba(11,14,19,.22);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.article-body .ep-lireaussi:hover{
  border-color:color-mix(in srgb,var(--cat,var(--marque)) 40%,transparent);
  box-shadow:0 20px 44px -26px rgba(11,14,19,.42);transform:translateY(-2px);
}
.ep-lireaussi-ico{
  width:54px;height:54px;border-radius:14px;flex-shrink:0;
  background:color-mix(in srgb,var(--cat,var(--marque)) 12%,#fff);
  display:flex;align-items:center;justify-content:center;
}
.ep-lireaussi-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ep-lireaussi-kicker{
  font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cat,var(--marque));
}
.ep-lireaussi-title{
  font-family:var(--ui);font-weight:700;font-size:18px;line-height:1.25;
  letter-spacing:-.01em;color:var(--ink);
}
.ep-lireaussi-meta{font-family:var(--ui);font-size:13px;color:var(--ink-3);text-transform:none;letter-spacing:0}
.ep-lireaussi-arrow{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--ink);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;transition:background .18s ease;position:static;
}
.ep-lireaussi-arrow::before{content:"\2192";position:static;width:auto;height:auto;background:none;border:0}
.ep-lireaussi-arrow::after{display:none}
.article-body .ep-lireaussi:hover .ep-lireaussi-arrow{background:var(--cat,var(--marque))}
.article-body a.ep-lireaussi,.article-body a.ep-lireaussi:hover,.ep-lireaussi *{text-decoration:none}

/* ---------------------------------------------------------------------
   13. Lettre type + bouton copier
   --------------------------------------------------------------------- */
.article-body .ep-lettre{background:var(--paper);border:1px solid var(--line);overflow:hidden}
.ep-lettre-tete{
  display:flex;align-items:center;gap:12px;padding:13px 18px;
  background:var(--ink);border:0;
}
.ep-lettre-titre{
  display:inline-flex;align-items:center;gap:10px;margin:0;color:#fff;
  font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
}
.ep-lettre-ico{background:#fff;width:17px;height:17px}
.ep-lettre-copier{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  background:var(--flash);color:#fff;font-family:var(--ui);font-weight:700;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;padding:9px 14px;border-radius:0;
}
.ep-lettre-copier:hover{background:#fff;color:var(--ink)}
.ep-lettre-copier:hover .ep-lettre-copier-ico{background:var(--ink)}
.ep-lettre-copier-ico{background:#fff;width:14px;height:14px}
.ep-lettre-copier.est-copie{background:#177E5B}
.ep-lettre-corps{
  padding:24px 26px;font-family:var(--lecture);font-size:16.5px;line-height:1.85;color:var(--ink-2);
}

/* ---------------------------------------------------------------------
   Neutralisation des restes de l'ancien habillage
   --------------------------------------------------------------------- */
/* Pas de neutralisation globale ici : les pseudo-éléments portent le fanion et
   l'étoile de « L'essentiel » ainsi que la pastille des encadrés « Bon à
   savoir ». Chaque bloc gère son propre décor plus haut. */



/* =====================================================================
   RACCORDS WORDPRESS — éléments produits par le thème qui n'existaient
   pas dans la maquette : fil d'Ariane, pagination, formulaire d'abonnement,
   menu mobile, barre de progression.
   ===================================================================== */

body.epotto-magazine{
  background:var(--wash);color:var(--ink);
  font-family:var(--ui);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;
}
.epotto-magazine .site-main{padding:0}
.epotto-magazine .container{max-width:1280px;margin:0 auto;padding:0 20px}

/* fil d'Ariane */
.epotto-magazine .breadcrumb{
  display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-3);
  padding:16px 0 24px;flex-wrap:wrap;font-family:var(--ui);
}
.epotto-magazine .breadcrumb a{font-weight:600;color:var(--ink-2);text-decoration:none}
.epotto-magazine .breadcrumb a:hover{color:var(--marque);text-decoration:underline}
.epotto-magazine .breadcrumb .cur{font-weight:600;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}

/* pagination */
.epotto-magazine .loadmore{display:flex;justify-content:center;padding:10px 0 46px}
.epotto-magazine .loadmore .nav-links{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.epotto-magazine .loadmore .page-numbers{
  min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 13px;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:var(--ui);font-weight:700;font-size:13.5px;text-decoration:none;
}
.epotto-magazine .loadmore .page-numbers:hover{border-color:var(--ink)}
.epotto-magazine .loadmore .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.epotto-magazine .loadmore .page-numbers.dots{border-color:transparent;background:transparent}

/* formulaire d'abonnement du thème, repris dans le bandeau noir */
/* Le formulaire du thème enveloppe la saisie dans .ep-sub-row et lui ajoute
   deux frères : le pot de miel anti-spam et le message d'état. C'est donc la
   RANGÉE qui porte le cadre blanc et la disposition, sinon le cadre s'étire
   sur toute la largeur alors que la rangée reste à la taille de son contenu. */
.epotto-magazine .nl .nl-f{border:0}
.epotto-magazine .nl .ep-sub{display:block;width:100%}
.epotto-magazine .nl .ep-sub-row{display:flex;gap:0;border:2px solid #fff}
.epotto-magazine .nl .ep-sub input[type="email"]{
  flex:1;min-width:0;border:0;padding:14px 15px;font-family:var(--ui);font-size:15px;
  background:transparent;color:#fff;border-radius:0;
}
.epotto-magazine .nl .ep-sub input::placeholder{color:#79828E}
.epotto-magazine .nl .ep-sub button{
  border:0;background:var(--flash);color:#fff;font-family:var(--ui);font-weight:700;
  font-size:13.5px;text-transform:uppercase;letter-spacing:.05em;padding:0 22px;
  cursor:pointer;border-radius:0;white-space:nowrap;
}
.epotto-magazine .nl .ep-sub button:hover{background:#fff;color:var(--ink)}
.epotto-magazine .nl .ep-sub-msg{color:#C9D0D8;font-size:13px;margin-top:8px;font-family:var(--ui)}

/* menu mobile (repris du thème, rhabillé) */
.epotto-magazine .mobile-nav{background:#fff;border-bottom:3px solid var(--ink)}
.epotto-magazine .mobile-nav-inner{display:flex;flex-direction:column;padding:10px 20px 16px}
.epotto-magazine .mnav-link{
  display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-2);
  font-family:var(--ui);font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;
}
.epotto-magazine .mnav-group{
  font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding:16px 0 6px;
}
.epotto-magazine .mnav-dot{width:9px;height:9px;flex:0 0 auto}
.epotto-magazine .mnav-count{margin-left:auto;font-size:12px;color:var(--ink-3);font-weight:500}

/* barre de progression de lecture */
/* Sur un article, la barre de progression REMPLACE le filet noir de l'en-tête :
   on garde les 3px (pas de saut de mise en page) mais seule la portion rouge
   se voit. Les autres gabarits conservent leur filet. */
.epotto-magazine .read-progress{height:3px;background:transparent}
.epotto-magazine .read-progress span{display:block;height:100%;background:var(--flash);width:0}
.epotto-magazine.single .tete{border-bottom-color:transparent}

/* recherche : le panneau qui s'ouvre sous la loupe, bande encre pleine largeur */
.epotto-magazine .nav-search{background:var(--ink);border-top:0;max-height:none;overflow:visible;opacity:1;transition:none}
.epotto-magazine .site-header.is-hidden .nav-search{max-height:none;opacity:1;border-top-color:transparent}
.epotto-magazine .nav-search-inner{display:flex;gap:16px;align-items:center;padding:12px 20px}
.epotto-magazine .nav-search input{
  flex:1;min-width:0;background:transparent;border:0;border-bottom:2px solid #fff;border-radius:0;-webkit-appearance:none;
  color:#fff;font-family:var(--ui);font-weight:600;font-size:clamp(17px,1.5vw,21px);line-height:1.2;padding:4px 0 7px;outline:none;
}
.epotto-magazine .nav-search input::placeholder{color:#79828E;font-weight:500}
.epotto-magazine .nav-search input:focus{border-bottom-color:var(--flash)}
.epotto-magazine .nav-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.epotto-magazine .nav-search button[type="submit"]{
  flex:0 0 auto;background:var(--flash);color:#fff;border:0;border-radius:0;cursor:pointer;
  font-family:var(--ui);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:12px 18px;line-height:1;
}
.epotto-magazine .nav-search button[type="submit"]:hover{background:#fff;color:var(--ink)}
.epotto-magazine .rech[aria-expanded="true"]{background:var(--ink);border-color:var(--ink)}
.epotto-magazine .rech[aria-expanded="true"] svg{stroke:#fff}
@media (max-width:640px){
  .epotto-magazine .nav-search-inner{gap:10px;padding:10px 20px}
  .epotto-magazine .nav-search button[type="submit"]{padding:12px 14px}
}

/* page de résultats : la requête en rouge, rubriques proposées quand il n'y a rien */
.epotto-magazine .rub-q{color:var(--flash)}
.epotto-magazine .rech-rubs{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 44px}
.epotto-magazine .rech-rubs a{
  font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding:11px 14px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--c);
}
.epotto-magazine .rech-rubs a:hover{border-color:var(--ink);border-left-color:var(--c)}

/* « Tous nos articles » : pastilles de filtre par rubrique. Posées dans home.php
   lors de la refonte, elles n'avaient jamais reçu de style et s'affichaient en
   texte brut. Même langage que les raccourcis de la recherche et la pagination :
   angles francs, capitales Archivo, carré de la couleur de rubrique. */
.epotto-magazine .filtres{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.epotto-magazine .fchip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ui);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  color:var(--ink);text-decoration:none;padding:10px 14px;background:#fff;border:1px solid var(--line);
  transition:border-color .12s linear,background-color .12s linear,color .12s linear;
}
.epotto-magazine .fchip::before{content:"";width:8px;height:8px;background:var(--c);flex:0 0 auto}
.epotto-magazine .fchip:hover{border-color:var(--ink);color:var(--ink)}
.epotto-magazine .fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.epotto-magazine .fchip.on:hover{color:#fff}
.epotto-magazine .fchip:focus-visible{outline:3px solid var(--marque);outline-offset:2px}
@media (max-width:640px){
  .epotto-magazine .filtres{gap:6px;margin-bottom:18px}
  .epotto-magazine .fchip{padding:9px 11px;font-size:12px;gap:7px}
}

/* page outil : l'outil d'abord, le texte ensuite, pas d'habillage d'article */
.epotto-magazine .outil-h{max-width:1026px;margin:0 auto;padding:6px 0 26px}
.epotto-magazine .outil-h h1{
  font-family:var(--anton);font-weight:400;
  font-size:clamp(33px,4.6vw,56px);line-height:1;letter-spacing:-.01em;
  margin:12px 0 0;text-wrap:balance;
}
.epotto-magazine .outil-chapo{
  font-family:var(--lecture);font-size:19px;line-height:1.55;color:var(--ink-2);
  margin:14px 0 0;max-width:72ch;
}
.epotto-magazine .outil-corps{max-width:1026px;margin:0 auto;padding-bottom:40px}
.epotto-magazine .outil-corps>.ep-carbu:first-child{margin-top:0}
/* le lien outil de la barre : rouge, avec une pastille « en direct » */
.epotto-magazine .nav .nav-outil{color:var(--flash)}
.epotto-magazine .nav .nav-outil::before{
  content:"";display:inline-block;width:6px;height:6px;background:var(--flash);
  margin-right:7px;vertical-align:1px;
}
@media (max-width:640px){
  .epotto-magazine .outil-h{padding-bottom:18px}
  .epotto-magazine .outil-chapo{font-size:17.5px}
}

/* accessibilité */
.epotto-magazine .screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

@media (max-width:640px){
  .epotto-magazine .breadcrumb{padding-bottom:16px}
}


/* =====================================================================
   PAGE À PROPOS — feuille scopée .apropos (source : apropos.css)
   ===================================================================== */
/* =====================================================================
   E'Potto — page « À propos ». Scope strict .apropos.
   Même grammaire que la home : filets épais, Anton, kickers, grilles,
   angles francs, aucune ombre, aucun dégradé.
   ===================================================================== */

.apropos{font-family:var(--ui);color:var(--ink);padding-bottom:8px}
.apropos *{box-sizing:border-box}
.apropos a{color:inherit;text-decoration:none}
.apropos a:focus-visible,.apropos button:focus-visible{outline:3px solid var(--marque);outline-offset:2px}
.apropos ul,.apropos ol{margin:0;padding:0;list-style:none}
.apropos p{margin:0}
.apropos h2,.apropos h3{font-weight:400;margin:0}
.apropos svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-1px}

/* kickers : texte en encre (AA garanti), la barre colorée garde --c */
.apropos .k{color:var(--ink-2)}

/* ---------- placeholders (à ne jamais laisser partir en prod) ---------- */
.apropos .ap-todo{
  display:inline;background:#FFF3C4;border:1px dashed #B58400;color:#4A3800;
  font-family:var(--ui);font-size:.8em;font-weight:600;font-style:normal;line-height:1.35;
  letter-spacing:0;text-transform:none;padding:1px 6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.apropos .ap-todo-lien{border-bottom:2px dashed #B58400;background:#FFF3C4;cursor:default}
.apropos .ap-ph{
  position:relative;overflow:hidden;display:grid;place-items:center;
  border:1px solid var(--line);
  background-color:var(--wash);
  background-image:repeating-linear-gradient(135deg,transparent 0 8px,var(--line) 8px 9px);
}
.apropos .ap-ph-45{aspect-ratio:4/5}
.apropos .ap-ph-32{aspect-ratio:3/2}
.apropos .ap-ph span{
  font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);background:var(--paper);border:1px solid var(--line);padding:7px 11px;
  text-align:center;max-width:88%;line-height:1.4;
}

/* ---------- tête de page ---------- */
.apropos .ap-fil{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;padding:16px 0 0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.apropos .ap-fil a:hover{color:var(--marque)}
.apropos .ap-fil [aria-current]{color:var(--ink)}
.apropos .ap-tete{border-bottom:3px solid var(--ink);padding:22px 0 0;margin-bottom:38px}
.apropos h1{
  font-family:var(--anton);font-weight:400;font-size:clamp(46px,7.2vw,92px);line-height:.95;
  letter-spacing:-.015em;margin:18px 0 20px;
}
.apropos .ap-chapo{font-family:var(--lecture);font-size:19px;line-height:1.55;max-width:68ch;color:var(--ink);margin:0 0 22px}
.apropos .ap-chapo a,.apropos .ap-lit a,.apropos .ap-fiche-b a[href],.apropos .ap-corr a,.apropos .ap-ml a,.apropos .ap-contact p a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.apropos .ap-chapo a:hover,.apropos .ap-lit a:hover,.apropos .ap-fiche-b a[href]:hover,.apropos .ap-corr a:hover,.apropos .ap-ml a:hover,.apropos .ap-contact p a:hover{color:var(--marque)}
.apropos .ap-sommaire{display:flex;flex-wrap:wrap;gap:0 22px;border-top:1px solid var(--line);padding:12px 0}
.apropos .ap-sommaire a{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:6px 0;border-bottom:3px solid transparent;margin-bottom:-3px}
.apropos .ap-sommaire a:hover{border-bottom-color:var(--flash);color:var(--flash)}

/* ---------- sections ---------- */
.apropos .ap-sec{margin:0 auto 52px}
.apropos .ap-sec-fin{margin-bottom:8px}
.apropos .ap-h{border-top:4px solid var(--c,var(--ink));padding-top:12px;margin-bottom:24px}
.apropos .ap-h h2,.apropos .ap-contact h2,.apropos .ap-ml h2{
  font-family:var(--anton);font-weight:400;font-size:clamp(30px,4.2vw,46px);line-height:.96;
  letter-spacing:-.01em;margin:8px 0 0;max-width:24ch;
}
.apropos .ap-lit p{font-family:var(--lecture);font-size:17.5px;line-height:1.6;max-width:68ch;margin:0 0 18px}
.apropos .ap-lit p:last-child{margin-bottom:0}
.apropos .ap-lit strong{font-weight:600}
.apropos .ap-intro{margin-bottom:22px}

/* mission : tags + citation */
.apropos .ap-tags{display:flex;flex-wrap:wrap;gap:10px;margin:-6px 0 20px}
.apropos .ap-tags a{
  display:inline-block;border:1.5px solid var(--ink);padding:8px 13px;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;line-height:1;text-decoration:none;
}
.apropos .ap-tags a::before{content:"";display:inline-block;width:8px;height:8px;background:var(--flash);margin:0 8px 0 0;vertical-align:0}
.apropos .ap-tags a:hover{background:var(--ink);color:#fff}
.apropos .ap-cite{
  margin:34px 0 0;background:var(--ink);color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:0 40px;align-items:center;padding:30px 34px;
}
.apropos .ap-cite blockquote{margin:0}
.apropos .ap-cite blockquote p{font-family:var(--lecture);font-size:clamp(22px,2.6vw,30px);line-height:1.3;font-weight:400;font-style:italic;color:#fff;max-width:36ch}
.apropos .ap-cite figcaption{border-left:4px solid var(--flash);padding-left:16px;display:flex;flex-direction:column;gap:4px}
.apropos .ap-cite figcaption strong{font-family:var(--anton);font-weight:400;font-size:24px;line-height:1;letter-spacing:.005em}
.apropos .ap-cite figcaption span{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#9AA3AE}
.apropos .ap-cite figcaption a{margin-top:8px;font-size:13px;font-weight:700;border-bottom:2px solid var(--flash);align-self:flex-start;padding-bottom:2px}
.apropos .ap-cite figcaption a:hover{color:var(--flash)}
.apropos .ap-cite figcaption a:focus-visible{outline-color:#fff}

/* rubriques */
.apropos .ap-rubs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.apropos .ap-rub{
  display:flex;flex-direction:column;height:100%;background:var(--paper);
  border:1px solid var(--line);border-top:4px solid var(--c);padding:14px 18px 16px;
}
.apropos .ap-rub .k{color:var(--ink-3);margin-bottom:10px}
.apropos .ap-rub strong{font-size:19px;font-weight:700;line-height:1.15;letter-spacing:-.005em;margin-bottom:8px}
.apropos .ap-rub p{font-family:var(--lecture);font-size:15.5px;line-height:1.5;color:var(--ink-2);margin:0 0 14px}
.apropos .ap-rub-a{margin-top:auto;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--c2,var(--c));display:inline-flex;align-items:center;gap:6px}
.apropos .ap-rub-a::after{content:"";width:18px;height:2px;background:var(--c2,var(--c));transition:width .15s}
.apropos .ap-rub:hover{border-color:var(--c)}
.apropos .ap-rub:hover strong{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--c)}
.apropos .ap-rub:hover .ap-rub-a::after{width:30px}

/* équipe */
.apropos .ap-eq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.apropos .ap-fiche{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--ink)}
.apropos .ap-fiche-h{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;padding:20px 20px 18px;border-bottom:1px solid var(--line-2);align-items:start}
.apropos .ap-fiche h3{font-family:var(--anton);font-weight:400;font-size:clamp(30px,3.4vw,40px);line-height:.95;letter-spacing:-.01em;margin:2px 0 12px}
.apropos .ap-fiche h3 .ap-todo{font-size:12px;letter-spacing:0;line-height:1.35;display:inline-block;margin-top:8px}
.apropos .ap-badges{display:flex;flex-wrap:wrap;gap:6px}
.apropos .ap-badges li{border:1.5px solid var(--ink);padding:5px 9px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;line-height:1}
.apropos .ap-fiche-note{margin-top:12px;font-size:12px;line-height:1.3}
.apropos .ap-fiche-b{padding:18px 20px 6px}
.apropos .ap-fiche-b p{font-family:var(--lecture);font-size:16px;line-height:1.58;margin:0 0 14px}
.apropos .ap-lbl{font-family:var(--ui);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);margin-right:4px}
.apropos .ap-fiche-f{margin-top:auto;border-top:1px solid var(--line-2);padding:14px 20px 16px;display:flex;flex-direction:column;gap:8px}
.apropos .ap-fiche-f li{font-size:13px;line-height:1.5}
.apropos .ap-fiche-f a{font-weight:700;border-bottom:2px solid var(--ink);padding-bottom:1px;display:inline-flex;align-items:center;gap:5px}
.apropos .ap-fiche-f a[href]:hover{color:var(--marque);border-color:var(--marque)}
.apropos .ap-fiche-f a.ap-todo-lien{border-bottom:2px dashed #B58400}
.apropos .ap-eq-fin{font-family:var(--lecture);font-style:italic;font-size:18px;line-height:1.5;text-align:center;max-width:62ch;margin:30px auto 0;padding:20px 12px 0;border-top:1px solid var(--line)}

/* méthode */
.apropos .ap-etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.apropos .ap-etape{padding:20px 22px 24px 0;border-right:1px solid var(--line);margin-right:22px}
.apropos .ap-etape:last-child{border-right:0;margin-right:0;padding-right:0}
.apropos .ap-num{display:block;font-family:var(--anton);font-weight:400;line-height:.9;letter-spacing:-.01em}
.apropos .ap-etape .ap-num{font-size:64px;color:var(--marque);margin-bottom:12px}
.apropos .ap-etape p{font-family:var(--lecture);font-size:16px;line-height:1.55}
.apropos .ap-etape strong{font-family:var(--ui);font-weight:700;font-size:16px;display:block;margin-bottom:4px}
.apropos .ap-meth-g{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;margin-top:24px;align-items:start}
.apropos .ap-meth-g .ap-ph{width:100%}
.apropos .ap-encadre{background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--c,var(--marque));padding:20px 24px}
.apropos .ap-encadre .k{margin-bottom:10px}
.apropos .ap-encadre p{font-family:var(--lecture);font-size:17.5px;line-height:1.58}
.apropos .ap-non{background:var(--ink);color:#fff;padding:26px 30px 28px;margin-top:24px}
.apropos .ap-non h3{font-family:var(--anton);font-size:22px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1;color:#fff;padding-left:12px;border-left:4px solid var(--flash);margin-bottom:14px}
.apropos .ap-non p{font-family:var(--lecture);font-size:17.5px;line-height:1.6;max-width:72ch;color:#E9ECEF}

/* IA */
.apropos .ap-ia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.apropos .ap-ia-col{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--c);padding:18px 22px 20px}
.apropos .ap-ia-col h3{font-family:var(--anton);font-size:22px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.apropos .ap-ia-col p,.apropos .ap-ia-col li{font-family:var(--lecture);font-size:16.5px;line-height:1.55}
.apropos .ap-ia-col p{margin:0 0 10px}
.apropos .ap-ia-col ul{margin:0 0 12px}
.apropos .ap-ia-col li{position:relative;padding-left:20px;margin-bottom:6px}
.apropos .ap-ia-col li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--c)}
.apropos .ap-regle{margin-top:26px;border-top:4px solid var(--ink);border-bottom:1px solid var(--ink);padding:18px 0 20px;display:flex;flex-direction:column;gap:8px}
.apropos .ap-regle strong{font-family:var(--anton);font-weight:400;font-size:clamp(28px,4vw,46px);line-height:.98;letter-spacing:-.01em;max-width:26ch}

/* engagements */
.apropos .ap-eng{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;margin-bottom:26px}
.apropos .ap-eng h3{font-family:var(--anton);font-weight:400;font-size:28px;line-height:1;letter-spacing:-.005em;margin-bottom:12px;padding-top:10px;border-top:3px solid var(--ink)}
.apropos .ap-eng p{font-family:var(--lecture);font-size:17px;line-height:1.6}
.apropos .ap-charte{background:var(--marque);color:#fff;padding:26px 30px 30px}
.apropos .ap-charte h3{font-family:var(--anton);font-weight:400;font-size:clamp(28px,3.2vw,36px);line-height:1;letter-spacing:-.005em;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.35)}
.apropos .ap-charte ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.apropos .ap-charte li{display:flex;flex-direction:column;gap:8px;border-left:1px solid rgba(255,255,255,.35);padding-left:14px}
.apropos .ap-charte .ap-num{font-size:56px;color:#fff}
.apropos .ap-charte li span:last-child{font-size:15px;font-weight:600;line-height:1.35}

/* financement */
.apropos .ap-fin{background:var(--paper);border:1px solid var(--line);padding:22px 24px;max-width:none}
.apropos .ap-fin p{max-width:68ch}
.apropos .ap-cmp{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer}
.apropos .ap-cmp:hover{color:var(--marque)}

/* corrections */
.apropos .ap-corr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.apropos .ap-corr li{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--flash);padding:16px 20px 20px}
.apropos .ap-corr .ap-num{font-size:56px;color:var(--flash);margin-bottom:10px}
.apropos .ap-corr p{font-family:var(--lecture);font-size:16.5px;line-height:1.55}

/* chiffres */
.apropos .ap-tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.apropos .ap-tuile{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--ink);padding:18px 20px 20px;min-height:150px}
.apropos .ap-tuile strong{font-family:var(--anton);font-weight:400;font-size:clamp(28px,3.6vw,46px);line-height:.95;letter-spacing:-.01em;margin-bottom:10px;overflow-wrap:anywhere}
.apropos .ap-tuile span{font-size:14px;line-height:1.45;color:var(--ink-2)}
.apropos .ap-tuile .ap-btn{margin-top:14px;align-self:flex-start}
.apropos .ap-note{margin-top:14px;font-size:13px;font-weight:600;color:var(--ink-2);padding-left:12px;border-left:3px solid var(--ink)}

/* boutons */
.apropos .ap-btn{display:inline-block;background:var(--ink);color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:12px 20px;line-height:1;border:0}
.apropos .ap-btn:hover{background:var(--marque)}
.apropos .ap-btn-flash{background:var(--flash)}
.apropos .ap-btn-flash:hover{background:var(--ink)}

/* contact */
.apropos .ap-contact{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--flash);padding:36px 24px 34px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.apropos .ap-contact h2{margin:0}
.apropos .ap-mail{font-family:var(--anton);font-weight:400;font-size:clamp(28px,6.5vw,72px);line-height:1;letter-spacing:-.01em;color:var(--marque);overflow-wrap:anywhere;border-bottom:4px solid var(--marque);padding-bottom:4px;margin:6px 0}
.apropos .ap-mail:hover{color:var(--ink);border-color:var(--ink)}
.apropos .ap-contact p{font-family:var(--lecture);font-size:17px;line-height:1.55;max-width:60ch}
.apropos .ap-badges-c{justify-content:center}
.apropos .ap-contact .ap-btn{margin-top:6px}
.apropos .ap-contact-post{font-family:var(--ui);font-size:13px;color:var(--ink-2)}

/* mentions légales */
.apropos .ap-ml{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--ink);padding:20px 24px 22px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.apropos .ap-ml h2{font-size:24px;margin:6px 0 14px;color:var(--ink)}
.apropos .ap-ml ul{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.apropos .ap-ml li{padding-left:12px;border-left:2px solid var(--line)}
.apropos .ap-ml p{margin-bottom:10px;max-width:80ch}
.apropos .ap-ml-maj{font-style:italic;margin-bottom:0}
.apropos .ap-ml .ap-todo{font-size:.92em}

/* ancres : dégager la tête sticky */
.apropos [id]{scroll-margin-top:84px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .apropos .ap-rubs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apropos .ap-etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apropos .ap-etape:nth-child(2){border-right:0;margin-right:0;padding-right:0}
  .apropos .ap-etape:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .apropos .ap-cite{grid-template-columns:minmax(0,1fr) 220px;gap:0 28px;padding:26px 26px}
  .apropos .ap-charte ol{grid-template-columns:1fr;gap:12px}
  .apropos .ap-charte li{flex-direction:row;align-items:center;gap:16px;border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.35);padding-top:12px}
  .apropos .ap-charte .ap-num{font-size:44px;min-width:40px}
  .apropos .ap-charte li span:last-child{font-size:17px}
  .apropos .ap-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apropos .ap-fiche-h{grid-template-columns:140px minmax(0,1fr)}
}
@media (max-width:720px){
  .apropos .ap-tete{margin-bottom:30px}
  .apropos .ap-sec{margin-bottom:40px}
  .apropos .ap-rubs,.apropos .ap-eq,.apropos .ap-etapes,.apropos .ap-meth-g,.apropos .ap-ia,.apropos .ap-eng,.apropos .ap-corr,.apropos .ap-tuiles{grid-template-columns:1fr}
  .apropos .ap-cite{grid-template-columns:1fr;padding:22px 20px;gap:18px 0}
  .apropos .ap-cite blockquote p{max-width:none}
  .apropos .ap-etapes{border-top:0}
  .apropos .ap-etape,.apropos .ap-etape:nth-child(2),.apropos .ap-etape:nth-child(-n+2){display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 16px;align-items:start;border-right:0;margin-right:0;padding:16px 0;border-top:1px solid var(--line);border-bottom:0}
  .apropos .ap-etape .ap-num{font-size:48px;margin:0}
  .apropos .ap-eng{gap:22px}
  .apropos .ap-fiche-h{grid-template-columns:1fr;gap:14px}
  .apropos .ap-fiche-h .ap-ph{max-width:180px}
  .apropos .ap-non,.apropos .ap-charte{padding:20px 18px 22px}
  .apropos .ap-tuiles{gap:10px}
  .apropos .ap-tuile{padding:14px 14px 16px;min-height:0}
  .apropos .ap-tuile strong{font-size:clamp(28px,8vw,40px)}
  .apropos .ap-fin{padding:18px 16px}
  .apropos .ap-contact{padding:28px 16px 26px}
  .apropos .ap-ml{padding:16px 16px 18px}
}
/* Version publique sans photo : initiales, angles francs */
.apropos .ap-ini{background-image:none;background-color:var(--ink);color:#fff}
.apropos .ap-ini span{font-family:var(--anton);font-size:52px;line-height:1;letter-spacing:.02em;text-transform:none;background:transparent;border:0;color:#fff;padding:0}
.apropos .ap-meth-g:not(:has(.ap-ph)){grid-template-columns:1fr}
/* Blocs réservés aux administrateurs : repérés en pointillé en maquette et en back-office */
.apropos .ap-adm{outline:2px dashed #B58400;outline-offset:2px}

/* ajustements v2 */
/* Un seul filet entre l'en-tête et la première section */
.apropos .ap-tete{border-bottom:0;margin-bottom:34px}
/* Rubriques : liste sur deux colonnes, sans cartes */
.apropos .ap-rubl{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;border-top:1px solid var(--line)}
.apropos .ap-rubl li{border-bottom:1px solid var(--line)}
.apropos .ap-rubl a{display:flex;gap:14px;align-items:flex-start;padding:14px 0;color:var(--ink);text-decoration:none}
.apropos .ap-rubl-p{flex:0 0 12px;height:12px;margin-top:5px;background:var(--c)}
.apropos .ap-rubl-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.apropos .ap-rubl strong{font-family:var(--ui);font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-.005em}
.apropos .ap-rubl-t>span{font-family:var(--lecture);font-size:15px;line-height:1.45;color:var(--ink-2)}
.apropos .ap-rubl a:hover strong{color:var(--marque);text-decoration:underline;text-underline-offset:3px}
@media (max-width:720px){.apropos .ap-rubl{grid-template-columns:1fr}}
/* Contact : un titre, une phrase, l'adresse */
.apropos .ap-lit a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.apropos .ap-lit a:hover{color:var(--marque)}

/* ajustements v3 */
/* Le texte occupe toute la largeur de la page, comme le reste du site */
.apropos .ap-tete h1,.apropos .ap-h h2,.apropos .ap-chapo,.apropos .ap-lit p{max-width:none}
/* Citation du fondateur : dans le fil du texte, un filet rouge, pas de bloc noir */
.apropos .ap-cite{display:block;margin:26px 0 0;padding:6px 0 6px 22px;background:transparent;color:var(--ink);border-left:4px solid var(--flash)}
.apropos .ap-cite blockquote p{font-size:20px;line-height:1.45;color:var(--ink);max-width:none}
.apropos .ap-cite figcaption{border-left:0;padding:0;margin-top:10px;display:flex;flex-direction:row;align-items:baseline;gap:8px}
.apropos .ap-cite figcaption strong{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.apropos .ap-cite figcaption span{color:var(--ink-3)}
/* Rubriques : sept tuiles de couleur, le nom seul, saisies d'un coup d'œil */
.apropos .ap-rubv{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.apropos .ap-rubv a{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:5/4;padding:14px 14px 12px;background:var(--c);color:#fff;text-decoration:none}
.apropos .ap-rubv a:hover{filter:brightness(.9)}
.apropos .ap-rubv a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.apropos .ap-rubv-n{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.14em;opacity:.85}
.apropos .ap-rubv strong{font-family:var(--anton);font-weight:400;font-size:clamp(19px,1.6vw,24px);line-height:.98;letter-spacing:-.005em;hyphens:auto;overflow-wrap:anywhere}
@media (max-width:480px){.apropos .ap-rubv{grid-template-columns:repeat(2,minmax(0,1fr))}}