/*
Theme Name: Jardin Océan
Description: Thème enfant de Hello Elementor pour Au jardin près de l'océan. En-tête, pied de page et barre d'appel mobile.
Author: Esprit-Techno
Template: hello-elementor
Version: 1.0.0
Text Domain: jardin-ocean
*/

@font-face{font-family:"Nunito";font-weight:700;font-style:normal;font-display:swap;src:url(assets/nunito-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-style:normal;font-display:swap;src:url(assets/nunito-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-style:normal;font-display:swap;src:url(assets/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:600;font-style:normal;font-display:swap;src:url(assets/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:700;font-style:normal;font-display:swap;src:url(assets/figtree-latin-700-normal.woff2) format("woff2")}

:root{
  --jo-sun:#F2B705; --jo-sun-ink:#2A1E05; --jo-sunlight:#FFF4CC;
  --jo-green:#2F5A10; --jo-green-dark:#1F3D09; --jo-leaf:#5E9A1F;
  --jo-ink:#22301A; --jo-muted:#4A5640; --jo-cream:#FBF8EF; --jo-sand:#F2EDDD;
  --jo-line:#ECE5D0; --jo-mint:#EEF3E4; --jo-white:#FFFFFF;
  --jo-radius:16px; --jo-radius-lg:24px;
  --jo-header-h:72px;
}

/* Base */
html{scroll-padding-top:calc(var(--jo-header-h) + 12px)}
body{margin:0;background:var(--jo-cream);color:var(--jo-ink);font-family:"Figtree",system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.elementor-heading-title{font-family:"Nunito","Figtree",sans-serif;font-weight:800;color:var(--jo-ink);line-height:1.15;margin:0}
h1,.elementor-widget-heading h1.elementor-heading-title{font-size:clamp(27px,5.2vw,48px)}
h2,.elementor-widget-heading h2.elementor-heading-title{font-size:clamp(21px,3.4vw,34px)}
h3,.elementor-widget-heading h3.elementor-heading-title{font-size:clamp(18px,2.2vw,21px)}
p{margin:0 0 .8em}
a{color:var(--jo-green)}
a:hover{color:var(--jo-green-dark)}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--jo-sun);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.jo-skip:focus{position:fixed;top:8px;left:8px;z-index:999;width:auto;height:auto;clip:auto;background:#fff;padding:10px 14px;border-radius:8px}
.jo-wrap{max-width:1240px;margin:0 auto;padding:0 16px;box-sizing:border-box}
.jo-icon{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Bandeau haut (ordinateur) */
.jo-topbar{display:none;background:var(--jo-ink);color:#E9E4D2;font-size:13px}
.jo-topbar .jo-wrap{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;min-height:36px}
.jo-topbar a{color:#FFFFFF}

/* En-tête */
.jo-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--jo-line)}
.admin-bar .jo-header{top:46px}
.jo-header__inner{display:flex;align-items:center;gap:10px;min-height:var(--jo-header-h)}
.jo-logo{display:block;flex-shrink:0;line-height:0}
.jo-logo img{height:56px;width:auto}
.jo-header__actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.jo-call{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 10px;border-radius:999px;font:700 14px "Figtree",sans-serif;text-decoration:none;box-sizing:border-box}
.jo-call--sun{background:var(--jo-sun);color:var(--jo-sun-ink)}
.jo-call--green{background:var(--jo-green);color:#FFFFFF}
.jo-call--sun:hover{color:var(--jo-sun-ink);filter:brightness(.96)}
.jo-call--green:hover{color:#FFFFFF;background:var(--jo-green-dark)}
.jo-call__label{display:none}
.jo-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:999px;background:var(--jo-sand);color:var(--jo-ink);cursor:pointer;padding:0}
.jo-burger .jo-icon--close{display:none}
.jo-burger[aria-expanded="true"] .jo-icon--menu{display:none}
.jo-burger[aria-expanded="true"] .jo-icon--close{display:block}

/* Menu (mobile : panneau plein écran) */
.jo-nav{display:none}
.jo-nav.is-open{display:block;position:fixed;left:0;right:0;bottom:0;top:var(--jo-header-h);z-index:49;background:var(--jo-cream);overflow-y:auto;padding:8px 16px 120px;box-sizing:border-box}
.admin-bar .jo-nav.is-open{top:calc(var(--jo-header-h) + 46px)}
.jo-menu{list-style:none;margin:0;padding:0}
.jo-menu a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--jo-line);font:800 19px "Nunito",sans-serif;color:var(--jo-ink);text-decoration:none}
.jo-menu .current-menu-item>a,.jo-menu .current_page_item>a{color:var(--jo-green)}
.jo-nav__extra{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.jo-nav__extra .jo-call{justify-content:space-between;min-height:54px;padding:0 18px;border-radius:12px;font-size:15px}
.jo-nav__extra .jo-call__label{display:inline}
body.jo-menu-open{overflow:hidden}

/* Pied de page */
.jo-footer{background:var(--jo-ink);color:#E9E4D2;padding:40px 0 116px;font-size:15px;line-height:1.7}
.jo-footer a{color:#E9E4D2}
.jo-footer a:hover{color:#FFFFFF}
.jo-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.jo-footer__logo img{height:72px;width:auto}
.jo-footer__title{display:block;font:700 13px "Figtree",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF;margin-bottom:6px}
.jo-footer ul{list-style:none;margin:0;padding:0}
.jo-footer__bottom{margin-top:28px;padding-top:18px;border-top:1px solid rgba(233,228,210,.2);font-size:13px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* Barre d'action mobile */
.jo-actionbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--jo-line);box-shadow:0 -4px 16px rgba(34,48,26,.08)}
.jo-actionbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:12px;font:700 13px "Figtree",sans-serif;text-decoration:none;text-align:center;line-height:1.1}
.jo-actionbar .is-sun{background:var(--jo-sun);color:var(--jo-sun-ink)}
.jo-actionbar .is-green{background:var(--jo-green);color:#FFFFFF}
.jo-actionbar .is-sand{background:var(--jo-sand);color:var(--jo-ink)}

/* ===== Composants utilisés dans Elementor ===== */
.e-con.jo-section{--padding-top:40px;--padding-bottom:40px;--padding-left:16px;--padding-right:16px}
.e-con.jo-section--tight{--padding-top:20px;--padding-bottom:20px}
.e-con.jo-section--mint{background:var(--jo-mint)}
.e-con.jo-row{--flex-direction:column;--gap:16px 16px;--row-gap:16px;--column-gap:16px}
.e-con.jo-grid{--display:grid;display:grid!important;grid-template-columns:1fr;gap:16px}
.e-con.jo-stack{--gap:12px 12px;--row-gap:12px}

/* Hero */
.e-con.jo-hero{--padding-top:340px;--padding-bottom:0;--padding-left:12px;--padding-right:12px;--justify-content:flex-end;background-size:cover;background-position:center}
.e-con.jo-hero--short{--padding-top:280px}
.e-con.jo-hero__card{background:#FFFFFF;border-radius:20px;--padding-top:20px;--padding-bottom:20px;--padding-left:18px;--padding-right:18px;--gap:12px;--row-gap:12px;box-shadow:0 12px 32px rgba(34,48,26,.16);margin-bottom:-24px;position:relative}
.jo-hero + .e-con{--padding-top:48px}
.jo-lead,.jo-lead p{font-size:17px;color:var(--jo-muted);line-height:1.5}
.jo-chip p,.jo-chip{display:inline-flex;align-items:center;gap:6px;margin:0;font:600 13px "Figtree",sans-serif;background:var(--jo-sunlight);color:var(--jo-ink);padding:6px 12px;border-radius:999px}
.elementor-widget.jo-chip{width:auto;max-width:100%;align-self:flex-start}
.jo-chips p{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.jo-chips span{font:600 13px "Figtree",sans-serif;background:var(--jo-mint);color:var(--jo-green);padding:6px 11px;border-radius:999px}

/* Boutons Elementor */
.jo-btn .elementor-button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:12px;font:700 16px "Figtree",sans-serif;background:var(--jo-green);color:#FFFFFF;border:1.5px solid var(--jo-green)}
.jo-btn .elementor-button:hover{background:var(--jo-green-dark);color:#FFFFFF}
.jo-btn--ghost .elementor-button{background:transparent;color:var(--jo-green)}
.jo-btn--ghost .elementor-button:hover{background:var(--jo-mint);color:var(--jo-green-dark)}
.jo-btn--sun .elementor-button{background:var(--jo-sun);border-color:var(--jo-sun);color:var(--jo-sun-ink)}
.jo-btn--sun .elementor-button:hover{background:#E0AA00;color:var(--jo-sun-ink)}
.jo-btn--full,.jo-btn--full .elementor-button{width:100%}
.e-con.jo-btns{--flex-direction:row;--flex-wrap:wrap;--justify-content:flex-start;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px}
.e-con.jo-btns>.elementor-widget{width:auto;max-width:100%}

/* Titre avec tournesol */
.jo-title-sun .elementor-heading-title{display:flex;align-items:center;gap:12px}
.jo-title-sun .elementor-heading-title::before{content:"";width:34px;height:34px;flex-shrink:0;border-radius:50%;background:url(../../uploads/2025/05/tournesol1.webp) center/cover no-repeat}

/* Cartes d'appel */
.jo-calls{display:grid;grid-template-columns:1fr;gap:10px}
.jo-callcard{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 18px;border-radius:16px;text-decoration:none}
.jo-callcard span{display:flex;flex-direction:column;line-height:1.25}
.jo-callcard small{font:700 15px "Figtree",sans-serif}
.jo-callcard strong{font:800 20px "Nunito",sans-serif}
.jo-callcard .jo-icon{width:28px;height:28px}
.jo-callcard--sun{background:var(--jo-sun);color:var(--jo-sun-ink)}
.jo-callcard--green{background:var(--jo-green);color:#FFFFFF}
.jo-callcard--sun:hover{color:var(--jo-sun-ink);filter:brightness(.96)}
.jo-callcard--green:hover{color:#FFFFFF;background:var(--jo-green-dark)}
.jo-callcard--light{background:#FFFFFF;color:var(--jo-ink);border:1.5px solid var(--jo-green)}
.jo-callcard--light:hover{background:var(--jo-mint);color:var(--jo-ink)}

/* Cartes hébergement */
a.e-con.jo-card,.e-con.jo-card{background:#FFFFFF;border:1px solid var(--jo-line);border-radius:18px;overflow:hidden;--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;--gap:0;--row-gap:0;color:var(--jo-ink);text-decoration:none;transition:box-shadow .2s,transform .2s}
a.e-con.jo-card:hover{box-shadow:0 10px 28px rgba(34,48,26,.12);transform:translateY(-2px)}
.jo-card__img img{width:100%;height:190px;object-fit:cover;display:block;border-radius:0}
.e-con.jo-card__body{--padding-top:16px;--padding-bottom:18px;--padding-left:18px;--padding-right:18px;--gap:6px;--row-gap:6px;flex-grow:1}
.jo-card__text,.jo-card__text p{font-size:15px;color:var(--jo-muted);line-height:1.45;margin:0}
.jo-card__price{margin-top:auto}
.jo-card__price p{margin:0;font:700 15px "Figtree",sans-serif;color:var(--jo-green)}

/* Encadrés */
.e-con.jo-box{border-radius:var(--jo-radius);--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;--gap:10px;--row-gap:10px}
.e-con.jo-box--sun{background:var(--jo-sunlight)}
.e-con.jo-box--mint{background:var(--jo-mint)}
.e-con.jo-box--white{background:#FFFFFF;border:1px solid var(--jo-line)}

/* Prix dans la colonne de réservation */
.jo-aside .elementor-widget-heading p.elementor-heading-title{font:800 34px/1.1 "Nunito",sans-serif;color:var(--jo-ink)}
.jo-aside .jo-checks ul{grid-template-columns:1fr!important}
.jo-aside .jo-note p{margin:0}

/* Photo de la page histoire, affichée en entier */
.jo-history-photo img{width:100%;height:auto;border-radius:20px;display:block;box-shadow:0 12px 32px rgba(34,48,26,.16)}
.e-con.jo-history-top{--padding-top:24px}

/* Listes */
.jo-checks ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.jo-checks li{position:relative;padding-left:28px;line-height:1.45}
.jo-checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--jo-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat}
.jo-tiles ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.jo-tiles li{background:#FFFFFF;border:1px solid var(--jo-line);border-radius:12px;padding:12px 14px;font-weight:600}

/* Tableaux de tarifs */
.jo-prices{overflow-x:auto;background:#FFFFFF;border:1px solid var(--jo-line);border-radius:16px}
.jo-prices table{width:100%;border-collapse:collapse;margin:0;font-size:15px;border:0}
.jo-prices th,.jo-prices td{padding:12px 14px;border:0;border-top:1px solid #F1ECDD;text-align:left;vertical-align:top;background:transparent}
.jo-prices thead th{background:#F6F2E4;border-top:0;font-weight:700;font-size:14px}
.jo-prices td.n,.jo-prices th.n{text-align:right;white-space:nowrap;font-weight:700}
.jo-prices tbody tr>*{background:transparent!important}
.jo-prices thead th.n{white-space:normal}
.jo-prices small{font-weight:400;color:var(--jo-muted)}
@media (max-width:639px){.jo-prices table{font-size:14px}.jo-prices th,.jo-prices td{padding:10px 8px}.jo-prices thead th{font-size:13px}}
.jo-note,.jo-note p{font-size:14px;color:var(--jo-muted)}

/* Galeries */
.jo-gallery .gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0!important}
.jo-gallery .gallery-item{margin:0!important;max-width:none!important;width:auto!important;padding:0!important}
.jo-gallery .gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:0!important}
.jo-gallery .gallery-caption{display:none}

/* Mosaïque région */
.jo-mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.jo-mosaic img{width:100%;height:150px;object-fit:cover;border-radius:16px;display:block}

/* Avis */
.jo-reviews{background:#FFFFFF;border-radius:16px;padding:16px;border:1px solid var(--jo-line)}

/* Carte au clic */
.jo-map{position:relative;border-radius:16px;overflow:hidden;background:var(--jo-mint);min-height:240px;display:flex;align-items:center;justify-content:center}
.jo-map button{min-height:50px;padding:0 20px;border-radius:12px;border:1.5px solid var(--jo-green);background:#FFFFFF;color:var(--jo-green);font:700 15px "Figtree",sans-serif;cursor:pointer}
.jo-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Formulaire de contact */
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 textarea,.wpcf7 select{width:100%;box-sizing:border-box;min-height:48px;padding:10px 14px;border:1.5px solid #D9D2BC;border-radius:10px;font:400 16px "Figtree",sans-serif;background:#FFFFFF}
.wpcf7 input[type=submit]{min-height:52px;padding:0 26px;border-radius:12px;border:0;background:var(--jo-green);color:#FFFFFF;font:700 16px "Figtree",sans-serif;cursor:pointer}

/* ===== Tablette ===== */
@media (min-width:640px){
  .jo-calls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .e-con.jo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jo-checks ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jo-tiles ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jo-gallery .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jo-mosaic img{height:200px}
}

/* ===== Ordinateur ===== */
@media (min-width:1024px){
  :root{--jo-header-h:92px}
  .jo-wrap{padding:0 32px}
  .jo-topbar{display:block}
  .admin-bar .jo-header{top:32px}
  .jo-logo img{height:72px}
  .jo-burger{display:none}
  .jo-nav,.jo-nav.is-open{display:block;position:static;padding:0;background:none;overflow:visible;flex:1}
  .jo-header__inner{gap:20px}
  .jo-menu{display:flex;flex-wrap:nowrap;gap:4px 20px;justify-content:center}
  .jo-menu a{min-height:44px;border:0;font:600 15px "Figtree",sans-serif;white-space:nowrap}
  .jo-menu a:hover{color:var(--jo-green)}
  .jo-menu .current-menu-item>a,.jo-menu .current_page_item>a{text-decoration:underline;text-decoration-color:var(--jo-sun);text-decoration-thickness:3px;text-underline-offset:8px}
  .jo-nav__extra{display:none}
  .jo-call{padding:0 16px;border-radius:12px}
  .jo-call__label{display:inline}
  .jo-actionbar{display:none}
  .jo-footer{padding-bottom:40px}
  .e-con.jo-section{--padding-top:72px;--padding-bottom:72px;--padding-left:32px;--padding-right:32px}
  .e-con.jo-section--tight{--padding-top:32px;--padding-bottom:32px}
  .e-con.jo-row{--flex-direction:row;--gap:40px 40px;--column-gap:40px;--align-items:center}
  .e-con.jo-row>.e-con,.e-con.jo-row>.elementor-widget{flex:1 1 0;min-width:0;width:auto}
  .e-con.jo-row--top{--align-items:flex-start}
  .e-con.jo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .e-con.jo-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .e-con.jo-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .e-con.jo-hero{--padding-top:48px;--padding-bottom:48px;--padding-left:48px;--padding-right:48px;--min-height:720px;--justify-content:flex-end;border-radius:28px;margin:24px 32px 0;max-width:1176px}
  .e-con.jo-hero--short{--min-height:600px}
  .e-con.jo-hero__card{max-width:580px;margin-bottom:0;--padding-top:32px;--padding-bottom:32px;--padding-left:32px;--padding-right:32px;--gap:16px}
  .jo-hero + .e-con{--padding-top:40px}
  .jo-calls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jo-card__img img{height:220px}
  .jo-gallery .gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
  .jo-mosaic img{height:220px}
  .jo-mosaic img:nth-child(2){margin-top:40px}
  .jo-mosaic img:nth-child(3){margin-top:-40px}
  .jo-map{min-height:360px}
  .e-con.jo-row>.e-con.jo-aside{flex:0 0 360px;position:sticky;top:120px}
}
@media (min-width:1024px) and (max-width:1279px){.jo-call__what{display:none}}
@media (min-width:1264px){.e-con.jo-hero{margin:24px auto 0}}
@media (min-width:1280px){.jo-menu{gap:4px 26px}.jo-menu a{font-size:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
