@charset "utf-8";
/* Proposition 5, Sobre. Le site actuel, enrichi de photographies et d'un rythme. */

.hero {
  padding: calc(var(--head) + clamp(3rem, 9vw, 7.5rem)) var(--gutter) clamp(2.5rem, 6vw, 5rem);
}
.hero__sig { font-family: var(--serif); font-size: clamp(2.6rem, 1rem + 7vw, 8rem); line-height: .96; letter-spacing: -.028em; max-width: 14ch; text-wrap: balance; }
.hero__sig em { font-style: italic; }
.hero__sub { font-family: var(--sans); font-weight: 400; font-style: normal; color: var(--fg-70); font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.4; margin-top: 1.8rem; max-width: 36ch; }
.hero__claim { margin-top: 2.2rem; max-width: 42rem; color: var(--fg-70); font-size: 1rem; }

.faces { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; border-top: 0; border-bottom: 1px solid var(--rule); }
.face { position: relative; display: block; overflow: hidden; }
.face .pf { aspect-ratio: 3 / 4.3; }
.face .pf img { transition: transform .9s var(--lame); }
.face:hover .pf img { transform: scale(1.05); }
.face__nom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2.6rem .95rem 1.05rem;
  font-family: var(--serif); font-size: clamp(.82rem, .68rem + .35vw, 1.05rem); line-height: 1.22; color: var(--paper);
  background: linear-gradient(to top, rgba(34, 31, 32, .92) 12%, rgba(34, 31, 32, .55) 55%, rgba(34, 31, 32, 0));
}
.face__role { display: block; font-family: var(--sans); font-size: .75rem; letter-spacing: .02em; text-transform: none; color: rgba(236, 232, 227, .88); margin-top: .3rem; }
@media (max-width: 1000px) { .faces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .faces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bande { padding: clamp(2.75rem, 6vw, 6rem) var(--gutter); }

.bande--engs { padding-block: clamp(3rem, 7vw, 7rem); }
.engs { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem); align-items: start; }
.eng--methode .eng__d { font-size: clamp(1.55rem, 2.3vw, 2.25rem); line-height: 1.2; }
.eng { padding-top: 1.4rem; border-top: 1px solid var(--fg); }
.eng__t { display: block; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-55); }
.eng__d { font-family: var(--serif); margin: 1.2rem 0 0; font-size: clamp(1.2rem, 1rem + .95vw, 1.8rem); line-height: 1.28; letter-spacing: -.01em; text-wrap: pretty; }
.eng__d strong { font-weight: 500; font-style: normal; }
.eng__d strong.split .w > span { transition-delay: calc(var(--i, 0) * 60ms + var(--d, 0s) + .25s); }
@media (max-width: 900px) { .engs { grid-template-columns: 1fr; gap: 1.75rem; } }

.photo { position: relative; overflow: hidden; height: clamp(22rem, 72svh, 42rem); display: grid; place-items: center; color: var(--paper); background: var(--night); }
.photo__img { position: absolute; inset: -24% 0; }
.photo__img img { width: 100%; height: 100%; object-fit: cover; }
.photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6, 12, 17, .3), rgba(6, 12, 17, .55)); }
.photo__q { position: relative; z-index: 1; font-family: var(--serif); font-size: clamp(1.6rem, 1rem + 3.2vw, 4.2rem); line-height: 1.08; letter-spacing: -.016em; text-align: center; max-width: 22ch; padding-inline: var(--gutter); text-wrap: balance; }
.photo__q em { font-style: normal; }

.matieres { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 5rem); row-gap: 0; background: transparent; border: 0; max-width: none; margin-top: .5rem; }
.mot { grid-column: 1; padding: 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); background: transparent; max-width: 100%; }
.mot:nth-child(n + 6) { grid-column: 2; }
.mot:nth-child(6) { grid-row: 1; }
.mot:nth-child(7) { grid-row: 2; }
.mot:nth-child(8) { grid-row: 3; }
.mot:nth-child(9) { grid-row: 4; }
.mot__l { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .85rem 0 .9rem; color: inherit; text-decoration: none; }
.mot__l:is(:hover, :focus-visible) .mot__a { opacity: 1; transform: translateX(4px); }
.mot__l:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.mot__t { font-family: var(--serif); font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.6rem); line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; }
.mot__a { font-family: var(--sans); font-size: 1.1rem; color: var(--fg); opacity: .55; transform: none; transition: opacity .3s, transform .35s var(--ease-out); }
@media (max-width: 900px) { .matieres { grid-template-columns: 1fr; } .mot, .mot:nth-child(n + 6) { grid-column: 1; grid-row: auto; } .mot__t { font-size: clamp(1.5rem, 6.4vw, 1.9rem); } }
@media (max-width: 560px) {  }

/* Pratiques : une photo d'architecture coupée en tête, titre Playfair, appel « Voir » discret, grille asymétrique */
.cartes { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; padding: clamp(2.75rem, 6vw, 6rem) var(--gutter); }
.carte { position: relative; display: flex; flex-direction: column; background: transparent; color: var(--fg); overflow: hidden; }
.carte__fig { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--night); clip-path: none; }
.cartes .carte:first-child .carte__fig { aspect-ratio: 16 / 12; }
.carte__fig img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transform: scale(calc(var(--z, 1.04) * var(--h, 1))); transition: none; will-change: transform; }
.carte:hover .carte__fig img, .carte:focus-visible .carte__fig img { --h: 1; }
.carte__t { font-family: var(--serif); font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.15; letter-spacing: -.014em; padding: 1.25rem 0 0; }
.carte__d { font-size: 1rem; line-height: 1.55; color: var(--fg-70); margin-top: 1rem; padding-inline: 0; }
.carte__go { margin-top: 1.5rem; padding: 0 0 1rem; display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-55); transition: color var(--t); }
.carte:hover .carte__go, .carte:focus-visible .carte__go { color: var(--fg); }
.carte::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--lame); }
.carte:hover::after, .carte:focus-visible::after { transform: scaleX(1); }
/* La photo de Manhattan porte, à son bord gauche, le bouton rond de l'ancien site : on la cadre à droite partout où elle sert */
.cartes .carte:nth-child(3) .carte__fig img { width: 135%; max-width: none; object-position: 100% 50%; }
.photo--ny .photo__img img { object-position: 100% 50%; width: 118%; max-width: none; }
/* Les deux bandes photographiques ne se ressemblent pas : la première, grande et à gauche ; la seconde, plus courte, en bas à droite */
.photo--retablir { justify-items: start; }
.photo--retablir .photo__q { text-align: left; max-width: 24ch; padding-inline: 0; margin-inline: var(--gutter); }
.photo--ny { height: clamp(20rem, 42vw, 30rem); justify-items: end; align-items: end; padding-bottom: 3rem; }
.photo--ny .photo__q { font-size: clamp(1.5rem, 2.4vw, 2.75rem); text-align: left; max-width: 24ch; padding-inline: 0; margin-inline: var(--gutter); }
@media (max-width: 900px) { .cartes { grid-template-columns: 1fr; } .cartes .carte:first-child .carte__fig { aspect-ratio: 16 / 10; } }

/* Affaires : une ligne par affaire, la matière en libellé, le titre en Playfair, un glyphe oblique par ligne, la flèche au survol */
.refs { border-top: 1px solid var(--rule); }
.ref { position: relative; display: grid; grid-template-columns: 1.4rem minmax(0, 13rem) minmax(0, 1fr) 1.6rem; gap: .35rem clamp(.8rem, 2vw, 1.6rem); align-items: start; padding: 1.2rem .4rem; border-bottom: 1px solid var(--rule); transition: background var(--t); }
/* Ligne unique explicite : le placement automatique enverrait la matière (déclarée après le titre dans le HTML) en deuxième ligne */
.ref > * { grid-row: 1; }
.ref__g { grid-column: 1; align-self: start; margin-top: .42rem; width: .28rem; height: 1rem; background: var(--fg-38); transform: skewX(calc(-1 * var(--coupe))); transition: background var(--t); }
.ref__c { grid-column: 2; padding-top: .34rem; font-size: .8rem; font-weight: 500; letter-spacing: .02em; color: var(--fg-55); }
.ref__t { grid-column: 3; font-family: var(--serif); font-size: clamp(1.02rem, .95rem + .35vw, 1.3rem); line-height: 1.3; letter-spacing: -.008em; max-width: 46rem; }
.ref__go { grid-column: 4; justify-self: end; align-self: center; font-size: 1.15rem; color: var(--fg); opacity: 0; transform: translateX(-8px); transition: opacity var(--t), transform var(--t); }
.ref:hover, .ref:focus-visible { background: var(--surface); }
.ref:hover .ref__g, .ref:focus-visible .ref__g { background: var(--fg); }
.ref:hover .ref__go, .ref:focus-visible .ref__go { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .ref { grid-template-columns: 1.2rem minmax(0, 1fr); gap: .2rem .8rem; padding-block: 1rem; }
  .ref__g { grid-row: 1 / 3; margin-top: .3rem; } .ref__c { grid-column: 2; grid-row: 1; padding-top: 0; } .ref__t { grid-column: 2; grid-row: 2; } .ref__go { display: none; }
}

/* Le cabinet : le chapeau en grand, les secteurs en liste à côté */
.bande--cab { padding-block: clamp(3.5rem, 8vw, 8rem); }
.cab { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.cab__lede { font-family: var(--serif); font-size: clamp(1.5rem, 2.2vw, 2.25rem); line-height: 1.3; letter-spacing: -.012em; text-wrap: pretty; max-width: 34ch; }
.cab__side { border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.cab__k { display: block; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-55); margin-bottom: 1.1rem; }
.cab__list { columns: 2; column-gap: 2rem; }
.cab__list li { break-inside: avoid; padding: .45rem 0; border-bottom: 1px solid var(--rule); font-size: .95rem; color: var(--fg-70); }
@media (max-width: 900px) { .cab { grid-template-columns: 1fr; gap: 2rem; } .cab__list { columns: 1; } }

.trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.trois p { font-size: clamp(1rem, .92rem + .5vw, 1.28rem); line-height: 1.5; color: var(--fg-70); }
.cle { font-weight: 500; font-style: normal; font-size: 1em; color: inherit; }
@media (max-width: 900px) { .trois { grid-template-columns: 1fr; } }

.joindre { font-family: var(--serif); font-size: clamp(1.1rem, .95rem + .7vw, 1.6rem); line-height: 1.4; max-width: 44ch; }
.voies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 4rem); margin-top: 2.4rem; }
.voie { position: relative; display: flex; flex-direction: column; padding: 1.25rem 0; border-top: 1px solid var(--fg); background: transparent; color: var(--fg); }
.voie__k { font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-55); }
.voie__t { font-family: var(--serif); font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2.4rem); line-height: 1.08; letter-spacing: -.016em; margin-top: 1rem; }
.voie__d { margin-top: .9rem; font-size: .95rem; color: var(--fg-70); max-width: 34ch; }
.voie__go { margin-top: auto; padding-top: 1.6rem; display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 500; color: var(--fg-55); transition: color var(--t); }
.voie:hover .voie__go, .voie:focus-visible .voie__go { color: var(--fg); }
@media (max-width: 760px) { .voies { grid-template-columns: 1fr; } }
.coord { margin-top: 2.4rem; font-size: .93rem; color: var(--fg-70); line-height: 1.8; }


/* ---------- Mouvement (par défaut) ---------- */
/* Les images arrivent par la coupe et vivent en parallaxe ; le texte reste disponible sans cascade.
   ?motion=calme désactive le balayage des bandes en recette. */
html.js.motion-vif .photo .photo__img { clip-path: polygon(0 0, 0 0, calc(-1 * var(--cut, 18%)) 100%, calc(-1 * var(--cut, 18%)) 100%); transition: clip-path 1.1s var(--lame); }
html.js.motion-vif .photo.is-in .photo__img { clip-path: polygon(0 0, calc(100% + var(--cut, 18%)) 0, 100% 100%, calc(-1 * var(--cut, 18%)) 100%); }
html.js.motion-vif .faces .pf img { transition-duration: 1.2s; }
html.js.motion-vif .face:hover .pf img { transform: scale(1.09); }
html.js.motion-vif .carte::after { transition-duration: .7s; }
@media (prefers-reduced-motion: reduce) { html.js.motion-vif .photo .photo__img { clip-path: none; } }

/* Pas de fondu du fond au chargement : le thème choisi s'applique avant le premier rendu utile */
html.js:not(.ready) body { transition: none; }

/* Les bandes encre gardent leurs teintes claires quel que soit le thème de la page */
.band--ink, .foot.band--ink {
  --fg-70: rgba(229, 225, 222, .72); --fg-55: rgba(229, 225, 222, .56); --fg-38: rgba(229, 225, 222, .38);
  --rule: rgba(229, 225, 222, .16); --rule-strong: rgba(229, 225, 222, .34); --surface: rgba(255, 255, 255, .04);
}

/* ---------- Mobile, déclaré en dernier pour ne pas être écrasé ---------- */
@media (max-width: 900px) {
  .hero { padding-top: calc(var(--head) + 1.75rem); padding-bottom: 2rem; }
  .hero__sub { margin-top: 1.25rem; }
  .hero__claim { margin-top: 1rem; }
  .label { margin-bottom: 1.25rem; }
  .bande { padding-block: 2.25rem; }
  .bande--engs { padding-block: 2rem; }
  .bande--cab { padding-block: 3rem; }
  .cartes { padding-block: 2rem 3rem; gap: 2.5rem; }
  .photo--retablir { height: clamp(20rem, 52svh, 26rem); align-items: end; padding-bottom: 2.5rem; }
  .photo--ny { height: auto; min-height: 22rem; padding-block: 3rem; }
  .photo--retablir .photo__q, .photo--ny .photo__q { margin-inline: var(--gutter); text-align: left; }
}

/* Chiffres du cabinet (retour de Sarah, 23/09) : défilent une fois à l'arrivée */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.chiffre { border-top: 1px solid var(--rule-strong); padding-top: 1.1rem; }
.chiffre__n { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.75rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.chiffre__k { display: block; margin-top: .75rem; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-55); }
@media (max-width: 900px) { .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } }

/* Nous joindre : une seule voie, les coordonnées en regard */
.voies--un { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
.voies--un .coord { margin: 0; padding: 1.25rem 0; border-top: 1px solid var(--rule-strong); }
@media (max-width: 900px) { .voies--un { grid-template-columns: 1fr; } }

/* Révélations plus présentes sur l'engagement et les cartes */
html.js .engs > [data-reveal], html.js .cartes > [data-reveal] { transform: translate3d(0, 24px, 0); transition-duration: .9s; }
html.js .engs > [data-reveal].is-in, html.js .cartes > [data-reveal].is-in { transform: none; }

/* Revue Astra 2 : chiffres reliés à leurs preuves, titre en une seule apparition */
.chiffre__l { display: block; color: inherit; text-decoration: none; }
.chiffre__l .chiffre__k { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; transition: text-decoration-color .25s; }
.chiffre__l:is(:hover, :focus-visible) .chiffre__k { text-decoration-color: currentColor; }
.chiffre__l:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
html.js .hero__sig[data-reveal] { transition-duration: .45s; transform: none; }

@media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } }

/* Nous joindre : une phrase, une adresse e-mail en grand, les coordonnées une seule fois (24/09) */
.joindre-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.joindre-grid .joindre { margin: 0; }
.contact-bloc { border-top: 1px solid var(--fg); padding-top: 1.25rem; }
.contact-bloc__k { display: block; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--fg-55); }
.contact-bloc__mail { display: inline-block; margin-top: .9rem; font-family: var(--serif); font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2.4rem); line-height: 1.1; letter-spacing: -.016em; color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, var(--fg) 30%, transparent); transition: text-decoration-color .25s; overflow-wrap: anywhere; }
.contact-bloc__mail:is(:hover, :focus-visible) { text-decoration-color: currentColor; }
.contact-bloc__coord { margin: 1.4rem 0 0; font-size: .95rem; line-height: 1.8; color: var(--fg-70); }
.contact-bloc__coord a { color: inherit; }
@media (max-width: 900px) { .joindre-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Lisibilité : fin des petites capitales espacées, textes à 14 px au moins, contrastes, cibles de 44 px */
html :is(.nav a, .burger, .link, .foot h3) { text-transform: none; letter-spacing: .01em; font-size: .875rem; }
html :is(.face__role, .ref__c, .foot__base) { font-size: .875rem; }
html .nav .lang { color: var(--fg-55); }
html .burger { min-width: 44px; min-height: 44px; padding: .75rem 0 .75rem 1rem; }
html :is(.link, .foot address a) { position: relative; }
html :is(.link, .foot address a)::after { content: ''; position: absolute; inset: -.9rem -.25rem; }
@media (max-width: 880px) { html .nav a { font-size: 1rem; } }

/* Menu mobile : le panneau couvre tout l'écran sous l'en-tête */
@media (max-width: 880px) { html .nav { inset: var(--head) 0 auto 0; height: calc(100dvh - var(--head)); max-height: none; border-bottom: 0; } }
/* Zones tactiles et tailles minimales du bloc Nous joindre et des portraits */
html :is(.link, .foot address a)::after { inset: -1rem -.25rem; }
html :is(.contact-bloc__mail, .contact-bloc__coord a) { position: relative; }
html .contact-bloc__mail::after { content: ''; position: absolute; inset: -.5rem 0; }
html .contact-bloc__coord a::after { content: ''; position: absolute; inset: -1rem -.25rem; }
html .face__nom { font-size: clamp(.875rem, .68rem + .35vw, 1.05rem); }
html .foot li a { position: relative; }
html .foot li a::after { content: ''; position: absolute; inset: -1rem -.25rem; }
html .contact-bloc__mail::after { inset: -.7rem 0; }

/* ===== Retours de Sarah Mincel, 27/09/2026 ===== */
/* Titres de section plus visibles, et « L'équipe » au-dessus des portraits */
.bande > .label, .equipe-titre { font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; color: var(--fg); margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); }
.equipe-titre { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 0; }
.band--ink > .label { color: var(--paper); }
/* Notre engagement : trois textes de même taille, intitulés lisibles, mots clés en italique franc */
.engs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eng__t { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; color: var(--fg); }
.eng__d, .eng--methode .eng__d { font-size: clamp(1.2rem, 1rem + .75vw, 1.6rem); line-height: 1.32; color: var(--fg-70); }
.eng__d strong { font-weight: 400; font-style: italic; color: var(--fg); }
@media (max-width: 900px) { .engs { grid-template-columns: 1fr; } }
/* Bandes photographiques moins hautes */
.photo--retablir { height: clamp(14rem, 36svh, 22rem); }
.photo--retablir .photo__q { font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem); }
.photo--ny { height: clamp(13rem, 32svh, 19rem); justify-items: center; }
/* Bande 2 : une entrée vers les interventions, centrée */
.photo__cta { position: relative; z-index: 1; display: grid; justify-items: center; gap: .6rem; padding-inline: var(--gutter); text-align: center; color: var(--paper); text-decoration: none; }
.photo__k { font-family: var(--sans); font-size: 1rem; font-weight: 500; opacity: .9; }
.photo__lien { font-family: var(--serif); font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); line-height: 1.2; max-width: 28ch; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(236, 232, 227, .5); transition: text-decoration-color .25s; }
.photo__cta:is(:hover, :focus-visible) .photo__lien { text-decoration-color: currentColor; }
.photo__cta:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; }
/* Expertises : deux colonnes compactes */
.matieres .mot__t { font-size: clamp(1.1rem, .98rem + .5vw, 1.35rem); line-height: 1.3; }
.matieres .mot__l { padding: .6rem 0; }
.matieres .mot { grid-column: 1; grid-row: auto; }
.matieres .mot:nth-child(n + 5) { grid-column: 2; }
.matieres .mot:nth-child(5) { grid-row: 1; } .matieres .mot:nth-child(6) { grid-row: 2; } .matieres .mot:nth-child(7) { grid-row: 3; } .matieres .mot:nth-child(8) { grid-row: 4; }
@media (max-width: 900px) { .matieres .mot:nth-child(n) { grid-column: 1; grid-row: auto; } }
/* Le cabinet : texte de gauche à la mesure de la liste, secteurs mis en valeur, lien franc */
.cab { align-items: stretch; }
.cab__lede { font-size: clamp(1.1rem, 1rem + .35vw, 1.25rem); line-height: 1.6; max-width: 42ch; }
.cab__k { font-size: 1.05rem; font-weight: 600; color: var(--fg); }
.cab__list li { font-size: 1rem; color: var(--fg); }
.cab-lien { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .7rem 1.15rem; border: 1px solid var(--fg); color: var(--fg); font-family: var(--sans); font-size: 1rem; font-weight: 500; text-decoration: none; transition: background-color .25s, color .25s; }
.cab-lien:is(:hover, :focus-visible) { background: var(--fg); color: var(--bg); }
.chiffre__k { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .25em; }
/* Bande 3 : une seule famille, plus percutante */
.band--ink .trois { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.band--ink .trois p { font-family: var(--serif); font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); line-height: 1.5; color: rgba(236, 232, 227, .82); }
.band--ink .trois p:first-child { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.9rem); line-height: 1.35; color: var(--paper); }
.band--ink .cle { font-weight: 400; font-style: italic; color: var(--paper); }
@media (max-width: 900px) { .band--ink .trois { grid-template-columns: 1fr; } }
/* Nous joindre : sans texte d'introduction, polices harmonisées */
.joindre-grid { grid-template-columns: minmax(0, 1fr); }
.contact-bloc { max-width: 42rem; }
.contact-bloc__k, .contact-bloc__coord { font-family: var(--sans); font-size: 1rem; font-weight: 400; color: var(--fg-70); }
.band--ink .trois p:first-child { font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem); line-height: 1.4; }

/* ===== Maquettes de Sarah Mincel, 27/09/2026 ===== */
/* Libellé de section : petite barre oblique puis l'intitulé, comme sur ses maquettes */
.lbl { display: flex; align-items: baseline; gap: .7rem; font-family: var(--sans); font-size: .9375rem; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--fg-70); margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); }
.lbl__bar { font-family: var(--serif); font-size: 1.15rem; font-style: italic; color: var(--fg-55); }
/* Nos pratiques : trois cartes de mêmes proportions */
.bande--prat .cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
.bande--prat .cartes .carte:first-child .carte__fig, .bande--prat .carte__fig { aspect-ratio: 4 / 3; }
.bande--prat .cartes .carte:nth-child(3) .carte__fig img { width: 100%; object-position: 50% 50%; }
.bande--prat .carte__t { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); }
.bande--prat .carte__go { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; text-decoration-color: color-mix(in srgb, var(--fg) 40%, transparent); }
@media (max-width: 900px) { .bande--prat .cartes { grid-template-columns: 1fr; gap: 2.5rem; } }
/* Lien fléché de section, souligné à l'encre (pas de jaune) */
.lien-fleche { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-family: var(--sans); font-size: .9375rem; font-weight: 500; color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .45em; text-decoration-color: color-mix(in srgb, var(--fg) 45%, transparent); white-space: nowrap; }
.lien-fleche:is(:hover, :focus-visible) { text-decoration-color: currentColor; }
/* Nos interventions */
.inter__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem 3rem; flex-wrap: wrap; }
.inter__t { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1.2rem + 2.8vw, 3.6rem); line-height: 1.08; letter-spacing: -.016em; margin: 0; }
.inter__p { font-size: 1rem; line-height: 1.7; color: var(--fg-70); max-width: 36rem; margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem); }
.bande--inter .refs { border-top-color: var(--fg); }
.bande--inter .ref__go { opacity: 1; transform: none; color: var(--fg-55); }
.bande--inter .ref:is(:hover, :focus-visible) .ref__go { color: var(--fg); transform: translateX(3px); }
.bande--inter .ref__t { font-size: clamp(1.05rem, .95rem + .45vw, 1.4rem); max-width: none; }
@media (max-width: 900px) { .bande--inter .ref__go { display: none; } }
/* Le cabinet : grand paragraphe, trois colonnes, secteurs en ligne, frise des repères */
.cab2 { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; flex-wrap: wrap; }
.cab2__lede { font-family: var(--serif); font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.2rem); line-height: 1.3; letter-spacing: -.01em; max-width: 34ch; margin: 0; }
.quis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.qui { border-top: 1px solid var(--fg); padding-top: 1.25rem; }
.qui__k { font-family: var(--sans); font-size: .9375rem; font-weight: 500; color: var(--fg-70); margin: 0 0 .9rem; }
.qui__d { font-family: var(--serif); font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); line-height: 1.45; margin: 0; }
.secteurs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem .7rem; margin: clamp(2.25rem, 4vw, 3rem) 0 0; font-size: .9375rem; line-height: 1.6; color: var(--fg-70); }
.secteurs__k { font-weight: 600; color: var(--fg); margin-right: .4rem; }
.secteurs__sep { color: var(--fg-38); }
.frise { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 4rem) 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem clamp(1rem, 2.5vw, 2rem); border-top: 1px solid var(--rule-strong); }
.jalon { position: relative; padding-top: 1.6rem; }
.jalon::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--fg); transform: skewX(calc(-1 * var(--coupe))); }
.jalon__a { display: block; font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1; letter-spacing: -.01em; }
.jalon__d { display: block; margin-top: .7rem; font-size: .9375rem; line-height: 1.55; color: var(--fg-70); }
@media (max-width: 900px) {
  .quis { grid-template-columns: 1fr; }
  .frise { grid-template-columns: 1fr 1fr; }
  .cab2 { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) { .frise { grid-template-columns: 1fr; } }
/* Ce que nous revendiquons : fond clair, trois colonnes titrées */
.revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.rev { border-top: 1px solid var(--fg); padding-top: 1.25rem; }
.rev__k { font-family: var(--sans); font-size: .9375rem; font-weight: 500; color: var(--fg-70); margin: 0 0 .9rem; }
.rev__d { font-size: 1.0625rem; line-height: 1.75; color: var(--fg-70); margin: 0; }
.rev__d strong { font-weight: inherit; font-style: italic; color: var(--fg); }
@media (max-width: 900px) { .revs { grid-template-columns: 1fr; } }
/* Nous joindre : bande photographique sombre, trois colonnes */
.photo--joindre { height: auto; min-height: clamp(18rem, 40svh, 26rem); place-items: stretch; align-content: center; }
.joindre2 { position: relative; z-index: 1; width: 100%; padding: clamp(3rem, 6vw, 5rem) var(--gutter); color: var(--paper); }
.photo--joindre .lbl { color: rgba(236, 232, 227, .8); }
.photo--joindre .lbl__bar { color: rgba(236, 232, 227, .6); }
.joindre2__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 4vw, 3.5rem); }
.joindre2__col { border-top: 1px solid rgba(236, 232, 227, .35); padding-top: 1.1rem; }
.joindre2__k { display: block; font-size: .9375rem; font-weight: 500; color: rgba(236, 232, 227, .75); margin-bottom: .8rem; }
.joindre2__v { display: block; font-family: var(--serif); font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1.3; color: var(--paper); text-decoration: none; overflow-wrap: anywhere; }
a.joindre2__v:is(:hover, :focus-visible) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (max-width: 900px) { .joindre2__cols { grid-template-columns: 1fr; } }
/* Ajustements après comparaison aux maquettes */
.matieres .mot__t { font-size: clamp(1.15rem, .95rem + .75vw, 1.55rem); }
.matieres .mot__l { padding: .8rem 0; }
.mot__sep { color: var(--fg-38); margin-inline: .3em; }
.photo--joindre::after { background: linear-gradient(to bottom, rgba(6, 12, 17, .72), rgba(6, 12, 17, .82)); }
@media (max-width: 900px) { .photo--joindre::after { background: linear-gradient(to bottom, rgba(6, 12, 17, .5), rgba(6, 12, 17, .7)); } }

/* Notre engagement, retours de Sarah du 27/09 relus sur son image :
   titre en gras net, intitulés nettement plus grands, mots clés en vrai gras (plus d'italique), trois textes à la même taille */
.bande--engs > .label { font-weight: 700; }
.eng__t { font-size: clamp(1.15rem, 1rem + .45vw, 1.35rem); font-weight: 600; line-height: 1.3; color: var(--fg); }
.eng__d, .eng--methode .eng__d { font-size: clamp(1.2rem, 1rem + .75vw, 1.6rem); line-height: 1.34; color: var(--fg-70); margin-top: .9rem; }
.eng__d strong { font-weight: 700; font-style: normal; color: var(--fg); }

/* Frise sur téléphone : fil vertical du premier au dernier repère, tracé au défilement ; chaque repère s'allume
   quand le fil l'atteint (noyau encre en opacité et transformation). Textes à leur contraste final.
   Sans JavaScript ou avec mouvement réduit, le fil est plein et tous les repères sont allumés. */
@media (max-width: 720px) {
  .frise { position: relative; display: block; border-top: 0; margin-top: 2.5rem; padding: .25rem 0 0 1.9rem; --p: 1; }
  .frise::before, .frise::after { content: ''; position: absolute; left: 5px; top: var(--f0, .6rem); height: calc(var(--f1, 100%) - var(--f0, .6rem)); width: 1px; }
  .frise::before { background: var(--rule-strong); }
  .frise::after { background: var(--fg); transform-origin: top; transform: scaleY(var(--p)); }
  .jalon { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); column-gap: .9rem; align-items: baseline; padding: 0 0 1.9rem; }
  .jalon:last-child { padding-bottom: 0; }
  .jalon::before { top: .55rem; left: calc(-1.9rem + 1px); width: 9px; height: 9px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); }
  .jalon::after { content: ''; position: absolute; top: .55rem; left: calc(-1.9rem + 1px); width: 9px; height: 9px; background: var(--fg); transform: skewX(calc(-1 * var(--coupe))) scale(1.25); }
  .jalon__a { font-size: 1.65rem; }
  .jalon__d { margin-top: 0; font-size: .9375rem; line-height: 1.5; }
  html.frise-anim .frise { --p: 0; }
  html.frise-anim .jalon::after { opacity: 0; transform: skewX(calc(-1 * var(--coupe))) scale(.2); transition: opacity .18s ease, transform .18s var(--ease-out); }
  html.frise-anim .jalon.is-lit::after { opacity: 1; transform: skewX(calc(-1 * var(--coupe))) scale(1.25); }
  html.frise-anim .jalon__a, html.frise-anim .jalon__d { transform: translate3d(0, 4px, 0); transition: transform .3s var(--ease-out); }
  html.frise-anim .jalon.is-lit .jalon__a, html.frise-anim .jalon.is-lit .jalon__d { transform: none; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  html.frise-anim .frise { --p: 1; }
  html.frise-anim .jalon::after { opacity: 1; transition: none; }
  html.frise-anim .jalon__a, html.frise-anim .jalon__d { transform: none; transition: none; }
}

/* ===== Accueil : mouvement composé, passe Astra du 28/09/2026 =====
   Actif seulement avec html.am (posé par motion.js hors mouvement réduit). Les états cachés n'existent pas sans script.
   Deux courbes : --ease-out pour les textes, --lame pour les coupes. Seuls opacity et transform s'animent. */
html.am [data-am] { transition-property: opacity, transform; transition-timing-function: var(--ease-out); transition-delay: var(--ad, 0ms); }
html.am [data-am]:not(.am-in) { will-change: opacity, transform; }

/* 1. Ouverture : titre, puis sous-titre, puis paragraphe */
html.am [data-am="hero"]:not(.am-in) { opacity: 0; transform: translate3d(0, var(--ay, 8px), 0); }
html.am .hero__sig { --ay: 12px; transition-duration: .65s; }
html.am .hero__sub { --ay: 8px; --ad: 120ms; transition-duration: .4s; }
html.am .hero__claim { --ay: 6px; --ad: 220ms; transition-duration: .4s; }
@media (max-width: 720px) {
  html.am .hero__sig { --ay: 6px; transition-duration: .45s; }
  html.am .hero__sub { --ay: 4px; --ad: 80ms; transition-duration: .3s; }
  html.am .hero__claim { --ay: 3px; --ad: 140ms; transition-duration: .3s; }
}

/* 2. et 6. Volets obliques à 13° : portraits et bandes photographiques découverts par translation (jamais clip-path) */
html.am .am-volet { position: absolute; z-index: 3; top: -6%; bottom: -6%; left: -45%; width: 190%; background: var(--bg); pointer-events: none;
  transform: translate3d(0, 0, 0) skewX(calc(-1 * var(--coupe))); transition: transform .65s var(--lame) var(--ad, 0ms); will-change: transform; }
html.am .am-in .am-volet, html.am .am-in.am-volet { transform: translate3d(100%, 0, 0) skewX(calc(-1 * var(--coupe))); will-change: auto; }
html.am .photo .am-volet { transition-duration: .7s; }
@media (max-width: 720px) { html.am .am-volet { transition-duration: .45s; } }
html.am .face.am-in .am-volet { transition-delay: var(--ad, 0ms); }
/* Anciens mouvements remplacés : balayage clip-path des bandes, zoom fort des portraits */
html.js.am.motion-vif .photo .photo__img, html.js.am.motion-vif .photo.is-in .photo__img { clip-path: none; transition: none; }
html.js.am .face .pf img, html.js.am.motion-vif .faces .pf img { transition: transform .35s var(--ease-out); }
html.js.am .face:is(:hover, :focus-visible) .pf img, html.js.am.motion-vif .face:is(:hover, :focus-visible) .pf img { transform: scale(1.025); }
/* Téléphone : la couleur des portraits apparaît au centre de l'écran par fondu, sans clip-path */
@media (hover: none) {
  html.js.am .pf__c { clip-path: none; opacity: 0; transition: opacity .6s ease; }
  html.js.am .is-on .pf__c { clip-path: none; opacity: 1; }
}
/* Textes posés sur les bandes : courts, après le passage du volet */
html.am [data-am="photo-txt"]:not(.am-in) { opacity: 0; transform: translate3d(0, 6px, 0); }
html.am [data-am="photo-txt"] { transition-duration: .35s; --ad: 350ms; }
@media (max-width: 720px) { html.am [data-am="photo-txt"] { --ad: 220ms; } }

/* 3. Expertises et interventions : le filet se trace, puis la ligne monte ; décalages par rangée, plafonnés */
html.am [data-am="ligne"] { position: relative; border-bottom-color: transparent; }
html.am [data-am="ligne"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--am-filet, var(--rule)); transform-origin: left center;
  transform: scaleX(0); transition: transform .38s var(--ease-out) var(--ad, 0ms); }
html.am [data-am="ligne"].am-in::after { transform: none; }
html.am .mot[data-am="ligne"] { --am-filet: color-mix(in srgb, var(--fg) 25%, transparent); }
html.am [data-am="ligne"] > * { transition: opacity .36s var(--ease-out), transform .36s var(--ease-out); transition-delay: calc(var(--ad, 0ms) + 60ms); }
html.am [data-am="ligne"]:not(.am-in) > * { opacity: 0; transform: translate3d(0, 6px, 0); }
html.am .ref[data-am="ligne"] > .ref__go { transition-delay: calc(var(--ad, 0ms) + 60ms), 0s; }
html.am .mot__a { transition: opacity .18s ease, transform .18s var(--ease-out); }
html.am .mot__l:is(:hover, :focus-visible) .mot__a { transform: translateX(3px); }
/* Téléphone : la flèche des interventions reste visible */
@media (max-width: 900px) {
  .bande--inter .ref { padding-right: 1.8rem; }
  .bande--inter .ref__go { display: block; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); opacity: 1; color: var(--fg-55); }
}

/* 4. Engagement, cabinet (trois colonnes), valeurs, coordonnées : filet d'abord, puis intitulé, puis texte */
html.am [data-am="eng"] { position: relative; border-top-color: transparent; }
html.am [data-am="eng"]::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--am-filet, var(--fg)); transform-origin: left center;
  transform: scaleX(0); transition: transform .42s var(--ease-out) var(--ad, 0ms); }
html.am [data-am="eng"].am-in::before { transform: none; }
html.am .joindre2__col[data-am="eng"] { --am-filet: rgba(236, 232, 227, .35); }
html.am [data-am="eng"] > * { transition: opacity .42s var(--ease-out), transform .42s var(--ease-out); }
html.am [data-am="eng"] > :nth-child(1) { transition-delay: calc(var(--ad, 0ms) + 80ms); }
html.am [data-am="eng"] > :nth-child(n + 2) { transition-delay: calc(var(--ad, 0ms) + 140ms); }
html.am [data-am="eng"]:not(.am-in) > * { opacity: 0; transform: translate3d(0, 8px, 0); }

/* 5. Le cabinet : le grand paragraphe entre en premier ; textes courants et jalons de la frise sur bureau */
html.am [data-am="lede"]:not(.am-in) { opacity: 0; transform: translate3d(0, 10px, 0); }
html.am [data-am="lede"] { transition-duration: .5s; }
html.am :is([data-am="txt"], [data-am="carte"], [data-am="jalon"]):not(.am-in) { opacity: 0; transform: translate3d(0, 8px, 0); }
html.am :is([data-am="txt"], [data-am="carte"], [data-am="jalon"]) { transition-duration: .42s; }

/* 6. Cartes des pratiques : sur téléphone, une seule stabilisation de l'image à l'entrée, sans mouvement continu */
@media (max-width: 900px) {
  html.am .carte__fig img { transform: scale(1.035); transition: transform .55s var(--ease-out) var(--ad, 0ms); }
  html.am .carte.am-in .carte__fig img { transform: scale(1); }
}

/* Mouvement réduit, au cas où la préférence change pendant la visite avant que le script ne retire html.am */
@media (prefers-reduced-motion: reduce) {
  html.am [data-am], html.am [data-am] > *, html.am [data-am]::before, html.am [data-am]::after, html.am .am-volet { transition: none !important; }
  html.am [data-am]:not(.am-in), html.am [data-am]:not(.am-in) > * { opacity: 1 !important; transform: none !important; }
  html.am .am-volet { display: none; }
}

/* ===== Téléphone fidèle à l'ordinateur (29/09, retour de Michael du 28/09) =====
   Ce qui est côte à côte sur ordinateur se parcourt au doigt, à l'horizontale, au lieu de s'empiler.
   Rien ici ne s'applique au-dessus de 720 px. */
.inter__tout { display: none; }
@media (max-width: 720px) {
  /* 1. Ouverture : le titre occupe le premier écran, comme sur ordinateur */
  .hero { min-height: 86svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 2.25rem; }
  .hero__sig { font-size: clamp(3.2rem, 16.5vw, 5.2rem); line-height: .94; max-width: none; }
  .hero__sub { font-size: 1.15rem; }

  /* 2. Carrousels au doigt : équipe, pratiques, trois colonnes du cabinet, valeurs */
  .faces, .bande--prat .cartes, .quis, .revs {
    display: grid; grid-auto-flow: column; grid-template-columns: none;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .faces::-webkit-scrollbar, .bande--prat .cartes::-webkit-scrollbar, .quis::-webkit-scrollbar, .revs::-webkit-scrollbar { display: none; }
  .faces { grid-auto-columns: 70%; gap: 2px; }
  .faces > .face { scroll-snap-align: start; }
  .bande--prat .cartes, .quis, .revs {
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    align-items: start;
  }
  .bande--prat .cartes { grid-auto-columns: 82%; gap: 1rem; padding-block: .5rem 0; }
  .bande--prat .cartes .carte { scroll-snap-align: start; }
  .bande--prat .cartes .carte .carte__fig, .bande--prat .cartes .carte:first-child .carte__fig { aspect-ratio: 4 / 3; }
  .quis, .revs { grid-auto-columns: 82%; gap: 1.25rem; }
  .quis > *, .revs > * { scroll-snap-align: start; }
  .quis:focus-visible, .revs:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }

  /* 3. Interventions : quatre dossiers, puis le lien vers toutes */
  .bande--inter .ref:nth-child(n + 5) { display: none; }
  .bande--inter .inter__tete .lien-fleche { display: none; }
  .inter__tout { display: block; margin: 1.5rem 0 0; }

  /* 4. Bandes photographiques plus hautes, au format portrait */
  .photo--retablir { height: clamp(26rem, 70svh, 34rem); padding-bottom: 3rem; }
  .photo--ny { height: clamp(24rem, 64svh, 32rem); min-height: 0; padding-block: 3rem; }
  .photo--retablir .photo__q { font-size: clamp(1.9rem, 8.4vw, 2.5rem); line-height: 1.12; }

  /* 5. Pied de page condensé : coordonnées, une ligne de liens, mentions */
  .foot__grid { gap: 1.5rem; }
  .foot__grid > div:nth-child(3) { display: none; }
  .foot__grid > div:nth-child(2) h3, .foot__grid > div:nth-child(4) h3 { display: none; }
  .foot__grid > div:nth-child(2) ul { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 0; padding: 0; }
  .foot__grid > div:nth-child(2) li { margin: 0; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .faces, .bande--prat .cartes, .quis, .revs { scroll-behavior: auto; }
}
/* Téléphone : le portrait glissé au centre de l'écran, et c'est lui seul qui prend ses couleurs */
@media (max-width: 720px) {
  .faces { grid-auto-columns: 62vw; padding-inline: 19vw; scroll-padding-inline: 19vw; }
  .faces > .face { scroll-snap-align: center; }
  html.js.am .faces .pf__c { transition: opacity .5s ease; }
}

/* ===== Entrée de marque (accueil, une fois par visite, assets/js/entree.js) =====
   La barre oblique du logotype se trace, CAHN et WILSON en sortent, la barre devient un trait pleine hauteur
   et l'écran s'ouvre le long de ce trait. Géométrie du fichier logotype : la barre va de (649, 385) à (775, 1)
   sur 1642 × 386, soit 18,2° ; son milieu est placé au centre de l'écran. Papier et encre, comme le site. */
.entree { display: none; }
html.entree-on .entree { --lw: min(620px, 74vw); --pente: 16.4vh; display: block; position: fixed; inset: 0; z-index: 300; cursor: pointer; animation: entree-secours .6s ease 7s forwards; }
/* Les gestes sont suspendus par entree.js sans changer le conteneur sticky. */
.entree__v { position: absolute; inset: 0; background: var(--paper); transition: transform 1.05s cubic-bezier(.75, 0, .2, 1); }
.entree__v--g { clip-path: polygon(0 0, calc(50% + var(--pente)) 0, calc(50% - var(--pente)) 100%, 0 100%); }
.entree__v--d { clip-path: polygon(calc(50% + var(--pente)) 0, 100% 0, 100% 100%, calc(50% - var(--pente)) 100%); }
.entree__logo { position: absolute; top: 50%; left: calc(50% - var(--lw) * .4336); width: var(--lw); aspect-ratio: 1642 / 386; transform: translateY(-50%); }
.entree__mot, .entree__coupe, .entree__logo--coupe::before { position: absolute; inset: 0; background: var(--ink); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.entree__mot { opacity: 0; transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .55s ease; }
.entree__mot--g { -webkit-mask-image: url('/assets/images/brand/logo-cahn.svg'); mask-image: url('/assets/images/brand/logo-cahn.svg'); transform: translateX(4%); }
.entree__mot--d { -webkit-mask-image: url('/assets/images/brand/logo-wilson.svg'); mask-image: url('/assets/images/brand/logo-wilson.svg'); transform: translateX(-4%); }
.entree__logo--coupe::before { content: ''; -webkit-mask-image: url('/assets/images/brand/logo-coupe.svg'); mask-image: url('/assets/images/brand/logo-coupe.svg'); opacity: .14; }
.entree__coupe { -webkit-mask-image: url('/assets/images/brand/logo-coupe.svg'); mask-image: url('/assets/images/brand/logo-coupe.svg'); clip-path: inset(calc((1 - var(--p, .08)) * 100%) 0 0 0); transition: clip-path .6s ease-out; }
.entree__logo--coupe { transition: opacity .4s ease; }
.entree__trait { position: absolute; left: 50%; top: 50%; width: 1px; height: 130vh; background: var(--ink); transform: translate(-50%, -50%) rotate(18.2deg) scaleY(0); transition: transform .45s cubic-bezier(.6, 0, .2, 1), opacity .6s ease .35s; }
.entree.is-mots .entree__mot { transform: none; opacity: 1; }
.entree.is-trait .entree__trait { transform: translate(-50%, -50%) rotate(18.2deg) scaleY(1); }
.entree.is-trait .entree__logo--coupe { opacity: 0; }
.entree.is-ouvert { pointer-events: none; }
.entree.is-ouvert .entree__trait { opacity: 0; }
.entree.is-ouvert .entree__v--g { transform: translate(-60vw, -19.7vw); }
.entree.is-ouvert .entree__v--d { transform: translate(60vw, 19.7vw); }
html.entree-on .entree.is-fini { display: none; }
@keyframes entree-secours { to { opacity: 0; visibility: hidden; } }

/* ===== Récit de l'engagement (accueil, assets/js/recit.js) =====
   D'après la direction « Équilibre » retenue par Michael Cahn le 02/10 : la scène tient pendant le défilement,
   les trois engagements se relaient en grand à gauche, une photographie d'architecture change à droite.
   Textes inchangés. Sans script ou avec mouvement réduit : liste simple, sans photographie. */
.recit-eng { padding-block: clamp(3rem, 7vw, 7rem); }
.recit-eng__stage { padding-inline: var(--gutter); }
.recit-eng__items { display: grid; gap: 2.4rem; margin-top: 1.6rem; }
.recit-eng__t { display: flex; align-items: center; font-family: var(--sans); font-size: clamp(1rem, .95rem + .3vw, 1.2rem); font-weight: 600; color: var(--fg); }
.recit-eng__t .bar { margin-inline: 0 .7em; opacity: .7; }
.recit-eng__big { margin: 1rem 0 0; font-family: var(--serif); font-size: clamp(1.9rem, 1.2rem + 3.2vw, 4.6rem); line-height: 1.06; letter-spacing: -.02em; color: var(--fg); max-width: 15ch; text-wrap: balance; }
.recit-eng__big strong { font-weight: inherit; font-style: italic; }
.recit-eng__suite { display: block; margin-top: 1.4rem; font-family: var(--sans); font-size: clamp(1.02rem, .95rem + .35vw, 1.25rem); line-height: 1.55; letter-spacing: 0; color: var(--fg-70); max-width: 38ch; }
.recit-eng__jalons, .recit-eng__fig { display: none; }

/* Cadre fixe inspiré de la direction Équilibre. Le défilement sélectionne une formule
   visible à la fois ; sa courte transition reste indépendante de l'arrêt de la molette. */
.recit-eng.is-recit { height: 320svh; padding: 0; }
.recit-eng.is-recit .recit-eng__stage { position: sticky; top: var(--head); height: calc(100svh - var(--head)); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: stretch; padding-block: clamp(1.5rem, 4vh, 3rem); }
.recit-eng.is-recit .recit-eng__txt { position: relative; display: flex; flex-direction: column; min-height: 0; }
.recit-eng.is-recit .recit-eng__tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.recit-eng.is-recit .recit-eng__tete .label { margin: 0; }
.recit-eng.is-recit .recit-eng__items { position: relative; flex: 1; margin: 0; }
.recit-eng.is-recit .recit-eng__item { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: var(--a, 0); transform: translateY(var(--y, 40px)); visibility: hidden; will-change: opacity, transform; }
.recit-eng.is-recit .recit-eng__item.is-vu { visibility: visible; }
.recit-eng.is-recit .recit-eng__jalons { display: flex; gap: .7rem; }
.recit-eng__jalons i { width: 2.6rem; height: 3px; background: var(--rule-strong); transform: skewX(calc(-1 * var(--coupe))); transition: background .5s ease; }
.recit-eng__jalons i.is-on { background: var(--fg); }
.recit-eng.is-recit .recit-eng__fig { display: block; position: relative; margin: 0; height: 100%; overflow: hidden; clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%); background: var(--paper-high); }
.recit-eng__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); opacity: var(--a, 0); transform: scale(calc(1 + var(--z, 0) * .08)); will-change: opacity, transform; }

@media (max-width: 900px) {
  /* Téléphone, comme d1 : la photographie en haut du cadre fixe, la formule dessous */
  .recit-eng.is-recit { height: 300svh; }
  .recit-eng.is-recit .recit-eng__stage { display: flex; flex-direction: column; gap: 1.2rem; padding-block: 0 1.2rem; }
  .recit-eng.is-recit .recit-eng__fig { order: -1; flex: 0 0 36%; height: auto; align-self: stretch; margin: 0 calc(var(--gutter) * -1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%); }
  .recit-eng.is-recit .recit-eng__txt { flex: 1; }
  .recit-eng.is-recit .recit-eng__item { justify-content: flex-start; padding-top: 1.4rem; }
  .recit-eng__big { font-size: clamp(1.75rem, 8vw, 2.6rem); }
  .recit-eng__suite { margin-top: 1rem; }
}
.recit-eng .label { font-weight: 700; }

/* Relecture mobile du 04/10 : les mots conduisent la scène. */
:root { --paper: #e5e1de; --paper-high: #efedeb; }
body { overflow-x: clip; }
.recit-eng.is-recit { height: 280svh; }
.recit-eng.is-recit .recit-eng__items { overflow: clip; }
.recit-eng.is-recit .recit-eng__item { opacity: 1; transform: none; will-change: auto; }
.recit-eng.is-recit .recit-eng__item.is-changing { animation: recit-arrive .38s cubic-bezier(.2,.7,.2,1) both; }
@keyframes recit-arrive { from { opacity: .15; transform: translateY(var(--recit-enter,18px)); } to { opacity: 1; transform: none; } }
.recit-eng__fig img { opacity: 0; transform: none; transition: opacity .45s ease; will-change: auto; }
.recit-eng__fig img.is-on { opacity: 1; }
.recit-eng.is-recit .recit-eng__tete { flex-wrap: wrap; }
.recit-eng.is-recit .recit-eng__jalons { display: flex; gap: 1.1rem; }
.recit-eng__jalons button { appearance: none; border: 0; border-top: 2px solid var(--rule); padding: .65rem 0; background: none; color: var(--fg-70); font: 500 .75rem/1.3 var(--sans); cursor: pointer; min-height: 44px; }
.recit-eng__jalons button.is-on { border-color: var(--fg); color: var(--fg); }
.recit-eng__jalons button:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
@media(max-width:720px) {
 :root { --head: 64px; }
 .masthead { background: var(--paper); }
 .masthead__in { gap: 1rem; }
 .burger { min-height: 44px; min-width: 44px; }
 .hero { min-height: 0; display: block; padding: calc(var(--head) + 2rem) var(--gutter) 1.5rem; }
 .hero__sig { font-size: clamp(2.4rem,10.8vw,4rem); line-height: 1.06; max-width: none; }
 .hero__sub { font-size: 1.05rem; line-height: 1.45; margin-top: 1.3rem; }
 .hero__claim { font-size: .95rem; line-height: 1.55; margin-top: 1.5rem; }
 .equipe-titre { padding-top: 1.5rem; margin-bottom: 1.1rem; }
 .faces { grid-auto-columns: 62vw; gap: .75rem; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); border: 0; }
 .faces > .face { scroll-snap-align: start; }
 .face .pf { aspect-ratio: 4/5; }
 .face__nom { position: static; display: block; padding: .8rem 0 .2rem; background: none; color: var(--ink); font-size: 1.15rem; }
 .face__role { color: var(--fg-70); font-size: .75rem; }
 .recit-eng.is-recit { height: 250svh; margin-top: 2.5rem; }
 .recit-eng.is-recit .recit-eng__stage { gap: 1rem; padding-block: 1.1rem max(1rem,env(safe-area-inset-bottom)); }
 .recit-eng.is-recit .recit-eng__txt { order: 0; flex: 1 1 auto; }
 .recit-eng.is-recit .recit-eng__tete { display: block; }
 .recit-eng.is-recit .recit-eng__tete .label { font-size: 1.1rem; }
 .recit-eng.is-recit .recit-eng__jalons { margin-top: 1rem; gap: .8rem; }
 .recit-eng__jalons button { flex: 1; text-align: left; }
 .recit-eng.is-recit .recit-eng__item { justify-content: center; padding: .6rem 0; }
 .recit-eng__t { font-size: .85rem; font-weight: 500; }
 .recit-eng__big { font-size: clamp(1.95rem,8.8vw,2.8rem); line-height: 1.12; max-width: 18ch; margin-top: .7rem; }
 .recit-eng__suite { font-size: 1rem; line-height: 1.45; margin-top: 1rem; }
 .recit-eng.is-recit .recit-eng__fig { order: 1; flex: 0 0 22%; min-height: 0; margin: 0; clip-path: none; }
 .photo--retablir { height: clamp(20rem,52svh,28rem); }
 .photo--ny { height: clamp(18rem,46svh,25rem); }
}
@media(prefers-reduced-motion:reduce) {
 .recit-eng.is-recit .recit-eng__item.is-changing { animation: none; }
 .recit-eng__fig img { transition: none; }
}

/* Remarque de Sarah (08/10) : moins de blanc entre la dernière intervention et le cabinet */
.bande--inter { padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem); }
.bande--inter + .bande--cab { padding-top: clamp(2rem, 3.5vw, 3.5rem); }

/* Textes d'origine de l'ancien site (10/10) : suite du cabinet, introduction des compétences, introductions courtes */
.cab2__suite { margin-top: clamp(1.4rem, 2.5vw, 2rem); max-width: 44rem; columns: 2 20rem; column-gap: clamp(1.5rem, 3vw, 3rem); }
.cab2__suite p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.7; color: var(--fg-70); break-inside: avoid; }
.comp-intro { max-width: 60rem; columns: 2 22rem; column-gap: clamp(1.5rem, 3vw, 3rem); margin: clamp(1.2rem, 2.5vw, 2rem) 0 clamp(2rem, 4vw, 3rem); }
.comp-intro p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.7; color: var(--fg-70); break-inside: avoid; }
.inter__p--intro { margin: 0; }
.equipe-intro { padding: 0 var(--gutter); margin: .4rem 0 1.4rem; max-width: 44rem; font-size: 1rem; line-height: 1.7; color: var(--fg-70); }

/* Compétences (12/10) : une ligne par compétence, intitulé et première phrase d'origine, lien vers la page */
p.comp-intro { columns: auto; max-width: 40rem; margin: clamp(1rem, 2vw, 1.6rem) 0 clamp(1.6rem, 3vw, 2.4rem); font-family: var(--serif); font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); line-height: 1.35; color: var(--fg); }
.matieres--comp { display: block; border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); }
.matieres--comp .mot { grid-column: auto; grid-row: auto; }
.matieres--comp .mot__l { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; align-items: baseline; gap: clamp(1rem, 3vw, 3rem); padding: clamp(1rem, 1.8vw, 1.5rem) 0; }
.matieres--comp .mot__t { font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); }
.mot__d { font-family: var(--sans); font-size: .95rem; line-height: 1.6; color: var(--fg-70); }
@media (max-width: 900px) {
  .matieres--comp .mot__l { grid-template-columns: minmax(0, 1fr) auto; row-gap: .5rem; }
  .matieres--comp .mot__d { grid-column: 1; grid-row: 2; font-size: .92rem; }
  .matieres--comp .mot__a { grid-column: 2; grid-row: 1; }
}

/* Récit sur téléphone (12/10) : le même effet que sur ordinateur, composé pour l'écran vertical.
   Photographie pleine largeur en haut du cadre, formule en grand dessous, repères en tête. */
@media (max-width: 720px) {
  .recit-eng.is-recit { height: 300svh; margin-top: 1.5rem; }
  .recit-eng.is-recit .recit-eng__stage { padding-block: .9rem max(1.2rem, env(safe-area-inset-bottom)); gap: 0; }
  .recit-eng.is-recit .recit-eng__txt { display: contents; }
  .recit-eng.is-recit .recit-eng__tete { order: 0; }
  .recit-eng.is-recit .recit-eng__jalons { margin-top: .7rem; }
  .recit-eng.is-recit .recit-eng__fig { order: 1; flex: 0 0 38%; margin: 1rem calc(var(--gutter) * -1) 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); }
  .recit-eng.is-recit .recit-eng__items { order: 2; flex: 1 1 auto; }
  .recit-eng.is-recit .recit-eng__item { justify-content: center; padding: 0; }
  .recit-eng.is-recit .recit-eng__big { font-size: clamp(2.3rem, 10.6vw, 3.3rem); line-height: 1.06; max-width: 12ch; }
  .recit-eng.is-recit .recit-eng__suite { font-size: 1.02rem; max-width: 30ch; }
  .recit-eng__fig img { transition: opacity .5s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); transform: scale(1.06); }
  .recit-eng__fig img.is-on { transform: none; }
}


/* Compétences en menu déroulant (13/10, retour d'Elise : comme l'ancien site, texte complet sur l'accueil) */
.comps { border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); }
.comp { border-bottom: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); scroll-margin-top: calc(var(--head) + 1rem); }
.comp__s { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.1rem, 2vw, 1.6rem) 0; cursor: pointer; list-style: none; }
.comp__s::-webkit-details-marker { display: none; }
.comp__s:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.comp__t { font-family: var(--serif); font-size: clamp(1.4rem, 1.05rem + 1.2vw, 2.1rem); line-height: 1.15; letter-spacing: -.01em; color: var(--fg); }
.comp__i { position: relative; flex: none; width: 1.1rem; height: 1.1rem; }
.comp__i::before, .comp__i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--fg); transition: transform .3s var(--ease-out); }
.comp__i::after { transform: rotate(90deg); }
.comp[open] .comp__i::after { transform: rotate(0deg); }
.comp__c { max-width: 46rem; padding: 0 0 clamp(1.4rem, 2.5vw, 2rem); }
.comp__c p { margin: 0 0 1rem; font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); line-height: 1.7; color: var(--fg-70); }
.comp[open] .comp__c { animation: comp-ouvre .35s var(--ease-out) both; }
@keyframes comp-ouvre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .comp[open] .comp__c { animation: none; } .comp__i::before, .comp__i::after { transition: none; } }

/* Lisibilité (13/10, retour d'Elise : textes et petits titres trop petits) */
.hero__claim, .equipe-intro, .inter__p, .cab2__suite p { font-size: clamp(1.06rem, 1rem + .3vw, 1.19rem); line-height: 1.65; }
.comp__c p { font-size: clamp(1.06rem, 1rem + .3vw, 1.19rem); }
.face__nom { font-size: 1.15rem; }
html :is(.face__role, .ref__c, .jalon__d, .secteurs, .secteurs__k, .qui__k, .lien-fleche, .lbl, .small) { font-size: 1rem; }
.foot, .foot address, .foot__ordre, .foot a { font-size: 1rem; }
html :is(.foot__base, .foot__base a, .foot a) { font-size: .9375rem; }
html .foot address a { font-size: 1rem; }
@media (max-width: 720px) {
  .hero__claim, .equipe-intro, .inter__p, .comp__c p { font-size: 1.06rem; }
  html .face__role { font-size: .9375rem; }
}

/* Lisibilité, second passage (13/10) : intitulés de section, repères et petits titres */
html .bande > .lbl, html .bande > h2.lbl, html .joindre2 .lbl { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); color: var(--fg); }
html .joindre2 .lbl { color: rgba(236, 232, 227, .95); }
html .recit-eng__jalons button { font-size: .9375rem; }
html .qui__k { font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); color: var(--fg); }
html :is(.jalon__d, .secteurs span, .secteurs__k) { font-size: 1.06rem; }
html .face__nom { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
html .photo__k { font-size: 1.1rem; }
html .joindre2__k { font-size: 1rem; }
html .foot h3 { font-size: .9375rem; }
@media (min-width: 1200px) {
  .hero__claim, .equipe-intro, .inter__p, .comp__c p { font-size: 1.25rem; }
}
html .nav a, html .burger { font-size: 1rem; }

/* Mise en avant du cabinet (14/10, Sarah : « d'après la charte, gras italique ») */
html strong em, html em strong { font-style: italic; font-weight: 700; }
html .recit-eng__big strong, html .recit-eng__big strong em { font-weight: 700; font-style: italic; }
html .hero__claim strong em, html .comp-intro strong em, html .inter__p strong em, html .cab2__lede strong em { font-weight: 600; }

/* Retours de Sarah (14/10) : moins de blanc sous l'ouverture, introduction des compétences sur toute la largeur,
   espace sous les compétences aligné sur celui de la section Références */
@media (min-width: 721px) {
  html .hero { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
  html .equipe-titre { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
}
html p.comp-intro { max-width: none; }
html #competences { padding-bottom: clamp(2.5rem, 4vw, 3.75rem); }

/* Secteurs en bandeau qui défile (14/10, Sarah) : deux pistes identiques, la seconde masquée aux lecteurs d'écran */
html .secteurs--defile { display: block; }
html .secteurs--defile .secteurs__k { margin: 0 0 .9rem; }
.defile { display: flex; overflow: hidden; border-block: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.defile__piste { display: flex; flex: none; gap: 0; margin: 0; padding: 0; list-style: none; animation: defile 48s linear infinite; }
.defile__piste li { flex: none; padding: 1rem 0; font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); color: var(--fg); white-space: nowrap; }
.defile__piste li::after { content: "/"; margin: 0 1.6rem; color: var(--fg-55, #8a8587); }
.defile:hover .defile__piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .defile { -webkit-mask-image: none; mask-image: none; }
  .defile__piste { animation: none; flex-wrap: wrap; flex: 1; }
  .defile__piste[aria-hidden="true"] { display: none; }
}
html.nomotion .defile__piste { animation: none; }

/* Références (14/10, Sarah) : un vrai espace entre l'introduction et la liste des cas */
html .bande--inter .refs { margin-top: clamp(2rem, 3.5vw, 3rem); }

/* Citation sur photo : la mise en avant reste en gras italique (14/10) */
html .photo__q strong em, html .photo__q em { font-style: italic; }

/* Introduction des références sur toute la largeur, comme celle des compétences (14/10) */
html .inter__p--intro { flex: 1 1 0; max-width: none; }
@media (min-width: 901px) { html .bande--inter .inter__tete { flex-wrap: nowrap; } html .bande--inter .inter__tete .lien-fleche { flex: none; } }

/* Citation sur photo : ombre portée douce pour la lisibilité (14/10) */
html .photo__q { text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.55), 0 0 42px rgba(0,0,0,.35); }

/* Secteurs et repères (14/10) : intitulé à gauche du bandeau sur ordinateur, bandeau plus fin, frise titrée, moins de vide */
html .defile__piste li { font-size: clamp(1.1rem, .95rem + .45vw, 1.35rem); padding: .8rem 0; }
html .defile__piste li::after { margin: 0 1.2rem; }
html .defile { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
html .frise__k { margin: clamp(2rem, 4vw, 3rem) 0 0; }
html .frise__k + .frise { margin-top: 1.4rem; }
html .bande--cab { padding-bottom: clamp(2.5rem, 4.5vw, 4rem); }
@media (min-width: 901px) {
  html .secteurs--defile { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); align-items: center; gap: 2rem; }
  html .secteurs--defile .secteurs__k { margin: 0; }
  html .frise__k { display: block; }
}

/* Secteurs : titre et phrase d'origine (14/10), le bandeau dessous sur toute la largeur */
html .secteurs__intro { margin: 0 0 1rem; max-width: 48rem; font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem); line-height: 1.6; color: var(--fg-70); }
@media (min-width: 901px) {
  html .secteurs--defile { grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); grid-template-areas: "k intro" "defile defile"; row-gap: 1.1rem; }
  html .secteurs--defile .secteurs__k { grid-area: k; }
  html .secteurs--defile .secteurs__intro { grid-area: intro; margin: 0; }
  html .secteurs--defile .defile { grid-area: defile; }
}

/* Le cabinet (accueil) : la phrase d'ouverture sur toute la largeur, comme les compétences et les références (14/10) */
@media (min-width: 901px) {
  html .cab2 { flex-wrap: nowrap; }
  html .cab2__lede { flex: 1 1 0; max-width: none; }
  html .cab2 .lien-fleche { flex: none; }
}
html .secteurs__intro { max-width: none; }

/* Récit : le trait oblique des intitulés débordait de la zone masquée et perdait son coin (14/10) */
html .recit-eng__t { padding-left: .3em; }
html .recit-eng.is-recit .recit-eng__items { overflow-clip-margin: .6rem; }

html .equipe-intro { max-width: none; }

/* Audit visuel (14/10) */
/* Le bouton Menu restait à 14 px : la règle :is() de la ligne « bas-de-casse » l'emportait sur celle du menu à 16 px */
html .masthead .burger { font-size: 1rem; }
/* Nous joindre : l'adresse e-mail se coupait en « .co / m » entre 900 et 1200 px ; les trois valeurs suivent la largeur de leur colonne */
.joindre2__col { container-type: inline-size; }
html .joindre2__v { font-size: min(clamp(1.3rem, 1rem + 1vw, 1.9rem), 8.2cqi); }
/* Focus clavier visible sur fond sombre (Nous joindre, bandeau photo, pied de page) : le contour encre y était invisible */
.joindre2 :focus-visible, .foot :focus-visible, .band--ink :focus-visible { outline-color: var(--paper); }
/* Compétences : un retour au survol, comme les autres éléments cliquables */
.comp__s:hover .comp__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, var(--fg) 45%, transparent); }
/* Pied de page entre 721 et 1060 px : deux colonnes sur deux rangs, au lieu de trois colonnes et d'une quatrième seule en dessous */
@media (min-width: 721px) and (max-width: 1060px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Équipe de l'accueil (15/10, Sarah) : même présentation que la page Avocats, portrait entier en 4:5
   et nom sous la photo, pour que le nom ne mange jamais le visage, quelle que soit la largeur de fenêtre */
html .faces { gap: clamp(.75rem, 1.5vw, 1.25rem); padding-inline: var(--gutter); border: 0; }
html .face { overflow: visible; }
html .face .pf { aspect-ratio: 4 / 5; overflow: hidden; }
html .face .pf img { object-position: 50% 0; }
html .face__nom { position: static; padding: .85rem 0 0; background: none; color: var(--fg); font-size: clamp(1rem, .9rem + .4vw, 1.3rem); line-height: 1.2; text-wrap: balance; }
html .face__role { color: var(--fg-70); margin-top: .35rem; font-size: .9375rem; }
html .insecable { white-space: nowrap; }

/* Équipe de l'accueil = page Avocats (15/10) : mêmes fonctions, même typographie, mêmes écarts, noms et fonctions alignés */
html .faces { gap: clamp(.75rem, 1.5vw, 1.5rem); grid-auto-rows: auto; }
html .face { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
html .face__nom { font-family: var(--serif); font-size: clamp(1.15rem, .9rem + .7vw, 1.6rem); line-height: 1.15; letter-spacing: -.01em; }
html .face__role { font-family: var(--sans); font-size: 1rem; line-height: 1.4; margin-top: .45rem; }
@media (max-width: 1000px) { html .faces { row-gap: 2rem; } }