/* Pallier — app/vitrine.css — V127 : le gabarit commun des pages de la vitrine (maquette operations/maquettes-lot-b-2026-10-17/,
   ressources/vitrine.css, validée par HB le 18/10 ; NOTE.md § 1 et § 7). Une seule feuille pour toutes les pages de la vitrine :
   l’en-tête, le menu du téléphone, le fil d’Ariane, les titres, les cartes, les plis, le pied, la barre d’action du téléphone.
   Le balisage commun est posé par app/vitrine.js ; la police vient de app/polices.css (servie par nous, V55).
   Charte : crème, forêt, lime, abricot doux, ciel ; Gabarito 600-900 ; traits 2,5 px ; coins très arrondis.
   Style allégé « A » (HB, 11/10) : pas de mot surligné (réservé à l’accueil), pas de flèche dans les boutons, pas d’étiquette en
   capitales au-dessus des titres, l’ombre dure seulement sur ce qu’on touche (boutons, cartes-liens). Les pages défilent (HB,
   18/10) : la promesse et le bouton au premier écran, le bouton en bas pendant toute la lecture. */
:root{--foret:#12312A;--foret-doux:#41625A;--creme:#FFFCF4;--creme-2:#F9F3E7;--blanc:#fff;--lime:#CFE996;--lime-doux:#EEF6DC;
  --lime-ombre:#9DBC62;--abricot:#F3A57F;--abricot-doux:#FCEBE1;--ciel:#AEDCE8;--ciel-doux:#E7F3F7;--r:22px;--trait:2.5px solid var(--foret);
  color-scheme:light only}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--creme);color:var(--foret);font-family:'Gabarito',-apple-system,sans-serif;font-size:16.5px;line-height:1.5;
  font-weight:600;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}   /* le verrou (règle d’atelier n° 2) : aucune règle display ne rouvre un élément caché */
svg.ico{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.cadre{max-width:1200px;margin:0 auto;padding:0 20px}
@media (min-width:900px){.cadre{padding:0 48px}}
.sr-seul{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--foret);outline-offset:3px}
/* V127 (testeur) : sur le fond forêt (le pied, la barre du téléphone), un contour forêt ne se voit pas (1 pour 1) : lime */
.pied :focus-visible,.barre-tel :focus-visible{outline-color:var(--lime)}
[tabindex="-1"]:focus{outline:none}   /* la partie où mène un lien d’ancre (menu) reçoit le focus sans cadre autour de toute la section */

/* ── l’en-tête ── */
.tete{position:sticky;top:0;z-index:20;background:var(--creme);border-bottom:2px solid rgba(18,49,42,.08)}
.tete-l{display:flex;align-items:center;gap:14px;height:64px}
@media (max-width:399px){.tete-l{gap:12px}}   /* « Vous cherchez un artisan ? » et le bouton Menu tiennent dans 390 px (14 px : 1,6 px de trop) */
.marque{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto;min-height:44px;margin:-4px 0}   /* V149 (testeurs des V144 et V145) : une zone de 44 px de haut au doigt (le sigle en fait 36), sans rien changer à ce qui se voit : les marges négatives rendent les 8 px que le lien prend en plus */
.marque .sigle{width:36px;height:36px}
.marque .mot{font-weight:900;font-size:1.36rem;letter-spacing:-.045em}
.marque .mot em{font-style:normal;color:#8FB25A}
.nav{display:none}
.autre{margin-left:auto;font-weight:800;font-size:.94rem;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;
  min-height:44px;display:flex;align-items:center;white-space:nowrap}
.cta-tete{display:none!important}
.sans-autre .marque{margin-right:auto}   /* V144 : sans « Vous cherchez un artisan ? » (éteint), le reste de l’en-tête va à droite (maquette B) */
/* V159 — « Mon Espace » (maquette operations/maquettes-audit-2026-10-24/, § 3, telle quelle : 44 px de haut, l’icône personne, collé au
   bouton Menu ou au bouton de l’en-tête). Sous 360 px, l’icône seule (le mot reste lu par les lecteurs d’écran) : le logo, le lien et le
   bouton Menu tiennent alors jusqu’à 320 px. Sur la page « Retrouver mon Espace », souligné de lime, comme la navigation. */
.tete .mon-espace{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 6px;font-weight:800;font-size:.98rem;color:var(--foret);
  text-decoration:none;margin-left:auto;margin-right:10px;white-space:nowrap;flex:0 0 auto}
.tete .mon-espace svg{width:20px;height:20px}
.tete .mon-espace[aria-current] span{text-decoration:underline;text-decoration-color:var(--lime-ombre);text-decoration-thickness:3px;text-underline-offset:6px}
@media (max-width:359px){
  .tete .mon-espace{min-width:44px;justify-content:center;margin-right:2px}
  .tete .mon-espace span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
@media (min-width:1120px){.tete .mon-espace{margin-left:0;margin-right:18px}}   /* V155 : à l’ordinateur, l’accueil a la navigation, « Mon Espace » et le bouton sur la même ligne */
.rond{width:44px;height:44px;border-radius:50%;border:var(--trait);background:var(--creme-2);display:grid;place-items:center;color:var(--foret);
  box-shadow:0 3px 0 var(--foret);cursor:pointer;flex:0 0 auto;padding:0;font:inherit}
@media (min-width:900px){
  .tete-l{height:84px;gap:34px}
  .autre{font-size:1rem}
  .cta-tete{display:inline-flex!important;min-height:50px!important;font-size:1rem!important;padding:0 22px!important}
}
/* V141 — la navigation de l’en-tête à partir de 1 120 px seulement : il lui faut 1 039 px (mesuré), et de 900 à 1 119 px elle cassait
   (« Les / prix » sur deux lignes : un iPad en paysage, un portable à 125 %, un navigateur zoomé ; relevé du testeur de la V140).
   Entre les deux, ses liens sont dans le bouton Menu, comme au téléphone ; « Vous êtes artisan ? » et le bouton restent dans l’en-tête. */
@media (min-width:1120px){
  .nav{display:flex;gap:28px}
  .nav a{text-decoration:none;font-weight:800;font-size:1rem;padding:8px 0;border-bottom:3px solid transparent;min-height:44px;display:flex;align-items:center;white-space:nowrap}   /* 44 px (la maquette : 43) */
  .nav a[aria-current]{border-bottom-color:var(--lime-ombre)}
  .tete .menu{display:none}
  .tete .mon-espace{margin-left:0;margin-right:18px}   /* V159 : après la navigation, avant le bouton (maquette 01b) */
}

/* ── les boutons ── */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border:var(--trait);
  border-radius:999px;background:var(--lime);color:var(--foret);font-weight:900;font-size:1.06rem;text-decoration:none;
  box-shadow:0 5px 0 var(--foret);white-space:nowrap}
.cta:active{transform:translateY(2px);box-shadow:0 3px 0 var(--foret)}
.cta.clair{background:var(--blanc)}
.lien{font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;display:inline-flex;align-items:center;
  gap:8px;min-height:44px}

/* ── la barre d’action du téléphone : l’action principale, en bas, à portée de pouce ── */
.barre-tel{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--foret);padding:12px 20px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0}
.barre-tel .cta{width:100%;box-shadow:0 5px 0 var(--lime-ombre)}
body.avec-barre{padding-bottom:92px}
/* V144 — l’offre sous le bouton (l’accueil de l’outil, maquette B : « 2 mois offerts, sans carte bancaire ») */
.barre-tel.avec-offre{padding-bottom:max(14px,env(safe-area-inset-bottom));text-align:center}
.barre-tel .offre{color:#C9D8CF;margin-top:11px;font-size:.86rem;font-weight:700;line-height:1.35}
.barre-tel .offre b{color:var(--creme)}
body.avec-barre.avec-offre{padding-bottom:118px}
@media (min-width:900px){body.avec-barre.avec-offre{padding-bottom:0}}
@media print{body.avec-barre.avec-offre{padding-bottom:0}}
@media (min-width:900px){.barre-tel:not(.mf-barre){display:none!important}body.avec-barre{padding-bottom:0}}   /* V141 : la barre du menu reste dans le menu (900 à 1 119 px) */

/* ── le menu du téléphone, ouvert (maquette 8a) : plein écran, rien ne défile, « Fermer » à la place du bouton Menu ── */
.menu-feuille{position:fixed;inset:0;z-index:50;background:var(--creme);display:flex;flex-direction:column}
.menu-feuille:focus{outline:none}
body.menu-ouvert{overflow:hidden}
.menu-feuille>.tete-l{flex:0 0 auto;width:100%;height:66px;border-bottom:2px solid rgba(18,49,42,.08)}   /* 64 px + le trait : « Fermer » à la place exacte du bouton Menu */
.mf-fermer{margin-left:auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 18px 0 13px;border:var(--trait);
  border-radius:999px;background:var(--creme-2);color:var(--foret);font:inherit;font-weight:800;font-size:.98rem;
  box-shadow:0 3px 0 var(--foret);cursor:pointer}
.mf-fermer svg{width:18px;height:18px;stroke-width:2.8}
.mf-corps{flex:1 1 auto;overflow-y:auto;padding:10px 20px 112px}
.mf-nav{display:flex;flex-direction:column}
.mf-nav a{display:flex;align-items:center;min-height:62px;font-size:1.5rem;font-weight:900;letter-spacing:-.03em;line-height:1.15;text-decoration:none;
  border-bottom:2px solid rgba(18,49,42,.08)}
.mf-nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--lime-ombre);text-decoration-thickness:4px;text-underline-offset:7px}
.mf-autres{display:flex;flex-direction:column;margin-top:18px}
.mf-autres a{display:flex;align-items:center;gap:12px;min-height:52px;font-size:1.08rem;font-weight:800;text-decoration:none}
.mf-autres svg{width:22px;height:22px}
@media (min-width:900px){   /* V141 : le menu de 900 à 1 119 px (testeur) */
  .menu-feuille>.tete-l{height:86px}   /* 84 px + le trait : « Fermer » à la place exacte du bouton Menu */
  .mf-corps,.mf-barre{padding-left:48px;padding-right:48px}   /* les liens alignés sur le logo, comme le cadre */
  .mf-barre .cta{display:flex;max-width:440px;margin:0 auto}   /* le bouton à sa taille, pas de bord à bord */
}
@media (min-width:1120px){.menu-feuille{display:none!important}}

/* ── le fil d’Ariane, les titres ── */
.ariane{display:flex;align-items:center;gap:6px;font-size:.86rem;font-weight:700;color:var(--foret-doux);padding:16px 0 6px;flex-wrap:wrap}
.ariane a{text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:30px}
.ariane svg{width:14px;height:14px}
h1{font-size:2.05rem;font-weight:900;letter-spacing:-.035em;line-height:1.06}
h2{font-size:1.5rem;font-weight:900;letter-spacing:-.03em;line-height:1.12}
h3{font-size:1.08rem;font-weight:900;letter-spacing:-.015em;line-height:1.2}
.chapo{font-size:1.06rem;font-weight:700;color:var(--foret-doux);line-height:1.45}
.doux{color:var(--foret-doux)}
.petit{font-size:.88rem;font-weight:600;color:var(--foret-doux);line-height:1.45}
@media (min-width:900px){h1{font-size:3.3rem}h2{font-size:2.1rem}.chapo{font-size:1.22rem}}

/* ── les sections et les cartes ── */
.section{padding:34px 0}
.section+.section{border-top:2px solid rgba(18,49,42,.07)}
@media (min-width:900px){.section{padding:64px 0}}
.carte{background:var(--blanc);border:var(--trait);border-radius:var(--r);padding:18px 20px}
.carte.toucher{box-shadow:0 5px 0 var(--foret);text-decoration:none;display:block}
.carte.creme{background:var(--creme-2)}
.carte.ciel{background:var(--ciel-doux)}
.carte.abricot{background:var(--abricot-doux)}
.carte.lime{background:var(--lime-doux)}
.puce{width:40px;height:40px;border-radius:50%;border:var(--trait);display:grid;place-items:center;background:var(--lime);flex:0 0 auto}
.puce svg{width:20px;height:20px}
.num{width:38px;height:38px;border-radius:50%;border:var(--trait);display:grid;place-items:center;background:var(--lime);font-weight:900;flex:0 0 auto}
/* V130 — les trois garanties sous la promesse (maquette ressources/vitrine.css, telle quelle) */
.garanties{display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:800;font-size:.95rem}
.garanties span{display:inline-flex;align-items:center;gap:7px}
.garanties svg{width:22px;height:22px}

/* ── la photo réelle, toujours dans un cadre ── */
.photo{position:relative;border:var(--trait);border-radius:var(--r);overflow:hidden;background:var(--creme-2)}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
/* V130 — la légende posée sur la photo (« Il voit votre photo avant de venir. », maquette 1a) */
.legende{position:absolute;left:12px;bottom:12px;right:12px;display:flex;align-items:center;gap:8px;background:rgba(18,49,42,.88);color:var(--creme);
  border-radius:14px;padding:9px 12px;font-size:.88rem;font-weight:800;line-height:1.3}
.legende svg{width:18px;height:18px}

/* ── V130 · la carte d’un guide (photo et titre, on la touche : ombre dure), « Plombier à Houilles » et « Guides » (maquette 1a) ── */
.carte.guide{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding:12px;color:var(--foret)}
.guide .photo{height:96px;border-radius:16px}
.guide h3{margin-bottom:4px}
@media (min-width:900px){.guide{grid-template-columns:200px 1fr;max-width:760px;padding:16px;gap:28px}.guide .photo{height:140px}.guide h3{font-size:1.4rem}}

/* ── V130 · la bande de fin, lime (maquette 1a ; « Pour les artisans » garde la sienne, son écart de 12 px) ── */
.fin{background:var(--lime);border-top:var(--trait)}
.fin .cadre{display:grid;gap:16px;padding-top:34px;padding-bottom:34px}
.fin .cta{display:none}
@media (min-width:900px){.fin .cadre{grid-template-columns:1fr auto;align-items:center;padding-top:56px;padding-bottom:56px}.fin .cta{display:inline-flex}}

/* ── les plis (questions fréquentes) ── */
details{border-top:2px solid rgba(18,49,42,.1)}
details:last-child{border-bottom:2px solid rgba(18,49,42,.1)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 0;font-weight:900;font-size:1.04rem}
summary::-webkit-details-marker{display:none}
summary svg{margin-left:auto;width:22px;height:22px;transition:transform .2s}
details[open] summary svg{transform:rotate(180deg)}
details .rep{padding:0 0 16px;color:var(--foret-doux);font-weight:600;max-width:62ch}
@media (prefers-reduced-motion:reduce){summary svg{transition:none}}

/* ── le pied ── */
.pied{background:var(--foret);color:var(--creme);padding:34px 0 26px;margin-top:0}
.pied .marque .mot{color:var(--creme)}
.pied .marque .mot em{color:var(--lime)}
.pgrille{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px}
.pmarque{grid-column:1/-1}
.pmarque p{margin-top:10px;color:#C9D6CF;font-size:.92rem;max-width:34ch}
.pcol{display:flex;flex-direction:column;gap:2px}
.pt{font-weight:900;color:var(--lime);font-size:.95rem;margin-bottom:4px}
.pcol a{text-decoration:none;font-weight:700;font-size:.92rem;color:var(--creme);min-height:32px;display:flex;align-items:center;line-height:1.25;position:relative}
/* V149 (testeurs des V144 et V145) : une zone de 44 px de haut au doigt (le lien en fait 32, ou 37 sur deux lignes), sans rien changer à ce qui se voit : la zone est un élément
   sans contenu, centré sur le lien, qui ne prend aucune place. Les liens sont à 34 px les uns des autres : deux voisins se partagent 10 px ; le premier et le dernier de la colonne ont leurs 44 px. */
.pcol a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.pcol a.choisit{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:4px}
.pbas{margin-top:24px;padding-top:18px;border-top:1.5px solid rgba(255,252,244,.18);color:#C9D6CF;font-size:.82rem;line-height:1.5}
@media (min-width:900px){
  .pied{padding:56px 0 34px}
  .pgrille{grid-template-columns:1.3fr repeat(var(--cols,4),1fr);gap:30px}
  .pmarque{grid-column:auto}
  .pcol a{font-size:.96rem}
}
/* V139 — les ancres (un élément avec un id) arrivent sous l’en-tête collant : 84 px au téléphone, 104 px sur ordinateur. Le focus du
   clavier est gardé hors de l’en-tête et de la barre par app/vitrine.js (pas de scroll-padding : il faisait sauter la page à
   l’ouverture du menu). */
main [id]{scroll-margin-top:84px}
@media (min-width:900px){main [id]{scroll-margin-top:104px}}
/* V133 (testeur, B1) : à l’impression et en « Enregistrer en PDF », ni barre d’action ni menu, et l’en-tête ne se répète pas sur
   chaque feuille : ils cachaient deux lignes de texte en bas de chaque page (dont des textes juridiques). Rien ne change à l’écran. */
@media print{.tete{position:static}.barre-tel,.menu-feuille{display:none!important}body.avec-barre{padding-bottom:0}}

/* V154 (audit du 24/10) : l'avis en tête des pages de l'ancienne vitrine, interrupteur éteint (data-mer) */
.avis-sommeil{background:#FCEBE1;border:2.5px solid #12312A;border-radius:14px;padding:11px 15px;margin:0 0 20px;font-weight:600;line-height:1.45;grid-column:1/-1}   /* grid-column : dans une grille à deux colonnes (guide-fuite, comment-choisit à 1440), toute la largeur (testeur V154, C2 et C3) */
.avis-sommeil a{color:#12312A;font-weight:800}

/* ═══ V168 — la fiche d’entreprise façon Google, « Moreau Plomberie » (maquette operations/maquettes-fiche-google-2026-10-27/, « Ok pour la
   maquette » de HB, 27/10) : le composant .fiche-g.fg2, partagé par la bande de l’accueil (artisans.html, qui y ajoute sa taille d’ordinateur,
   410 px) et la carte « Sur votre fiche Google » (votre-lien-partout.html). Chaque page ne règle que sa place (largeur, marge).
   Le cadre reste Pallier (trait forêt, coins de 26 px, pas d’ombre : on ne la touche pas) ; l’intérieur imite la fiche vue sur un téléphone :
   police du téléphone (rien à servir, font-src 'self' intact), blanc, gris, bleu #1a73e8 pour « Site web ». Ni logo, ni le mot « Google » ;
   la carte est un dessin SVG, les icônes sont les nôtres. Photos : app/vitrine/fiche-*.webp (crédits : mentions-legales.html#credits-photos). ═══ */
.fiche-g.fg2{padding:0;overflow:hidden;background:#fff;border:var(--trait);border-radius:26px;font-family:Roboto,"Helvetica Neue",Arial,sans-serif;color:#202124;letter-spacing:0;text-align:left}
.fg2 p{margin:0}
.fg2 .fg-carte{position:relative;height:86px;background:#eef0ea}
.fg2 .fg-carte svg.fg-plan{position:absolute;inset:0;width:100%;height:100%;display:block}
.fg2 .fg-cherche{position:absolute;left:10px;right:10px;top:10px;display:flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(60,64,67,.3),0 1px 1px rgba(60,64,67,.12);font-size:14px;color:#3c4043}
.fg2 .fg-cherche svg{width:16px;height:16px;flex:none}
.fg2 .fg-feuille{position:relative;margin-top:-12px;background:#fff;border-radius:16px 16px 0 0;padding:8px 16px 14px}
.fg2 .fg-poignee{display:block;width:32px;height:4px;border-radius:2px;background:#dadce0;margin:0 auto 8px}
.fg2 .fg-nom{font-size:22px;line-height:28px;font-weight:400;color:#202124}
.fg2 .fg-note{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:14px;line-height:20px;color:#70757a}
.fg2 .fg-note b{font-weight:400;color:#3c4043}
.fg2 .fg-etoiles{display:flex;gap:1px}.fg2 .fg-etoiles svg{width:13px;height:13px}
.fg2 .fg-meta{font-size:14px;line-height:20px;color:#70757a}
.fg2 .fg-ouvert{color:#188038}
.fg2 .fg-actions{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px}
.fg2 .fg-actions span{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12.5px;line-height:16px;font-weight:500;color:#1a73e8}
.fg2 .fg-actions i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid #dadce0;background:#fff}
.fg2 .fg-actions i svg{width:19px;height:19px}
.fg2 .fg-actions .fg-site i{background:#1a73e8;border-color:#1a73e8;color:#fff;box-shadow:0 0 0 4px #d2e3fc}
.fg2 .fg-actions .fg-site{font-weight:700}
.fg2 .fg-web{display:flex;align-items:center;gap:10px;margin-top:12px;padding:8px 10px;border-radius:10px;background:#e8f0fe;font-size:14px;line-height:18px;color:#202124}
.fg2 .fg-slug{white-space:nowrap}   /* si la ligne ne tient pas (la carte de la page publique, 286 px), elle se coupe après « /m/ », jamais dans le nom */
.fg2 .fg-web svg{flex:none;width:18px;height:18px;color:#1a73e8}
.fg2 .fg-photos{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:minmax(0,1fr);gap:4px;height:78px;margin-top:10px}
.fg2 .fg-photos img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:10px;display:block}
/* ═══ FIN DE LA V168 ═══ */