/* Habillage commun A03. Deux familles locales, latin et ponctuation française.
   Licences et provenance : licences/. */
@font-face { font-family: "Archivo"; src: url("archivo-fr.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fraunces-fr.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --marge: max(clamp(20px, 5vw, 84px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --douce: cubic-bezier(.16, 1, .3, 1);
  --titre: "Fraunces", Georgia, serif;
  --titre-graisse: 540;
  --titre-serre: -.035em;
  --rayon: 26px;
}
.theme-atelier  { --titre: "Archivo", sans-serif; --titre-graisse: 800; --titre-serre: -.055em; --rayon: 18px; }
.theme-boutique { --titre-graisse: 380; --titre-serre: -.03em; --rayon: 999px; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--fond); }
html.lenis, html.lenis body { height: auto; }
body {
  background: var(--fond); color: var(--encre);
  font-family: "Archivo", system-ui, sans-serif; font-size: 17.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  padding-bottom: 96px;                       /* la place de la barre de démo */
}
a { color: inherit; }
::selection { background: var(--accent); color: var(--sur); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--titre); font-weight: var(--titre-graisse); letter-spacing: var(--titre-serre); line-height: .98; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
em { font-style: italic; color: var(--accent); }
.theme-atelier em { font-style: normal; color: var(--sur); background: var(--accent); padding: 0 .12em; border-radius: .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.js [data-monte], .js [data-lignes], .js [data-mots] { visibility: hidden; }
.ligne-masque { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }

.surtitre { font-family: "Archivo", sans-serif; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--encre2); display: flex; align-items: center; gap: 12px; }
.surtitre i { width: 26px; height: 1.5px; background: var(--accent); }

/* ------------------------------------------------------------------ boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--encre);
  font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background 300ms var(--douce), color 300ms var(--douce), border-color 300ms var(--douce);
}
.theme-atelier .btn { border-radius: 12px; }
.btn--plein { background: var(--encre); color: var(--fond); }
.btn--plein:hover { background: var(--accent); border-color: var(--accent); color: var(--sur); }
.btn--trait:hover { background: var(--encre); color: var(--fond); }
.btn--grand { padding: 18px 30px; font-size: 17px; }
.btn--inverse { background: var(--sur); color: var(--accent); border-color: var(--sur); font-family: var(--titre); font-weight: var(--titre-graisse); font-size: clamp(22px, 2.6vw, 38px); padding: 20px 38px; letter-spacing: -.02em; }
.btn--inverse:hover { background: var(--encre); color: var(--fond); border-color: var(--encre); }

/* --------------------------------------------------------------------- tête */

.tete {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; gap: clamp(14px, 3vw, 40px);
  padding: 18px var(--marge);
  transition: background 400ms var(--douce), transform 500ms var(--douce), box-shadow 400ms;
}
.tete[data-defile="oui"] { background: color-mix(in srgb, var(--fond) 84%, transparent); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 color-mix(in srgb, var(--encre) 14%, transparent); }
.tete[data-cache="oui"] { transform: translateY(-101%); }
.enseigne { font-family: var(--titre); font-weight: var(--titre-graisse); font-size: clamp(19px, 1.7vw, 25px); letter-spacing: -.03em; text-decoration: none; margin-right: auto;
  min-width: 0; line-height: 1.12; padding-block: 4px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.tete .btn { flex: none; }
.tete nav { display: flex; gap: clamp(14px, 2vw, 30px); }
.tete nav a { text-decoration: none; font-size: 15px; font-weight: 500; position: relative; padding: 6px 0; }
.tete nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--accent); transition: right 300ms var(--douce); }
.tete nav a:hover::after { right: 0; }
@media (max-width: 860px) { .tete nav { display: none; } }

/* ------------------------------------------------------------------- entrée */

.entree {
  min-height: 100svh; padding: 118px var(--marge) 56px;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); align-items: center;
}
.accroche { font-size: clamp(38px, 11.5vw, 128px); margin-top: 22px; }
@media (min-width: 901px) { .accroche { font-size: clamp(46px, 7.3vw, 128px); } }
.theme-atelier .accroche { font-size: clamp(36px, 11vw, 120px); line-height: .94; }
@media (min-width: 901px) { .theme-atelier .accroche { font-size: clamp(44px, 6.9vw, 120px); } }
.theme-boutique .accroche { font-size: clamp(38px, 12vw, 134px); line-height: 1; }
@media (min-width: 901px) { .theme-boutique .accroche { font-size: clamp(46px, 7.6vw, 134px); } }
.sous { margin-top: 28px; max-width: 46ch; font-size: clamp(17px, 1.4vw, 21px); color: var(--encre2); }
.actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }

.entree-image { position: relative; justify-self: end; width: min(100%, 470px); }
.cadre {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--accent); color: var(--sur);
  border-radius: 999px 999px var(--rayon) var(--rayon);
  display: grid; place-items: center;
}
.theme-atelier .cadre { border-radius: var(--rayon); }
.theme-atelier .cadre::before {                       /* la bande de chantier */
  content: ""; position: absolute; left: -10%; right: -10%; top: 12%; height: 34px; rotate: -8deg;
  background: repeating-linear-gradient(135deg, var(--sur) 0 16px, transparent 16px 32px); opacity: .9;
}
.theme-boutique .cadre { border-radius: 50%; aspect-ratio: 5 / 6; }
.cadre .picto { width: 58%; height: auto; }
/* La photo prend tout le cadre. Un voile de la couleur d'accent la rattache au
   site : sans lui, une photo de banque reste un corps étranger dans la page. */
.cadre--photo img, .vue img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); }
.cadre--photo::after, .vue::after { content: ""; position: absolute; inset: 0; background: var(--accent); mix-blend-mode: soft-light; opacity: .42; pointer-events: none; }
.cadre--photo .cadre-mot { z-index: 1; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.cadre--photo::before { z-index: 1; }
.cadre-lettre { font-family: var(--titre); font-weight: var(--titre-graisse); font-style: italic; font-size: clamp(180px, 22vw, 340px); line-height: 1; letter-spacing: -.06em; }
.theme-atelier .cadre-lettre { font-style: normal; }
.vue { position: relative; overflow: hidden; border-radius: var(--rayon); aspect-ratio: 4 / 5; background: var(--fond2); }
.theme-table .vue, .theme-boutique .vue { border-radius: 28px; }
.vue--large { aspect-ratio: 14 / 9; }
.duo { padding: 0 var(--marge) clamp(90px, 12vw, 190px); display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.duo .vue:not(.vue--large) { translate: 0 clamp(20px, 5vw, 70px); }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } .duo .vue:not(.vue--large) { translate: 0; aspect-ratio: 5 / 4; } }
.cadre .picto * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .cadre .picto * { animation: dessiner 1.9s var(--douce) .55s both; }
@keyframes dessiner { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.cadre-mot { position: absolute; bottom: 8%; left: 0; right: 0; text-align: center; font-family: "Archivo", sans-serif; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .9; }

.sceau { position: absolute; left: -64px; bottom: -34px; width: clamp(130px, 13vw, 184px); height: auto; animation: tourner 26s linear infinite; }
.sceau text { font-family: "Archivo", sans-serif; font-size: 15.5px; letter-spacing: .18em; fill: var(--encre); }
.sceau circle { fill: var(--accent); }
.sceau .sceau-fond { fill: var(--fond); }
.sceau::selection { background: none; }
@keyframes tourner { to { rotate: 360deg; } }
.theme-boutique .sceau { left: auto; right: 0; bottom: auto; top: -34px; }

@media (max-width: 900px) {
  .entree { grid-template-columns: 1fr; padding-top: 104px; min-height: 0; }
  .entree-image { justify-self: center; width: min(78%, 340px); margin-top: 18px; }
  .sceau { left: -40px; bottom: -26px; }
}
@media (prefers-reduced-motion: reduce) { .sceau, .js .cadre .picto * { animation: none; } }

/* ------------------------------------------------------------------- défilé */

.defile { border-block: 1.5px solid var(--encre); padding: clamp(18px, 2.4vw, 34px) 0; overflow: clip; }
.defile-rang { display: flex; width: max-content; will-change: transform; }
.defile-rang span { font-family: var(--titre); font-weight: var(--titre-graisse); font-size: clamp(34px, 5.4vw, 88px); letter-spacing: var(--titre-serre); line-height: 1; white-space: nowrap; padding-right: .5em; display: inline-flex; align-items: center; gap: .5em; }
.defile-rang span::after { content: ""; width: .22em; height: .22em; border-radius: 50%; background: var(--accent); flex: none; }
.theme-table .defile-rang span:nth-child(even), .theme-boutique .defile-rang span:nth-child(even) { font-style: italic; color: var(--accent); }
.theme-atelier .defile-rang span::after { border-radius: 2px; rotate: 45deg; }
.theme-atelier .defile { background: var(--encre); color: var(--fond); }

/* ------------------------------------------------------------------- maison */

.maison { padding: clamp(90px, 13vw, 210px) var(--marge); display: grid; gap: clamp(28px, 4vw, 56px); }
.citation { font-family: var(--titre); font-weight: var(--titre-graisse); font-size: clamp(32px, 5vw, 82px); letter-spacing: var(--titre-serre); line-height: 1.04; max-width: 19ch; text-wrap: balance; }
.citation .mot { opacity: .16; }
.maison-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: clamp(20px, 4vw, 64px); align-items: end; }
.maison-corps p { grid-column: 2; font-size: clamp(18px, 1.5vw, 22px); max-width: 54ch; color: var(--encre2); }
.maison-corps .vue { grid-column: 3; width: clamp(180px, 22vw, 330px); }
.vignette { grid-column: 3; width: clamp(96px, 11vw, 160px); aspect-ratio: 1; border-radius: var(--rayon); background: var(--fond2); color: var(--accent); display: grid; place-items: center; }
.theme-boutique .vignette { border-radius: 50%; }
.vignette .picto { width: 52%; height: auto; }
@media (max-width: 860px) { .maison-corps { grid-template-columns: 1fr; } .maison-corps p, .vignette, .maison-corps .vue { grid-column: 1; } .maison-corps .vue { width: min(100%, 360px); } }

/* -------------------------------------------------------------- prestations */

.prestations { padding: 0 var(--marge) clamp(90px, 12vw, 190px); }
.section-tete { display: grid; gap: 18px; margin-bottom: clamp(30px, 4vw, 60px); }
.section-tete h2, .raisons h2 { font-size: clamp(40px, 6.4vw, 108px); }
.liste { list-style: none; padding: 0; border-bottom: 1.5px solid var(--encre); }
.liste li {
  display: grid; grid-template-columns: 70px minmax(0, 5fr) minmax(0, 6fr) 40px; gap: clamp(12px, 2.4vw, 40px); align-items: baseline;
  padding: clamp(22px, 2.8vw, 40px) clamp(0px, 1vw, 16px); border-top: 1.5px solid var(--encre);
  transition: background 350ms var(--douce), color 350ms var(--douce), padding 450ms var(--douce);
}
.liste li:hover { background: var(--accent); color: var(--sur); padding-inline: clamp(12px, 2vw, 32px); }
.numero { font-family: "Archivo", sans-serif; font-size: 13px; letter-spacing: .1em; opacity: .7; }
.liste h3 { font-size: clamp(26px, 3.2vw, 50px); line-height: 1.02; }
.liste p { color: var(--encre2); transition: color 350ms; max-width: 52ch; }
.liste li:hover p { color: inherit; }
.fleche { font-size: 26px; opacity: 0; translate: -8px 8px; transition: opacity 350ms, translate 450ms var(--douce); justify-self: end; }
.liste li:hover .fleche { opacity: 1; translate: 0 0; }
@media (max-width: 760px) { .liste li { grid-template-columns: 44px 1fr; } .liste p { grid-column: 2; } .fleche { display: none; } }

/* Sur un écran tactile, « :hover » reste collé après l'appui : la ligne restait
   colorée et décalée jusqu'au prochain geste. Le survol est réservé à la souris. */
@media (hover: none) { .liste li:hover { background: none; color: inherit; padding-inline: clamp(0px, 1vw, 16px); } .liste li:hover p { color: var(--encre2); } .liste li:hover .fleche { opacity: 0; } }

/* ------------------------------------------------------------------ raisons */

.raisons { padding: clamp(80px, 11vw, 170px) var(--marge); background: var(--fond2); }
.trio { margin-top: clamp(34px, 5vw, 70px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trio article { position: relative; overflow: hidden; background: var(--fond); border-radius: calc(var(--rayon) * .9); padding: clamp(24px, 2.6vw, 40px); min-height: 300px; display: grid; align-content: end; gap: 12px; }
.theme-boutique .trio article { border-radius: 28px; }
.grand-chiffre { position: absolute; right: .08em; top: -.12em; font-family: var(--titre); font-weight: var(--titre-graisse); font-size: clamp(130px, 15vw, 230px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 70%, transparent); letter-spacing: -.05em; }
.trio h3 { font-size: clamp(24px, 2.3vw, 36px); position: relative; }
.trio p { color: var(--encre2); position: relative; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } .trio article { min-height: 0; padding-top: 84px; } .grand-chiffre { font-size: 96px; } }

/* -------------------------------------------------------------------- infos */

.infos {
  margin: clamp(16px, 2vw, 28px); border-radius: clamp(24px, 3vw, 44px); background: var(--accent); color: var(--sur);
  padding: clamp(50px, 8vw, 130px) clamp(22px, 5vw, 84px);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(30px, 5vw, 80px); align-items: end;
}
.infos .surtitre { color: inherit; opacity: .85; } .infos .surtitre i { background: currentColor; }
.infos h2 { font-size: clamp(38px, 5.4vw, 92px); margin: 20px 0 38px; }
.a-completer { display: inline-block; border: 2px dashed currentColor; border-radius: 999px; padding: 18px 30px; font-weight: 600; opacity: .85; }
.infos { grid-template-areas: "appel fiche" "carte carte"; }
.infos-appel { grid-area: appel; } .fiche-infos { grid-area: fiche; }
.carte { grid-area: carte; position: relative; margin: 0; border-radius: clamp(18px, 2vw, 30px); overflow: hidden; aspect-ratio: 3 / 1; background: var(--fond2); }
.carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(1.04); }
.carte::after { content: ""; position: absolute; inset: 0; background: var(--accent); mix-blend-mode: multiply; opacity: .38; pointer-events: none; }
/* L'image de la carte est en 3/2. Le cadre large du bureau (3/1) la rogne de moitié en
   hauteur : l'épingle se recale en conséquence ; sur téléphone le cadre EST en 3/2. */
.epingle { left: calc(var(--x) * 1%); top: calc(50% + (var(--y) - 50) * 2%); }
.epingle { position: absolute; z-index: 2; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--encre); border: 4px solid var(--fond); box-shadow: 0 0 0 0 color-mix(in srgb, var(--encre) 60%, transparent); animation: onde 2.4s ease-out infinite; }
@keyframes onde { to { box-shadow: 0 0 0 26px transparent; } }
.carte figcaption { position: absolute; z-index: 2; right: 10px; bottom: 8px; font-size: 12px; color: var(--encre); background: color-mix(in srgb, var(--fond) 82%, transparent); padding: 2px 8px; border-radius: 999px; }
@media (max-width: 860px) { .infos { grid-template-areas: "appel" "fiche" "carte"; } .carte { aspect-ratio: 3 / 2; } .epingle { top: calc(var(--y) * 1%); } }
@media (prefers-reduced-motion: reduce) { .epingle { animation: none; } }
.fiche-infos { background: var(--fond); color: var(--encre); border-radius: clamp(18px, 2vw, 30px); padding: clamp(8px, 1.4vw, 18px) clamp(22px, 2.6vw, 38px); }
.fiche-infos > div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1.5px solid color-mix(in srgb, var(--encre) 14%, transparent); }
.fiche-infos > div:last-child { border-bottom: 0; }
.fiche-infos dt { font-family: "Archivo", sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre2); padding-top: 4px; }
.fiche-infos dd { margin: 0; font-size: 18px; font-weight: 500; }
.vide { font-weight: 400; color: var(--encre2); border-bottom: 1.5px dashed color-mix(in srgb, var(--encre) 35%, transparent); }
@media (max-width: 860px) { .infos { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------- pied */

.pied { padding: clamp(40px, 6vw, 90px) var(--marge) 30px; overflow: clip; }
.pied-nom { font-family: var(--titre); font-weight: var(--titre-graisse); letter-spacing: var(--titre-serre); line-height: .9; white-space: nowrap; font-size: 12vw; }
.pied-ligne { margin-top: 26px; font-size: 14px; color: var(--encre2); }
.pied-fabrique { margin-top: 14px; font-size: 13px; color: var(--encre2); } .pied-fabrique a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.pied-credits { margin-top: 8px; font-size: 12px; color: var(--encre2); opacity: .8; max-width: 90ch; }

/* ==========================================================================
   LA BARRE DE DÉMONSTRATION — à nous, et ça doit se voir.
   ========================================================================== */

.barre {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 50;
  width: min(1040px, calc(100% - 24px));
  display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap;
  background: #fff; color: #0b0c0e; border: 2px solid #0b0c0e; border-radius: 20px; box-shadow: 6px 6px 0 #a8321e;
  padding: 12px 14px 12px 20px; font-family: "Archivo", sans-serif;
}
.barre-texte { flex: 1 1 320px; font-size: 14.5px; line-height: 1.35; }
.barre-texte b { font-weight: 700; } .barre-texte span { color: #555a64; }
.barre-forme { display: flex; gap: 8px; flex: 0 1 auto; }
.barre-forme input[type=email] { height: 46px; width: min(240px, 46vw); padding: 0 14px; border-radius: 12px; border: 1.5px solid rgba(11,12,14,.3); font: inherit; font-size: 15px; outline: 0; background: #f1f2f4; color: #0b0c0e; }
.barre-forme input[type=email]:focus { border-color: #0b0c0e; background: #fff; }
.barre-forme input[aria-invalid="true"] { border-color: #c62a1b; box-shadow: 0 0 0 3px rgba(198,42,27,.18); }
.barre-forme button { height: 46px; padding: 0 20px; border: 0; border-radius: 12px; background: #a8321e; color: #fff; font: inherit; font-weight: 650; font-size: 15px; cursor: pointer; white-space: nowrap; transition: background 250ms; }
.barre-forme button:hover { background: #0b0c0e; }
.barre-recu { flex: 1 1 260px; font-weight: 650; color: #a8321e; }
/* Encore le même piège : un display: d'auteur l'emporte sur l'attribut hidden — le
   formulaire restait affiché à côté de « C'est gardé ». */
.barre-forme[hidden] { display: none; }
/* Pour un passant, la barre s'efface : ce n'est pas à lui qu'on vend quelque chose. */
.barre[data-etat="garde"] .barre-forme button { background: #fff; color: #0b0c0e; border: 1.5px solid #0b0c0e; }
.barre[data-etat="garde"] .barre-forme button:hover { background: #0b0c0e; color: #fff; }
.barre-retour { font-family: "Archivo", sans-serif; font-weight: 700; letter-spacing: -.04em; font-size: 15px; text-decoration: none; color: #555a64; padding-right: 6px; }
.barre-retour:hover { color: #a8321e; }
.piege { position: absolute; left: -9999px; }
/* Téléphone : 16 px au moins dans les champs (sinon iOS zoome), 48 px de haut pour le pouce. */
/* À 360 px le bouton « Le garder » sortait de l'écran : un champ de saisie a une
   largeur minimale implicite, il faut la lui retirer pour qu'il cède la place. */
@media (max-width: 640px) {
  /* Téléphone : 16 px au moins dans les champs (sinon iOS zoome), 46 px pour le pouce. */
  .btn { min-height: 46px; } .tete { padding-block: 10px; } .enseigne { font-size: 17px; } .tete .btn { padding: 9px 14px; font-size: 14px; min-height: 44px; }
  /* Les infos pratiques : à 360 px la colonne d'étiquettes (120 px) ne laissait que 106 px à l'adresse. */
  .fiche-infos > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; } .fiche-infos dt { padding-top: 0; } .fiche-infos dd { font-size: 17px; overflow-wrap: anywhere; }
  .pied-nom { white-space: normal; text-wrap: balance; line-height: 1; }
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  /* La barre mangeait un sixième de l'écran, et à 360 px son bouton en sortait (un
     champ de saisie a une largeur minimale implicite). Repliée, elle tient sur une
     ligne ; le champ n'apparaît qu'au premier appui sur « Le garder ». */
  .barre { padding: 10px 10px 10px 16px; border-radius: 18px; flex-wrap: nowrap; gap: 10px; }
  .barre-texte { flex: 1 1 auto; font-size: 14px; } .barre-texte span { display: none; } .barre-retour { display: none; }
  .barre-forme { flex: none; min-width: 0; }
  .barre-forme input[type=email] { display: none; min-width: 0; flex: 1; width: auto; }
  .barre-forme input[type=email], .barre-forme button { height: 50px; font-size: 16px; }
  .barre[data-ouvert] { flex-wrap: wrap; padding: 10px; }
  .barre[data-ouvert] .barre-texte { display: none; }
  .barre[data-ouvert] .barre-forme { flex: 1 1 100%; }
  .barre[data-ouvert] .barre-forme input[type=email] { display: block; }
}

/* ==========================================================================
   LE PANNEAU — Textes · Couleurs · Style · Photos. Il RESTE : on essaie en direct, on replie
   d'un toucher pour voir le site, on rouvre. Replié, seule la poignée dépasse du bas de l'écran ;
   la bascule est une translation (160 ms), pas un rechargement.
   ========================================================================== */
.studio { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 50;
  width: min(760px, calc(100% - 20px)); background: #fbfbfa; color: #28231f; border: 1px solid #d9d3ca; border-radius: 22px;
  box-shadow: 0 24px 60px -24px #2c1a0e66, 0 2px 0 #ffffff inset; font-family: "Archivo", sans-serif; transition: translate .16s cubic-bezier(.2, .8, .2, 1); }
.studio[hidden] { display: none; }
.studio-plie .studio { translate: -50% calc(100% - 50px + 10px + env(safe-area-inset-bottom, 0px)); }
.studio-plie .studio-corps { visibility: hidden; }                /* hors de l'écran ET hors de la tabulation */
@media (prefers-reduced-motion: reduce) { .studio { transition: none; } }
.studio-poignee { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; border: 0; background: none;
  font: inherit; font-weight: 650; font-size: 14.5px; color: #0b0c0e; cursor: pointer; border-radius: 20px 20px 0 0; position: relative; }
.studio-poignee i { position: absolute; top: 7px; left: 50%; translate: -50% 0; width: 44px; height: 4px; border-radius: 2px; background: #d9d3ca; }
.studio-poignee span { margin-top: 8px; }
.studio-poignee span::after { content: " ▾"; } .studio-plie .studio-poignee span::after { content: " ▴"; }
.studio-point { width: 9px; height: 9px; border-radius: 50%; background: #a8321e; margin-top: 8px; } .studio-point[hidden] { display: none; }
.studio-corps { padding: 0 14px 12px; }
.studio-onglets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: #efeae3; }
.studio-onglets button { height: 44px; border: 0; border-radius: 10px; background: none; font: inherit; font-weight: 650; font-size: 14.5px; color: #5b524b; cursor: pointer; }
.studio-onglets button[aria-selected="true"] { background: #28231f; color: #fff; }
.studio-volet { height: 126px; padding: 12px 2px 0; overflow-y: auto; overscroll-behavior: contain; } .studio-volet[hidden] { display: none; }
.studio-dit { margin: 0; font-size: 14.5px; line-height: 1.4; color: #5b524b; } .studio-dit b { color: #28231f; }
.studio-volet .nuancier { flex: none; padding-top: 6px; } .studio-volet .nuancier + .studio-dit { margin-top: 6px; }
.studio-lien { margin-top: 8px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: 650; font-size: 14.5px; color: #a8321e; cursor: pointer; text-align: left; }
.studio-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Sur téléphone, trois cartes de style côte à côte ne laissent que 100 px à chaque texte : une rangée à faire glisser. */
@media (max-width: 600px) { .studio-cartes { display: flex; overflow-x: auto; scrollbar-width: none; padding-right: 24px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); } .studio-cartes::-webkit-scrollbar { display: none; } .studio-carte { flex: 0 0 168px; min-height: 0; } }
.studio-carte { display: grid; gap: 4px; align-content: start; min-height: 96px; padding: 10px 10px 8px; border: 1.5px solid #d9d3ca; border-radius: 14px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.studio-carte b { font-size: 15.5px; } .studio-carte span { font-size: 12.5px; line-height: 1.3; color: #6a615a; }
.studio-carte[aria-selected="true"] { border-color: #28231f; box-shadow: inset 0 0 0 1.5px #28231f; background: #f6f1ea; }
.studio-puces { display: flex; gap: 8px; overflow-x: auto; padding: 2px 40px 8px 0; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.studio-puces::-webkit-scrollbar { display: none; }
.studio-puces button { flex: none; height: 44px; padding: 0 14px; border: 1.5px solid #d9d3ca; border-radius: 999px; background: #fff; font: inherit; font-size: 14.5px; cursor: pointer; white-space: nowrap; }
.studio-puces button[aria-selected="true"] { border-color: #28231f; background: #f6f1ea; font-weight: 650; }
.studio-pied { display: flex; gap: 8px; margin-top: 10px; }
.studio-pied button { flex: 1 1 0; height: 48px; padding: 0 10px; border-radius: 12px; border: 1.5px solid #28231f; background: #fff; color: #28231f; font: inherit; font-weight: 650; font-size: 15px; cursor: pointer; }
.studio-pied button.plein { background: #a8321e; border-color: #a8321e; color: #fff; flex-grow: 1.3; } .studio-pied button[hidden] { display: none; } .studio-pied button:disabled { opacity: .7; cursor: progress; }
.studio-erreur { margin: 8px 2px 0; font-size: 14px; color: #c62a1b; } .studio-erreur:empty { display: none; } .studio-ok { color: #12703f; font-weight: 650; }
.studio button:focus-visible { outline: 3px solid #28231f; outline-offset: 2px; }
/* La page garde de quoi défiler SOUS le panneau ; repliée, presque rien. */
.mode-retouche body { padding-bottom: calc(330px + env(safe-area-inset-bottom, 0px)); }
.mode-retouche.studio-plie body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
/* REPLIÉ = « voir mon site » : plus un pointillé, plus une étiquette, les liens se touchent — le site tel qu'un client le verra. */
.mode-retouche.studio-plie [data-zone] { outline: 0; cursor: auto; } .mode-retouche.studio-plie [data-zone]::before { display: none; }
.mode-retouche.studio-plie [data-zone] *, .mode-retouche.studio-plie [data-photo] * { pointer-events: auto; }
.mode-retouche.studio-plie [data-photo] { cursor: auto; } .mode-retouche.studio-plie .photo-puce, .mode-retouche.studio-plie .vue--vide { display: none; }
.mode-retouche.studio-plie .tete { pointer-events: auto; } .mode-retouche.studio-plie .tete .btn { visibility: visible; }
.cadre--photo .cadre-lettre { display: none; }                    /* l'initiale ne se montre que sans photo — les deux vivent dans la page */

/* ==========================================================================
   LES PHOTOS DU COMMERÇANT. En mode retouche, chaque photo se touche ; un emplacement
   vide ne se montre qu'à lui (jamais un cadre creux à un visiteur).
   ========================================================================== */
.perso::after { opacity: 0; }                     /* SA photo n'est pas teintée : c'est son commerce, pas une illustration */
.perso img { filter: none; }
.photo-puce, .vue--vide { display: none; }
.duo--partiel { grid-template-columns: minmax(0, 560px); justify-content: center; }
.duo--partiel .vue { aspect-ratio: 14 / 9; translate: none; max-height: 70vh; }   /* UNE photo seule : le même cadre au téléphone et sur grand écran */
.photo-garder { width: 100%; border: 0; font: inherit; font-weight: 650; font-size: 16.5px; }
.photo-forme { display: block; margin-top: 6px; font-size: 14px; color: #5a5f69; }
.mode-retouche [data-photo], .mode-retouche [data-zone] [data-photo] { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: rgba(168,50,30,.12); }
.mode-retouche [data-photo] * { pointer-events: none; }
.mode-retouche .vue--vide { display: grid; place-items: center; border: 2px dashed #a8321e; background: rgba(168,50,30,.05); }
/* Au CENTRE de la photo : en bas le panneau la recouvrait, en haut elle chevauchait le tampon « Depuis 2021 ». */
.mode-retouche .photo-puce { display: inline-flex; position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3; padding: 11px 14px; border-radius: 999px;
  background: #a8321e; color: #fff; font: 650 13.5px/1 "Archivo", sans-serif; white-space: nowrap; box-shadow: 0 2px 0 #0b0c0e; }
.mode-retouche .vue--vide .photo-puce { position: static; translate: none; }
.mode-retouche [data-photo]:focus-visible { outline: 3px solid #a8321e; outline-offset: 3px; }
.photo-dit { margin: 14px 0 0; font-size: 16px; line-height: 1.45; }
.photo-choisir { display: flex; align-items: center; justify-content: center; position: relative; height: 56px; margin-top: 16px; border-radius: 14px; background: #a8321e; color: #fff; font-weight: 650; font-size: 16.5px; cursor: pointer; }
.photo-choisir input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }   /* pas `hidden` : il doit rester atteignable au clavier */
.photo-choisir:focus-within { outline: 3px solid #0b0c0e; outline-offset: 2px; }
.photo-choisir[aria-busy="true"] { opacity: .7; cursor: progress; } .photo-choisir[aria-busy="true"] input { pointer-events: none; }
.photo-origine { display: block; margin: 10px auto 0; min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 15px; color: #0b0c0e; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.photo-origine[hidden] { display: none; }
.photo-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.4; color: #5a5f69; }

/* <picture> n'est qu'une enveloppe pour offrir l'AVIF : elle ne doit rien changer à la mise en page. */
picture { display: contents; }

/* ==========================================================================
   ÉCRIRE AU COMMERÇANT — le formulaire de contact. Dans le bloc d'infos, aux couleurs du site.
   ========================================================================== */
.ecrire { grid-column: 1 / -1; display: grid; gap: 10px; padding: clamp(18px, 2.4vw, 30px); border-radius: var(--rayon); background: color-mix(in srgb, var(--sur) 12%, transparent); border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent); }
.ecrire-titre { font-family: var(--titre); font-weight: var(--titre-graisse); font-size: clamp(22px, 2.2vw, 32px); letter-spacing: var(--titre-serre); line-height: 1.05; margin-bottom: 4px; }
.ecrire-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ecrire input[type=text], .ecrire textarea { width: 100%; min-height: 52px; padding: 13px 15px; border-radius: 12px; border: 1.5px solid transparent; background: var(--fond); color: var(--encre); font: inherit; font-size: 16px; }
.ecrire textarea { resize: vertical; min-height: 96px; }
/* Les questions du devis et d'« Être rappelé » (24/09) : un libellé au-dessus, une liste fermée, la même allure que les champs. */
.ecrire-champ { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.ecrire select { width: 100%; min-height: 52px; padding: 13px 15px; border-radius: 12px; border: 1.5px solid transparent; background: var(--fond); color: var(--encre); font: inherit; font-size: 16px; font-weight: 400; }
.ecrire select:focus { outline: 0; border-color: var(--encre); }
.ecrire select[aria-invalid="true"] { border-color: #c62a1b; box-shadow: 0 0 0 3px rgba(198,42,27,.2); }
.ecrire input[type=tel] { width: 100%; min-height: 52px; padding: 13px 15px; border-radius: 12px; border: 1.5px solid transparent; background: var(--fond); color: var(--encre); font: inherit; font-size: 16px; }
.ecrire-rappel { margin-top: 18px; }
.lien-rappel { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-weight: 600; color: inherit; text-underline-offset: 4px; }
.ecrire input:focus, .ecrire textarea:focus { outline: 0; border-color: var(--encre); }
.ecrire input[aria-invalid="true"], .ecrire textarea[aria-invalid="true"] { border-color: #c62a1b; box-shadow: 0 0 0 3px rgba(198,42,27,.2); }
.ecrire button { justify-self: start; min-height: 52px; cursor: pointer; border: 0; font: inherit; font-weight: 650; }
.ecrire button:disabled { opacity: .6; }
.ecrire-note { font-size: 13px; opacity: .8; } .ecrire-retour { font-weight: 650; min-height: 1.4em; } .ecrire-retour:empty { display: none; }
.ecrire[data-envoye="oui"] > :not(.ecrire-titre):not(.ecrire-retour) { display: none; }
.a-lire { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #a8321e; color: #fff; font-size: 12.5px; font-weight: 700; }
@media (max-width: 640px) { .ecrire-duo { grid-template-columns: 1fr; } .ecrire button { justify-self: stretch; } }

/* ==========================================================================
   LA MISE EN AVANT — une entrée qui doit se voir, le bandeau d'annonce. Cinq teintes
   fermées, chacune en deux valeurs : lisible sur fond clair, lisible sur fond sombre.
   ========================================================================== */
.marque-accent { --marque: var(--accent); --sur-marque: var(--sur); }
.marque-vert   { --marque: #1c7a3e; --sur-marque: #fff; } .sombre .marque-vert   { --marque: #6fdc9a; --sur-marque: #07150c; }
.marque-rouge  { --marque: #c8202f; --sur-marque: #fff; } .sombre .marque-rouge  { --marque: #ff8f8f; --sur-marque: #1a0606; }
.marque-bleu   { --marque: #1b55d9; --sur-marque: #fff; } .sombre .marque-bleu   { --marque: #9dbbff; --sur-marque: #060d1f; }
.marque-orange { --marque: #c25400; --sur-marque: #fff; } .sombre .marque-orange { --marque: #ffb36b; --sur-marque: #1c0d00; }
.marque h3 { color: var(--marque); }
.liste li.marque { border-top-color: var(--marque); box-shadow: inset 4px 0 0 var(--marque); padding-inline: clamp(14px, 2vw, 32px); }
.trio article.marque { box-shadow: inset 0 0 0 2px var(--marque); }
.etiquette {
  display: inline-block; vertical-align: middle; margin-left: .35em; padding: .42em .8em; border-radius: 999px;
  background: var(--marque, var(--accent)); color: var(--sur-marque, var(--sur));
  font: 650 13px/1 "Archivo", sans-serif; letter-spacing: .01em; white-space: nowrap; translate: 0 -.15em;
}
/* À la souris seulement. Au doigt le survol reste collé : le titre passait en couleur
   « sur accent » alors que le fond restait celui de la page — il disparaissait. */
@media (hover: hover) and (pointer: fine) { .liste li.marque:hover h3, .liste li.marque:hover { color: var(--sur); } }
.annonce {
  display: inline-block; margin-bottom: clamp(16px, 2vw, 26px); padding: 11px 18px; border-radius: 14px;
  background: var(--marque); color: var(--sur-marque); font-weight: 650; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.3; max-width: 46ch;
}

/* Ce qui vient de changer, dans l'aperçu : on ne cherche pas, on voit. */
/* Pas de border-radius ici : il écrasait celui du bouton en pilule, et l'aperçu ne montrait
   plus ce qui serait enregistré. Le contour suit déjà le rayon propre de l'élément. */
.change { outline: 3px solid #a8321e; outline-offset: 6px; animation: change 1.6s ease-in-out 3; scroll-margin-top: 110px; }
@keyframes change { 50% { outline-color: rgba(168,50,30,.15); } }
@media (prefers-reduced-motion: reduce) { .change { animation: none; } }

/* ==========================================================================
   LE MODE « ZONES » — on touche la partie du site à changer. Tout ce qui est dans une
   zone cesse de réagir (liens, boutons) : le doigt tombe toujours sur la zone elle-même.
   ========================================================================== */
.mode-retouche [data-zone] { position: relative; cursor: pointer; outline: 2px dashed #a8321e; outline-offset: -8px; -webkit-tap-highlight-color: rgba(168,50,30,.12); }
.mode-retouche [data-zone] * { pointer-events: none; }
.mode-retouche [data-zone]::before {
  content: "✎  " attr(data-zone-nom); position: absolute; top: 18px; right: 18px; z-index: 30; pointer-events: none;
  background: #a8321e; color: #fff; font: 650 14px/1 "Archivo", sans-serif; letter-spacing: 0; text-transform: none;
  padding: 12px 15px; border-radius: 999px; box-shadow: 3px 3px 0 #0b0c0e; white-space: nowrap;
}
.mode-retouche [data-zone]:focus-visible { outline-style: solid; outline-width: 3px; }
@media (hover: hover) and (pointer: fine) { .mode-retouche [data-zone]:hover { outline-style: solid; } }
.mode-retouche .tete { pointer-events: none; } .mode-retouche .tete .btn { visibility: hidden; }   /* son bouton passait sous l'étiquette de la première zone */

.barre--mode { gap: 12px 18px; }
.barre-ligne { flex: 1 1 300px; font-size: 14.5px; line-height: 1.35; } .barre-ligne b { font-weight: 700; } .barre-ligne span { color: #555a64; }
.barre-boutons { display: flex; gap: 8px; flex: 0 1 auto; flex-wrap: wrap; }
.barre-boutons button { height: 46px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #0b0c0e; background: #fff; color: #0b0c0e; font: inherit; font-weight: 650; font-size: 15px; cursor: pointer; white-space: nowrap; }
.barre-boutons button.plein { background: #a8321e; border-color: #a8321e; color: #fff; }
.barre-boutons button:disabled { opacity: .6; }
.barre[hidden] { display: none; }
/* Le nuancier : des pastilles moitié fond, moitié couleur d'accent. On touche, le site change. */
/* Un fondu à droite : à 390 px, six pastilles tenaient pile et la septième commençait au
   bord — rien ne disait qu'il y en avait seize. La marge de fin laisse la dernière sortir du fondu. */
.nuancier { flex: 1 1 100%; display: flex; gap: 10px; overflow-x: auto; padding: 4px 56px 8px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.nuancier::-webkit-scrollbar { display: none; }
.pastille { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #0b0c0e; cursor: pointer; padding: 0;
  background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%); box-shadow: 0 0 0 3px #fff; }
.pastille[aria-selected="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #a8321e; }
@media (max-width: 640px) {
  .barre--mode { flex-wrap: wrap; padding: 12px; }
  .barre--mode .barre-ligne { flex: 1 1 100%; font-size: 14px; } .barre--mode .barre-ligne span { display: block; }
  .barre--mode .barre-boutons { flex: 1 1 100%; flex-wrap: nowrap; }
  .barre--mode .barre-boutons button { flex: 1 1 0; min-width: 0; height: 50px; padding: 0 8px; font-size: 14.5px; }
  .barre--mode .large { display: none; }                        /* « Couleurs et style » était coupé à 390 px */
  .mode-retouche [data-zone]::before { top: 12px; right: 12px; font-size: 13.5px; padding: 11px 13px; }
  body.avec-barre-haute { padding-bottom: calc(210px + env(safe-area-inset-bottom, 0px)); }
  .etiquette { font-size: 12px; margin-left: 0; margin-top: 6px; display: table; translate: none; }        /* sous le titre : à côté, elle le faisait déborder */
}

/* ==========================================================================
   LA RETOUCHE — à nous aussi : même langage que la barre.
   ========================================================================== */

.barre-modifier { height: 46px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #0b0c0e; background: #fff; color: #0b0c0e; font: inherit; font-weight: 650; font-size: 15px; cursor: pointer; white-space: nowrap; }
.barre-modifier:hover { background: #0b0c0e; color: #fff; }
.barre-visites { display: inline-flex; align-items: center; text-decoration: none; }
.retouche { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; justify-items: center; background: rgba(11,12,14,.42); padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; font-family: "Archivo", sans-serif; color: #0b0c0e; }
.retouche[hidden] { display: none; }
.retouche-carte { position: relative; width: min(680px, 100%); background: #fbfbfa; border: 1px solid #d9d3ca; border-radius: 22px; box-shadow: 0 30px 70px -30px #2c1a0e80; padding: clamp(20px, 3vw, 32px); }
.retouche-fermer { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border: 0; background: none; font-size: 18px; cursor: pointer; border-radius: 50%; }
.retouche-fermer:hover { background: #f1f2f4; }
.retouche-titre { font-family: "Archivo", sans-serif; font-weight: 750; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; line-height: 1.05; padding-right: 44px; }
#retouche-forme { margin-top: 16px; display: grid; gap: 10px; }
/* Toujours le même piège : un « display » d'auteur l'emporte sur l'attribut hidden. */
#retouche-forme[hidden], .retouche-exemples[hidden] { display: none; }
#retouche-forme textarea { width: 100%; min-height: 84px; resize: none; padding: 14px 16px; border-radius: 14px; border: 1.5px solid rgba(11,12,14,.3); background: #f1f2f4; font: inherit; font-size: 17px; line-height: 1.4; outline: 0; color: #0b0c0e; }
#retouche-forme textarea:focus { border-color: #0b0c0e; background: #fff; }
#retouche-forme button, .retouche-actions .oui { height: 54px; border: 0; border-radius: 14px; background: #a8321e; color: #fff; font: inherit; font-weight: 650; font-size: 16.5px; cursor: pointer; }
#retouche-forme button:disabled { opacity: .7; cursor: progress; }
.retouche-exemples { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.retouche-exemples button { min-height: 40px; padding: 0 13px; border-radius: 999px; border: 1.5px solid rgba(11,12,14,.26); background: none; font: inherit; font-size: 14px; color: #454a54; cursor: pointer; }
.retouche-resultat { margin-top: 18px; border-top: 1.5px solid rgba(11,12,14,.14); padding-top: 16px; }
.retouche-resultat[hidden] { display: none; }
.retouche-resume { font-weight: 650; font-size: 17px; line-height: 1.35; }
.retouche-choix[hidden], .retouche-sous[hidden] { display: none; }
.retouche-sous { margin: 16px 0 8px; font-family: "Archivo", sans-serif; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: #7b818c; }
.retouche-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.retouche-puces button { min-height: 44px; padding: 8px 15px; line-height: 1.3; border-radius: 22px; border: 1.5px solid #0b0c0e; background: #fff; color: #0b0c0e; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; text-align: left; }
.retouche-puces button[aria-pressed="true"] { background: #0b0c0e; color: #fff; }
.retouche-puces button:disabled { opacity: .55; }
.retouche-ecarts { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; max-height: 38vh; overflow-y: auto; }
.retouche-ecarts li { border: 1.5px solid rgba(11,12,14,.14); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; font-size: 15px; line-height: 1.4; }
.retouche-ecarts b { font-family: "Archivo", sans-serif; font-weight: 500; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: #7b818c; }
.retouche-ecarts .avant { color: #7b818c; text-decoration: line-through; text-decoration-thickness: 1px; }
.retouche-ecarts .avant:empty::before { content: "(vide)"; text-decoration: none; display: inline-block; }
.retouche-ecarts .apres { color: #0b0c0e; background: #e4e8ff; border-radius: 8px; padding: 4px 8px; margin: 0 -8px; }
.retouche-actions { margin-top: 16px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.retouche-actions .non { height: 54px; border-radius: 14px; border: 1.5px solid #0b0c0e; background: #fff; font: inherit; font-weight: 600; font-size: 15.5px; cursor: pointer; }
.retouche-erreur { margin-top: 12px; font-size: 14.5px; color: #c62a1b; } .retouche-erreur:empty { display: none; }
.fait { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); translate: -50% 0; z-index: 55; background: #0b0c0e; color: #fff; border-radius: 999px; padding: 10px 10px 10px 20px; font-family: "Archivo", sans-serif; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 12px; box-shadow: 4px 4px 0 #a8321e; }
.fait button { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: #fff; color: #0b0c0e; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
@media (max-width: 640px) {
  .barre-modifier { height: 50px; font-size: 15px; padding: 0 14px; }
  .barre[data-ouvert] .barre-modifier { display: none; }
  .barre:not([data-ouvert]) .barre-texte { display: none; }        /* deux boutons : le texte cède la place */
  .barre:not([data-ouvert]) .barre-modifier, .barre:not([data-ouvert]) .barre-forme { flex: 1; } .barre:not([data-ouvert]) .barre-forme button { width: 100%; }
  /* Site gardé : un seul bouton, donc le texte retrouve sa place. Sans lui, un passant
     lisait « Recevoir mon lien » sans savoir de quel lien on lui parlait. */
  .barre[data-etat="proprietaire"]:not([data-ouvert]) .barre-texte, .barre[data-etat="garde"]:not([data-ouvert]) .barre-texte { display: block; }
  .barre[data-etat="proprietaire"]:not([data-ouvert]) .barre-modifier, .barre[data-etat="garde"]:not([data-ouvert]) .barre-forme { flex: none; }
  /* Confirmé, le propriétaire a DEUX boutons (« Mes visites », « Modifier ») : le texte leur cède la place. */
  .barre[data-etat="proprietaire"]:has(.barre-visites) .barre-texte { display: none; }
  .barre[data-etat="proprietaire"]:has(.barre-visites) .barre-modifier { flex: 1; justify-content: center; }
  .barre[data-etat="garde"]:not([data-ouvert]) .barre-forme button { width: auto; padding: 0 14px; font-size: 15px; }
  .retouche { padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .retouche-actions { grid-template-columns: 1fr; }
}

/* A03 : une grille commune, indépendante du métier et des effets. */
html[data-editorial]{--titre:"Fraunces",Georgia,serif;--titre-graisse:500;--titre-serre:-.035em;--rayon:4px;--marge:clamp(24px,5vw,80px)}
html[data-editorial] body{padding-bottom:0;font:400 18px/1.55 "Archivo",system-ui,sans-serif;overflow-wrap:anywhere}
/* Hors site immersif seulement (25/09) : la composition commune a désormais la même mise en scène que les autres — cette règle y
   laissait l'en-tête opaque sur la photo (animation coupée), pour les pharmacies, bars et tous les métiers sans voisin. */
html[data-composition=commun]:not([data-immersif]) *,html[data-composition=commun]:not([data-immersif]) *::before,html[data-composition=commun]:not([data-immersif]) *::after{animation:none!important;transition-property:color,background-color,border-color,opacity!important;transition-duration:180ms!important;scroll-behavior:auto!important}
html[data-editorial] .js [data-monte],html[data-editorial] [data-lignes],html[data-editorial] [data-mots]{visibility:visible}
html[data-editorial] h1,html[data-editorial] h2,html[data-editorial] h3{font-family:var(--titre);font-weight:500;letter-spacing:-.035em;line-height:1.08;hyphens:none;text-wrap:pretty}
html[data-editorial] p{white-space:pre-line}
html[data-editorial] .editorial-tete{position:static;inset:auto;max-width:1440px;margin:auto;padding:24px var(--marge) 0;min-height:0;box-shadow:none;transform:none;background:none;backdrop-filter:none}
html[data-editorial] .enseigne{display:block;overflow:visible;font:600 18px/1.35 "Archivo",sans-serif;letter-spacing:-.02em;white-space:normal}
html[data-editorial] .editorial-tete nav{margin-left:auto;gap:24px}
html[data-editorial] .editorial-tete nav a{font-size:15px}
.editorial-main{max-width:1440px;margin:auto;padding:0 var(--marge)}
html[data-editorial] .editorial-entree{padding:64px 0 0;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
html[data-editorial] .editorial-entree.sans-photo{display:block;max-width:960px}
html[data-editorial] .surtitre{font:500 14px/1.4 "Archivo",sans-serif;letter-spacing:.05em;text-transform:none;color:var(--encre2);margin-bottom:16px}
html[data-editorial] .accroche{font-size:clamp(72px,6.7vw,104px);line-height:1.02;margin:0;max-width:15ch;white-space:pre-wrap;font-style:normal;letter-spacing:-.045em}
html[data-editorial] .sous{font-size:18px;line-height:1.55;max-width:43ch;margin:24px 0 0;color:var(--encre2)}
.localisation{margin-top:24px;max-width:44ch}
html[data-editorial] .actions{gap:12px;margin-top:16px}
html[data-editorial] .btn{font:600 17px/1.4 "Archivo",sans-serif;min-height:48px;padding:12px 20px;border-radius:4px;white-space:normal;overflow-wrap:anywhere;letter-spacing:0;box-shadow:none}
html[data-editorial] .btn--plein{background:var(--encre);border-color:var(--encre);color:var(--fond)}
html[data-editorial] .btn--plein:hover{opacity:.88}
html[data-editorial] .entree-image{width:100%;max-width:none;justify-self:stretch;margin:0}
html[data-editorial] .entree-image img{position:static;display:block;width:100%;height:auto;max-height:620px;object-fit:contain;filter:none;border-radius:0;transform:none}
html[data-editorial] .editorial-section{margin:88px 0 0;padding:0;min-height:0}
html[data-editorial] .section-tete{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
html[data-editorial] .editorial-section h2{font-size:clamp(32px,3.2vw,48px);margin:0 0 24px}
html[data-editorial] .section-tete h2{margin:0}
.liste-offres{list-style:none;padding:0}
html[data-editorial] .liste-offres li{display:flex;align-items:baseline;justify-content:space-between;gap:32px;padding:24px 0;border-top:1px solid color-mix(in srgb,var(--encre) 24%,transparent)}
html[data-editorial] .liste-offres h3{font-size:28px;line-height:1.2;margin:0}
html[data-editorial] .liste-offres p{font-size:18px;color:var(--encre2);margin:12px 0 0;max-width:58ch}
.prix{font-size:16px;max-width:24ch;flex-shrink:0}
html[data-editorial] .maison{display:block;max-width:800px}
html[data-editorial] .presentation{font-size:18px;line-height:1.55;margin:0}
.editorial-galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.editorial-galerie figure{margin:0}
.editorial-galerie img{display:block;width:100%;height:auto;filter:none;border-radius:0}
html[data-editorial] .infos{display:block;background:none;color:var(--encre);border-radius:0;border-top:1px solid color-mix(in srgb,var(--encre) 24%,transparent);padding-top:32px}
html[data-editorial] .infos h3{font:600 17px/1.4 "Archivo",sans-serif;margin:0 0 8px}
html[data-editorial] .infos .ecrire{margin:32px 0 0;max-width:760px}
html[data-editorial] .infos input,html[data-editorial] .infos textarea,html[data-editorial] .infos select{background:var(--fond);color:var(--encre);border:1px solid var(--encre2)}
html[data-editorial] .editorial-pied{display:flex;flex-wrap:wrap;gap:12px 24px;padding:32px var(--marge);margin:88px auto 0;max-width:1440px;border-top:1px solid color-mix(in srgb,var(--encre) 24%,transparent);font:400 14px/1.5 "Archivo",sans-serif}
html[data-editorial] .editorial-tete:not(:has(a)){display:none}
.edition-note{font:400 14px/1.5 "Archivo",sans-serif;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--encre) 20%,transparent)}
.edition-note>p{display:flex;gap:12px;justify-content:space-between}
.edition-note details{margin-top:8px}.edition-note details p{margin:8px 0}.edition-note ul{padding-left:20px}
html[data-editorial] summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.edition-liens{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 0}
/* Les emplacements à compléter se lisent comme des emplacements, pas comme des liens perdus dans le texte (22/09). */
.manque-court{display:inline-flex;align-items:center;gap:6px;font:500 13px/1.3 "Archivo",sans-serif;text-decoration:none;padding:9px 14px;border:1.5px dashed color-mix(in srgb,var(--encre) 45%,transparent);border-radius:999px;white-space:normal;color:var(--encre)}
.manque-court:hover{border-style:solid;background:color-mix(in srgb,var(--encre) 6%,transparent)}
/* Le site vient d'ouvrir : une phrase, un geste principal, un geste secondaire. */
html[data-editorial] .barre .barre-accueil{flex-basis:100%;text-align:left;font-size:15px;line-height:1.45}
html[data-editorial] .barre .barre-accueil b{display:block;font:500 clamp(22px,2.4vw,28px)/1.15 "Fraunces",Georgia,serif;letter-spacing:-.02em;margin-bottom:6px}
html[data-editorial] .barre .barre-accueil span{color:var(--encre2)}
html[data-editorial] .barre .barre-principal{background:var(--accent);border-color:var(--accent);color:var(--sur);font-weight:650}
html[data-editorial] .barre .barre-principal:hover{background:var(--encre);border-color:var(--encre);color:var(--fond)}
html[data-editorial] .barre:has(.barre-accueil){justify-content:flex-start;padding:22px 24px;border:1.5px solid color-mix(in srgb,var(--encre) 22%,transparent);border-radius:16px;max-width:min(720px,calc(100% - 32px))}
html[data-editorial] .barre{position:static;inset:auto;translate:none;transform:none;max-width:calc(100% - 32px);width:auto;margin:24px auto;padding:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;border-radius:8px;background:var(--fond);color:var(--encre);box-shadow:none;font:400 14px/1.5 "Archivo",sans-serif}
html[data-editorial] .barre[hidden]{display:none}
html[data-editorial] .barre a,html[data-editorial] .barre button{white-space:normal;max-width:100%;min-height:44px;display:inline-flex;align-items:center;padding:10px 14px;overflow-wrap:anywhere;flex-shrink:1}
html[data-editorial] .barre-texte{flex-basis:100%;display:block;text-align:center}
html[data-editorial] .barre-boutons{display:flex;flex-wrap:wrap;gap:8px}
html[data-editorial] .pied-nom{display:none}
@media(max-width:760px){
 html[data-editorial] .editorial-tete{padding:16px 24px 0;gap:12px}html[data-editorial] .editorial-tete nav{display:none}
 html[data-editorial] .editorial-entree{display:block;padding-top:32px;gap:0}
 html[data-editorial] .accroche{font-size:clamp(36px,10.25vw,44px);max-width:100%;line-height:1.08}
 html[data-editorial] .surtitre{margin-bottom:12px;font-size:14px}
 html[data-editorial] .sous{font-size:17px;margin-top:16px}
 html[data-editorial] .localisation{font-size:17px;margin-top:16px}
 html[data-editorial] .entree-image{margin-top:24px}
 html[data-editorial] .entree-image img{height:auto;max-height:280px;object-fit:contain;object-position:left center}
 html[data-editorial] .editorial-section{margin-top:44px}
 html[data-editorial] .editorial-section h2{font-size:30px;margin-bottom:16px}
 html[data-editorial] .liste-offres li{padding:20px 0;gap:12px;flex-wrap:wrap}
 html[data-editorial] .liste-offres h3{font-size:24px}
 html[data-editorial] .liste-offres p,html[data-editorial] .presentation{font-size:17px}
 .prix{font-size:16px;max-width:100%}.editorial-galerie{grid-template-columns:1fr;gap:24px}
 html[data-editorial] .editorial-pied{margin-top:44px;padding:24px;gap:12px 20px}
 html[data-editorial] .barre{max-width:calc(100% - 24px);margin:24px 12px;padding:12px}
 .edition-note>p{display:block}.edition-note>p a{margin-left:12px}
}
html[data-editorial] #barre .barre-modifier{flex:0 0 auto;min-width:0;height:auto;min-height:44px;overflow-wrap:normal;word-break:normal;white-space:normal}
html[data-editorial] #barre .barre-retour{display:none}
html[data-editorial] #barre .barre-texte{display:block;flex:1 0 100%}

/* Corrections communes : réserve du contact, cadres stables, galerie composée. */
html[data-editorial] .entree-image img{width:100%;height:100%;max-height:none;object-fit:cover}
html[data-editorial] .entree-image{aspect-ratio:4/3;overflow:clip}
html[data-editorial] .entree-image picture{display:block;width:100%;height:100%}
.editorial-galerie{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.editorial-galerie figure{grid-column:span 2;aspect-ratio:4/3;overflow:clip}
.editorial-galerie picture,.editorial-galerie img{display:block;width:100%;height:100%;object-fit:cover}
html[data-editorial] .fait{position:static;translate:none;box-shadow:none;border-radius:4px;justify-content:space-between;max-width:520px;margin:16px 0 0;font-size:15px}
.appel-mobile{display:none}
@media(max-width:760px){
 html[data-editorial][data-appel] body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
 .appel-mobile{position:fixed;inset:auto 0 0;z-index:45;display:flex;justify-content:space-between;align-items:center;min-height:64px;padding:16px 24px calc(16px + env(safe-area-inset-bottom,0px));background:var(--accent);color:var(--sur);font:600 18px/1.5 "Archivo",sans-serif;text-decoration:none;border-top:1px solid var(--fond)}
 .appel-mobile:focus-visible{outline-offset:-5px}
 .editorial-galerie{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .editorial-galerie figure{grid-column:span 1;aspect-ratio:1/1}
 .editorial-galerie figure:first-child{grid-column:span 2;aspect-ratio:2/1}
 html[data-editorial] .entree-image{aspect-ratio:4/3;max-height:280px}
 html[data-editorial] .entree-image img{max-height:none;height:100%}
}
html[data-editorial] .btn--plein{background:var(--accent);border-color:var(--accent);color:var(--sur)}

/* Composition fluide : seuls les paragraphes gardent une largeur de lecture. */
html[data-editorial] .editorial-tete,.editorial-main,html[data-editorial] .editorial-pied{max-width:none;width:100%}
/* Le lien d'évitement : invisible tant qu'on ne tabule pas, puis premier élément atteint (veille du 22/09). */
.aller-contenu{position:absolute;left:-9999px;top:0;z-index:99;padding:12px 18px;background:var(--encre);color:var(--fond);font:650 15px/1 "Archivo",sans-serif;text-decoration:none;border-radius:0 0 10px 0}
.aller-contenu:focus{left:0}
/* Le geste de clôture : le même bouton qu'en ouverture, au bas de la page. */
.geste-fin{margin:28px 0 0;display:flex;flex-wrap:wrap;gap:12px}
/* Cibles tactiles (WCAG 2.5.8, veille du 22/09) : 24 px au moins pour tout ce qui se touche. L'enseigne de l'en-tête
   et les liens du pied tombaient à 20-23 px — assez pour la souris, pas pour un pouce. */
html[data-editorial] .editorial-tete .enseigne{display:inline-flex;align-items:center;min-height:32px}
html[data-editorial] .editorial-pied a{display:inline-flex;align-items:center;min-height:28px}

/* « Ouvert · ferme à 19 h » et les fermetures exceptionnelles (module horaires, 24/09) : une information datée, qui s'éteint seule. */
.ouvert-maintenant { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; font-weight: 600; font-size: 15px; }
.ouvert-maintenant i { width: 9px; height: 9px; border-radius: 50%; background: #9a948c; }
.ouvert-maintenant.ouvert i { background: #1f8a4c; }
.bandeau-fermeture { margin: 0; padding: 12px 5%; background: var(--encre); color: var(--fond); font-weight: 600; font-size: 15px; text-align: center; }
.grille-horaires { display: grid; gap: 4px; margin: 0; }
.grille-horaires div { display: flex; justify-content: space-between; gap: 18px; max-width: 360px; }
.grille-horaires dt { font-weight: 600; } .grille-horaires dd { margin: 0; }
/* « Voir nos avis sur Google » (module avis, 24/09) : un lien vers SES avis, jamais une note recopiée. */
.avis-google { margin: 14px 0 0; } .avis-google a { font-weight: 650; text-underline-offset: 4px; color: inherit; }
/* Les mentions fixes de métier (garde-fous, 24/09) : lisibles, jamais retirables. */
.mention-metier { margin: 12px 0 0; font-size: 14px; opacity: .85; }
.pied .mention-metier { width: 100%; margin: 0 0 8px; }
/* « Avant que je me déplace » (24/09) : les tarifs de dépannage, près du contact et pas seulement sur la page légale. */
.avant-deplacement { margin: 18px 0 0; }
.avant-deplacement dl { display: grid; gap: 6px; margin: 8px 0 0; }
.avant-deplacement dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; max-width: 520px; }
.avant-deplacement dt { font-weight: 600; } .avant-deplacement dd { margin: 0; }
/* La réservation (vague 4, 24/09) : le premier temps sur la page, les heures libres sur /reserver. */
.reserver-forme { display: grid; gap: 12px; max-width: 520px; margin-top: 18px; }
.reserver-forme select { width: 100%; min-height: 52px; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--encre2); background: var(--fond); color: var(--encre); font: inherit; font-size: 16px; }
.reserver-forme button { justify-self: start; min-height: 52px; border: 0; cursor: pointer; font: inherit; font-weight: 650; }
/* La carte en ligne et l'ardoise du jour (24/09) */
.ardoise { margin: 0; padding: 14px 5%; background: var(--fond2); border-bottom: 1px solid var(--encre2); }
.ardoise h2 { margin: 0 0 4px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.ardoise ul { margin: 0; padding: 0; list-style: none; font-weight: 600; }
.carte-section h3 { margin: 26px 0 8px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.carte-plats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 760px; }
.carte-plats li { border-top: 1px solid color-mix(in srgb, var(--encre) 15%, transparent); padding-top: 12px; }
.plat-tete { display: flex; justify-content: space-between; gap: 16px; } .plat-tete .prix { font-weight: 700; white-space: nowrap; }
.carte-plats p { margin: 4px 0 0; opacity: .85; } .carte-plats .origine { font-size: 14px; }
.allergenes { display: flex; flex-wrap: wrap; gap: 6px; } .pastille { font-size: 12.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; }
.carte-plats .epuise b, .carte-plats .epuise .prix { text-decoration: line-through; opacity: .6; } .epuise-dit { font-weight: 700; opacity: 1 !important; }
.allergie { margin-top: 18px; font-weight: 600; } .carte-lien { margin-top: 14px; } .carte-lien a { font-weight: 650; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Les réalisations (vague 3, 24/09) : des albums, une paire avant / après côte à côte. */
.albums { display: grid; gap: 34px; margin-top: 18px; }
.album h3 { margin: 0; } .album-dit { margin: 4px 0 10px; opacity: .8; }
.avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 780px; }
.album-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; max-width: 780px; }
.album figure { margin: 0; } .album img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; background: var(--fond2); }
.album figcaption { font-size: 14px; margin-top: 4px; font-weight: 600; }
/* Les contenus déclarés (vague 3, 24/09) */
.bandeau-jour { margin: 0; padding: 12px 5%; background: var(--fond2); border-bottom: 1px solid var(--encre2); font-weight: 600; text-align: center; }
.bandeau-jour.urgences { background: var(--encre); color: var(--fond); } .bandeau-jour a { color: inherit; font-weight: 700; margin-left: 8px; }
.liste-dates { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.liste-dates li { display: grid; gap: 2px; border-top: 1px solid color-mix(in srgb, var(--encre) 15%, transparent); padding-top: 10px; }
.liste-dates .annulee { opacity: .55; text-decoration: line-through; }
.zone .communes { font-weight: 600; max-width: 760px; } .zone-question { grid-template-columns: 1fr auto; align-items: end; }
.zone-question .btn { min-height: 52px; } .zone-reponse { margin-top: 10px; font-weight: 700; }
.bon-a-savoir ul { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.faq details { border-top: 1px solid color-mix(in srgb, var(--encre) 15%, transparent); padding: 12px 0; max-width: 760px; }
.faq summary { cursor: pointer; font-weight: 650; } .faq details p { margin: 8px 0 0; white-space: pre-line; }
/* Le catalogue (vague 5, 24/09) */
.catalogue-groupe h3 { margin: 24px 0 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.articles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.article { display: grid; gap: 6px; align-content: start; }
.article img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--fond2); }
.article p { margin: 0; opacity: .85; font-size: 15px; } .article-bas { display: flex; justify-content: space-between; gap: 10px; font-weight: 650; opacity: 1 !important; }
.article .etat { font-size: 13px; font-weight: 600; opacity: .8; } .article.indisponible { opacity: .6; }
.article .btn { justify-self: start; min-height: 44px; }
/* Assurances et qualifications (vague 3, 24/09) : vérifié ou déclaré, et dit comme tel. */
.qualifications ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 760px; }
.qualifications li span { opacity: .8; } .qualifications .verifie { font-size: 14px; opacity: .75; }
.sessions .liste-dates .btn { justify-self: start; min-height: 44px; margin-top: 6px; }
/* L'estimation en ligne (vague 5, 24/09) : un formulaire GET, sans script. */
.estimer { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; max-width: 860px; margin-top: 14px; }
.estimer label { display: grid; gap: 6px; font-size: 15px; min-width: 0; }
.estimer select, .estimer input { min-height: 48px; width: 100%; box-sizing: border-box; padding: 0 12px; font: inherit; color: var(--encre); background: var(--fond);
  border: 1px solid color-mix(in srgb, var(--encre) 30%, transparent); border-radius: 10px; }
.estimer .btn { min-height: 48px; }
.estimer-dit { margin-top: 10px; font-size: 14px; opacity: .75; }
@media (max-width: 760px) { .estimer { grid-template-columns: 1fr; } .estimer .btn { width: 100%; } }
/* Les formules et la fidélité (vague 6, 24/09) */
.liste-formules { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; max-width: 860px; }
.liste-formules li { display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, var(--encre) 15%, transparent); padding-top: 14px; }
.liste-formules h3 { margin: 0 0 4px; }
.liste-formules p { margin: 0; }
.formule-prix b { font-size: 1.15em; }
.liste-formules .btn { min-height: 46px; }
.fidelite { margin-top: 16px; font-weight: 600; }
/* Les formes de la demande (24/09) : la date, l'avertissement du sur-mesure, « Ce n'est pas mon domaine », le formulaire des groupes. */
.ecrire input[type=date] { width: 100%; min-height: 52px; padding: 13px 15px; border-radius: 12px; border: 1.5px solid transparent; background: var(--fond); color: var(--encre); font: inherit; font-size: 16px; font-weight: 400; }
.ecrire-avertissement { font-size: 14px; line-height: 1.45; opacity: .85; }
.hors-champ summary { cursor: pointer; font-size: 14px; }
.groupe .ecrire { max-width: 760px; margin-top: 14px; }
.groupe .ecrire-titre { display: none; }  /* la section porte déjà le titre : pas deux fois « groupe » l'un sous l'autre */
.bandeau-jour.prevente a { font-weight: 650; margin-left: 6px; white-space: nowrap; }
/* Les séjours (vague 4, 24/09) : la recherche du site, un formulaire GET sans script. */
.sejour-cherche { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sejour-cherche .btn { align-self: end; }
/* Les bons cadeaux (vague 5, 24/09) */
.offrir-dit { max-width: 60ch; margin: 12px 0 16px; }
/* Les promotions (vague 5, 24/09) : immobile — ni clignotement, ni compte à rebours. */
.article-bas s { opacity: .6; font-weight: 400; margin-right: 4px; }
.badge-promo { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1.5px solid currentColor; }
.promo-fin { font-size: 13px; opacity: .75; }

/* ==========================================================================
   Refonte des démos (24/09) — ce qui vaut pour les trois styles ; le thème boutique va plus loin dans signatures.css.
   ========================================================================== */
@font-face { font-family: "PlexMono"; src: url("plexmono-fr.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* La barre d'un EXEMPLE (exports publics seulement) : fine, lisible, elle ne mange plus le premier regard. */
.exemple-public { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 18px; min-height: 36px; padding: 4px var(--marge, 5%);
  background: var(--fond2); color: var(--encre); font: 500 11.5px/1.3 "PlexMono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.exemple-public a { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; color: inherit; text-underline-offset: 3px; }
@media (max-width: 520px) { .exemple-public { flex-wrap: nowrap; font-size: 10.5px; letter-spacing: .03em; padding-inline: 20px; } .exemple-public a { flex: none; } }
/* Le geste de l'en-tête : le même verbe que le bouton d'ouverture. */
html[data-editorial] .geste-tete { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; flex: none;
  background: var(--accent); color: var(--sur); font: 600 14.5px/1.1 "Archivo", sans-serif; text-decoration: none; border-radius: 4px; white-space: nowrap; }
html[data-editorial] .geste-tete:hover { background: var(--encre); color: var(--fond); }
html[data-editorial] .editorial-tete { display: flex; align-items: center; gap: 16px 24px; }
html[data-editorial] .editorial-tete nav { margin-left: auto; }
@media (max-width: 1100px) { .geste-numero { display: none; } }
/* Les faits déclarés, en une ligne ; le bandeau qui défile (café, fleuriste). */
.faits { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 12px/1.5 "PlexMono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--encre2); }
.bandeau-mots { overflow: clip; border-block: 1px solid color-mix(in srgb, var(--encre) 18%, transparent); }
.bandeau-piste { display: flex; width: max-content; }
.bandeau-mots ul { list-style: none; margin: 0; padding: 14px 0; display: flex; }
.bandeau-mots li { padding: 0 1.2em; white-space: nowrap; }
.entree-horaires { margin: 14px 0 0; font-size: 15px; line-height: 1.45; }
.fiche-tarifs { margin-top: 28px; }
.fiche-tarifs dl { margin: 8px 0 0; display: grid; gap: 6px; }
.fiche-tarifs dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; max-width: 520px; }
.fiche-tarifs dt { font-weight: 600; } .fiche-tarifs dd { margin: 0; }
.fiche-titre { font-weight: 650; }
/* Le pied : le nom en grand. */
html[data-editorial] .pied-enseigne { flex-basis: 100%; margin: 0 0 12px; font: 500 clamp(34px, 6vw, 72px)/1 var(--titre); letter-spacing: -.03em; overflow-wrap: anywhere; }
.pied-fictif { flex-basis: 100%; margin: 0; }
/* Les pastilles d'allergènes de la carte héritaient de la taille des pastilles du nuancier (46 px de côté). */
.allergenes .pastille { width: auto; height: auto; flex: none; background: none; box-shadow: none; border: 1px solid currentColor; cursor: default; }
/* LA BARRE RESTE À L'ÉCRAN (25/09). Le dirigeant : « cela doit rester sur l'écran, car je suis sur le site en plein écran et ça peut me
   perdre ». Posée en fin de page (sous le pied sombre), la carte « Votre site est ouvert » ne se voyait qu'en arrivant tout en bas. Elle
   flotte désormais en bas de l'écran, sombre et à nos couleurs — c'est notre outil, pas une section de son site —, et la page lui
   réserve sa hauteur pour qu'elle ne cache jamais le dernier mot. Le mode essai (.barre--mode, en haut) garde sa place. Sélecteurs par #barre :
   une règle plus ancienne (« #barre .barre-texte{flex:1 0 100%} ») poussait sinon les boutons hors de la pastille. */
html[data-editorial] body:has(.barre:not([hidden]):not(.barre--mode)){padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
html[data-editorial] #barre.barre:not(.barre--mode){position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:60;
  margin:0;width:min(900px,calc(100% - 24px));max-width:none;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:10px;
  padding:10px 10px 10px 20px;border-radius:18px;border:1px solid #ffffff1f;background:#121113eb;color:#f4f1ec;
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 22px 50px -20px #000000a6;font:400 14px/1.35 "Archivo",sans-serif}
html[data-editorial] #barre.barre:not(.barre--mode):has(.barre-accueil){max-width:none;padding:10px 10px 10px 20px;border:1px solid #ffffff1f;border-radius:18px;justify-content:flex-start}
html[data-editorial] #barre.barre:not(.barre--mode) .barre-texte{flex:1 1 auto;min-width:0;text-align:left;font-size:14px;color:#f4f1ec}
html[data-editorial] #barre.barre:not(.barre--mode) .barre-texte b,html[data-editorial] #barre.barre:not(.barre--mode) .barre-accueil b{display:inline;font:650 15px/1.3 "Archivo",sans-serif;letter-spacing:0;margin:0;color:#fff}
html[data-editorial] #barre.barre:not(.barre--mode) .barre-texte span{color:#c9c4bc}
html[data-editorial] #barre.barre:not(.barre--mode) .barre-modifier{flex:none;height:46px;min-height:46px;padding:0 16px;border-radius:12px;border:1px solid #ffffff38;background:transparent;color:#fff;font:600 15px/1 "Archivo",sans-serif;white-space:nowrap;text-decoration:none}
html[data-editorial] #barre.barre:not(.barre--mode) .barre-modifier:hover{background:#ffffff14;border-color:#ffffff70;color:#fff}
html[data-editorial] #barre.barre:not(.barre--mode) .barre-principal{background:#D23C25;border-color:#D23C25;color:#fff}
html[data-editorial] #barre.barre:not(.barre--mode) .barre-principal:hover{background:#AE2E1A;border-color:#AE2E1A;color:#fff}
html[data-editorial] #barre.barre:not(.barre--mode) .barre-retour{flex:none;color:#9d978f;font-size:13px;padding:0 6px}
html[data-editorial] #barre.barre:not(.barre--mode) .barre-retour:hover{color:#fff}
/* Masquée par le panneau « Couleurs et style » (attribut hidden) : un display d'auteur l'emporterait sur l'attribut — même piège que .barre-forme. */
html[data-editorial] #barre.barre[hidden]{display:none!important}
/* Sur son propre site, la barre du visiteur (Appeler, Offres) cèderait sous la nôtre : elle se range tant que la nôtre est là. */
html[data-editorial] body:has(.barre:not([hidden]):not(.barre--mode)) .navigation-mobile{display:none}
@media(max-width:700px){
  html[data-editorial] #barre.barre:not(.barre--mode){gap:8px;padding:8px;border-radius:16px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  html[data-editorial] #barre.barre:not(.barre--mode) .barre-texte,html[data-editorial] #barre.barre:not(.barre--mode) .barre-retour{display:none!important}
  html[data-editorial] #barre.barre:not(.barre--mode) .barre-modifier{flex:1 1 0;min-width:0;padding:0 10px;font-size:14.5px;white-space:normal;line-height:1.1;text-align:center;justify-content:center}
  html[data-editorial] #barre.barre:not(.barre--mode) .barre-principal{flex-grow:1.6}
}