/* Zinnid Studio, zinnidstudio.com. Figma mockup "Site zinnidstudio v2" (validated 2026-11-12) and brand guidelines v1.2.
   Drop red #FF1A5B: the drop of the logo and icons, and non-text interaction marks only (link underline, button
   outline on hover, active language); never text, never a button fill (CDC v1.3 § 6, decision of 2026-11-12).
   Logical properties throughout: the Arabic version mirrors itself through dir="rtl". */

@font-face{font-family:"Jost";src:url(../fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url(../fonts/crimson-pro-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url(../fonts/crimson-pro-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Alyamama";src:url(../fonts/alyamama-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0020,U+0025,U+0028-0029,U+002C-002F,U+003A,U+0040,U+00A0,U+00AB,U+00B7,U+00BB,U+00D7,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+2013,U+2019,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Alyamama";src:url(../fonts/alyamama-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0020,U+0025,U+0028-0029,U+002C-002F,U+003A,U+0040,U+00A0,U+00AB,U+00B7,U+00BB,U+00D7,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+2013,U+2019,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Amiri";src:url(../fonts/amiri-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0020,U+00A0,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Amiri";src:url(../fonts/amiri-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0020,U+00A0,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}

/* Colors: the 11 variables of the mockup (Figma name in brackets). */
:root{
  --blue:#00448D;              /* bleu */
  --blue-hover:#00356E;        /* bleu-survol */
  --drop-red:#FF1A5B;          /* rouge-goutte */
  --ink:#14171C;               /* encre */
  --text-secondary:#4A505A;    /* texte-secondaire */
  --rule:#D9DCE1;              /* filet */
  --surface:#F4F5F7;           /* surface */
  --blue-light:#E6EDF6;        /* bleu-clair */
  --white:#FFFFFF;             /* blanc */
  --pattern:#245E9D;           /* trame */
  --image-placeholder:#DCE3EC; /* image-attente */
  --black:#000;                /* used only by the validated signature animation v0.7 (signature.css) */
  --wrap:1200px;--gutter:16px;
  --sans:"Jost","Segoe UI",Arial,sans-serif;
  --serif:"Crimson Pro",Georgia,serif;
  --ar-sans:"Alyamama","Jost","Segoe UI",Tahoma,sans-serif;
  --ar-serif:"Amiri","Crimson Pro",Georgia,serif;
  --body:var(--sans);--title:var(--serif);
}
/* Section padding: 48 px on phones, 96 px on desktop (the home page has its own 56 / 104). */
:root{--space:48px}
@media (min-width:768px){:root{--gutter:24px;--space:96px}}

/* Type scale: the 23 text styles of the mockup. Mobile (360) first, desktop (1440) from 768 px. */
:root{
  --h1-size:2.125rem;--h1-lh:2.5rem;       /* Titre/H1, mobile 34/40 */
  --h2-size:1.75rem;--h2-lh:2.0625rem;     /* Titre/H2, mobile 28/33 */
  --h3-size:1.625rem;--h3-lh:1.9375rem;    /* Titre/H3, mobile 26/31 */
  --h4-size:1.625rem;--h4-lh:1.9375rem;    /* Titre/H4 26/31 */
  --lead-size:1.1875rem;--lead-lh:1.875rem;/* Texte/Chapeau 19/30 */
  --text-size:1rem;--text-lh:1.5625rem;    /* Texte/Courant 16/25 */
  --small-size:.9375rem;--small-lh:1.5rem; /* Texte/Petit 15/24 */
  --ui-size:1rem;--ui-lh:1.5rem;           /* Interface/Bouton, Navigation 16/24 */
  --link-lh:1.625rem;                      /* Interface/Lien 16/26 */
  --price-size:.9375rem;--price-lh:1.375rem;/* Interface/Prix 15/22 */
  --eyebrow-size:.75rem;--eyebrow-lh:1rem; /* Interface/Surtitre 12/16, +8 % */
}
@media (min-width:768px){:root{
  --h1-size:3.75rem;--h1-lh:4rem;          /* 60/64 */
  --h2-size:2.75rem;--h2-lh:3.125rem;      /* 44/50 */
  --h3-size:2rem;--h3-lh:2.375rem;         /* 32/38 */
}}
/* Arabic: Amiri Bold for titles, Alyamama for text and interface; Latin words fall back to Jost and Crimson Pro.
   The Arabic faces also cover the space and no-break space, and Alyamama the Latin punctuation used in the Arabic texts,
   so no sign of an Arabic text falls back to Jost (Alyamama subset of 2026-11-13, from the Google Fonts release 1.213). */
:root:lang(ar){
  --body:var(--ar-sans);--title:var(--ar-serif);
  --h1-size:2.125rem;--h1-lh:3.1875rem;    /* Arabe/H1, mobile 34/51 */
  --h2-size:1.75rem;--h2-lh:2.625rem;      /* Arabe/H2, mobile 28/42 */
  --h3-size:1.5rem;--h3-lh:2.25rem;        /* Arabe/H3, mobile 24/36 */
  --h4-size:1.5rem;--h4-lh:2.375rem;       /* Arabe/H4 24/38 */
  --lead-size:1.25rem;--lead-lh:2.25rem;   /* Arabe/Chapeau 20/36 */
  --text-size:1.125rem;--text-lh:2rem;     /* Arabe/Courant 18/32 */
  --small-size:1rem;--small-lh:1.75rem;    /* Arabe/Petit 16/28 */
  --ui-size:1.0625rem;--ui-lh:1.75rem;--link-lh:1.75rem;--price-size:1.0625rem;--price-lh:1.75rem; /* Arabe/Interface 17/28 */
  --eyebrow-size:.9375rem;--eyebrow-lh:1.5rem; /* Arabe/Surtitre 15/24 */
}
@media (min-width:768px){:root:lang(ar){
  --h1-size:3.5rem;--h1-lh:5.25rem;        /* 56/84 */
  --h2-size:2.5rem;--h2-lh:3.875rem;       /* 40/62 */
  --h3-size:1.875rem;--h3-lh:2.875rem;     /* 30/46 */
}}
:lang(ar){letter-spacing:0!important;text-transform:none!important}  /* spacing would break Arabic joining */
[lang=ar]{font-family:var(--ar-sans)}
[lang=en],[lang=fr]{font-family:var(--sans)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-block-start:140px;font-synthesis:none}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-weight:400;font-size:var(--text-size);line-height:var(--text-lh)}
strong,b,th{font-weight:500}
img{max-inline-size:100%;block-size:auto;display:block}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
main:focus{outline:none}

/* Links (Interface/Lien): blue, red underline 1 px set 3 px below the text; darker blue on hover. */
a{color:var(--blue);text-decoration-line:underline;text-decoration-color:var(--drop-red);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--blue-hover)}
/* Keyboard focus: 2 px blue ring, distinct from hover. */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Titles: Crimson Pro SemiBold (Latin), Amiri Bold (Arabic). */
h1,h2,h3,h4,.h2,.h3{font-family:var(--title);font-weight:600;color:var(--blue);margin:0 0 .4em;text-wrap:balance}
/* Low specificity, so that component titles set in Alyamama Medium (footer, questions, price groups) keep 500. */
:where(:lang(ar)) :is(h1,h2,h3,h4){font-weight:700}
:where(:lang(ar)) :is(.h2,.h3){font-weight:700}
h1{font-size:var(--h1-size);line-height:var(--h1-lh)}
h2,.h2{font-size:var(--h2-size);line-height:var(--h2-lh)}
h3,.h3{font-size:var(--h3-size);line-height:var(--h3-lh)}
h4{font-size:var(--h4-size);line-height:var(--h4-lh)}

.lead{font-size:var(--lead-size);line-height:var(--lead-lh);max-inline-size:60ch}
.measure{max-inline-size:68ch}
.muted{color:var(--text-secondary)}
.small{font-size:var(--small-size);line-height:var(--small-lh);color:var(--text-secondary)}
/* Overline (Interface/Surtitre): Jost Medium, capitals, +8 % tracking, 12/16; Arabic: Alyamama Medium 15/24. */
.eyebrow{display:block;font-weight:500;font-size:var(--eyebrow-size);line-height:var(--eyebrow-lh);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0 0 .75rem}
.eyebrow a{color:inherit;text-decoration-line:none}
.visually-hidden{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Arrows follow the reading direction */
.arrow::after{content:"→"}
.arrow-back::after{content:"←"}
[dir=rtl] .arrow::after{content:"←"}
[dir=rtl] .arrow-back::after{content:"→"}
.arrow{display:inline-block}

.wrap{max-inline-size:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-inline-size:calc(760px + 2 * var(--gutter))}
.section{padding-block:var(--space)}
.section-tight{padding-block-start:calc(var(--space) / 2)}
.band{background:var(--surface)}
.two{display:grid;gap:40px}
@media (min-width:900px){.two{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}
.after-list{margin-block-start:24px}

/* Skip link */
.skip{position:absolute;inset-inline-start:8px;inset-block-start:-100px;z-index:20;background:var(--blue);color:var(--white);padding:12px 16px;font-weight:500;text-decoration-line:none}
.skip:focus{inset-block-start:8px}
.skip:is(:focus,:hover){color:var(--white)}

/* Buttons (Bouton): square corners, 1 px outline always, turning red on hover.
   Primary: blue fill; secondary: blue outline; white: on blue backgrounds. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-block-size:54px;padding:14px 24px;border:1px solid var(--blue);border-radius:0;background:var(--blue);color:var(--white);font-family:var(--body);font-weight:500;font-size:var(--ui-size);line-height:var(--ui-lh);text-decoration-line:none;cursor:pointer}
.btn:hover{background:var(--blue-hover);border-color:var(--drop-red);color:var(--white)}
/* A button that only shows the e-mail address is set in Jost in every language (Interface/Bouton, 16/24), as in the mockup. */
.btn[dir=ltr],.btn:has(> [dir=ltr]:only-child){font-family:var(--sans);font-size:1rem;line-height:1.5rem}
.btn-secondary{background:transparent;color:var(--blue)}
.btn-secondary:hover{background:transparent;border-color:var(--drop-red);color:var(--blue-hover)}
.btn-light{background:var(--white);border-color:var(--white);color:var(--blue)}
.btn-light:hover{background:var(--white);border-color:var(--drop-red);color:var(--blue)}
.link{display:inline-flex;align-items:center;gap:.4em;font-weight:500;font-size:var(--ui-size);line-height:var(--link-lh)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-block:28px 8px}

/* Header (En-tête): logo, then Services, Work, How I work, About, the Contact button and the languages, 32 px apart.
   Phones: two rows, logo and menu button, then the Contact button and the languages. */
.top{position:sticky;inset-block-start:0;z-index:10;background:var(--white);border-block-end:1px solid var(--rule)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;min-block-size:88px;padding-block:12px}
.brand,.brand picture,.foot-brand picture{display:block}
.brand img{inline-size:244px}
:lang(ar) .brand img{inline-size:240px}
.top-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.nav-list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 32px}
.nav-list>li>a,.menu>summary{display:flex;align-items:center;min-block-size:44px;color:var(--ink);text-decoration-line:none;font-weight:500;font-size:var(--ui-size);line-height:var(--ui-lh);cursor:pointer}
/* Hover: darker blue, red 1 px underline 3 px below (Interface/Lien); the colour is always explicit, never currentColor. */
.nav-list>li>a:hover,.menu>summary:hover,.menu-list a:hover,.mnav-panel a:hover{color:var(--blue-hover);text-decoration-line:underline;text-decoration-color:var(--drop-red);text-decoration-thickness:1px;text-underline-offset:3px}
/* Active section (mockup): #00448D text, #FF1A5B underline 2 px, 3 px below, in every state (hover, focus, open list).
   "Services" takes it on the six service pages; the open service is also marked in the list. */
.nav-list a[aria-current=page],.menu>summary.is-current,.menu-list a[aria-current=page],.mnav-panel a[aria-current=page]{color:var(--blue);text-decoration-line:underline;text-decoration-color:var(--drop-red);text-decoration-thickness:2px;text-underline-offset:3px}
/* Header Contact button: 52 px high in every language (decision of 2026-11-13), same line height and width;
   vertical padding 13 px (24 px line), 11 px in Arabic (28 px line). */
.btn.nav-cta{min-block-size:0;padding-block:13px}
:lang(ar) .btn.nav-cta{padding-block:11px}
.btn.nav-cta[aria-current=page]{background:var(--blue-hover)}
.nav-services{position:relative}
.menu>summary{list-style:none}
.menu>summary::-webkit-details-marker{display:none}
/* Inline, so that the underline runs under the triangle too, as in the mockup ("Services ▾"). */
.menu>summary::after{content:"\00a0\25BE"}
.menu[open]>summary::after{content:"\00a0\25B4"}
.menu-list{list-style:none;position:absolute;inset-block-start:100%;inset-inline-start:0;z-index:15;min-inline-size:min(320px,calc(100vw - 32px));background:var(--white);border:1px solid var(--rule);padding-block:8px}
.menu-list a{display:flex;align-items:center;min-block-size:44px;padding-inline:16px;color:var(--ink);text-decoration-line:none}
/* Languages: active one in blue with a 2 px red underline, the others in secondary grey. */
.langs ul{list-style:none;display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;align-items:center;min-block-size:24px;font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.5rem;color:var(--text-secondary);text-decoration-line:none}
.lang[lang=ar]{font-family:var(--ar-sans);font-weight:400;font-size:1.125rem}
a.lang:hover{color:var(--blue-hover);text-decoration-line:underline}
.lang.is-current{color:var(--blue);text-decoration-line:underline;text-decoration-color:var(--drop-red);text-decoration-thickness:2px;text-underline-offset:3px}
/* Phone menu */
.mnav{display:none}
.mnav>summary{display:flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;color:var(--blue);cursor:pointer;list-style:none}
.mnav>summary::-webkit-details-marker{display:none}
.mnav-panel{position:absolute;inset-inline:0;inset-block-start:100%;z-index:15;background:var(--white);border-block:1px solid var(--rule);padding:8px var(--gutter) 16px}
.mnav-panel ul{list-style:none}
.mnav-panel a{display:flex;align-items:center;min-block-size:44px;color:var(--ink);font-weight:500;text-decoration-line:none}
.mnav-sep{border-block-start:1px solid var(--rule);margin-block-start:8px;padding-block-start:8px}
@media (max-width:759px){
  /* Not sticky: a sticky header would cover too much of a small screen. */
  html{scroll-padding-block-start:16px}
  .top{position:relative}
  .top-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 8px;min-block-size:0}
  .top-nav{display:contents}
  .nav{display:none}
  .brand{grid-area:1/1}
  .brand img{inline-size:183px}
  :lang(ar) .brand img{inline-size:141px}
  .mnav{display:block;grid-area:1/2}
  .nav-cta{grid-area:2/1;justify-self:start}
  .langs{grid-area:2/2}
  .langs ul{gap:16px}
}

/* Page hero (Héros de page): overline, title (840 px max), lead (720 px max), then button and link; rule below. */
.page-hero{border-block-end:1px solid var(--rule);padding-block:48px}
@media (min-width:768px){.page-hero{padding-block:88px}}
.page-hero .eyebrow{margin:0 0 20px}
.page-hero h1{max-inline-size:840px;margin:0 0 20px}
.page-hero .lead{max-inline-size:720px;margin:0}
.page-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin:32px 0 0}
/* Hero illustration (square, decorative): on phones after the lead and the button, full width, 20 px above, 48 px below;
   on desktop 400 x 400 against the end margin, centered on the text, which stays 736 px wide. Never mirrored. */
.page-hero-illustration{display:block;inline-size:100%;block-size:auto;aspect-ratio:1;margin-block-start:20px}
@media (min-width:1024px){
  /* The image is centered in the whole hero and keeps at least 24 px above the bottom rule: hero at least 400 + 2 x 24 px. */
  .page-hero-visual{display:flex;min-block-size:448px;padding-block:0}
  .page-hero-visual>.wrap{flex:1;position:relative;display:flex;align-items:center;padding-block:88px}
  .page-hero-visual .page-hero-text{max-inline-size:736px}
  .page-hero-visual :is(h1,.lead){max-inline-size:none}
  .page-hero-illustration{position:absolute;inset-inline-end:var(--gutter);inset-block-start:50%;inline-size:400px;block-size:400px;margin:0;transform:translateY(-50%)}
}

/* Two text columns (Problème et maquette) and a single 760 px text column. */
.pair{display:grid;gap:24px}
@media (min-width:900px){.pair{grid-template-columns:1fr 1fr;column-gap:80px}}
.pair .h3{margin:0 0 16px}
.pair .lead{max-inline-size:none;margin:0}
.text-column{max-inline-size:760px}
/* Two columns (Deux colonnes): title 360 px, content 760 px, 80 px apart; stacked on phones. */
.two-col{display:grid;gap:24px;align-items:start}
.two-col>h2{margin:0}
.two-col-body>*{margin:0}
.two-col-body .lead{max-inline-size:none}
.two-col-body>*+*{margin-block-start:16px}
@media (min-width:1024px){.two-col{grid-template-columns:minmax(0,360px) minmax(0,760px);justify-content:space-between;column-gap:80px}}
.band-blue{background:var(--blue-light)}
/* Websites: "Other projects" under the price groups. */
.other-projects h3{font-family:var(--title);font-weight:600;font-size:var(--h4-size);line-height:var(--h4-lh);color:var(--ink);margin:0 0 12px}
:lang(ar) .other-projects h3{font-weight:700}
.other-projects p{margin:0;max-inline-size:1000px}

/* Hero */
/* About, introduction (Présentation): photo 440 px on the start side, text 600 px, 80 px apart, centred; stacked on phones. */
.about-intro{border-block-end:1px solid var(--rule);padding-block:48px}
.about-grid{display:grid;gap:24px}
.about-photo{inline-size:100%;block-size:auto;aspect-ratio:1}
.about-text{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.about-text>*{margin:0}
@media (min-width:1024px){
  .about-intro{padding-block:88px}
  .about-grid{grid-template-columns:440px minmax(0,600px);column-gap:80px;align-items:center}
}
/* How I work, Start small: the callout sits right under the AI section, 96 px before the call to action (mockup, all widths). */
.start-small{padding-block:0 96px}
.start-small .callout{margin-block-start:0}
/* Contact, note: lead size in secondary grey, 760 px; 64 / 96 px padding on desktop, 48 on phones. */
.contact-note{padding-block:48px}
.contact-note p{margin:0;max-inline-size:760px;color:var(--text-secondary)}
@media (min-width:768px){.contact-note{padding-block:64px 96px}}
/* Privacy: lead paragraphs 20 px apart. */
.privacy-text p{margin:0}
.privacy-text p+p{margin-block-start:20px}

/* Pattern band ("trame de la goutte"): decorative, never behind text */
.trame{background:var(--blue);color:var(--pattern);block-size:32px;overflow:hidden}
@media (min-width:768px){.trame{block-size:48px}}
.trame svg{display:block;inline-size:100%;block-size:100%}
[dir=rtl] .trame svg{transform:scaleX(-1)}

/* Section title (Titre de section): H2 and an intro in secondary grey (720 px max); side link hidden on phones. */
.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-block-end:24px}
.section-title-text{max-inline-size:720px}
.section-title h2{margin:0}
.section-title-text p{margin:12px 0 0;font-size:var(--lead-size);line-height:var(--lead-lh);color:var(--text-secondary)}
.section-title>.link{flex:none}
@media (max-width:767px){.section-title>.link{display:none}}
@media (min-width:768px){.section-title{margin-block-end:40px}}

/* Work card (Carte travail): 3:2 image on the placeholder colour, overline and tag, H4 title, summary. */
.grid{display:grid;gap:40px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.grid-one{grid-template-columns:1fr}
.card[hidden]{display:none}
.card-link{display:flex;flex-direction:column;gap:14px;color:var(--ink);text-decoration-line:none;block-size:100%}
.card-media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--image-placeholder)}
.card-media img{inline-size:100%;block-size:100%;object-fit:cover;object-position:top;transition:transform .4s ease}
/* Méta: one row; a long overline wraps beside the tag, which keeps its width (mockup, French phone frame). */
.card-meta{display:flex;align-items:center;gap:12px;padding-block-start:4px}
.card-meta .tag{flex:none}
.card-service{flex:0 1 auto;min-inline-size:0;font-weight:500;font-size:var(--eyebrow-size);line-height:var(--eyebrow-lh);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.card-title{font-family:var(--title);font-weight:600;font-size:var(--h4-size);line-height:var(--h4-lh);color:var(--blue);margin:0}
:lang(ar) .card-title{font-weight:700}
.card-text{color:var(--text-secondary)}
/* Card hover: the title gets the red 1 px link underline (decision of 2026-11-12). */
.card-link:hover .card-title{text-decoration-line:underline;text-decoration-color:var(--drop-red);text-decoration-thickness:1px;text-underline-offset:3px}
.card-link:hover .card-media img{transform:scale(1.02)}
/* Tag (Étiquette): light blue, Jost Medium 12/16, +8 %. */
.tag{display:inline-block;background:var(--blue-light);color:var(--blue);padding:3px 8px;font-family:var(--sans);font-weight:500;font-size:.75rem;line-height:1rem;letter-spacing:.08em}

/* Offer card (Carte offre): white, 1 px rule, icon, H4 title, text, then price and arrow under a rule. */
.offer-cards{list-style:none;display:grid;gap:24px}
@media (min-width:768px){.offer-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}}
@media (min-width:1024px){.offer-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.offer-card{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);padding:24px 20px 28px}
@media (min-width:768px){.offer-card{min-block-size:360px;padding:32px 32px 28px}}
.offer-card img{margin-block-end:18px}
.offer-title{font-size:var(--h4-size);line-height:var(--h4-lh);margin:0 0 18px}
.offer-title a{color:var(--blue);text-decoration-line:none}
.offer-title a::after{content:"";position:absolute;inset:0}
.offer-text{color:var(--text-secondary);margin:0}
.offer-price{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:auto 0 0;padding-block-start:16px;border-block-start:1px solid var(--rule);font-weight:500;font-size:var(--price-size);line-height:var(--price-lh);color:var(--ink)}
.offer-price .arrow{color:var(--blue);font-size:var(--ui-size);line-height:var(--link-lh)}
.offer-card:hover .offer-title a{text-decoration-line:underline;text-decoration-color:var(--drop-red)}
.offer-card:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.offer-title a:focus-visible{outline:none}

/* Steps */
.steps{list-style:none;counter-reset:step;display:grid;gap:24px;margin:0}
@media (min-width:768px){.steps{gap:40px}}
@media (min-width:720px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:step;border-block-start:1px solid var(--blue);padding-block-start:20px}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;font-weight:500;font-size:var(--eyebrow-size);line-height:var(--eyebrow-lh);letter-spacing:.08em;color:var(--blue);margin-block-end:10px}
.step-title{font-size:var(--h4-size);line-height:var(--h4-lh);color:var(--ink)}
.steps p{margin:0;color:var(--text-secondary)}

/* Lists (Élément de liste): 8 px blue square bullet. */
.ticks{list-style:none;display:grid;gap:16px}
.ticks li{position:relative;padding-inline-start:24px;min-block-size:1.625rem}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:calc(var(--text-lh) / 2 - 4px);inline-size:8px;block-size:8px;background:var(--blue)}

/* Price rows (Ligne de prix): name H4, description, delivery time in blue, price H4 in blue on the end side. */
.price-group{margin-block-end:24px}
.price-note,.after-rows{margin:24px 0 0}
.price-group:last-child{margin-block-end:0}
.callout{margin-block-start:24px}
.two-col-body .callout{margin-block-start:16px}
@media (min-width:768px){.price-group{margin-block-end:40px}.price-note,.after-rows{margin-block-start:40px}.callout{margin-block-start:40px}.two-col-body .callout{margin-block-start:16px}}
#gulf .callout{margin-block-start:0}
.price-group-title{font-family:var(--body);font-weight:500;font-size:var(--eyebrow-size);line-height:var(--eyebrow-lh);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0}
.price-rows{list-style:none}
.price-row{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;padding-block:20px;border-block-end:1px solid var(--rule)}
.price-body{flex:1 1 0;min-inline-size:0;display:grid;gap:6px}
.price-body p{margin:0}
.price-name{font-family:var(--title);font-weight:600;font-size:var(--h4-size);line-height:var(--h4-lh);color:var(--ink);margin:0}
:lang(ar) .price-name{font-weight:700}
.price-text{color:var(--text-secondary);max-inline-size:760px}
.price-time{color:var(--blue);font-size:var(--small-size);line-height:var(--small-lh)}
.price-amount{flex:0 1 auto;max-inline-size:calc((100% - 32px) / 2);text-wrap:balance;margin:0;font-family:var(--title);font-weight:600;font-size:var(--h4-size);line-height:var(--h4-lh);color:var(--blue);text-align:end}
:lang(ar) .price-amount{font-weight:700}

/* Questions (Question FAQ): rule below, question in Jost Medium, sign in blue, answer in secondary grey. */
.faq{border-block-start:1px solid var(--rule)}
.faq details{border-block-end:1px solid var(--rule);padding-block:24px}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--title);font-weight:600;font-size:var(--h4-size);line-height:var(--h4-lh);color:var(--blue)}
.faq details[open] summary::after{content:"\2212"}
.faq-q{font-family:var(--body);font-weight:500;font-size:var(--ui-size);line-height:var(--ui-lh);color:var(--ink);margin:0}
.faq details p{margin:10px 0 0;color:var(--text-secondary)}

/* Callout (Encadré): light blue box, 4 px blue rule on the start side, H4 title, text (900 px max), optional link. */
.callout{background:var(--blue-light);border-inline-start:4px solid var(--blue);padding:36px 16px}
@media (min-width:768px){.callout{padding:36px 40px}}
.callout-title{font-family:var(--title);font-weight:600;font-size:var(--h4-size);line-height:var(--h4-lh);color:var(--blue);margin:0 0 12px}
:lang(ar) .callout-title{font-weight:700}
.callout p{max-inline-size:900px;margin:0;color:var(--ink)}
.callout .link{margin-block-start:12px}

/* Work page, Projects (Projets): grey band, 64 / 96 px padding on desktop, 48 on phones; filters, count and grid 40 px apart
   (24 on phones). Filters (Filtre): blue outline, the active one filled; stacked at the widest label's width on phones. */
.work-projects{padding-block:48px}
.work-projects .wrap{display:grid;gap:24px}
.work-count{margin:0}
.filters{display:grid;grid-template-columns:max-content;gap:12px}
.filters[hidden]{display:none}
.filter{font-family:var(--body);font-weight:500;font-size:var(--ui-size);line-height:var(--ui-lh);min-block-size:44px;padding:8px 16px;border:1px solid var(--blue);border-radius:0;background:var(--white);color:var(--blue);text-align:start;cursor:pointer}
.filter:hover{border-color:var(--drop-red);color:var(--blue-hover)}
.filter[aria-pressed=true]{background:var(--blue);color:var(--white)}
.work-grid{gap:24px;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){
  .work-projects{padding-block:64px 96px}
  .work-projects .wrap{gap:40px}
  .filters{display:flex;flex-wrap:wrap}
  .filter{min-block-size:0}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px}
}
@media (min-width:1024px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Case study, Context and work done: facts (Fiche) 360 px, text (Contenu) 760 px, 80 px apart (Deux colonnes). */
.case-facts{margin:0;display:grid;gap:20px;align-content:start}
.case-facts div{display:grid;gap:4px}
.case-facts dt{font-weight:500;font-size:var(--eyebrow-size);line-height:var(--eyebrow-lh);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.case-facts dd{margin:0;color:var(--ink)}
.case-text>*{margin:0}
.case-text>*+*{margin-block-start:20px}
.case-text .lead{max-inline-size:none}
.case-text h2{font-size:var(--h3-size);line-height:var(--h3-lh)}
.case-text .ticks{gap:20px}
/* Plates (Planche): every image on the grey band, 24 px apart on phones, 40 px on desktop. */
.shots{padding-block:var(--space)}
.shot{margin:0}
.shot+.shot{margin-block-start:24px}
.shot img{display:block;inline-size:100%;block-size:auto}
@media (min-width:768px){.shot+.shot{margin-block-start:40px}}
/* Project navigation: rule above, 48 px padding; links at both edges on desktop, stacked with "next" first on phones.
   Titles may wrap. */
.pager{border-block-start:1px solid var(--rule);padding-block:48px}
.pager-in{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:24px}
.pager-link{align-items:baseline}
@media (min-width:768px){
  .pager-in{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:40px}
  .pager-link{max-inline-size:calc((100% - 40px) / 2)}
  .pager-next{text-align:end}
}

/* Home (Accueil). Sections: 104 px desktop, 56 px phone; section titles 48 px above their content. */
.home-section{padding-block:56px}
@media (min-width:768px){.home-section{padding-block:104px}.home-section .section-title{margin-block-end:48px}}
@media (max-width:767px){html:not([lang=ar]) .home-section .section-title h2{font-size:2rem;line-height:2.375rem}}
/* Hero: text column (640 px) and the signature animation v0.7 (496 x 320) side by side, centered vertically;
   on phones the animation follows the buttons, in every language. */
.home-hero{padding-block:40px}
.home-hero-in{display:flex;flex-direction:column;gap:16px}
.home-hero-text{max-inline-size:640px}
.home-hero .eyebrow{margin:0 0 16px}
.home-hero h1{margin:0 0 16px}
.home-signature{inline-size:fit-content;font-family:var(--ar-serif);font-weight:400;font-size:1.625rem;line-height:2.5rem;color:var(--blue);margin:0 0 16px}
.home-hero .lead{font-size:1.0625rem;line-height:1.6875rem;margin:0}
:lang(ar) .home-hero .lead{font-size:var(--lead-size);line-height:var(--lead-lh)}
.home-hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin:16px 0 0}
.home-hero-actions .btn{inline-size:100%}
.home-hero .sig-figure{margin:0;inline-size:100%}
@media (max-width:767px){html:not([lang=ar]) .home-hero h1{font-size:2.375rem;line-height:2.625rem}}
@media (min-width:768px){
  .home-hero{padding-block:96px}
  .home-hero-in{flex-direction:row;align-items:center;justify-content:space-between;gap:64px}
  .home-hero-text{flex:0 1 640px}
  .home-hero .eyebrow,.home-hero h1,.home-signature{margin-block-end:20px}
  .home-signature{font-size:2.125rem;line-height:3.25rem}
  .home-hero .lead{font-size:var(--lead-size);line-height:var(--lead-lh);max-inline-size:600px}
  .home-hero-actions{flex-direction:row;align-items:center;gap:28px;margin-block-start:32px}
  .home-hero-actions .btn{inline-size:auto}
  .home-hero .sig-figure{flex:0 1 496px;inline-size:auto}
}
/* Selected work: the first project large (image 690 x 826, text beside it), then a 2 x 2 grid. */
.featured{display:flex;flex-direction:column;gap:24px;margin-block-end:24px}
.featured-media{inline-size:100%;aspect-ratio:690/826;object-fit:cover;object-position:top;background:var(--image-placeholder)}
.featured-text{display:grid;gap:16px;justify-items:start}
.featured-text p{margin:0}
.featured-title{font-size:var(--h3-size);line-height:var(--h3-lh);margin:0}
.grid-two{display:grid;gap:24px}
@media (min-width:768px){.grid-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}.home-section .grid-two{row-gap:56px}}
@media (min-width:768px){
  .featured{flex-direction:row;align-items:center;gap:56px;margin-block-end:48px}
  .featured-media{flex:0 1 690px;inline-size:57.5%}
  .featured-text{flex:1 1 0}
}
/* How I work on the home page: six steps, three per row. */
/* Why Arabic (light blue) and Who you work with: image and text side by side, centered vertically. */
.home-why{background:var(--blue-light)}
.home-split{display:flex;flex-direction:column;gap:24px}
.home-split img{inline-size:100%}
.home-split-text{display:grid;gap:20px;justify-items:start}
.home-split-text>*{margin:0}
.home-who .home-split-text{gap:18px}
@media (max-width:767px){
  .home-split .lead{font-size:var(--text-size);line-height:var(--text-lh)}
  html:not([lang=ar]) .home-why h2{font-size:1.875rem;line-height:2.25rem}
  html:not([lang=ar]) .home-who h2{font-size:2rem;line-height:2.375rem}
}
@media (min-width:768px){
  .home-split{flex-direction:row;align-items:center;gap:64px}
  .home-why-img{flex:0 1 600px;inline-size:50%}
  .home-who-img{flex:0 0 360px;inline-size:360px}
  .home-split-text{flex:1 1 0}
}

/* Call to action (Appel à l'action): blue band, white title, lead and white button. */
.cta{background:var(--blue);color:var(--white);padding-block:48px}
.cta h2{color:var(--white);font-size:var(--h3-size);line-height:var(--h3-lh);margin:0 0 16px}
.cta p{font-size:var(--text-size);line-height:var(--text-lh);max-inline-size:640px;margin:0 0 16px}
@media (max-width:767px){.home-hero~.cta{padding-block:64px}html:not([lang=ar]) .home-hero~.cta h2{font-size:2rem;line-height:2.375rem}}
.cta :focus-visible{outline-color:var(--white)}
@media (min-width:768px){
  .cta{padding-block:96px}
  .cta h2{font-size:var(--h2-size);line-height:var(--h2-lh);margin-block-end:20px}
  .cta p{font-size:var(--lead-size);line-height:var(--lead-lh);margin-block-end:32px}
}

/* Footer (Pied de page): logo and note, three link columns, then copyright and languages under a rule. */
.foot{background:var(--white);padding-block:48px 32px}
.foot-cols{display:grid;gap:32px}
.foot-brand img{inline-size:244px;margin-block-end:32px}
@media (min-width:768px){.foot-brand img{margin-block-end:16px}}
:lang(ar) .foot-brand img{inline-size:141px}
@media (max-width:767px){.foot-brand img{inline-size:183px}}
@media (min-width:768px){:lang(ar) .foot-brand img{inline-size:189px}}
.foot-brand .small{max-inline-size:360px;margin:0}
.foot-title{font-family:var(--body);font-weight:500;font-size:var(--eyebrow-size);line-height:var(--eyebrow-lh);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0 0 12px}
.foot-col ul{list-style:none;display:grid;gap:12px;font-size:var(--text-size);line-height:var(--text-lh)}
.foot-col a{color:var(--ink);text-decoration-line:none}
.foot-col a:hover,.foot-langs a:hover{color:var(--blue-hover);text-decoration-line:underline}
.foot-legal{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 24px;margin-block-start:32px;padding-block-start:20px;border-block-start:1px solid var(--rule)}
.foot-legal .small{margin:0}
.foot-langs ul{list-style:none;display:flex;font-size:var(--small-size);line-height:var(--small-lh);color:var(--text-secondary)}
.foot-langs li{display:flex;align-items:center;block-size:var(--small-lh)}
.foot-langs li+li::before{content:"\00B7";margin-inline:.3em}
.foot-langs a{color:var(--text-secondary);text-decoration-line:none}
@media (min-width:768px){
  .foot{padding-block:72px 48px}
  .foot-cols{grid-template-columns:minmax(0,360fr) repeat(3,minmax(0,216fr));column-gap:64px;align-items:start}
  .foot-col ul{font-size:var(--small-size);line-height:var(--small-lh)}
  .foot-legal{margin-block-start:48px;padding-block-start:24px}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Site search (Recherche): field 560 px and button side by side, then the count and the results, 40 px apart
   (24 on phones, where the field and the button are stacked). Result: H4 title, snippet 900 px, rule below. */
.search-results .wrap{display:flex;flex-direction:column;gap:24px}
.search-results .wrap>*{margin:0}
.search-row{display:flex;flex-direction:column;gap:12px}
.search-input{block-size:54px;padding:14px 16px;font:inherit;color:var(--ink);background:var(--white);border:1px solid var(--blue);border-radius:0}
.search-status{font-size:var(--small-size);line-height:var(--small-lh);color:var(--text-secondary)}
.search-list{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.search-item{display:grid;gap:6px;padding-block-end:20px;border-block-end:1px solid var(--rule)}
.search-link{justify-self:start;font-family:var(--title);font-weight:600;font-size:var(--h4-size);line-height:var(--h4-lh);text-decoration-line:none}
.search-link:hover{text-decoration-line:underline}
:lang(ar) .search-link{font-weight:700}
.search-snippet{margin:0;max-inline-size:900px;color:var(--text-secondary)}
@media (min-width:768px){
  .search-results .wrap,.search-list{gap:40px}
  .search-row{flex-direction:row;align-items:center}
  .search-input{inline-size:560px;max-inline-size:100%}
}
mark{background:rgb(0 68 141/.12);color:inherit;padding-inline:1px}

/* Home signature animation: pause button (validated v0.7), centred under the drawing, which is centred in its box. */
.sig-pause{display:block;margin-inline:auto;margin-block-start:12px;font:500 .9375rem/1 var(--body);color:var(--blue);background:var(--white);border:1px solid var(--blue);border-radius:4px;padding:12px 16px;min-block-size:44px;cursor:pointer}
.sig-pause:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sig-pause[hidden]{display:none}