/* =========================================================
   POLICES
   Servies depuis le domaine du site, aucune requete vers un tiers.
   Archivo et IBM Plex Mono, licence SIL Open Font 1.1.
   Fichiers variables reduits au latin et aux accents francais.
   ========================================================= */
@font-face{
  font-family:'Archivo';
  src:url('/polices/archivo.woff') format('woff-variations'),
      url('/polices/archivo.woff') format('woff');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/polices/plex-mono.woff') format('woff-variations'),
      url('/polices/plex-mono.woff') format('woff');
  font-weight:100 700;
  font-style:normal;
  font-display:swap;
}


/* =========================================================
   ERIVAN — CE QUI TIENT
   Direction "preuve": on montre le resultat, pas le spectacle.
   Comparateur avant/apres, carte du territoire, chiffres.
   Mobile d'abord. Aucune librairie.
   ========================================================= */

:root,[data-theme="clair"]{
  --papier:#FAFAF8; --encre:#0B0B0B; --surface:#EDEDE9;
  --gris:#52525A; --gris-2:#65656B; --ligne:rgba(11,11,11,.15);
  --nuit:#0B0B0B; --sur-nuit:#FAFAF8; --signal:#C8410E;
}
[data-theme="sombre"]{
  --papier:#0B0B0B; --encre:#FAFAF8; --surface:#141414;
  --gris:#9C9C9A; --gris-2:#87878A; --ligne:rgba(250,250,248,.17);
  --nuit:#000000; --sur-nuit:#FAFAF8; --signal:#FF7A45;
}
:root{--gab:1440px;--marge:18px;
  --f:'Archivo','Helvetica Neue',Arial,sans-serif;
  --m:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --e:cubic-bezier(.16,1,.3,1);--e2:cubic-bezier(.76,0,.24,1)}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--papier);color:var(--encre);font-family:var(--f);font-size:16.5px;
  line-height:1.6;font-variation-settings:'wdth' 100;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
h1[tabindex="-1"]:focus{outline:none}
.gab{width:100%;max-width:var(--gab);margin-inline:auto;padding-inline:var(--marge)}

.aff{font-weight:800;font-variation-settings:'wdth' 92;line-height:.94;letter-spacing:-.028em}
.t1{font-size:clamp(31px,8.4vw,96px)}
.t2{font-size:clamp(26px,6vw,68px)}
.t3{font-size:clamp(22px,4.6vw,46px)}
.micro{font-family:var(--m);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal)}
.lede{color:var(--gris);font-size:17px;max-width:58ch}

/* donnee a valider: soulignement pointille discret */
.aval{border-bottom:2px dotted var(--signal);padding-bottom:2px}

.evite{position:absolute;left:-9999px;top:0;z-index:600;background:var(--encre);
  color:var(--papier);padding:13px 20px;font-weight:800}
.evite:focus{left:var(--marge);top:12px}

/* ---------------- navigation ---------------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:420;transition:background .45s var(--e)}
.nav.plein{background:var(--papier);border-bottom:1px solid var(--ligne)}
.nav-in{display:flex;align-items:center;gap:12px;height:58px;width:100%;max-width:var(--gab);
  margin-inline:auto;padding-inline:var(--marge)}
.marque{font-size:17px;font-weight:800;letter-spacing:.34em;text-transform:uppercase;
  font-variation-settings:'wdth' 96}
.nav-liens{display:none}
.outils{display:flex;align-items:center;gap:4px;margin-left:auto}
.theme,.bascule{background:none;border:0;color:inherit;cursor:pointer;width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center}
.theme svg{width:16px;height:16px;opacity:.65}
.theme:hover svg{opacity:1}
.theme .soleil{display:none}
[data-theme="sombre"] .theme .soleil{display:block}
[data-theme="sombre"] .theme .lune{display:none}
/* un seul trait, comme la maquette; il se croise en X a l'ouverture */
.bascule{width:84px;justify-content:flex-end;position:relative}
.bascule span{display:block;width:70px;height:2px;background:currentColor;
  transition:transform .45s var(--e),opacity .25s var(--e),width .45s var(--e)}
.bascule span:nth-child(2),.bascule span:nth-child(3){position:absolute;right:0;width:26px;opacity:0}
.bascule[aria-expanded=true] span:nth-child(1){opacity:0;width:26px}
.bascule[aria-expanded=true] span:nth-child(2){opacity:1;transform:rotate(45deg)}
.bascule[aria-expanded=true] span:nth-child(3){opacity:1;transform:rotate(-45deg)}
.nav:not(.plein){color:#FFF}
.voile{position:fixed;inset:0;z-index:410;background:var(--nuit);color:var(--sur-nuit);
  display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 var(--marge);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--e2);pointer-events:none}
.voile.ouvert{clip-path:inset(0 0 0 0);pointer-events:auto}
/* menu ouvert: la barre reste visible par-dessus, sans fond, pour fermer */
body.menu-ouvert .nav{background:transparent;border-color:transparent;color:var(--sur-nuit)}
.voile a{font-size:clamp(27px,8vw,54px);font-weight:800;font-variation-settings:'wdth' 92;
  letter-spacing:-.03em;line-height:1.1;padding:6px 0;opacity:.45;transition:opacity .3s var(--e)}
.voile a:hover,.voile a[aria-current=page]{opacity:1}
.voile .langue{font-family:var(--m);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;font-variation-settings:normal;margin-top:22px;opacity:.76}

/* ---------------- entete ---------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;background:#000;color:#FFF;padding:58px 0 30px}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;filter:brightness(.52)}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 40%,rgba(0,0,0,.78))}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--gab);margin-inline:auto;
  padding-inline:var(--marge)}
.hero .micro{color:var(--signal);display:block;margin-bottom:12px}
[data-theme="clair"] .hero .micro{color:#FF7A45}
.hero .lede{color:rgba(255,255,255,.86);font-size:16px;max-width:40ch;margin-top:16px}
.hero .btn{margin-top:22px}
.hero.breve{min-height:74svh}

.ln{display:block;overflow:hidden}
.ln > span{display:block;transform:translateY(108%);transition:transform 1s var(--e)}
.pret .ln > span{transform:none}
.ln:nth-child(2) > span{transition-delay:.07s}
.fd{opacity:0;transform:translateY(12px);transition:opacity .9s var(--e),transform .9s var(--e)}
.pret .fd{opacity:1;transform:none}
.pret .lede{transition-delay:.32s}
.pret .btn{transition-delay:.42s}

.btn{display:inline-flex;align-items:center;gap:11px;background:#FFF;color:#0B0B0B;
  padding:14px 26px;font-family:var(--m);font-weight:600;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;transition:gap .35s var(--e)}
.btn:hover{gap:18px}
.btn svg{width:13px;height:13px;flex:0 0 auto}
.btn.encre{background:var(--encre);color:var(--papier)}
.btn.encre:hover{background:var(--signal);color:#FFF}

/* =========================================================
   BANDE DE PREUVE — chiffres qui montent au defilement
   ========================================================= */
.preuve{background:var(--nuit);color:var(--sur-nuit);padding-block:38px}
.chiffres{display:grid;gap:0;border-top:1px solid rgba(250,250,248,.2)}
.ch{padding-block:20px;border-bottom:1px solid rgba(250,250,248,.2)}
.ch b{display:block;font-size:clamp(34px,11vw,84px);font-weight:800;
  font-variation-settings:'wdth' 92;line-height:.9;letter-spacing:-.035em}
.ch span{font-family:var(--m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(250,250,248,.66);display:block;margin-top:9px}
.preuve .aval{border-bottom-color:var(--signal)}

/* =========================================================
   COMPARATEUR AVANT / APRES — signature
   ========================================================= */
.fiche{border-top:1px solid var(--ligne);padding-block:34px}
.fiche .ref{font-family:var(--m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--signal)}
.fiche h3{font-size:clamp(23px,5.6vw,42px);font-weight:800;font-variation-settings:'wdth' 92;
  letter-spacing:-.028em;line-height:1.02;margin:9px 0 12px}
.fiche p{color:var(--gris);font-size:15.5px;max-width:46ch}
.meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px}
.meta div{min-width:0}
.meta dt{font-family:var(--m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris-2)}
.meta dd{font-size:15px;font-weight:600;margin-top:3px}

.comp{position:relative;margin-top:20px;overflow:hidden;background:var(--surface);
  aspect-ratio:16/10;touch-action:pan-y}
.comp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comp .apres{clip-path:inset(0 0 0 var(--x,50%))}
.comp .poignee{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#FFF;
  z-index:3;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.comp .poignee::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:42px;height:42px;background:#FFF;border-radius:50%;
  box-shadow:0 2px 12px rgba(0,0,0,.35)}
.comp .poignee::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:14px;height:9px;z-index:1;
  background:linear-gradient(90deg,var(--encre) 0 3px,transparent 3px 5.5px,var(--encre) 5.5px 8.5px,
    transparent 8.5px 11px,var(--encre) 11px 14px)}
.comp input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  z-index:4;margin:0;pointer-events:none}
.comp{cursor:ew-resize;user-select:none;-webkit-user-select:none}
.comp img{pointer-events:none;-webkit-user-drag:none}
.comp .etiq{position:absolute;bottom:12px;z-index:2;font-family:var(--m);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#FFF;background:rgba(0,0,0,.62);
  padding:6px 10px}
.comp .etiq.g{left:12px}
.comp .etiq.d{right:12px}

/* =========================================================
   CARTE DU TERRITOIRE
   ========================================================= */
.carte{position:relative;margin-top:26px}
.carte svg{width:100%;height:auto;display:block}
.carte .terre{fill:var(--surface);stroke:var(--ligne);stroke-width:1}
.carte .pt{fill:var(--signal);cursor:pointer;transition:r .3s var(--e)}
.carte .pt:hover,.carte .pt:focus{r:9}
.carte .anneau{fill:none;stroke:var(--signal);stroke-width:1.4;opacity:.45}
.carte .nom{font-family:var(--m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  fill:var(--gris);pointer-events:none}
.bureaux{margin-top:22px;border-top:1px solid var(--ligne)}
.bur{display:flex;flex-direction:column;gap:3px;padding-block:15px;
  border-bottom:1px solid var(--ligne);transition:padding-left .4s var(--e)}
.bur:hover{padding-left:9px}
.bur .prov{font-family:var(--m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris-2)}
.bur h4{font-size:clamp(18px,4.8vw,26px);font-weight:800;font-variation-settings:'wdth' 92;
  letter-spacing:-.02em}
.bur a{color:var(--gris);font-size:15px;padding-block:7px;display:inline-block;min-height:30px}
.bur a:hover{color:var(--signal)}
.bur .adr{color:var(--gris);font-size:14px}
.sec.nuit .bur .adr{color:rgba(250,250,248,.7)}

/* ---------------- sections ---------------- */
.sec{padding-block:52px}
.sec.nuit{background:var(--nuit);color:var(--sur-nuit)}
.sec.nuit .lede,.sec.nuit p{color:rgba(250,250,248,.8)}
.sec.nuit .btn{background:#FFF;color:#0B0B0B}
.tete .micro{display:block;margin-bottom:12px}
.tete .lede{margin-top:18px}
.tete .btn{margin-top:24px}

/* liste de services sobre */
.serv{border-top:1px solid var(--ligne);margin-top:28px}
.sv{display:block;border-bottom:1px solid var(--ligne);padding-block:22px;
  transition:padding-left .4s var(--e)}
.sv:hover{padding-left:10px}
.sv .n{font-family:var(--m);font-size:10.5px;letter-spacing:.2em;color:var(--signal)}
.sv h3{font-size:clamp(22px,5.4vw,40px);font-weight:800;font-variation-settings:'wdth' 92;
  letter-spacing:-.028em;line-height:1.02;margin:7px 0 8px}
.sv p{color:var(--gris);font-size:15.5px;max-width:46ch}
.sec.nuit .serv,.sec.nuit .sv{border-color:rgba(250,250,248,.2)}
.sec.nuit .sv p{color:rgba(250,250,248,.78)}

/* image pleine */
.tableau{position:relative;overflow:hidden}
.tableau img{width:100%;height:clamp(300px,64svh,760px);object-fit:cover}
.tableau .sur{position:absolute;inset:auto 0 0 0;z-index:2;color:#FFF;padding:0 var(--marge) 24px;
  width:100%;max-width:var(--gab);margin-inline:auto;left:0;right:0;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.74))}
.tableau .sur .micro{color:#FF7A45;display:block;margin-bottom:9px}

/* appels */
.paire{border-top:1px solid var(--ligne)}
.paire > a{display:block;padding:30px var(--marge);border-bottom:1px solid var(--ligne);
  transition:background .4s var(--e),color .4s var(--e)}
.paire > a:hover{background:var(--nuit);color:var(--sur-nuit)}
.paire h3{font-size:clamp(21px,5.6vw,38px);font-weight:800;font-variation-settings:'wdth' 92;
  letter-spacing:-.028em;line-height:1.02}
.paire p{font-size:15px;color:var(--gris);margin-top:9px;transition:color .4s var(--e)}
.paire > a:hover p{color:rgba(250,250,248,.8)}
.paire .fl{display:inline-flex;align-items:center;gap:10px;margin-top:17px;font-family:var(--m);
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:gap .35s var(--e)}
.paire > a:hover .fl{gap:18px}
.paire svg{width:15px;height:15px}

/* formulaires */
.form{display:grid;gap:18px;max-width:700px;margin-top:26px}
.champ{display:flex;flex-direction:column;gap:7px}
.champ label{font-family:var(--m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris);font-weight:600}
.champ input,.champ textarea,.champ select{width:100%;max-width:100%;background:transparent;border:0;
  border-bottom:2px solid var(--ligne);color:var(--encre);font-family:inherit;font-size:16px;
  padding:10px 0;transition:border-color .3s var(--e)}
.champ input:focus,.champ textarea:focus,.champ select:focus{border-bottom-color:var(--signal);outline:none}
.champ textarea{resize:vertical;min-height:110px}
.consent{display:flex;gap:11px;align-items:flex-start;color:var(--gris);font-size:13.5px;line-height:1.5}
.consent input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--signal)}
.sec.nuit .champ label{color:rgba(250,250,248,.8)}
.sec.nuit .champ input,.sec.nuit .champ textarea,.sec.nuit .champ select{
  color:var(--sur-nuit);border-bottom-color:rgba(250,250,248,.34)}
.sec.nuit .champ option{color:#0B0B0B;background:#FFF}
.sec.nuit .consent{color:rgba(250,250,248,.82)}

/* pied */
footer{background:var(--nuit);color:var(--sur-nuit);padding-top:42px}
.pied-h{display:grid;gap:24px;padding:0 var(--marge) 32px;max-width:var(--gab);margin-inline:auto}
.pied-h h5{font-family:var(--m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,250,248,.5);font-weight:600;margin-bottom:12px}
.pied-h a,.pied-h p{color:rgba(250,250,248,.8);display:block;font-size:15px;
  padding-block:6px;min-height:28px}
.pied-h a:hover{color:var(--signal)}
.pied-b{border-top:1px solid rgba(250,250,248,.2);display:flex;flex-direction:column;gap:11px;
  padding:17px var(--marge);max-width:var(--gab);margin-inline:auto}
.pied-b a,.pied-b span{font-family:var(--m);color:rgba(250,250,248,.55);font-size:10px;
  letter-spacing:.15em;text-transform:uppercase}
.pied-b a:hover{color:var(--sur-nuit)}
.soc{display:flex;gap:16px}
.legende{background:var(--surface);color:var(--gris);font-family:var(--m);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:14px var(--marge);text-align:center;
  border-top:1px solid var(--ligne)}
.legende i{font-style:normal;border-bottom:2px dotted var(--signal);padding-bottom:1px}

.rv{opacity:0;transform:translateY(20px);transition:opacity .85s var(--e),transform .85s var(--e)}
.rv.vu{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}

/* ========================= TABLETTE ========================= */
@media(min-width:48em){
  :root{--marge:34px}
  body{font-size:17px}
  .nav-in{height:70px}
  .lede{font-size:19px}
  .sec{padding-block:88px}
  .preuve{padding-block:64px}
  .chiffres{grid-template-columns:1fr 1fr;column-gap:40px}
  .ch{padding-block:26px}
  .hero .lede{font-size:18px;max-width:46ch}
  .fiche{padding-block:56px;display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:start}
  .comp{margin-top:0}
  .meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
  .bur{flex-direction:row;align-items:baseline;gap:22px;padding-block:19px}
  .bur h4{flex:0 0 auto;min-width:190px}
  .bur a{margin-left:auto;white-space:nowrap}
  .bur .adr{flex:1 1 auto;color:var(--gris);font-size:14px}
  .paire{display:grid;grid-template-columns:1fr 1fr}
  .paire > a{border-bottom:0;border-right:1px solid var(--ligne);padding:50px var(--marge);min-height:250px}
  .paire > a:last-child{border-right:0}
  .pied-h{grid-template-columns:repeat(3,1fr);gap:38px}
  .pied-b{flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:15px}
}

/* ========================= BUREAU ========================= */
@media(min-width:64em){
  :root{--marge:54px}
  .nav-in{height:78px}
  .nav-liens{display:flex;gap:24px;margin-left:auto;align-items:center}
  .nav-liens a{font-family:var(--m);font-size:11px;font-weight:600;letter-spacing:.13em;
    text-transform:uppercase;padding:6px 0;white-space:nowrap;opacity:.76;
    transition:opacity .3s var(--e);position:relative}
  .nav-liens a:hover,.nav-liens a[aria-current=page]{opacity:1}
  .nav-liens a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:0;
    height:2px;background:var(--signal)}
  .nav-liens .langue{margin-left:10px;padding-left:22px;border-left:1px solid currentColor;
    border-image:linear-gradient(transparent 25%,currentColor 25% 75%,transparent 75%) 1;opacity:.76}
  .outils{margin-left:18px}
  .bascule{display:none}
  .sec{padding-block:126px}
  .preuve{padding-block:92px}
  .chiffres{grid-template-columns:repeat(4,1fr);column-gap:34px}
  .fiche{grid-template-columns:1fr 1.5fr;gap:64px;padding-block:80px}
  .carte-bloc{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center}
  .carte{margin-top:0}
  .bureaux{margin-top:0}
  .paire > a{padding:76px var(--marge);min-height:300px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ln > span{transform:none}
  .rv,.fd{opacity:1;transform:none}
}

/* ---- sections nuit: signal et gris eclaircis pour rester lisibles ---- */
.sec.nuit .micro,.preuve .micro{color:#FF9166}
.sec.nuit .bur .prov,.sec.nuit .meta dt{color:rgba(250,250,248,.72)}
.sec.nuit .bur a{color:rgba(250,250,248,.8)}
.sec.nuit .bur a:hover{color:#FF9166}
.sec.nuit .sv .n,.sec.nuit .fiche .ref{color:#FF9166}
.sec.nuit .carte .terre{fill:rgba(250,250,248,.06);stroke:rgba(250,250,248,.22)}
.sec.nuit .carte .pt,.sec.nuit .carte .anneau{fill:#FF9166;stroke:#FF9166}
.sec.nuit .carte .anneau{fill:none}
.sec.nuit .carte .nom{fill:rgba(250,250,248,.72)}
.sec.nuit .bureaux,.sec.nuit .bur{border-color:rgba(250,250,248,.2)}


/* =========================================================
   PAGES INTERIEURES
   ========================================================= */

/* listes de prestations sous un service */
.pts{margin-top:14px;display:grid;gap:5px;max-width:62ch}
.pts li{position:relative;padding-left:17px;color:var(--gris);font-size:14.5px;line-height:1.5}
.pts li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;
  background:var(--signal)}
.sec.nuit .pts li{color:rgba(250,250,248,.78)}

/* figure encadree, quand il n'y a pas de comparatif avant / apres */
.cadre{margin-top:20px;background:var(--surface);overflow:hidden}
.cadre img{display:block;width:100%;height:auto}

/* texte long: pages legales */
.prose{max-width:68ch}
.prose h2{margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--gris);font-size:16px;line-height:1.62;margin-bottom:13px}
.prose ul{margin:0 0 15px;display:grid;gap:5px}
.prose li{position:relative;padding-left:17px;color:var(--gris);font-size:15.5px;line-height:1.55}
.prose li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:1px;
  background:var(--signal)}

/* champ piege a robots: hors ecran, jamais affiche */
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.etat{margin-top:14px;font-family:var(--m);font-size:12px;letter-spacing:.04em;min-height:18px}
.etat[data-ton=ok]{color:var(--signal)}
.etat[data-ton=erreur]{color:var(--signal)}

/* =========================================================
   EQUIPE
   ========================================================= */
.eq{margin-top:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px}
.eq figure{margin:0}
/* le fond des vignettes est le meme que celui incruste dans les photos,
   dans les deux themes: aucune bordure visible autour du portrait */
.eq .vign{background:#EDEDE9;overflow:hidden;aspect-ratio:4/5}
.eq img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.eq figcaption{padding-top:11px}
.eq .nom-p{display:block;font-weight:800;font-size:15.5px;letter-spacing:-.01em;line-height:1.2}
.eq .role{display:block;font-family:var(--m);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris-2);margin-top:5px;line-height:1.4}


/* =========================================================
   VALEURS
   ========================================================= */
.vals{margin-top:26px;display:flex;flex-wrap:wrap;gap:9px}
.vals li{font-family:var(--m);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  border:1px solid var(--ligne);padding:10px 15px;color:var(--gris)}
.sec.nuit .vals li{border-color:rgba(250,250,248,.25);color:rgba(250,250,248,.82)}

@media(min-width:48em){
  .eq{grid-template-columns:repeat(3,1fr);gap:26px 20px}
}
@media(min-width:64em){
  .eq{grid-template-columns:repeat(4,1fr);gap:34px 24px}
  .pts{grid-template-columns:1fr 1fr;max-width:none;column-gap:34px}
}