/* === Marketing Popup (first visit) === */
.mp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:9997}
.mp-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);background:#fff;color:#111;box-shadow:0 24px 70px rgba(0,0,0,.25);border-radius:14px;width:min(92vw,720px);max-height:88vh;overflow:auto;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s ease;z-index:9998}
.mp-modal .mp-close{position:absolute;top:10px;right:12px;background:transparent;border:0;font-size:26px;line-height:1;color:#111;cursor:pointer}
.mp-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:0}
.mp-visual{min-height:280px;background:#e6eef9 url("images/reduction.png") center/cover no-repeat;border-top-left-radius:14px;border-bottom-left-radius:14px}
.mp-content{padding:22px}
.mp-content h3{font-size:26px;line-height:1.2;margin:0 0 8px}
.mp-content p{color:#4b5563;margin:0 0 14px}
.mp-form{display:flex;gap:8px;flex-wrap:wrap}
.mp-form input[type=email]{flex:1 1 220px;padding:10px 12px;border:1px solid #d0d7de;border-radius:10px;outline:0}
.mp-form .btn{padding:10px 14px;border-radius:10px;border:1px solid #0d6efd;background:#0d6efd;color:#fff;cursor:pointer}
.mp-never{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.95rem;color:#374151}
.mp-open .mp-overlay{opacity:1;visibility:visible}
.mp-open .mp-modal{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width: 768px){
  .mp-grid{grid-template-columns:1fr}
  .mp-visual{display:none}
  .mp-content{padding:18px}
}

/* Dark mode support */
body.dark-mode .mp-modal{background:#0b1520;color:#e6edf3}
body.dark-mode .mp-content p{color:#cbd5e1}
body.dark-mode .mp-form input[type=email]{background:#0b1220;border-color:#1f2937;color:#e6edf3}
body.dark-mode .mp-modal .mp-close{color:#e6edf3}
/*!
Theme Name: poolParty
Theme URI: https://poolparty.fr/
Author: Équipe PoolParty
Author URI: https://poolparty.fr/
Description: Thème WordPress personnalisé pour la plateforme de location de piscines entre particuliers PoolParty. Interface moderne et responsive pour la gestion des réservations, la location de piscines et la création de comptes utilisateurs.
Version: 1.0.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: poolparty
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, e-commerce, booking, pool-rental, responsive, modern
Theme Image: images/logo.svg

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

poolParty is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #1a6fa3;
}

a:visited {
	color: #1a6fa3;
}

a:hover,
a:focus,
a:active {
	color: #155a8a;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* === Styles personnalisés page d'accueil PoolParty === */

.accueil {
  min-height: 100vh;
}

/* === POLICE GLOBALE === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
body, input, button, select, textarea {
  font-family: 'Montserrat', Arial, sans-serif;
}

/* === BANNIÈRE === */
.banniere {
  position: relative;
  height: 80vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../images/Hero 1.png') center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  text-align: center;
}

.banniere h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 30px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  z-index: 2;
  position: relative;
}

.recherche {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 2;
  position: relative;
}

.recherche input {
  padding: 15px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 16px;
  min-width: 150px;
  transition: border-color 0.3s ease;
}

.recherche input:focus {
  outline: none;
  border-color: #1a6fa3;
}

.recherche button {
  background: #1a6fa3;
  color: white;
  border: none;
  padding: 15px 25px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 50px;
}

.recherche button:hover {
  background: #155a8a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26, 111, 163, 0.4);
}

.recherche button svg {
  width: 20px;
  height: 20px;
  color: white;
  transition: transform 0.3s ease;
}

.recherche button:hover svg {
  transform: scale(1.1);
}

.recherche .dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

/* Responsive pour la bannière */
@media (max-width: 768px) {
  .banniere {
    height: 70vh;
    min-height: 500px;
  }
  
  .banniere h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
  }
  
  .recherche {
    flex-direction: column;
    padding: 20px;
  }
  
  .recherche input {
    width: 100%;
    min-width: auto;
  }
  
  .recherche button {
    width: 100%;
    justify-content: center;
  }
}

/* === BEST SELLER === */
.best-seller {
  background: #fff;
  padding: 64px 0 40px 0;
  text-align: center;
}
.best-seller h2 {
  font-size: 2.5em;
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}
.best-seller p {
  color: #222;
  font-size: 1.1em;
  margin-bottom: 0;
}


.best-seller .piscines-carousel {
  position: relative;
  margin-top: 48px;
  overflow: hidden;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.best-seller .piscines-wrapper {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  gap: 30px;
  padding: 20px;
  touch-action: pan-y;
  cursor: grab;
}

.best-seller .piscines-wrapper:active {
  cursor: grabbing;
}

.best-seller .piscines {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 48px;
}
.piscine {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  padding: 20px 20px 24px 20px;
  width: 350px;
  min-width: 350px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 2px solid #e8f4f8;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  min-height: 420px;
  flex-shrink: 0;
}
.piscine:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(26, 111, 163, 0.15);
  border: 2px solid #1a6fa3;
}
.piscine img {
  width: 100%;
  border-radius: 18px;
  margin-bottom: 14px;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.piscine h3 {
  margin: 0 0 10px 0;
  font-size: 1.25em;
  font-weight: 700;
}
.piscine p {
  font-size: 1.08em;
  color: #222;
  margin-bottom: 16px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: calc(1.4em * 4);
}
.piscine a {
  display: inline-block;
  margin-top: auto;
  color: #222;
  background: #e0f0fa;
  padding: 12px 0;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1em;
  box-shadow: 0 2px 8px #0001;
  transition: background 0.2s, color 0.2s;
  width: 90%;
  text-align: center;
  border: none;
  margin-bottom: 0;
  align-self: center;
}
.piscine a:hover {
  background: #ffd77a;
  color: #1a6fa3;
}



/* Boutons de navigation du carousel - MASQUÉS */
.carousel-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.carousel-btn:hover {
  display: none !important;
}

.prev-btn {
  display: none !important;
}

.next-btn {
  display: none !important;
}

/* Amélioration des dots */
.pagination-dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
  padding: 20px;
}

.pagination-dots .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d1d5db;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 2px solid transparent;
}

.pagination-dots .dot:hover {
  background: #1a6fa3;
  transform: scale(1.3);
  border-color: rgba(26, 111, 163, 0.3);
}

.pagination-dots .dot.active {
  background: #1a6fa3;
  transform: scale(1.3);
  border-color: rgba(26, 111, 163, 0.3);
  box-shadow: 0 0 0 4px rgba(26, 111, 163, 0.1);
}

/* === OCCASIONS === */
.occasions {
  background: #cbeafe;
  padding: 56px 0 40px 0;
  text-align: center;
}

.occasions h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 60px;
  white-space: nowrap;
  overflow: hidden;
}

.occasions-grid {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 0;
  flex-wrap: wrap;
}

.occasion-card {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.occasion-card:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.occasion-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.3s ease;
}

.occasion-card:hover img {
  transform: scale(1.1);
}

.occasion-card span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffd77a;
  color: #333;
  padding: 15px;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* === EXPÉRIENCE === */
.experience {
  background: #fff;
  padding: 64px 0 48px 0;
  text-align: center;
  position: relative;
}
.experience h3 {
  font-size: 1.7em;
  margin-bottom: 16px;
  color: #1a6fa3;
  font-weight: 700;
}
.experience p {
  max-width: 800px;
  margin: 0 auto 22px auto;
  font-size: 1.13em;
}
.boutons-exp {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
}
.btn {
  padding: 18px 48px;
  border-radius: 16px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.15em;
  transition: background 0.2s, color 0.2s;
  box-shadow: 0 2px 8px #0001;
  border: none;
  display: inline-block;
}
.btn.jaune {
  background: #ffd77a;
  color: #222;
}
.btn.jaune:hover {
  background: #1a6fa3;
  color: #fff;
}
.btn.blanc {
  background: #fff;
  color: #1a6fa3;
  border: 2.5px solid #1a6fa3;
}
.btn.blanc:hover {
  background: #1a6fa3;
  color: #fff;
}

/* Badge expérience - supprimé */

/* === AVIS CLIENTS === */
.avis {
  background: #cbeafe;
  padding: 56px 0;
  text-align: center;
}

.avis h3 {
  font-size: 1.4em;
  font-weight: 700;
  margin-bottom: 24px;
}

.avis-card {
  background: #fff;
  border-radius: 22px;
  padding: 32px 38px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 4px 16px #0001;
  position: relative;
  text-align: center;
}

.avis-card::before {
  content: '\201C';
  font-size: 2.8em;
  color: #ffd77a;
  position: absolute;
  left: 18px;
  top: 0;
}

.avis-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.user-rating {
  font-size: 1.5rem;
  color: #ffd77a;
}

.avis blockquote {
  font-size: 1.18em;
  font-style: italic;
  color: #1a6fa3;
  margin: 0 auto;
  max-width: 600px;
  background: #fff;
  border-radius: 22px;
  padding: 32px 38px;
  box-shadow: 0 4px 16px #0001;
  position: relative;
  text-align: center;
}

.avis blockquote::before {
  content: '\201C';
  font-size: 2.8em;
  color: #ffd77a;
  position: absolute;
  left: 18px;
  top: 0;
}

/* === HEADER PoolParty === */
.site-header {
  background: #fff;
  box-shadow: 0 2px 8px #0001;
  padding: 0;
  position: relative;
  z-index: 10;
}
.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
}
.logo img {
  height: 48px;
  width: auto;
  object-fit: contain;
  transition: all 0.3s ease;
}

.logo img:hover {
  transform: scale(1.05);
}
.main-nav .nav-list {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav .nav-list li {
  display: inline-block;
}
.main-nav .nav-list li a {
  color: #222;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.1em;
  padding: 8px 0;
  transition: color 0.2s;
}
.main-nav .nav-list li a:hover {
  color: #1a6fa3;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-search {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 2px 10px;
  margin-right: 10px;
}
.header-search input {
  border: none;
  background: transparent;
  outline: none;
  padding: 6px 8px;
  font-size: 1em;
}
.header-search button {
  background: none;
  border: none;
  cursor: pointer;
  color: #1a6fa3;
  font-size: 1.2em;
}
.icon {
  font-size: 1.5em;
  color: #1a6fa3;
  margin-left: 6px;
  transition: color 0.2s;
}
.icon:hover {
  color: #ffb700;
}



/* === PAGES LÉGALES === */
.mentions-legales-page,
.politique-confidentialite-page {
  padding: 48px 0;
  background: #f8f9fa;
  min-height: 60vh;
}

.mentions-container,
.politique-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 32px;
}

.mentions-header,
.politique-header {
  text-align: center;
  margin-bottom: 48px;
}

.mentions-title,
.politique-title {
  color: #1a6fa3;
  font-size: 2.5em;
  margin-bottom: 16px;
  font-weight: 700;
}

.mentions-subtitle,
.politique-subtitle {
  color: #6c757d;
  font-size: 1.2em;
  margin: 0;
}

.mentions-content,
.politique-content {
  background: #fff;
  border-radius: 12px;
  padding: 48px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.mentions-section,
.politique-section {
  margin-bottom: 40px;
}

.mentions-section:last-child,
.politique-section:last-child {
  margin-bottom: 0;
}

.mentions-section h2,
.politique-section h2 {
  color: #1a6fa3;
  font-size: 1.5em;
  margin-bottom: 20px;
  border-bottom: 2px solid #e0f0fa;
  padding-bottom: 8px;
}

.mentions-section h3,
.politique-section h3 {
  color: #495057;
  font-size: 1.2em;
  margin: 20px 0 12px 0;
}

.mentions-info,
.politique-info {
  color: #495057;
  line-height: 1.6;
}

.mentions-info p,
.politique-info p {
  margin-bottom: 16px;
}

.mentions-info ul,
.politique-info ul {
  margin: 16px 0;
  padding-left: 24px;
}

.mentions-info li,
.politique-info li {
  margin-bottom: 8px;
}

.mentions-info a,
.politique-info a {
  color: #1a6fa3;
  text-decoration: none;
  transition: color 0.2s;
}

.mentions-info a:hover,
.politique-info a:hover {
  color: #ffb700;
  text-decoration: underline;
}

.mentions-footer,
.politique-footer {
  text-align: center;
  margin-top: 32px;
}

.mentions-date,
.politique-date {
  color: #6c757d;
  font-size: 0.9em;
  margin-bottom: 16px;
}

.btn-retour {
  display: inline-block;
  background: #1a6fa3;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 600;
}

.btn-retour:hover {
  background: #155a8a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 111, 163, 0.3);
}

/* Responsive pour les pages légales */
@media (max-width: 768px) {
  .mentions-container,
  .politique-container {
    padding: 0 16px;
  }
  
  .mentions-content,
  .politique-content {
    padding: 24px;
  }
  
  .mentions-title,
  .politique-title {
    font-size: 2em;
  }
}

/* === GESTION DES COOKIES === */
.cookie-legal-links {
  margin-top: 12px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cookie-legal-link {
  color: #1a6fa3;
  text-decoration: none;
  font-size: 0.85em;
  transition: color 0.2s;
}

.cookie-legal-link:hover {
  color: #ffb700;
  text-decoration: underline;
}

.cookie-modal-legal {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  justify-content: center;
}

.cookie-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* === FIL D'ARIANE (BREADCRUMBS) === */
.breadcrumbs {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  padding: 12px 0;
  margin-bottom: 0;
}

.breadcrumbs-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  font-size: 0.9em;
  color: #495057;
}

.breadcrumb-item a {
  color: #0d6efd;
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-item a:hover {
  color: #ffb700;
  text-decoration: underline;
}

.breadcrumb-home .breadcrumb-icon {
  font-size: 1.1em;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: #6c757d;
}

.breadcrumb-separator .separator {
  font-weight: bold;
  font-size: 1.2em;
}

.breadcrumb-current {
  color: #495057;
  font-weight: 600;
}

/* Responsive pour le fil d'Ariane */
@media (max-width: 768px) {
  .breadcrumbs-container {
    padding: 0 16px;
  }
  
  .breadcrumbs-list {
    font-size: 0.8em;
  }
  
  .breadcrumb-separator {
    margin: 0 4px;
  }
  
  .breadcrumb-text {
    display: none;
  }
  
  .breadcrumb-home .breadcrumb-icon {
    font-size: 1.3em;
  }
}

/* === FOOTER PoolParty === */
.site-footer {
  background: #fff;
  border-top: 2px solid #e0f0fa;
  padding: 48px 0 0 0;
  margin-top: 48px;
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  padding: 0 48px;
}
.footer-col {
  flex: 1 1 220px;
  min-width: 180px;
}
.footer-col strong {
  display: block;
  margin-bottom: 14px;
  font-size: 1.15em;
  font-weight: 700;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col ul li {
  margin-bottom: 8px;
  color: #222;
  font-size: 1.05em;
}

.footer-col ul li a {
  color: #222;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-col ul li a:hover {
  color: #1a6fa3;
}

.footer-col ul li a[href^="tel:"] {
  color: #1a6fa3;
  font-weight: 500;
}

.footer-col ul li a[href^="mailto:"] {
  color: #1a6fa3;
  font-weight: 500;
}
.footer-logo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 120px;
}
.footer-logo img {
  height: 38px;
}
.footer-bottom {
  text-align: center;
  color: #222;
  font-size: 1.08em;
  margin-top: 32px;
  padding-bottom: 22px;
}
.footer-col a .dashicons {
  font-size: 1.5em;
  margin-right: 8px;
  color: #1a6fa3;
  vertical-align: middle;
}
.footer-col a .dashicons:hover {
  color: #ffb700;
}

/* Icônes des réseaux sociaux */
.social-links {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #f8f9fa;
  border-radius: 50%;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.social-links a:hover {
  background: #1a6fa3;
  border-color: #1a6fa3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 111, 163, 0.3);
}

.social-links a svg {
  width: 20px;
  height: 20px;
  color: #666;
  transition: color 0.3s ease;
}

.social-links a:hover svg {
  color: #fff;
}

/* === Connexion PoolParty === */
.connexion-poolparty {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
}
.connexion-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px #0002;
  padding: 48px 32px 32px 32px;
  max-width: 480px;
  width: 100%;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.connexion-title {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 32px;
  text-align: center;
}
.input-champ {
  width: 100%;
  background: #a8d4ed;
  border: none;
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 1.1em;
  margin-bottom: 18px;
  color: #222;
}
.souvenir {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  font-size: 1.1em;
  gap: 10px;
}
.souvenir input[type="checkbox"] {
  width: 24px;
  height: 24px;
  accent-color: #48a9ce;
  border-radius: 6px;
  margin-right: 8px;
}
.btn-bleu {
  width: 100%;
  background: #a8d4ed;
  color: #222;
  border: none;
  border-radius: 14px;
  padding: 16px 0;
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 24px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-bleu:hover {
  background: #48a9ce;
  color: #fff;
}
.mdp-oublie {
  display: block;
  text-align: center;
  margin: 18px 0 32px 0;
  color: #222;
  font-size: 1.1em;
  text-decoration: underline;
  font-weight: bold;
}
.inscription-box {
  width: 100%;
  background: transparent;
  border-radius: 28px;
  padding: 40px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.btn-jaune {
  background: #f9dc8c;
  color: #222;
  border: none;
  border-radius: 14px;
  padding: 18px 0;
  width: 100%;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 8px #0001;
  transition: background 0.2s, color 0.2s;
  display: block;
}
.btn-jaune:hover {
  background: #ffd77a;
  color: #1a6fa3;
}
@media (max-width: 600px) {
  .connexion-box {
    padding: 24px 8px 16px 8px;
  }
  .inscription-box {
    padding: 24px 8px;
  }
}

/* === Register PoolParty === */
.register-poolparty {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
}
.register-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px #0002;
  padding: 48px 32px 32px 32px;
  max-width: 600px;
  width: 100%;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.register-title {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 32px;
  text-align: left;
  width: 100%;
}
.register-row {
  display: flex;
  gap: 18px;
  width: 100%;
  margin-bottom: 18px;
}
.register-row .input-champ {
  flex: 1 1 0;
}
.register-box .input-champ {
  width: 100%;
  background: #a8d4ed;
  border: none;
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 1.1em;
  margin-bottom: 18px;
  color: #222;
}
.register-box .souvenir {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  font-size: 1.1em;
  gap: 10px;
}
.register-box .souvenir input[type="checkbox"] {
  width: 24px;
  height: 24px;
  accent-color: #48a9ce;
  border-radius: 6px;
  margin-right: 8px;
}
.register-box .btn-jaune {
  width: 100%;
  background: #f9dc8c;
  color: #222;
  border: none;
  border-radius: 14px;
  padding: 24px 0;
  font-size: 1.4em;
  font-weight: bold;
  margin-top: 32px;
  cursor: pointer;
  box-shadow: 0 2px 8px #0001;
  transition: background 0.2s, color 0.2s;
}
.register-box .btn-jaune:hover {
  background: #ffd77a;
  color: #1a6fa3;
}
@media (max-width: 700px) {
  .register-box {
    padding: 24px 8px 16px 8px;
  }
  .register-row {
    flex-direction: column;
    gap: 0;
  }
}

/* === Compte PoolParty === */
.compte-poolparty {
  min-height: 80vh;
  background: #f8f8f8;
  padding: 40px 0 0 0;
}
.compte-box {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  padding: 48px 48px 32px 48px;
  box-shadow: 0 2px 16px #0002;
}
.compte-box h1 {
  font-size: 3em;
  font-weight: bold;
  margin-bottom: 24px;
}
.compte-soustitre {
  font-size: 1.4em;
  margin-bottom: 24px;
}
.compte-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.compte-tabs button {
  background: #fff;
  border: 2px solid #b3b3b3;
  border-radius: 24px;
  padding: 10px 22px;
  font-size: 1em;
  color: #222;
  font-weight: 500;
  cursor: pointer;
  transition: border 0.2s, color 0.2s;
}
.compte-tabs button:hover {
  border: 2px solid #1a6fa3;
  color: #1a6fa3;
}
.compte-reservations {
  margin-bottom: 48px;
}
.compte-resa-vide {
  background: #a8d4ed;
  border-radius: 14px;
  padding: 60px 0;
  text-align: center;
  font-size: 1.4em;
  color: #222;
  box-shadow: 0 2px 8px #0001;
  margin-bottom: 32px;
}
.compte-aide {
  margin-top: 64px;
}
.compte-aide h2 {
  font-size: 1.4em;
  margin-bottom: 18px;
}
.compte-contact-box {
  border: 1.5px solid #b3b3b3;
  border-radius: 10px;
  padding: 24px 18px;
  background: #fff;
  font-size: 1.1em;
  color: #222;
  max-width: 400px;
}

/* Espace plus généreux avant le footer sur la page compte */
.compte-poolparty { padding-bottom: 64px; }
@media (max-width: 900px) {
  .compte-box {
    padding: 24px 8px 16px 8px;
  }
}

/* === Bouton déconnexion compte === */
.btn-deconnexion {
  position: absolute;
  top: 32px;
  right: 48px;
  background: #ffd77a;
  color: #222;
  border: none;
  border-radius: 12px;
  padding: 12px 28px;
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 2px 8px #0001;
  transition: background 0.2s, color 0.2s;
  z-index: 10;
}
.btn-deconnexion:hover {
  background: #ffb700;
  color: #fff;
}
.compte-box { position: relative; }

/* === RESPONSIVE === */
@media (max-width: 1200px) {
  .footer-container, .header-container { padding: 0 18px; }
  .experience::after { display: none; }
}
@media (max-width: 1000px) {
  .recherche { min-width: 0; max-width: 100vw; }
  .best-seller .piscines { flex-direction: column; align-items: center; gap: 28px; }
  .footer-container { flex-direction: column; gap: 18px; }
}
@media (max-width: 700px) {
  .banniere { min-height: 220px; padding-bottom: 30px; }
  .banniere h1 { font-size: 2em; }
  .recherche { min-width: 0; height: auto; flex-direction: column; gap: 10px; padding: 12px; }
  .recherche input { height: 40px; font-size: 1em; padding: 0 10px; }
  .recherche button { width: 40px; height: 40px; font-size: 1.1em; }
  .best-seller .piscines { gap: 18px; }
  .piscine { width: 98vw; max-width: 340px; }
  .occasions-list { gap: 10px; }
  .occasions-list > div { padding: 12px 8px; min-width: 80px; min-height: 40px; font-size: 0.95em; }
  .footer-logo img { height: 28px; }
}

/* === PAGE À PROPOS POOLPARTY === */
.about-poolparty {
  background: #fff;
  min-height: 100vh;
}
.about-header {
  text-align: center;
  margin-top: 40px;
}
.about-title {
  display: inline-block;
  background: #ffe49c;
  color: #222;
  font-size: 2.2em;
  font-weight: 700;
  padding: 16px 48px;
  border-radius: 8px;
  margin-bottom: 18px;
  margin-top: 0;
}
.about-banner {
  width: 100%;
  height: 80px;
  background: url('images/Hero 2.png') center/cover no-repeat;
  border-radius: 0px;
  margin: 32px 0 0 0;
  box-shadow: 0 4px 20px rgba(30, 144, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.about-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(135, 206, 235, 0.2), rgba(30, 144, 255, 0.2));
  pointer-events: none;
}
.about-main {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
}
.about-subtitle {
  display: inline-block;
  background: #ffe49c;
  color: #222;
  font-size: 2em;
  font-weight: 700;
  padding: 12px 38px;
  border-radius: 8px;
  margin: 48px 0 24px 0;
}
.about-box {
  background: #fff;
  border: 2px solid #b3b3b3;
  border-radius: 12px;
  padding: 32px 28px 24px 28px;
  margin-bottom: 32px;
  box-shadow: 0 2px 12px #0001;
}
.about-box p {
  font-size: 1.13em;
  color: #222;
  margin-bottom: 18px;
  line-height: 1.6;
}
.about-vision {
  display: flex;
  justify-content: center;
  margin: 32px 0 18px 0;
}
.about-vision span {
  background: #ffe49c;
  color: #222;
  font-weight: 700;
  font-size: 1.2em;
  padding: 10px 32px;
  border-radius: 8px;
}
.about-list {
  margin: 18px 0 0 0;
  padding-left: 24px;
  font-size: 1.08em;
  color: #222;
}
.about-list li {
  margin-bottom: 8px;
  list-style: disc;
}
.about-cta {
  background: #cbeafe;
  color: #1a6fa3;
  font-weight: 700;
  font-size: 1.25em;
  text-align: center;
  padding: 28px 0;
  margin-top: 32px;
  border-radius: 0 0 18px 18px;
}

/* Section Comment ça marche ? */
.how-it-works {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e0f0fa 100%);
  text-align: center;
}

.how-it-works-title {
  font-size: 3em;
  font-weight: 700;
  color: #1a6fa3;
  margin-bottom: 60px;
  text-align: center;
}

.how-it-works-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 60px auto;
  padding: 0 24px;
}

.step-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(26, 111, 163, 0.15);
  border-color: #1a6fa3;
}

.step-number {
  position: absolute;
  top: -20px;
  left: 30px;
  width: 40px;
  height: 40px;
  background: #1a6fa3;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2em;
  box-shadow: 0 4px 15px rgba(26, 111, 163, 0.3);
}

.step-title {
  font-size: 1.8em;
  font-weight: 700;
  color: #1a6fa3;
  margin: 20px 0 16px 0;
}

.step-description {
  color: #666;
  line-height: 1.6;
  font-size: 1.1em;
  margin: 0;
}

.how-it-works-cta {
  margin-top: 40px;
}

.btn-pool-about {
  display: inline-block;
  background: #ffd77a;
  color: #222;
  padding: 18px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.2em;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(26, 111, 163, 0.3);
  border: none;
  cursor: pointer;
}

.btn-gradient:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(26, 111, 163, 0.4);
  background: #ffb700;
  color: #fff;
}

/* Section FAQ */
.about-faq {
  padding: 80px 0;
  background: #fff;
}

.faq-title {
  font-size: 2.5em;
  font-weight: 700;
  color: #1a6fa3;
  text-align: center;
  margin-bottom: 60px;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

.faq-item {
  background: #f8f9fa;
  border-radius: 16px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: #1a6fa3;
  box-shadow: 0 8px 25px rgba(26, 111, 163, 0.1);
}

.faq-question {
  padding: 24px 30px;
  background: #fff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1.1em;
  color: #333;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: #f0f8ff;
  color: #1a6fa3;
}

.faq-arrow {
  color: #1a6fa3;
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #f8f9fa;
  padding: 0 30px;
}

.faq-item.active .faq-answer {
  padding: 24px 30px;
}

.faq-answer p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

/* Section CTA - Style d'origine */
.about-cta {
  background: #cbeafe;
  color: #1a6fa3;
  font-weight: 700;
  font-size: 1.25em;
  text-align: center;
  padding: 28px 0;
  margin-top: 32px;
  border-radius: 0 0 18px 18px;
}

.about-cta-buttons {
  margin-top: 20px;
}

.about-cta-buttons .btn-jaune {
  display: inline-block;
  background: #ffb700;
  color: #333;
  padding: 16px 32px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1em;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.about-cta-buttons .btn-jaune:hover {
  background: #e6a600;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}
@media (max-width: 700px) {
  .about-title, .about-subtitle, .about-vision span {
    font-size: 1.2em;
    padding: 8px 12px;
  }
  .about-box { padding: 16px 4px; }
  .about-banner { 
    height: 50px; 
    border-radius: 8px;
  }
  
  /* Responsive pour Comment ça marche ? */
  .how-it-works {
    padding: 40px 0;
  }
  
  .how-it-works-title {
    font-size: 2.2em;
    margin-bottom: 40px;
  }
  
  .how-it-works-steps {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 16px;
  }
  
  .step-card {
    padding: 30px 20px;
  }
  
  .step-title {
    font-size: 1.5em;
  }
  
  .btn-gradient {
    padding: 16px 32px;
    font-size: 1.1em;
  }
  
  /* Responsive pour FAQ */
  .about-faq {
    padding: 40px 0;
  }
  
  .faq-title {
    font-size: 2em;
    margin-bottom: 40px;
  }
  
  .faq-list {
    padding: 0 16px;
  }
  
  .faq-question {
    padding: 20px 24px;
    font-size: 1em;
  }
  
  /* Responsive pour CTA */
  .about-cta {
    padding: 20px 16px;
    font-size: 1.1em;
  }
  
  .about-cta-buttons .btn-jaune {
    padding: 14px 28px;
    font-size: 1em;
  }
  
  .rentlist-banner { 
    height: 50px;
    border-radius: 8px;
  }
}

/* === PAGE DEVENEZ HÔTE === */
.host-poolparty {
  background: #fff;
  min-height: 100vh;
  padding-bottom: 40px;
}
.host-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 0 24px 0;
  gap: 40px;
}
.host-header-left {
  flex: 1 1 350px;
}
.host-header-left h1 {
  font-size: 2.5em;
  font-weight: 700;
  margin-bottom: 0.2em;
}
.host-header-left h2 {
  font-size: 1.3em;
  font-weight: 400;
  margin-bottom: 1.2em;
}
.host-header-left p {
  font-size: 1.1em;
  margin-bottom: 2em;
  color: #222;
}
.host-btn {
  background: #ffd77a;
  color: #222;
  border: none;
  border-radius: 14px;
  padding: 18px 38px;
  font-size: 1.15em;
  font-weight: 700;
  box-shadow: 0 2px 8px #0001;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  display: inline-block;
}
.host-btn:hover {
  background: #1a6fa3;
  color: #fff;
}
.host-header-right {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.host-map {
  width: 320px;
  height: 180px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 2px 8px #0001;
}
.host-map-caption {
  font-size: 1em;
  color: #222;
  margin-top: 8px;
}
.host-steps {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 32px 0 0 0;
}
.host-steps h2 {
  font-size: 2em;
  font-weight: 700;
  margin-bottom: 32px;
}
.host-steps-list {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 24px;
}
.host-step {
  flex: 1 1 0;
  min-width: 120px;
  font-size: 1.1em;
  color: #222;
  background: none;
  border-radius: 18px;
  padding: 0 8px;
}
.host-step img {
  width: 60px;
  margin-bottom: 10px;
}
.host-step b {
  font-weight: 700;
}
.host-sep {
  border: none;
  border-top: 2px solid #b3b3b3;
  margin: 40px auto 32px auto;
  max-width: 900px;
}
.host-faq {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 24px 0;
  text-align: center;
}
.host-faq h2 {
  font-size: 1.3em;
  font-weight: 700;
  margin-bottom: 24px;
}
.host-faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
.host-faq-item {
  background: #e0f0fa;
  border-radius: 12px;
  padding: 18px 24px;
  text-align: left;
  font-size: 1.08em;
  color: #222;
  box-shadow: 0 2px 8px #0001;
  transition: all 0.3s ease;
}

.host-faq-item:hover {
  box-shadow: 0 4px 16px #0002;
  transform: translateY(-2px);
}

.host-faq-q {
  font-weight: 700;
  color: #1a6fa3;
  margin-bottom: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.3s ease;
}

.host-faq-q:hover {
  color: #155a8a;
}

.faq-arrow {
  font-size: 0.8em;
  transition: transform 0.3s ease;
  color: #1a6fa3;
}

.host-faq-a {
  margin-top: 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, margin-top 0.3s ease;
  line-height: 1.6;
  color: #444;
}

.host-faq-item.active .host-faq-a {
  margin-top: 16px;
}
.host-btn-large {
  background: #ffd77a;
  color: #222;
  border: none;
  border-radius: 14px;
  padding: 20px 60px;
  font-size: 1.2em;
  font-weight: 700;
  box-shadow: 0 2px 8px #0001;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  display: inline-block;
  margin-top: 32px;
}
.host-btn-large:hover {
  background: #1a6fa3;
  color: #fff;
}
@media (max-width: 900px) {
  .host-header { flex-direction: column; align-items: center; gap: 24px; padding: 24px 0 12px 0; }
  .host-header-right, .host-header-left { width: 100%; align-items: center; }
  .host-steps-list { flex-direction: column; gap: 24px; }
}

/* === PAGE LOUER MA PISCINE === */
.rentpool-poolparty {
  background: #fff;
  min-height: 100vh;
  padding-bottom: 40px;
  max-width: 900px;
  margin: 0 auto;
}
.rentpool-step {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 12px #0001;
  padding: 36px 32px 32px 32px;
  margin-bottom: 32px;
}
.rentpool-step h2 {
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 18px;
  color: #1a6fa3;
}
.rentpool-step h3 {
  font-size: 1.1em;
  font-weight: 700;
  margin: 24px 0 12px 0;
  color: #222;
}
.rentpool-options {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
}
.rentpool-option {
  background: #e0f0fa;
  border-radius: 16px;
  padding: 18px 28px;
  font-weight: 700;
  font-size: 1.1em;
  color: #1a6fa3;
  box-shadow: 0 2px 8px #0001;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.rentpool-option:hover {
  background: #1a6fa3;
  color: #fff;
}
.rentpool-mapform {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.rentpool-map {
  width: 220px;
  height: 120px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 2px 8px #0001;
}
.rentpool-form-adr {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rentpool-form-adr input {
  border: 1.5px solid #b3b3b3;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 1em;
  margin-bottom: 0;
}
.rentpool-infos {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
}
.rentpool-info {
  background: #e0f0fa;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 1em;
  color: #1a6fa3;
  font-weight: 700;
  box-shadow: 0 2px 8px #0001;
}
.rentpool-equipements, .rentpool-extras, .rentpool-reglement {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.rentpool-equipements span {
  background: #e0f0fa;
  color: #1a6fa3;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 1em;
  font-weight: 600;
  box-shadow: 0 2px 8px #0001;
}
.rentpool-extras span {
  background: #48a9ce;
  color: #fff;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 1em;
  font-weight: 600;
  box-shadow: 0 2px 8px #0001;
}
.rentpool-reglement span {
  background: #e0f0fa;
  color: #1a6fa3;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 1em;
  font-weight: 600;
  box-shadow: 0 2px 8px #0001;
}
.rentpool-prix {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.rentpool-prix input {
  border: 1.5px solid #b3b3b3;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 1em;
  width: 120px;
}
.rentpool-prix-note {
  font-size: 0.98em;
  color: #222;
}
.rentpool-prix-note span {
  font-size: 0.92em;
  color: #888;
}
.rentpool-upload {
  background: #fff;
  border: 2px dashed #ffd77a;
  border-radius: 18px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.rentpool-upload .btn-jaune {
  background: #ffd77a;
  color: #222;
  border: none;
  border-radius: 14px;
  padding: 18px 38px;
  font-size: 1.15em;
  font-weight: 700;
  box-shadow: 0 2px 8px #0001;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  display: inline-block;
}
.rentpool-upload .btn-jaune:hover {
  background: #1a6fa3;
  color: #fff;
}
.rentpool-title {
  width: 100%;
  border: 1.5px solid #b3b3b3;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 1.1em;
  margin-bottom: 12px;
}
.rentpool-desc {
  width: 100%;
  border: 1.5px solid #b3b3b3;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 1.1em;
  min-height: 80px;
  margin-bottom: 18px;
}
.rentpool-publish {
  background: #ffd77a;
  color: #222;
  border: none;
  border-radius: 14px;
  padding: 18px 38px;
  font-size: 1.15em;
  font-weight: 700;
  box-shadow: 0 2px 8px #0001;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  display: inline-block;
}
.rentpool-publish:hover {
  background: #1a6fa3;
  color: #fff;
}
@media (max-width: 900px) {
  .rentpool-poolparty { padding: 0 8px; }
  .rentpool-step { padding: 18px 4px 12px 4px; }
  .host-header { flex-direction: column; gap: 18px; }
  .host-header-right, .host-header-left { width: 100%; }
  .host-steps-list { flex-direction: column; gap: 18px; }
}

/* === PAGE LOUER UNE PISCINE === */
.rentlist-poolparty {
  background: #fff;
  min-height: 100vh;
  padding-bottom: 40px;
}
.rentlist-header {
  text-align: center;
  margin-top: 32px;
}
.rentlist-title {
  display: inline-block;
  background: #ffe49c;
  color: #222;
  font-size: 2.2em;
  font-weight: 700;
  padding: 16px 48px;
  border-radius: 8px;
  margin-bottom: 18px;
  margin-top: 0;
}
.rentlist-banner {
  width: 100%;
  height: 80px;
  background: url('images/Hero 2.png') center/cover no-repeat;
  border-radius: 0px;
  margin: 32px 0 0 0;
  box-shadow: 0 4px 20px rgba(30, 144, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.rentlist-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(135, 206, 235, 0.2), rgba(30, 144, 255, 0.2));
  pointer-events: none;
}
.rentlist-search {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 0 0 0;
  display: flex;
  justify-content: center;
}
.rentlist-form {
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 2px 12px #0001;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 18px;
  min-width: 900px;
  max-width: 98vw;
  margin: 0 auto;
  height: 70px;
}
.rentlist-form input {
  border: none;
  background: transparent;
  font-size: 1.08em;
  padding: 0 24px;
  height: 50px;
  border-radius: 0;
  flex: 1 1 0;
  color: #222;
}
.rentlist-form input:focus {
  outline: none;
}
.rentlist-form input:not(:last-child) {
  border-right: 1.5px solid #e0e0e0;
}
.rentlist-form button {
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4em;
  color: #1a6fa3;
  margin-left: 8px;
  box-shadow: 0 2px 8px #0001;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}
.rentlist-form button:hover {
  background: #ffd77a;
  color: #222;
}


.rentlist-cards {
  max-width: 1200px;
  margin: 48px auto 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: flex-start;
  padding: 0 20px;
}
.rentlist-card {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 2px 12px #0001;
  border: 2px solid #b3b3b3;
  padding: 18px 18px 24px 18px;
  width: calc(33.333% - 20px);
  min-width: 300px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.2s, border 0.2s;
  flex-shrink: 0;
}
.rentlist-card:hover {
  box-shadow: 0 8px 32px #0002;
  border: 2px solid #1a6fa3;
}
.rentlist-card img {
  width: 100%;
  border-radius: 18px;
  margin-bottom: 14px;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.rentlist-btn {
  background: #e0f0fa;
  color: #222;
  border: none;
  border-radius: 12px;
  padding: 12px 0;
  font-size: 1.1em;
  font-weight: 700;
  width: 90%;
  margin-bottom: 12px;
  margin-top: 0;
  box-shadow: 0 2px 8px #0001;
  transition: background 0.2s, color 0.2s;
  text-align: center;
  cursor: pointer;
}
.rentlist-btn:hover {
  background: #ffd77a;
  color: #1a6fa3;
}
.rentlist-price {
  font-size: 1.08em;
  color: #222;
  margin-bottom: 6px;
}
.rentlist-price span {
  color: #1a6fa3;
  font-weight: 700;
}
.rentlist-desc {
  font-size: 1em;
  color: #222;
  margin-bottom: 6px;
  text-align: center;
}
.rentlist-adr {
  font-size: 0.98em;
  color: #1a6fa3;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rentlist-stars {
  color: #ffd77a;
  font-size: 1.2em;
  letter-spacing: 2px;
  margin-top: 4px;
}
@media (max-width: 1100px) {
  .rentlist-form { min-width: 0; max-width: 100vw; }
  .rentlist-cards { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 800px) {
  .rentlist-cards { grid-template-columns: 1fr; gap: 18px; }
  .rentlist-card { width: 98vw; max-width: 340px; }
  .rentlist-form { padding: 0 6px; }
}

/* === PAGE PRODUIT PISCINE === */
.productpool-poolparty {
  background: #fff;
  min-height: 100vh;
  padding-bottom: 40px;
}
.productpool-main {
  display: flex;
  gap: 32px;
  max-width: 1200px;
  margin: 32px auto 0 auto;
  align-items: flex-start;
}
.productpool-gallery {
  flex: 2 1 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.productpool-mainimg {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  aspect-ratio: 16/7;
  box-shadow: 0 2px 12px #0001;
}
.productpool-thumbs {
  display: flex;
  gap: 10px;
}
.productpool-thumbs img {
  width: 90px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
  box-shadow: 0 1px 4px #0001;
  transition: box-shadow 0.2s, border 0.2s;
  border: 2px solid #fff;
}
.productpool-thumbs img:hover {
  border: 2px solid #1a6fa3;
  box-shadow: 0 2px 8px #0002;
}
.productpool-infos {
  flex: 3 1 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px #0001;
  padding: 24px 32px 24px 32px;
  margin-bottom: 18px;
}
.productpool-infos h1 {
  font-size: 2em;
  font-weight: 700;
  margin-bottom: 12px;
}
.productpool-descbar {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.productpool-descbar span {
  font-size: 1.05em;
  color: #1a6fa3;
  display: flex;
  align-items: center;
  gap: 4px;
}
.productpool-price {
  background: #ffd77a;
  color: #222;
  border-radius: 8px;
  padding: 6px 18px;
  font-weight: 700;
  font-size: 1.1em;
  margin-left: 12px;
}
.productpool-desc {
  font-size: 1.08em;
  color: #222;
  margin-bottom: 18px;
  line-height: 1.6;
}
.productpool-readmore {
  color: #1a6fa3;
  text-decoration: underline;
  font-weight: 600;
  margin-left: 8px;
}
.productpool-tags {
  display: flex;
  gap: 32px;
  margin-top: 18px;
}
.productpool-tags-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.productpool-tags-col span {
  background: #e0f0fa;
  color: #1a6fa3;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 1em;
  font-weight: 600;
  margin: 4px 4px 0 0;
  display: inline-block;
}
.productpool-tags-col b {
  margin-bottom: 4px;
  color: #222;
}
.productpool-resa {
  flex: 1 1 0;
  background: #f8f8f8;
  border-radius: 16px;
  box-shadow: 0 2px 12px #0001;
  padding: 24px 18px 18px 18px;
  min-width: 260px;
  max-width: 320px;
  margin-left: 0;
}
.productpool-resa-title {
  font-weight: 700;
  font-size: 1.1em;
  margin-bottom: 18px;
  color: #1a6fa3;
}
.productpool-resa label {
  display: block;
  font-size: 1em;
  margin-bottom: 10px;
  color: #222;
}
.productpool-resa input {
  width: 100%;
  border: 1.5px solid #b3b3b3;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 1em;
  margin-top: 4px;
  margin-bottom: 8px;
}
.productpool-resa-total {
  font-size: 1.1em;
  font-weight: 700;
  margin: 18px 0 12px 0;
  color: #222;
  display: flex;
  justify-content: space-between;
}
.productpool-resa-total span {
  color: #1a6fa3;
}
.productpool-resa .btn-jaune {
  width: 100%;
  padding: 14px 0;
  font-size: 1.1em;
  border-radius: 10px;
  margin-top: 8px;
}

.productpool-avis {
  display: flex;
  gap: 32px;
  max-width: 1200px;
  margin: 32px auto 0 auto;
  align-items: flex-start;
}
.productpool-avis-main {
  flex: 3 1 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px #0001;
  padding: 24px 32px 24px 32px;
}
.productpool-avis-title {
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 12px;
  color: #222;
}
.productpool-avis-title span {
  color: #1a6fa3;
  font-weight: 600;
  margin-left: 8px;
}
.productpool-avis-notes {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  color: #222;
  font-size: 1em;
}
.productpool-avis-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.productpool-avis-item {
  background: #e0f0fa;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 1em;
  color: #1a6fa3;
  box-shadow: 0 2px 8px #0001;
}
.productpool-avis-item b {
  color: #222;
}
.productpool-avis-type {
  font-size: 0.98em;
  color: #888;
  font-style: italic;
}
.productpool-avis-txt {
  color: #222;
  margin-top: 6px;
}
.productpool-hote {
  flex: 1 1 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px #0001;
  padding: 24px 18px 18px 18px;
  min-width: 260px;
  max-width: 320px;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.productpool-hote-card {
  width: 100%;
  text-align: center;
}
.productpool-hote-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}
.productpool-hote-name {
  font-weight: 700;
  font-size: 1.1em;
  margin-bottom: 4px;
}
.productpool-hote-note {
  color: #1a6fa3;
  font-size: 1em;
  margin-bottom: 8px;
}
.productpool-hote-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}
.productpool-hote-tags span {
  background: #e0f0fa;
  color: #1a6fa3;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 0.98em;
  font-weight: 600;
}
.productpool-hote-desc {
  color: #222;
  font-size: 1em;
  margin-bottom: 12px;
}
.productpool-hote .btn-jaune {
  width: 100%;
  padding: 12px 0;
  font-size: 1.05em;
  border-radius: 10px;
}

.productpool-details {
  max-width: 1200px;
  margin: 32px auto 0 auto;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.productpool-details-cols {
  flex: 3 1 0;
  display: flex;
  gap: 24px;
}
.productpool-details-col {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #0001;
  padding: 18px 18px 18px 18px;
  font-size: 1em;
  color: #222;
  flex: 1 1 0;
}
.productpool-mapbox {
  background: #e0f0fa;
  border-radius: 12px;
  box-shadow: 0 2px 8px #0001;
  padding: 18px 18px 18px 18px;
  font-size: 1em;
  color: #222;
  margin-top: 18px;
  flex: 3 1 0;
}
.productpool-mapbox b {
  color: #1a6fa3;
}
.productpool-map {
  width: 100%;
  border-radius: 10px;
  margin-top: 8px;
}
.productpool-suggestions {
  flex: 1 1 0;
  background: #e0f0fa;
  border-radius: 12px;
  box-shadow: 0 2px 8px #0001;
  padding: 18px 18px 18px 18px;
  font-size: 1em;
  color: #222;
  min-width: 220px;
  max-width: 260px;
  margin-left: 0;
}
.productpool-suggestions b {
  color: #1a6fa3;
  font-size: 1.08em;
}
.productpool-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.productpool-suggestions-list div,
.productpool-suggestions-list .piscine-suggestion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 1px 4px #0001;
}

.piscine-suggestion-link {
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
  display: block;
}

.piscine-suggestion-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.piscine-suggestion-item {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.piscine-suggestion-link:hover .piscine-suggestion-item {
  background-color: #f8f9ff;
}

.piscine-suggestion-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9ff;
  border-radius: 8px;
  padding: 20px 16px;
  text-align: center;
  color: #666;
  font-style: italic;
  border: 1px dashed #ccc;
}
.productpool-suggestions-list img {
  width: 60px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
}
.productpool-suggestions-list span {
  color: #1a6fa3;
  font-size: 0.98em;
}
@media (max-width: 1200px) {
  .productpool-main, .productpool-avis, .productpool-details { flex-direction: column; gap: 18px; }
  .productpool-gallery, .productpool-infos, .productpool-resa, .productpool-avis-main, .productpool-hote, .productpool-details-cols, .productpool-mapbox, .productpool-suggestions { max-width: 100%; }
  .productpool-resa, .productpool-hote, .productpool-suggestions { min-width: 0; max-width: 100%; }
}
@media (max-width: 700px) {
  .productpool-main, .productpool-avis, .productpool-details { padding: 0 4px; }
  .productpool-infos, .productpool-avis-main, .productpool-details-col, .productpool-mapbox, .productpool-suggestions { padding: 12px 4px; }
  .productpool-gallery .productpool-mainimg { aspect-ratio: 16/10; }
  .productpool-thumbs img { width: 60px; height: 40px; }
}

/* === PAGE D'ACCUEIL - DESIGN MODERNE === */

.accueil {
  font-family: 'Montserrat', sans-serif;
  background: #fff;
  color: #333;
}

/* === BANNIÈRE PRINCIPALE === */
.banniere {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.banniere-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.banniere-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.banniere-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 1200px;
  margin: 0 20px;
}

.banniere h1 {
  font-size: 4.5rem;
  font-weight: 700;
  margin-bottom: 60px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
  line-height: 1.1;
}

.recherche {
  display: flex;
  gap: 0;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 50px;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  min-width: 900px;
  max-width: 98vw;
  height: 90px;
}

.recherche input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  padding: 0 30px;
  height: 90px;
  color: #333;
  font-family: 'Montserrat', sans-serif;
}

.recherche input:focus {
  outline: none;
  background: rgba(26, 111, 163, 0.05);
}

.recherche input:not(:last-child) {
  border-right: 2px solid #f0f0f0;
}

.recherche button {
  background: #1a6fa3;
  color: white;
  border: none;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  cursor: pointer;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
}

.recherche button:hover {
  background: #155a8a;
  transform: scale(1.05);
}

.recherche .dashicons {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

/* === SECTION BEST SELLER === */
.best-seller {
  background: #fff;
  padding: 80px 0;
  text-align: center;
}

.best-seller h2 {
  font-size: 3rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
}

.best-seller > p {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 60px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.piscines {
  display: flex;
  gap: 40px;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.piscine-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 1;
  max-width: 500px;
}

.piscine-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
}

.piscine-image {
  height: 300px;
  overflow: hidden;
}

.piscine-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.piscine-card:hover .piscine-image img {
  transform: scale(1.05);
}

.piscine-content {
  padding: 30px;
  text-align: left;
}

.piscine-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}

.piscine-content p {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
}

.btn-disponibilites {
  display: inline-block;
  background: #ffd77a;
  color: #333;
  text-decoration: none;
  padding: 12px 25px;
  border-radius: 25px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-disponibilites:hover {
  background: #ffc94d;
  transform: translateY(-2px);
}

.pagination-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e0e0e0;
  cursor: pointer;
  transition: background 0.3s ease;
}

.dot.active {
  background: #1a6fa3;
}

/* === SECTION OCCASIONS === */
.occasions {
  background: #cbeafe;
  padding: 56px 0 40px 0;
  text-align: center;
}

.occasions h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 60px;
  white-space: nowrap;
  overflow: hidden;
}

.occasions-grid {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 0;
  flex-wrap: wrap;
}

.occasion-card {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.occasion-card:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.occasion-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.3s ease;
}

.occasion-card:hover img {
  transform: scale(1.1);
}

.occasion-card span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffd77a;
  color: #333;
  padding: 15px;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* === SECTION EXPÉRIENCE === */
.experience {
  background: #fff;
  padding: 80px 0;
  position: relative;
}

.experience-content {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  gap: 80px;
}

.experience-text {
  flex: 1;
  max-width: 600px;
}

.experience-subtitle {
  font-size: 0.9rem;
  color: #1a6fa3;
  font-weight: 600;
  margin-bottom: 20px;
  text-transform: none;
  letter-spacing: 1px;
}

.experience h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 35px;
  line-height: 1.2;
}

.experience p {
  font-size: 1rem;
  color: #666;
  line-height: 1.8;
  margin-bottom: 25px;
  max-width: 500px;
}

.experience-buttons {
  display: flex;
  gap: 25px;
  margin-top: 50px;
  justify-content: center;
  align-items: center;
}

.btn-jaune {
  display: inline-block;
  background: #ffd77a;
  color: #333;
  text-decoration: none;
  padding: 18px 40px;
  border-radius: 35px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(255, 215, 122, 0.3);
}

.btn-jaune:hover {
  background: #ffc94d;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 215, 122, 0.4);
}

.btn-blanc {
  display: inline-block;
  background: #fff;
  color: #333;
  text-decoration: none;
  padding: 18px 35px;
  border-radius: 35px;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid #e0e0e0;
  transition: all 0.3s ease;
}

.btn-blanc:hover {
  border-color: #1a6fa3;
  color: #1a6fa3;
  transform: translateY(-3px);
}
/* Badge principal */
.experience-badge {
  flex-shrink: 0;
  position: relative;
  width: 300px;
  height: 300px;
}

.badge-main {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: url('images/Ellipse.png') center/cover no-repeat;
  box-shadow: 
    0 0 60px rgba(26, 111, 163, 0.4),
    0 0 120px rgba(26, 111, 163, 0.3),
    0 0 180px rgba(26, 111, 163, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 1;
  border: 2px solid rgba(26, 111, 163, 0.1);
}

.badge-text {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  background: rgba(255, 255, 255, 0.1);
  padding: 10px 20px;
  border-radius: 20px;
  backdrop-filter: blur(5px);
}

/* Logo pool party avec image SVG */
.badge-logo {
  position: absolute;
  bottom: -25px;
  right: -30px;
  width: 120px;
  height: 50px;
  border-radius: 25px;
  background: #1a6fa3;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  padding: 0 15px;
}

.badge-logo-img {
  width: 100%;
  height: auto;
  max-height: 35px;
  filter: brightness(0) invert(1);
}

/* === SECTION AVIS === */
.avis {
  background: #cbeafe;
  padding: 56px 0;
  text-align: center;
}

.avis h3 {
  font-size: 1.4em;
  font-weight: 700;
  margin-bottom: 24px;
}

.avis-card {
  background: #fff;
  border-radius: 22px;
  padding: 32px 38px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 4px 16px #0001;
  position: relative;
  text-align: center;
}

.avis-card::before {
  content: '';
  font-size: 2.8em;
  color: #ffd77a;
  position: absolute;
  left: 18px;
  top: 0;
}

.avis-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.user-rating {
  font-size: 1.5rem;
  color: #ffd77a;
}

.avis blockquote {
  font-size: 1.18em;
  font-style: italic;
  color: #1a6fa3;
  margin: 0 auto;
  max-width: 600px;
  background: #fff;
  border-radius: 22px;
  padding: 32px 38px;
  box-shadow: 0 4px 16px #0001;
  position: relative;
  text-align: center;
}

.avis blockquote::before {
  content: '\201C';
  font-size: 2.8em;
  color: #ffd77a;
  position: absolute;
  left: 18px;
  top: 0;
}

/* === RESPONSIVE === */
@media (max-width: 1200px) {
  .piscines {
    flex-direction: column;
    align-items: center;
  }
  
  .piscine-card {
    max-width: 600px;
  }
  
  .experience-content {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .banniere h1 {
    font-size: 3rem;
    margin-bottom: 40px;
  }
  
  .recherche {
    flex-direction: column;
    height: auto;
    min-width: auto;
    border-radius: 20px;
  }
  
  .recherche input {
    height: 60px;
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .recherche button {
    width: 100%;
    height: 60px;
    border-radius: 0 0 20px 20px;
    margin-left: 0;
  }
  
  .occasions-grid {
    flex-direction: column;
    gap: 20px;
    max-width: 300px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
  
  .occasion-card {
    width: 180px;
    height: 180px;
    margin: 0 auto;
  }
  
  .badge-main {
    width: 200px;
    height: 200px;
    background-size: cover;
    background-position: center;
  }
  
  .badge-text {
    font-size: 1.4rem;
    padding: 8px 16px;
  }
  
  .experience-buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* === RÉSULTATS DE RECHERCHE === */
.rentlist-search-results {
  background: #f8f9ff;
  border-radius: 16px;
  padding: 24px 32px;
  margin: 20px auto;
  max-width: 1200px;
  box-shadow: 0 2px 12px #0001;
}

.rentlist-search-results h3 {
  font-size: 1.2em;
  font-weight: 700;
  color: #1a6fa3;
  margin-bottom: 16px;
  text-align: center;
}

.search-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 16px;
}

.search-term {
  background: #e0f0fa;
  color: #1a6fa3;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 0.95em;
  font-weight: 600;
  box-shadow: 0 2px 8px #0001;
}

.search-count {
  text-align: center;
  font-size: 1.1em;
  color: #666;
  margin: 0;
  font-weight: 600;
}

/* === RESPONSIVE RECHERCHE === */
@media (max-width: 768px) {
  .search-terms {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  
  .search-term {
    text-align: center;
    min-width: 200px;
  }
}

/* === PAGES DE RÉSERVATION === */

/* Page d'erreur de réservation */
.reservation-error-poolparty {
  background: #fff;
  min-height: 100vh;
  padding: 60px 20px;
}

.error-container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.error-container h1 {
  color: #e74c3c;
  font-size: 2.5rem;
  margin-bottom: 30px;
}

.error-list {
  background: #f8f9ff;
  border-radius: 15px;
  padding: 25px;
  margin: 30px 0;
  text-align: left;
}

.error-list h2 {
  color: #e74c3c;
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.error-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.error-list li {
  background: #fff;
  color: #e74c3c;
  padding: 12px 20px;
  margin: 8px 0;
  border-radius: 10px;
  border-left: 4px solid #e74c3c;
  font-weight: 500;
}

.error-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

/* Page de confirmation de réservation */
.confirmation-reservation-poolparty {
  background: #fff;
  min-height: 100vh;
  padding: 60px 20px;
}

.confirmation-container {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.confirmation-header {
  text-align: center;
  margin-bottom: 40px;
}

.confirmation-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

.confirmation-header h1 {
  color: #27ae60;
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.confirmation-header p {
  color: #666;
  font-size: 1.2rem;
}

.confirmation-details {
  background: #f8f9ff;
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 30px;
}

.confirmation-details h2 {
  color: #333;
  font-size: 1.5rem;
  margin-bottom: 25px;
  text-align: center;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #e0e0e0;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-weight: 600;
  color: #333;
}

.detail-value {
  color: #1a6fa3;
  font-weight: 500;
}

.detail-value.price {
  font-size: 1.2rem;
  font-weight: 700;
  color: #27ae60;
}

.detail-value.status-en_attente {
  color: #f39c12;
  font-weight: 600;
}

.detail-value.status-confirmee {
  color: #27ae60;
  font-weight: 600;
}

.detail-value.status-annulee {
  color: #e74c3c;
  font-weight: 600;
}

.confirmation-next {
  background: #e8f4fd;
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 30px;
}

.confirmation-next h3 {
  color: #1a6fa3;
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.confirmation-next ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.confirmation-next li {
  color: #1a6fa3;
  padding: 8px 0;
  position: relative;
  padding-left: 25px;
}

.confirmation-next li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #27ae60;
  font-weight: bold;
}

.confirmation-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* Formulaire de réservation - utilisateur non connecté */
.productpool-resa-login {
  text-align: center;
}

.login-required {
  padding: 20px 0;
}

.login-required p {
  color: #666;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.or-divider {
  color: #999;
  margin: 20px 0;
  font-size: 0.9rem;
  position: relative;
}

.or-divider::before,
.or-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: #e0e0e0;
}

.or-divider::before {
  left: 0;
}

.or-divider::after {
  right: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .error-actions,
  .confirmation-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .confirmation-container,
  .error-container {
    padding: 20px;
  }
}

/* === PAGE COMPTE AVEC RÉSERVATIONS === */

/* Message de succès */
.success-message {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
  text-align: center;
}

.success-message h3 {
  margin: 0 0 10px 0;
  color: #155724;
}

.success-message p {
  margin: 0;
  font-size: 1.1rem;
}

/* Onglets */
.compte-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.tab-button {
  background: #f8f9ff;
  border: 2px solid #e0e0e0;
  color: #666;
  padding: 12px 20px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 0.95rem;
}

.tab-button:hover {
  border-color: #1a6fa3;
  color: #1a6fa3;
}

.tab-button.active {
  background: #1a6fa3;
  border-color: #1a6fa3;
  color: white;
}

/* Contenu des onglets */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Cartes de réservation */
.reservation-card {
  background: #fff;
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #1a6fa3;
}

.reservation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.reservation-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.3rem;
}

.status {
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status.en-attente {
  background: #fff3cd;
  color: #856404;
}

.status.confirmee {
  background: #d4edda;
  color: #155724;
}

.status.annulee {
  background: #f8d7da;
  color: #721c24;
}

.reservation-details {
  margin-bottom: 20px;
}

.reservation-details p {
  margin: 8px 0;
  color: #666;
  font-size: 1rem;
}

.reservation-details strong {
  color: #333;
}

.reservation-actions {
  text-align: right;
}

.btn-annuler {
  background: #dc3545;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-annuler:hover {
  background: #c82333;
  transform: translateY(-2px);
}

/* Piscines de l'hôte */
.compte-piscines-hote {
  margin-top: 30px;
}

.piscine-hote-card {
  background: #fff;
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #ffd77a;
}

.piscine-hote-card h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 1.3rem;
}

.piscine-hote-card p {
  margin: 8px 0;
  color: #666;
  font-size: 1rem;
}

.piscine-hote-card strong {
  color: #333;
}

.btn-voir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 42px;
  background: #1a6fa3;
  color: #ffffff !important;
  text-decoration: none;
  padding: 0 20px;
  border-radius: 24px;
  margin-top: 15px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .2px;
  text-indent: 0 !important;
  white-space: nowrap;
  overflow: visible;
  transition: all 0.3s ease;
}

.btn-voir:hover {
  background: #155a8a;
  transform: translateY(-2px);
}

/* Erreurs de réservation */
.reservation-errors {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.error-message {
  margin: 5px 0;
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
  .compte-tabs {
    flex-direction: column;
  }
  
  .tab-button {
    text-align: center;
  }
  
  .reservation-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .reservation-actions {
    text-align: center;
  }
}

/* Boutons d'action pour les réservations */
.btn-confirmer {
  background: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-right: 10px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:140px; height:40px; text-indent:0 !important; white-space:nowrap;
}

.btn-confirmer:hover {
  background: #218838;
  transform: translateY(-2px);
}

.btn-refuser {
  background: #dc3545;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:140px; height:40px; text-indent:0 !important; white-space:nowrap;
}

.btn-refuser:hover {
  background: #c82333;
  transform: translateY(-2px);
}

/* Section des réservations reçues */
.compte-reservations-recues {
  margin-top: 20px;
}

.reservation-card.hote {
  border-left-color: #ffd77a;
}

.reservation-actions.hote {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Responsive pour les boutons d'action */
@media (max-width: 768px) {
  .reservation-actions.hote {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn-confirmer,
  .btn-refuser {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

/* === PAGE RGPD === */
.rgpd-poolparty {
  background: #fff;
  min-height: 100vh;
  padding: 40px 0;
}

.rgpd-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.rgpd-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a6fa3;
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 3px solid #ffe49c;
}

.rgpd-content {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 40px;
  margin-bottom: 30px;
}

.rgpd-section {
  margin-bottom: 35px;
}

.rgpd-section:last-child {
  margin-bottom: 0;
}

.rgpd-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e0f0fa;
}

.rgpd-section h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1a6fa3;
  margin: 20px 0 10px 0;
}

.rgpd-section p {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 15px;
}

.rgpd-section ul {
  margin: 15px 0;
  padding-left: 25px;
}

.rgpd-section li {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 8px;
}

.rgpd-section a {
  color: #1a6fa3;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.rgpd-section a:hover {
  color: #155a8a;
}

.rgpd-footer {
  text-align: center;
  margin-top: 30px;
}

.btn-retour {
  display: inline-block;
  background: #ffd700;
  color: #333;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 25px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn-retour:hover {
  background: #ffed4e;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

/* Responsive RGPD */
@media (max-width: 768px) {
  .rgpd-poolparty {
    padding: 20px 0;
  }
  
  .rgpd-container {
    padding: 0 15px;
  }
  
  .rgpd-title {
    font-size: 2rem;
    margin-bottom: 30px;
  }
  
  .rgpd-content {
    padding: 25px;
  }
  
  .rgpd-section h2 {
    font-size: 1.3rem;
  }
  
  .rgpd-section h3 {
    font-size: 1.1rem;
  }
}

/* ========================================
   DESIGN RESPONSIVE COMPLET - MOBILE FIRST
   ======================================== */

/* Variables CSS pour la cohérence */
:root {
  --mobile-padding: 16px;
  --tablet-padding: 24px;
  --desktop-padding: 32px;
  --mobile-gap: 16px;
  --tablet-gap: 24px;
  --desktop-gap: 32px;
  --border-radius-mobile: 12px;
  --border-radius-desktop: 16px;
  --shadow-mobile: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-desktop: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ========================================
   HEADER RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .site-header {
    padding: 12px var(--mobile-padding);
  }
  
  .header-container {
    position: relative;
  }
  
  .logo {
    width: 120px;
    height: auto;
  }
  
  .main-nav {
    display: none; /* Navigation cachée sur mobile */
  }
  
  .header-actions {
    gap: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  
  /* Cacher complètement la barre de recherche sur mobile */
  .header-search,
  .header-search * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  
  /* Cacher les icônes sur mobile */
  .header-actions .icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Cacher spécifiquement le bouton de recherche sur mobile */
  .header-search button,
  .header-search input,
  .header-search form {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
  }
  
  /* Cacher le bouton avec l'icône de recherche sur mobile */
  .header-search button[type="submit"],
  .header-search .dashicons-search,
  .header-search button span {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-size: 0 !important;
  }
  
  /* Cacher complètement le formulaire de recherche sur mobile */
  .header-search {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
  }
  
  /* Cacher les éléments desktop-only sur mobile */
  .desktop-only {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  
  /* Règle très agressive pour cacher TOUS les boutons de recherche sur mobile */
  .header-actions button,
  .header-actions input,
  .header-actions form,
  .header-actions .dashicons,
  .header-actions .dashicons-search {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  
  /* Styles pour les icônes quand elles sont visibles (desktop) */
  .header-actions .icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a6fa3;
    text-decoration: none;
    border-radius: 50%;
    transition: all 0.3s ease;
  }
  
  .header-actions .icon:hover {
    background: rgba(26, 111, 163, 0.1);
    transform: translateY(-2px);
  }
  
  .btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: #1a6fa3;
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    white-space: nowrap;
  }
  
  .btn-login:hover {
    background: #155a8a;
    transform: translateY(-2px);
  }
  
  /* Menu burger pour mobile - Design moderne avec transitions UX/UI */
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a6fa3 0%, #155a8a 100%);
    border: none;
    width: 44px;
    height: 44px;
    cursor: pointer;
    border-radius: 12px;
    position: relative;
    z-index: 1001;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(26, 111, 163, 0.3);
    overflow: hidden;
  }
  
  .mobile-menu-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .mobile-menu-toggle:hover::before {
    left: 100%;
  }
  
  .mobile-menu-toggle:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(26, 111, 163, 0.4);
  }
  
  .mobile-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: white;
    margin: 3px 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1px;
    transform-origin: center;
    position: relative;
  }
  
  .mobile-menu-toggle.active {
    background: linear-gradient(135deg, #155a8a 0%, #0f4a7a 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(26, 111, 163, 0.5);
  }
  
  .mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
    background: #ffffff;
  }
  
  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
  }
  
  .mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
    background: #ffffff;
  }
  
  .mobile-menu {
    position: fixed;
    top: var(--wpadminbar-offset, 0px);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--wpadminbar-offset, 0px));
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.98) 100%);
    backdrop-filter: blur(20px);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  /* Déclare l’offset lié à la barre d’admin WordPress */
  body { --wpadminbar-offset: 0px; }
  body.admin-bar { --wpadminbar-offset: 46px; }
  @media (min-width: 783px) { body.admin-bar { --wpadminbar-offset: 32px; } }
  
  .mobile-menu.active {
    transform: translateX(0);
  }
  
  /* Animation d'entrée du menu */
  .mobile-menu.active {
    animation: slideInRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  
  @keyframes slideInRight {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px var(--mobile-padding);
    border-bottom: 2px solid #e0e0e0;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 1001;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  
  .mobile-menu-header img {
    height: 32px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: all 0.3s ease;
  }
  
  .mobile-menu-header img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
  }
  
  .mobile-menu-close {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #1a6fa3 0%, #155a8a 100%);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(26, 111, 163, 0.3);
  }
  
  .mobile-menu-close:hover {
    background: linear-gradient(135deg, #155a8a 0%, #0f4a7a 100%);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 6px 20px rgba(26, 111, 163, 0.4);
  }
  
  .mobile-menu-nav {
    padding: 24px var(--mobile-padding);
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
  }

  /* Plus d'espace sous le header pour éviter toute coupe du premier bouton */
  .mobile-menu-nav .nav-main:first-child { margin-top: 12px; }
  body.logged-in .mobile-menu-nav { padding-top: 40px; }
  
  .mobile-menu-nav a {
    display: block;
    padding: 20px 24px;
    margin: 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    background: #ffffff;
    border-radius: 16px;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Styles pour les liens principaux */
  .mobile-menu-nav .nav-main {
    background: linear-gradient(135deg, #1a6fa3 0%, #155a8a 100%);
    color: white;
    border-color: #1a6fa3;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
  }
  
  .mobile-menu-nav .nav-main:hover {
    background: linear-gradient(135deg, #155a8a 0%, #0f4a7a 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26, 111, 163, 0.3);
  }
  
  /* Styles pour les liens utilisateur */
  .mobile-menu-nav .nav-user {
    background: #ffffff;
    color: #1a6fa3;
    border-color: #1a6fa3;
  }
  
  .mobile-menu-nav .nav-user:hover {
    background: #1a6fa3;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26, 111, 163, 0.2);
  }

  /* Lien "Mon compte" avec libellé à côté de l'icône */
  .mobile-menu-nav .account-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 16px 20px;
    font-weight:700;
    color:#1a6fa3;
    background:#fff;
    border:2px solid #1a6fa3;
    border-radius:16px;
    text-decoration:none;
  }
  .mobile-menu-nav .account-link .dashicons{ font-size:20px; }
  .mobile-menu-nav .account-link .account-label{ font-size:16px; letter-spacing:.3px; }
  .mobile-menu-nav .account-link:hover{ background:#1a6fa3; color:#fff; transform: translateY(-3px); }
  
  /* Séparateur visuel */
  .nav-separator {
    height: 2px;
    background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
    margin: 20px 0;
    border-radius: 1px;
  }
  
  .mobile-menu-nav a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(26, 111, 163, 0.1), transparent);
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .mobile-menu-nav a:hover::before {
    left: 100%;
  }
  
  .mobile-menu-nav a:hover {
    color: #1a6fa3;
    background: #ffffff;
    border-color: #1a6fa3;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26, 111, 163, 0.2);
  }
  
  .mobile-menu-nav a:active {
    transform: translateY(-3px) scale(0.98);
  }
  
  /* Animation d'entrée des liens du menu - Déroulement vers le bas amélioré */
  .mobile-menu.active .mobile-menu-nav a {
    animation: slideInDown 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    transform: translateY(40px);
  }
  
  /* Délais échelonnés pour les liens principaux */
  .mobile-menu.active .nav-main:nth-child(1) { animation-delay: 0.2s; }
  .mobile-menu.active .nav-main:nth-child(2) { animation-delay: 0.3s; }
  .mobile-menu.active .nav-main:nth-child(3) { animation-delay: 0.4s; }
  
  /* Délais échelonnés pour les liens utilisateur */
  .mobile-menu.active .nav-user:nth-child(5) { animation-delay: 0.6s; }
  .mobile-menu.active .nav-user:nth-child(6) { animation-delay: 0.7s; }
  
  /* Animation du séparateur */
  .mobile-menu.active .nav-separator {
    animation: fadeInScale 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.5s;
    opacity: 0;
    transform: scaleX(0);
  }
  
  @keyframes slideInDown {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInScale {
    to {
      opacity: 1;
      transform: scaleX(1);
    }
  }
  
  /* Animation du header du menu */
  .mobile-menu.active .mobile-menu-header {
    animation: slideInFromTop 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  
  @keyframes slideInFromTop {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ========================================
   MENU BURGER - DESKTOP
   ======================================== */

@media (max-width:768px){
  .mobile-menu{ display:block !important; }
}

@media (min-width:769px){
  .mobile-menu-toggle{ display:none !important; }
  .mobile-menu{ display:none !important; }
}

/* ========================================
   PAGE D'ACCUEIL RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .hero-poolparty {
    padding: 40px var(--mobile-padding);
    text-align: center;
  }
  
  .hero-poolparty h1 {
    font-size: 2.5em;
    margin-bottom: 16px;
  }
  
  .hero-poolparty p {
    font-size: 1.1em;
    margin-bottom: 32px;
  }
  
  .recherche {
    flex-direction: column;
    gap: var(--mobile-gap);
    padding: var(--mobile-padding);
  }
  
  .recherche input {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    border-radius: var(--border-radius-mobile);
  }
  
  .recherche button {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    border-radius: var(--border-radius-mobile);
  }
  
  /* Best Seller responsive */
  .best-seller {
    padding: 40px var(--mobile-padding);
  }
  
  .best-seller h2 {
    font-size: 2em;
  }
  
  .piscines {
    flex-direction: column;
    gap: var(--mobile-gap);
  }
  
  .piscine {
    width: 100%;
    max-width: 400px;
    min-width: 300px;
  }
  
  /* Carousel responsive */
  .best-seller .piscines-carousel {
    margin: 32px 16px 0 16px;
    border-radius: 16px;
  }
  
  .best-seller .piscines-wrapper {
    padding: 16px;
    gap: 20px;
  }
  
  .pagination-dots {
    margin-top: 24px;
    padding: 16px;
  }
  
  /* Occasions responsive */
  .occasions {
    padding: 40px var(--mobile-padding);
  }
  
  .occasions h2 {
    font-size: 2em;
    white-space: normal;
    margin-bottom: 32px;
  }
  
  .occasions-grid {
    flex-direction: column;
    gap: var(--mobile-gap);
    align-items: center;
    justify-content: center;
  }
  
  .occasion-card {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  
  /* Expérience responsive */
  .experience {
    padding: 40px var(--mobile-padding);
  }
  
  .experience-content {
    flex-direction: column;
    gap: var(--mobile-gap);
    text-align: center;
  }
  
  .experience-text h2 {
    font-size: 1.8em;
  }
  
  .experience-buttons {
    flex-direction: column;
    gap: var(--mobile-gap);
  }
  
  .experience-badge {
    width: 250px;
    height: 250px;
    margin: 0 auto;
  }
  
  .badge-main {
    width: 200px;
    height: 200px;
  }
  
  .badge-logo {
    width: 100px;
    height: 40px;
    bottom: -20px;
    right: -25px;
  }
}

/* ========================================
   PAGE LOUER UNE PISCINE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .rentlist-poolparty {
    padding: 0 var(--mobile-padding);
  }
  
  .rentlist-header {
    margin-top: 24px;
  }
  
  .rentlist-title {
    font-size: 1.8em;
    padding: 12px 24px;
  }
  
  .rentlist-banner {
    height: 60px;
    margin: 24px 0;
  }
  
  .rentlist-search {
    margin: 24px 0;
  }
  
  .recherche {
    flex-direction: column;
    gap: var(--mobile-gap);
    padding: var(--mobile-padding);
  }
  
  .recherche input {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    border-radius: var(--border-radius-mobile);
  }
  
  .recherche button {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    border-radius: var(--border-radius-mobile);
  }
  
  .rentlist-cards {
    grid-template-columns: 1fr;
    gap: var(--mobile-gap);
    margin: 32px auto;
  }
  
  .rentlist-card {
    width: 100%;
    max-width: 400px;
    padding: 16px;
  }
  
  .rentlist-search-results {
    padding: var(--mobile-padding);
    margin: 24px 0;
  }
  
  .search-terms {
    flex-direction: column;
    gap: var(--mobile-gap);
  }
  
  .search-term {
    padding: 8px 16px;
    font-size: 14px;
  }
}

/* ========================================
   PAGE PRODUIT PISCINE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .productpool-poolparty {
    padding: 0 var(--mobile-padding);
  }
  
  .productpool-hero {
    flex-direction: column;
    gap: var(--mobile-gap);
  }
  
  .productpool-gallery {
    width: 100%;
  }
  
  .productpool-thumbnails {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .productpool-content {
    width: 100%;
    padding: var(--mobile-padding);
  }
  
  .productpool-stats {
    flex-direction: column;
    gap: var(--mobile-gap);
  }
  
  .productpool-resa {
    width: 100%;
    margin-top: var(--mobile-gap);
  }
  
  .productpool-avis {
    flex-direction: column;
    gap: var(--mobile-gap);
  }
  
  .productpool-avis-main {
    width: 100%;
  }
  
  .productpool-hote {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  
  .productpool-details {
    flex-direction: column;
    gap: var(--mobile-gap);
  }
  
  .productpool-details-cols {
    flex-direction: column;
    gap: var(--mobile-gap);
  }
  
  .productpool-details-col {
    width: 100%;
  }
  
  .productpool-suggestions {
    width: 100%;
    max-width: none;
    margin: 0;
  }
}

/* ========================================
   PAGES CONNEXION/INSCRIPTION RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .connexion-poolparty,
  .register-poolparty {
    padding: 20px var(--mobile-padding);
  }
  
  .connexion-box,
  .register-box {
    width: 100%;
    max-width: 400px;
    padding: 32px 24px;
    margin: 20px auto;
  }
  
  .connexion-title,
  .register-title {
    font-size: 1.8em;
  }
  
  .input-champ {
    padding: 16px;
    font-size: 16px;
  }
  
  .btn-jaune {
    padding: 16px;
    font-size: 16px;
  }
  
  .register-row {
    flex-direction: column;
    gap: var(--mobile-gap);
  }
}

/* ========================================
   PAGE DEVENIR HÔTE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .host-poolparty {
    padding: 0 var(--mobile-padding);
  }
  
  .host-header {
    flex-direction: column;
    gap: var(--mobile-gap);
    text-align: center;
    padding: 32px 0;
  }
  
  .host-header-left h1 {
    font-size: 2.2em;
  }
  
  .host-header-left h2 {
    font-size: 1.4em;
  }
  
  .host-header-right {
    width: 100%;
    max-width: 400px;
  }
  
  .host-steps {
    padding: 40px var(--mobile-padding);
  }
  
  .host-steps h2 {
    font-size: 1.8em;
  }
  
  .host-steps-list {
    flex-direction: column;
    gap: var(--mobile-gap);
  }
  
  .host-step {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  
  .host-faq {
    padding: 40px var(--mobile-padding);
  }
  
  .host-faq h2 {
    font-size: 1.8em;
  }
  
  .host-faq-item {
    padding: 16px 20px;
  }
}

/* ========================================
   PAGE LOUER MA PISCINE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .rentpool-poolparty {
    padding: 0 var(--mobile-padding);
  }
  
  .rentpool-step {
    padding: 24px 20px;
    margin-bottom: 24px;
  }
  
  .rentpool-step h2 {
    font-size: 1.3em;
  }
  
  .rentpool-options {
    flex-direction: column;
    gap: var(--mobile-gap);
  }
  
  .rentpool-option {
    width: 100%;
    text-align: center;
  }
  
  .rentpool-upload {
    padding: 24px 20px;
  }
  
  .rentpool-upload .btn-jaune {
    width: 100%;
    padding: 16px;
    font-size: 16px;
  }
  
  .rentpool-publish {
    width: 100%;
    padding: 16px;
    font-size: 16px;
  }
}

/* ========================================
   PAGE COMPTE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .compte-poolparty {
    padding: 0 var(--mobile-padding);
  }
  
  .compte-box {
    padding: 32px 24px;
    margin: 20px auto;
  }
  
  .compte-box h1 {
    font-size: 2.2em;
  }
  
  .compte-tabs {
    flex-direction: column;
    gap: var(--mobile-gap);
  }
  
  .compte-tabs button {
    width: 100%;
    text-align: center;
  }
  
  .compte-reservations {
    margin-bottom: 32px;
  }
}

/* ========================================
   FOOTER STYLES
   ======================================== */

.footer-bottom {
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  padding: 20px 0;
  text-align: center;
}

.footer-bottom-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-copyright {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.footer-disclaimer {
  color: #000;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
  max-width: 800px;
  margin: 0 auto;
}

/* ========================================
   FOOTER RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .footer-poolparty {
    padding: 40px var(--mobile-padding);
    text-align: center;
  }
  
  .footer-content {
    flex-direction: column;
    gap: var(--mobile-gap);
  }
  
  .footer-section {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .footer-section h3 {
    font-size: 1.3em;
    margin-bottom: 16px;
  }
  
  .footer-section ul {
    gap: 12px;
  }
  
  .footer-section a {
    font-size: 14px;
    padding: 8px 0;
  }
  
  .footer-bottom {
    padding: 16px 0;
  }
  
  .footer-bottom-content {
    padding: 0 16px;
  }
  
  .footer-copyright {
    font-size: 13px;
  }
  
  .footer-disclaimer {
    font-size: 11px;
  }
}

/* ========================================
   TABLET RESPONSIVE (768px - 1024px)
   ======================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  .header-poolparty {
    padding: 16px var(--tablet-padding);
  }
  
  .rentlist-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tablet-gap);
  }
  
  .productpool-hero {
    gap: var(--tablet-gap);
  }
  
  .productpool-content {
    padding: var(--tablet-padding);
  }
  
  .host-steps-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tablet-gap);
  }
  
  .host-step {
    width: calc(50% - var(--tablet-gap));
    max-width: 250px;
  }
}

/* ========================================
   LANDSCAPE MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
  .hero-poolparty {
    padding: 20px var(--mobile-padding);
  }
  
  .hero-poolparty h1 {
    font-size: 2em;
  }
  
  .mobile-menu { padding-top: 20px; }
  
  /* Correction spécifique pour la version connectée (offset discret) */
  body.logged-in .mobile-menu { padding-top: 20px; }
  
  .mobile-menu-nav a {
    padding: 12px 0;
  }
  
  /* Règle de sécurité : s'assurer que le premier élément n'est jamais coupé */
  .mobile-menu-nav .nav-main:first-child {
    margin-top: 20px;
  }
}

/* ========================================
   LARGE SCREENS RESPONSIVE (1200px+)
   ======================================== */

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .rentlist-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--desktop-gap);
  }
  
  .productpool-hero {
    gap: var(--desktop-gap);
  }
  
  .host-steps-list {
    gap: var(--desktop-gap);
  }
}

/* ========================================
   SYSTÈME DE COOKIES CONFORME RGPD
   ======================================== */

/* Banner de consentement des cookies */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-top: 3px solid #1a6fa3;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  animation: slideInUp 0.5s ease forwards;
}

.cookie-banner-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cookie-banner-text h3 {
  color: #1a6fa3;
  margin: 0 0 8px 0;
  font-size: 1.2em;
}

.cookie-banner-text p {
  margin: 0;
  color: #666;
  font-size: 0.9em;
  line-height: 1.4;
}

.cookie-banner-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cookie-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.cookie-btn-accept-all {
  background: #28a745;
  color: white;
}

.cookie-btn-accept-all:hover {
  background: #218838;
  transform: translateY(-2px);
}

.cookie-btn-customize {
  background: #1a6fa3;
  color: white;
}

.cookie-btn-customize:hover {
  background: #155a8a;
  transform: translateY(-2px);
}

.cookie-btn-reject {
  background: #dc3545;
  color: white;
}

.cookie-btn-reject:hover {
  background: #c82333;
  transform: translateY(-2px);
}

/* Modal de paramètres des cookies */
.cookie-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  animation: fadeIn 0.3s ease forwards;
}

.cookie-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

.cookie-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.cookie-modal-header {
  padding: 24px 24px 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #f0f0f0;
}

.cookie-modal-header h2 {
  color: #1a6fa3;
  margin: 0;
  font-size: 1.5em;
}

.cookie-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #666;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.cookie-modal-close:hover {
  background: #f0f0f0;
  color: #333;
}

.cookie-modal-body {
  padding: 24px;
}

.cookie-category {
  margin-bottom: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.cookie-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.cookie-category-header h3 {
  color: #333;
  margin: 0;
  font-size: 1.1em;
}

.cookie-category p {
  margin: 0;
  color: #666;
  font-size: 0.9em;
  line-height: 1.4;
}

/* Switch toggle pour les cookies */
.cookie-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}

.cookie-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .cookie-slider {
  background-color: #1a6fa3;
}

input:checked + .cookie-slider:before {
  transform: translateX(26px);
}

input:disabled + .cookie-slider {
  background-color: #6c757d;
  cursor: not-allowed;
}

.cookie-modal-footer {
  padding: 0 24px 24px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.cookie-btn-save {
  background: #28a745;
  color: white;
}

.cookie-btn-save:hover {
  background: #218838;
}

.cookie-btn-cancel {
  background: #6c757d;
  color: white;
}

.cookie-btn-cancel:hover {
  background: #5a6268;
}

/* Bouton de gestion des cookies dans le footer */
.cookie-settings-btn {
  background: #1a6fa3;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 16px;
}

.cookie-settings-btn:hover {
  background: #155a8a;
  transform: translateY(-2px);
}

/* Notifications */
.cookie-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #28a745;
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(40, 167, 69, 0.3);
  z-index: 10001;
  animation: slideInRight 0.5s ease forwards;
}

/* Animations */
@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideOutUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* === PAGE DE RECHERCHE === */
.search-page {
  padding: 48px 0;
  background: #f8f9fa;
  min-height: 60vh;
}

.search-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.search-title {
  text-align: center;
  font-size: 2.5em;
  font-weight: 700;
  color: #1a6fa3;
  margin-bottom: 32px;
}

.search-title span {
  color: #ffb700;
  font-style: italic;
}

/* Formulaire de recherche */
.search-form-container {
  background: #fff;
  border-radius: 18px;
  padding: 32px;
  margin-bottom: 48px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.search-form {
  width: 100%;
}

.search-form-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.search-input-group {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 4px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.search-input-group:focus-within {
  border-color: #1a6fa3;
  background: #fff;
}

.search-field {
  flex: 1;
  border: none;
  background: transparent;
  padding: 16px 20px;
  font-size: 1.1em;
  color: #333;
  outline: none;
}

.search-field::placeholder {
  color: #999;
}

.search-submit {
  background: #1a6fa3;
  border: none;
  border-radius: 8px;
  padding: 16px 20px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-submit:hover {
  background: #155a8a;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(26, 111, 163, 0.3);
}

.search-options {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.search-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 1em;
  color: #666;
  transition: color 0.3s ease;
}

.search-option:hover {
  color: #1a6fa3;
}

.search-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #1a6fa3;
}

/* Résultats de recherche */
.search-results {
  margin-top: 32px;
}

.results-count {
  text-align: center;
  font-size: 1.5em;
  color: #333;
  margin-bottom: 32px;
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 32px;
  margin-bottom: 48px;
}

.search-result-item {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.search-result-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.result-thumbnail {
  height: 200px;
  overflow: hidden;
}

.result-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.search-result-item:hover .result-thumbnail img {
  transform: scale(1.05);
}

.result-content {
  padding: 24px;
}

.result-title {
  margin: 0 0 16px 0;
  font-size: 1.4em;
  font-weight: 600;
}

.result-title a {
  color: #1a6fa3;
  text-decoration: none;
  transition: color 0.3s ease;
}

.result-title a:hover {
  color: #ffb700;
}

.result-excerpt {
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
}

.result-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 0.9em;
  color: #999;
}

.result-link {
  display: inline-block;
  color: #1a6fa3;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.result-link:hover {
  color: #ffb700;
  transform: translateX(4px);
}

/* Pagination */
.search-pagination {
  text-align: center;
  margin-top: 48px;
}

.search-pagination .page-numbers {
  display: inline-block;
  padding: 12px 16px;
  margin: 0 4px;
  background: #fff;
  border: 2px solid #e0f0fa;
  border-radius: 8px;
  color: #1a6fa3;
  text-decoration: none;
  transition: all 0.3s ease;
}

.search-pagination .page-numbers:hover,
.search-pagination .page-numbers.current {
  background: #1a6fa3;
  color: #fff;
  border-color: #1a6fa3;
}

/* Aucun résultat */
.no-results {
  text-align: center;
  padding: 64px 24px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.no-results-icon {
  margin-bottom: 24px;
  opacity: 0.5;
}

.no-results h2 {
  color: #333;
  font-size: 1.8em;
  margin-bottom: 16px;
}

.no-results p {
  color: #666;
  font-size: 1.1em;
  margin-bottom: 32px;
}

.no-results-suggestions {
  text-align: left;
  max-width: 400px;
  margin: 0 auto 32px auto;
}

.no-results-suggestions h3 {
  color: #1a6fa3;
  margin-bottom: 16px;
}

.no-results-suggestions ul {
  list-style: none;
  padding: 0;
}

.no-results-suggestions li {
  color: #666;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.no-results-suggestions li:last-child {
  border-bottom: none;
}

.no-results-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.no-results-actions .btn-jaune,
.no-results-actions .btn-blanc {
  padding: 16px 32px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.no-results-actions .btn-jaune {
  background: #ffb700;
  color: #333;
}

.no-results-actions .btn-jaune:hover {
  background: #e6a600;
  transform: translateY(-2px);
}

.no-results-actions .btn-blanc {
  background: #fff;
  color: #1a6fa3;
  border: 2px solid #1a6fa3;
}

.no-results-actions .btn-blanc:hover {
  background: #1a6fa3;
  color: #fff;
}

/* === PAGE 404 PERSONNALISÉE === */
.error-404-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0f0fa 0%, #f8f9fa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  position: relative;
}

.error-container {
  max-width: 900px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 2;
}

.error-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 48px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.error-icon {
  margin-bottom: 24px;
}

.plouf-gif {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(26, 111, 163, 0.3);
}

.error-title {
  font-size: 3.5em;
  font-weight: 700;
  color: #1a6fa3;
  margin: 0 0 16px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.error-subtitle {
  font-size: 1.8em;
  color: #ffb700;
  margin: 0 0 24px 0;
  font-weight: 600;
}

.error-description {
  font-size: 1.2em;
  color: #666;
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.error-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.error-actions .btn-jaune,
.error-actions .btn-blanc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95em;
  transition: all 0.3s ease;
  min-width: 160px;
  max-width: 200px;
  justify-content: center;
}

.error-actions .btn-jaune {
  background: #ffb700;
  color: #333;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.error-actions .btn-jaune:hover {
  background: #e6a600;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.error-actions .btn-blanc {
  background: #fff;
  color: #1a6fa3;
  border: 2px solid #1a6fa3;
  box-shadow: 0 4px 15px rgba(26, 111, 163, 0.2);
}

.error-actions .btn-blanc:hover {
  background: #1a6fa3;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26, 111, 163, 0.3);
}

/* Styles pour les icônes SVG dans les boutons */
.error-actions .btn-jaune svg,
.error-actions .btn-blanc svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Suggestions */
.error-suggestions {
  margin-bottom: 48px;
}

.error-suggestions h3 {
  color: #1a6fa3;
  font-size: 1.4em;
  margin-bottom: 24px;
}

.suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.suggestion-item {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 24px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.suggestion-item:hover {
  border-color: #1a6fa3;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(26, 111, 163, 0.15);
}

.suggestion-icon {
  font-size: 3em;
  margin-bottom: 16px;
}

.suggestion-item h4 {
  color: #1a6fa3;
  margin: 0 0 12px 0;
  font-size: 1.2em;
}

.suggestion-item p {
  color: #666;
  margin: 0 0 16px 0;
  line-height: 1.5;
  font-size: 0.95em;
}

.suggestion-item a {
  color: #ffb700;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95em;
  transition: color 0.3s ease;
}

.suggestion-item a:hover {
  color: #e6a600;
}

/* Recherche */
.error-search {
  margin-bottom: 32px;
}

.error-search h3 {
  color: #1a6fa3;
  font-size: 1.3em;
  margin-bottom: 20px;
}

.error-search-form {
  max-width: 400px;
  margin: 0 auto;
}

.error-search-form .search-input-group {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 4px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.error-search-form .search-input-group:focus-within {
  border-color: #1a6fa3;
  background: #fff;
}

.error-search-form .search-field {
  flex: 1;
  border: none;
  background: transparent;
  padding: 16px 20px;
  font-size: 1.1em;
  color: #333;
  outline: none;
}

.error-search-form .search-submit {
  background: #1a6fa3;
  border: none;
  border-radius: 8px;
  padding: 16px 20px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.error-search-form .search-submit:hover {
  background: #155a8a;
  transform: translateY(-2px);
}

/* Animation du drop d'eau */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

/* Responsive pour la page 404 */
@media (max-width: 768px) {
  .error-404-page {
    padding: 24px 16px;
  }
  
  .error-content {
    padding: 32px 24px;
  }
  
  .error-title {
    font-size: 3em;
  }
  
  .error-subtitle {
    font-size: 1.5em;
  }
  
  .error-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .error-actions .btn-jaune,
  .error-actions .btn-blanc {
    width: 100%;
    max-width: 300px;
  }
  
  .suggestions-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .water-ripple {
    display: none;
  }
}

/* Responsive pour la recherche */
@media (max-width: 768px) {
  .search-page {
    padding: 24px 0;
  }
  
  .search-container {
    padding: 0 16px;
  }
  
  .search-title {
    font-size: 2em;
    margin-bottom: 24px;
  }
  
  .search-form-container {
    padding: 24px;
    margin-bottom: 32px;
  }
  
  .search-options {
    flex-direction: column;
    gap: 16px;
  }
  
  .search-results-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .no-results-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .no-results-actions .btn-jaune,
  .no-results-actions .btn-blanc {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
}

/* Responsive pour les cookies */
@media (max-width: 768px) {
  .cookie-banner-content {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }
  
  .cookie-banner-actions {
    justify-content: center;
  }
  
  .cookie-modal-content {
    width: 95%;
    margin: 20px;
  }
  
  .cookie-modal-header,
  .cookie-modal-body,
  .cookie-modal-footer {
    padding: 16px;
  }
  
  .cookie-category {
    padding: 16px;
  }
  
  .cookie-category-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

/* ========================================
   ACCESSIBILITÉ ET UX RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  /* Améliorer la lisibilité sur mobile */
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  
  /* Boutons plus grands pour le touch */
  button, .btn-jaune, .btn-blanc {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Espacement des liens pour éviter les clics accidentels */
  a, button {
    margin: 4px 0;
  }
  
  /* Focus visible sur mobile */
  button:focus,
  input:focus,
  a:focus {
    outline: 2px solid #1a6fa3;
    outline-offset: 2px;
  }
  
  /* Animation de chargement pour les interactions */
  .loading {
    opacity: 0.7;
    pointer-events: none;
  }
  
  /* Transitions fluides */
  * {
    transition: all 0.3s ease;
  }
  
  /* Footer responsive */
  .footer-container {
    flex-direction: column;
    gap: 32px;
    padding: 0 24px;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  
  .footer-col {
    flex: 1 1 auto;
    min-width: auto;
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .footer-col strong {
    text-align: center;
    margin-bottom: 16px;
  }
  
  .footer-col ul {
    text-align: center;
    width: 100%;
  }
  
  .footer-col ul li {
    text-align: center;
    margin-bottom: 12px;
  }
  
  .footer-logo {
    justify-content: center;
    flex: 1 1 auto;
    margin-top: 16px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .social-links {
    justify-content: center;
    margin-top: 16px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .social-links a {
    width: 44px;
    height: 44px;
  }
  
  .social-links a svg {
    width: 22px;
    height: 22px;
  }
  
  .footer-bottom {
    padding: 0 24px;
    text-align: center;
  }
  
  .footer-bottom-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  
  .footer-copyright {
    text-align: center;
    width: 100%;
  }
  
  .footer-disclaimer {
    text-align: center;
    width: 100%;
  }
}

/* ========================================
   SECTION PROFIL UTILISATEUR
   ======================================== */

.profil-section {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
}

.profil-section h2 {
  color: #1a6fa3;
  margin-bottom: 24px;
  font-size: 1.8em;
  font-weight: 600;
}

.profil-info h3 {
  color: #495057;
  margin-bottom: 16px;
  font-size: 1.3em;
  font-weight: 600;
}

.profil-details {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  border-left: 4px solid #1a6fa3;
}

.profil-details p {
  margin: 8px 0;
  color: #495057;
  font-size: 1.1em;
}

.profil-details strong {
  color: #1a6fa3;
  font-weight: 600;
}

.profil-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-modifier {
  background: #1a6fa3;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-modifier:hover {
  background: #155a8a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 111, 163, 0.3);
}

.btn-supprimer {
  background: #dc3545;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-supprimer:hover {
  background: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Formulaire de modification */
.profil-edit-form {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
  border: 2px solid #e9ecef;
}

.profil-edit-form h3 {
  color: #1a6fa3;
  margin-bottom: 20px;
  font-size: 1.4em;
  font-weight: 600;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #495057;
  font-weight: 600;
  font-size: 1em;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1em;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: #1a6fa3;
  box-shadow: 0 0 0 3px rgba(26, 111, 163, 0.1);
}

.form-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.btn-sauvegarder {
  background: #28a745;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-sauvegarder:hover {
  background: #218838;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-annuler {
  background: #6c757d;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-annuler:hover {
  background: #5a6268;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

/* Modal de suppression */
.delete-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-modal-content {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  max-width: 500px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.delete-modal-content h3 {
  color: #dc3545;
  margin-bottom: 20px;
  font-size: 1.5em;
  font-weight: 600;
}

.delete-modal-content p {
  color: #495057;
  margin-bottom: 16px;
  font-size: 1.1em;
  line-height: 1.6;
}

.delete-modal-content ul {
  text-align: left;
  margin: 20px 0;
  padding-left: 20px;
}

.delete-modal-content li {
  color: #dc3545;
  margin-bottom: 8px;
  font-weight: 500;
}

.delete-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

.btn-confirmer-suppression {
  background: #dc3545;
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-confirmer-suppression:hover {
  background: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-annuler-suppression {
  background: #6c757d;
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-annuler-suppression:hover {
  background: #5a6268;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

/* Responsive pour le profil */
@media (max-width: 768px) {
  .profil-section {
    padding: 24px 20px;
    margin-bottom: 24px;
  }
  
  .profil-actions {
    flex-direction: column;
  }
  
  .btn-modifier,
  .btn-supprimer {
    width: 100%;
    text-align: center;
  }
  
  .profil-edit-form {
    padding: 20px 16px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .btn-sauvegarder,
  .btn-annuler {
    width: 100%;
    text-align: center;
  }
  
  .delete-modal-content {
    padding: 24px 20px;
    width: 95%;
  }
  
  .delete-actions {
    flex-direction: column;
  }
  
  .btn-confirmer-suppression,
  .btn-annuler-suppression {
    width: 100%;
    text-align: center;
  }
}

/* ========================================
   SECTION CONTACT - PAGE À PROPOS
   ======================================== */

.about-contact {
  background: #fff;
  padding: 64px 0;
  margin: 48px 0;
}

.contact-title {
  text-align: center;
  color: #1a6fa3;
  font-size: 2.5em;
  margin-bottom: 48px;
  font-weight: 600;
}

.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact-info h3 {
  color: #1a6fa3;
  font-size: 1.8em;
  margin-bottom: 32px;
  font-weight: 600;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #1a6fa3;
}

.contact-icon {
  font-size: 2em;
  flex-shrink: 0;
}

.contact-item div {
  flex: 1;
}

.contact-item strong {
  color: #1a6fa3;
  font-weight: 600;
  font-size: 1.1em;
  display: block;
  margin-bottom: 4px;
}

.contact-item a {
  color: #495057;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-item a:hover {
  color: #1a6fa3;
}

/* Formulaire de contact */
.contact-form-container h3 {
  color: #1a6fa3;
  font-size: 1.8em;
  margin-bottom: 32px;
  font-weight: 600;
}

.contact-form {
  background: #f8f9fa;
  padding: 32px;
  border-radius: 16px;
  border: 2px solid #e9ecef;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #495057;
  font-weight: 600;
  font-size: 1em;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1em;
  transition: all 0.3s ease;
  box-sizing: border-box;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1a6fa3;
  box-shadow: 0 0 0 3px rgba(26, 111, 163, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

/* Checkbox personnalisée */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 0.95em;
  color: #495057;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.checkbox-label .checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #e9ecef;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  transition: all 0.3s ease;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
  background: #1a6fa3;
  border-color: #1a6fa3;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.btn-contact-submit {
  background: #1a6fa3;
  color: #fff;
  border: none;
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.btn-contact-submit:hover {
  background: #155a8a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 111, 163, 0.3);
}

.btn-contact-submit:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* === VALIDATION DES CHAMPS === */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #007cba;
  box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);
}

.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.field-error {
  color: #dc3545;
  font-size: 14px;
  margin-top: 5px;
  padding: 5px 10px;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  animation: fadeIn 0.3s ease-in;
}

/* Responsive pour le contact */
@media (max-width: 768px) {
  .about-contact {
    padding: 48px 0;
    margin: 32px 0;
  }
  
  .contact-title {
    font-size: 2em;
    margin-bottom: 32px;
  }
  
  .contact-container {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px;
  }
  
  .contact-form {
    padding: 24px 20px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .contact-item {
    padding: 16px;
  }
  
  .contact-icon {
    font-size: 1.5em;
  }
}

/* ========================================
   PAGE PLAN DU SITE
   ======================================== */

.plan-site-page {
  background: #f8f9fa;
  min-height: 100vh;
  padding: 48px 0;
}

.plan-header {
  text-align: center;
  margin-bottom: 48px;
  padding: 0 32px;
}

.plan-title {
  color: #1a6fa3;
  font-size: 3em;
  margin-bottom: 16px;
  font-weight: 700;
}

.plan-subtitle {
  color: #6c757d;
  font-size: 1.3em;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.plan-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.plan-section {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
}

.plan-section-title {
  color: #1a6fa3;
  font-size: 2em;
  margin-bottom: 32px;
  font-weight: 600;
  text-align: center;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.plan-card {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 24px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
  text-align: center;
}

.plan-card:hover {
  transform: translateY(-4px);
  border-color: #1a6fa3;
  box-shadow: 0 8px 25px rgba(26, 111, 163, 0.15);
}

.plan-card h3 {
  color: #1a6fa3;
  font-size: 1.4em;
  margin-bottom: 12px;
  font-weight: 600;
}

.plan-card p {
  color: #495057;
  margin-bottom: 20px;
  line-height: 1.6;
  font-size: 1em;
}

.plan-link {
  display: inline-block;
  background: #1a6fa3;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.plan-link:hover {
  background: #155a8a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 111, 163, 0.3);
  color: #fff;
}

/* Navigation rapide */
.plan-quick-nav {
  background: linear-gradient(135deg, #1a6fa3 0%, #155a8a 100%);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 32px;
  text-align: center;
}

.plan-quick-nav .plan-section-title {
  color: #fff;
  margin-bottom: 32px;
}

.quick-nav-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.quick-nav-btn {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1em;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  min-width: 180px;
}

.quick-nav-btn.primary {
  background: #28a745;
  color: #fff;
}

.quick-nav-btn.primary:hover {
  background: #218838;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
}

.quick-nav-btn.secondary {
  background: #ffc107;
  color: #212529;
}

.quick-nav-btn.secondary:hover {
  background: #e0a800;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 193, 7, 0.3);
}

.quick-nav-btn.accent {
  background: #dc3545;
  color: #fff;
}

.quick-nav-btn.accent:hover {
  background: #c82333;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
}

.quick-nav-btn.info {
  background: #17a2b8;
  color: #fff;
}

.quick-nav-btn.info:hover {
  background: #138496;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(23, 162, 184, 0.3);
}

/* Responsive pour le plan du site */
@media (max-width: 768px) {
  .plan-site-page {
    padding: 32px 0;
  }
  
  .plan-header {
    padding: 0 20px;
    margin-bottom: 32px;
  }
  
  .plan-title {
    font-size: 2.5em;
  }
  
  .plan-subtitle {
    font-size: 1.1em;
  }
  
  .plan-container {
    padding: 0 20px;
  }
  
  .plan-section {
    padding: 24px 20px;
    margin-bottom: 24px;
  }
  
  .plan-section-title {
    font-size: 1.6em;
    margin-bottom: 24px;
  }
  
  .plan-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .plan-card {
    padding: 20px;
  }
  
  .plan-quick-nav {
    padding: 24px 20px;
  }
  
  .quick-nav-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .quick-nav-btn {
    width: 100%;
    max-width: 300px;
    min-width: auto;
  }
    /* Ré-affiche le burger malgré les règles de masquage global */
}

/* --- Variables & empilement --- */
:root{ --header-h: 64px; }             /* hauteur par défaut, affinée en JS */
.site-header{ position:sticky; top:0; z-index:1000; }

/* === PATCH HEADER MOBILE — AFFICHER LOGIN + BURGER === */
@media (max-width:768px){

  .mobile-menu{
    position: fixed;
    left:0; right:0;
    top: var(--header-h);
    z-index: 999;                      /* sous le header, au-dessus du contenu */
    background: transparent !important;
    max-height: 0;                     /* fermé */
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height .3s ease, opacity .2s ease, transform .3s ease;
    padding-top: 0;
  }
    .mobile-menu.active{
    max-height: 85vh;                  /* ouvert */
    opacity: 1;
    transform: translateY(0);
    padding-top: 12px;
  }

    .mobile-menu-nav{
    background: transparent !important;
    padding: 12px 16px 24px;
    box-shadow: none !important;
  }

  .mobile-menu-header,
  .mobile-menu-nav{
    background: transparent !important;           /* conteneurs transparents */
    box-shadow: none !important;
  }

    .mobile-menu-header,
  .mobile-menu-close{ display:none !important; }

  /* si tu as un séparateur blanc */
  .mobile-menu .nav-separator{
    background: transparent !important;
    border: 0 !important;
    height: 12px;
  }

  .mobile-menu-toggle{
    display:inline-flex !important;
    flex-direction: column !important;
    align-items:center; justify-content:center;
    gap:6px;
    width:44px; height:44px;
    background: transparent !important;
    border: 1px solid rgba(31,95,144,.35);
    border-radius:12px;
    color:#1f5f90;
  }

  .mobile-menu-toggle span{
    display:block !important;
    width:22px; height:2.5px;
    background: currentColor !important;
    margin:0 !important;
    border-radius:2px;
    transform-origin:center;
    transition: transform .2s ease, opacity .2s ease;
  }

  /* Ré-afficher le burger malgré la règle qui masque tous les boutons */
  .header-actions button.mobile-menu-toggle{
    display:inline-flex !important;
    position: static !important;
    left:auto !important;
    top:auto !important;
    width:44px !important;
    height:44px !important;
    margin:0 !important;
    padding:0 !important;
    visibility:visible !important;
    opacity:1 !important;
    align-items:center; justify-content:center;
  }
  .header-actions button.mobile-menu-toggle span{
    width:20px; height:2px; background:#fff; margin:3px 0;
  }

  /* Icônes visibles en mobile UNIQUEMENT si l'utilisateur est connecté */
  body.logged-in .header-actions .icon{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:40px; height:40px; align-items:center; justify-content:center;
  }

  .header-actions .btn-login{ 
    display:none !important; 
  }

  /* Ordre : logo (gauche) / login ou icônes (milieu) / burger (droite) */
  .header-actions{ display:flex; align-items:center; gap:10px; }
  .btn-login{ order:2; }
  body.logged-in .header-actions .icon{ order:2; }
  .mobile-menu-toggle{ order:3; }

  /* croix animée quand actif (déjà gérée en JS) */
  .mobile-menu-toggle.active span:nth-child(2){ opacity:0; }
  .mobile-menu-toggle.active span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
  .mobile-menu-toggle.active span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }
}

/* === CORRECTION : ne pas cacher le burger en mobile === */
/* Ta règle “MENU BURGER - DESKTOP” s’applique partout ; on la restreint au desktop. */
@media (min-width:769px){
  .mobile-menu-toggle{ display:none; }
  .mobile-menu{ display:none; }
}

/* === Mini Accessibilité (poignée + panneau) === */
.a11y-mini{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:9999;pointer-events:auto}
.a11y-mini-handle{position:fixed;right:10px;top:50%;transform:translateY(-50%);width:64px;height:64px;border-radius:14px;border:1px solid rgba(0,0,0,.12);background:#0d6efd;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.24);cursor:pointer;pointer-events:auto}
.a11y-mini-icon{width:32px !important;height:32px !important;flex-shrink:0}
.a11y-mini-overlay{position:fixed;inset:0;background:transparent;pointer-events:none}
.a11y-mini.open .a11y-mini-overlay{pointer-events:auto}
.a11y-mini-panel{position:fixed;right:60px;top:50%;transform:translateY(-50%) translateX(10px);min-width:180px;background:rgba(255,255,255,.35);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.25);box-shadow:0 12px 40px rgba(0,0,0,.2);border-radius:12px;padding:12px;opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease}
.a11y-mini.open .a11y-mini-panel{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
.a11y-mini-actions{display:flex;gap:8px;align-items:center;justify-content:center}
.a11y-mini-btn{padding:8px 10px;border-radius:8px;border:1px solid #d0d7de;background:#fff;color:#111;cursor:pointer}
body.dark-mode .a11y-mini-panel{background:rgba(15,23,42,.55);border-color:rgba(255,255,255,.12)}

/* Text scale (0=base,1=+10%,2=+20%) */
html[data-text-scale="1"]{font-size:105%}
html[data-text-scale="2"]{font-size:110%}

/* Fallback: surcharger la taille des éléments textuels clés pour couvrir les cas en px */
html[data-text-scale="1"] :where(body, p, li, a, span, small, label, input, textarea, button, select){ font-size:1.05em !important; }
html[data-text-scale="2"] :where(body, p, li, a, span, small, label, input, textarea, button, select){ font-size:1.1em !important; }

@media (max-width:768px){
  .a11y-mini-handle{right:8px;top:auto;bottom:20px;transform:none}
  .a11y-mini-panel{right:8px;top:auto;bottom:76px;transform:none}
  .a11y-mini.open .a11y-mini-panel{transform:none}
}