/* =====================================================================
   L'Atelier du Tapis d'Orient : jetons de design (v1, 21/10/2026)
   Source : design-system.md. Couleurs relevées dans le logo par tools/palette.py
   (design/palette-releve.json) ; contrastes vérifiés par `python3 tools/palette.py`
   (design/contrastes.json). Le générateur (1b) copie ce fichier ET design/fonts/.
   ===================================================================== */

/* ---------- Polices auto-hébergées (Fontsource 5.3.0, OFL, sous-ensemble latin) ---------- */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/assets/fonts/cinzel-latin-wght-normal.09941fb1.woff2") format("woff2-variations"),
       url("/assets/fonts/cinzel-latin-wght-normal.09941fb1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url("/assets/fonts/eb-garamond-latin-wght-normal.88603384.woff2") format("woff2-variations"),
       url("/assets/fonts/eb-garamond-latin-wght-normal.88603384.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-display: swap;
  font-weight: 400 800;
  src: url("/assets/fonts/eb-garamond-latin-wght-italic.c664773f.woff2") format("woff2-variations"),
       url("/assets/fonts/eb-garamond-latin-wght-italic.c664773f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Palette : 6 couleurs nommées ---------- */
  --c-nuit: #03112F;      /* bleu nuit du texte « TAPIS D'ORIENT » (mesuré) : texte, fonds sombres */
  --c-garance: #7D2924;   /* rouge des tapis du logo (75e centile mesuré) : bouton principal */
  --c-or: #AA742C;        /* or du « PARIS » doré (mesuré) : filets, ornements, texte sur nuit */
  --c-bronze: #82561C;    /* ombre de l'or du « L » cursif (mesuré) : liens et accents sur fond clair */
  --c-laine: #ECD1B1;     /* crème des franges et de la bobine (mesuré) : surfaces de section */
  --c-lin: #FAF3EB;       /* fond de page : 25 % laine + 75 % blanc du logo (#FEFEFE) */

  /* ---------- Dérivées (jamais de nouvelle teinte) ---------- */
  --c-nuit-doux: #343E55;        /* 80 % nuit + 20 % lin : texte secondaire */
  --c-garance-sombre: #5E0E0E;   /* rouge du fil du logo (mesuré) : survol du bouton principal */
  --c-filet: #DAC09F;            /* 40 % or + 60 % lin : filets fins sur lin (décor, pas du texte) */
  --c-lien-laine: #7D2924;       /* sur fond laine, liens en garance (le bronze n'y atteint que 4,34:1) */
  --c-blanc: #FEFEFE;            /* blanc de fond du logo (mesuré) : fond des icônes, champs */

  /* Étiquettes de marqueur .placeholder ([À CONFIRMER : …], [À FOURNIR : …]) */
  --ph-fond-clair: #F2EAE9;      /* 10 % garance + 90 % blanc */
  --ph-texte-clair: #5E0E0E;
  --ph-bord-clair: #7D2924;
  --ph-fond-sombre: #5E0E0E;
  --ph-texte-sombre: #FAF3EB;
  --ph-bord-sombre: #AA742C;

  /* Focus clavier (WCAG 2.2, 2.4.11 / 2.4.13) */
  --c-focus: #7D2924;
  --c-focus-sombre: #AA742C;

  /* ---------- Typographie ---------- */
  --font-titre: "Cinzel", "Trajan Pro", "Cormorant SC", "Times New Roman", serif;
  --font-texte: "EB Garamond", "Garamond", "Iowan Old Style", "Times New Roman", serif;

  /* Échelle classique (Bringhurst : 16 18 21 24 36 48 60 72), fluide entre 360 et 1440 px */
  --fs-mention: 0.9375rem;                                   /* 15 px : mentions, fil d'Ariane */
  --fs-petit: 1rem;                                          /* 16 px : légendes, champs */
  --fs-texte: clamp(1.125rem, 1.05rem + 0.33vw, 1.25rem);    /* 18 → 20 px : texte courant */
  --fs-chapo: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);      /* 21 → 24 px : chapô, h3 */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);         /* 26 → 36 px (Cinzel) */
  --fs-h1: clamp(2rem, 1.45rem + 2.4vw, 3.75rem);            /* 32 → 60 px (Cinzel) */
  --fs-affiche: clamp(2.25rem, 1.5rem + 3.3vw, 4.5rem);      /* 36 → 72 px : titre du hero seulement */

  --lh-texte: 1.62;     /* serif à petit œil : interlignage généreux */
  --lh-chapo: 1.45;
  --lh-titre: 1.14;
  --ls-titre: 0.02em;   /* Cinzel : capitales et petites capitales légèrement aérées */
  --ls-affiche: 0.01em;
  --fw-titre: 500;
  --fw-titre-fort: 600;
  --fw-texte: 400;
  --fw-texte-fort: 600;
  --mesure: 66ch;       /* longueur de ligne du texte courant */
  --mesure-etroite: 52ch;

  /* ---------- Espacements (base 4 px ; rythme de l'interligne ≈ 30 px) ---------- */
  --esp-1: 0.25rem;  --esp-2: 0.5rem;  --esp-3: 0.75rem; --esp-4: 1rem;
  --esp-5: 1.5rem;   --esp-6: 2rem;    --esp-7: 3rem;    --esp-8: 4rem;
  --esp-9: 6rem;     --esp-10: 8rem;
  --esp-section: clamp(3.5rem, 2.5rem + 5vw, 8rem);
  --gouttiere: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);   /* 16 px à 360 px */
  --conteneur: 76rem;
  --conteneur-texte: 44rem;

  /* ---------- Rayons : un tapis a des angles droits ---------- */
  --r-image: 0;          /* photos et illustrations : bords francs, comme un tapis posé */
  --r-carte: 0;          /* cartes de prestation : bordées d'une lisière, pas arrondies */
  --r-controle: 2px;     /* boutons, champs, étiquettes */
  --r-pastille: 999px;   /* seulement l'emblème rond et les boutons radio */

  /* ---------- Ombres : teintées de nuit, jamais grises ---------- */
  --ombre-1: 0 1px 2px rgba(3, 17, 47, 0.08), 0 2px 6px rgba(3, 17, 47, 0.05);
  --ombre-2: 0 14px 32px -16px rgba(3, 17, 47, 0.30);
  --ombre-tapis: 0 22px 40px -26px rgba(94, 14, 14, 0.40);   /* image « posée au sol » */

  /* ---------- Mouvement ---------- */
  --duree-courte: 160ms;
  --duree-moyenne: 320ms;
  --duree-deroule: 900ms;    /* seul moment orchestré : la bordure du hero se déroule */
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---------- Textures signature (CSS / SVG, aucune image) ---------- */
  /* 1. Grille de nœuds : le dos d'un tapis noué (rangées un peu plus serrées que les colonnes) */
  --tex-noeuds: radial-gradient(circle at 50% 50%, rgba(130, 86, 28, 0.16) 0 0.9px, transparent 1.4px) 0 0 / 7px 6px;
  /* 2. Chaîne et trame : fond nuit des sections sombres */
  --tex-trame: repeating-linear-gradient(0deg, rgba(236, 209, 177, 0.045) 0 1px, transparent 1px 4px),
               repeating-linear-gradient(90deg, rgba(236, 209, 177, 0.03) 0 1px, transparent 1px 6px);
  /* 3. Bordure de garde : frise de losanges et de points, posée en bande de 16 px */
  --tex-bordure: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 .5h32M0 15.5h32' stroke='%23AA742C' stroke-width='1'/%3E%3Cpath d='M16 3l5 5-5 5-5-5z' fill='none' stroke='%23AA742C' stroke-width='1.2'/%3E%3Ccircle cx='16' cy='8' r='1.3' fill='%237D2924'/%3E%3Ccircle cx='0' cy='8' r='1.1' fill='%23AA742C'/%3E%3Ccircle cx='32' cy='8' r='1.1' fill='%23AA742C'/%3E%3C/svg%3E") 0 0 / 32px 16px repeat-x;
  /* 4. Franges : fils noués en bout de tapis (pied de page, fin de hero) */
  --tex-franges: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='28' viewBox='0 0 12 28'%3E%3Cpath d='M3 0v4M9 0v4' stroke='%23ECD1B1' stroke-width='1.4'/%3E%3Cpath d='M3 4c0 2 3 2 3 4M9 4c0 2-3 2-3 4' stroke='%23ECD1B1' stroke-width='1.4' fill='none'/%3E%3Cpath d='M5.3 8v20M6.7 8v20' stroke='%23ECD1B1' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 12px 28px repeat-x;
}

/* ---------- Étiquettes de marqueur : visibles tant qu'elles existent ---------- */
.placeholder {
  display: inline;
  padding: 0.05em 0.35em;
  font-family: var(--font-texte);
  font-style: italic;
  font-size: 0.95em;
  color: var(--ph-texte-clair);
  background: var(--ph-fond-clair);
  border: 1px dashed var(--ph-bord-clair);
  border-radius: var(--r-controle);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.fond-sombre .placeholder,
.placeholder--sombre {
  color: var(--ph-texte-sombre);
  background: var(--ph-fond-sombre);
  border-color: var(--ph-bord-sombre);
}

/* ---------- Utilitaires de texture ---------- */
.tex-noeuds { background: var(--tex-noeuds), var(--c-laine); }
.tex-trame { background: var(--tex-trame), var(--c-nuit); }
.bande-bordure { display: block; height: 16px; background: var(--tex-bordure); }
.bande-franges { display: block; height: 28px; background: var(--tex-franges); }

:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.fond-sombre :focus-visible { outline-color: var(--c-focus-sombre); }


/* =====================================================================
   L’Atelier du Tapis d’Orient : feuille du site (gabarits 1b)
   Ajoutée par tools/build.py après design/tokens.css (seule source des valeurs).
   Principes (design-system.md) : la page est un champ encadré de bordures ; angles droits ;
   une seule couleur forte à la fois ; Cinzel pour H1 et H2 seulement ; aucune animation ici
   (points d’accroche data-anim pour la Phase 4).
   ===================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
  scroll-padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom) + 1rem);
  --barre-h: 3.5rem;
}
body {
  margin: 0;
  background: var(--c-lin);
  color: var(--c-nuit);
  font-family: var(--font-texte);
  font-size: var(--fs-texte);
  line-height: var(--lh-texte);
  font-weight: var(--fw-texte);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums;
  overflow-wrap: break-word;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2 {
  font-family: var(--font-titre);
  font-weight: var(--fw-titre);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 {
  font-family: var(--font-texte);
  font-weight: var(--fw-texte-fort);
  font-size: var(--fs-chapo);
  line-height: 1.28;
  margin: 1.6em 0 0.4em;
  text-wrap: balance;
}
p, ul, ol, dl { margin: 0 0 1em; }
a { color: var(--c-bronze); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--c-garance); text-decoration-thickness: 2px; }
:where(.fond-laine) a { color: var(--c-lien-laine); }
:where(.fond-sombre) a { color: var(--c-or); }
:where(.fond-sombre) a:hover { color: var(--c-laine); }
strong { font-weight: var(--fw-texte-fort); }
.fond-laine { background-color: var(--c-laine); }
.fond-sombre { color: var(--c-lin); }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
.conteneur { width: 100%; max-width: var(--conteneur); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: var(--esp-section); }
.section + .section { padding-top: 0; }
main:focus { outline: none; }

.lien-evitement {
  position: absolute; left: var(--esp-4); top: -100px; z-index: 100;
  background: var(--c-nuit); color: var(--c-lin); padding: 0.75rem 1rem; text-decoration: none;
}
.lien-evitement:focus { top: var(--esp-4); color: var(--c-lin); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.65rem 1.4rem;
  border: 1px solid transparent; border-radius: var(--r-controle);
  font-family: var(--font-texte); font-size: 1.0625rem; font-weight: var(--fw-texte-fort); line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe);
}
.bouton-detail { display: block; font-weight: var(--fw-texte); font-size: 0.9375rem; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.02em; }
.bouton--principal { background: var(--c-garance); color: var(--c-lin); }
.bouton--principal:hover { background: var(--c-garance-sombre); color: var(--c-lin); }
.bouton--secondaire { background: var(--c-or); color: var(--c-nuit); }
.bouton--secondaire:hover { background: var(--c-laine); color: var(--c-nuit); }
.bouton--contour { background: transparent; color: var(--c-nuit); border-color: var(--c-nuit); }
.bouton--contour:hover { background: var(--c-nuit); color: var(--c-lin); }
.fond-sombre .bouton--contour { color: var(--c-lin); border-color: var(--c-laine); }
.fond-sombre .bouton--contour:hover { background: var(--c-lin); color: var(--c-nuit); }
.bouton--lien { background: none; border: 0; color: var(--c-bronze); text-decoration: underline; text-underline-offset: 0.18em; padding-inline: 0.5rem; }
.bouton--lien:hover { color: var(--c-garance); }
.bouton[disabled] { opacity: 0.6; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin: var(--esp-5) 0; }
@media (hover: none) {
  .bouton--principal:hover { background: var(--c-garance); }
  .bouton--secondaire:hover { background: var(--c-or); }
  .bouton--contour:hover { background: transparent; color: var(--c-nuit); }
  .fond-sombre .bouton--contour:hover { background: transparent; color: var(--c-lin); }
}

/* ---------- Étiquettes de marqueur et notes ---------- */
.note-confirmer { font-size: var(--fs-petit); margin: var(--esp-4) 0; max-width: var(--mesure); }

/* ---------- En-tête ---------- */
.entete { background: var(--c-lin); position: relative; z-index: 20; }
.entete .bande-bordure { opacity: 0.85; }
.entete-barre { display: flex; align-items: center; gap: var(--esp-5); min-height: 4.75rem; }
.marque { display: flex; align-items: center; gap: 0.75rem; color: var(--c-nuit); text-decoration: none; margin-right: auto; min-height: 44px; }
.marque:hover { color: var(--c-nuit); }
.marque img { width: 48px; height: 48px; flex: none; }
.marque-nom { font-family: var(--font-titre); font-weight: var(--fw-titre-fort); font-size: 1.0625rem; line-height: 1.12; letter-spacing: 0.03em; max-width: 9.5em; }
.nav-principale { display: none; }
.entete-tel, .entete-devis { display: none; }
.menu-lien-sansjs, .menu-bouton {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; min-width: 44px; padding: 0.5rem 0.85rem;
  background: none; border: 1px solid var(--c-nuit); border-radius: var(--r-controle);
  color: var(--c-nuit); font: inherit; font-size: 1rem; font-weight: var(--fw-texte-fort); text-decoration: none; cursor: pointer;
}

@media (min-width: 64rem) {
  .nav-principale { display: block; }
  .menu-lien-sansjs, .menu-bouton { display: none !important; }
  .entete-devis { display: inline-flex; }
  .marque-nom { font-size: 1.125rem; }
  .nav-liste { display: flex; align-items: center; gap: var(--esp-1); list-style: none; margin: 0; padding: 0; }
  .nav-item { position: relative; display: flex; align-items: center; }
  .nav-item > a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 0.7rem;
    color: var(--c-nuit); text-decoration: none; font-size: 1.0625rem;
  }
  .nav-item > a:hover, .nav-item > a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--c-or); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
  .sous-menu-bouton {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; min-height: 44px; margin-left: -0.45rem;
    background: none; border: 0; color: var(--c-nuit); cursor: pointer;
  }
  .sous-menu-bouton[aria-expanded="true"] svg { transform: rotate(180deg); }
  .sous-menu {
    display: none; position: absolute; top: 100%; left: 0; min-width: 17rem; margin: 0; padding: var(--esp-3) 0;
    list-style: none; background: var(--c-lin); border: 1px solid var(--c-filet); border-top: 2px solid var(--c-or); box-shadow: var(--ombre-2);
  }
  .sous-menu a { display: flex; align-items: center; min-height: 44px; padding: 0.35rem 1.1rem; color: var(--c-nuit); text-decoration: none; }
  .sous-menu a:hover, .sous-menu a[aria-current="page"] { background: var(--c-laine); color: var(--c-nuit); }
  .nav-item--sous:hover .sous-menu,
  html:not(.js) .nav-item--sous:focus-within .sous-menu,
  .sous-menu-bouton[aria-expanded="true"] + .sous-menu { display: block; }
}
@media (min-width: 80rem) {
  .entete-tel { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-nuit); font-weight: var(--fw-texte-fort); font-variant-numeric: lining-nums tabular-nums; text-decoration: none; white-space: nowrap; }
  .entete-tel:hover { color: var(--c-garance); text-decoration: underline; }
}

/* ---------- Menu mobile (dialog modal) ---------- */
html.menu-ouvert, html:has(dialog.menu-panneau[open]) { overflow: hidden; }
.menu-panneau {
  width: 100%; max-width: 26rem; height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: 0;
  border: 0; border-left: 2px solid var(--c-or); background: var(--c-lin); color: var(--c-nuit);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu-panneau::backdrop { background: rgba(3, 17, 47, 0.55); }
.menu-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); padding: var(--esp-4) var(--gouttiere); border-bottom: 1px solid var(--c-filet); }
.menu-fermer {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; min-width: 44px; padding: 0.5rem 0.85rem;
  background: none; border: 1px solid var(--c-nuit); border-radius: var(--r-controle); color: var(--c-nuit); font: inherit; font-size: 1rem; font-weight: var(--fw-texte-fort); cursor: pointer;
}
.menu-liste { list-style: none; margin: 0; padding: var(--esp-4) var(--gouttiere); }
.menu-liste > li { border-bottom: 1px solid var(--c-filet); }
.menu-liste a { display: flex; align-items: center; min-height: 48px; padding-block: 0.35rem; color: var(--c-nuit); text-decoration: none; font-size: 1.1875rem; }
.menu-liste a[aria-current="page"] { color: var(--c-garance); text-decoration: underline; text-underline-offset: 0.3em; }
.menu-sous-liste { list-style: none; margin: 0 0 var(--esp-3); padding: 0 0 0 var(--esp-4); border-left: 1px solid var(--c-or); }
.menu-sous-liste a { min-height: 44px; font-size: 1.0625rem; color: var(--c-nuit-doux); }
.menu-actions { display: grid; gap: var(--esp-3); padding: var(--esp-4) var(--gouttiere) var(--esp-7); }

/* ---------- Barre d’appel fixe (mobile) ---------- */
.barre-appel {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr 1.4fr;
  background: var(--c-nuit); border-top: 1px solid var(--c-or);
  padding-bottom: env(safe-area-inset-bottom);
}
.barre-appel a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--barre-h);
  font-weight: var(--fw-texte-fort); font-size: 1.0625rem; text-decoration: none;
}
.barre-appel-tel { color: var(--c-lin); }
.barre-appel-devis { background: var(--c-garance); color: var(--c-lin); }
.barre-appel a:hover { color: var(--c-lin); text-decoration: underline; }
.barre-appel a:focus-visible { outline-color: var(--c-or); outline-offset: -4px; }
body { padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom)); }
@media (min-width: 64rem) {
  .barre-appel { display: none; }
  body { padding-bottom: 0; }
  html { scroll-padding-bottom: 1rem; }
}

/* ---------- Fil d’Ariane ---------- */
.fil-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; list-style: none; margin: 0 0 var(--esp-4); padding: 0; font-size: var(--fs-mention); color: var(--c-nuit-doux); }
.fil-ariane li + li::before { content: "/"; margin-right: 0.5rem; color: var(--c-or); }
.fil-ariane a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--c-nuit-doux); }
.fil-ariane a:hover { color: var(--c-garance); }
.fil-ariane [aria-current] { color: var(--c-nuit); }

/* ---------- Têtes de page ---------- */
.tete-page { padding-block: var(--esp-6) var(--esp-7); border-bottom: 1px solid var(--c-filet); }
.tete-page h1 { max-width: 20ch; }
.chapo { font-size: var(--fs-chapo); line-height: var(--lh-chapo); font-style: italic; max-width: var(--mesure-etroite); color: var(--c-nuit-doux); margin-bottom: 0; }
.tete-grille { display: grid; gap: var(--esp-6); align-items: center; }
@media (min-width: 64rem) {
  .tete-grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 5rem); }
  .tete-page--prestation .tete-image .figure { margin: 0; }
}

/* ---------- Accueil : hero « tapis posé » ---------- */
.hero { position: relative; padding-block: 0; }
.hero > .bande-bordure { height: 16px; }
.hero-grille { display: grid; gap: var(--esp-6); padding-block: var(--esp-7) var(--esp-8); align-items: center; }
.hero-titre { font-size: var(--fs-affiche); letter-spacing: var(--ls-affiche); line-height: 1.08; max-width: 14ch; }
.hero .chapo { color: var(--c-nuit); }
.hero-reperes { list-style: none; padding: 0; margin: var(--esp-5) 0 0; display: grid; gap: var(--esp-2); font-size: var(--fs-petit); }
.hero-reperes li { display: flex; align-items: center; gap: 0.6rem; }
.hero-reperes li::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border: 1px solid var(--c-garance); transform: rotate(45deg); }
.hero-image .figure { margin: 0; }
.hero-franges { display: block; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='28' viewBox='0 0 12 28'%3E%3Cpath d='M3 0v4M9 0v4' stroke='%23DAC09F' stroke-width='1.4'/%3E%3Cpath d='M3 4c0 2 3 2 3 4M9 4c0 2-3 2-3 4' stroke='%23DAC09F' stroke-width='1.4' fill='none'/%3E%3Cpath d='M5.3 8v20M6.7 8v20' stroke='%23DAC09F' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 12px 28px repeat-x; }
@media (min-width: 64rem) {
  .hero-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); padding-block: var(--esp-8) var(--esp-9); }
}
@media (max-width: 47.99rem) {
  .hero-grille { padding-block: var(--esp-6) var(--esp-7); }
  .hero .actions .bouton { flex: 1 1 12rem; }
}

/* ---------- Images et emplacements ---------- */
.figure { margin: var(--esp-7) 0; }
.figure img { width: 100%; border-radius: var(--r-image); box-shadow: var(--ombre-tapis); background: var(--c-laine); }
.figure--portrait { max-width: 28rem; }
.figure--logo { max-width: 200px; margin-inline: 0; }
.figure--logo img { box-shadow: none; background: none; }
.legende { margin-top: var(--esp-3); font-size: var(--fs-petit); font-style: italic; color: var(--c-nuit-doux); line-height: 1.45; }
.r-16-9 { aspect-ratio: 16 / 9; } .r-4-5 { aspect-ratio: 4 / 5; } .r-3-2 { aspect-ratio: 3 / 2; }
.r-4-3 { aspect-ratio: 4 / 3; } .r-3-4 { aspect-ratio: 3 / 4; } .r-1-1 { aspect-ratio: 1; } .r-2-3 { aspect-ratio: 2 / 3; }
/* Visuel en attente de génération : un champ de tapis bleu nuit (chaîne et trame), cadre or et médaillon losangé */
.visuel-attente {
  position: relative; display: grid; place-items: center; overflow: hidden; width: 100%;
  background: var(--tex-trame), var(--c-nuit); color: var(--c-lin); box-shadow: var(--ombre-tapis);
}
.visuel-attente::before {
  content: ""; position: absolute; inset: clamp(8px, 3%, 20px);
  border: 1px solid var(--c-or); outline: 1px solid rgba(170, 116, 44, 0.45); outline-offset: -7px; pointer-events: none;
}
.visuel-attente::after {
  content: ""; position: absolute; width: min(30%, 10rem); aspect-ratio: 1;
  border: 1px solid rgba(170, 116, 44, 0.75); transform: rotate(45deg); pointer-events: none;
}
.visuel-attente figcaption { position: relative; z-index: 1; max-width: min(78%, 22rem); text-align: center; font-size: var(--fs-petit); line-height: 1.5; padding: var(--esp-4); }
.visuel-attente .placeholder { color: var(--ph-texte-sombre); background: var(--ph-fond-sombre); border-color: var(--ph-bord-sombre); }
@media (max-width: 47.99rem) { .visuel-attente--hero { aspect-ratio: 4 / 5; } }

/* ---------- Texte rédigé ---------- */
.prose { max-width: var(--conteneur-texte); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 1.9em; }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--c-or); }
.prose ol li::marker { color: var(--c-garance); font-weight: var(--fw-texte-fort); }
.prose blockquote { margin: var(--esp-6) 0; padding-left: var(--esp-5); border-left: 2px solid var(--c-or); font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--esp-6) 0; font-size: var(--fs-petit); }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--c-filet); vertical-align: top; }
.prose .cartes { margin-block: var(--esp-6); }
.prose--apres { margin-top: var(--esp-8); }
.lien-index { margin-top: var(--esp-6); }
.lien-index a { display: inline-block; padding-block: 11px; }   /* audit 24/10 : zone tactile ≥ 44 px */

/* ---------- Mise en page prestation : texte 7 col. + fiche 4 col. ---------- */
.mise-en-page-prestation { display: grid; gap: var(--esp-8); }
@media (min-width: 64rem) {
  .mise-en-page-prestation { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
  .fiche { position: sticky; top: var(--esp-5); }
}
.fiche { padding: 0 var(--esp-5) var(--esp-5); border: 1px solid var(--c-filet); }
.fiche > .bande-bordure { margin: 0 calc(-1 * var(--esp-5)) var(--esp-4); }
.fiche-titre { font-weight: var(--fw-texte-fort); font-size: var(--fs-chapo); line-height: 1.25; margin-bottom: var(--esp-3); }
.fiche-liste { list-style: none; padding: 0; margin: 0 0 var(--esp-5); font-size: var(--fs-petit); }
.fiche-liste li { padding-block: 0.45rem; border-bottom: 1px solid rgba(130, 86, 28, 0.25); }
.fiche-liste a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.6rem; }
.fiche .bouton { width: 100%; }
.fiche-tel { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: var(--esp-2); font-weight: var(--fw-texte-fort); font-variant-numeric: lining-nums tabular-nums; }
.fiche-retour { margin: var(--esp-3) 0 0; font-size: var(--fs-petit); }
.fiche-retour a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Cartes de liens ---------- */
.cartes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--esp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.carte-lien { position: relative; display: flex; flex-direction: column; background: var(--c-blanc); border: 1px solid var(--c-filet); padding: 0 var(--esp-5) var(--esp-5); transition: border-color var(--duree-courte) var(--courbe); }
.carte-lien > .bande-bordure { margin: 0 calc(-1 * var(--esp-5)) var(--esp-4); }
.carte-titre { font-size: 1.25rem; margin: 0 0 var(--esp-2); }
.carte-titre a { color: var(--c-nuit); text-decoration: none; }
.carte-titre a::after { content: ""; position: absolute; inset: 0; }
.carte-lien p { font-size: var(--fs-petit); color: var(--c-nuit-doux); line-height: 1.5; margin: 0; }
.carte-lien:hover { border-color: var(--c-or); }
.carte-lien:hover .carte-titre a { text-decoration: underline; text-decoration-color: var(--c-or); text-underline-offset: 0.2em; }
.carte-lien:focus-within { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.carte-titre a:focus-visible { outline: none; }
@media (hover: none) { .carte-lien:hover { border-color: var(--c-filet); } .carte-lien:hover .carte-titre a { text-decoration: none; } }
.section--prestations .cartes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.section--suite { border-top: 1px solid var(--c-filet); padding-top: var(--esp-8) !important; }

/* ---------- Index des prestations ---------- */
.index-prestations { list-style: none; padding: 0; margin: var(--esp-7) 0 0; display: grid; gap: var(--esp-6); }
@media (min-width: 48rem) { .index-prestations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.index-prestation { background: var(--c-blanc); border: 1px solid var(--c-filet); padding: 0 var(--esp-6) var(--esp-5); }
.index-prestation > .bande-bordure { margin: 0 calc(-1 * var(--esp-6)) var(--esp-5); }
.index-titre { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
.index-titre a { color: var(--c-nuit); text-decoration-color: var(--c-or); }
.index-prestation > p { font-size: var(--fs-petit); color: var(--c-nuit-doux); }
.index-sous { list-style: none; padding: 0; margin: var(--esp-4) 0 0; border-top: 1px solid var(--c-filet); }
.index-sous li { border-bottom: 1px solid var(--c-filet); }
.index-sous a { display: flex; align-items: center; min-height: 44px; padding-block: 0.3rem; font-size: var(--fs-petit); }

/* ---------- Zone d’intervention ---------- */
.zones { margin-top: var(--esp-8); }
.zones-liste { list-style: none; padding: 0; margin: var(--esp-5) 0 0; display: grid; gap: 0 var(--esp-7); }
@media (min-width: 48rem) { .zones-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .zones-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zone { padding-block: var(--esp-4) var(--esp-3); border-top: 1px solid var(--c-filet); }
.zone-nom { margin: 0 0 var(--esp-2); font-size: 1.25rem; display: flex; align-items: center; gap: 0.6rem; }
.zone-nom::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; background: var(--c-garance); transform: rotate(45deg); }
.zone p { font-size: var(--fs-petit); line-height: 1.55; color: var(--c-nuit-doux); margin: 0; }

/* ---------- FAQ ---------- */
.faq { margin-top: var(--esp-8); max-width: var(--conteneur-texte); }
.page--faq .faq { margin-top: 0; }
.faq-groupe + .faq-groupe { margin-top: var(--esp-7); }
.faq-groupe-titre { margin-bottom: var(--esp-4); }
.faq-item { border-top: 1px solid var(--c-filet); }
.faq-item:last-child { border-bottom: 1px solid var(--c-filet); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); min-height: 3.25rem; padding-block: var(--esp-3);
  cursor: pointer; list-style: none; font-weight: var(--fw-texte-fort); font-size: 1.1875rem; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-right: 1.5px solid var(--c-garance); border-bottom: 1.5px solid var(--c-garance); transform: rotate(45deg) translateY(-25%); }
.faq-item[open] summary::after { transform: rotate(225deg); }
.faq-reponse { padding-bottom: var(--esp-4); }
.faq-reponse p { margin-bottom: 0.7em; }

/* ---------- Bloc d’appel à l’action ---------- */
.cta { position: relative; margin-top: var(--esp-section); }
.cta-corps { max-width: var(--conteneur); margin-inline: auto; padding: var(--esp-8) var(--gouttiere); }
.cta-titre { color: var(--c-laine); }
.cta p { max-width: var(--mesure-etroite); font-size: var(--fs-chapo); line-height: var(--lh-chapo); font-style: italic; }
.section--corps + .cta, .section--suite + .cta { margin-top: 0; }

/* ---------- Réalisations ---------- */
.filtres { margin: var(--esp-7) 0 var(--esp-5); }
.filtres-titre { font-weight: var(--fw-texte-fort); margin-bottom: var(--esp-3); }
.filtres-boutons { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.filtre {
  min-height: 44px; padding: 0.4rem 1rem; border: 1px solid var(--c-nuit-doux); border-radius: var(--r-controle);
  background: var(--c-blanc); color: var(--c-nuit); font: inherit; font-size: 1rem; cursor: pointer;
}
.filtre[aria-pressed="true"] { background: var(--c-nuit); color: var(--c-lin); border-color: var(--c-nuit); }
.filtres-compte { margin-top: var(--esp-3); font-size: var(--fs-petit); font-style: italic; color: var(--c-nuit-doux); }
.realisations { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--esp-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.realisation .figure { margin: 0 0 var(--esp-3); }
.realisation-titre { font-family: var(--font-texte); font-weight: var(--fw-texte-fort); font-size: 1.25rem; margin: var(--esp-3) 0 var(--esp-2); letter-spacing: 0; }
.realisation-infos { display: grid; gap: 0.2rem; font-size: var(--fs-petit); }
.realisation-infos div { display: flex; gap: 0.5rem; }
.realisation-infos dt { color: var(--c-nuit-doux); }
.realisation-infos dt::after { content: " :"; }
.realisation-infos dd { margin: 0; }

/* ---------- Contact et formulaire ---------- */
.contact-grille { display: grid; gap: var(--esp-8); }
@media (min-width: 64rem) { .contact-grille { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: start; } }
.contact-aside { font-size: var(--fs-petit); }
.contact-aside h2 { font-size: 1.375rem; margin-top: 1.6em; }
.contact-aside h2:first-child { margin-top: 0; }
.devis { max-width: 44rem; }
.devis-avancement { font-size: var(--fs-petit); font-style: italic; color: var(--c-nuit-doux); margin-bottom: var(--esp-3); }
.devis-etape { margin: 0 0 var(--esp-7); padding: 0; border: 0; min-width: 0; }
.devis-etape:focus { outline: none; }
.devis-legende { font-family: var(--font-titre); font-weight: var(--fw-titre); font-size: var(--fs-h2); line-height: var(--lh-titre); letter-spacing: var(--ls-titre); padding: 0; margin-bottom: var(--esp-5); }
.devis-choix { margin: 0 0 var(--esp-6); padding: 0; border: 0; min-width: 0; }
.devis-choix legend { font-weight: var(--fw-texte-fort); padding: 0; margin-bottom: var(--esp-3); }
.choix-grille { display: grid; gap: var(--esp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.choix {
  position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.75rem 1rem;
  background: var(--c-blanc); border: 1px solid var(--c-filet); cursor: pointer; font-size: 1.0625rem; line-height: 1.3;
}
.choix input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--c-garance); }
.choix:hover { border-color: var(--c-or); }
.choix:has(input:checked) { border-color: var(--c-garance); box-shadow: inset 0 0 0 1px var(--c-garance); background: var(--ph-fond-clair); }
.choix:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.choix input:focus-visible { outline: none; }
.champ { margin-bottom: var(--esp-5); }
.champ label { display: block; font-weight: var(--fw-texte-fort); margin-bottom: var(--esp-2); line-height: 1.35; }
.facultatif { font-weight: var(--fw-texte); font-style: italic; color: var(--c-nuit-doux); }
.aide { font-size: var(--fs-petit); color: var(--c-nuit-doux); line-height: 1.45; margin: calc(-1 * var(--esp-1)) 0 var(--esp-2); }
.champ input[type="text"], .champ input[type="tel"], .champ input[type="email"], .champ select, .champ textarea {
  display: block; width: 100%; min-height: 3rem; padding: 0.6rem 0.8rem;
  font: inherit; font-size: 1.0625rem; line-height: 1.4; color: var(--c-nuit);
  background: var(--c-blanc); border: 1px solid var(--c-nuit-doux); border-radius: var(--r-controle);
}
.champ textarea { resize: vertical; min-height: 7rem; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.champ [aria-invalid="true"] { border-color: var(--c-garance); box-shadow: inset 0 0 0 1px var(--c-garance); }
.champ--case { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; align-items: start; }
.champ--case input { width: 1.5rem; height: 1.5rem; margin: 0.15rem 0 0; accent-color: var(--c-garance); }
.champ--case label { font-weight: var(--fw-texte); margin: 0; }
.champ--case label a { display: inline; }
.champ--case .erreur { grid-column: 1 / -1; }
.erreur { margin: var(--esp-2) 0 0; color: var(--c-garance-sombre); font-size: var(--fs-petit); font-weight: var(--fw-texte-fort); }
.erreur:empty { display: none; }
.devis-photos { font-size: var(--fs-petit); font-style: italic; color: var(--c-nuit-doux); max-width: var(--mesure); }
.devis-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); margin-top: var(--esp-5); }
.devis-statut:empty { display: none; }
.devis-statut { margin: 0 0 var(--esp-5); padding: var(--esp-4); border: 1px solid var(--c-garance); background: var(--ph-fond-clair); color: var(--c-garance-sombre); }
.devis-statut p { margin: 0; }
.devis-mention { font-size: var(--fs-mention); color: var(--c-nuit-doux); line-height: 1.5; max-width: var(--mesure); }
.piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pied de page ---------- */
.pied { position: relative; margin-top: 0; padding-bottom: 0; }
.pied-grille { display: grid; gap: var(--esp-7); padding-block: var(--esp-8) var(--esp-6); }
@media (min-width: 64rem) { .pied-grille { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.pied-marque img { width: 120px; height: 120px; margin-bottom: var(--esp-4); }
.pied-nom { font-family: var(--font-titre); font-weight: var(--fw-titre-fort); font-size: 1.25rem; letter-spacing: 0.03em; color: var(--c-laine); margin-bottom: var(--esp-2); }
.pied-tel a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.25rem; font-weight: var(--fw-texte-fort); font-variant-numeric: lining-nums tabular-nums; }
.pied-zone { font-size: var(--fs-petit); color: var(--c-laine); max-width: 26rem; }
.pied-nav { display: grid; gap: var(--esp-6); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.pied-titre { font-family: var(--font-texte); font-weight: var(--fw-texte-fort); color: var(--c-laine); margin-bottom: var(--esp-2); }
.pied-nav ul { list-style: none; padding: 0; margin: 0; }
.pied-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-petit); }
.pied-bas { padding-block: var(--esp-5) var(--esp-6); border-top: 1px solid rgba(170, 116, 44, 0.4); font-size: var(--fs-mention); color: var(--c-laine); }
.pied-bas p { margin: 0 0 0.4em; max-width: none; }
.pied .bande-franges { margin-top: 0; }

/* ---------- Mouvement réduit (aucune animation dans ce fichier ; la Phase 4 doit s’y conformer) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Ajustements après relecture des captures (21/10) ---------- */
.page--accueil .entete > .bande-bordure { display: none; }
.tete-page + .section { padding-top: var(--esp-7); }
@media (min-width: 64rem) {
  .tete-grille--seule { grid-template-columns: minmax(0, 1fr); }
  .hero-grille { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .hero-titre { max-width: 15ch; }
}
.fiche-tel { font-size: var(--fs-petit); }
.choix-grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.75rem), 1fr)); }
@media (min-width: 48rem) { .choix-grille { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } }
.choix { min-height: 3.25rem; padding: 0.6rem 0.8rem; }

/* Blocs de texte : sur ordinateur, le titre de section passe dans la marge de gauche (4 colonnes) et reste visible */
.bloc > h2 { margin-top: 0; }
.bloc + .bloc { margin-top: var(--esp-8); }
.bloc-corps > :last-child { margin-bottom: 0; }
@media (min-width: 64rem) {
  .prose--marge { max-width: none; }
  .prose--marge > .bloc, .page--faq .faq-groupe {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2.5rem, 5vw, 6rem); align-items: start;
  }
  .prose--marge > .bloc > h2, .page--faq .faq-groupe-titre { grid-column: 1; position: sticky; top: var(--esp-5); margin: 0; font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2rem); }
  .prose--marge .bloc-corps, .page--faq .faq-questions { grid-column: 2; max-width: var(--mesure); }
  .prose--marge .bloc-corps .cartes { max-width: none; }
  .page--faq .faq { max-width: none; }
}

/* Bloc CTA placé par un rédacteur dans le texte ([[cta]]) */
.prose .cta { margin: var(--esp-7) 0; }
.prose .cta-corps { padding: var(--esp-6) var(--esp-5); }
.prose .cta p { font-size: var(--fs-texte); }

/* Repères du hero : losange + texte (le lien reste dans la phrase) */
.hero-reperes li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0.7rem; }
.hero-reperes li::before { transform: rotate(45deg) translateY(-0.1em); }

/* ---------- Retours d'Anthony du 22/10 ---------- */
/* Point 1 : le sous-menu « Prestations » s'ouvre sous la bande de motif de l'en-tête, au premier plan, fond plein. */
@media (min-width: 64rem) {
  .nav-item--sous { position: static; }               /* le sous-menu se place par rapport à l'en-tête entier */
  .sous-menu { top: 100%; left: auto; z-index: 5; }   /* left:auto = aligné sous « Prestations » (position statique) */
  .page--accueil .sous-menu { top: calc(100% + 16px); } /* accueil : la bande est celle du hero, juste sous l'en-tête */
  .sous-menu::before {                                /* pont invisible : le survol ne se perd pas en traversant la bande */
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 3rem;
  }
}

/* Point 2 : le logo devient un médaillon, plus grand, posé sur la bande de motif sans agrandir la barre. */
.marque { position: relative; padding-left: calc(72px + 0.85rem); min-height: 44px; }
.marque-medaillon {
  position: absolute; left: 0; top: 50%; width: 72px; height: 72px; margin-top: -26px; z-index: 6;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px var(--c-lin), 0 0 0 4px var(--c-or), var(--ombre-2);
}
.marque .marque-medaillon img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.marque-nom { font-size: 1.125rem; }
@media (min-width: 64rem) {
  .marque { padding-left: calc(112px + 1.1rem); }
  .marque-medaillon { width: 112px; height: 112px; margin-top: -32px; }
  .marque-nom { font-size: 1.5rem; max-width: 10em; }
}
@media (min-width: 64rem) and (max-width: 74rem) {      /* écrans moyens : la navigation garde sa place */
  .marque-nom { font-size: 1.25rem; }
}
/* Point 2 (suite) : la navigation reste sur une ligne malgré le médaillon plus grand. */
@media (min-width: 64rem) {
  .nav-item > a, .entete-tel, .entete-devis { white-space: nowrap; }
  .nav-item > a { padding-inline: 0.5rem; font-size: 1rem; }
  .entete-barre { gap: var(--esp-4); }
}
/* Point 2 (suite) : le nom tient toujours sur deux lignes (« L'Atelier du » / « Tapis d'Orient ») et ne se fait pas écraser. */
.marque { flex: none; }
.marque-ligne { display: block; white-space: nowrap; }
@media (min-width: 64rem) and (max-width: 74rem) { .marque-nom { font-size: 1.125rem; } }


/* ==========================================================================
   Visuels (23/10/2026) : dessins SVG, vignettes des photos réelles, cartes des réalisations.
   Feuille à part de site.css (concaténée après elle par tools/build.py) ; ne touche pas à l’en-tête.
   Réserves des photos (assets-src/photos/manifest.json) : jamais plein écran, jamais au-delà de la largeur native,
   groupe D (images extraites de vidéos) en vignette seulement.
   ========================================================================== */

/* Dessins : le SVG occupe la largeur de son emplacement ; ratio donné par width/height (et <source> sous 48rem pour le hero). */
.figure--dessin img { width: 100%; height: auto; }

/* Vignettes du groupe D : 14,5rem au plus (232 px), soit moins de la moitié de leur largeur native (464 à 576 px). */
.figure--vignette { max-width: 14.5rem; }
.figure--vignette .legende { font-size: var(--fs-mention, var(--fs-petit)); }

/* [[image:a,b]] : vignettes côte à côte, deux colonnes même à 360 px */
.groupe-images {
  display: grid; gap: var(--esp-4); margin: var(--esp-7) 0;
  grid-template-columns: repeat(2, minmax(0, 14.5rem)); justify-content: start; align-items: start;
}
.groupe-images .figure { margin: 0; max-width: none; }

/* Réalisations : cadre carré (passe-partout couleur laine), photo contenue entière, jamais recadrée ni agrandie. */
.realisation-photo {
  position: relative; aspect-ratio: 1; width: 100%;
  background: var(--c-laine); border-radius: var(--r-image); box-shadow: var(--ombre-tapis); overflow: hidden;
}
.realisation-photo picture { position: absolute; inset: var(--esp-3); }
.realisation-photo--vignette picture { inset: var(--esp-6) 18%; }    /* groupe D : vignette, plus petite que le cadre */
.realisation .realisation-photo img {
  width: 100%; height: 100%; object-fit: contain; box-shadow: none; background: none; border-radius: 0;
}
.realisation-texte { margin: var(--esp-3) 0 0; }
.realisation-accord { margin: var(--esp-2) 0 0; font-size: var(--fs-petit); }