/* Sébastien Leroy, site sur mesure (étape 3, 14 novembre 2026)
   Feuille commune à toutes les pages, reprise des planches de la toile Design (version 100).
   Ordinateur au-dessus de 900 px, téléphone en dessous (planches de 1440 et 390 px). */

@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/polices/eb-garamond-400.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/polices/eb-garamond-400-italique.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url(/polices/geist-400.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(/polices/geist-500.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url(/polices/geist-700.woff2) format('woff2')}

:root{
  --creme:#F8E9DF;--encre:#272728;--sable:#EED9CB;--filet:#D3C7BE;--gris:#615D5B;--gris-clair:#9A928D;--pierre:#B9AFA8;
  --brique:#C4512F;--brique-fonce:#B4432A;--brique-survol:#BA482B;--brique-claire:#EB704E;--filet-sombre:#464444;
  --serif:'EB Garamond',Garamond,'Times New Roman',serif;--sans:'Geist','Helvetica Neue',Arial,sans-serif;
  --courbe:cubic-bezier(.22,1,.36,1);
  --courbe-deplacement:cubic-bezier(.77,0,.175,1);
  color-scheme:light;
}

/* ------------------------------------------------------------------ socle */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px;scrollbar-color:var(--pierre) var(--creme)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--creme);color:var(--encre);font-family:var(--sans);text-wrap:pretty;-webkit-font-smoothing:antialiased}
main{display:flex;flex-direction:column}
#contenu:focus{outline:none}
h1,h2,h3,h4,dt,dd,figcaption,blockquote,label,legend{text-wrap:balance}
/* titres : un mot trop long pour la ligne se coupe plutôt que de déborder ; un titre en deux parties (retour à la ligne
   puis italique) s'équilibre partie par partie, sans mot seul en dernière ligne */
h1,h2,h3,h4,.titre-carte,.carrousel-titre{overflow-wrap:break-word}
a[href^="mailto:"]{overflow-wrap:anywhere}
:is(h1,h2,h3,.titre-carte)>br+em{display:block;text-wrap:balance}
img,svg,video{max-width:100%}
img{display:block;height:auto}
picture{display:contents}
[hidden]{display:none!important}
a{color:var(--encre)}
button{font:inherit}
a,button,label,summary,[role="button"]{touch-action:manipulation}
button,.btn,.filtre,.pastille{-webkit-user-select:none;user-select:none}
button{-webkit-touch-callout:none}
em{font-style:italic}
.brique{color:var(--brique)}
.gris{color:var(--gris)}
.nw{white-space:nowrap}
sup{font-size:.65em;line-height:0}
::selection{background:#FAC079;color:var(--encre)}
.lecteur,.visuellement-masque{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.evitement{position:absolute;left:16px;top:16px;z-index:30;padding:14px 20px;background:var(--encre);color:var(--creme);font-weight:500;font-size:.8125rem;line-height:1rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transform:translateY(-300%)}
.evitement:hover,.evitement:focus{color:var(--creme)}
.evitement:focus{transform:none}

/* focus clavier : un trait encre et un liseré crème, inversés sur fond sombre */
:where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--encre);outline-offset:3px;box-shadow:0 0 0 3px var(--creme)}
.sombre :where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline-color:var(--creme);box-shadow:0 0 0 3px var(--encre)}

/* ------------------------------------------------------------------ interactions (couleurs en fondu régulier, appui sur la courbe) */
.btn,.lien,.lien-titre,.lien-tertiaire,.nav-lien,.filtre,.pastille,.titre-carte,.sombre a{transition:color .18s ease,background-color .18s ease,border-color .18s ease,text-decoration-color .18s ease}
.btn,.filtre,.pastille{transition:color .18s ease,background-color .18s ease,border-color .18s ease,text-decoration-color .18s ease,transform .16s var(--courbe)}
.btn:not([aria-disabled="true"]):active,.filtre:active,.pastille:active{transform:scale(.97)}
.nav-lien:active{text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:8px}
.lien:active{color:var(--brique-fonce);text-decoration-color:var(--brique-fonce)}
.lien-tertiaire:active{text-decoration-color:var(--brique)}
.sombre .lien-tertiaire:active{text-decoration-color:var(--brique-claire)}
.sombre a:not(.btn):not(.nav-lien):not(.lien-tertiaire):active{color:var(--brique-claire);text-decoration-color:var(--brique-claire)}
.lien-titre:active,.carte:active .titre-carte{text-decoration-line:underline;text-decoration-thickness:max(1px,.04em);text-underline-offset:.16em}
.logo,.burger,.menu-btn{transition:opacity .12s var(--courbe)}
.logo:active,.burger:active,.menu-btn:active{opacity:.6}
@media (hover:hover) and (pointer:fine){
  .btn-contour:hover{background:var(--encre);color:var(--creme)}
  .sombre .btn-contour:hover{background:var(--creme);color:var(--encre);border-color:var(--creme)}
  .btn-plein:not([aria-disabled="true"]):hover{background:var(--brique-survol);border-color:var(--brique-survol)}
  .btn-contact:not([aria-current]):hover{background:var(--encre);color:var(--creme);border-color:var(--encre)}
  .entete-photo .btn-contact:not([aria-current]):hover,.sombre .btn-contact:not([aria-current]):hover{background:var(--creme);color:var(--encre);border-color:var(--creme)}
  .nav-lien:hover{text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:8px}
  .lien:hover{color:var(--brique-fonce);text-decoration-color:var(--brique-fonce)}
  .lien-tertiaire:hover{text-decoration-color:var(--brique)}
  .sombre .lien-tertiaire:hover{text-decoration-color:var(--brique-claire)}
  .sombre a:not(.btn):not(.nav-lien):not(.lien-tertiaire):hover{color:var(--brique-claire);text-decoration-color:var(--brique-claire)}
  .lien-titre:hover,.carte:hover .titre-carte{text-decoration-line:underline;text-decoration-thickness:max(1px,.04em);text-underline-offset:.16em}
  .filtre[aria-pressed="false"]:hover,.pastille:not(:has(input:checked)):hover{background:var(--sable)}
}
@keyframes sl-fondu{from{opacity:0}}
@keyframes sl-monte{from{opacity:0;transform:translateY(8px)}}
@keyframes sl-titre{from{opacity:0;transform:translateY(10px)}}
.apparait{animation:sl-fondu 160ms var(--courbe) both}
.confirme{animation:sl-monte 400ms var(--courbe) both}
@media (prefers-reduced-motion:reduce){.confirme{animation:sl-fondu 200ms var(--courbe) both}}

/* boutons */
.btn{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}
.btn-plein,.btn-contour{justify-content:center;gap:12px;min-height:52px;padding:0 30px;border:1px solid var(--encre);border-radius:999px;color:var(--encre);background:transparent;font-weight:500;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase}
.btn-plein{border-color:var(--brique);background:var(--brique);color:#FFFFFF}
.btn svg{flex-shrink:0}
.lien{color:var(--encre);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.fleche-ext{display:inline-block;margin-left:6px;vertical-align:-1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------------ en-tête */
/* l'en-tête garde sa hauteur ; en se compactant, le fond (calque à part) remonte, le contenu remonte et le logo
   se réduit, par transformations seules : rien n'est recalculé pendant le défilement. Le fond reçoit les clics
   de la barre visible ; sous la barre compacte, ils passent à la page */
.entete{position:fixed;left:0;right:0;top:0;z-index:20;color:var(--encre);pointer-events:none;transition:color .2s ease}
.entete::before{content:"";position:absolute;inset:0;pointer-events:auto;background:var(--creme);box-shadow:none;transition:transform .2s var(--courbe-deplacement),background-color .2s ease,box-shadow .2s ease}
.entete.compact::before{transform:translateY(-52px);box-shadow:0 1px 0 var(--filet)}
.entete-photo:not(.compact){color:var(--creme)}
.entete-photo:not(.compact)::before{background-color:transparent}
.entete a,.entete button{pointer-events:auto}
.entete-int{position:relative;max-width:1344px;margin:0 auto;padding:26px 48px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;transition:transform .2s var(--courbe-deplacement)}
.compact .entete-int{transform:translateY(-26px)}
.logo{justify-self:start;display:block;padding:4px 0;color:inherit}
.logo-marque{display:block;height:64px;aspect-ratio:358/480;background:currentColor;-webkit-mask:url(/img/logo-masque.png) center/contain no-repeat;mask:url(/img/logo-masque.png) center/contain no-repeat;transform-origin:0 50%;transition:transform .2s var(--courbe-deplacement)}
.compact .logo-marque{transform:scale(.6875)}
.nav-principale ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 34px}
.nav-lien{display:block;padding:14px 0;color:inherit;font-weight:500;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.nav-lien[aria-current]{text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:8px}
.btn-contact{justify-self:end;display:inline-flex;align-items:center;border:3px solid currentColor;border-radius:999px;padding:10px 22px;color:inherit;text-decoration:none;font-weight:700;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase}
.btn-contact[aria-current]{background:var(--encre);border-color:var(--encre);color:var(--creme)}
.menu .btn-contact[aria-current]{background:var(--creme);border-color:var(--creme);color:var(--encre)}
.burger{display:none}
.espace-entete{flex-shrink:0;height:124px}

/* menu du téléphone */
.menu{position:fixed;inset:0;z-index:40;overflow-y:auto;overscroll-behavior:contain;background:var(--encre);color:var(--creme);display:flex;flex-direction:column;opacity:1;transition:opacity 240ms var(--courbe)}
@starting-style{.menu{opacity:0}}
.menu[hidden]{display:none}
.menu>*{flex-shrink:0}
.menu.sortie{opacity:0;transition-duration:160ms}
.menu-haut{padding:16px 12px 16px 20px;display:flex;align-items:center;justify-content:space-between}
.menu-haut .logo{padding:2px 7px;margin:-2px -7px}
.menu-haut .logo-marque{height:52px}
.menu-btn{width:44px;height:44px;padding:0;background:none;border:none;color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center}
.menu-btn svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.menu nav{flex-grow:1;display:flex;align-items:center;justify-content:center}
.menu nav ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.menu .nav-lien{padding:12px 0;font-size:1.0625rem;letter-spacing:.16em}
.menu-contact{padding:0 20px 56px;display:flex;justify-content:center}
.menu-contact .btn-contact{min-height:48px;padding:0 28px}
.menu .entree{animation:sl-monte 240ms var(--courbe) 40ms both}
.menu li.entree:nth-child(2){animation-delay:80ms}
.menu li.entree:nth-child(3){animation-delay:120ms}
.menu li.entree:nth-child(4){animation-delay:160ms}
.menu .menu-contact.entree{animation-delay:200ms}
@media (prefers-reduced-motion:reduce){.menu .entree{animation:sl-fondu 200ms var(--courbe) both}}

/* ------------------------------------------------------------------ pied de page */
.pied{margin-top:auto;background:var(--encre);color:var(--creme);padding:112px 48px 40px}
.pied-marge .pied{margin-top:120px}
.pied-int{max-width:1248px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.pied .logo-marque{height:139px}
.pied-phrase{margin:56px 0 0;max-width:860px;text-align:center;font-family:var(--serif);font-size:clamp(1.75rem,2.8vw,2.5rem);line-height:1.28;text-wrap:balance}
.pied-grille{margin-top:88px;width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:40px 48px}
.pied h2{margin:0 0 14px;font-weight:500;font-size:.75rem;line-height:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-clair)}
.pied-grille ul{margin:0;padding:0;list-style:none;font-size:1.125rem;line-height:2.125rem}
.pied-grille a{color:var(--creme);text-decoration:none}
.pied-lieu{color:var(--pierre)}
.pied-bas{margin-top:80px;width:100%;border-top:1px solid var(--filet-sombre);padding-top:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;font-size:.75rem;line-height:1rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-clair)}
.pied-legal{display:flex;flex-wrap:wrap;gap:0 28px}
.pied-legal a{display:block;padding:14px 0;color:var(--pierre);text-decoration:none}

/* ------------------------------------------------------------------ pages projets */
.surtitre{font-weight:500;font-size:.8125rem;line-height:1rem;letter-spacing:.16em;text-transform:uppercase}
.capitales{font-weight:500;font-size:.6875rem;line-height:.875rem;letter-spacing:.14em;text-transform:uppercase}

/* ouverture : la photo sur toute la hauteur de l'écran, le titre au centre */
.ouverture{position:relative;height:900px;height:clamp(560px,100svh,1200px);overflow:hidden;background:var(--encre);color:var(--creme)}
.ouverture figure{margin:0;position:absolute;inset:0}
.ouverture img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.ouverture .voile-photo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(39,39,40,.78) 0px,rgba(39,39,40,.68) 100px,rgba(39,39,40,.27) 180px,rgba(39,39,40,0) 260px),radial-gradient(ellipse 60% 34% at 50% 50%,rgba(39,39,40,.42) 0%,rgba(39,39,40,.28) 55%,rgba(39,39,40,0) 100%)}
/* titre lisible sur les photos claires : ellipse sombre derrière le titre, réglée projet par projet (« voile » dans le contenu) */
.ouverture .voile-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 50%,rgba(39,39,40,.85) 0%,rgba(39,39,40,.5) 50%,rgba(39,39,40,0) 100%);opacity:var(--voile,0)}
.ouverture-titre{position:absolute;inset:0;padding:128px 48px 120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.ouverture .surtitre{text-shadow:0 1px 14px rgba(39,39,40,.5)}
.ouverture h1 .ligne{display:block}
.ouverture h1{margin:0;max-width:1344px;font-family:var(--serif);font-weight:400;font-size:clamp(3rem,5.8vw,5.25rem);line-height:1.02;letter-spacing:-.012em;text-wrap:balance;text-shadow:0 2px 30px rgba(39,39,40,.4)}
.voile{position:relative;isolation:isolate}
.voile::before{content:"";position:absolute;inset:-22px -90px;z-index:-1;pointer-events:none;border-radius:999px;background:rgba(39,39,40,.72);filter:blur(30px)}

/* chapô et fiche */
.chapo{padding:136px 48px 120px}
.chapo-int{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.chapo p{margin:0;max-width:760px;text-align:center;font-family:var(--serif);font-size:1.75rem;line-height:2.5rem;text-wrap:balance}
.fiche{margin:56px 0 0;width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--mini,220px),100%),1fr));border-top:1px solid var(--filet)}
.fiche>div{padding:18px 20px 18px 0;border-bottom:1px solid var(--filet);display:flex;flex-direction:column;gap:8px}
.fiche dt{font-weight:500;font-size:.6875rem;line-height:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.fiche dd{margin:0;font-family:var(--serif);font-size:1.1875rem;line-height:1.5625rem}
.fiche .lien-ext{display:inline-block;padding:4px 0}

/* sections à 12 colonnes */
.bloc{padding:144px 48px;border-top:1px solid var(--filet)}
.bloc-int{max-width:1344px;margin:0 auto}
.serie{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:start}
.case{grid-column:var(--col);margin-top:var(--dec,0)}
.titre-bloc{margin:0;font-weight:500;font-size:.6875rem;line-height:.875rem;letter-spacing:.14em;text-transform:uppercase}

/* le récit */
.recit{padding:0 48px 144px;border-top:0}
.recit.apres-objet{padding:144px 48px;border-top:1px solid var(--filet)}
.recit .serie{row-gap:28px}
.recit p{margin:0;font-family:var(--serif);font-size:1.25rem;line-height:1.875rem;text-wrap:pretty}

/* séries numérotées : un reportage, ses photos décalées */
.reportage+.reportage{margin-top:176px}
.reportage>.serie+.serie{margin-top:96px}
.reportage>.serie.apres-tete{margin-top:48px}
.tete{display:flex;flex-direction:column;gap:20px}
.tete-num{font-family:var(--serif);font-style:italic;font-size:8rem;line-height:.8;color:var(--brique)}
.tete h3{margin:0;font-weight:500;font-size:.6875rem;line-height:.875rem;letter-spacing:.14em;text-transform:uppercase}
.photo{margin:0}
.photo img{width:100%;height:auto;aspect-ratio:var(--ratio);object-fit:cover;object-position:var(--pos,50% 50%)}
.legende{margin-top:12px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:2px}
.legende-num{font-family:var(--serif);font-style:italic;font-size:1.0625rem;line-height:1.25rem;color:var(--brique-fonce)}
.legende-texte{font-weight:500;font-size:.6875rem;line-height:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

/* liste des reportages au sommaire, extrait, volumes */
.index ol{margin:-9px 0;padding:0;list-style:none;columns:2;column-gap:32px}
.index li{padding:9px 0;break-inside:avoid}
.index.numerote li{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:baseline}
.index-num{font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.875rem;color:var(--brique-fonce)}
.index-titre{font-family:var(--serif);font-size:1.375rem;line-height:1.875rem}
.extrait figure{margin:0}
.extrait blockquote{margin:0}
.extrait p{margin:0;font-family:var(--serif);font-size:1.375rem;line-height:2.125rem;text-wrap:pretty}
.extrait figcaption{margin-top:28px;font-weight:500;font-size:.6875rem;line-height:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.volumes ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px}
.volumes figure{margin:0;display:flex;flex-direction:column;gap:16px}
.volumes img{width:100%;height:auto;aspect-ratio:520/682}
.ombre-objet{box-shadow:0 1px 2px rgba(39,39,40,.10),0 24px 48px -20px rgba(39,39,40,.42)}

/* le magazine imprimé : couverture et doubles pages */
.objet{padding:0 48px 144px}
.objet-int{container-type:inline-size;max-width:1248px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:48px 40px}
.objet-couv{margin:0;width:289px;display:flex;flex-direction:column;gap:20px}
.objet-couv-cadre{height:var(--h-livre,509px);height:calc(min(737px, 100cqw - 329px) * var(--r-livre, .691));display:flex;align-items:flex-end}
.objet-couv img{width:289px;height:auto;aspect-ratio:var(--ratio)}
.objet-livre{margin:0;width:737px;width:min(737px, 100cqw - 329px);max-width:100%;display:flex;flex-direction:column;gap:20px}
.legende-livre{display:flex;flex-direction:column;gap:6px}
.legende-livre span:last-child{font-size:.8125rem;line-height:1.25rem;color:var(--gris)}

/* fin de page : appel au contact sur fond sable, puis le projet suivant */
.cta{background:var(--sable);padding:144px 48px}
.cta-int{max-width:820px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.cta h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(2.25rem,3.9vw,3.5rem);line-height:1.07;letter-spacing:-.008em}
.cta-texte{margin:28px 0 0;font-family:var(--serif);font-size:1.5625rem;line-height:2.25rem;text-wrap:pretty}
.cta .btn-plein{margin-top:44px}
.cta-direct{margin:28px 0 0;font-size:.9375rem;line-height:1.5rem;color:var(--gris)}
.cta-direct .m{display:none}
.suivant .carte{max-width:1344px;margin:0 auto;padding:96px 48px 40px;display:flex;flex-wrap:wrap;align-items:center;gap:40px 72px;text-decoration:none;color:var(--encre)}
.suivant-texte{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:16px}
.suivant-titre{font-family:var(--serif);font-size:clamp(2.25rem,3.9vw,3.5rem);line-height:1.07}
.suivant .carte img{flex:1.3 1 520px;min-width:0;width:100%;height:380px;object-fit:cover;object-position:var(--pos,50% 50%)}
.suivant-tous{max-width:1344px;margin:0 auto;padding:16px 48px 96px;display:flex;justify-content:center}

/* ------------------------------------------------------------------ livre feuilleté (doubles pages qui tournent) */
.livre{position:relative;width:100%;aspect-ratio:2877/1988;perspective:2600px;touch-action:pan-y pinch-zoom;-webkit-touch-callout:none}
.livre::before{content:"";position:absolute;left:0;right:0;top:0;bottom:1%;box-shadow:0 30px 50px -30px rgba(39,39,40,.55);pointer-events:none}
.livre img{max-width:none}
.livre-socle{position:absolute;top:0;height:100%;display:block;pointer-events:none}
.livre-socle-g{left:0;width:2.0507%}
.livre-socle-d{left:98.2621%;width:1.7379%}
.livre-page{position:absolute;top:0;height:100%;display:block;object-fit:fill}
.livre-page-g{left:2.0507%;width:47.9666%}
.livre-page-d{left:50.0174%;width:48.2447%}
.livre-feuille{position:absolute;left:50.0174%;top:0;width:48.2447%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;pointer-events:none;visibility:hidden}
.livre-face{position:absolute;left:0;top:0;width:100%;height:100%;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.livre-verso{width:99.4236%;transform:rotateY(180deg)}
.livre-seul .livre-btn{display:none}
.livre-ombre{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.livre-ombre-recto{background:linear-gradient(90deg,rgba(39,39,40,.6),rgba(39,39,40,0) 75%)}
.livre-ombre-verso{width:99.4236%;transform:rotateY(180deg);background:linear-gradient(270deg,rgba(39,39,40,.6),rgba(39,39,40,0) 75%)}
.livre-btn{position:absolute;top:0;bottom:0;width:50%;margin:0;padding:0 14px;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;color:var(--encre);-webkit-tap-highlight-color:transparent}
.livre-btn-prec{left:0;justify-content:flex-start}
.livre-btn-suiv{right:0;justify-content:flex-end}
.livre-fleche{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:rgba(248,233,223,.94);box-shadow:0 6px 18px -8px rgba(39,39,40,.5);opacity:0;transform:scale(.96);transition:opacity .18s var(--courbe),transform .16s var(--courbe)}
.livre-fleche svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.livre:hover .livre-fleche{opacity:1;transform:none}}
@media (hover:none){.livre-btn{align-items:flex-end;padding:0 8px 8px}.livre-fleche{width:32px;height:32px;opacity:.9;transform:none}}
.livre-btn:focus-visible{outline:none;box-shadow:none}
.livre-btn:active .livre-fleche{transform:scale(.97)}
.livre-btn:focus-visible .livre-fleche{opacity:1;transform:none;outline:2px solid var(--encre);outline-offset:3px;box-shadow:0 0 0 3px var(--creme)}
.livre .fondu{animation:sl-fondu 300ms var(--courbe) both}

/* animation réduite : les déplacements et changements de taille deviennent instantanés, les fondus de couleur et
   d'opacité restent (plus doux, pas absents) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-property:color,background-color,border-color,text-decoration-color,opacity,box-shadow!important}
  .btn:active,.filtre:active,.pastille:active,.livre-btn:active .livre-fleche{transform:none!important}
}

/* ================================================================== téléphone */
@media (max-width:899.98px){
  html{scroll-padding-top:72px}

  .entete-int{max-width:none;padding:16px 12px 16px 20px;display:flex;align-items:center;justify-content:space-between;gap:0}
  .compact .entete-int{transform:translateY(-12px)}
  .entete.compact::before{transform:translateY(-24px)}
  .compact .burger{transform:translateX(4px)}
  .entete .logo{padding:2px 7px;margin:-2px -7px}
  .entete .logo-marque{height:52px}
  .compact .logo-marque{transform:scale(.7692)}
  .entete .nav-principale,.entete .btn-contact{display:none}
  .burger{display:flex;width:44px;height:44px;padding:0;background:none;border:none;color:inherit;cursor:pointer;align-items:center;justify-content:center;transition:opacity .12s var(--courbe),transform .2s var(--courbe-deplacement)}
  .burger svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
  .espace-entete{height:84px}

  .pied{padding:80px 20px 32px}
  .pied-marge .pied{margin-top:0}
  .pied-int{align-items:stretch}
  .pied .logo{align-self:center}
  .pied .logo-marque{height:111px}
  .pied-phrase{margin-top:40px;font-size:1.625rem;line-height:1.3}
  .pied-grille{margin-top:64px;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
  .pied-grille>:nth-child(1){grid-row:1/span 2}
  .pied-grille>:nth-child(2){grid-column:2;grid-row:1}
  .pied-grille>:nth-child(3){grid-column:2;grid-row:2;margin-top:32px}
  .pied-grille>:nth-child(4){grid-column:1/-1;grid-row:3;margin-top:40px}
  .pied h2{margin-bottom:6px;line-height:.9375rem}
  .pied-grille ul{font-size:1.0625rem;line-height:1.375rem}
  .pied-grille li>a,.pied-lieu{display:block;padding:11px 0}
  .pied-bas{margin-top:56px;padding-top:16px;flex-direction:column;align-items:stretch;gap:4px}
  .pied-bas>span{padding:8px 0}
  .pied-legal{gap:0 24px}
  .pied-legal a{padding:8px 0}

  .ouverture{height:620px}
  .ouverture .voile-photo{background:linear-gradient(180deg,rgba(39,39,40,.66) 0px,rgba(39,39,40,.55) 80px,rgba(39,39,40,.22) 140px,rgba(39,39,40,0) 200px),radial-gradient(ellipse 90% 40% at 50% 50%,rgba(39,39,40,.42) 0%,rgba(39,39,40,.28) 55%,rgba(39,39,40,0) 100%)}
  .ouverture img{object-position:var(--pos-m,var(--pos,50% 50%))}
  .ouverture-titre{padding:88px 20px 76px;gap:14px}
  .ouverture .surtitre{font-size:.6875rem;line-height:.875rem;text-shadow:0 1px 12px rgba(39,39,40,.5)}
  .ouverture h1{font-size:2.625rem;line-height:1.04;letter-spacing:-.01em;text-shadow:0 2px 22px rgba(39,39,40,.4)}
  .voile::before{inset:-18px -50px;filter:blur(26px)}

  .chapo{padding:72px 20px}
  .chapo-int{display:block}
  .chapo p{font-size:1.3125rem;line-height:2rem}
  .fiche{margin-top:40px;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .fiche>div{padding:14px 0;gap:6px}
  .fiche dd{font-size:1.0625rem;line-height:1.4375rem}

  .bloc{padding:72px 20px 80px}
  .serie{display:block}
  .case{margin-top:0}
  .recit{padding:0 20px 72px}
  .recit.apres-objet{padding:72px 20px}
  .recit .case+.case{margin-top:20px}
  .recit p{font-size:1.125rem;line-height:1.75rem}

  .reportage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:32px;align-items:start}
  .reportage>.serie{display:contents}
  .reportage+.reportage{margin-top:88px}
  .reportage .case{grid-column:1/-1}
  .reportage .m-paire1{grid-column:1}
  .reportage .m-paire2{grid-column:2;margin-top:40px}
  .reportage .m-seul-g{width:66%}
  .reportage .m-seul-d{width:66%;margin-left:auto}
  .tete{gap:14px}
  .tete-num{font-size:4.5rem}
  .legende{margin-top:10px;column-gap:10px}
  .legende-num{font-size:1rem}

  .index ol{margin:13px 0 -7px;columns:auto}
  .index li{padding:7px 0}
  .index.numerote li{grid-template-columns:40px minmax(0,1fr)}
  .index-num{font-size:1.0625rem;line-height:1.625rem}
  .index-titre{font-size:1.125rem;line-height:1.625rem}
  .extrait figure{margin-top:20px}
  .extrait p{font-size:1.1875rem;line-height:1.875rem}
  .extrait figcaption{margin-top:20px}
  .volumes ul{margin-top:24px;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
  .volumes figure{gap:12px}

  .objet{padding:0 20px 72px}
  .objet-int{display:flex;flex-direction:column;align-items:stretch;gap:40px}
  .objet-couv{width:auto;flex-direction:row;align-items:flex-end;gap:20px}
  .objet-couv-cadre{height:auto;flex-shrink:0}
  .objet-couv img{width:168px}
  .objet-livre{width:100%;gap:14px}
  .legende-livre span:last-child{line-height:1.1875rem}

  .cta{padding:72px 20px 80px}
  .cta h2{font-size:2rem;line-height:1.08}
  .cta-texte{margin-top:20px;font-size:1.1875rem;line-height:1.8125rem}
  .cta .btn-plein{margin-top:32px;width:100%;padding:0 24px;font-size:.8125rem}
  .cta-direct{margin-top:24px;font-size:.875rem;line-height:1.25rem;display:flex;flex-direction:column;align-items:center}
  .cta-direct .d{display:none}
  .cta-direct .m{display:block}
  .cta-direct .lien{margin-top:7px;display:inline-block;padding:6px 0;font-size:1rem;line-height:1.375rem}
  .cta-direct .lien~.lien{margin-top:0}
  .suivant .carte:focus-visible{outline-offset:-6px;box-shadow:none}
  .suivant .carte{padding:64px 20px 24px;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:12px}
  .suivant-texte{flex:none;gap:12px}
  .suivant-texte>.surtitre{font-size:.75rem;line-height:.9375rem}
  .suivant-titre{font-size:2rem;line-height:1.08}
  .suivant .carte img{flex:none;margin-top:12px;height:240px;object-position:var(--pos-m,var(--pos,50% 50%))}
  .suivant-tous{padding:16px 20px 64px}
  .suivant-tous .btn{padding:0 24px;font-size:.8125rem}
}