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">🏖</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">📍</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">🥾</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">🍽</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">🥞</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">🏛</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">⭐</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.