/* Maghreb Lens : bleu de Fès profond, miel de la lentille en accent. Une famille (Archivo), la largeur fait la voix. */
:root {
  --porcelain: #F5F7FB;
  --paper: #FFFFFF;
  --mist: #E8EDF7;
  --cobalt: #1F3B8F;
  --ink: #101C45;
  --muted: #4A5578;
  --line: #D8DEEC;
  --field: #7A86A6; /* bord des champs : 3,3:1 sur le fond */
  --honey: #D2932F;
  --honey-deep: #B97C1D;
  --on-dark: #C9D2EC;
  --on-dark-soft: #96A3CB;
  --rule-dark: rgba(255, 255, 255, .14);
  --wrap: 1180px;
  --gut: clamp(16px, 4vw, 32px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--porcelain);
}
h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 800; font-stretch: 125%; line-height: 1; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 750; font-stretch: 118%; line-height: 1.08; letter-spacing: -0.015em; max-width: 20ch; }
h3 { font-size: 1.25rem; font-stretch: 106%; line-height: 1.3; }
p { margin: 0; max-width: 62ch; }
a { color: inherit; }
.nb { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }
:is(.top, .hero, .dark, .contact, .foot) :focus-visible { outline-color: var(--honey); }
.langs ul a:focus-visible { outline-color: var(--cobalt); outline-offset: -3px; }
.skip { position: absolute; z-index: 100; top: 8px; inset-inline-start: -10000px; padding: 10px 16px; border-radius: 6px; background: var(--paper); color: var(--ink); font-weight: 700; }
.skip:focus { inset-inline-start: 16px; }
main:focus { outline: none; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }

/* Boutons : ronds comme la lentille ; texte encre sur miel (contraste 6:1). */
.btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.6em;
  border: 2px solid var(--honey); border-radius: 999px;
  background: var(--honey); color: var(--ink);
  font: inherit; font-weight: 700; font-stretch: 108%; font-size: 1.02rem;
  text-decoration: none; cursor: pointer;
}
.btn:active { background: var(--honey-deep); border-color: var(--honey-deep); transform: translateY(1px); }
.btn-light { background: transparent; border-color: rgba(255, 255, 255, .7); color: var(--paper); }
.btn-light:active { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn-small { min-height: 42px; padding: 0 1.2em; font-size: .95rem; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--honey-deep); border-color: var(--honey-deep); }
  .btn-light:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
  .nav a:hover, .foot a:hover { text-decoration-color: var(--honey); }
  .langs summary:hover { color: var(--paper); }
  .langs a:hover { background: var(--mist); }
}

/* En-tête : même bleu profond que le héros, d'un seul tenant. */
.top { background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--rule-dark); }
.bar { display: flex; align-items: center; gap: 36px; min-height: 80px; }
.logo { white-space: nowrap; display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 800; font-stretch: 125%; font-size: 1.2rem; letter-spacing: -0.01em; }
.logo svg { flex: none; }
.nav { margin-inline-start: auto; display: flex; gap: 30px; font-size: 1rem; }
.nav a, .foot a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav a { font-weight: 550; color: var(--on-dark); }
.nav a[aria-current="page"] { color: var(--paper); text-decoration-color: var(--honey); }
/* Langues : code de la page en cours, liste des trois langues au clic (sans JavaScript, élément details). */
.langs { position: relative; }
.langs summary { list-style: none; min-height: 42px; display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; font-weight: 650; font-size: .95rem; color: var(--on-dark); cursor: pointer; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary svg { flex: none; transition: transform .2s ease; }
.langs[open] summary svg { transform: rotate(180deg); }
.langs ul { position: absolute; z-index: 10; top: calc(100% + 8px); inset-inline-end: -8px; min-width: 168px; margin: 0; padding: 6px; list-style: none; background: var(--paper); border-top: 4px solid var(--cobalt); border-radius: 6px; box-shadow: 0 18px 44px rgba(16, 28, 69, .35); }
.langs a { display: block; padding: 10px 12px; border-radius: 4px; color: var(--ink); font-weight: 600; text-decoration: none; }
.langs a[aria-current="page"] { color: var(--muted); font-weight: 500; }
.short { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Héros : grand œil sur fond bleu nuit, titre large ; bande des quatre métiers en pied. */
.hero {
  --glow: 76%;
  background: radial-gradient(circle at var(--glow) 42%, rgba(31, 59, 143, .75), transparent 52%), var(--ink);
  color: var(--paper);
  padding-block: clamp(40px, 6vw, 84px) clamp(40px, 5vw, 64px);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "title tryon" "body tryon";
  column-gap: clamp(32px, 5vw, 72px); row-gap: 32px;
}
.hero h1 { grid-area: title; align-self: end; }
.hero-body { grid-area: body; }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.32rem); line-height: 1.55; color: var(--on-dark); max-width: 44ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.tryon { grid-area: tryon; align-self: center; justify-self: center; width: min(100%, 520px); margin: 0; }
/* Couronne de rayons miel autour de l'œil : la trame d'une lentille, à l'échelle de la page. */
.stage { position: relative; padding: 8%; }
.stage::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: .55;
  background: repeating-conic-gradient(rgba(210, 147, 47, .95) 0 .5deg, transparent .5deg 2.25deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 87%, #000 87.5% 98%, transparent 98.5%);
  mask: radial-gradient(circle closest-side, transparent 0 87%, #000 87.5% 98%, transparent 98.5%);
}
.stage svg { position: relative; display: block; width: 100%; height: auto; }
.lens { transition: opacity .9s ease, color .6s ease; }
.shades { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.no-js .shades { display: none; }
.shades button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 13px;
  border: 1.5px solid rgba(255, 255, 255, .22); border-radius: 999px;
  background: transparent; color: var(--paper);
  font: inherit; font-size: .92rem; cursor: pointer;
}
.shades button[aria-pressed="true"] { background: var(--honey); border-color: var(--honey); color: var(--ink); font-weight: 650; }
.shades button:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .shades button:hover { border-color: var(--paper); }
}
.sw { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(16, 28, 69, .25); }
.sw-none { background: conic-gradient(from 45deg, #5a3519 0 50%, #2a170b 0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.tryon figcaption { margin-top: 12px; text-align: center; font-size: .875rem; color: var(--on-dark-soft); }

.pillars { margin: clamp(48px, 6vw, 80px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-dark); }
.pillars > div { padding-block: 26px 4px; padding-inline: 0 28px; }
.pillars > div + div { padding-inline-start: 28px; border-inline-start: 1px solid var(--rule-dark); }
.pillars dt { font-weight: 750; font-stretch: 116%; font-size: 1.15rem; }
.pillars dt::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 14px; background: var(--honey); }
.pillars dd { margin: 6px 0 0; color: var(--on-dark-soft); font-size: 1rem; line-height: 1.5; }

/* Sections */
.sec { padding-block: clamp(64px, 9vw, 120px); }
.band { background: var(--paper); border-block: 1px solid var(--line); }
.dark { background: var(--ink); color: var(--paper); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.sec-head p { color: var(--muted); }
.dark .sec-head p { color: var(--on-dark); }
.sub { margin-top: 22px; font-size: clamp(1.12rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--muted); }

/* Fabricants : l'offre à gauche, les exigences à droite (fiche cartonnée). */
.brands-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.slip { background: var(--paper); border: 1px solid var(--line); border-top: 6px solid var(--cobalt); border-radius: 6px; padding: 30px; }
.slip ul { list-style: none; padding: 0; margin: 14px 0 18px; }
.slip li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 1.02rem; font-weight: 550; }
.slip li::before { content: ""; flex: none; width: 15px; height: 15px; margin-top: .28em; border-radius: 50%; border: 1.5px solid var(--cobalt); background: radial-gradient(circle, var(--honey) 0 3.5px, transparent 4px); }
.slip .note { font-size: .95rem; color: var(--muted); }

/* Couverture : les douze régions, le siège en miel. */
.regions { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
.regions li { padding: 20px 0; border-top: 1px solid var(--rule-dark); font-weight: 600; font-stretch: 106%; font-size: 1.05rem; color: var(--on-dark); }
.regions .home { color: var(--honey); border-top: 3px solid var(--honey); padding-top: 18px; }
.regions .home strong { display: block; font-weight: 750; }
.regions .home span { font-size: .875rem; font-weight: 500; color: var(--on-dark-soft); }

/* Opticiens */
.opt-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.opt-grid > div > p { margin-top: 20px; color: var(--muted); }
.specs { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.specs li { padding: 16px 0; border-top: 1px solid var(--line); }
.specs span { display: block; font-size: .875rem; color: var(--muted); }
.specs strong { font-weight: 650; }
.tints { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 2px; }
.tints i { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 650; }
.opt-card { background: var(--mist); border-radius: 6px; padding: clamp(24px, 3vw, 36px); }
.opt-card h3 { font-size: 1.4rem; font-stretch: 112%; }
.opt-card p { margin: 12px 0 24px; color: var(--muted); }
.opt-card small { display: block; margin-top: 14px; color: var(--muted); font-size: .875rem; }

/* L'entreprise */
.who-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px clamp(32px, 5vw, 64px); }
.who-grid p { font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.55; }

/* Contact */
.contact { background: var(--cobalt); color: var(--paper); padding-block: clamp(72px, 10vw, 128px); }
.contact h2 { max-width: 18ch; font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; font-stretch: 122%; }
.contact p { margin-top: 18px; color: #D3DCF4; }
.contact .mail { margin-top: 28px; font-size: 1rem; }
.contact .mail a { color: var(--paper); text-underline-offset: 4px; }

/* Pied de page */
.foot { background: var(--ink); color: var(--on-dark-soft); font-size: .95rem; padding-block: clamp(48px, 6vw, 72px) 28px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 32px; }
.foot .logo { color: var(--paper); }
.foot-brand p { margin-top: 14px; max-width: 30ch; }
.foot h3 { font-size: .95rem; font-stretch: 110%; color: var(--paper); margin-bottom: 12px; }
.foot nav a { display: block; padding: 4px 0; }
.foot p + p { margin-top: 4px; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--rule-dark); font-size: .875rem; }

/* Pages intérieures : héros réduit avec fil d'Ariane. */
.page-hero { padding-block: clamp(36px, 5vw, 64px) clamp(44px, 6vw, 80px); }
.page-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); max-width: 22ch; }
.page-hero .lead { margin-top: 22px; max-width: 60ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: .95rem; color: var(--on-dark-soft); }
.crumbs a { color: var(--on-dark); text-underline-offset: 4px; }
.items { list-style: none; padding: 0; margin: clamp(28px, 4vw, 44px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.items li { padding: 22px 0; border-top: 1px solid var(--line); }
.items h3::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 14px; background: var(--honey); }
.items p { margin-top: 8px; color: var(--muted); }
.steps { counter-reset: step; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps li { counter-increment: step; }
.steps h3::before { content: counter(step); width: auto; height: auto; background: none; color: var(--cobalt); font-size: 2rem; font-weight: 800; line-height: 1; margin-bottom: 10px; }
.more { font-weight: 700; color: var(--cobalt); text-underline-offset: 4px; }
.more::after { content: " →"; }
html[dir="rtl"] .more::after { content: " ←"; }
.more-p { margin-top: 24px; }
.facts { margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.facts > div { padding: 14px 0; border-top: 1px solid var(--line); }
.facts dt { font-size: .875rem; color: var(--muted); }
.facts dd { margin: 0; font-weight: 650; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 24px clamp(32px, 5vw, 64px); align-items: start; }
.faq { margin: 0; }
.faq > div { padding: 20px 0; border-top: 1px solid var(--line); }
.faq dd { margin: 8px 0 0; color: var(--muted); }
.faq h3 { font-size: 1.12rem; }
.prose { max-width: 820px; }
.prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); max-width: none; margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p + p { margin-top: 10px; }
.prose a { color: var(--cobalt); text-underline-offset: 3px; }
.prose .updated { margin-top: 40px; font-size: .95rem; color: var(--muted); }
.legal a { color: inherit; text-underline-offset: 3px; }
.e404 { padding-block: 14vh; display: grid; gap: 48px; text-align: center; }
.e404 h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.e404 p { margin: 18px auto 0; }
html[lang="ar"] .e404, .e404 [lang="ar"] { font-family: "Archivo", "IBM Plex Sans Arabic", system-ui, sans-serif; }

/* Formulaires : fenêtre blanche liserée de bleu, comme la fiche « Nos exigences ». */
[hidden] { display: none !important; }
html:has(dialog[open]) { overflow: hidden; }
.dlg {
  width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-top: 6px solid var(--cobalt); border-radius: 6px;
  background: var(--paper); color: var(--ink); box-shadow: 0 24px 64px rgba(16, 28, 69, .4);
}
.dlg[open] { animation: dlg-in .2s ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px); } }
.dlg::backdrop { background: rgba(16, 28, 69, .66); }
.dlg-in { padding: clamp(22px, 4vw, 34px); }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.dlg h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); max-width: none; }
.x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-block: -6px 0; margin-inline: 0 -10px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.frm .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.field.wide { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 6px; font-size: .95rem; font-weight: 650; }
.field .opt { font-weight: 450; color: var(--muted); }
.field input, .field textarea {
  display: block; width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--field); border-radius: 6px; background: var(--porcelain);
  color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.4;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--cobalt); background: var(--paper); }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: #B3261E; }
.err { margin: 0; font-size: .875rem; color: #B3261E; }
.err:not(:empty) { margin-top: 5px; }
.form-err { margin-top: 16px; font-size: .95rem; color: #B3261E; }
.form-err:empty { display: none; }
.frm .btn { margin-top: 22px; }
.frm .btn:disabled { opacity: .7; cursor: progress; }
.legal { margin-top: 14px; font-size: .875rem; color: var(--muted); }
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.done h3 { font-size: 1.4rem; font-stretch: 112%; }
.done h3:focus { outline: none; }
.done p { margin: 8px 0 24px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .x:hover { background: var(--mist); color: var(--ink); }
}

@media (max-width: 900px) {
  /* Mobile : logo, langue et contact sur une ligne, la navigation dessous (grille : rien ne passe à la ligne). */
  .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 16px; }
  .nav { grid-column: 1 / -1; grid-row: 2; margin: 0; flex-wrap: wrap; gap: 0 20px; padding-bottom: 8px; font-size: .95rem; white-space: nowrap; }
  .nav a { display: inline-flex; align-items: center; min-height: 40px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "tryon" "body"; }
  .tryon { width: min(100%, 400px); }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 0; }
  .pillars > div, .pillars > div + div { padding: 22px 0 6px; border-inline-start: 0; border-top: 1px solid var(--rule-dark); }
  .sec-head, .brands-grid, .opt-grid, .who-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .bar { gap: 12px; min-height: 68px; }
  .top .logo { font-size: 1.02rem; gap: 9px; }
  .bar .btn-small { min-height: 40px; padding: 0 .95em; font-size: .88rem; }
  .langs summary { min-height: 40px; font-size: .88rem; }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
  html[lang="ar"] h1 { font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .page-hero h1 { font-size: clamp(1.8rem, 8vw, 2.2rem); }
  .specs, .items, .facts { grid-template-columns: minmax(0, 1fr); }
  .regions li { font-size: .98rem; }
  .ctas .btn, .opt-card .btn { width: 100%; white-space: normal; text-align: center; }
  .frm .grid { grid-template-columns: minmax(0, 1fr); }
  .frm .btn { width: 100%; }
}
@media (max-width: 420px) {
  .long { display: none; }
  .short { display: inline; }
}
@media (max-width: 360px) {
  .bar { gap: 8px; }
  .top .logo { font-size: .94rem; gap: 7px; }
  .bar .btn-small { padding: 0 .8em; }
  .langs summary svg { display: none; }
}
/* Arabe : de droite à gauche. Lettres arabes en Plex (texte) et Kufi (titres) derrière Archivo, qui garde le latin.
   Corps un peu plus grand (à taille égale, l'arabe paraît plus petit que le latin). Jamais d'espacement entre les lettres
   (l'écriture est liée) ; interlignage plus ouvert pour les hampes. */
html[lang="ar"] { font-size: 106.25%; }
html[lang="ar"] body { font-family: "Archivo", "IBM Plex Sans Arabic", system-ui, sans-serif; }
html[lang="ar"] :is(h1, h2, h3, .pillars dt, .btn) { font-family: "Archivo", "Noto Kufi Arabic", system-ui, sans-serif; }
html[lang="ar"] * { letter-spacing: 0 !important; }
html[lang="ar"] h1 { line-height: 1.35; font-weight: 800; }
html[lang="ar"] h2 { line-height: 1.45; }
html[lang="ar"] .hero { --glow: 24%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lens, .langs summary svg { transition: none; }
  .dlg[open] { animation: none; }
}