/* Shared presentation registry: one column below 744 CSS px, equal columns above.
   The centered frame is capped at 1280 px to limit image enlargement on wide screens.
   Photographs retain their complete native framing; typography is shared across sections. */
:root {
  --site-entry-ms:600;
  --language-exit-ms:140;
  --language-entry-ms:460;
  --language-distance:clamp(20px,3vw,48px);
  --language-exit-rise:10px;
  --language-direction:1;
  --language-flag-ms:300;
  --flag-gap:12px;
  --flag-swap-direction:1;
  --motion-viewport-height:100vh;
  --motion-feather-ratio:.24;
  --motion-feather:calc(var(--motion-viewport-height)*var(--motion-feather-ratio));
  --motion-body-start:0px;
  --motion-header-ms:160;

  --shared-heading-size:clamp(24px,calc(24px + (100vw - 320px)/120),32px);
  --viewport-min:320px; --viewport-max:1280px;
  --viewport:clamp(var(--viewport-min),100vw,var(--viewport-max));
  --mobile-growth:clamp(0px,calc((var(--viewport) - 320px)/280),1px);
  --tablet-growth:clamp(0px,calc((var(--viewport) - 744px)/396),1px);
  --desktop-growth:clamp(0px,calc((var(--viewport) - 1140px)/780),1px);
  --reading-measure:68ch;
  --paper:#fdfdfb; --header:#f5f6f1; --ink:#2c352e; --muted:#64715f;
  --line:#c5cdbd; --green:#4f674e; --number-1:#a9c1b1; --number-2:#cfbda5; --number-3:#bccba7;
  --font:Arial,"Helvetica Neue",sans-serif; --arabic-font:Tahoma,Arial,sans-serif;
  --wrap:min(var(--viewport),600px); --inset:calc(20px + var(--mobile-growth)*4);
  --column:calc(var(--wrap) - var(--inset)*2); --gap:24px;
  --body-size:calc(16px + var(--mobile-growth)*2); --body-leading:1.55; --number-size:calc(160px + var(--mobile-growth)*30);
  --header-inset:14px; --header-space:48px; --section-space:52px;
  --brand-width:calc(244px + var(--mobile-growth)*32); --flag-size:32px; --flag-target:48px;
  --caption-size:13px; --quote-min:10.5px; --small-size:12px;
  --promise-size:14px; --promise-leading:21px; --promise-min:12px;
  --pricing-gap:20px; --pricing-copy-size:var(--body-size); --pricing-copy-leading:var(--body-leading);
  --pricing-paragraph-gap:14px; --pricing-row-inset:12px; --pricing-row-leading:var(--body-leading);
  --pricing-label-size:14px; --pricing-amount-size:22px; --pricing-description-leading:1.5;
  --title-size:18px; --title-tracking:2px; --person-size:var(--shared-heading-size); --section-title-size:var(--shared-heading-size); --section-heading-leading:1.2;
  --plan-inset:22px; --plan-title:20px; --plan-copy:14px; --project-gap:16px; --connector-gap:8px;
  --connector-height:26px; --connector-width:84px; --project-heading-height:46px;
  --portrait-gap:26px; --sandrine-grayscale:.94;
  --footer-inset:30px; --footer-space:52px; --footer-tail:clamp(160px,24svh,240px); --footer-wrap:var(--wrap); --footer-side:var(--inset);
  --portrait-max:416px;
  --degree-size:13px; --degree-min:9px; --fit-min:14px;
  --number-gap:14px; --hero-gap:12px; --hero-copy-size:var(--body-size); --balance-min:12; --balance-leading:1.5; --balance-leading-min:1.35; --balance-leading-max:4; --balance-leading-preferred:2.3; --balance-tracking-max:.06; --balance-font-ceiling:1.15; --balance-breakpoint:744;  --plan-copy-min:12;
  --icon-size:20px; --hairline:1px; --radius:16px;
}
*{box-sizing:border-box}
html{scroll-padding-top:24px}
body{margin:0;font:400 var(--body-size)/var(--body-leading) var(--font);color:var(--ink);background:var(--paper)}
html[lang="ar"]{--section-heading-leading:1.3}
html[lang="ar"] body{font-family:var(--arabic-font)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
figure,p,h1,h2,h3,dl,dd,ul,ol{margin:0}
h1,h2,h3{font-weight:400}
ul,ol{padding:0;list-style:none}
a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:5px}
.single{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-fit]{font-size:var(--fit-size,var(--fit-max))}
.wrap{width:min(100%,var(--wrap));padding-inline:var(--inset);margin-inline:auto}
.skip-link{position:absolute;inset-block-start:-100px;inset-inline-start:20px;padding:10px 20px;background:var(--paper);border:var(--hairline) solid var(--green);z-index:3}
.skip-link:focus{inset-block-start:10px}
header{background:var(--header);border-bottom:var(--hairline) solid var(--line);padding-block:var(--header-inset);margin-block-end:var(--header-space)}
.bar{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;column-gap:12px;row-gap:12px}
.logo{width:var(--brand-width);max-width:100%;min-width:0;justify-self:center}
.lang{display:flex;flex-direction:row;align-items:center;justify-self:center;gap:var(--flag-gap);flex-shrink:0}
.lang a{display:flex;align-items:center;justify-content:center;width:var(--flag-target);height:var(--flag-target);color:var(--muted);border-bottom:var(--hairline) solid transparent}
.lang a[aria-current]{color:var(--green);border-color:var(--green)}
.duo{display:flex;flex-direction:column;gap:var(--hero-gap);margin-block-end:var(--section-space)}
.rev .man{order:-1}
.man{min-width:0;text-align:center}
.num{font:300 var(--number-size)/.8 "Helvetica Neue",Arial,sans-serif;color:var(--number-1);margin-block-end:var(--number-gap)}
#s2 .num{color:var(--number-2)}
#s3 .num{color:var(--number-3)}
.txt{width:100%;max-width:var(--reading-measure);margin-inline:auto}
.txt,.support-copy{text-align:justify;text-align-last:start;hyphens:none}
.txt p+p{margin-block-start:14px}
.architecture{width:100%}
.image-window{overflow:hidden;border-radius:var(--radius)}
.photo{width:100%;height:auto;object-fit:contain;border-radius:var(--radius)}
.photo{aspect-ratio:var(--source-ratio)}
.cap{font-size:var(--caption-size);color:var(--muted);text-align:center;padding-block-start:9px;line-height:1.5}
.quote-text{--fit-max:var(--caption-size);--fit-min:var(--quote-min);display:block;line-height:1.4;width:100%;max-width:42ch;margin-inline:auto}
.quote-attribution{white-space:nowrap}
.quote-attribution cite{font-style:normal}
.prices{width:100%;text-align:start}
.support-copy{margin-block:0 var(--pricing-gap);margin-inline:auto;max-width:var(--reading-measure);font-size:var(--shared-copy-size,var(--hero-copy-size));line-height:var(--pricing-copy-leading)}
.support-copy p+p{margin-block-start:var(--pricing-paragraph-gap)}
.support-hours{display:inline-block;white-space:nowrap}
.price-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding-block:var(--pricing-row-inset);line-height:var(--pricing-row-leading);border-bottom:var(--hairline) solid var(--line)}
.price-row:first-child{border-top:var(--hairline) solid var(--line)}
.price-row dt{min-width:0;font-size:var(--pricing-label-size)}
.price-description{display:block;font-size:var(--small-size);color:var(--muted);line-height:var(--pricing-description-leading);margin-block-start:3px}
.price-row dd{font-size:var(--pricing-amount-size);color:var(--green);white-space:nowrap;align-self:center;font-weight:300}
.icon{width:var(--icon-size);height:var(--icon-size);fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:middle}
.portfolio{padding-block-start:16px}
.section-heading{font-size:var(--section-title-size);text-align:center;color:var(--green);line-height:var(--section-heading-leading);margin-block-end:38px}
.item{margin-block-end:var(--section-space)}
.project-layout{display:grid;grid-template-areas:"image" "title" "plan";grid-template-columns:minmax(0,1fr);gap:var(--project-gap)}
.ttl{grid-area:title;font-size:var(--title-size);line-height:1.2;text-transform:uppercase;letter-spacing:var(--title-tracking);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--connector-gap);white-space:nowrap}
/* Center the capital letters themselves, compensating the trailing tracking. */
.ttl bdi{font-family:var(--font);text-box-trim:trim-both;text-box-edge:cap alphabetic;padding-inline-start:var(--title-tracking)}
.ttl::before,.ttl::after{content:"";flex:0 0 auto;width:var(--hairline);height:var(--connector-height);background:var(--line)}
.project-image{grid-area:image;display:block;width:100%}
.project-plan{grid-area:plan;display:flex;flex-direction:column;width:100%;min-width:0;min-height:230px;padding:var(--plan-inset);border:var(--hairline) solid var(--line);border-radius:var(--radius);position:relative;background:linear-gradient(to right,transparent calc(100% - 1px),#e5e9df 1px),linear-gradient(to bottom,transparent calc(100% - 1px),#e5e9df 1px);background-size:32px 32px}
.plan-top,.plan-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-size:var(--small-size);white-space:nowrap}
.plan-top{margin-block-end:13px}
.plan-top .icon{width:24px;height:24px}
.project-subtitle{--fit-max:var(--plan-title);margin-block:0 12px;line-height:1.3;color:var(--green)}
.project-description{font-size:var(--plan-copy);line-height:1.5;width:100%;max-width:var(--reading-measure);margin-inline:auto;text-align:justify;text-align-last:start;text-justify:inter-word;hyphens:none}
.plan-bottom{margin-block-start:auto;padding-block-start:18px;gap:12px}
footer{background:var(--header);border-top:var(--hairline) solid var(--line);padding-block:var(--footer-inset) calc(var(--footer-tail) + env(safe-area-inset-bottom,0px))}
footer>.wrap{width:min(100%,var(--footer-wrap));padding-inline:var(--footer-side)}
.cards{display:flex;flex-direction:column;gap:var(--footer-space)}
.card{min-width:0;width:min(100%,var(--portrait-max));margin-inline:auto}
.card figure{margin-block-end:var(--portrait-gap)}
.card .photo{height:auto;object-fit:contain;aspect-ratio:var(--source-ratio)}
#sandrine .photo{filter:grayscale(var(--sandrine-grayscale))}
.card .cap{height:30px;font-size:var(--small-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person-name{font-size:var(--person-size);margin-block:0 16px;text-align:center}
.person-actions{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-block-end:18px}
.contact-line{display:inline-flex;align-items:center;gap:10px;max-width:100%}
.phone{font-size:22px;color:var(--green);white-space:nowrap}
.email{font-size:14px}
.credentials{border-top:var(--hairline) solid var(--line);margin-block-end:20px}
.credentials li{border-bottom:var(--hairline) solid var(--line);font-size:var(--degree-size)}
.credentials summary{display:flex;align-items:center;gap:10px;cursor:pointer;padding-block:8px;list-style:none}
.credentials summary::-webkit-details-marker{display:none}
.credentials summary .single{--fit-max:var(--degree-size);--fit-min:var(--degree-min);flex:1;min-width:0}
.credentials details p{text-align:justify;text-align-last:start;hyphens:none;line-height:1.6;padding-block-end:10px;color:var(--green)}
@media(min-width:744px){
  :root{

    --wrap:var(--viewport);
    --inset:calc(20px + var(--tablet-growth)*60 + var(--desktop-growth)*16);
    --hero-gap:calc(24px + var(--tablet-growth)*8 + var(--desktop-growth)*8);
    --gap:var(--hero-gap); --column:calc((var(--wrap) - var(--inset)*2 - var(--gap))/2);
    --body-size:calc(14px + var(--tablet-growth)*4 + var(--desktop-growth)*3);
    --number-size:calc(100px + var(--tablet-growth)*140 + var(--desktop-growth)*120);
    --reading-measure:68ch; --text-column:1fr; --photo-column:1fr;
    --hero-copy-size:calc(13.5px + var(--tablet-growth)*3.5 + var(--desktop-growth)*14);
    --header-inset:calc(16px + var(--tablet-growth)*2 + var(--desktop-growth)*2);
    --header-space:calc(56px + var(--tablet-growth)*12 + var(--desktop-growth)*8);
    --section-space:calc(60px + var(--tablet-growth)*20 + var(--desktop-growth)*16);
    --brand-width:calc(276px + var(--tablet-growth)*28 + var(--desktop-growth)*32);
    --promise-size:calc(14px + var(--tablet-growth)*3 + var(--desktop-growth)*1);
    --promise-leading:1.5;
    --title-size:calc(18px + var(--tablet-growth)*4 + var(--desktop-growth)*2);
    --caption-size:calc(13px + var(--tablet-growth) + var(--desktop-growth)*2);
    --small-size:calc(12px + var(--tablet-growth) + var(--desktop-growth));
    --degree-size:calc(13px + var(--tablet-growth) + var(--desktop-growth)*2);
    --plan-inset:calc(12px + var(--tablet-growth)*20 + var(--desktop-growth)*8);
    --plan-title:calc(20px + var(--tablet-growth)*8 + var(--desktop-growth)*4);
    --plan-copy:calc(14px + var(--tablet-growth)*2 + var(--desktop-growth)*3);
    --portrait-max:calc(416px + var(--tablet-growth)*64 + var(--desktop-growth)*80);
    --footer-inset:calc(36px + var(--tablet-growth)*4 + var(--desktop-growth)*8);
    --footer-tail:56px; --connector-height:28px; --connector-gap:20px;
    --flag-size:calc(32px + var(--tablet-growth)*4 + var(--desktop-growth)*2);
    --flag-target:calc(48px + var(--tablet-growth)*4 + var(--desktop-growth)*2);
    --pricing-copy-size:calc(13px + var(--tablet-growth)*4 + var(--desktop-growth)*4);
    --pricing-copy-leading:1.4; --pricing-paragraph-gap:calc(7px + var(--tablet-growth)*7);
    --pricing-gap:calc(6px + var(--tablet-growth)*12 + var(--desktop-growth)*2);
    --pricing-row-inset:calc(4px + var(--tablet-growth)*6 + var(--desktop-growth)*4);
    --pricing-row-leading:1.4; --pricing-description-leading:1.4;
    --pricing-label-size:calc(13px + var(--tablet-growth)*3 + var(--desktop-growth)*2);
    --pricing-amount-size:calc(20px + var(--tablet-growth)*8 + var(--desktop-growth)*4);
  }
  .bar{grid-template-columns:minmax(0,1fr) auto}
  .logo{justify-self:start}
  .lang{justify-self:end}
  /* Each full photograph sets the row height; its copy is fitted proportionally. */
  .duo{display:grid;grid-template-columns:minmax(0,var(--text-column)) minmax(0,var(--photo-column));column-gap:var(--hero-gap);row-gap:0;align-items:start}
  
  .duo .man{grid-column:1;grid-row:1;display:flex;flex-direction:column;font-size:var(--shared-copy-size,var(--hero-copy-size));line-height:var(--balanced-leading,var(--body-leading))}
  .duo.rev .man{grid-column:2;order:initial}
  .duo .architecture{display:contents}
  .duo .image-window{grid-column:2;grid-row:1;align-self:start}
  .duo.rev .image-window{grid-column:1}
  .duo .architecture .photo{width:100%;height:auto;aspect-ratio:var(--source-ratio);object-fit:contain}
  .duo .architecture .cap{grid-column:2;grid-row:2}
  .duo.rev .architecture .cap{grid-column:1}
  #s3 .support-copy{margin-block-start:0;font-size:inherit;line-height:var(--balanced-leading,var(--pricing-copy-leading))}
  .duo .price-row{line-height:var(--balanced-leading,var(--pricing-row-leading))}
  .duo .price-row dt{font-size:var(--shared-copy-size,var(--hero-copy-size))}
  .duo .price-description{font-size:calc(var(--shared-copy-size,var(--hero-copy-size))*.72);line-height:var(--balanced-leading,var(--pricing-description-leading))}
  .duo .price-row dd{font-size:calc(var(--shared-copy-size,var(--hero-copy-size))*1.5)}
  .project-layout{grid-template-areas:"title title" "image plan";grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);align-items:stretch}
  .ttl{height:var(--project-heading-height);flex-direction:row;align-items:center}
  /* The horizontal stroke shares the title center; the legs extend below it. */
  .ttl::before,.ttl::after{flex:0 0 var(--connector-width);width:var(--connector-width);border-block-start:var(--hairline) solid var(--line);position:relative;top:calc((var(--connector-height) - var(--hairline))/2);background:none}
  .ttl::before{border-inline-start:var(--hairline) solid var(--line)}
  .ttl::after{border-inline-end:var(--hairline) solid var(--line)}
  .project-image,.project-plan{width:100%}
  /* The full photograph sets the row height; the positioned card fits that height. */
  .project-layout{position:relative;grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-image .photo{width:100%;height:auto;aspect-ratio:var(--source-ratio)}
  .project-plan{position:absolute;inset:0;height:100%;min-height:0}
  .project-plan>*{flex-shrink:0}
  .project-description{font-size:calc(var(--plan-copy)*var(--plan-scale,1))}
  .plan-top{margin-block-end:8px}
  .project-subtitle{margin-block-end:8px}
  .plan-bottom{padding-block-start:10px}
  .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:space-between;gap:var(--gap)}
}
@media(min-width:1140px){
  .plan-top{margin-block-end:18px}
  .portfolio{padding-block-start:36px}
}
@media(max-width:359px){
  :root{--plan-inset:18px}
}

/* Cespax identity: the promise shares the full symbol + wordmark center.
   320–743: both centered in the header; from 744: the same brand-width column. */
.brand-wordmark{width:100%;height:auto}
.brand-promise{grid-column:1/-1;min-width:0;font-size:var(--promise-size);line-height:var(--promise-leading);color:var(--green);text-align:center}
.brand-line{--fit-max:var(--promise-size);--fit-min:var(--promise-min);display:block;white-space:nowrap}
.flag{display:inline-block;font:var(--flag-size)/1 "Apple Color Emoji","Segoe UI Emoji",sans-serif;width:44px;text-align:center;flex:0 0 auto}
@media(min-width:744px){.brand-promise{grid-column:1;width:var(--brand-width);max-width:100%;justify-self:start}}

/* Stacked mobile layout preserves the complete pricing photograph. */
@media(max-width:743px){#s3 .photo{aspect-ratio:var(--source-ratio)}}

/* Fixed 1200 × 630 social card; rendered from the same wordmark and copy. */
.social-card{--share-width:1200px;--share-height:630px;--share-logo:600px;--share-copy:34px;--share-leading:48px;--share-excerpt:24px;--share-excerpt-leading:36px;--share-gap:28px;--share-inset:80px;width:var(--share-width);height:var(--share-height);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--header)}
.social-card-heading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--share-gap);padding:var(--share-inset);width:100%;text-align:center}
.social-card-heading img{width:var(--share-logo);height:auto}
.social-card-promise{font-size:var(--share-copy);line-height:var(--share-leading);color:var(--green)}
.social-card-promise{white-space:nowrap}
.social-card-excerpt{font-size:var(--share-excerpt);line-height:var(--share-excerpt-leading);color:var(--muted)}

@media(min-width:744px){
  .duo .man{display:flex;flex-direction:column;height:auto}
  .duo .man>*{flex-shrink:0}
  .duo .num{margin-block-end:var(--number-gap);padding-block-end:0}
  .duo .txt,.duo .support-copy{letter-spacing:var(--balanced-tracking,0em)}
}

html[lang="ar"]{--balance-tracking-max:0}

/* Keep the first written line at the same distance from every number. */
.duo .txt,.duo .support-copy{text-box-trim:trim-start;text-box-edge:text}

/* Initial arrival and language navigation. */
html[data-language-direction="-1"]{--language-direction:-1}
html[data-appearance="entry"]::before,
html[data-motion-mode="B"][data-appearance="language-enter"]::before{
  content:"";
  position:fixed;
  z-index:10000;
  inset:0 0 auto;
  height:var(--motion-viewport-height);
  pointer-events:none;
  visibility:hidden;
  background-image:linear-gradient(to bottom,transparent 0,var(--paper,#fff) var(--motion-feather),var(--paper,#fff) 100%);
  background-repeat:no-repeat;
  background-size:100% calc(var(--motion-viewport-height) + var(--motion-feather));
  animation:site-entry-reveal calc(var(--site-entry-ms)*1ms) linear both;
}
html[data-motion-mode="B"][data-appearance="language-enter"]::before{
  clip-path:inset(var(--motion-body-start) 0 0);
  animation-duration:calc(var(--language-entry-ms)*1ms);
}
@keyframes site-entry-reveal{
  from{background-position:0 calc(-1*var(--motion-feather));visibility:visible}
  to{background-position:0 var(--motion-viewport-height);visibility:hidden}
}
html[data-appearance="language-enter"],
html[data-appearance="language-outgoing"]{overflow-x:clip}
/* Keep the body box fixed; clip translated children before they reach the viewport.
   Root-only clipping still permits programmatic horizontal scrolling. */
html[data-appearance="language-enter"] body,
html[data-appearance="language-outgoing"] body{overflow-x:clip}
html[data-motion-mode="A"][data-appearance="language-enter"] body > :is(header,main,footer){
  animation:language-enter-horizontal calc(var(--language-entry-ms)*1ms) ease-out both;
}
html[data-motion-mode="B"][data-header-motion="horizontal"][data-appearance="language-enter"] header{
  animation:language-enter-horizontal calc(var(--motion-header-ms)*1ms) ease-out both;
}
@keyframes language-enter-horizontal{
  from{opacity:0;transform:translateX(calc(var(--language-direction)*var(--language-distance)))}
  to{opacity:1;transform:translateX(0)}
}
/* FR and EN exchange slots without translating or fading the header. */
html[data-language-from="en"]{--flag-swap-direction:-1}
html[data-appearance="language-enter"][data-flag-motion="swap"] .lang :is(.language-fr,.language-en){
  --flag-start:calc(var(--flag-swap-direction)*(var(--flag-target) + var(--flag-gap)));
  animation:language-flag-swap calc(var(--language-flag-ms)*1ms) ease-out both;
}
html[data-appearance="language-enter"][data-flag-motion="swap"] .lang .language-en{
  --flag-start:calc(-1*var(--flag-swap-direction)*(var(--flag-target) + var(--flag-gap)));
}
@keyframes language-flag-swap{from{transform:translateX(var(--flag-start))}to{transform:translateX(0)}}
html[data-motion-ready="false"]::before,
html[data-motion-ready="false"][data-appearance="language-enter"] body > :is(header,main,footer),
html[data-motion-ready="false"] .lang a{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  html[data-appearance="entry"]::before,
  html[data-motion-mode="B"][data-appearance="language-enter"]::before{content:none}
  html[data-appearance="language-enter"] body > :is(header,main,footer),
  html[data-appearance="language-enter"] .lang a{animation:none}
}