PageSourceSearch

https://taxi-romain.web.app/

html taxi-romain.web.app collected 2026-10-03 12:37:25 UTC 96,294 bytes, 2,425 lines download raw bytes

1<!doctype html>
2<html lang="fr">
3<head>
4<meta charset="utf-8" />
5<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
6<meta name="theme-color" content="#0b1e2d" />
7<title>Taxi Romain — Pleumeur-Bodou · Côte de Granit Rose · 7j/7</title>
8<meta name="description" content="Taxi à Pleumeur-Bodou ⭐ 5,0/5 · Transferts gare de Lannion & aéroport Brest, excursions Côte de Granit Rose, bagages GR34. Mercedes E. 7j/7. ☎ 06 22 48 49 62" />
9<meta name="keywords" content="taxi Pleumeur-Bodou, taxi Côte de Granit Rose, taxi Trébeurden, taxi Perros-Guirec, taxi Trégastel, taxi Île Grande, transfert aéroport Brest, gare Lannion, GR34" />
10<meta name="author" content="Romain — Taxi Romain" />
11<meta name="robots" content="index, follow" />
12
13<!-- Open Graph (Facebook, WhatsApp, LinkedIn) -->
14<meta property="og:type" content="website" />
15<meta property="og:title" content="Taxi Romain — Pleumeur-Bodou · Côte de Granit Rose" />
16<meta property="og:description" content="Votre chauffeur sur la Côte de Granit Rose ⭐ 5,0/5 · 37 avis Google · 7j/7" />
17<meta property="og:image" content="https://taxi-romain.web.app/hero.jpg" />
18<meta property="og:image:width" content="1400" />
19<meta property="og:image:height" content="654" />
20<meta property="og:url" content="https://taxi-romain.web.app/" />
21<meta property="og:locale" content="fr_FR" />
22<meta property="og:locale:alternate" content="en_GB" />
23<meta property="og:locale:alternate" content="de_DE" />
24<meta property="og:site_name" content="Taxi Romain" />
25
26<!-- Twitter Cards -->
27<meta name="twitter:card" content="summary_large_image" />
28<meta name="twitter:title" content="Taxi Romain — Pleumeur-Bodou · Côte de Granit Rose" />
29<meta name="twitter:description" content="Votre chauffeur sur la Côte de Granit Rose ⭐ 5,0/5 · 7j/7" />
30<meta name="twitter:image" content="https://taxi-romain.web.app/hero.jpg" />
31
32<!-- Versions linguistiques -->
33<link rel="canonical" href="https://taxi-romain.web.app/" />
34<link rel="alternate" hreflang="fr" href="https://taxi-romain.web.app/" />
35<link rel="alternate" hreflang="en" href="https://taxi-romain.web.app/en/" />
36<link rel="alternate" hreflang="de" href="https://taxi-romain.web.app/de/" />
37<link rel="alternate" hreflang="x-default" href="https://taxi-romain.web.app/" />
38
39<!-- Schema.org : permet à Google et aux IA (ChatGPT, Gemini, Perplexity) de comprendre l'entreprise -->
40<script type="application/ld+json">
41{
42  "@context": "https://schema.org",
43  "@type": "TaxiService",
44  "name": "Taxi Romain",
45  "alternateName": "Taxi Romain Pleumeur-Bodou",
46  "description": "Chauffeur de taxi indépendant à Pleumeur-Bodou. Transferts gares et aéroports (Brest, Lannion, Guingamp, Rennes), excursions sur la Côte de Granit Rose, transport de bagages pour randonneurs du GR34. Mercedes Classe E, 7 jours sur 7.",
47  "image": "https://taxi-romain.web.app/hero.jpg",
48  "logo": "https://taxi-romain.web.app/icon-512.png",
49  "url": "https://taxi-romain.web.app/",
50  "telephone": "+33622484962",
51  "email": "[email protected]",
52  "priceRange": "€€",
53  "currenciesAccepted": "EUR",
54  "paymentAccepted": "Cash, Credit Card, Wero",
55  "address": {
56    "@type": "PostalAddress",
57    "addressLocality": "Pleumeur-Bodou",
58    "postalCode": "22560",
59    "addressRegion": "Côtes-d'Armor",
60    "addressCountry": "FR"
61  },
62  "geo": {
63    "@type": "GeoCoordinates",
64    "latitude": 48.7878,
65    "longitude": -3.4783
66  },
67  "areaServed": [
68    { "@type": "City", "name": "Pleumeur-Bodou" },
69    { "@type": "City", "name": "Île Grande" },
70    { "@type": "City", "name": "Landrellec" },
71    { "@type": "City", "name": "Lannion" },
72    { "@type": "City", "name": "Trébeurden" },
73    { "@type": "City", "name": "Trégastel" },
74    { "@type": "City", "name": "Perros-Guirec" },
75    { "@type": "City", "name": "Ploumanac'h" },
76    { "@type": "AdministrativeArea", "name": "Côte de Granit Rose" }
77  ],
78  "openingHoursSpecification": {
79    "@type": "OpeningHoursSpecification",
80    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
81    "opens": "05:00",
82    "closes": "22:00"
83  },
84  "aggregateRating": {
85    "@type": "AggregateRating",
86    "ratingValue": "5.0",
87    "reviewCount": "37",
88    "bestRating": "5",
89    "worstRating": "1"
90  },
91  "founder": {
92    "@type": "Person",
93    "name": "Romain",
94    "jobTitle": "Chauffeur de taxi professionnel",
95    "description": "Chauffeur professionnel depuis 15 ans, dont 14 ans à Paris avant son retour en Bretagne en 2024."
96  },
97  "knowsAbout": [
98    "Transfert aéroport Brest-Bretagne",
99    "Transfert gare de Lannion",
100    "Excursion Côte de Granit Rose",
101    "Transport bagages GR34",
102    "Tour Ploumanac'h",
103    "Visite Trégastel"
104  ],
105  "sameAs": [
106    "https://taxi-romain-pleumeur-bodou.fr/",
107    "https://www.facebook.com/profile.php?id=61571932312202",
108    "https://www.instagram.com/taxiromain/",
109    "https://www.linkedin.com/company/109542593/",
110    "https://x.com/romainNico1175"
111  ],
112  "hasOfferCatalog": {
113    "@type": "OfferCatalog",
114    "name": "Services Taxi Romain",
115    "itemListElement": [
116      {
117        "@type": "Offer",
118        "itemOffered": {
119          "@type": "Service",
120          "name": "Transferts gares et aéroports",
121          "description": "Transferts ponctuels depuis Lannion, Plouaret, Guingamp ou l'aéroport de Brest-Guipavas. Suivi train/vol en temps réel.",
122          "url": "https://taxi-romain-pleumeur-bodou.fr/taxi-aeroport-brest/"
123        }
124      },
125      {
126        "@type": "Offer",
127        "itemOffered": {
128          "@type": "Service",
129          "name": "Transport de bagages et colis",
130          "description": "Transfert de bagages pour randonneurs du GR34. Coursier express pour documents et colis urgents dans le Trégor.",
131          "url": "https://taxi-romain-pleumeur-bodou.fr/transport-de-bagages-colis/"
132        }
133      },
134      {
135        "@type": "Offer",
136        "itemOffered": {
137          "@type": "Service",
138          "name": "Excursions Côte de Granit Rose",
139          "description": "Découverte de la Côte de Granit Rose avec un chauffeur local : Ploumanac'h, Trébeurden, gouffre de Plougrescant.",
140          "url": "https://taxi-romain-pleumeur-bodou.fr/taxi-excursion-cote-de-granit-rose/"
141        }
142      }
143    ]
144  }
145}
146</script>
146
147
148<!-- Schema FAQ : permet aux questions/réponses d'apparaître directement dans Google -->
149<script type="application/ld+json">
150{
151  "@context": "https://schema.org",
152  "@type": "FAQPage",
153  "mainEntity": [
154    {
155      "@type": "Question",
156      "name": "Quels moyens de paiement acceptez-vous ?",
157      "acceptedAnswer": {
158        "@type": "Answer",
159        "text": "J'accepte les espèces, le paiement par carte bancaire et Wero."
160      }
161    },
162    {
163      "@type": "Question",
164      "name": "Les animaux sont-ils acceptés dans le taxi ?",
165      "acceptedAnswer": {
166        "@type": "Answer",
167        "text": "Oui, les animaux de compagnie sont les bienvenus. Cependant, je me réserve le droit de refuser un animal mouillé ou susceptible d'endommager l'habitacle. Un réhausseur enfant est disponible à bord."
168      }
169    },
170    {
171      "@type": "Question",
172      "name": "Le fauteuil roulant est-il accepté ?",
173      "acceptedAnswer": {
174        "@type": "Answer",
175        "text": "Le fauteuil roulant pliant est accepté sans problème. En revanche, les vélos, planches de surf ou grandes planches à voile ne peuvent pas être transportés."
176      }
177    },
178    {
179      "@type": "Question",
180      "name": "Faut-il réserver son taxi à l'avance ?",
181      "acceptedAnswer": {
182        "@type": "Answer",
183        "text": "Il n'y a pas de délai minimum obligatoire, mais réserver à l'avance est fortement recommandé pour garantir la disponibilité, en particulier tôt le matin, tard le soir, les dimanches et jours fériés."
184      }
185    },
186    {
187      "@type": "Question",
188      "name": "Quelles communes desservez-vous ?",
189      "acceptedAnswer": {
190        "@type": "Answer",
191        "text": "Je suis basé à Pleumeur-Bodou (incluant Île Grande et Landrellec) et je dessers toutes les communes limitrophes : Lannion, Trébeurden, Trégastel, Perros-Guirec, ainsi que toute la Côte de Granit Rose."
192      }
193    }
194  ]
195}
196</script>
196
197
198<!-- Schema.org : Liste des attractions touristiques desservies (aide les IA et Google) -->
199<script type="application/ld+json">
200{
201  "@context": "https://schema.org",
202  "@type": "ItemList",
203  "name": "Sites touristiques desservis par Taxi Romain — Côte de Granit Rose",
204  "description": "Liste des principaux sites accessibles avec Taxi Romain depuis Pleumeur-Bodou.",
205  "itemListElement": [
206    { "@type": "ListItem", "position": 1, "item": { "@type": "TouristAttraction", "name": "Ploumanac'h", "description": "Village mythique de la Côte de Granit Rose, classé Plus Beau Village de France.", "geo": { "@type": "GeoCoordinates", "latitude": 48.8333, "longitude": -3.4827 }, "isAccessibleForFree": true } },
207    { "@type": "ListItem", "position": 2, "item": { "@type": "TouristAttraction", "name": "Trégastel", "description": "Plages de granit rose et aquarium marin creusé dans la roche.", "geo": { "@type": "GeoCoordinates", "latitude": 48.8235, "longitude": -3.5093 } } },
208    { "@type": "ListItem", "position": 3, "item": { "@type": "TouristAttraction", "name": "Île Renote", "description": "Presqu'île sauvage avec sentier panoramique.", "geo": { "@type": "GeoCoordinates", "latitude": 48.8266, "longitude": -3.4988 } } },
209    { "@type": "ListItem", "position": 4, "item": { "@type": "TouristAttraction", "name": "Phare de Men Ruz", "description": "Phare en granit rose construit en 1946.", "geo": { "@type": "GeoCoordinates", "latitude": 48.8366, "longitude": -3.4845 } } },
210    { "@type": "ListItem", "position": 5, "item": { "@type": "TouristAttraction", "name": "Réserve naturelle des Sept-Îles", "description": "Plus grande réserve d'oiseaux marins de France : macareux, fous de Bassan, phoques.", "geo": { "@type": "GeoCoordinates", "latitude": 48.8869, "longitude": -3.4625 } } },
211    { "@type": "ListItem", "position": 6, "item": { "@type": "TouristAttraction", "name": "Île-Grande", "description": "Île reliée par un pont, centre LPO, sentiers côtiers.", "geo": { "@type": "GeoCoordinates", "latitude": 48.7937, "longitude": -3.5752 } } },
212    { "@type": "ListItem", "position": 7, "item": { "@type": "TouristAttraction", "name": "Cité des Télécoms et Radôme de Pleumeur-Bodou", "description": "Site historique des télécommunications, première image TV transatlantique en 1962.", "geo": { "@type": "GeoCoordinates", "latitude": 48.7878, "longitude": -3.5235 } } },
213    { "@type": "ListItem", "position": 8, "item": { "@type": "TouristAttraction", "name": "Pointe de Bihit — Trébeurden", "description": "Panorama à 360° sur la baie de Lannion et les Sept-Îles.", "geo": { "@type": "GeoCoordinates", "latitude": 48.7679, "longitude": -3.5853 } } },
214    { "@type": "ListItem", "position": 9, "item": { "@type": "TouristAttraction", "name": "Sentier des douaniers GR34", "description": "Sentier mythique du littoral breton, accessible en plusieurs étapes avec service taxi pour le retour.", "geo": { "@type": "GeoCoordinates", "latitude": 48.8345, "longitude": -3.4856 } } }
215  ]
216}
217</script>
217
218
219<meta name="description" content="Taxi à Pleumeur-Bodou ⭐ 5,0/5 · Transferts gare de Lannion & aéroport Brest, excursions Côte de Granit Rose, bagages GR34. Mercedes E. 7j/7. ☎ 06 22 48 49 62" />
220
221<!-- PWA : permet d'installer l'app sur l'écran d'accueil -->
222<link rel="manifest" href="manifest.webmanifest" />
223<link rel="icon" type="image/png" href="favicon.png" />
224<link rel="apple-touch-icon" href="icon-192.png" />
225
226<!-- Google Maps -->
227<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfJvKN7RUHMNdMNZPBBtojbfv3xhthXWY&libraries=places&v=weekly&language=fr&callback=initAutocomplete" async></script>
227
228
229<!-- Polices Google : Fraunces (serif éditorial) + Manrope (sans-serif moderne) -->
230<link rel="preconnect" href="https://fonts.googleapis.com">
231<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
232<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400&family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet">
233
234<style>
235  /* ============================================================
236     PALETTE "GRANIT ÉDITORIAL"
237     Les couleurs sont regroupées ici pour être modifiables en 1 endroit.
238     ============================================================ */
239  :root {
240    --ink:         #0b1e2d;   /* Bleu nuit profond — texte, fond sombre */
241    --ink-soft:    #1a3347;   /* Variante plus douce */
242    --paper:       #f5f1eb;   /* Blanc cassé chaud — fond principal */
243    --paper-warm:  #ebe4d7;   /* Sable plus prononcé */
244    --granit:      #c97b63;   /* Rose granit — accent signature local */
245    --granit-dark: #a35e4a;
246    --gold:        #c9a961;   /* Or chaud — CTA, clin d'œil taxi NY subtil */
247    --gold-dark:   #a88a43;
248    --line:        rgba(11, 30, 45, 0.12);
249    --radius:      14px;
250    --radius-lg:   22px;
251    --shadow:      0 8px 30px rgba(11, 30, 45, 0.08);
252    --shadow-lg:   0 20px 60px rgba(11, 30, 45, 0.15);
253  }
254
255  * { box-sizing: border-box; margin: 0; padding: 0; }
256  html { scroll-behavior: smooth; }
257
258  body {
259    font-family: 'Manrope', system-ui, sans-serif;
260    font-size: 16px;
261    line-height: 1.6;
262    color: var(--ink);
263    background: var(--paper);
264    -webkit-font-smoothing: antialiased;
265    padding-bottom: 90px; /* Place pour la barre fixe du bas (mobile) */
266  }
267
268  h1, h2, h3 {
269    font-family: 'Fraunces', Georgia, serif;
270    font-weight: 500;
271    line-height: 1.15;
272    letter-spacing: -0.02em;
273  }
274
275  /* ============================================================
276     HERO — PREMIER REGARD
277     ============================================================ */
278  /* ─── Animations Hero ─── */
279  @keyframes kenburns {
280    0%   { transform: scale(1)    translate(0, 0); }
281    100% { transform: scale(1.08) translate(-1%, -0.5%); }
282  }
283  @keyframes fadeSlideUp {
284    from { opacity: 0; transform: translateY(18px); }
285    to   { opacity: 1; transform: translateY(0); }
286  }
287    .hero {
288    position: relative;
289    background: #0b1e2d;
290    color: var(--paper);
291    padding: 32px 22px 56px;
292    overflow: hidden;
293    min-height: 480px;
294    display: flex;
295    flex-direction: column;
296    justify-content: flex-end;
297  }
298  .hero::after {
299    content: "";
300    position: absolute;
301    bottom: 0; left: 0; right: 0;
302    height: 100px;
303    background: linear-gradient(to top, rgba(201, 123, 99, 0.10), transparent);
304    pointer-events: none;
305  }
306  .hero::before {
307    content: '';
308    position: absolute;
309    inset: -6%;
310    background:
311      linear-gradient(160deg,
312        rgba(11, 30, 45, 0.65) 0%,
313        rgba(11, 30, 45, 0.35) 45%,
314        rgba(11, 30, 45, 0.70) 100%),
315      url('./hero.jpg') center 25%/cover no-repeat;
316    animation: kenburns 20s ease-in-out infinite alternate;
317    z-index: 0;
318  }
319  .hero > * { position: relative; z-index: 1; }
320  .hero__eyebrow { animation: fadeSlideUp 0.8s ease both; }
321  .hero__title   { animation: fadeSlideUp 0.8s ease 0.15s both; }
322  .hero__tagline { animation: fadeSlideUp 0.8s ease 0.30s both; }
323  .hero__status  { animation: fadeSlideUp 0.8s ease 0.45s both; }
324
325  .hero__eyebrow {
326    font-size: 11px; font-weight: 600;
327    letter-spacing: 0.22em;
328    text-transform: uppercase;
329    color: var(--gold);
330    margin-bottom: 18px;
331    display: inline-flex; align-items: center; gap: 10px;
332  }
333  .hero__eyebrow::after {
334    content: ""; width: 30px; height: 1px; background: var(--gold);
335  }
336
337  .hero__title {
338    font-size: clamp(42px, 11vw, 60px);
339    font-weight: 400;
340    margin-bottom: 10px;
341  }
342  .hero__title em {
343    font-style: italic;
344    color: var(--granit);
345    font-weight: 300;
346  }
347
348  .hero__tagline {
349    font-family: 'Fraunces', serif;
350    font-style: italic;
351    font-size: 17px;
352    font-weight: 300;
353    opacity: 0.85;
354    margin-bottom: 28px;
355    max-width: 92%;
356  }
357
358  .hero__status {
359    display: inline-flex; align-items: center; gap: 8px;
360    padding: 7px 14px;
361    background: rgba(245, 241, 235, 0.08);
362    border: 1px solid rgba(245, 241, 235, 0.18);
363    border-radius: 100px;
364    font-size: 13px;
365    margin-bottom: 26px;
366  }
367  .hero__status .dot {
368    width: 8px; height: 8px;
369    background: #6ed47a; border-radius: 50%;
370    box-shadow: 0 0 0 0 rgba(110, 212, 122, 0.7);
371    animation: pulse 2.2s infinite;
372  }
373  @keyframes pulse {
374    0%   { box-shadow: 0 0 0 0 rgba(110, 212, 122, 0.7); }
375    70%  { box-shadow: 0 0 0 10px rgba(110, 212, 122, 0); }
376    100% { box-shadow: 0 0 0 0 rgba(110, 212, 122, 0); }
377  }
378
379  /* ============================================================
380     BOUTONS
381     ============================================================ */
382  .cta-row {
383    display: flex;
384    gap: 10px;
385  }
386
387  .btn {
388    flex: 1;
389    display: inline-flex; align-items: center; justify-content: center;
390    gap: 8px;
391    padding: 16px 20px;
392    border: none;
393    border-radius: var(--radius);
394    font-family: 'Manrope', sans-serif;
395    font-size: 15px;
396    font-weight: 600;
397    text-decoration: none;
398    cursor: pointer;
399    transition: transform 0.15s ease, background 0.15s ease;
400    white-space: nowrap;
401  }
402  .btn:active { transform: translateY(1px); }
403  .btn svg { flex-shrink: 0; }
404
405  .btn--call {
406    background: var(--gold);
407    color: var(--ink);
408  }
409  .btn--call:hover { background: var(--gold-dark); }
410
411  .btn--wa {
412    background: #25d366;
413    color: white;
414  }
415  .btn--wa:hover { background: #1fb855; }
416
417  .btn--wa-ghost {
418    background: transparent;
419    color: var(--paper);
420    border: 1.5px solid rgba(245, 241, 235, 0.35);
421  }
422  .btn--wa-ghost:hover { background: rgba(245, 241, 235, 0.08); }
423
424  .btn--primary {
425    background: var(--ink);
426    color: var(--paper);
427  }
428  .btn--primary:hover { background: var(--ink-soft); }
429
430  .btn--ghost {
431    background: transparent;
432    color: var(--ink);
433    border: 1.5px solid var(--line);
434  }
435  .btn--ghost:hover { background: var(--paper-warm); }
436
437  /* ============================================================
438     SECTIONS GÉNÉRIQUES
439     ============================================================ */
440  section { padding: 52px 22px; }
441
442  .section__eyebrow {
443    font-size: 11px; font-weight: 600;
444    letter-spacing: 0.22em;
445    text-transform: uppercase;
446    color: var(--granit);
447    margin-bottom: 10px;
448  }
449  .section__title {
450    font-size: 32px;
451    margin-bottom: 10px;
452  }
453  .section__title em {
454    font-style: italic;
455    color: var(--granit);
456    font-weight: 300;
457  }
458  .section__lede {
459    font-size: 15px;
460    opacity: 0.75;
461    margin-bottom: 28px;
462    max-width: 540px;
463  }
464
465  /* ============================================================
466     CALCULATEUR
467     ============================================================ */
468  .calc {
469    background: var(--paper-warm);
470    border-top: 1px solid var(--line);
471    border-bottom: 1px solid var(--line);
472  }
473
474  .calc__form {
475    background: var(--paper);
476    border-radius: var(--radius-lg);
477    padding: 22px;
478    box-shadow: var(--shadow);
479    border: 1px solid var(--line);
480  }
481
482  /* ============================================================
483     GÉOLOCALISATION — Bouton 📍 sur le champ Départ
484     ============================================================ */
485  .field__input-row {
486    display: flex;
487    gap: 8px;
488    align-items: stretch;
489  }
490  .field__input-row .field__input {
491    flex: 1;
492    min-width: 0; /* Empêche le débordement sur mobile */
493  }
494  .geo-btn {
495    flex-shrink: 0;
496    width: 50px;
497    background: var(--ink);
498    color: var(--paper);
499    border: none;
500    border-radius: var(--radius);
501    cursor: pointer;
502    display: flex;
503    align-items: center;
504    justify-content: center;
505    transition: background 0.2s, transform 0.15s;
506    position: relative;
507  }
508  .geo-btn:hover { background: var(--granit); }
509  .geo-btn:active { transform: scale(0.95); }
510  /* Animation de rotation pendant la recherche GPS */
511  .geo-btn.is-loading svg {
512    animation: geoSpin 1s linear infinite;
513  }
514  @keyframes geoSpin {
515    from { transform: rotate(0deg); }
516    to   { transform: rotate(360deg); }
517  }
518  /* Succès : bouton devient granit */
519  .geo-btn.is-success { background: var(--granit); }
520  /* Erreur : bouton rouge discret */
521  .geo-btn.is-error { background: #b94a3a; }
522
523  /* Message de statut sous le champ */
524  .geo-status {
525    font-size: 12px;
526    margin-top: 6px;
527    min-height: 16px;
528    display: flex;
529    align-items: center;
530    gap: 5px;
531    transition: opacity 0.3s;
532  }
533  .geo-status:empty { display: none; }
534  .geo-status--loading { color: var(--ink); opacity: 0.6; }
535  .geo-status--success { color: var(--granit-dark); font-weight: 500; }
536  .geo-status--error   { color: #b94a3a; }
537  .field__label {
538    display: block;
539    font-size: 11px; font-weight: 600;
540    letter-spacing: 0.12em;
541    text-transform: uppercase;
542    color: var(--ink);
543    opacity: 0.65;
544    margin-bottom: 6px;
545  }
546  .field__input {
547    width: 100%;
548    padding: 14px 16px;
549    font-family: 'Manrope', sans-serif;
550    font-size: 16px;
551    color: var(--ink);
552    background: var(--paper-warm);
553    border: 1.5px solid transparent;
554    border-radius: var(--radius);
555    transition: border-color 0.2s, background 0.2s;
556  }
557  .field__input:focus {
558    outline: none;
559    border-color: var(--granit);
560    background: var(--paper);
561  }
562
563  .toggle {
564    display: grid;
565    grid-template-columns: 1fr 1fr;
566    background: var(--paper-warm);
567    border-radius: var(--radius);
568    padding: 4px;
569    margin-bottom: 14px;
570    border: 1px solid var(--line);
571  }
572  .toggle input { display: none; }
573  .toggle label {
574    padding: 11px 10px;
575    text-align: center;
576    font-size: 14px;
577    font-weight: 500;
578    border-radius: calc(var(--radius) - 4px);
579    cursor: pointer;
580    transition: all 0.2s;
581    color: var(--ink);
582    opacity: 0.6;
583  }
584  .toggle input:checked + label {
585    background: var(--ink);
586    color: var(--paper);
587    opacity: 1;
588  }
589
590  .sub-toggle {
591    display: flex; align-items: center;
592    gap: 10px;
593    font-size: 13px;
594    margin-bottom: 18px;
595    color: var(--ink);
596    opacity: 0.8;
597    flex-wrap: wrap;
598  }
599  .sub-toggle select {
600    padding: 7px 10px;
601    font-family: inherit;
602    font-size: 13px;
603    border: 1px solid var(--line);
604    border-radius: 8px;
605    background: var(--paper);
606    color: var(--ink);
607  }
608  .per-tog {
609    display: grid;
610    grid-template-columns: 1fr 1fr 1fr;
611    background: var(--paper-warm);
612    border-radius: var(--radius);
613    padding: 4px;
614    border: 1px solid var(--line);
615  }
616  .per-tog input { display: none; }
617  .per-tog label {
618    padding: 8px 6px;
619    text-align: center;
620    font-size: 12px;
621    font-weight: 500;
622    border-radius: calc(var(--radius) - 4px);
623    cursor: pointer;
624    transition: all 0.2s;
625    color: var(--ink);
626    opacity: 0.6;
627    white-space: nowrap;
628  }
629  .per-tog input:checked + label {
630    background: var(--ink);
631    color: var(--paper);
632    opacity: 1;
633  }
634
635  .calc__submit {
636    width: 100%;
637    padding: 16px;
638  }
639
640  /* RÉSULTAT */
641  .result {
642    margin-top: 18px;
643    padding: 24px;
644    background: var(--ink);
645    color: var(--paper);
646    border-radius: var(--radius-lg);
647    display: none;
648  }
649  .result.is-visible { display: block; animation: fadeUp 0.4s ease; }
650  @keyframes fadeUp {
651    from { opacity: 0; transform: translateY(10px); }
652    to   { opacity: 1; transform: translateY(0); }
653  }
654  .result__label {
655    font-size: 11px;
656    letter-spacing: 0.22em;
657    text-transform: uppercase;
658    color: var(--gold);
659    margin-bottom: 10px;
660  }
661  .result__price {
662    font-family: 'Fraunces', serif;
663    font-size: 56px;
664    font-weight: 400;
665    line-height: 1;
666    margin-bottom: 8px;
667  }
668  .result__price small {
669    font-size: 18px; opacity: 0.6; font-weight: 300;
670  }
671  .result__detail {
672    font-size: 14px;
673    opacity: 0.8;
674    margin-bottom: 6px;
675  }
676  .result__tarif {
677    font-size: 12px;
678    opacity: 0.55;
679    margin-bottom: 18px;
680  }
681  .result__note {
682    font-size: 12px;
683    opacity: 0.55;
684    margin-bottom: 18px;
685    font-style: italic;
686    padding-top: 12px;
687    border-top: 1px solid rgba(245, 241, 235, 0.15);
688  }
689  .result__actions {
690    display: grid; gap: 8px;
691  }
692  .result__btn {
693    padding: 14px;
694    border: none;
695    border-radius: var(--radius);
696    font-family: inherit;
697    font-size: 15px;
698    font-weight: 600;
699    text-decoration: none;
700    text-align: center;
701    cursor: pointer;
702    display: flex; align-items: center; justify-content: center;
703    gap: 8px;
704  }
705  .result__btn--wa {
706    background: #25d366; color: white;
707  }
708  .result__btn--call {
709    background: var(--paper); color: var(--ink);
710  }
711  .result__btn--resa {
712    background: #1B3A6B; color: white;
713    order: -1;
714  }
715
716  .loading {
717    display: none;
718    text-align: center;
719    padding: 18px;
720    font-size: 14px;
721    color: var(--ink);
722    opacity: 0.7;
723  }
724  .loading.is-visible { display: block; }
725  .spinner {
726    display: inline-block;
727    width: 16px; height: 16px;
728    border: 2px solid var(--line);
729    border-top-color: var(--granit);
730    border-radius: 50%;
731    animation: spin 0.8s linear infinite;
732    vertical-align: middle;
733    margin-right: 8px;
734  }
735  @keyframes spin { to { transform: rotate(360deg); } }
736
737  .error-msg {
738    display: none;
739    padding: 14px 16px;
740    margin-top: 12px;
741    background: #fde8e3;
742    color: var(--granit-dark);
743    border-left: 3px solid var(--granit);
744    border-radius: var(--radius);
745    font-size: 14px;
746  }
747  .error-msg.is-visible { display: block; }
748
749  .services {
750    background: var(--paper-warm);
751    position: relative;
752    overflow: hidden;
753  }
754  /* Photo phare Men Ruz en fond discret section services */
755  .services::before {
756    content: "";
757    position: absolute; inset: 0;
758    background: url('./phare_men_ruz.jpg') center 40%/cover no-repeat;
759    opacity: 0.07;
760    pointer-events: none;
761  }
762  .services::after {
763    content: "";
764    position: absolute;
765    top: -40px; right: -40px;
766    width: 220px; height: 220px;
767    background: radial-gradient(circle, rgba(201, 123, 99, 0.10) 0%, transparent 70%);
768    pointer-events: none;
769  }
770  .services__grid {
771    display: grid;
772    grid-template-columns: 1fr 1fr;
773    gap: 12px;
774  }
775  /* Cartes services — accordéon compact */
776  .service-card {
777    background: var(--paper);
778    border-radius: var(--radius-lg);
779    border: 1px solid var(--line);
780    border-left: 4px solid var(--granit);
781    overflow: hidden;
782    transition: box-shadow 0.2s;
783    cursor: pointer;
784  }
785  .service-card:hover {
786    box-shadow: var(--shadow-lg);
787  }
788  .service-card__header {
789    display: flex;
790    align-items: center;
791    gap: 12px;
792    padding: 14px 16px;
793    user-select: none;
794  }
795  .service-card__icon {
796    font-size: 22px;
797    flex-shrink: 0;
798  }
799  .service-card__title {
800    font-family: 'Fraunces', serif;
801    font-size: 16px;
802    font-weight: 500;
803    flex: 1;
804    margin: 0;
805  }
806  .service-card__chevron {
807    font-size: 11px;
808    color: var(--granit);
809    transition: transform 0.25s;
810    flex-shrink: 0;
811  }
812  .service-card.is-open .service-card__chevron {
813    transform: rotate(180deg);
814  }
815  .service-card__body {
816    max-height: 0;
817    overflow: hidden;
818    transition: max-height 0.3s ease;
819  }
820  .service-card.is-open .service-card__body {
821    max-height: 200px;
822  }
823  .service-card__desc {
824    font-size: 14px;
825    opacity: 0.75;
826    line-height: 1.55;
827    padding: 0 16px 14px 50px;
828  }
829  .service-card--excursions {
830    border-left-color: var(--gold);
831  }
832
833  /* ============================================================
834     INFO LOCALE — Météo + Marées + Transports
835     ============================================================ */
836  .local-info {
837    background: var(--paper);
838    border-top: 1px solid var(--line);
839  }
840
841  /* --- MÉTÉO style iOS Weather --- */
842  /* Conteneur principal : grand fond dégradé de ciel */
843  .weather-container {
844    border-radius: var(--radius-lg);
845    padding: 20px 16px 16px;
846    margin-bottom: 24px;
847    position: relative;
848    overflow: hidden;
849    /* Fond par défaut (nuageu
849x) — remplacé dynamiquement par JS */
850    background: linear-gradient(165deg, #4a6fa5, #6b8ec2, #94b4d8);
851    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
852  }
853  /* Petite étiquette "Pleumeur-Bodou" en haut */
854  .weather-location {
855    font-size: 12px;
856    font-weight: 700;
857    letter-spacing: 0.15em;
858    text-transform: uppercase;
859    color: rgba(255,255,255,0.75);
860    text-align: center;
861    margin-bottom: 12px;
862  }
863  /* Grille des 3 jours */
864  .weather-grid {
865    display: grid;
866    grid-template-columns: repeat(3, 1fr);
867    gap: 8px;
868  }
869  /* Carte individuelle : verre givré */
870  .weather-day {
871    background: rgba(255, 255, 255, 0.18);
872    -webkit-backdrop-filter: blur(12px);
873    backdrop-filter: blur(12px);
874    border: 1px solid rgba(255, 255, 255, 0.30);
875    border-radius: 14px;
876    padding: 14px 8px;
877    text-align: center;
878    color: white;
879    transition: transform 0.2s;
880  }
881  .weather-day:hover { transform: translateY(-2px); }
882  .weather-day__label {
883    font-size: 10px; font-weight: 700;
884    letter-spacing: 0.12em; text-transform: uppercase;
885    opacity: 0.80; margin-bottom: 8px;
886  }
887  .weather-day__icon { font-size: 26px; margin-bottom: 8px; display: block; }
888  .weather-day__temp {
889    font-family: 'Fraunces', serif;
890    font-size: 22px; font-weight: 400;
891    line-height: 1; margin-bottom: 4px;
892  }
893  .w-min { font-size: 14px; opacity: 0.60; }
894  .weather-day__detail {
895    font-size: 10px; opacity: 0.80;
896    line-height: 1.4; margin-top: 5px;
897  }
898  .w-rain { font-size: 10px; margin-top: 2px; opacity: 0.85; }
899  .weather-loading {
900    grid-column: 1/-1; text-align: center;
901    padding: 20px; font-size: 13px;
902    color: rgba(255,255,255,0.7);
903  }
904
905  /* --- BANNIÈRE INSTALLATION PWA --- */
906  .install-banner {
907    position: fixed;
908    bottom: 90px; left: 12px; right: 12px;
909    background: var(--ink); color: var(--paper);
910    border-radius: var(--radius-lg);
911    padding: 16px 18px;
912    box-shadow: var(--shadow-lg);
913    z-index: 200;
914    transform: translateY(20px); opacity: 0;
915    pointer-events: none;
916    transition: all 0.35s ease;
917  }
918  .install-banner.is-visible { transform: translateY(0); opacity: 1; pointer-events: all; }
919  .install-banner__title { font-weight: 700; font-size: 14px; margin-bottom: 4px; color: var(--gold); }
920  .install-banner__text { font-size: 12px; opacity: 0.8; line-height: 1.5; }
921  .install-banner__actions { display: flex; gap: 8px; margin-top: 12px; }
922  .install-banner__btn {
923    padding: 8px 16px; border: none; border-radius: 8px;
924    font-family: inherit; font-size: 13px; font-weight: 600;
925    cursor: pointer;
926  }
927  .install-banner__btn--primary { background: var(--gold); color: var(--ink); }
928  .install-banner__btn--ghost { background: rgba(245,241,235,0.1); color: var(--paper); }
929  .install-banner__close {
930    position: absolute; top: 10px; right: 12px;
931    background: none; border: none; color: var(--paper);
932    opacity: 0.5; font-size: 20px; cursor: pointer; line-height: 1;
933  }
934  @media (min-width: 720px) {
935    .install-banner { left: auto; right: 24px; max-width: 360px; bottom: 24px; }
936  }
937
938  /* --- SCROLL TO TOP --- */
939  .scroll-top {
940    position: fixed; right: 16px; bottom: 100px;
941    width: 42px; height: 42px;
942    background: var(--ink); color: var(--paper);
943    border: none; border-radius: 50%;
944    display: flex; align-items: center; justify-content: center;
945    cursor: pointer; z-index: 99;
946    box-shadow: var(--shadow);
947    opacity: 0; transform: scale(0.8);
948    pointer-events: none;
949    transition: all 0.25s ease;
950    font-size: 18px;
951  }
952  .scroll-top.is-visible { opacity: 1; transform: scale(1); pointer-events: all; }
953  .scroll-top:hover { background: var(--granit); }
954  @media (min-width: 720px) { .scroll-top { bottom: 32px; right: 24px; } }
955
956  /* --- BOUTON ENREGISTRER CONTACT --- */
957  .contact-save-btn {
958    display: inline-flex; align-items: center; gap: 8px;
959    padding: 12px 20px;
960    background: var(--paper-warm);
961    border: 1.5px solid var(--line);
962    border-radius: var(--radius);
963    font-family: 'Manrope', sans-serif;
964    font-size: 14px; font-weight: 600; color: var(--ink);
965    cursor: pointer; transition: all 0.2s;
966    width: 100%; justify-content: center;
967    margin-top: 12px;
968  }
969  .contact-save-btn:hover { background: var(--paper); border-color: var(--granit); color: var(--granit); }
970  /* --- TRANSPORTS (redesign v3) --- */
971  .transport-grid {
972    display: grid;
973    grid-template-columns: 1fr 1fr;
974    gap: 12px;
975  }
976  .transport-card {
977    display: flex;
978    flex-direction: column;
979    align-items: center;
980    justify-content: center;
981    gap: 8px;
982    padding: 22px 16px 36px;
983    border: none;
984    border-radius: var(--radius-lg);
985    text-decoration: none;
986    color: white;
987    text-align: center;
988    transition: transform 0.22s ease, box-shadow 0.22s ease;
989    position: relative;
990    overflow: hidden;
991    background-size: cover !important;
992    background-position: center !important;
993    background-color: #1a3a5a;
994    min-height: 150px;
995  }
996  /* Overlay sombre pour lisibilité du texte */
997  .transport-card::before {
998    content: '';
999    position: absolute;
1000    inset: 0;
1001    background: linear-gradient(to bottom, rgba(10,25,40,0.30) 0%, rgba(10,25,40,0.68) 45%, rgba(10,25,40,0.94) 100%);
1002    transition: background 0.22s ease;
1003    z-index: 0;
1004    border-radius: var(--radius-lg);
1005  }
1006  .transport-card:hover::before { background: linear-gradient(to bottom, rgba(10,25,40,0.18) 0%, rgba(10,25,40,0.52) 45%, rgba(10,25,40,0.82) 100%); }
1007  /* Contenu au-dessus de l'overlay */
1008  .transport-card > * { position: relative; z-index: 1; }
1009  /* Flèche indicatrice */
1010  .transport-card::after {
1011    content: '→';
1012    position: absolute;
1013    bottom: 12px;
1014    right: 16px;
1015    font-size: 15px;
1016    font-weight: 700;
1017    color: white;
1018    opacity: 0.45;
1019    transition: opacity 0.2s ease, transform 0.2s ease;
1020    z-index: 2;
1021  }
1022  .transport-card:hover::after { opacity: 1; transform: translateX(4px); }
1023  /* Images de fond par carte */
1024  .transport-grid > a:first-child  { background-image: url('https://i.imgur.com/thB3Xqx.jpg'); }
1025  .transport-grid > a:nth-child(2) { background-image: url('https://i.imgur.com/Usk0ge6.jpg'); }
1026  .transport-grid > a:nth-child(3) { background-image: url('https://i.imgur.com/VlnUFDN.jpg'); background-position: center 85% !important; }
1027  /* Version pleine largeur (Lignes D & E) */
1028  .transport-card[style*='grid-column'] {
1029    flex-direction: row;
1030    text-align: left;
1031    gap: 18px;
1032    align-items: center;
1033    padding-bottom: 22px;
1034    min-height: 110px;
1035  }
1036  .transport-card[style*='grid-column'] .transport-card__icon { font-size: 32px; flex-shrink: 0; }
1037  .transport-card[style*='grid-column'] .transport-card__name { font-size: 16px; margin-bottom: 4px; }
1038  .transport-card[style*='grid-column'] .transport-card__desc { text-align: left; }
1039  .transport-card[style*='grid-column']::after { bottom: auto; top: 50%; transform: translateY(-50%); }
1040  .transport-card[style*='grid-column']:hover::after { transform: translateY(-50%) translateX(4px); }
1041  .transport-card:hover {
1042    transform: translateY(-3px);
1043    box-shadow: 0 10px 28px rgba(0,0,0,0.28);
1044    color: white;
1045  }
1046  .transport-card__icon { display: none; }
1047  .transport-card__name { font-weight: 700; font-size: 15px; color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.65); }
1048  .transport-card__desc { font-size: 12px; color: rgba(255,255,255,0.92); line-height: 1.4; text-shadow: 0 1px 4px rgba(0,0,0,0.55); }
1049  /* Bouton Temps réel avec image */
1050  #btnTempsReel {
1051    background:
1052      linear-gradient(to right, rgba(10,25,40,0.92) 0%, rgba(10,25,40,0.70) 50%, rgba(10,25,40,0.20) 100%),
1053      url('https://i.imgur.com/iECaKDJ.jpg') right center / cover !important;
1054    font-weight: 700;
1055    color: white;
1056    letter-spacing: 0.03em;
1057  }
1058  /* Espacement météo */
1059  .weather-container { margin-top: 36px; }
1060
1061/* ============================================================
1062     FAQ — ACCORDÉON
1063     ============================================================ */
1064  .faq {
1065    background: var(--paper-warm);
1066    border-top: 1px solid var(--line);
1067  }
1068  .faq__list {
1069    display: flex;
1070    flex-direction: column;
1071    gap: 8px;
1072  }
1073  .faq__item {
1074    background: var(--paper);
1075    border-radius: var(--radius);
1076    border: 1px solid var(--line);
1077    overflow: hidden;
1078  }
1079  .faq__question {
1080    width: 100%;
1081    display: flex;
1082    align-items: center;
1083    justify-content: space-between;
1084    gap: 12px;
1085    padding: 16px 18px;
1086    background: none;
1087    border: none;
1088    font-family: 'Manrope', sans-serif;
1089    font-size: 15px;
1090    font-weight: 600;
1091    color: var(--ink);
1092    text-align: left;
1093    cursor: pointer;
1094    transition: background 0.2s;
1095  }
1096  .faq__question:hover { background: var(--paper-warm); }
1097  .faq__chevron {
1098    flex-shrink: 0;
1099    width: 20px; height: 20px;
1100    color: var(--granit);
1101    transition: transform 0.3s ease;
1102  }
1103  .faq__item.is-open .faq__chevron { transform: rotate(180deg); }
1104  .faq__answer {
1105    max-height: 0;
1106    overflow: hidden;
1107    transition: max-height 0.4s ease;
1108  }
1109  .faq__answer-inner {
1110    padding: 0 18px 16px;
1111    font-size: 14px;
1112    line-height: 1.6;
1113    color: var(--ink);
1114    opacity: 0.8;
1115    border-top: 1px solid var(--line);
1116    padding-top: 14px;
1117  }
1118  .faq__answer-inner strong { color: var(--ink); opacity: 1; }
1119  .faq__item.is-open .faq__answer { max-height: 600px; }
1120  .reviews {
1121    position: relative;
1122    color: var(--paper);
1123    overflow: hidden;
1124    background:
1125      linear-gradient(160deg,
1126        rgba(11, 30, 45, 0.88) 0%,
1127        rgba(11, 30, 45, 0.80) 100%),
1128      url('./heure_bleue.jpg') center 40%/cover no-repeat;
1129  }
1130  .reviews .section__title { color: var(--paper); }
1131  .reviews .section__eyebrow { color: var(--gold); }
1132
1133  .review {
1134    padding: 24px 0;
1135    border-top: 1px solid var(--gold);
1136  }
1137  .review:first-of-type { border-top: none; padding-top: 0; }
1138  .review__stars {
1139    color: var(--gold);
1140    margin-bottom: 10px;
1141    font-size: 14px;
1142    letter-spacing: 2px;
1143  }
1144  .review__text {
1145    font-family: 'Fraunces', serif;
1146    font-size: 19px;
1147    font-weight: 300;
1148    font-style: italic;
1149    line-height: 1.5;
1150    margin-bottom: 10px;
1151  }
1152  .review__author {
1153    font-size: 12px;
1154    opacity: 0.6;
1155    letter-spacing: 0.08em;
1156    text-transform: uppercase;
1157  }
1158  .reviews__google {
1159    margin-top: 28px;
1160    padding: 18px;
1161    background: rgba(245, 241, 235, 0.05);
1162    border: 1px solid var(--gold);
1163    border-radius: var(--radius);
1164    display: flex; align-items: center; gap: 14px;
1165    justify-content: space-between;
1166  }
1167  .reviews__google-text {
1168    font-size: 14px;
1169  }
1170  .reviews__google-text strong {
1171    color: var(--gold);
1172    font-weight: 600;
1173  }
1174  .reviews__google-cta {
1175    color: var(--gold);
1176    font-size: 13px;
1177    font-weight: 600;
1178    text-decoration: none;
1179    white-space: nowrap;
1180  }
1181
1182  /* ============================================================
1183     LIEN VERS SITE COMPLET — photo baie de Lannion
1184     ============================================================ */
1185  /* ============================================================
1186     ENCART RÉSEAUX SOCIAUX — Suivez Romain
1187     ============================================================ */
1188  .social-follow {
1189    margin-top: 28px;
1190    padding: 20px 22px;
1191    background: var(--paper-warm);
1192    border-radius: var(--radius-lg);
1193    border: 1px solid var(--line);
1194    text-align: center;
1195  }
1196  .social-follow__title {
1197    font-size: 14px;
1198    font-weight: 700;
1199    color: var(--ink);
1200    margin: 0 0 14px;
1201    letter-spacing: 0.02em;
1202  }
1203  .social-follow__links {
1204    display: flex;
1205    gap: 10px;
1206    justify-content: center;
1207    flex-wrap: wrap;
1208    margin-bottom: 12px;
1209  }
1210  .social-follow__btn {
1211    display: inline-flex;
1212    align-items: center;
1213    gap: 7px;
1214    padding: 9px 16px;
1215    border-radius: 100px;
1216    font-family: 'Manrope', sans-serif;
1217    font-size: 13px;
1218    font-weight: 700;
1219    text-decoration: none;
1220    transition: all 0.22s;
1221  }
1222  .social-follow__btn--instagram {
1223    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
1224    color: #fff;
1225    box-shadow: 0 3px 10px rgba(188,24,136,0.25);
1226  }
1227  .social-follow__btn--facebook {
1228    background: #1877f2;
1229    color: #fff;
1230    box-shadow: 0 3px 10px rgba(24,119,242,0.25);
1231  }
1232  .social-follow__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.20); }
1233  .social-follow__desc { font-size: 12px; color: var(--ink); opacity: 0.6; margin: 0; font-style: italic; }
1234
1235  .more {
1236    text-align: center;
1237    position: relative;
1238    overflow: hidden;
1239    background:
1240      linear-gradient(to bottom,
1241        rgba(245, 241, 235, 0.95) 0%,
1242        rgba(245, 241, 235, 0.88) 100%),
1243      url('./baie_lannion.jpg') center/cover no-repeat;
1244  }
1245  .more__title { margin-bottom: 14px; }
1246  .more__desc {
1247    font-size: 15px;
1248    opacity: 0.75;
1249    margin-bottom: 22px;
1250    max-width: 420px;
1251    margin-left: auto; margin-right: auto;
1252  }
1253
1254  /* ============================================================
1255     FOOTER
1256     ============================================================ */
1257  footer {
1258    background: var(--ink);
1259    color: var(--paper);
1260    padding: 40px 22px 28px;
1261    text-align: center;
1262  }
1263  footer .brand {
1264    font-family: 'Fraunces', serif;
1265    font-size: 24px;
1266    margin-bottom: 4px;
1267  }
1268  footer .brand em {
1269    font-style: italic;
1270    color: var(--granit);
1271  }
1272  footer .tagline {
1273    font-size: 13px;
1274    opacity: 0.6;
1275    margin-bottom: 20px;
1276    font-style: italic;
1277    font-family: 'Fraunces', serif;
1278  }
1279  footer .contact {
1280    display: flex; flex-direction: column; gap: 6px;
1281    font-size: 14px;
1282    margin-bottom: 20px;
1283  }
1284  footer .contact a {
1285    color: var(--gold);
1286    text-decoration: none;
1287    font-weight: 500;
1288  }
1289  footer .socials {
1290    display: flex; justify-content: center; gap: 12px;
1291    margin-bottom: 22px;
1292  }
1293  footer .socials a {
1294    width: 36px; height: 36px;
1295    display: inline-flex; align-items: center; justify-content: center;
1296    border: 1px solid rgba(245, 241, 235, 0.2);
1297    border-radius: 50%;
1298    color: var(--paper);
1299    text-decoration: none;
1300    transition: all 0.2s;
1301  }
1302  footer .socials a:hover { background: var(--granit); border-color: var(--granit); }
1303  footer .legal {
1304    font-size: 11px;
1305    opacity: 0.4;
1306    letter-spacing: 0.05em;
1307  }
1308
1309  /* ============================================================
1310     BARRE FIXE MOBILE (toujours un tap d'appel à disposition)
1311     ============================================================ */
1312  .sticky-bar {
1313    position: fixed;
1314    left: 0; right: 0; bottom: 0;
1315    background: var(--paper);
1316    border-top: 1px solid var(--line);
1317    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
1318    display: flex; gap: 8px;
1319    z-index: 100;
1320    box-shadow: 0 -4px 20px rgba(11, 30, 45, 0.08);
1321  }
1322  .sticky-bar .btn { padding: 13px; font-size: 14px; }
1323  .sticky-bar .btn--call-dark {
1324    background: var(--ink); color: var(--paper);
1325  }
1326  .sticky-bar .btn--call-dark:hover { background: var(--ink-soft); }
1327
1328  /* ============================================================
1329     RESPONSIVE TABLETTE / DESKTOP
1330     ============================================================ */
1331  @media (min-width: 720px) {
1332    .hero { padding: 70px 40px 90px; }
1333    .hero__tagline { font-size: 22px; }
1334    section { padding: 90px 40px; }
1335    .section__title { font-size: 44px; }
1336    .services__grid { grid-template-columns: repeat(2, 1fr); }
1337    .sticky-bar { display: flex !important; position: fixed; bottom: 0; left: 50%; right: auto; transform: translateX(-50%); max-width: 480px; width: 480px; border-radius: 20px 20px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); z-index: 999; }
1338    body { padding-bottom: 0; }
1339    .calc__form { max-width: 580px; margin: 0 auto; }
1340    .result__actions { grid-template-columns: 1fr 1fr; }
1341    .reviews__inner, .more__inner { max-width: 680px; margin: 0 auto; }
1342  }
1343  @media (min-width: 1024px) {
1344    .hero__title { font-size: 76px; }
1345    .cta-row { max-width: 480px; }
1346  }
1347
1348  /* ============================================================
1349     CARTE INTERACTIVE — calques superposables modernes
1350     ============================================================ */
1351  .map-section {
1352    background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
1353    padding-bottom: 50px;
1354  }
1355  .map-layers {
1356    display: flex;
1357    flex-wrap: wrap;
1358    gap: 8px;
1359    margin: 20px 0 18px;
1360    justify-content: flex-start;
1361  }
1362  .layer-chip {
1363    display: inline-flex;
1364    align-items: center;
1365    gap: 6px;
1366    padding: 9px 14px;
1367    background: var(--paper);
1368    color: var(--ink);
1369    border: 1.5px solid var(--line);
1370    border-radius: 100px;
1371    font-family: 'Manrope', sans-serif;
1372    font-size: 13px;
1373    font-weight: 600;
1374    cursor: pointer;
1375    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
1376    box-shadow: 0 1px 2px rgba(11,30,45,0.04);
1377    user-select: none;
1378  }
1379  .layer-chip:hover {
1380    transform: translateY(-2px);
1381    box-shadow: 0 4px 12px rgba(11,30,45,0.10);
1382    border-color: var(--granit);
1383  }
1384  .layer-chip:active { transform: scale(0.96); }
1385  .layer-chip__icon { font-size: 16px; transition: transform 0.3s; }
1386  .layer-chip--active {
1387    background: var(--ink);
1388    color: var(--paper);
1389    border-color: var(--ink);
1390    box-shadow: 0 4px 14px rgba(11,30,45,0.25);
1391  }
1392  .layer-chip--active .layer-chip__icon { transform: scale(1.15); }
1393  .layer-chip--active:hover {
1394    background: var(--granit);
1395    border-color: var(--granit);
1396  }
1397  .leaflet-map {
1398    width: 100%;
1399    height: 480px;
1400    border-radius: var(--radius-lg);
1401    overflow: hidden;
1402    box-shadow: 0 12px 40px rgba(11,30,45,0.18);
1403    border: 1px solid var(--line);
1404    background: var(--paper-warm);
1405    position: relative;
1406  }
1407  .leaflet-map__loading {
1408    position: absolute;
1409    inset: 0;
1410    display: flex;
1411    align-items: center;
1412    justify-content: center;
1413    color: var(--ink);
1414    opacity: 0.5;
1415    font-size: 14px;
1416    z-index: 1;
1417  }
1418  .map-legend {
1419    margin-top: 14px;
1420    text-align: center;
1421    font-size: 12px;
1422    opacity: 0.65;
1423  }
1424  .map-legend__item {
1425    display: inline-block;
1426    padding: 6px 14px;
1427    background: var(--paper-warm);
1428    border-radius: 100px;
1429  }
1430  /* Popup Leaflet customisé */
1431  .leaflet-popup-content-wrapper {
1432    background: var(--paper) !important;
1433    color: var(--ink) !important;
1434    border-radius: 12px !important;
1435    box-shadow: 0 8px 24px rgba(11,30,45,0.20) !important;
1436    border: 1px solid var(--line) !important;
1437  }
1438  .leaflet-popup-content {
1439    margin: 14px 16px !important;
1440    font-family: 'Manrope', sans-serif !important;
1441    font-size: 13px !important;
1442    line-height: 1.5 !important;
1443  }
1444  .leaflet-popup-tip { background: var(--paper) !important; }
1445  .map-popup__title {
1446    font-family: 'Fraunces', serif;
1447    font-size: 16px;
1448    font-weight: 600;
1449    color: var(--ink);
1450    margin: 0 0 4px;
1451    line-height: 1.2;
1452  }
1453  .map-popup__category {
1454    display: inline-block;
1455    font-size: 10px;
1456    font-weight: 700;
1457    letter-spacing: 0.08em;
1458    text-transform: uppercase;
1459    color: var(--granit);
1460    margin-bottom: 6px;
1461  }
1462  .map-popup__desc {
1463    color: var(--ink);
1464    opacity: 0.8;
1465    margin: 4px 0 0;
1466  }
1467  .map-popup__taxi-btn {
1468    display: inline-block;
1469    margin-top: 8px;
1470    padding: 6px 12px;
1471    background: var(--ink);
1472    color: var(--paper);
1473    border-radius: 100px;
1474    font-size: 11px;
1475    font-weight: 600;
1476    text-decoration: none;
1477    transition: background 0.2s;
1478  }
1479  .map-popup__taxi-btn:hover { background: var(--granit); }
1480  .map-marker {
1481    width: 32px;
1482    height: 32px;
1483    border-radius: 50% 50% 50% 0;
1484    transform: rotate(-45deg);
1485    display: flex;
1486    align-items: center;
1487    justify-content: center;
1488    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
1489    border: 2px solid var(--paper);
1490    font-size: 14px;
1491  }
1492  .map-marker > * { transform: rotate(45deg); }
1493  .map-marker--incontournables { background: var(--granit); }
1494  .map-marker--pratique        { background: #2563eb; }
1495  .map-marker--rando           { background: #16a34a; }
1496  .map-marker--bons-plans      { background: var(--gold); }
1497  @media (max-width: 480px) {
1498    .leaflet-map { height: 420px; }
1499    .layer-chip { font-size: 12px; padding: 8px 12px; }
1500  }
1501
1502  /* ============================================================
1503     BOUTON VCARD — Enregistrer le contact (hero)
1504     ============================================================ */
1505  .hero__vcf {
1506    margin-top: 12px;
1507    display: flex;
1508    justify-content: center;
1509  }
1510  .hero__vcf-btn {
1511    display: inline-flex;
1512    align-items: center;
1513    gap: 7px;
1514    padding: 8px 16px;
1515    background: var(--gold);
1516    -webkit-backdrop-filter: blur(10px);
1517    backdrop-filter: blur(10px);
1518    border: 1px solid var(--gold);
1519    border-radius: 100px;
1520    color: var(--paper);
1521    font-family: 'Manrope', sans-serif;
1522    font-size: 14px;
1523    font-weight: 600;
1524    letter-spacing: 0.04em;
1525    cursor: pointer;
1526    transition: all 0.25s;
1527    opacity: 1;
1528  }
1529  .hero__vcf-btn:hover {
1530    background: rgba(245, 241, 235, 0.20);
1531    opacity: 1;
1532    transform: translateY(-1px);
1533  }
1534  .hero__vcf-btn svg {
1535    flex-shrink: 0;
1536    opacity: 0.9;
1537  }
1538
1539  /* ============================================================
1540     BANDEAU ASTUCE DU JOUR — tournant, dynamique, glassmorphism
1541     ============================================================ */
1542  .local-info .tip-banner { margin-bottom: 24px; border-radius: 16px; overflow: visible; color: var(--ink); background: var(--paper-warm); border: 1px solid rgba(201,169,97,0.5); backdrop-filter: none; -webkit-backdrop-filter: none; }
1543  .tip-banner {
1544    margin-top: 18px;
1545    padding: 12px 16px;
1546    background: rgba(245, 241, 235, 0.10);
1547    -webkit-backdrop-filter: blur(14px) saturate(180%);
1548    backdrop-filter: blur(14px) saturate(180%);
1549    border: 1px solid rgba(201, 169, 97, 0.35);
1550    border-radius: 100px;
1551    display: flex;
1552    align-items: center;
1553    gap: 12px;
1554    color: var(--paper);
1555    font-size: 13.5px;
1556    line-height: 1.4;
1557    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
1558    overflow: hidden;
1559    position: relative;
1560    z-index: 1;
1561  }
1562  /* Liseré or animé qui scintille subtilement */
1563  .tip-banner::before {
1564    content: '';
1565    position: absolute;
1566    inset: 0;
1567    border-radius: inherit;
1568    background: linear-gradient(90deg,
1569      transparent 0%,
1570      rgba(201, 169, 97, 0.15) 50%,
1571      transparent 100%);
1572    opacity: 0;
1573    animation: tipShimmer 6s ease-in-out infinite;
1574    pointer-events: none;
1575  }
1576  @keyframes tipShimmer {
1577    0%, 100% { opacity: 0; transform: translateX(-100%); }
1578    50% { opacity: 1; transform: translateX(100%); }
1579  }
1580  .tip-banner__icon {
1581    font-size: 18px;
1582    flex-shrink: 0;
1583    animation: tipPulse 2s ease-in-out infinite;
1584  }
1585  @keyframes tipPulse {
1586    0%, 100% { transform: scale(1); }
1587    50% { transform: scale(1.15); }
1588  }
1589  .tip-banner__text {
1590    white-space: normal !important;
1591    overflow: visible !important;
1592    text-overflow: unset !important;
1593    display: block !important; white-space: normal !important; overflow: visible !important;
1594    flex: 1;
1595    transition: opacity 0.5s ease, transform 0.5s ease;
1596    font-weight: 500;
1597  }
1598  .tip-banner__text.is-changing {
1599    opacity: 0;
1600    transform: translateY(-8px);
1601  }
1602  .tip-banner__text strong {
1603    color: var(--gold);
1604    font-weight: 700;
1605  }
1606  @media (min-width: 720px) {
1607    .local-info .tip-banner { margin-bottom: 24px; border-radius: 16px; overflow: visible; color: var(--ink); background: var(--paper-warm); border: 1px solid rgba(201,169,97,0.5); backdrop-filter: none; -webkit-backdrop-filter: none; }
1608  .tip-banner { font-size: 15px; padding: 14px 20px; }
1609    .tip-banner__icon { font-size: 22px; }
1610  }
1611  .hero__rating {
1612    display: inline-flex;
1613    align-items: center;
1614    gap: 8px;
1615    padding: 6px 14px;
1616    margin: 8px 0 18px;
1617    background: rgba(245, 241, 235, 0.15);
1618    -webkit-backdrop-filter: blur(8px);
1619    backdrop-filter: blur(8px);
1620    border: 1px solid var(--gold);
1621    border-radius: 100px;
1622    text-decoration: none;
1623    color: var(--paper);
1624    font-size: 13px;
1625    transition: transform 0.2s, background 0.2s;
1626  }
1627  .hero__rating:hover { transform: translateY(-1px); background: rgba(245, 241, 235, 0.22); }
1628  .hero__rating-stars {
1629    color: var(--gold);
1630    font-size: 14px;
1631    letter-spacing: 1px;
1632  }
1633  .hero__rating-text strong {
1634    font-weight: 700;
1635  }
1636
1637  /* ============================================================
1638     DESTINATIONS POPULAIRES — chips cliquables sur le calculateur
1639     ============================================================ */
1640  .popular-destinations {
1641    display: flex;
1642    flex-wrap: wrap;
1643    gap: 6px;
1644    align-items: center;
1645    margin-top: 10px;
1646  }
1647  .popular-destinations__label {
1648    font-size: 11px;
1649    font-weight: 700;
1650    letter-spacing: 0.08em;
1651    text-transform: uppercase;
1652    opacity: 0.5;
1653    margin-right: 2px;
1654  }
1655  .popular-chip {
1656    padding: 6px 12px;
1657    background: var(--paper);
1658    color: var(--ink);
1659    border: 1.5px solid var(--line);
1660    border-radius: 100px;
1661    font-family: 'Manrope', sans-serif;
1662    font-size: 12px;
1663    font-weight: 600;
1664    cursor: pointer;
1665    transition: all 0.2s;
1666  }
1667  .popular-chip:hover {
1668    background: var(--ink);
1669    color: var(--paper);
1670    border-color: var(--ink);
1671    transform: translateY(-1px);
1672  }
1673  .popular-chip:active { transform: scale(0.96); }
1674
1675  /* ============================================================
1676     SECTION À PROPOS — Photo + texte de Romain
1677     ============================================================ */
1678  .about {
1679    background: var(--paper-warm);
1680    border-top: 1px solid var(--line);
1681    border-bottom: 1px solid var(--line);
1682  }
1683  .about__inner {
1684    display: flex;
1685    flex-direction: column;
1686    gap: 24px;
1687    align-items: center;
1688  }
1689  .about__photo {
1690    width: 160px;
1691    height: 160px;
1692    border-radius: 50%;
1693    object-fit: cover;
1694    border: 4px solid var(--paper);
1695    box-shadow: var(--shadow-lg);
1696    flex-shrink: 0;
1697  }
1698  .about__content { flex: 1; text-align: center; }
1699  .about__name {
1700    font-family: 'Fraunces', serif;
1701    font-size: 32px;
1702    font-weight: 400;
1703    color: var(--ink);
1704    margin: 0 0 4px;
1705    line-height: 1.1;
1706  }
1707  .about__name em { color: var(--granit); font-style: italic; font-weight: 300; }
1708  .about__role {
1709    font-size: 13px;
1710    font-weight: 600;
1711    letter-spacing: 0.1em;
1712    text-transform: uppercase;
1713    color: var(--granit);
1714    margin-bottom: 16px;
1715  }
1716  .about__text {
1717    font-size: 15px;
1718    line-height: 1.65;
1719    color: var(--ink);
1720    opacity: 0.85;
1721    margin-bottom: 14px;
1722  }
1723  .about__text strong { color: var(--ink); opacity: 1; font-weight: 600; }
1724  .about__values {
1725    display: grid;
1726    grid-template-columns: repeat(2, 1fr);
1727    gap: 10px;
1728    margin: 18px 0;
1729  }
1730  .about__value {
1731    background: var(--paper);
1732    padding: 12px;
1733    border-radius: var(--radius);
1734    text-align: center;
1735    border: 1px solid var(--line);
1736  }
1737  .about__value-icon { font-size: 20px; margin-bottom: 4px; }
1738  .about__value-name {
1739    font-weight: 700;
1740    font-size: 13px;
1741    color: var(--ink);
1742    margin-bottom: 2px;
1743  }
1744  .about__value-desc {
1745    font-size: 11px;
1746    opacity: 0.7;
1747    line-height: 1.4;
1748  }
1749  .about__cta {
1750    display: inline-block;
1751    margin-top: 8px;
1752    font-size: 14px;
1753    color: var(--granit);
1754    font-weight: 600;
1755    text-decoration: none;
1756  }
1757  .about__cta:hover { text-decoration: underline; }
1758  @media (min-width: 720px) {
1759    .about__inner { flex-direction: row; gap: 40px; align-items: center; }
1760    .about__photo { width: 192px; height: 192px; }
1761    .about__content { text-align: left; }
1762    .about__values { grid-template-columns: repeat(4, 1fr); }
1763  }
1764  .lang-switcher {
1765    display: flex;
1766    gap: 6px;
1767    margin-bottom: 20px;
1768    position: relative;
1769    z-index: 1;
1770    justify-content: flex-end;
1771  }
1772  .lang-btn {
1773    padding: 5px 10px;
1774    border-radius: 100px;
1775    font-size: 12px;
1776    font-weight: 600;
1777    color: rgba(245,241,235,0.65);
1778    text-decoration: none;
1779    border: 1px solid rgba(245,241,235,0.20);
1780    transition: all 0.2s;
1781    letter-spacing: 0.04em;
1782  }
1783  .lang-btn:hover { color: var(--paper); border-color: rgba(245,241,235,0.45); }
1784  .lang-btn--active {
1785    color: var(--paper);
1786    background: rgba(245,241,235,0.15);
1787    border-color: rgba(245,241,235,0.40);
1788  }
1789
1790  .map-marker--chapelles{background:#7c3aed;}
1791  .result__min-fare{font-size:12px;font-weight:700;color:var(--gold);margin-bottom:6px;}
1792  .result__retour-note{font-size:11px;opacity:.70;margin-bottom:12px;line-height:1.5;font-style:italic;}
1793  .result__retour-note strong{color:var(--gold);font-style:normal;}
1794  .map-locate-btn{margin:10px;padding:8px 14px;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;box-shadow:var(--shadow);display:flex;align-items:center;gap:6px;}
1795  .map-popup{font-family:'Manrope',sans-serif;font-size:13px;line-height:1.5;color:var(--ink);max-width:260px;padding:4px 2px;}
1796  .map-popup__title{font-family:'Fraunces',serif;font-size:15px;font-weight:600;color:var(--ink);margin:0 0 4px;}
1797  .map-popup__category{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--granit);margin-bottom:6px;}
1798  .map-popup__desc{color:var(--ink);opacity:.8;margin:4px 0 8px;font-size:12px;}
1799  .map-popup__taxi-btn{display:inline-block;padding:6px 12px;background:var(--ink);color:#f5f1eb;border-radius:100px;font-size:11px;font-weight:600;text-decoration:none;}
1800  @media (max-width: 720px) {
1801    .tip-banner, .hero__status, .hero__reviews {
1802      -webkit-backdrop-filter: none !important;
1803      backdrop-filter: none !important;
1804    }
1805  }
1806  html, body { overflow-x: hidden; }
1807
1808/* Calculateur remonté vers le hero */
1809.calc { padding-top: 50px !important; }
1810@media (min-width: 720px) { .calc { padding-top: 55px !important; } }
1811</style>
1812</head>
1813<body>
1814
1815<!-- ==========================================================
1816     HERO — Premier regard, statement identité forte
1817     ========================================================== -->
1818<header class="hero">
1819  <nav class="lang-switcher" aria-label="Langue">
1820    <a href="/" class="lang-btn lang-btn--active" aria-current="page">🇫🇷 FR</a>
1821    <a href="/en/" class="lang-btn">🇬🇧 EN</a>
1822    <a href="/de/" class="lang-btn">🇩🇪 DE</a>
1823  </nav>
1824  <div class="hero__eyebrow">Pleumeur-Bodou · Côte de Granit Rose</div>
1825  <h1 class="hero__title">Taxi <em>Romain</em></h1>
1826  <p class="hero__tagline">Transferts · Excursions · Bagages — 7j/7 sur la Côte de Granit Rose.</p>
1827
1828  <!-- Preuve sociale immédiate -->
1829  <a href="https://www.google.com/search?q=taxi+romain+pleumeur-bodou" target="_blank" rel="noopener" class="hero__rating" aria-label="5 étoiles sur Google, 25 avis">
1830    <span class="hero__rating-stars" aria-hidden="true">★★★★★</span>
1831    <span class="hero__rating-text"><strong>5,0</strong> · 37 avis Google</span>
1832  </a>
1833
1834  <div class="hero__status">
1835    <span class="dot"></span>
1836    <span id="statusText">Disponible — chargement…</span>
1837  </div>
1838
1839  
1840
1841  <!-- BANDEAU ASTUCE DU JOUR — tournant, vivant, local -->
1842  
1843  <!-- ENREGISTRER LE CONTACT — visible dès le hero -->
1844  <div class="hero__vcf">
1845    <button id="saveContactBtnHero" class="hero__vcf-btn" aria-label="Enregistrer Taxi Romain dans mes contacts">
1846      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
1847      <span id="vcfHeroLabel">Enregistrer mon contact</span>
1848    </button>
1849  </div>
1850</header>
1851
1852<!-- ==========================================================
1853     CALCULATEUR DE PRIX
1854     ========================================================== -->
1855<section class="calc" id="calculateur">
1856  <div class="section__eyebrow">① Estimer ma course</div>
1857  <h2 class="section__title">Calculez votre <em>prix</em></h2>
1858  <p class="section__lede">Indiquez votre départ et votre arrivée. Estimation selon les tarifs officiels 2026 de la préfecture des Côtes-d'Armor.</p>
1859
1860  <form class="calc__form" id="calcForm" autocomplete="off">
1861    <div class="field">
1862      <label class="field__label" for="depart">Départ</label>
1863      <div class="field__input-row">
1864        <input class="field__input" id="depart" type="text" list="lieux"
1865          placeholder="Ex : Pleumeur-Bodou, gare de Lannion…" required />
1866        <button type="button" class="geo-btn" id="geoBtn" title="Utiliser ma position actuelle" aria-label="Utiliser ma position GPS">
1867          <svg id="geoBtnIcon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
1868            <circle cx="12" cy="12" r="3"/>
1869            <path d="M12 2v3M12 19v3M2 12h3M19 12h3"/>
1870            <circle cx="12" cy="12" r="8" stroke-opacity="0.3"/>
1871          </svg>
1872        </button>
1873      </div>
1874      <div class="geo-status" id="geoStatus"></div>
1875    </div>
1876
1877    <div class="field">
1878      <label class="field__label" for="arrivee">Arrivée</label>
1879      <input class="field__input" id="arrivee" type="text" list="lieux"
1880        placeholder="Ex : aéroport Brest, Perros-Guirec…" required />
1881      <!-- Destinations populaires : 1 tap = champ rempli -->
1882      <div class="popular-destinations" aria-label="Destinations populaires">
1883        <span class="popular-destinations__label">Populaires :</span>
1884        <button type="button" class="popular-chip" data-dest="Aéroport Brest-Bretagne">✈️ Brest</button>
1885        <button type="button" class="popular-chip" data-dest="Gare de Lannion">🚄 Lannion</button>
1886        <button type="button" class="popular-chip" data-dest="Ploumanac'h">🏖️ Ploumanac'h</button>
1887        <button type="button" class="popular-chip" data-dest="Perros-Guirec">⛱️ Perros</button>
1888        <button type="button" class="popular-chip" data-dest="Trégastel">🏔️ Trégastel</button>
1889      </div>
1890    </div>
1891
1892    <!-- Liste de suggestions (lieux fréquents) -->
1893    <datalist id="lieux">
1894      <option value="Pleumeur-Bodou"></option>
1895      <option value="Île-Grande, Pleumeur-Bodou"></option>
1896      <option value="Landrellec, Pleumeur-Bodou"></option>
1897      <option value="Gare de Lannion"></option>
1898      <option value="Lannion centre"></option>
1899      <option value="Aéroport Brest-Bretagne"></option>
1900      <option value="Aéroport Rennes-Saint-Jacques"></option>
1901      <option value="Gare de Guingamp"></option>
1902      <option value="Gare de Plouaret-Trégor"></option>
1903      <option value="Perros-Guirec"></option>
1904      <option value="Ploumanac'h, Perros-Guirec"></option>
1905      <option value="Trégastel"></option>
1906      <option value="Trébeurden"></option>
1907      <option value="Saint-Brieuc"></option>
1908    </datalist>
1909
1910    <div class="toggle" role="radiogroup" aria-label="Type de trajet">
1911      <input type="radio" id="simple" name="trajet" value="simple" checked />
1912      <label for="simple">Aller simple</label>
1913      <input type="radio" id="retour" name="trajet" value="retour" />
1914      <label for="retour">Aller-retour</label>
1915    </div>
1916
1917        <div style="margin-bottom:18px;width:100%;">
1918      <div style="font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);opacity:0.6;margin-bottom:10px;">Quand partez-vous ?</div>
1919      <button type="button" id="when-maintenant" onclick="wSelect('maintenant')" style="display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:14px;border:2px solid var(--ink);background:var(--paper);cursor:pointer;font-family:inherit;margin-bottom:8px;box-shadow:0 0 0 1.5px var(--ink);text-align:left;">
1920        <span style="font-size:20px;width:26px;text-align:center;flex-shrink:0;">🚕</span>
1921        <span style="flex:1;"><span style="display:block;font-size:14px;font-weight:700;color:var(--ink);">Maintenant</span><span style="display:block;font-size:11.5px;color:var(--ink);opacity:0.55;">Tarif selon l'heure actuelle</span></span>
1922        <span id="chk-maintenant" style="width:21px;height:21px;border-radius:50%;background:var(--ink);border:2px solid var(--ink);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--paper);font-size:12px;font-weight:700;">✓</span>
1923      </button>
1924      <button type="button" id="when-today" onclick="wSelect('today')" style="display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:14px;border:1.5px solid rgba(11,30,45,0.18);background:var(--paper);cursor:pointer;font-family:inherit;margin-bottom:8px;text-align:left;">
1925        <span style="font-size:20px;width:26px;text-align:center;flex-shrink:0;">⏰</span>
1926        <span style="flex:1;"><span style="display:block;font-size:14px;font-weight:700;color:var(--ink);">Plus tard aujourd'hui</span><span style="display:block;font-size:11.5px;color:var(--ink);opacity:0.55;">Choisissez le moment</span></span>
1927        <span id="chk-today" style="width:21px;height:21px;border-radius:50%;border:1.5px solid rgba(11,30,45,0.18);flex-shrink:0;background:transparent;"></span>
1928      </button>
1929      <button type="button" id="when-other" onclick="wSelect('other')" style="display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:14px;border:1.5px solid rgba(11,30,45,0.18);background:var(--paper);cursor:pointer;font-family:inherit;text-align:left;">
1930        <span style="font-size:20px;width:26px;text-align:center;flex-shrink:0;">📅</span>
1931        <span style="flex:1;"><span style="display:block;font-size:14px;font-weight:700;color:var(--ink);">Un autre jour</span><span style="display:block;font-size:11.5px;color:var(--ink);opacity:0.55;">Planifiez à l'avance</span></span>
1932        <span id="chk-other" style="width:21px;height:21px;border-radius:50%;border:1.5px solid rgba(11,30,45,0.18);flex-shrink:0;background:transparent;"></span>
1933      </button>
1934      <input type="date" id="wDate" style="display:none;width:100%;padding:12px 14px;margin-top:8px;border:1.5px solid rgba(11,30,45,0.18);border-radius:12px;font-family:inherit;font-size:15px;background:var(--paper);color:var(--ink);" />
1935      <div id="wMoment" style="display:none;gap:8px;margin-top:8px;width:100%;">
1936        <button type="button" id="wm-jour" onclick="wMoment('jour')" style="flex:1;padding:12px 8px;border-radius:12px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;">🌞 Jour · 7h–19h</button>
1937        <button type="button" id="wm-soir" onclick="wMoment('soir')" style="flex:1;padding:12px 8px;border-radius:12px;border:1.5px solid rgba(11,30,45,0.18);background:var(--paper);color:var(--ink);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;">🌙 Soir · 19h–7h</button>
1938      </div>
1939    </div>
1940    <button type="submit" class="btn btn--primary calc__submit">Calculer mon prix</button>
1941
1942    <div class="loading" id="loading"><span class="spinner"></span>Calcul en cours…</div>
1943    <div class="error-msg" id="errorMsg"></div>
1944
1945    <div class="result" id="result" aria-live="polite">
1946      <div class="result__label">Prix estimé</div>
1947      <div class="result__price" id="priceValue">—</div>
1948      <div class="result__detail" id="priceDetail">—</div>
1949      <div class="result__tarif" id="priceTarif">—</div>
1950      <div class="result__actions">
1951        <a href="/reservation" class="result__btn result__btn--resa" id="resaBtn">
1952          🗓️ Réserver en ligne
1953        </a>
1954        <a href="#" class="result__btn result__btn--wa" id="waBook">
1955          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.
1955198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884"/></svg>
1956          Réserver sur WhatsApp
1957        </a>
1958        <a href="tel:0622484962" class="result__btn result__btn--call">
1959          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
1960          Appeler directement
1961        </a>
1962      </div>
1963      <div class="result__note">Estimation indicative. Le prix facturé est celui affiché au compteur, conforme à la réglementation.</div>
1964      <div class="result__min-fare">Tarif course minimum : 15 €</div>
1965      <div class="result__retour-note" id="retourNote" style="display:none;">Pour un aller-retour avec attente, le temps d'attente est facturé <strong>28,64 €/h</strong> selon la tarification officielle.</div>
1966    </div>
1967  </form>
1968</section>
1969
1970<!-- ==========================================================
1971     SERVICES — 3 cards
1972     ========================================================== -->
1973
1974<section class="services">
1975  <div class="section__eyebrow">② Mes services</div>
1976  <h2 class="section__title">Des trajets <em>sur-mesure</em></h2>
1977  <p class="section__lede">Transferts, excursions, bagages — à votre service 7j/7 sur la Côte de Granit Rose et au-delà.</p>
1978
1979  <div class="services__grid">
1980    <div class="service-card" onclick="toggleCard(this)">
1981      <div class="service-card__header">
1982        <span class="service-card__icon">🚉</span>
1983        <h3 class="service-card__title">Gare de Lannion</h3>
1984        <span class="service-card__chevron">▼</span>
1985      </div>
1986      <div class="service-card__body">
1987        <p class="service-card__desc">Prise en charge à la gare SNCF de Lannion. Liaisons TER vers Rennes, Brest et Guingamp. Suivi des trains en temps réel, 7j/7.</p>
1988      </div>
1989    </div>
1990    <div class="service-card" onclick="toggleCard(this)">
1991      <div class="service-card__header">
1992        <span class="service-card__icon">✈️</span>
1993        <h3 class="service-card__title">Aéroports</h3>
1994        <span class="service-card__chevron">▼</span>
1995      </div>
1996      <div class="service-card__body">
1997        <p class="service-card__desc">Transferts vers Brest, Rennes et Nantes. Suivi des vols en temps réel. Disponible 7j/7 sur la Côte de Granit Rose.</p>
1998      </div>
1999    </div>
2000    <div class="service-card" onclick="toggleCard(this)">
2001      <div class="service-card__header">
2002        <span class="service-card__icon">📦</span>
2003        <h3 class="service-card__title">Bagages & Colis</h3>
2004        <span class="service-card__chevron">▼</span>
2005      </div>
2006      <div class="service-card__body">
2007        <p class="service-card__desc">Transfert de bagages pour randonneurs du GR34. Coursier express pour documents et colis urgents dans le Trégor.</p>
2008      </div>
2009    </div>
2010    <div class="service-card service-card--excursions" onclick="toggleCard(this)">
2011      <div class="service-card__header">
2012        <span class="service-card__icon">🗺️</span>
2013        <h3 class="service-card__title">Excursions</h3>
2014        <span class="service-card__chevron">▼</span>
2015      </div>
2016      <div class="service-card__body">
2017        <p class="service-card__desc">Découvrez la Côte de Granit Rose avec un chauffeur local : Ploumanac'h, Trébeurden, gouffre de Plougrescant.</p>
2018      </div>
2019    </div>
2020  </div>
2021</section>
2022
2023
2024<div style="text-align:center; padding: 4px 22px 28px;">
2025  <a href="https://taxi-romain-pleumeur-bodou.fr/" target="_blank" rel="noopener" style="font-size:14px; font-weight:600; color:var(--granit); text-decoration:none;">Découvrir tous mes services sur mon site complet →</a>
2026</div>
2027<!-- ==========================================================
2028     CARTE INTERACTIVE AVEC CALQUES — Compagnon de vacances
2029     ========================================================== -->
2030<section class="map-section" id="carte" aria-labelledby="map-title">
2031  <div class="section__eyebrow">④ Explorer la région</div>
2032  <h2 class="section__title" id="map-title">Votre <em>compagnon</em> de vacances</h2>
2033  <p class="section__lede">Découvrez la Côte de Granit Rose. Activez ou désactivez les calques selon vos envies.</p>
2034
2035  <!-- Sélecteur de calques -->
2036  <div class="map-layers" role="group" aria-label="Calques de la carte">
2037        <button type="button" class="layer-chip layer-chip--active" data-layer="incontournables">
2038      <span class="layer-chip__icon">&#x1F3D6;</span>
2039      <span class="layer-chip__label">Incontournables</span>
2040    </button>
2041    <button type="button" class="layer-chip" data-layer="pratique">
2042      <span class="layer-chip__icon">&#x1F4CD;</span>
2043      <span class="layer-chip__label">Pratique</span>
2044    </button>
2045    <button type="button" class="layer-chip" data-layer="rando">
2046      <span class="layer-chip__icon">&#x1F97E;</span>
2047      <span class="layer-chip__label">Rando GR34</span>
2048    </button>
2049    <button type="button" class="layer-chip" data-layer="restaurants">
2050      <span class="layer-chip__icon">&#x1F37D;</span>
2051      <span class="layer-chip__label">Restaurants</span>
2052    </button>
2053    <button type="button" class="layer-chip" data-layer="creperies">
2054      <span class="layer-chip__icon">&#x1F95E;</span>
2055      <span class="layer-chip__label">Creperies et Glaciers</span>
2056    </button>
2057    <button type="button" class="layer-chip" data-layer="patrimoine">
2058      <span class="layer-chip__icon">&#x1F3DB;</span>
2059      <span class="layer-chip__label">Patrimoine</span>
2060    </button>
2061    <button type="button" class="layer-chip" data-layer="bons-plans">
2062      <span class="layer-chip__icon">&#x2B50;</span>
2063      <span class="layer-chip__label">Bons plans</span>
2064    </button>
2065  </div>
2066
2067  <!-- Carte Leaflet -->
2068  <div id="leafletMap" class="leaflet-map" role="application" aria-label="Carte interactive de la Côte de Granit Rose">
2069    <div class="leaflet-map__loading">Chargement de la carte…</div>
2070  </div>
2071
2072  <p class="map-legend">
2073    <span class="map-legend__item">📍 Tapez sur un point pour plus d'info</span>
2074  </p>
2075</section>
2076
2077<!-- ==========================================================
2078     INFO LOCALE — Météo + Marées + Transports
2079     ========================================================== -->
2080<section class="local-info">
2081  <div class="section__eyebrow">⑤ Info locale</div>
2082  <h2 class="section__title">Pleumeur-Bodou <em>en ce moment</em></h2>
2083  <p class="section__lede">Transports en commun et météo pour mieux planifier votre séjour sur la Côte de Granit Rose.</p>
2084
2085  <!-- TRANSPORTS -->
2086  <div class="section__eyebrow" style="margin-bottom:6px;">🚌 Transports en commun</div>
2087  <p style="font-size:13px; opacity:0.65; margin-bottom:14px;">Réseau <strong>TILT</strong> — Cliquez sur une ligne pour accéder directement à ses horaires.</p>
2088<div class="tip-banner" id="tipBanner" role="region" aria-label="Astuce du jour">
2089    <span class="tip-banner__icon" aria-hidden="true">💡</span>
2090    <span class="tip-banner__text" id="tipBannerText">Chargement…</span>
2091  </div>
2092
2093  <div class="transport-grid">
2094    <a href="./lignes-DE.pdf" target="_blank" rel="noopener" class="transport-card" style="grid-column: 1 / -1;">
2095      <span class="transport-card__icon">🚌</span>
2096      <div>
2097        <div class="transport-card__name">Lignes D & E</div>
2098        <div class="transport-card__desc">
2099          <strong>D</strong> — Lannion ↔ Île Grande via Pleumeur-Bodou & Trébeurden<br>
2100          <strong>E</strong> — Lannion ↔ Trégastel via Perros-Guirec
2101        </div>
2102      </div>
2103    </a>
2104    <a href="./macareux.pdf" target="_blank" rel="noopener" class="transport-card">
2105      <span class="transport-card__icon">🐦</span>
2106      <span class="transport-card__name">Le Macareux</span>
2107      <span class="transport-card__desc">Louannec ↔ Perros-Guirec<br>↔ Trégastel</span>
2108    </a>
2109    <a href="https://www.sncf-connect.com/app/home/search?originCode=FRLNI" target="_blank" rel="noopener" class="transport-card">
2110      <span class="transport-card__icon">🚆</span>
2111      <span class="transport-card__name">TER Bretagne</span>
2112      <span class="transport-card__desc">Trains depuis Lannion<br>Guingamp · Rennes · Brest</span>
2113    </a>
2114  </div>
2115  <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;">
2116    <a href="https://pysae.com/screen/#/tilt/all" target="_blank" rel="noopener"
2117       id="btnTempsReel" class="btn btn--primary" style="font-size:13px; padding:12px; text-decoration:none; text-align:left; justify-content:flex-start; padding-left:20px;">
2118      Temps réel
2119    </a>
2120    <a href="https://www.lannion-tregor.com/vos-services/transports/transport-en-commun/" target="_blank" rel="noopener"
2121       class="btn btn--ghost" style="font-size:13px; padding:12px; text-decoration:none; text-align:center; justify-content:center;">
2122      📋 Tous les horaires
2123    </a>
2124  </div>
2125
2126<!-- MÉTÉO 3 JOURS — style iOS Weather -->
2127  <div class="weather-container" id="weatherContainer">
2128    <div class="weather-location">📍 Pleumeur-Bodou</div>
2129    <div id="weather" class="weather-grid">
2130      <div class="weather-loading">Chargement de la météo…</div>
2131    </div>
2132  </div>
2133</section>
2134
2135<!-- ==========================================================
2136     FAQ — VOS QUESTIONS
2137     ========================================================== -->
2138<section class="faq">
2139  <div class="section__eyebrow">⑥ Vos questions</div>
2140  <h2 class="section__title">Tout ce qu'il faut <em>savoir</em></h2>
2141
2142  <div class="faq__list" id="faqList">
2143
2144    <div class="faq__item">
2145      <button class="faq__question" aria-expanded="false">
2146        <span>💳 Quels moyens de paiement ?</span>
2147        <svg class="faq__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>
2148      </button>
2149      <div class="faq__answer" role="region">
2150        <div class="faq__answer-inner">
2151          J'accepte les <strong>espèces</strong>, le paiement par <strong>carte bancaire</strong> et <strong>Wero</strong>.
2152        </div>
2153      </div>
2154    </div>
2155
2156    <div class="faq__item">
2157      <button class="faq__question" aria-expanded="false">
2158        <span>🐕 Les animaux sont-ils acceptés ?</span>
2159        <svg class="faq__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>
2160      </button>
2161      <div class="faq__answer" role="region">
2162        <div class="faq__answer-inner">
2163          Oui, les animaux de compagnie sont les bienvenus. Cependant, je me réserve le droit de refuser un animal mouillé ou susceptible d'endommager l'habitacle de mon véhicule. En cas de doute, signalez-le à la réservation.
2164        </div>
2165      </div>
2166    </div>
2167
2168    <div class="faq__item">
2169      <button class="faq__question" aria-expanded="false">
2170        <span>👶 Siège enfant disponible ?</span>
2171        <svg class="faq__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>
2172      </button>
2173      <div class="faq__answer" role="region">
2174        <div class="faq__answer-inner">
2175          J'ai un <strong>réhausseur</strong> disponible à bord. Merci de me le signaler lors de votre réservation afin que je le prépare pour vous.
2176        </div>
2177      </div>
2178    </div>
2179
2180    <div class="faq__item">
2181      <button class="faq__question" aria-expanded="false">
2182        <span>♿ Accessibilité & bagages volumineux ?</span>
2183        <svg class="faq__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>
2184      </button>
2185      <div class="faq__answer" role="region">
2186        <div class="faq__answer-inner">
2187          Le <strong>fauteuil roulant pliant</strong> est accepté sans problème. En revanche, les vélos, planches de surf ou grandes planches à voile ne peuvent pas être transportés — ils ne rentrent pas dans le coffre. Contactez-moi pour trouver une solution adaptée.
2188        </div>
2189      </div>
2190    </div>
2191
2192    <div class="faq__item">
2193      <button class="faq__question" aria-expanded="false">
2194        <span>📅 Faut-il réserver à l'avance ?</span>
2195        <svg class="faq__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>
2196      </button>
2197      <div class="faq__answer" role="region">
2198        <div class="faq__answer-inner">
2199          Il n'y a pas de délai minimum obligatoire. Cependant, <strong>réserver à l'avance est fortement recommandé</strong> pour garantir ma disponibilité, en particulier tôt le matin, tard le soir, les dimanches et jours fériés. Je fais toujours le maximum pour répondre présent.
2200        </div>
2201      </div>
2202    </div>
2203
2204    <div class="faq__item">
2205      <button class="faq__question" aria-expanded="false">
2206        <span>📍 Y a-t-il un tarif minimum pour les très courtes distances ?</span>
2207        <svg class="faq__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>
2208      </button>
2209      <div class="faq__answer" role="region">
2210        <div class="faq__answer-inner">
2211          Il n'existe pas de tarif minimum réglementaire. Le compteur démarre à la prise en charge (6 €) puis selon le kilométrage. Cependant, si je dois parcourir une longue distance à vide pour vous rejoindre en vue d'un trajet très court, je peux vous demander de <strong>participer aux frais de déplacement</strong>. Je vous en informerai toujours avant d'accepter la course — nous trouverons ensemble la solution la plus juste.
2212        </div>
2213      </div>
2214    </div>
2215
2216  </div>
2217  <div style="text-align:center; margin-top:20px;">
2218    <a href="https://taxi-romain-pleumeur-bodou.fr/tarifs-taxi-pleumeur-bodou/" target="_blank" rel="noopener"
2219       style="font-size:14px; font-weight:600; color:var(--granit); text-decoration:none;">
2220      Voir les tarifs détaillés sur mon site →
2221    </a>
2222  </div>
2223</section>
2224<section class="about">
2225  <div class="about__inner">
2226    <img src="./romain-portrait.jpg" alt="Romain, chauffeur de taxi à Pleumeur-Bodou" class="about__photo" loading="lazy" />
2227    <div class="about__content">
2228      <div class="section__eyebrow" style="text-align:inherit;">⑦ Faisons connaissance</div>
2229      <h2 class="about__name">Romain, <em>votre chauffeur</em></h2>
2230      <p class="about__role">15 ans d'expérience · Pleumeur-Bodou</p>
2231      <div class="about__values">
2232        <div class="about__value">
2233          <div class="about__value-icon">⏱️</div>
2234          <div class="about__value-name">Ponctualité</div>
2235          <div class="about__value-desc">
2235Suivi train/vol en temps réel</div>
2236        </div>
2237        <div class="about__value">
2238          <div class="about__value-icon">🤐</div>
2239          <div class="about__value-name">Discrétion</div>
2240          <div class="about__value-desc">Je m'adapte à votre besoin</div>
2241        </div>
2242        <div class="about__value">
2243          <div class="about__value-icon">💬</div>
2244          <div class="about__value-name">Convivialité</div>
2245          <div class="about__value-desc">Bons plans bretons</div>
2246        </div>
2247        <div class="about__value">
2248          <div class="about__value-icon">✅</div>
2249          <div class="about__value-name">Fiabilité</div>
2250          <div class="about__value-desc">Mercedes Classe E</div>
2251        </div>
2252      </div>
2253
2254      <a href="https://taxi-romain-pleumeur-bodou.fr/chauffeur-taxi-pleumeur-bodou/" target="_blank" rel="noopener" class="about__cta">
2255        Lire mon parcours complet →
2256      </a>
2257
2258      <!-- SUIVEZ-MOI — Réseaux sociaux Romain -->
2259      <div class="social-follow" aria-label="Suivez Taxi Romain sur les réseaux">
2260        <p class="social-follow__title">📲 Suivez-moi pour les bons plans bretons</p>
2261        <div class="social-follow__links">
2262          <a href="https://www.instagram.com/taxiromain/" target="_blank" rel="noopener"
2263             class="social-follow__btn social-follow__btn--instagram" aria-label="Instagram Taxi Romain">
2264            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
2265            Instagram
2266          </a>
2267          <a href="https://www.facebook.com/profile.php?id=61571932312202" target="_blank" rel="noopener"
2268             class="social-follow__btn social-follow__btn--facebook" aria-label="Facebook Taxi Romain">
2269            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
2270            Facebook
2271          </a>
2272        </div>
2273        <p class="social-follow__desc">Photos de la Côte, coulisses du métier, conseils locaux.</p>
2274      </div>
2275    </div>
2276  </div>
2277</section>
2278
2279<section class="reviews">
2280  <div class="reviews__inner">
2281    <div class="section__eyebrow">③ Ils ont aimé</div>
2282    <h2 class="section__title">5 étoiles <em>— 37 avis Google</em></h2>
2283
2284    <div class="review">
2285      <div class="review__stars">★★★★★</div>
2286      <p class="review__text">« Lors d'un périple à pied de 5 jours sur le GR34, nous avons confié le transfert de nos bagages de gîte en gîte au Taxi Romain. Il a su s'adapter à nos contraintes sans difficultés, avec une grande ponctualité et un message d'info à chaque transfert. Nous le recommandons vivement. »</p>
2287      <div class="review__author">Patrick Bonnefoi · GR34</div>
2288    </div>
2289
2290    <div class="review">
2291      <div class="review__stars">★★★★★</div>
2292      <p class="review__text">« Vraiment fiable. Conducteur très prudent et très sympathique. Il a contribué à rendre nos vacances inoubliables. Merci Romain ! »</p>
2293      <div class="review__author">Petrina Cribb · Royaume-Uni</div>
2294    </div>
2295
2296    <div class="review">
2297      <div class="review__stars">★★★★★</div>
2298      <p class="review__text">« Merci beaucoup Romain pour votre professionnalisme et votre gentillesse pour des trajets entre la gare de Lannion et Perros-Guirec. Accueil agréable, voiture confortable — nous vous solliciterons de nouveau pour de prochaines vacances. »</p>
2299      <div class="review__author">Florence Cabasset · Local Guide Google</div>
2300    </div>
2301
2302    <div class="review">
2303      <div class="review__stars">★★★★★</div>
2304      <p class="review__text">« Super taxi. 2 randonneurs sur le GR34. Très arrangeant, plusieurs jours de rang pour nous prendre et déposer. Ponctuel. À recommander. Bravo et merci encore Mr. Romain. »</p>
2305      <div class="review__author">AP Cotteret EF · GR34</div>
2306    </div>
2307
2308    <div class="review">
2309      <div class="review__stars">★★★★★</div>
2310      <p class="review__text">« Je recommande pour les personnes de Lannion, Perros, Pleumeur et alentours. Taxi très professionnel, sympathique et chaleureux, voiture propre et agréable. Service très réactif ! »</p>
2311      <div class="review__author">Anaïs Mauras · Côte de Granit Rose</div>
2312    </div>
2313
2314    <div class="reviews__google">
2315      <div class="reviews__google-text">
2316        <strong>⭐ 5,0</strong> sur Google<br>
2317        <span style="opacity:0.7">Basé sur 37 avis vérifiés</span>
2318      </div>
2319      <a href="https://www.google.com/maps/search/taxi+romain+pleumeur-bodou" target="_blank" rel="noopener" class="reviews__google-cta">Laisser un avis →</a>
2320    </div>
2321    <div style="text-align:center; margin-top:18px;">
2322      <a href="https://taxi-romain-pleumeur-bodou.fr/avis-clients/" target="_blank" rel="noopener"
2323         style="font-size:14px; font-weight:600; color:var(--gold); text-decoration:none;">
2324        Tous les avis sur mon site →
2325      </a>
2326    </div>
2327  </div>
2328</section>
2329
2330<!-- ==========================================================
2331     LIEN VERS SITE COMPLET
2332     ========================================================== -->
2333<section class="more">
2334  <div class="more__inner">
2335    <div class="section__eyebrow">Envie d'en savoir plus ?</div>
2336    <h2 class="section__title more__title">Découvrez mon <em>site complet</em></h2>
2337    <p class="more__desc">Plus de détails sur mes services, mes tarifs complets, mes zones de desserte, un blog sur la Côte de Granit Rose, une FAQ et mes versions anglais / allemand.</p>
2338    <a href="https://taxi-romain-pleumeur-bodou.fr/" class="btn btn--ghost" style="display:inline-flex; max-width:320px;">
2339      taxi-romain-pleumeur-bodou.fr →
2340    </a>
2341  </div>
2342</section>
2343
2344<!-- ==========================================================
2345     FOOTER
2346     ========================================================== -->
2347<footer>
2348  <div class="brand">Taxi <em>Romain</em></div>
2349  <div class="tagline">Côte de Granit Rose</div>
2350
2351  <div class="contact">
2352    <a href="tel:0622484962">📞 06 22 48 49 62</a>
2353    <span style="opacity:0.6">7j/7 — 5h à 22h</span>
2354    <a href="./Taxi-Romain.vcf" class="contact-save-btn" download="Taxi-Romain.vcf">
2355      👤 Enregistrer dans mes contacts
2356    </a>
2357  </div>
2358
2359  <div class="socials">
2360    <a href="https://www.facebook.com/profile.php?id=61571932312202" target="_blank" rel="noopener" aria-label="Facebook">
2361      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
2362    </a>
2363    <a href="https://www.instagram.com/taxiromain/" target="_blank" rel="noopener" aria-label="Instagram">
2364      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
2365    </a>
2366    <a href="https://x.com/romainNico1175" target="_blank" rel="noopener" aria-label="Twitter / X">
2367      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
2368    </a>
2369  </div>
2370
2371  <div class="legal">© 2026 Taxi Romain · Mentions légales sur le site</div>
2372</footer>
2373
2374<!-- ==========================================================
2375     BARRE FIXE BAS MOBILE
2376     (Toujours un tap d'appel à disposition)
2377     ========================================================== -->
2378<nav class="sticky-bar" aria-label="Actions rapides">
2379  <a href="tel:0622484962" class="btn btn--call-dark">
2380    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
2381    Appeler
2382  </a>
2383  <a href="https://wa.me/33622484962" class="btn btn--wa">
2384    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884"/></svg>
2385    WhatsApp
2386  </a>
2387  <a href="/reservation" class="btn btn--primary" style="flex:0 0 auto; padding: 10px 14px; font-size:13px; background:#1B3A6B; color:white; border-radius:12px;">
2388    🗓️ Réserver
2389  </a>
2390  
2391</nav>
2392
2393<!-- Placeholder pour le script du calculateur (ajouté à l'étape 2) -->
2394<!-- ==========================================================
2395     BANNIÈRE INSTALLATION PWA
2396     ========================================================== -->
2397<div class="install-banner" id="installBanner" role="dialog" aria-label="Installer l'application">
2398  <button class="install-banner__close" id="installBannerClose" aria-label="Fermer">✕</button>
2399  <div>
2400    <div class="install-banner__title">📲 Installez l'app gratuitement</div>
2401    <p class="install-banner__text" id="installBannerText">
2402      Accédez à Taxi Romain en 1 tap depuis votre écran d'accueil — sans passer par le Play Store.
2403    </p>
2404    <div class="install-banner__actions">
2405      <button class="install-banner__btn install-banner__btn--primary" id="installAppBtn">
2406        Installer
2407      </button>
2408      <button class="install-banner__btn install-banner__btn--ghost" id="installBannerClose2">
2409        Plus tard
2410      </button>
2411    </div>
2412  </div>
2413</div>
2414
2415<!-- BOUTON SCROLL TO TOP -->
2416<button class="scroll-top" id="scrollTopBtn" aria-label="Retour en haut">↑</button>
2417
2418<script src="app.js" defer></script>
2418
2419  
2419<script src="perturbations.js"></script>
2419
2420
2421<script>
2422  function toggleCard(c){c.classList.toggle('is-open');}
2423</script>
2423
2424</body>
2425</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.