/* SENSALTO · Conception et développement : The French Maquis'Art · https://thefrenchmaquis.art */
:root {
  --creme: #F4EFE6;
  --creme-2: #EAE3D6;
  --encre: #161412;
  --encre-2: #5B554D;
  --vif: #E8472B;
  --vermillon: #C8381B;
  --profond: #B83218;
  --sauge: #C9D3C3;
  --lilas: #CFC6DE;
  --filet: rgba(22, 20, 18, .16);
  --filet-fort: rgba(22, 20, 18, .5);
  --titre: 'Anton', 'Arial Narrow', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --marge: clamp(1.25rem, 5vw, 5.5rem);
  --gout: clamp(1rem, 1.8vw, 1.75rem);
  --esp-section: clamp(4.5rem, 9vw, 8.125rem);
  --esp-bande: clamp(3.5rem, 6.5vw, 6rem);
  --esp-ouverture: clamp(3rem, 6vw, 5rem);
  --esp-contenu: clamp(3rem, 5vw, 4.5rem);
  --esp-texte: clamp(1.75rem, 3vw, 2.5rem);
  --resp: var(--esp-section);
  --entete: 6.25rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html.en-transition, html.en-transition body { overflow-x: clip; }
html.en-transition #contenu { will-change: transform; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 7.5rem; }
body { margin: 0; background: var(--creme); color: var(--encre); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
main { overflow-x: clip; }
main:focus { outline: none; }
.defs { position: absolute; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.evitement { position: absolute; left: 1rem; top: -10rem; z-index: 100; background: var(--encre); color: var(--creme); padding: .75rem 1.25rem; font-weight: 600; text-decoration: none; }
.evitement:focus { top: 1rem; }

.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gout); padding-inline: var(--marge); max-width: 1720px; margin-inline: auto; }

.t-affiche { font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(3.4rem, 9vw, 10.5rem); line-height: .88; letter-spacing: .002em; }
.t-titre { font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(2.75rem, 6.2vw, 6.75rem); line-height: .9; }
.t-affiche > span, .t-titre > span { display: block; }
.t-serif-xxl { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 7.6vw, 8.5rem); line-height: .98; letter-spacing: -.01em; }
.t-serif-xl { font-family: var(--serif); font-weight: 400; font-size: clamp(2.25rem, 4.6vw, 4.75rem); line-height: 1.02; }
.t-serif-l { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 2.8vw, 2.75rem); line-height: 1.1; }
.t-accroche { font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 1.9vw, 1.75rem); line-height: 1.2; }
.t-chapo { font-size: clamp(1.125rem, 1.35vw, 1.3125rem); line-height: 1.5; }
.vif { color: var(--vif); }
.mention { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; line-height: 1.5; }
.mention--num { display: flex; align-items: baseline; gap: .75rem; }
.mention--num b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.6rem; letter-spacing: 0; color: var(--vermillon); line-height: 1; }
.a-completer { color: var(--encre-2); text-decoration: underline dashed; text-underline-offset: .25em; }

.bouton { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.9rem; padding: .7rem 1.35rem; border-radius: 99px; background: var(--encre); color: var(--creme); font-weight: 600; font-size: .9375rem; text-decoration: none; border: 1.5px solid var(--encre); cursor: pointer; transition: background-color .25s, color .25s; white-space: nowrap; }
.bouton svg { width: .62em; height: .78em; fill: var(--vif); transition: transform .3s var(--ease); }
.bouton:hover svg, .bouton:focus-visible svg { transform: translateY(-.28em); }
.bouton:hover { background: #000; }
.bouton--clair { background: transparent; color: var(--encre); }
.bouton--clair svg { fill: var(--vermillon); }
.bouton--clair:hover { background: var(--encre); color: var(--creme); }
.bouton--clair:hover svg { fill: var(--vif); }

.lien { display: inline-flex; align-items: baseline; gap: .45rem; color: var(--vermillon); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; transition: color .2s, text-underline-offset .3s var(--ease); }
.lien svg { display: none; }
.lien:hover, .lien:focus-visible { color: var(--profond); text-underline-offset: .12em; }
.lien:hover svg, .lien:focus-visible svg { transform: translateY(-.25em); }

.entete { position: sticky; top: 0; z-index: 50; background: var(--creme); border-bottom: 1px solid transparent; transition: border-color .3s; }
.entete.is-reduit { border-bottom-color: var(--filet); }
.langues { display: inline-flex; align-items: center; border: 1px solid var(--filet-fort); border-radius: 99px; padding: .2rem; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; }
.langues a { display: inline-grid; place-items: center; min-width: 2.4rem; min-height: 2.4rem; border-radius: 99px; text-decoration: none; color: var(--encre-2); transition: background-color .2s, color .2s; }
.langues a:hover { color: var(--encre); }
.langues a[aria-current] { background: var(--encre); color: var(--creme); }
.entete__principal { position: relative; z-index: 2; display: flex; align-items: center; gap: 2rem; padding: 1rem var(--marge) 1.1rem; background: var(--creme); transition: padding .35s var(--ease); }
.entete.is-reduit .entete__principal { padding-block: .7rem; }

.marque { display: inline-flex; align-items: baseline; gap: 1rem; text-decoration: none; margin-right: auto; }
.marque__nom { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); white-space: nowrap; }
.logo { display: inline-flex; align-items: baseline; line-height: 1; white-space: nowrap; font-size: 2rem; transition: font-size .35s var(--ease); }
.entete.is-reduit .logo { font-size: 1.6rem; }
.logo__sens { font-family: 'Bodoni Moda', Didot, serif; font-weight: 900; font-variation-settings: 'opsz' 96; letter-spacing: -.02em; color: var(--encre); }
.logo__alto { font-family: var(--serif); color: var(--vif); letter-spacing: -.01em; font-size: calc(var(--ratio, 1.042) * 1em); }

.menu__ouvrir { display: none; }
.menu__liste { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); }
.menu__entree > a, .menu__bouton { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; min-height: 2.75rem; padding: 0; background: none; border: 0; cursor: pointer; font-size: .9375rem; font-weight: 500; text-decoration: none; position: relative; }
.menu__entree > a::after, .menu__bouton::after { content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 1.5px; background: var(--vif); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.menu__entree > a:hover::after, .menu__bouton:hover::after, .menu__bouton[aria-expanded="true"]::after, .menu__bouton[data-courant]::after, .menu__entree > a[aria-current]::after { transform: scaleX(1); }
.sous-menu li > a[aria-current] .sous-menu__titre { color: var(--vermillon); }
.menu__bouton::before { content: ""; order: 2; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.15rem) rotate(45deg); transition: transform .3s var(--ease); }
.menu__bouton[aria-expanded="true"]::before { transform: translateY(.1rem) rotate(-135deg); }
.menu__num { display: none; }
.menu__entree--appel, .menu__annexe { display: none; }

.sous-menu { --doux: cubic-bezier(.22, 1, .36, 1); display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--creme); border-bottom: 1px solid var(--filet); padding: 1.5rem var(--marge) 3rem; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gout); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .55s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .55s; }
.sous-menu > * { opacity: 0; transform: translateY(-.75rem); transition: opacity .3s ease, transform .45s var(--doux); }
.menu__bouton[aria-expanded="true"] + .sous-menu { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .75s var(--doux), visibility 0s; }
.menu__bouton[aria-expanded="true"] + .sous-menu > * { opacity: 1; transform: none; transition: opacity .6s ease .15s, transform .8s var(--doux) .15s; }
.menu__bouton[aria-expanded="true"] + .sous-menu > ul { transition-delay: .22s; }
.entete:has(.menu__bouton[aria-expanded="true"]) { border-bottom-color: transparent; }
@keyframes entree-menu { from { opacity: 0; transform: translateY(1.25rem); } }
@keyframes deroule { from { opacity: 0; transform: translateY(-.5rem); } }
.sous-menu__intro { grid-column: 1 / 4; display: grid; gap: 1.25rem; align-content: start; padding-right: 1rem; }
.sous-menu__intro p { font-family: var(--serif); font-style: italic; font-size: 1.6rem; line-height: 1.15; }
.sous-menu__intro .lien { justify-self: start; font-size: .9375rem; }
.sous-menu ul { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gout); }
.sous-menu li > a { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--encre); text-decoration: none; height: 100%; }
.sous-menu__titre { font-weight: 600; font-size: 1rem; }
.sous-menu__accroche { font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.2; color: var(--encre-2); }
.sous-menu li > a:hover .sous-menu__titre, .sous-menu li > a:focus-visible .sous-menu__titre { color: var(--vermillon); }

.ouverture { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.ouverture .grille { align-items: center; row-gap: 0; }
.ouverture__texte { grid-column: 1 / 8; grid-row: 1; display: grid; gap: 1.75rem; align-content: center; position: relative; z-index: 2; }
.ouverture__titre { font-size: min(9vw, 10.25rem); }
.ouverture__chapo { max-width: 31rem; }
.ouverture__actions { margin-top: .5rem; }
.ouverture__collage { grid-column: 8 / 13; grid-row: 1; }
.ouverture__pied { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-top: 1.1rem; border-top: 1px solid var(--filet); color: var(--encre-2); }

.collage { position: relative; aspect-ratio: 4 / 5; }
.collage__arche { position: absolute; inset: 9% 2% 0 16%; background: var(--vif); border-radius: 50% 50% 0 0 / 34% 34% 0 0; transform: rotate(var(--r1, 0deg)); }
.collage__forme { position: absolute; width: 62%; aspect-ratio: 1; right: -4%; top: 4%; border-radius: 50%; background: var(--vif); transform: rotate(var(--r1, 0deg)); }
.collage__portrait { position: absolute; inset: 20% 8% 0 6%; transform: rotate(var(--r1, 0deg)); }
.collage__img { width: auto; height: auto; max-width: none; object-fit: contain; object-position: bottom center; }
.ouverture__collage .collage__arche { inset: 28% 6% 0 20%; border-radius: 50% 50% 0 0 / 30% 30% 0 0; }
.ouverture__collage .collage__img { inset: 13% 0 0 12%; width: 84%; height: 87%; z-index: 2; }
.ouverture__collage .collage__citation { left: -18%; width: 46%; top: 2%; }
.apropos__collage .collage__img.collage__img--mains { inset: auto -4% 8% -2%; width: 106%; height: auto; }
.collage__citation { position: absolute; top: 0; left: -12%; width: 56%; z-index: 3; transform: rotate(var(--r1, 0deg)); }
.collage__note { --r1: -5deg; position: absolute; right: -3%; bottom: 9%; z-index: 3; padding: .8rem 1rem .9rem; background: var(--creme); border: 1px solid var(--encre); font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.2; transform: rotate(var(--r1)); box-shadow: 0 6px 18px rgba(22, 20, 18, .12); }
.collage__note--bas { --r1: 4deg; right: auto; left: -3%; bottom: 6%; }

.photo-attente { display: grid; place-items: end start; padding: 1rem; background: linear-gradient(165deg, #4a4540 0%, #24211e 55%, #121110 100%); color: rgba(244, 239, 230, .78); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; overflow: hidden; }
.photo-attente span { position: relative; z-index: 1; }
.photo-attente--portrait { clip-path: polygon(34% 0, 66% 0, 76% 12%, 78% 30%, 70% 40%, 100% 58%, 100% 100%, 0 100%, 0 58%, 30% 40%, 22% 30%, 24% 12%); place-items: end center; }
.photo-attente--mains { clip-path: polygon(0 18%, 40% 6%, 100% 14%, 100% 100%, 0 100%); }
.photo-attente--architecture { background: repeating-linear-gradient(90deg, rgba(244, 239, 230, .1) 0 2px, transparent 2px 18%), repeating-linear-gradient(0deg, rgba(244, 239, 230, .08) 0 2px, transparent 2px 9%), linear-gradient(170deg, #55504a, #1a1816); clip-path: polygon(14% 6%, 86% 0, 86% 100%, 14% 100%); }
.photo-attente--colonnes { background: repeating-linear-gradient(90deg, #3d3934 0 9%, #6a645c 9% 13%, #2a2724 13% 20%), #2a2724; clip-path: polygon(6% 14%, 50% 0, 94% 14%, 94% 100%, 6% 100%); }
.photo-attente--livre { clip-path: polygon(4% 46%, 50% 54%, 96% 46%, 96% 84%, 50% 92%, 4% 84%); place-items: end center; padding-bottom: 22%; }
.photo-attente--sculpture { clip-path: ellipse(34% 40% at 50% 46%); place-items: center; }

.profils { padding-block: var(--esp-bande); border-top: 1px solid var(--filet); }
.profils .grille { align-items: start; }
.profils__titre { grid-column: 1 / 4; }
.profils__liste { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profils__liste a { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: .45rem; height: 100%; padding: .4rem 1.5rem 1.25rem; border-left: 1px solid var(--filet); text-decoration: none; transition: background-color .3s; }
.profils__liste a:hover, .profils__liste a:focus-visible { background: var(--creme-2); }
.profils__num { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--vermillon); line-height: 1; }
.profils__nom { font-weight: 600; font-size: 1.1875rem; line-height: 1.25; }
.profils__note { font-family: var(--serif); font-style: italic; font-size: 1.1rem; line-height: 1.25; color: var(--encre-2); }
.fleche { align-self: end; width: .7rem; height: .9rem; fill: var(--vif); margin-top: .75rem; transition: transform .35s var(--ease); }
.profils__liste a:hover .fleche, .profils__liste a:focus-visible .fleche { transform: translateY(-.4rem); }

.expertises { padding-block: var(--esp-bande) var(--resp); }
.expertises .grille { align-items: end; }
.expertises__mention, .univers__mention, .ia__mention, .nuances__mention, .journal__mention, .contact__mention { grid-column: 1 / -1; margin-bottom: 1.75rem; }
.expertises__titre { grid-column: 1 / 8; grid-row: 2; }
.expertises__chapo { grid-column: 8 / 13; grid-row: 2; padding-bottom: .6rem; color: var(--encre-2); }
.expertises__liste { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--esp-contenu); border-top: 1.5px solid var(--encre); }
.carte-expertise { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: .9rem; padding: 2rem 1.75rem 0 0; }
.carte-expertise + .carte-expertise { padding-left: 1.75rem; border-left: 1px solid var(--filet); }
.carte-expertise__num { font-size: .75rem; letter-spacing: .16em; font-weight: 700; color: var(--vermillon); }
.carte-expertise__titre { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 2.2vw, 2.25rem); line-height: 1.02; }
.carte-expertise__accroche { font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.2; color: var(--vermillon); }
.carte-expertise p:not(.carte-expertise__accroche) { color: var(--encre-2); font-size: 1rem; }
.carte-expertise .lien { justify-self: start; font-size: .9375rem; margin-top: .5rem; }

.univers { padding-block: 0 var(--resp); }
.univers .grille { align-items: end; }
.univers__titre { grid-column: 1 / 8; align-self: start; }
.univers__intro { grid-column: 8 / 13; display: grid; gap: .1rem; }
.univers__intro span { display: block; }
.univers__intro span:nth-child(2) { padding-left: 1.5em; }
.univers__intro span:nth-child(3) { padding-left: 3em; }
.univers__intro span:nth-child(4) { padding-left: 4.5em; color: var(--vif); }
.univers__liste { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gout); margin-top: var(--esp-contenu); align-items: start; }
.carte-univers:nth-child(even) { margin-top: clamp(5rem, 11vw, 11rem); }
.carte-univers a { display: grid; gap: .55rem; text-decoration: none; }
.carte-univers__visuel { display: block; aspect-ratio: 3 / 4; padding: 14% 12% 0; overflow: hidden; margin-bottom: .9rem; }
.carte-univers__visuel img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; transition: transform .7s var(--ease); }
.carte-univers__visuel .carte-univers__img--large { object-position: center 70%; }
.carte-univers a:hover .carte-univers__visuel img, .carte-univers a:focus-visible .carte-univers__visuel img { transform: translateY(-4%) scale(1.03); }
.carte-univers--sauge .carte-univers__visuel { background: var(--sauge); }
.carte-univers--papier .carte-univers__visuel { background: var(--creme-2); }
.carte-univers--lilas .carte-univers__visuel { background: var(--lilas); }
.carte-univers--vermillon .carte-univers__visuel { background: var(--vif); }
.carte-univers__num { font-family: var(--serif); font-style: italic; color: var(--vermillon); font-size: 1.25rem; line-height: 1; }
.carte-univers__titre { font-family: var(--titre); text-transform: uppercase; font-size: clamp(2rem, 2.8vw, 2.75rem); line-height: .95; }
.carte-univers__accroche { font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.2; color: var(--encre-2); }
.carte-univers a:hover .carte-univers__titre, .carte-univers a:focus-visible .carte-univers__titre { color: var(--vermillon); }

.ia { background: var(--vif); color: var(--encre); padding-block: var(--resp); }
.ia .mention--num b { color: var(--encre); }
.ia__titre { grid-column: 1 / 12; font-size: clamp(2.75rem, 6.8vw, 7.5rem); }
.ia__texte { grid-column: 1 / 7; margin-top: var(--esp-contenu); display: grid; gap: 1.1rem; font-size: 1.125rem; max-width: 38rem; }
.ia__citation { grid-column: 8 / 13; margin-top: clamp(5.5rem, 9.5vw, 9rem); font-style: italic; align-self: start; }
html.anim .ia__citation[data-apparait] { transform: translateY(4rem); transition-delay: .45s; transition-duration: 1s, 1.3s; }
html.anim .ia__citation[data-apparait].is-visible { transform: none; }
.diagnostic { grid-column: 1 / -1; margin-top: var(--esp-contenu); background: var(--creme); padding: clamp(1.75rem, 4vw, 3.5rem); display: grid; gap: 2rem; }
.diagnostic__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; }
.diagnostic__tete p { max-width: 24rem; color: var(--encre-2); }
.diagnostic__titre em { color: var(--vif); }
.diagnostic__onglets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--filet); }
.diagnostic__onglets button { display: grid; align-content: start; gap: .2rem; text-align: left; padding: 1rem 1rem 1.1rem 0; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; font-size: 1.0625rem; font-weight: 500; color: var(--encre-2); transition: color .2s, border-color .2s; }
.diagnostic__onglets button span { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.diagnostic__onglets button:hover { color: var(--encre); }
.diagnostic__onglets button[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--vif); }
.diagnostic__onglets button[aria-selected="true"] span { color: var(--vermillon); }
.diagnostic__panneau { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); animation: deroule .4s var(--ease); }
.diagnostic__panneau > div { display: grid; gap: .6rem; align-content: start; padding-top: 1rem; border-top: 1px solid var(--encre); }
.diagnostic__panneau h4 { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.diagnostic__panneau > div:last-child p { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.25; }
.diagnostic__pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--filet); font-size: .9375rem; color: var(--encre-2); }

.nuances { padding-block: var(--resp); }
.nuances__escalier { grid-column: 1 / -1; }
.nuances__escalier > span { display: block; }
.nuances__escalier > span:nth-child(2) { padding-left: 16%; }
.nuances__escalier > span:nth-child(3) { padding-left: 32%; }
.nuances__texte { grid-column: 7 / 12; margin-top: var(--esp-texte); font-size: 1.125rem; }
.demo { grid-column: 1 / -1; margin-top: var(--esp-contenu); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.demo__source { background: var(--lilas); padding: clamp(1.75rem, 4vw, 3.5rem); display: grid; gap: 1.5rem; align-content: start; }
.demo__phrase { font-family: var(--serif); font-style: italic; font-size: clamp(2.5rem, 5vw, 5rem); line-height: 1; }
.demo__choix { display: grid; gap: .6rem; }
.demo__choix legend { font-weight: 600; margin-bottom: .75rem; }
.demo__choix label { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--filet-fort); border-radius: 99px; cursor: pointer; transition: background-color .2s, border-color .2s; }
.demo__choix label:hover { border-color: var(--encre); }
.demo__choix label:has(input:checked) { background: var(--encre); border-color: var(--encre); color: var(--creme); }
.demo__choix input { accent-color: var(--vif); width: 1.05rem; height: 1.05rem; margin: 0; }
.demo__resultat { padding: clamp(1.75rem, 4vw, 3.5rem); border: 1px solid var(--filet); border-left: 0; display: grid; gap: 1.25rem; align-content: center; }
.demo__traduction { font-family: var(--serif); font-size: clamp(2.25rem, 4.4vw, 4.25rem); line-height: 1.02; color: var(--vif); }
.demo__traduction.is-change { animation: change .45s var(--ease); }
@keyframes change { from { opacity: 0; transform: translateY(.4em); } }
.demo__note { color: var(--encre-2); max-width: 30rem; }
.nuances__citation { grid-column: 3 / 11; margin-top: var(--esp-contenu); text-align: center; font-size: clamp(1.6rem, 2.6vw, 2.4rem); }

.apropos { padding-block: var(--resp); background: var(--creme-2); }
.apropos .grille { align-items: center; }
.apropos__collage { grid-column: 1 / 6; }
.apropos__collage .collage__portrait { inset: 16% 10% 0 4%; }
.apropos__texte { grid-column: 7 / 13; display: grid; gap: 1.75rem; }
.apropos__texte .t-titre { font-size: clamp(2.5rem, 5.2vw, 5.75rem); }
.apropos__accroche { margin-top: -.5rem; }
.apropos__corps { display: grid; gap: 1rem; max-width: 36rem; }
.apropos__langues { display: grid; gap: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--filet-fort); }
.apropos__langues dd { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.2; }
.apropos__langues dd span:nth-child(odd) { font-style: italic; }

.journal { padding-block: var(--resp); }
.journal .grille { row-gap: 0; }
.journal__titre { grid-column: 1 / 10; }
.journal__intro { grid-column: 8 / 13; margin-top: var(--esp-texte); color: var(--encre-2); }
.article-carte { border-top: 1px solid var(--encre); }
.article-carte a { display: grid; gap: .6rem; padding: 1.25rem 0 2.25rem; text-decoration: none; }
.article-carte--une { grid-column: 1 / 7; margin-top: var(--esp-contenu); border-top: 0; }
.journal__suite { grid-column: 8 / 13; margin-top: var(--esp-contenu); display: grid; align-content: start; }
.article-carte__visuel { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 1rem; overflow: hidden; }
.article-carte__visuel--sauge { background: var(--sauge); }
.article-carte__mot { font-family: var(--serif); font-style: italic; font-size: clamp(3rem, 7vw, 7rem); line-height: 1; transition: transform .7s var(--ease); }
.article-carte a:hover .article-carte__mot { transform: translateY(-.15em); }
.article-carte__rubrique { color: var(--vermillon); }
.article-carte__titre { font-family: var(--serif); font-size: clamp(1.75rem, 2.4vw, 2.4rem); line-height: 1.05; }
.article-carte--une .article-carte__titre { font-size: clamp(2.25rem, 3.4vw, 3.4rem); }
.article-carte__chapo { color: var(--encre-2); }
.article-carte__etat { font-size: .8125rem; font-style: italic; color: var(--encre-2); }
.article-carte a:hover .article-carte__titre, .article-carte a:focus-visible .article-carte__titre { color: var(--vermillon); }
.journal__appel { margin-top: .5rem; }

.contact { padding-block: var(--resp); border-top: 1px solid var(--filet); }
.contact .grille { align-items: end; }
.contact__titre { grid-column: 1 / -1; }
.contact__chapo { grid-column: 1 / 7; margin-top: var(--esp-texte); }
.depart { grid-column: 1 / 8; margin-top: var(--esp-contenu); display: grid; gap: 1.75rem; justify-items: start; }
.depart fieldset { display: grid; gap: .75rem; }
.depart legend { margin-bottom: 1.1rem; }
.pastilles { display: flex; flex-wrap: wrap; gap: .5rem; }
.pastilles label { position: relative; }
.pastilles input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pastilles span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .55rem 1.1rem; border: 1px solid var(--filet-fort); border-radius: 99px; font-size: .9375rem; font-weight: 500; transition: background-color .2s, color .2s, border-color .2s; }
.pastilles label:hover span { border-color: var(--encre); }
.pastilles input:checked + span { background: var(--encre); color: var(--creme); border-color: var(--encre); }
.pastilles input:focus-visible + span { outline: 3px solid var(--encre); outline-offset: 3px; }
.contact__coordonnees { grid-column: 9 / 13; display: grid; gap: .6rem; padding-top: 1.25rem; border-top: 1px solid var(--encre); }
.contact__coordonnees .lien { font-size: 1.25rem; }

.pied { border-top: 1px solid var(--filet); padding-block: clamp(4rem, 8vw, 7rem) 2rem; overflow: hidden; }
.pied .grille { align-items: end; }
.pied__phrase { grid-column: 1 / 10; }
.phrase-langues { display: inline-grid; }
.phrase-langues > span { grid-area: 1 / 1; opacity: 0; transform: translateY(.3em); transition: opacity .5s, transform .6s var(--ease); }
.phrase-langues > span.is-actif { opacity: 1; transform: none; }
.phrase-langues em { color: var(--vif); }
.pied__pause { grid-column: 10 / 13; justify-self: end; background: none; border: 1px solid var(--filet-fort); border-radius: 99px; padding: .5rem 1rem; min-height: 2.75rem; font-size: .8125rem; font-weight: 500; cursor: pointer; }
.pied__pause:hover { border-color: var(--encre); }
.pied__logo { grid-column: 1 / -1; margin-top: clamp(2.5rem, 5vw, 4rem); line-height: .8; container-type: inline-size; }
.pied__logo .logo { font-size: 22.3cqi; transition: none; }
.pied__nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--encre); }
.pied__nav ul { display: grid; gap: .5rem; align-content: start; }
.pied__nav a { text-decoration: none; }
.pied__nav a:hover, .pied__nav a:focus-visible { color: var(--vermillon); text-decoration: underline; text-underline-offset: .25em; }
.pied__bas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--filet); font-size: .8125rem; color: var(--encre-2); }

.suggestion-langue { position: fixed; right: var(--marge); bottom: 1.5rem; z-index: 40; max-width: 23rem; display: grid; gap: 1rem; padding: 1.25rem 1.4rem 1.4rem; background: var(--creme); border: 1px solid var(--encre); box-shadow: 0 12px 32px rgba(22, 20, 18, .16); animation: suggestion .6s var(--ease); }
.suggestion-langue p { font-family: var(--serif); font-style: italic; font-size: 1.4rem; line-height: 1.15; }
.suggestion-langue__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.suggestion-langue__rester { min-height: 2.75rem; padding: 0; background: none; border: 0; font-size: .875rem; font-weight: 500; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.suggestion-langue__rester:hover { color: var(--vermillon); }
@keyframes suggestion { from { opacity: 0; transform: translateY(1.5rem); } }

html.anim [data-apparait] { opacity: 0; transform: translateY(1.5rem); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--delai, 0s); }
html.anim [data-apparait].is-visible { opacity: 1; transform: none; }
html.anim [data-pose] { opacity: 0; transform: translateY(3rem) rotate(var(--r0, 0deg)); transition: opacity .7s var(--ease), transform 1.1s var(--ease); transition-delay: var(--delai, 0s); }
html.anim [data-pose].is-pose { opacity: 1; transform: rotate(var(--r1, 0deg)); }

@media (max-width: 1400px) {
  .marque__nom { display: none; }
}

@media (max-width: 1180px) {
  .menu__liste { gap: 1.1rem; }
  .profils__titre { grid-column: 1 / -1; margin-bottom: 1.5rem; }
  .profils__liste { grid-column: 1 / -1; }
  .expertises__liste, .univers__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .carte-expertise:nth-child(3) { padding-left: 0; border-left: 0; }
  .carte-univers:nth-child(even) { margin-top: 6rem; }
  .univers__titre, .univers__intro { grid-column: 1 / -1; }
  .univers__intro { margin-top: 2rem; }
  .ia__texte { grid-column: 1 / 8; }
  .ia__citation { grid-column: 8 / 13; }
}

@media (max-width: 1100px) {
  :root { --entete: 4.25rem; }
  .entete__principal { gap: .75rem; padding-block: .75rem; }
  .logo { font-size: 1.6rem; }
  .entete.is-reduit .logo { font-size: 1.5rem; }
  .menu { order: 3; }
  .menu__ouvrir { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1rem; background: none; border: 1.5px solid var(--encre); border-radius: 99px; font-weight: 600; font-size: .9375rem; cursor: pointer; }
  .menu__ouvrir::after { content: ""; width: 1rem; height: .5rem; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform .3s var(--ease); }
  .menu__ouvrir[aria-expanded="true"]::after { content: "×"; width: auto; height: auto; border: 0; font-size: 1.4rem; line-height: .8; font-weight: 400; }
  .marque, .menu__ouvrir, .entete__appel, .langues { position: relative; z-index: 2; }
  .menu__panneau { display: none; position: fixed; inset: 0; z-index: 1; padding: calc(var(--entete) + 2rem) var(--marge) 3rem; background: var(--creme); overflow-y: auto; }
  .menu__ouvrir[aria-expanded="true"] + .menu__panneau { display: flex; flex-direction: column; animation: deroule .35s var(--ease); }
  .menu__panneau > * { flex-shrink: 0; }
  .menu__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__entree { border-bottom: 1px solid var(--filet); }
  .menu { --col-num: 2.75rem; }
  .menu__entree > a, .menu__bouton { width: 100%; justify-content: flex-start; gap: 0; min-height: 0; padding: 1rem 0 .85rem; font-family: var(--titre); text-transform: uppercase; font-size: clamp(2.25rem, 9vw, 3.5rem); line-height: 1; font-weight: 400; }
  .menu__entree > a::after, .menu__bouton::after { display: none; }
  .menu__libelle { display: inline-block; transition: transform .45s var(--ease), color .3s; }
  .menu__entree > a:hover .menu__libelle, .menu__entree > a:focus-visible .menu__libelle, .menu__bouton:hover .menu__libelle, .menu__bouton:focus-visible .menu__libelle, .menu__bouton[aria-expanded="true"] .menu__libelle { transform: translateX(.18em); color: var(--vif); }
  .menu__entree--appel > a:hover .menu__libelle, .menu__entree--appel > a:focus-visible .menu__libelle { color: var(--encre); }
  .menu__bouton::before { margin-left: auto; width: .7rem; height: .7rem; }
  .menu__num { display: inline-block; flex: none; width: var(--col-num); text-align: left; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--vermillon); text-transform: none; align-self: flex-start; margin-top: .3rem; }
  .menu__entree--bureau { display: none; }
  .menu__annexe { flex: 1 0 auto; display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; padding-left: var(--col-num); }
  .menu__coordonnees { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--encre); }
  .menu__secondaire { display: grid; }
  .menu__secondaire li { border-bottom: 1px solid var(--filet); }
  .menu__secondaire a { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .7rem 0 .6rem; font-family: var(--titre); text-transform: uppercase; font-size: clamp(1.35rem, 5vw, 1.75rem); line-height: 1; text-decoration: none; }
  .menu__secondaire svg { width: .42em; height: .55em; fill: var(--vif); transition: transform .45s var(--ease); }
  .menu__secondaire a:hover svg, .menu__secondaire a:focus-visible svg, .menu__secondaire a:active svg { transform: rotate(90deg); }
  .menu__secondaire a:hover, .menu__secondaire a:focus-visible { color: var(--vermillon); }
  .menu__coordonnees { display: grid; gap: .3rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--encre-2); }
  .menu__coordonnees a { color: var(--encre); text-decoration: none; display: inline-block; padding-block: .3rem; }
  .menu__coordonnees a[href^="mailto"] { text-transform: none; letter-spacing: .02em; font-size: .9375rem; }
  .menu__signature { color: var(--encre); }
  .menu__copyright { margin-top: .75rem; }
  .menu__ouvrir[aria-expanded="true"] + .menu__panneau .menu__liste > li:not([hidden]), .menu__ouvrir[aria-expanded="true"] + .menu__panneau .menu__annexe { animation: entree-menu .55s var(--ease) both; animation-delay: calc(.08s + var(--i, 0) * .06s); }
  .sous-menu__pro { display: none; }
  .sous-menu { position: static; border: 0; display: none; visibility: visible; clip-path: none; transition: none; }
  .sous-menu > *, .menu__bouton[aria-expanded="true"] + .sous-menu > * { opacity: 1; transform: none; transition: none; }
  .menu__bouton[aria-expanded="true"] + .sous-menu { display: block; transition: none; }
  .sous-menu { padding: 0 0 1.5rem var(--col-num); }
  .sous-menu__intro { display: block; margin: .5rem 0 .75rem; padding: 0; }
  .sous-menu__intro p { display: none; }
  .sous-menu ul { display: grid; grid-template-columns: 1fr; gap: .25rem; }
  .sous-menu li > a { border-top: 0; padding: .5rem 0; gap: .1rem; }
  body.menu-ouvert { overflow: hidden; }
  .entete__appel { padding: .55rem 1rem; min-height: 2.75rem; }
}

@media (max-width: 520px) {
  .menu__entree--appel { display: block; }
  .suggestion-langue { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
  .entete__appel { display: none; }
  .menu__entree--appel > a { color: var(--vif); }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }
  body .grille > * { grid-column: 1 / -1; }
  .ouverture__texte, .ouverture__collage { grid-row: auto; }
  .ouverture__titre { font-size: clamp(3.2rem, 15.5vw, 5.5rem); }
  .ouverture__collage { width: 88%; justify-self: end; margin-top: 3.5rem; }
  .collage__citation, .ouverture__collage .collage__citation { left: -4%; width: 62%; top: -5%; }
  .ouverture__pied { flex-direction: column; }
  .profils__liste { grid-template-columns: 1fr; }
  .profils__liste a { border-left: 0; border-top: 1px solid var(--filet); padding: 1rem 0 1.1rem; grid-template-columns: 1.75rem 1fr auto; column-gap: .75rem; }
  .profils__num { grid-row: span 2; }
  .profils__nom, .profils__note { grid-column: 2; }
  .profils__liste .fleche { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0; }
  .expertises__titre, .expertises__chapo { grid-row: auto; }
  .expertises__chapo { margin-top: 1.75rem; padding-bottom: 0; }
  .expertises__liste, .univers__liste { grid-template-columns: 1fr; }
  .carte-expertise, .carte-expertise + .carte-expertise { padding: 1.75rem 0 2rem; border-left: 0; border-bottom: 1px solid var(--filet); }
  .carte-univers:nth-child(even) { margin-top: 0; }
  .carte-univers:nth-child(odd) { width: 86%; }
  .carte-univers:nth-child(even) { width: 86%; justify-self: end; }
  .univers__intro span:nth-child(n) { padding-left: 0; }
  .diagnostic__onglets { grid-template-columns: 1fr 1fr; }
  .diagnostic__panneau { grid-template-columns: 1fr; gap: 1.5rem; }
  .nuances__escalier > span:nth-child(2) { padding-left: 8%; }
  .nuances__escalier > span:nth-child(3) { padding-left: 16%; }
  .nuances__texte { margin-top: 2rem; }
  .demo { grid-template-columns: 1fr; }
  .demo__resultat { border-left: 1px solid var(--filet); border-top: 0; }
  .apropos__collage { width: 86%; margin-bottom: 3.5rem; }
  .journal__suite { margin-top: 1rem; }
  .contact__coordonnees { margin-top: 3rem; }
  .pied__pause { justify-self: start; margin-top: 1.25rem; }
  .pied__nav { grid-template-columns: 1fr 1fr; row-gap: 1.75rem; }
  .pied__nav ul:last-child { grid-column: 1 / -1; }
  .marque { gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html.anim [data-apparait], html.anim [data-pose] { opacity: 1; transform: rotate(var(--r1, 0deg)); transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .entete, .menu, .pied__pause, .depart, .evitement { display: none; }
  .ia { background: none; }
  body { background: #fff; }
}
