/* =========================================================
   Muato Studio — feuille de style unique
   Base blanche, image reine, un seul accent.
   ========================================================= */

/* --- Typographie, choisie par Nicolas le 5 octobre 2026 : Poppins SemiBold pour les titres, le menu, les boutons et les
   étiquettes en capitales ; Hind Regular pour le texte courant (Google Fonts, licence OFL).
   Les polices passent par trois variables en tête de :root : --famille-titres (titres de section et de prestation),
   --famille (texte courant), --famille-hero (titre du hero, menu, boutons, étiquettes du devis).
   Essais écartés le même jour, récupérables dans le commit 5f93fe3 : Satoshi, General Sans, Plein + Switzer, Chillax + Synonym.
   Avant : Inter partout, repris de thirdaesthetic.com ; il reste en police de secours, ses fichiers sont dans fonts/.
   size-adjust : Hind est dessiné plus petit qu'Inter à taille égale ; le texte courant est grossi de 12 % d'un coup,
   sans toucher aux tailles ni aux espacements. C'est LE réglage pour grossir ou réduire tout le texte.
   --- */
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Variable.woff2') format('woff2'), url('../fonts/Inter-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
/* Poppins et Hind : deux fichiers par graisse, le latin courant et le latin étendu (le ō de Muatō est dans le second).
   Poppins : le SemiBold répond à toutes les graisses, sans grossissement (il est déjà dessiné grand). Hind : Regular et Bold, grossis de 12 %. */
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'); font-weight: 100 900; font-display: swap; 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: 'Poppins'; src: url('../fonts/Poppins-SemiBold-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hind'; src: url('../fonts/Hind-Regular.woff2') format('woff2'); font-weight: 100 500; font-display: swap; size-adjust: 112%; 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: 'Hind'; src: url('../fonts/Hind-Regular-ext.woff2') format('woff2'); font-weight: 100 500; font-display: swap; size-adjust: 112%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hind'; src: url('../fonts/Hind-Bold.woff2') format('woff2'); font-weight: 600 900; font-display: swap; size-adjust: 112%; 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: 'Hind'; src: url('../fonts/Hind-Bold-ext.woff2') format('woff2'); font-weight: 600 900; font-display: swap; size-adjust: 112%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }


:root {
  --famille-titres: 'Poppins';
  --famille: 'Hind';
  --famille-hero: 'Poppins';
  --bg: #f5f4f2;          /* gris chaud clair, repris de thirdaesthetic.com (ancien fond crème : #fefaef) */
  --font-titre: var(--famille-titres), 'Inter', "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ink: #1c1b19;         /* noir doux */
  --ink-2: #5e5a54;       /* texte secondaire */
  --ink-3: #9a948c;       /* légendes */
  --line: rgba(28, 27, 25, 0.1);
  --accent: #9a5a2e;      /* bronze discret, seul accent du site */

  --font: var(--famille), 'Inter', "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-menu: var(--famille-hero), 'Inter', "Helvetica Neue", Helvetica, Arial, sans-serif;   /* menu et boutons : sans le grossissement de 12 % */

  --gutter: clamp(1rem, 4vw, 3.5rem);
  /* contenu : 60 px plus étroit que la navbar à partir de 900 px ; le retrait fond ensuite jusqu'à 0 à 400 px,
     pour ne pas manger la largeur des téléphones */
  --gutter-contenu: calc(var(--gutter) + clamp(0px, 12vw - 3rem, 60px));
  --max: 1680px;
  --nav-h: 3.5rem;
  --btn-h: 2.5rem;     /* hauteur de tous les boutons ; 2.75rem (44 px) sur écran tactile, voir en fin de fichier */

  /* Échelle d'espacement : tout padding, marge ou écart fixe du site prend une de ces dix valeurs */
  --sp-1: 0.25rem;   /*  4 px */
  --sp-2: 0.5rem;    /*  8 px */
  --sp-3: 0.75rem;   /* 12 px */
  --sp-4: 1rem;      /* 16 px */
  --sp-5: 1.25rem;   /* 20 px */
  --sp-6: 1.5rem;    /* 24 px */
  --sp-7: 2rem;      /* 32 px */
  --sp-8: 2.5rem;    /* 40 px */
  --sp-9: 3rem;      /* 48 px */
  --sp-10: 4rem;     /* 64 px */

  /* Rythme commun à toutes les sections et à toutes les pages (valeurs fluides) */
  --section-y: clamp(3rem, 8vw, 7rem);      /* espace entre deux sections : 48 px sur téléphone, 112 px sur grand écran */
  --head-gap: clamp(1.75rem, 3vw, 2.75rem); /* entre l'en-tête d'une section et son contenu */
  --card-pad: clamp(1.25rem, 3vw, 2rem);    /* marge intérieure des cartes blanches (avis, devis) */
  --grid-gap: clamp(0.75rem, 1.6vw, 1.5rem); /* écart des grilles d'images et de cartes */
  --ancre: calc(var(--nav-h) + 2rem);       /* arrivée sur une ancre : le titre se pose 36 px sous la navbar, sur tous les écrans */
  --text: 0.9375rem;                      /* texte courant (15 px, comme thirdaesthetic.com) */

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;   /* pas de rectangle bleu ou gris au toucher sur mobile */
  -webkit-font-smoothing: antialiased;
}
/* Défilement doux activé après le chargement (js/site.js) : l'arrivée sur une ancre depuis une autre page reste directe */
html.defile-doux { scroll-behavior: smooth; }
/* Changement de page : fondu enchaîné entre l'ancienne et la nouvelle (Chrome, Edge, Safari ; ailleurs, navigation normale) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
/* Arrivée sur une ancre : page cachée jusqu'au placement (index.html, js/site.js) */
html.ancre-attente body { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  html.defile-doux { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; }
}

body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; font-size: 1rem; letter-spacing: -0.005em; }
main { flex: 1; }
.main-offset { padding-top: calc(var(--nav-h) + 3rem); }
/* Ancre : on arrive sur le titre, pas sur le filet ni l'espace au-dessus */
.section-anchor { scroll-margin-top: var(--ancre); }

img, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 700; }

/* Pas de contour de focus ni de rectangle coloré au toucher (choix de Nicolas). Il reste les repères propres à chaque élément :
   soulignement des liens, voile des vignettes, fond du bouton « Joindre un fichier », bordure foncée des champs. */
:focus, :focus-visible { outline: none; }
::selection { background: var(--ink); color: var(--bg); }

/* --- Accessibilité --- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 200; padding: 0.6rem 1rem; background: var(--ink); color: var(--bg); border-radius: 999px; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* --- Rythme typographique --- */
.t-display { font-family: var(--famille-hero), var(--font-titre); font-size: clamp(2.4rem, 5vw, 5.4rem); line-height: 1.15; /* 1 avec Inter ; en Poppins, la jambe du p touchait la hampe du h de la ligne suivante */ letter-spacing: -0.04em; font-weight: 700; text-wrap: balance; }
/* téléphone : le titre du hero descend jusqu'à 32 px à 320 px de large (même taille qu'avant à partir de 416 px) */
/* téléphone : Poppins SemiBold est large, « l’architecture » doit tenir sur une ligne à 320 px */
@media (max-width: 600px) { .t-display { font-size: clamp(1.6rem, 7.4vw, 2.2rem); } }
.t-title { font-family: var(--font-titre); font-size: 1.0625rem; line-height: 1.4; letter-spacing: 0.02em; font-weight: 700; text-transform: uppercase; }
.t-body { font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.measure-wide { max-width: 46em; }
.todo { color: var(--accent); }   /* marqueur « à compléter » visible en relecture */

/* Échelle de la page d'accueil : t-display pour le hero seul, t-h2 pour tous les titres de section */
/* Titres de section : petits, en capitales, comme les noms de projets de thirdaesthetic.com */
.t-h2 { font-family: var(--font-titre); font-size: 1.5rem; line-height: 1.4; letter-spacing: 0.02em; font-weight: 700; text-transform: uppercase; }
.prose { max-width: 62ch; font-size: var(--text); line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.prose > * + * { margin-top: var(--sp-4); }
.prose ul { padding-left: var(--sp-5); list-style: disc; }
.prose li + li { margin-top: var(--sp-1); }
.prose a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* --- Mise en page --- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter-contenu); }
/* Sections de l'accueil (bande de logos comprise) : un seul espace, --section-y, porté par la marge du haut.
   Entre deux sections il n'y a donc jamais plus que --section-y, du hero au pied de page.
   En marge et non en padding : l'ancre du menu arrive sur le titre, pas sur l'espace au-dessus.
   La dernière section ajoute le même espace avant le pied de page. */
.section, .logos { margin-top: var(--section-y); }
/* première section, juste sous le hero : 24 px seulement, valeur choisie par Nicolas */
.hero + .section { margin-top: var(--sp-6); }
main > .section:last-child { padding-bottom: var(--section-y); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4) var(--sp-7); margin-bottom: var(--head-gap); }
.stack > * + * { margin-top: var(--sp-4); }

/* --- Liens et boutons --- */
.link { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; letter-spacing: -0.01em; }
.link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease); }
.link:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .link:hover::after { transform: scaleX(1); } }
/* Flèche des liens : dessinée (un trait et une pointe), pas écrite en caractère. Le caractère → ou ← reste dans la page,
   masqué par font-size: 0 ; le dessin prend la couleur du lien et reste le même quelle que soit la police.
   Flèche vers la gauche : classe arrow-retour (liens « ← Nos prestations » et « ← Retour à l'accueil »). */
.link .arrow { display: inline-block; flex: none; width: 1rem; height: 0.75rem; font-size: 0; background: currentColor; transition: transform var(--t-fast) var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M0 6h14M9.5 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M0 6h14M9.5 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat; }
.link .arrow-retour {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M16 6H2M6.5 1l-5 5 5 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M16 6H2M6.5 1l-5 5 5 5'/%3E%3C/svg%3E"); }
@media (hover: hover) and (pointer: fine) { .link:hover .arrow { transform: translateX(3px); } }

/* Bouton du hero « Estimer mon projet » : dessin d'origine, blanc sur la photo, noir au survol */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 2.9rem; padding: 0.7rem 1.35rem; border-radius: 999px; font-family: var(--font-menu); font-weight: 700; letter-spacing: -0.01em; line-height: 1; background: var(--ink); color: var(--bg); white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #000; } }
.btn-light { background: #fff; color: var(--ink); border: 0.5px solid rgba(28, 27, 25, 0.12); }
@media (hover: hover) and (pointer: fine) { .btn-light:hover { background: var(--ink); color: #fff; } }
.btn-light:active { background: #000; color: #fff; }

/* --- Boutons : un seul gabarit, deux versions ---
   Gabarit : pilule, hauteur --btn-h, petites capitales grasses. Pour ajouter un bouton, l'inscrire dans la liste
   du gabarit et dans celle de sa version ; ne réécrire ces propriétés nulle part ailleurs.
   Principal (plein, noir) : .dv-submit (envoi du devis).
   Le bouton du hero (.btn, .btn-light) garde son dessin d'origine, hors gabarit : Nicolas ne veut pas qu'on y touche.
   Secondaire (contour fin, fond teinté) : .nav-cta (navbar), .chip (filtres), .voir-plus (sous la grille), .dv-file-cta (joindre un fichier), .dv-btn (+ / −).
   Teinte du secondaire : couleur --c-glass, dosée par --btn-teinte (sa part dans le fond). */
.dv-submit, .nav-cta, .chip, .dv-file-cta, .voir-plus {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--btn-h); padding: 0 var(--sp-4); border-radius: 999px; border: 0.5px solid transparent;
  font-family: var(--font-menu); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; white-space: nowrap;
  transition: background-color var(--t-fast), opacity var(--t-fast);
}
/* Principal */
.dv-submit { background-color: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .dv-submit:hover:not(:disabled) { background-color: #000; } }
.dv-submit { width: 100%; margin-top: var(--sp-6); }
.dv-submit:disabled { opacity: 0.4; cursor: default; }
/* Secondaire */
.nav-cta, .chip, .dv-file-cta, .dv-btn, .voir-plus { --btn-teinte: 36%; color: var(--ink); background-color: color-mix(in srgb, var(--c-glass) var(--btn-teinte), transparent); border: 0.5px solid rgba(28, 27, 25, 0.12); }
@media (hover: hover) and (pointer: fine) { .nav-cta:hover, .dv-file:hover .dv-file-cta, .dv-btn:hover:not(:disabled), .voir-plus:hover { --btn-teinte: 60%; } }
.dv-file input:focus-visible + .dv-file-cta { --btn-teinte: 60%; }
/* filtres : fond clair au repos, plus dense quand le filtre est actif */
.chip { --btn-teinte: 12%; }
@media (hover: hover) and (pointer: fine) { .chip:hover { --btn-teinte: 24%; } }
.chip.is-active { --btn-teinte: 70%; }
/* + / − du devis : la version secondaire, en rond */
.dv-btn { position: relative; width: var(--btn-h); height: var(--btn-h); border-radius: 50%; font-size: 0; touch-action: manipulation; transition: background-color var(--t-fast), opacity var(--t-fast); }
/* le + et le − sont dessinés en traits, pas écrits en caractères : leur centrage ne dépend plus de la police (le caractère est masqué par font-size: 0) */
.dv-btn::before, .dv-btn[data-plus]::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0.75rem; height: 2px; margin: -1px 0 0 -0.375rem; border-radius: 1px; background: currentColor; }
.dv-btn[data-plus]::after { transform: rotate(90deg); }
.dv-btn:disabled { opacity: 0.35; cursor: default; }
/* « Joindre un fichier » : le clic est reçu par le champ invisible posé dessus */
.dv-file-cta { pointer-events: none; }

/* =========================================================
   Navigation : fixe en haut, verre translucide flouté
   ========================================================= */
.nav-root { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: var(--sp-3) var(--gutter) 0; pointer-events: none; }
/* Teinte gris chaud (pastille du menu, boutons secondaires) et saturation du verre dépoli de la navbar */
:root { --c-glass: #d0cbc0; /* l'ancienne crème #dccaa6 désaturée à 70 %, même clarté (gris neutre : #cbcbcb) */ --saturation: 150%; }
.nav-glass {
  pointer-events: auto; position: relative;
  max-width: var(--max); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: var(--nav-h); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4); border-radius: 99em;
  border: 0.5px solid transparent;
}
/* Verre dépoli plat : fond blanc pour la lisibilité, flou, bordure fine, sans reflets.
   Il est porté par un calque à part, pas par la pilule elle-même : un flou posé sur le parent empêcherait
   le menu mobile, qui est dedans, d'avoir le sien (il serait transparent, sans flou). */
.nav-glass::before {
  content: ''; position: absolute; inset: -0.5px; border-radius: inherit;
  background-color: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation)); backdrop-filter: blur(8px) saturate(var(--saturation));
  border: 0.5px solid rgba(28, 27, 25, 0.12);
}
.nav-glass > * { position: relative; }

.brand { display: inline-flex; align-items: center; }
.brand img { height: 1.85rem; width: auto; transition: opacity var(--t-fast); }
@media (hover: hover) and (pointer: fine) { .brand:hover img { opacity: 0.55; } }

.nav-links ul { position: relative; display: flex; align-items: center; gap: var(--sp-1); }
/* Pastille qui glisse derrière l'entrée active : ressort à l'arrivée, léger gonflement pendant le trajet */
.nav-pill {
  position: absolute; top: 0; left: 0; height: 2.5rem; width: 0; border-radius: 99em;
  background-color: color-mix(in srgb, var(--c-glass) 10%, transparent); border: 0.5px solid rgba(28, 27, 25, 0.12);
  opacity: 0; pointer-events: none; z-index: 0; transform-origin: center;
  transform: translateX(var(--x, 0px)) scale(var(--sx, 1), var(--sy, 1));
  transition: transform 480ms cubic-bezier(0.3, 1.9, 0.45, 1), width 480ms cubic-bezier(0.3, 1.9, 0.45, 1), opacity var(--t-med); will-change: transform, width;
}
.nav-pill.is-on { opacity: 1; }
.nav-link { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-height: 2.5rem; padding: 0 0.9rem; border-radius: 999px; font-family: var(--font-menu); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); transition: color var(--t-fast), background var(--t-fast); }
.nav-link.is-active { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .nav-link:hover { color: var(--ink); } }
@media (max-width: 860px) { .nav-pill { display: none; } .nav-link.is-active { background: rgba(28, 27, 25, 0.05); box-shadow: inset 0 0 0 1px rgba(28, 27, 25, 0.22); } }
.nav-cta-item { margin-left: var(--sp-2); }

.nav-toggle { display: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; align-items: center; justify-content: center; }
.burger { display: block; width: 18px; height: 10px; position: relative; }
.burger i { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform var(--t-med) var(--ease), top var(--t-med) var(--ease); }
.burger i:first-child { top: 0; }
.burger i:last-child { top: 100%; }
.nav-toggle[aria-expanded='true'] .burger i:first-child { top: 50%; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .burger i:last-child { top: 50%; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem); padding: var(--sp-2); border-radius: 1.6rem;
    /* même verre dépoli que la navbar */
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation)); backdrop-filter: blur(8px) saturate(var(--saturation));
    border: 0.5px solid rgba(28, 27, 25, 0.12);
    /* Ouverture en accordéon avec un fondu : le panneau se déroule du haut vers le bas (clip-path), sans rebond */
    opacity: 0; clip-path: inset(0 0 100% 0 round 1.6rem); visibility: hidden;
    transition: opacity var(--t-med) var(--ease), clip-path var(--t-med) var(--ease), visibility 0s linear var(--t-med);
    /* téléphone couché : le menu ne dépasse jamais l'écran, il défile */
    max-height: calc(100svh - var(--nav-h) - 2rem); overflow-y: auto;
  }
  .nav-links.is-open { opacity: 1; clip-path: inset(0 0 0 0 round 1.6rem); visibility: visible; transition-delay: 0s; }
  .nav-links ul { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  /* toute la ligne est cliquable, pas seulement le mot */
  .nav-link { display: flex; justify-content: flex-start; min-height: 3rem; padding: 0 1rem; font-size: 1.05rem; }
  .nav-cta-item { margin: var(--sp-2) 0 0; }
  .nav-cta { width: 100%; min-height: 3rem; justify-content: center; }
}

/* =========================================================
   Accueil
   ========================================================= */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #d9d3c9; color: #fff; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 9, 8, 0.36) 0%, rgba(10, 9, 8, 0.1) 22%, rgba(10, 9, 8, 0) 36%); }
.hero-content { position: absolute; left: 0; right: 0; bottom: clamp(2rem, 6vh, 4.5rem); display: grid; gap: var(--sp-6); }
.hero-title { max-width: 16em; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.15); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5) var(--sp-7); }
.hero-link { color: #fff; }
/* téléphone couché (image de la cuisine) : le titre occupe plus de hauteur, le voile monte avec lui pour qu'il reste lisible */
@media (max-height: 560px) and (orientation: landscape) { .hero-scrim { background: linear-gradient(to top, rgba(10, 9, 8, 0.5) 0%, rgba(10, 9, 8, 0.24) 45%, rgba(10, 9, 8, 0) 72%); } }
/* écran en hauteur (téléphone ou tablette tenus debout) : l'image est la villa de nuit, déjà sombre ; un voile très léger
   suffit sous le texte. Même condition que la balise <picture> du hero dans index.html */
@media (orientation: portrait) { .hero-scrim { background: linear-gradient(to top, rgba(10, 9, 8, 0.26) 0%, rgba(10, 9, 8, 0.1) 28%, rgba(10, 9, 8, 0) 48%); } }
/* téléphone couché : le hero tient dans l'écran, le titre n'est plus sous le pli */
@media (max-height: 560px) and (orientation: landscape) { .hero { min-height: 20rem; } }

/* Logos clients : fichiers recadrés et redessinés en encre du site sur fond transparent (images/clients) */
/* Tailles en em : toute la bande grandit avec l'écran. Chaque ligne s'étire sur toute la largeur du contenu, comme le portfolio.
   Écart minimal de 1em entre deux logos : la ligne de 9 (44,3em de logos) tient ainsi dès 820 px de large, barre de défilement comprise ;
   avec 2em, elle cassait en 8 + 1 sur les portables de 1280 et 1366 px */
.logos-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1em 1em; font-size: clamp(0.75rem, 1.35vw, 1.4rem); }
.logos-break { flex-basis: 100%; height: 0; }   /* force le passage à la 2e ligne après le 7e logo */
.logos-row img { height: var(--h, 2em); width: auto; opacity: 0.72; transition: opacity var(--t-med); }
@media (hover: hover) and (pointer: fine) { .logos-row img:hover { opacity: 1; } }
/* Écran moyen (820 px et moins) : une grille régulière au lieu d'un rangement libre, qui laissait deux logos seuls sur une ligne.
   Les 15 logos sur 3 lignes de 5, mêmes écarts partout. Un logo plus large que sa colonne rétrécit sans se déformer. */
@media (max-width: 820px) {
  .logos-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.8em 1.2em; justify-items: center; align-items: center; }
  .logos-row li { display: flex; justify-content: center; max-width: 100%; }
  /* après la règle ci-dessus, sinon elle réaffiche la coupure de ligne : une case vide qui décale tout */
  .logos-row .logos-break { display: none; }
  .logos-row img { max-width: 100%; object-fit: contain; }
}
/* Téléphone (600 px et moins) : 9 logos seulement, 3 par ligne sur 3 lignes ; les six autres (classe logo-ordi dans index.html)
   ne s'affichent qu'à partir de 601 px */
@media (max-width: 600px) {
  .logos-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos-row .logo-ordi { display: none; }
}

/* =========================================================
   Réalisations : grille masonry (comme le site actuel), images non recadrées
   ========================================================= */
/* Filtres : tous de la même largeur, celle du plus long (colonnes égales) */
.filters { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-2); }
/* Téléphone : les filtres ne tiennent pas sur une ligne ; trois sur la première, deux sur la seconde, centrés,
   tous exactement de la même largeur (un tiers de la ligne) */
@media (max-width: 640px) {
  .filters { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
  .filters .chip { flex: 0 0 calc((100% - 2 * var(--sp-2)) / 3); min-width: 0; padding-inline: var(--sp-2); }
}
/* très petit téléphone : le mot le plus long (« Extérieur ») doit tenir dans un tiers de 288 px */
@media (max-width: 360px) { .filters .chip { font-size: 0.7rem; padding-inline: var(--sp-1); } }
/* Clic : écrasement puis rebond façon gelée */
.chip.is-jelly { animation: chip-jelly 0.5s ease-out; }
@keyframes chip-jelly {
  0% { transform: scale(1, 1); }
  25% { transform: scale(0.94, 0.91); }
  55% { transform: scale(1.04, 1.03); }
  80% { transform: scale(0.99, 1); }
  100% { transform: scale(1, 1); }
}

/* Placement en JavaScript (js/site.js) : colonnes --cols, espacement --gap, durée --masonry-t */
.masonry { --cols: 5; --gap: var(--grid-gap); --masonry-t: 500ms; position: relative; column-gap: var(--gap); transition: height var(--masonry-t) var(--ease); }
.masonry-item { position: absolute; top: 0; left: 0; display: block; width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); cursor: pointer; background: none; /* le fondu part du fond de la page */
  transform: translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1)); opacity: 1;
  transition: transform var(--masonry-t) var(--ease), opacity var(--masonry-t) var(--ease); }
.masonry-item.is-out { --s: 0.8; opacity: 0; pointer-events: none; }
.masonry.no-anim, .masonry.no-anim .masonry-item, .masonry-item.no-anim { transition: none; }
/* Grille coupée (data-rangees, js/site.js) : ce qui dépasse est masqué */
.masonry.is-coupee { overflow: hidden; }
/* bouton « Voir plus d'images », centré sous la grille coupée */
.masonry-plus { display: flex; justify-content: center; margin-top: var(--head-gap); }
/* vignette en fondu à son arrivée (classe posée par js/site.js) */
.masonry-item img { width: 100%; opacity: 0; transition: opacity 1.5s var(--ease); }
.masonry-item img.is-loaded { opacity: 1; }
/* Survol : voile clair uni (couleur du fond à 30 %) */
.masonry-item::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(245, 244, 242, 0.3);
  opacity: 0; transition: opacity var(--t-med) var(--ease); }
.masonry-item:focus-visible::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .masonry-item:hover::before { opacity: 1; } }
@media (max-width: 1200px) { .masonry { --cols: 4; } }
@media (max-width: 900px) { .masonry { --cols: 3; } }
@media (max-width: 600px) { .masonry { --cols: 2; } }

/* --- Galerie plein écran (PhotoSwipe) : fond clair, croix fine, pas de flèches --- */
.pswp { --fondu: 400ms; --pswp-bg: #f5f4f2; --pswp-icon-color: #1c1b19; --pswp-icon-color-secondary: #1c1b19; --pswp-icon-stroke-color: transparent; --pswp-icon-stroke-width: 0; }
.pswp__button--close { width: 76px; height: 76px; margin-right: 10px; margin-top: 6px; cursor: pointer !important; }
.pswp__button--close .pswp__icn { width: 32px; height: 32px; top: 22px; left: 22px; }
.pswp__icn--croix { display: block; transition: opacity var(--t-fast); }
.pswp__icn { fill: none; color: #1c1b19; filter: none; }
.pswp__icn-shadow { display: none; }
@media (hover: hover) and (pointer: fine) { .pswp__button:hover .pswp__icn { opacity: 0.6; } }
.pswp__img { cursor: pointer !important; }
/* Flèches en curseur : gauche = précédente, droite = suivante. Dessinées en traits fins (96 px), dans le même style que la croix
   et les flèches des liens ; les anciennes images de 128 px restent en secours pour un navigateur qui refuserait le dessin */
.pswp--dir-left, .pswp--dir-left .pswp__img { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%231c1b19' stroke-width='5'%3E%3Cpath d='M92 48H5M29 24L5 48l24 24'/%3E%3C/svg%3E") 2 48, url("../images/fleche-gauche.png") 24 64, w-resize !important; }
.pswp--dir-right, .pswp--dir-right .pswp__img { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%231c1b19' stroke-width='5'%3E%3Cpath d='M4 48H91M67 24l24 24-24 24'/%3E%3C/svg%3E") 94 48, url("../images/fleche-droite.png") 104 64, e-resize !important; }
/* Téléphone, debout ou couché (petit côté sous 600 px, comme dans js/galerie.js) : croix de 28 px dans une zone de toucher de 44 px */
@media (max-width: 599px), (max-height: 599px) {
  .pswp__button--close { width: 44px; height: 44px; margin-right: 8px; margin-top: 8px; }
  .pswp__button--close .pswp__icn { width: 24px; height: 24px; top: 10px; left: 10px; }
}
/* Ouverture : zoom depuis la vignette (PhotoSwipe) + fondu de l’image */
.pswp--open .pswp__img { animation: pswp-fade 420ms var(--ease) both; }
@keyframes pswp-fade { from { opacity: 0; } to { opacity: 1; } }
/* Fondu enchaîné entre deux images (js/galerie.js) : la nouvelle apparaît, la copie de l'ancienne s'efface ; durée : --fondu */
.pswp-fondu { animation: pswp-fade var(--fondu) ease-in-out both; }
.pswp-copie { position: fixed; z-index: 1; margin: 0; max-width: none; pointer-events: none; animation: pswp-fade-out var(--fondu) ease-in-out both; }
@keyframes pswp-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pswp-fondu { animation: none; } .pswp-copie { display: none; } }

/* =========================================================
   Le studio : une colonne centrée, même gabarit que les prestations
   ========================================================= */
/* Le studio : titre, puis le texte sous le titre sur toute la largeur */
.studio-texte { max-width: none; }

/* =========================================================
   Avis clients : trois cartes, extraits d'avis Google
   ========================================================= */
.avis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.avis-card { display: flex; flex-direction: column; gap: var(--sp-4); background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: var(--card-pad); }
.avis-stars { color: var(--accent); letter-spacing: 0.15em; font-size: 1rem; }
.avis-card blockquote { margin: 0; flex: 1; color: var(--ink); font-size: var(--text); line-height: 1.6; text-wrap: pretty; }
.avis-card blockquote p + p { margin-top: 0.6em; }
.avis-auteur { display: grid; gap: var(--sp-1); font-size: 0.9rem; }
.avis-auteur span { color: var(--ink-3); font-size: 0.8rem; }
/* trois colonnes seulement à partir de 1100 px : en dessous, elles font moins de 230 px de texte */
@media (max-width: 1100px) { .avis-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Prestations : une ligne par prestation, image et texte en quinconce
   ========================================================= */
.presta-list { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.presta { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
/* Retour depuis la page d'une prestation (#presta-…) : la ligne arrive juste sous la navbar */
.presta { scroll-margin-top: var(--ancre); }
.presta:nth-child(even) { grid-template-columns: 7fr 5fr; }
.presta:nth-child(even) .presta-visual { order: 2; }
/* image entière, à son propre format, sans recadrage ; fondu à l'arrivée (classe posée par js/site.js), comme les vignettes du portfolio */
.presta-visual img { width: 100%; opacity: 0; transition: opacity 1.5s var(--ease); }
.presta-visual img.is-loaded { opacity: 1; }
/* Pages plan-de-vente/ et plan-de-masse/ : portfolio de la prestation */
.page-portfolio { padding-bottom: var(--section-y); }

/* Page maquette-orbitale/ : la maquette en iframe, au format des images de la maquette (16/9, 2560 × 1440)
   pour qu'elle remplisse le cadre sans bande vide */
.maquette { padding-bottom: var(--section-y); }
.maquette-frame { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; background: #ece8e1; }
/* Visite virtuelle sur ordinateur : le cadre ne dépasse jamais le bas de l'écran (13rem = navbar, titre et marges) */
@media (min-width: 901px) { .maquette .maquette-frame { width: min(100%, calc((100svh - 13rem) * 16 / 9)); margin-inline: auto; } }
/* Visite virtuelle sur téléphone : cadre bord à bord et plus haut que large, sinon la visite fait 100 px de haut */
@media (max-width: 700px) { .maquette .maquette-frame { width: calc(100% + 2 * var(--gutter-contenu)); max-width: none; margin-inline: calc(-1 * var(--gutter-contenu)); aspect-ratio: 4 / 5; } }
/* Page maquette-orbitale/ : grille des maquettes, 3 colonnes (2 puis 1 sur petit écran) */
.maquettes-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.maquette-carte { display: block; }
.maquette-carte img { width: 100%; opacity: 0; transition: opacity 1.5s var(--ease); }
.maquette-carte img.is-loaded { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .maquette-carte:hover img.is-loaded { opacity: 0.7; transition-duration: var(--t-med); } }
@media (max-width: 900px) { .maquettes-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .maquettes-grille { grid-template-columns: 1fr; } }
/* Page d'une maquette (maquette-orbitale/<slug>/, ouverte dans un nouvel onglet) : fond blanc, la maquette seule au centre */
body.page-maquette { background: #fff; }
.maquette-seule { display: grid; place-items: center; padding: var(--sp-10) var(--sp-6) var(--sp-7); }
.maquette-seule .maquette-frame { width: min(100%, calc((100svh - 6rem) * 16 / 9)); background: none; }
/* téléphone et tablette, ou écran peu haut (téléphone couché) : plus de marges, la maquette prend toute la place */
@media (max-width: 900px), (max-height: 500px) { .maquette-seule { padding: 0; } .maquette-seule .maquette-frame { width: min(100%, calc(100svh * 16 / 9)); } }
/* iframe invisible pendant le chargement (fond noir de la visite Panotour), puis fondu */
.frame-fondu { opacity: 0; transition: opacity 0.5s var(--ease) 0.2s; }
.frame-fondu.is-loaded { opacity: 1; }
.presta-text { display: grid; gap: var(--sp-5); align-content: center; justify-items: start; }
@media (max-width: 900px) {
  .presta, .presta:nth-child(even) { grid-template-columns: 1fr; }
  .presta:nth-child(even) .presta-visual { order: 0; }
}

/* =========================================================
   Obtenir un devis : carte en deux étapes
   ========================================================= */

.dv-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: var(--card-pad); scroll-margin-top: var(--ancre); }
/* Obtenir un devis : titre et texte en haut, outil centré en dessous */
.devis-layout { display: grid; gap: var(--head-gap); }
.devis-head { display: grid; gap: var(--sp-5); }
.devis-head .prose { max-width: none; }
.devis-layout .dv-card { width: 100%; max-width: 760px; margin-inline: auto; }
/* Morphing de la carte entre les étapes : taille animée par le navigateur, contenu en fondu croisé */
::view-transition-group(devis-card) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
::view-transition-old(devis-card), ::view-transition-new(devis-card) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); height: 100%; object-fit: none; object-position: top; overflow: hidden; }
.dv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-6); }
/* un seul titre dans la carte, en grand, avec l'étape à droite */
.dv-head .dv-title { font-size: clamp(1.2rem, 5.5vw, 1.5rem); line-height: 1.3; margin: 0; }
.dv-step { margin-left: auto; white-space: nowrap; font-family: var(--font-menu); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.dv-title { font-family: var(--font-titre); font-size: 1.0625rem; line-height: 1.4; letter-spacing: 0.02em; font-weight: 700; text-transform: uppercase; margin-bottom: var(--sp-6); }
.dv-label { display: block; font-family: var(--font-menu); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-2); }

.dv-lines { border-top: 1px solid var(--line); }
.dv-line { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; color: var(--ink-2); }
.dv-line.is-on { color: var(--ink); font-weight: 700; }
.dv-line-label { min-width: 0; }
.dv-counter { display: inline-flex; flex: none; align-items: center; gap: var(--sp-1); }
.dv-qty { min-width: 2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }


.dv-link { font-size: 0.85rem; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.dv-recap-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4); border-radius: 12px; background: var(--bg); border: 1px solid var(--line); margin-bottom: var(--sp-6); }
.dv-recap { display: grid; gap: var(--sp-1); font-size: 0.88rem; color: var(--ink-2); line-height: 1.5; }
.dv-recap-qte { display: inline-block; min-width: 1.6em; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* minmax(0, …) et min-width: 0 : un nom de fichier très long ne peut plus élargir la colonne et faire déborder la carte */
.dv-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4) var(--sp-4); }
.dv-input { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); align-content: start; min-width: 0; }
.dv-input-full { grid-column: 1 / -1; }
.dv-input > span { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.dv-input > span small { font-size: inherit; font-weight: 400; color: var(--ink-3); } /* « (facultatif) » */
.dv-help { font-size: 0.78rem; color: var(--ink-3); margin-top: var(--sp-2); }
/* 16 px au minimum dans les champs : en dessous, l'iPhone zoome sur la page dès qu'on touche un champ */
.dv-input input, .dv-input textarea { width: 100%; min-height: 2.75rem; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 1rem; color: var(--ink); transition: border-color var(--t-fast); }
.dv-input input::placeholder, .dv-input textarea::placeholder { color: var(--ink-3); opacity: 1; }
.dv-input textarea { resize: vertical; }
/* Remplissage automatique du navigateur (nom, e-mail, téléphone mémorisés) : Chrome peint le champ en bleu clair.
   Ce fond ne se change pas directement ; on le recouvre d'une ombre intérieure blanche et on garde la couleur du texte. */
.dv-input input:-webkit-autofill, .dv-input input:-webkit-autofill:hover, .dv-input input:-webkit-autofill:focus, .dv-input textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset; box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); }
.dv-input input:focus, .dv-input textarea:focus { outline: none; border-color: var(--ink); }
.dv-file { position: relative; display: inline-flex; align-items: center; width: max-content; max-width: 100%; }
/* le champ invisible passe au-dessus du bouton dessiné : c'est lui qui reçoit le clic et ouvre le choix du fichier */
.dv-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }
/* le bouton interne du champ fichier garde sa flèche si on ne lui donne pas la main à lui aussi */
.dv-file input::file-selector-button { cursor: pointer; }
.dv-files { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); margin-top: var(--sp-2); }
.dv-files:empty { display: none; }
.dv-files li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: 10px; font-size: 0.85rem; color: var(--ink-2); }
.dv-files li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* poids du fichier, à droite du nom : il ne se tronque jamais, c'est le nom qui cède la place */
.dv-files li .dv-file-nom { flex: 1; }
.dv-files li .dv-file-poids { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dv-file-remove { position: relative; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 0; color: var(--ink-3); transition: background var(--t-fast), color var(--t-fast); }
/* la croix est dessinée en deux traits, comme le + et le − : son centrage ne dépend pas de la police */
.dv-file-remove::before, .dv-file-remove::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0.7rem; height: 1.5px; margin: -0.75px 0 0 -0.35rem; background: currentColor; transform: rotate(45deg); }
.dv-file-remove::after { transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .dv-file-remove:hover { background: rgba(28, 27, 25, 0.08); color: var(--ink); } }
.dv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.dv-field-error { display: block; min-height: 1.1rem; font-size: 0.8rem; line-height: 1.1rem; color: #8a2f1c; overflow-wrap: anywhere; }
.dv-input .is-invalid { border-color: #c4553b; outline: 1px solid #c4553b; outline-offset: 0; }
.dv-error { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: 10px; background: #fbeeea; color: #8a2f1c; font-size: 0.9rem; overflow-wrap: anywhere; }
.dv-sent { display: grid; gap: var(--sp-4); padding-block: var(--sp-4); color: var(--ink-2); }
@media (max-width: 560px) { .dv-form { grid-template-columns: minmax(0, 1fr); } }
/* téléphone : les petites capitales de la carte ne descendent pas sous 12 px */
@media (max-width: 600px) { .dv-step, .dv-label { font-size: 0.75rem; } }

/* =========================================================
   Pages texte (mentions, confidentialité, devis provisoire)
   ========================================================= */
.legal { display: grid; gap: var(--head-gap); padding-bottom: var(--section-y); }

/* =========================================================
   Pied de page : fond noir, contact
   ========================================================= */
.footer { padding-block: clamp(3rem, 6vw, 5rem) var(--sp-7); background: var(--ink); color: rgba(255, 255, 255, 0.72); }
.foot { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-8); flex-wrap: wrap; }
.foot-brand img { height: 1.85rem; width: auto; filter: invert(1); margin-bottom: var(--sp-4); }
.foot-tag { font-size: 0.9rem; max-width: 30ch; }
.foot-contact { display: grid; gap: var(--sp-2); text-align: right; font-size: 1rem; }
.foot-contact a { color: #fff; font-weight: 700; overflow-wrap: anywhere; transition: opacity var(--t-fast); }
@media (hover: hover) and (pointer: fine) { .foot-contact a:hover { opacity: 0.7; } }
.foot-contact address { font-style: normal; line-height: 1.5; margin-top: var(--sp-1); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); }
.foot-legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); }
.foot-legal a { transition: color var(--t-fast); }
@media (hover: hover) and (pointer: fine) { .foot-legal a:hover { color: #fff; } }
@media (max-width: 640px) {
  .foot { flex-direction: column; }
  .foot-contact { text-align: left; }
}

/* =========================================================
   Écrans tactiles : zones de toucher d'au moins 44 px (recommandation Apple, niveau AAA des WCAG).
   Rien ne change à la souris. Les liens en ligne gardent leur dessin : seule leur zone sensible grandit.
   ========================================================= */
@media (pointer: coarse) {
  .brand { min-height: 2.75rem; }
  .nav-toggle { width: 2.75rem; height: 2.75rem; }
  :root { --btn-h: 2.75rem; }   /* tous les boutons passent à 44 px */
  .dv-file-remove { width: 2.75rem; height: 2.75rem; }
  .link, .dv-link, .foot-legal a, .foot-contact a, .foot-brand a { position: relative; }
  .link::before, .dv-link::before, .foot-legal a::before, .foot-contact a::before, .foot-brand a::before { content: ''; position: absolute; inset: -0.8rem 0; }
}