/* Camping Pedro — feuille de style unique du site (HTML sans WordPress, 2026-11)
   Ordre : réglages · base · en-tête · pied de page · éléments communs · pages · téléphone */

/* Polices hébergées sur le site (alleger.py) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/polices/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/polices/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/polices/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/polices/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Réglages ---------- */
:root {
  --marine: #000080;      /* texte */
  --bleu-nav: #004aad;    /* liens du menu */
  --ciel: #38b6ff;        /* menu actif, en-têtes du tableau */
  --bouton: #2ea3f2;      /* boutons contour */
  --bleu-fonce: #0c71c3;  /* liseré des pastilles */
  --orange: #ffbd59;      /* bandeau des atouts */
  --bleu-clair: rgba(56, 182, 255, .5);
  --ombre: rgba(56, 182, 255, .5) 0 2px 18px;
  --largeur: 1080px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--marine);
  font: 500 14px/1.7 Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-top: 114px;   /* place de l'en-tête fixe */
}
h1, h2, h3 { margin: 0; padding-bottom: 10px; font-weight: 500; line-height: 1; color: var(--marine); }
h1 { font-size: 28px; } h2 { font-size: 26px; } h3 { font-size: 22px; }
p { margin: 0; padding-bottom: 1em; }
p:last-child { padding-bottom: 0; }
a { color: var(--bouton); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0 0 1em; padding-left: 1.5em; }
.rangee { width: 80%; max-width: var(--largeur); margin: 0 auto; padding: 27px 0; }
.section { position: relative; padding: 54px 0; }
.centre { text-align: center; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Colonnes (comme la grille d'origine : gouttière 60 px) */
.cols { display: grid; gap: 60px; align-items: start; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 0; }
.cols-3-2 { grid-template-columns: 3fr 2fr; }

/* Bouton à contour */
.bouton {
  display: inline-block; padding: 6px 20px; border: 2px solid var(--bouton); border-radius: 3px;
  font-size: 20px; line-height: 34px; color: var(--bouton); background: none; cursor: pointer;
  transition: background .2s;
}
.bouton:hover { background: rgba(0, 0, 0, .05); }
.bouton-bloc { text-align: center; }

/* Séparateurs (vagues et biais, dessins d'origine) */
.vague-bas::after, .vague-haut::before, .biais-haut::before, .biais-bas::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
  background-repeat: no-repeat;
}
.vague-bas::after { bottom: 0; height: 32px; background-image: url(/images/vague-bas.svg); background-size: 100% 32px; }
.vague-haut::before { top: 0; height: 30px; background-image: url(/images/vague-haut.svg); background-size: 100% 30px; transform: scaleX(-1); }
.vague-bas.fine::after { height: 30px; background-size: 100% 30px; }
.biais-haut::before { top: 0; height: 50px; background-image: url(/images/biais-haut.svg); background-size: 100% 50px; }
.biais-bas::after { bottom: 0; height: 50px; background-image: url(/images/biais-bas.svg); background-size: 100% 50px; }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: 114px;
  background: rgba(255, 255, 255, .76);
}
.entete .rangee { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0; }
.logo img { height: 101px; width: auto; }
.menu { display: flex; gap: 25px; list-style: none; margin: 0; padding: 0; }
.menu a { display: flex; align-items: center; gap: 5px; color: var(--bleu-nav); font-weight: 600; line-height: 14px; }
.menu a[aria-current="page"], .menu a:hover { color: var(--ciel); }
.menu img { width: 18px; height: 12px; }
.burger { display: none; }

/* ---------- Pied de page ---------- */
.pied {
  position: relative; margin-top: 0; padding: 82px 0 26px; text-align: center; color: #fff;
  background: #fff url(/images/pied-de-page-pins-1600.webp) center / cover;
}
.pied .logo-rond { position: absolute; left: 50%; top: -96px; transform: translateX(-50%); z-index: 2; }
.pied .logo-rond img { width: 158px; height: 158px; }
.pied nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; list-style: none; margin: 0; padding: 0; }
.pied nav a { color: #fff; font-size: 16px; text-shadow: 0 0 6px rgba(0, 0, 0, .55); }
.pied nav a[aria-current="page"] { color: var(--ciel); }
.pied .apropos { position: relative; }
.pied .apropos > span { cursor: default; font-size: 16px; text-shadow: 0 0 6px rgba(0, 0, 0, .55); }
.pied .apropos > span::after { content: " ⌄"; }
.pied .apropos ul { display: none; position: absolute; bottom: 100%; left: 0; width: 230px; padding: 10px 0; background: #fff; text-align: left; box-shadow: 0 2px 5px rgba(0, 0, 0, .1); }
.pied .apropos ul a { display: block; padding: 6px 20px; color: var(--marine); text-shadow: none; font-size: 14px; }
.pied .apropos:hover ul, .pied .apropos:focus-within ul { display: block; }
.pied .copie { margin-top: 2px; font-size: 12px; text-shadow: 0 0 6px rgba(0, 0, 0, .55); }

/* ---------- Grand visuel du haut de page ---------- */
.heros { position: relative; overflow: hidden; color: #fff; }
.heros > img, .heros > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heros-photo { height: 930px; }
.heros-photo.camping { height: 907px; }
.heros-photo.reservation { height: 690px; }
.heros-photo.locations > img { object-position: 50% 0; }
.heros-video { height: 418px; padding-top: 54px; }
.heros-video .texte { position: relative; z-index: 1; width: min(510px, 35.4%); margin-left: max(10%, calc(50% - 540px)); text-align: center; }
.heros-video h1 { color: #fff; font-size: 28px; line-height: 1; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.heros-video p { margin: 10px 0 30px; font-size: 11.2px; text-align: justify; text-shadow: 0 1px 5px rgba(0, 0, 0, .6); }
.heros-video .bouton-bloc { text-align: center; text-shadow: none; }

/* ---------- Accueil ---------- */
.famille h2 { padding-bottom: 30px; }
.famille .texte p { font-size: 18px; line-height: 23.8px; padding-bottom: 18px; }
.famille .photos img:last-child { margin: -41px 0 0 51px; }
.atouts { background: var(--orange); padding: 54px 0; }
.atouts .cols-5 { width: 100%; }
.atout { display: block; text-align: center; color: var(--marine); }
.atout img { width: 144px; height: 144px; margin: 0 auto 8px; }
.atout span { display: block; font-weight: 600; font-size: 14px; }
.cap { padding-bottom: 230px; }
.cap .intro { text-align: center; }
.cap .intro h3 { padding-bottom: 0; }
.cap .intro p { font-size: 18px; line-height: 23.8px; padding-top: 18px; }
.carte { padding: 8px 8px 8px; box-shadow: var(--ombre); text-align: center; }
.carte h3 { margin: 28px 0 28px; font-size: 16px; font-weight: 500; padding: 0; line-height: 1.7; }

/* ---------- Camping ---------- */
.bande-bleue { background: var(--bleu-clair); }
.services h1 { font-size: 32px; padding-bottom: 22px; }
.page-camping .texte p { font-size: 16px; line-height: 23.8px; }
.pastilles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 60px; padding-top: 23px; list-style: none; margin: 0; }
.pastilles li {
  min-height: 60px; display: flex; align-items: center; justify-content: center; padding: 7px 15px;
  background: #fff; border-top: 7px solid var(--bleu-fonce); border-radius: 10px;
  box-shadow: var(--bleu-fonce) 0 12px 18px -6px; text-align: center; font-weight: 600;
}
.animations .photos img:last-child { margin: -29px 0 0 51px; }
.animations .photos { margin-left: -58px; }

/* ---------- Locations ---------- */
.mobilhome { box-shadow: rgba(56, 182, 255, .5) 1px 6px 8px; text-align: center; padding-bottom: 27px; }
.mobilhome img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mobilhome h3 { padding: 30px 0 18px; }
.mobilhome p { font-size: 15px; padding: 0 10px 29px; }
.tarifs h1 { padding-bottom: 20px; }
.tarifs table { table-layout: fixed; width: 100%; border-collapse: collapse; margin-top: 27px; border: 1px solid #333; font-size: 18px; text-align: center; }
.tarifs th, .tarifs td { padding: 20px 10px; font-weight: 500; }
.tarifs thead th, .tarifs thead td { background: var(--ciel); vertical-align: top; height: 104px; }
.tarifs tbody th { background: var(--orange); font-size: 15px; font-weight: 600; }
.tarifs thead td { width: 21%; }
.tarifs tbody tr { border-top: 1px solid #333; height: 108px; }
.tarifs .notes { border: 1px solid #333; border-top: 0; padding: 10px; text-align: center; font-size: 13px; }
.tarifs .notes p { padding-bottom: 10px; }
.paiement { padding-top: 20px; font-size: 13px; }

/* ---------- Réservation ---------- */
.titre-boite { box-shadow: var(--ombre); padding: 29px 10px 19px; }
.formulaire h2 { font-size: 20px; padding-bottom: 16px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 19px 19px; }
.champs .large { grid-column: 1 / -1; }
.champs p { padding: 0; }
.champs input, .champs textarea, .verif input {
  width: 100%; padding: 16px; border: 0; border-radius: 0; background: #fff; color: var(--marine);
  font: 400 14px Roboto, Helvetica, Arial, sans-serif; box-shadow: rgba(56, 182, 255, .5) 2px 7px 11px;
}
.champs textarea { height: 150px; resize: vertical; }
.envoi { display: flex; justify-content: flex-end; align-items: center; gap: 18px; margin-top: 10px; }
.verif { display: flex; align-items: center; gap: 8px; padding: 0; white-space: nowrap; }
.envoi { flex-wrap: wrap; }
.verif input { width: 50px; padding: 16px 6px; text-align: center; }
.envoi .bouton { color: var(--marine); border-color: var(--marine); }
.message-envoi { margin-top: 12px; font-weight: 600; }
.message-envoi.erreur { color: #c00; }
.mention-rgpd { margin-top: 29px; font-size: 13px; }
.coordonnees > div { box-shadow: rgba(56, 182, 255, .5) 6px 6px 18px; padding: 10px 10px 14px; text-align: center; margin-bottom: 29px; }
.coordonnees h2 { font-size: 20px; padding-bottom: 10px; }
.coordonnees p { padding-bottom: 6px; }
.coordonnees a { color: var(--marine); }
.plan { border: 1px solid var(--bleu-clair); text-align: center; padding: 10px 0 0; }
.plan .carte-google { width: 600px; max-width: 100%; height: 450px; margin: 0 auto; border: 0; display: block; }
.plan button.carte-google { background: #e9f4fb; color: var(--marine); font: inherit; cursor: pointer; }
.plan button.carte-google span { display: block; font-size: 12px; opacity: .75; }
.reservation-contenu { padding-bottom: 123px; }

/* ---------- Pages légales ---------- */
.legal { padding-top: 40px; padding-bottom: 150px; }
.legal h1 { font-size: 30px; padding-bottom: 20px; }
.legal h2 { font-size: 24px; padding: 14px 0 10px; }
.legal p, .legal li { font-size: 13px; }
.legal a { color: var(--bouton); }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 980px) {
  body { padding-top: 80px; }
  .entete { position: absolute; height: 80px; background: #fff; }
  .logo img { height: 71px; }
  .burger { display: block; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
  .burger span, .burger span::before, .burger span::after { display: block; width: 24px; height: 3px; margin: 0 auto; background: var(--ciel); position: relative; content: ""; }
  .burger span::before { position: absolute; top: -8px; } .burger span::after { position: absolute; top: 8px; }
  .menu {
    display: none; position: absolute; top: 80px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 5% 5%;
    background: #fff; border-top: 3px solid var(--ciel); box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
  }
  .menu.ouvert { display: flex; }
  .menu a { padding: 10px 5%; border-bottom: 1px solid rgba(0, 0, 0, .03); }
  .cols-2, .cols-3, .cols-3-2 { grid-template-columns: 1fr; gap: 30px; }
  .rangee { width: 80%; }
  .section { padding: 50px 0; }
  .heros-video { height: 450px; padding-top: 95px; }
  .heros-video .texte { width: 80%; margin: 0 auto; }
  .heros-video h1 { font-size: 24px; }
  .heros-video p { font-size: 9.6px; text-align: center; }
  .heros-photo { height: 964px; }
  .heros-photo.camping { height: 940px; }
  .heros-photo.reservation { height: 724px; }
  .telephone-masque { display: none; }
  .famille h2 { padding-bottom: 20px; }
  .cap .cols-3 { gap: 50px; padding: 0 2%; }
  .pastilles { grid-template-columns: 1fr; gap: 12px; }
  .animations .photos { margin-left: 0; }
  .animations .photos img:last-child { margin: 12px 0 0; }
  /* Tableau des tarifs : un bloc par mobil-home */
  .tarifs table, .tarifs tbody, .tarifs tr, .tarifs th, .tarifs td { display: block; width: 100%; border: 0; height: auto; }
  .tarifs table { border: 0; }
  .tarifs thead { display: none; }
  .tarifs tbody tr { margin-bottom: 20px; border: 1px solid #333; height: auto; }
  .tarifs tbody th { padding: 40px 10px; font-size: 18px; font-weight: 500; }
  .tarifs td { background: var(--bleu-clair); padding: 10px 0; border-top: 1px solid #333; font-size: 14px; }
  .tarifs td::before { content: attr(data-mois); display: block; padding-bottom: 14px; }
  .tarifs .notes { border-top: 1px solid #333; }
  .pied .logo-rond { display: none; }
  .pied { padding: 45px 0 20px; background-image: url(/images/pied-de-page-pins-960.webp); }
  .pied nav ul { flex-direction: column; gap: 2px; }
  .pied .apropos ul { position: static; display: block; width: auto; background: none; box-shadow: none; padding: 0; text-align: center; }
  .pied .apropos > span { display: none; }
  .pied .apropos ul a { color: #fff; text-shadow: 0 0 6px rgba(0, 0, 0, .55); font-size: 16px; padding: 0; }
  .legal { padding-top: 30px; }
}
@media (max-width: 560px) {
  .champs { grid-template-columns: 1fr; }
}