/* ==================== RESET & TOKENS ==================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  /* Couleurs */
  --green-950:#0C2018;
  --green-900:#123528;   /* footer, bouton principal */
  --green-800:#17503A;   /* vert primaire (bandeau pro, icônes) */
  --green-700:#1E6147;
  --green-600:#2E7D5B;
  --green-200:#CFE3D4;
  --green-100:#E2EFE5;
  --green-50:#F1F7F2;
  --gold-600:#B8923F;
  --gold-500:#C9A24B;    /* CTA pro, ornements */
  --cream:#F5EFE2;       /* fond témoignages */
  --cream-2:#F3EBD9;     /* bas du héro */
  --sand:#FAF6EE;        /* fond section villes */
  --paper:#FCFAF4;       /* fond section voyage */
  --ink:#22302A;
  --muted:#69766F;
  --line:#E6E1D6;
  --line-2:#EEEAE0;
  /* Rayons & ombres */
  --r-sm:10px; --r-md:14px; --r-lg:18px;
  --sh-sm:0 1px 2px rgba(18,42,32,.05),0 4px 14px rgba(18,42,32,.06);
  --sh-md:0 8px 28px rgba(18,42,32,.12);
  /* Typo */
  --serif:'Lora',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
body{font-family:var(--sans);font-size: 16px;color:var(--ink);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
input{font:inherit;border:0;outline:none;background:transparent;width:100%;color:var(--ink)}
:focus-visible{outline:2px solid var(--green-600);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.container{max-width:1180px;margin-inline:auto;padding-inline:24px}
.section{padding:68px 0}
h1,h2,h3{font-family:var(--serif);color:var(--green-900);font-weight:600;line-height:1.2}
.section-head{text-align:center;max-width:660px;margin:0 auto 42px}
.section-head h2{font-size:clamp(25px,3.1vw,31px)}
.section-head p{color:var(--muted);margin-top:10px;font-size: 16px}

/* Liens & boutons */
.link-more{color:var(--green-700);font-weight:600;font-size: 16px;white-space:nowrap}
.link-more:hover{text-decoration:underline;text-underline-offset:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size: 16px;border-radius:var(--r-sm);padding:12px 20px;transition:background .18s,border-color .18s,color .18s,transform .18s}
.btn-primary{background:var(--green-900);color:#fff}
.btn-primary:hover{background:var(--green-800)}
.btn-gold{background:var(--gold-500);color:var(--green-950)}
.btn-gold:hover{background:var(--gold-600)}
.btn-pill{display:inline-flex;gap:8px;align-items:center;border:1.5px solid var(--green-600);color:var(--green-800);border-radius:999px;padding:9px 16px;font-size: 16px;font-weight:600;background:#fff;transition:background .15s}
.btn-pill:hover{background:var(--green-50)}
.icon{width:18px;height:18px;flex:none}
.icon-sm{width:15px;height:15px;flex:none}

/* ==================== PLACEHOLDERS IMAGES ==================== */
/* Chaque .ph = image à remplacer (voir attribut data-img). */
.ph{position:relative;display:grid;place-items:center;color:rgba(255,255,255,.88);overflow:hidden}
.ph>svg{width:32px;height:32px;opacity:.85;position:relative;z-index:1}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.16));pointer-events:none}
.ph-resto{background:linear-gradient(140deg,#5A3A28,#9A6A43)}
.ph-boucherie{background:linear-gradient(140deg,#7E3030,#BE5A4A)}
.ph-mosquee{background:linear-gradient(140deg,#33627E,#7FAECB)}
.ph-epicerie{background:linear-gradient(140deg,#4E6B36,#8FAF62)}
.ph-cabinet{background:linear-gradient(140deg,#3C516B,#7C93AC)}
.ph-paris{background:linear-gradient(150deg,#2F4360,#7E97BB)}
.ph-londres{background:linear-gradient(150deg,#40465A,#8C96A8)}
.ph-caire{background:linear-gradient(150deg,#8A5A2B,#D3AC63)}
.ph-casa{background:linear-gradient(150deg,#2C6357,#6FA894)}
.ph-dubai{background:linear-gradient(150deg,#1F4F63,#5FA3B8)}
.ph-istanbul{background:linear-gradient(150deg,#4E3F63,#9C86B6)}
.ph-manger{background:linear-gradient(140deg,#6E4423,#B98A4C)}
.ph-acheter{background:linear-gradient(140deg,#8A6A34,#CBA96A)}
.ph-pro{background:linear-gradient(140deg,#33475F,#7A90A8)}
.ph-travel{background:linear-gradient(160deg,#27506B 0%,#4E7A8C 46%,#C58A54 100%)}
.ph-travel .skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:38%;opacity:.9}

/* ==================== HEADER ==================== */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-2)}
.header-in{display:flex;align-items:center;gap:26px;height:72px}
.brand{display:flex;align-items:center;gap:10px}
.brand .orn{width:34px;height:34px;flex:none;color:var(--gold-500)}
.brand-name{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--green-900);line-height:1.05}
.brand-tag{font-size: 12.5px;color:var(--muted);margin-top:2px}
.main-nav{display:flex;gap:26px}
.main-nav a{font-size: 16px;font-weight:500;color:#3D4A44;transition:color .15s}
.main-nav a:hover{color:var(--green-800)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang{display:flex;align-items:center;gap:6px;font-size: 16px;font-weight:500;color:#3D4A44;padding:8px 10px;border-radius:8px}
.lang:hover{background:var(--green-50)}
.lang .icon-sm{width:16px;height:16px}
.btn-login{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 16px;font-size: 16px;font-weight:600;background:#fff}
.btn-login:hover{border-color:var(--green-600);color:var(--green-800)}
.header-cta{padding:11px 18px;font-size: 16px}
.burger{display:none;width:42px;height:42px;place-items:center;border-radius:10px;color:var(--green-900)}
.burger:hover{background:var(--green-50)}
.mobile-nav{display:none;border-top:1px solid var(--line-2);background:#fff;padding:14px 24px 20px}
.mobile-nav a{display:block;padding:11px 4px;font-weight:600;font-size: 16px;color:var(--ink);border-bottom:1px solid var(--line-2)}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav[data-open="true"]{display:block}

/* ==================== HERO ==================== */
.hero{position:relative;background:linear-gradient(180deg,#F8F3E7,var(--cream-2));overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='none' stroke='%23E3D3B2' stroke-width='1'%3E%3Crect x='25' y='25' width='34' height='34'/%3E%3Cpolygon points='42,18 66,42 42,66 18,42'/%3E%3C/g%3E%3C/svg%3E")}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr);align-items:center;min-height:520px;padding:60px 0 64px}
.hero-copy{max-width:610px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:#E5F0E2;border:1px solid #D0E3CB;color:var(--green-800);font-size: 12.5px;font-weight:700;letter-spacing:.06em;padding:8px 15px;border-radius:999px;text-transform:uppercase}
.hero-badge .icon-sm{width:14px;height:14px}
.hero h1{font-size:clamp(31px,4.5vw,45px);margin:20px 0 16px}
.hero-sub{color:#55635C;font-size:16px;max-width:520px}
.hero-art{position:relative;height:100%;min-height:380px}
.hero-art svg{position:absolute;right:-44px;bottom:-8px;width:min(560px,108%);height:auto}
/* Barre de recherche */
.search-card{margin-top:28px;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-md);padding:10px;display:grid;grid-template-columns:1.15fr 1fr auto;align-items:center;max-width:660px;position:relative;z-index:2}
.search-field{display:flex;align-items:center;gap:12px;padding:6px 14px;min-width:0}
.search-field + .search-field{border-left:1px solid var(--line-2)}
.f-icon{color:var(--green-700);flex:none;width:19px;height:19px}
.f-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.f-label{font-size: 16px;font-weight:700;color:var(--green-900)}
.f-body input{font-size: 16px;padding:0}
.f-body input::placeholder{color:#9AA59E}
.search-card .btn-primary{height:52px;border-radius:12px;padding:0 26px;margin-left:6px}
.popular{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:18px}
.popular>span{font-size: 16px;color:var(--muted);margin-right:2px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size: 16px;font-weight:500;color:#3D4A44;transition:border-color .15s,color .15s}
.chip:hover{border-color:var(--green-600);color:var(--green-800)}

/* ==================== CATÉGORIES ==================== */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.cat-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);padding:26px 14px 20px;text-align:center;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;flex-direction:column;align-items:center}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--green-200)}
.cat-icon{width:58px;height:58px;border-radius:50%;background:var(--green-800);color:#F2ECD9;display:grid;place-items:center;margin-bottom:14px;box-shadow:0 0 0 6px var(--green-50)}
.cat-icon svg{width:26px;height:26px}
.cat-card h3{font-family:var(--sans);font-size: 16px;font-weight:700;color:var(--ink)}
.cat-card p{font-size: 16px;color:var(--muted);margin:6px 0 12px;flex:1}

/* ==================== PRÈS DE VOUS ==================== */
.split-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.split-head h2{font-size:23px;display:flex;align-items:center;gap:10px}
.split-head h2 .icon{color:var(--green-700);width:22px;height:22px}
.split-head .sub{color:var(--muted);font-size: 16px;margin-top:6px}
.head-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.link-plain{font-size: 16px;font-weight:600;color:#3D4A44;text-decoration:underline;text-underline-offset:3px}
.link-plain:hover{color:var(--green-800)}
.carousel{position:relative}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:226px;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.place{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;scroll-snap-align:start;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s}
.place:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.place .ph{height:140px}
.place-body{padding:13px 14px 15px}
.place-name{display:flex;align-items:center;gap:6px;font-weight:700;font-size: 16px;color:var(--ink)}
.badge-check{color:var(--green-600);width:15px;height:15px;flex:none}
.place-type{font-size: 16px;color:var(--muted);margin-top:2px}
.place-rate{display:flex;align-items:center;gap:5px;font-size: 16px;margin-top:9px}
.place-rate strong{font-size: 16px}
.place-rate .count{color:var(--muted)}
.star{color:#E4A93C;width:14px;height:14px;flex:none}
.place-loc{display:flex;align-items:center;gap:5px;font-size: 16px;color:var(--muted);margin-top:6px}
.place-loc .icon-sm{width:13px;height:13px}
.place-open{font-size: 16px;margin-top:6px}
.place-open .ok{color:var(--green-600);font-weight:700}
.place-open .till{color:var(--muted)}
.car-btn{position:absolute;top:44%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:var(--sh-md);display:grid;place-items:center;color:var(--green-900);z-index:3;border:1px solid var(--line-2);transition:color .15s}
.car-btn:hover{color:var(--green-600)}
.car-prev{left:-18px}
.car-next{right:-18px}
.center-link{text-align:center;margin-top:24px}

/* ==================== VILLES ==================== */
.s-villes{background:var(--sand)}
.city-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.city{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s;display:block}
.city:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.city .ph{height:104px}
.city-body{display:flex;align-items:center;gap:9px;padding:11px 13px}
.flag{font-size:18px;line-height:1}
.city-name{font-weight:700;font-size: 16px;line-height:1.2}
.city-country{font-size: 12.5px;color:var(--muted)}

/* ==================== BESOINS ==================== */
.needs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.need{display:flex;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s}
.need:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.need .ph{width:116px;flex:none}
.need-body{padding:18px 18px 16px;display:flex;flex-direction:column}
.need-body h3{font-family:var(--sans);font-size: 16px;font-weight:700;color:var(--ink)}
.need-body p{font-size: 16px;color:var(--muted);margin:6px 0 10px;flex:1}

/* ==================== BANDEAU PRO ==================== */
.pro{background:var(--green-800);color:#fff;position:relative;overflow:hidden}
.pro::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.05' stroke-width='1'%3E%3Crect x='25' y='25' width='34' height='34'/%3E%3Cpolygon points='42,18 66,42 42,66 18,42'/%3E%3C/g%3E%3C/svg%3E")}
.pro-in{position:relative;display:grid;grid-template-columns:1.1fr 1.35fr auto;gap:40px;align-items:center;padding:42px 0}
.pro-lead{display:flex;gap:16px}
.pro-lead .orn{flex:none;width:44px;height:44px;color:var(--gold-500)}
.pro-lead h2{color:#fff;font-size:21px;line-height:1.3}
.pro-lead p{color:#C8DCCC;font-size: 16px;margin-top:8px;max-width:340px}
.pro-list{display:grid;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:13px 30px}
.pro-list li{display:flex;gap:9px;align-items:flex-start;font-size: 16px;color:#EAF2EB}
.pro-list .icon-sm{color:#9CC7A8;margin-top:1px;width:17px;height:17px}
.pro-cta{display:flex;flex-direction:column;align-items:center;gap:12px}
.pro-cta .btn-gold{padding:13px 22px}
.link-light{color:#D8E8DC;font-size: 16px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.link-light:hover{color:#fff}

/* ==================== POURQUOI ==================== */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.why-icon{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--green-200);background:var(--green-50);color:var(--green-700);display:grid;place-items:center}
.why-icon svg{width:24px;height:24px}
.why h3{font-family:var(--sans);font-size: 16px;font-weight:700;margin:14px 0 8px;color:var(--ink)}
.why p{font-size: 16px;color:var(--muted)}

/* ==================== VOYAGE ==================== */
.s-voyage{background:var(--paper)}
.travel-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.travel-eyebrow{font-size: 16px;font-weight:700;color:var(--green-700)}
.travel h2{font-size:clamp(25px,3vw,32px);margin:10px 0 14px}
.travel-in>div>p{color:var(--muted);font-size: 16px;max-width:430px}
.travel-in .btn{margin-top:24px}
.travel-media{position:relative}
.ph-travel{height:340px;border-radius:var(--r-lg)}
.travel-card{position:absolute;top:22px;right:22px;width:248px;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-md);padding:16px 16px 14px}
.travel-card h3{font-family:var(--sans);font-size: 16px;font-weight:700;margin-bottom:8px;color:var(--ink)}
.travel-card li{display:flex;align-items:center;gap:9px;font-size: 16px;color:#3D4A44;padding:7px 0;border-bottom:1px solid var(--line-2)}
.travel-card li:last-of-type{border-bottom:0}
.travel-card .icon-sm{color:var(--green-700)}
.travel-card .link-more{display:inline-block;margin-top:9px}

/* ==================== TÉMOIGNAGES ==================== */
.s-testi{background:var(--cream)}
.testi-in{display:grid;grid-template-columns:225px repeat(3,1fr);gap:20px;align-items:start}
.testi-head h2{font-size:24px;line-height:1.3}
.testi-head p{font-size: 16px;color:var(--muted);margin-top:8px}
.testi{background:#fff;border-radius:var(--r-md);padding:20px;box-shadow:var(--sh-sm);border:1px solid #EDE6D5}
.stars{display:flex;gap:3px}
.testi>p{font-size: 16px;color:#3D4A44;margin:12px 0 16px;line-height:1.6}
.testi-who{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size: 16px;flex:none}
.av-1{background:linear-gradient(140deg,#B0793B,#D9A85E)}
.av-2{background:linear-gradient(140deg,#2E7D5B,#5CA383)}
.av-3{background:linear-gradient(140deg,#6E4E8A,#9C7BB8)}
.testi-who span{font-size: 16px;font-weight:600}

/* ==================== FAQ ==================== */
.s-faq h2{font-size:22px;margin-bottom:22px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
.faq-col{display:grid;gap:12px;align-content:start}
.faq-item{border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left;padding:15px 18px;font-size: 16px;font-weight:600;color:var(--ink)}
.faq-q .plus{flex:none;color:var(--muted);transition:transform .2s;width:16px;height:16px}
.faq-item.open .plus{transform:rotate(45deg);color:var(--green-700)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 18px;color:var(--muted);font-size: 16px;line-height:1.65}
.faq-item.open .faq-a{padding-bottom:16px}

/* ==================== FOOTER ==================== */
.site-footer{background:var(--green-900);color:#D7E4DA}
.footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1.15fr 1.1fr .85fr 1.3fr;gap:30px;padding:54px 0 40px}
.f-brand .brand-name{color:#fff}
.f-brand .brand .orn{color:var(--gold-500)}
.f-brand>p{font-size: 16px;color:#A8C5B1;margin:14px 0 16px;max-width:230px;line-height:1.6}
.socials{display:flex;gap:9px}
.socials a{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:#DCEADF;transition:background .15s,color .15s}
.socials a:hover{background:rgba(255,255,255,.1);color:#fff}
.socials svg{width:15px;height:15px}
.f-col h3{font-family:var(--sans);font-size: 12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.f-col li{margin-bottom:9px}
.f-col a{font-size: 16px;color:#B9D1C0;transition:color .15s}
.f-col a:hover{color:#fff}
.f-col .link-gold{color:#E0C687;font-weight:600}
.f-news p{font-size: 16px;color:#A8C5B1;margin-bottom:12px;line-height:1.6}
.news-form{display:flex;gap:4px;background:#fff;border-radius:10px;padding:4px}
.news-form input{padding:8px 12px;font-size: 16px}
.news-form button{flex:none;width:38px;height:38px;border-radius:8px;background:var(--gold-500);color:var(--green-950);display:grid;place-items:center;transition:background .15s}
.news-form button:hover{background:var(--gold-600)}
.news-form svg{width:16px;height:16px}
.news-ok{display:none;font-size: 16px;color:#BFE3C9;margin-top:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size: 16px;color:#9CBAA5}
.footer-bottom .legal{display:flex;gap:22px;flex-wrap:wrap}
.footer-bottom a:hover{color:#fff}
.footer-lang{display:flex;align-items:center;gap:6px}
.footer-lang svg{width:14px;height:14px}

/* ==================== RESPONSIVE ==================== */
@media (max-width:1080px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .city-grid{grid-template-columns:repeat(3,1fr)}
  .needs-grid{grid-template-columns:1fr;max-width:620px;margin:0 auto}
  .pro-in{grid-template-columns:1fr;gap:28px}
  .pro-cta{flex-direction:row;justify-content:flex-start}
  .why-grid{grid-template-columns:repeat(2,1fr);gap:32px 28px}
  .testi-in{grid-template-columns:1fr 1fr}
  .testi-head{grid-column:1/-1}
  .footer-grid{grid-template-columns:repeat(3,1fr);gap:34px 30px}
  .hero-in{grid-template-columns:1fr;padding:52px 0 0;min-height:auto}
  .hero-art{min-height:280px;margin-top:16px}
  .hero-art svg{position:relative;right:auto;bottom:-10px;display:block;margin:0 auto;width:min(480px,92%)}
}
@media (max-width:860px){
  .main-nav,.btn-login,.header-actions .lang{display:none}
  .burger{display:grid}
  .search-card{grid-template-columns:1fr}
  .search-field + .search-field{border-left:0;border-top:1px solid var(--line-2)}
  .search-card .btn-primary{width:100%;margin:8px 0 0}
  .car-prev{left:4px}
  .car-next{right:4px}
  .faq-grid{grid-template-columns:1fr;gap:12px}
  .travel-in{grid-template-columns:1fr;gap:30px}
  .travel-card{right:14px;top:14px}
  .testi-in{grid-template-columns:1fr}
  .section{padding:56px 0}
}
@media (max-width:640px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .city-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .pro-list{grid-auto-flow:row;grid-template-rows:auto}
  .pro-cta{flex-direction:column;align-items:flex-start}
  .header-cta{display:none}
}

/* Pays repliés sous la grille principale. */
.pays-plus{margin-top:22px;text-align:center}
.pays-plus summary{cursor:pointer;list-style:none;display:inline-block}
.pays-plus summary::-webkit-details-marker{display:none}
.pays-plus__liste{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}

/* La vignette pays porte une photo quand il y en a une. */
.city .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.city .ph{background:linear-gradient(140deg,#1E4A40,#2F6B5C)}
.city-body{justify-content:flex-start}

/* Photo de vignette dans le carrousel. Le voile de .ph::after passe
   par-dessus : il unifie des photos prises à toutes les heures, dont
   ces salons éclairés au plafonnier. */
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph--photo::after{display:none}

/* Lien d évitement. Il vivait dans app.css, que l accueil ne charge pas :
   il s affichait donc en clair en haut à gauche. Invisible à l écran,
   il reste atteignable à la tabulation, ce qui est tout son intérêt. */
.aw-evitement{position:absolute;left:-9999px;background:var(--green,#123C35);color:#fff;padding:12px 18px;z-index:100;border-radius:8px}
.aw-evitement:focus{left:12px;top:12px}

/* Sept familles ne tombent juste sur aucune grille de six : la dernière
   restait seule sur sa ligne. En flex, la ligne incomplète se centre
   toute seule, et le bloc reste correct quel que soit le nombre. */
.cat-grid{display:flex;flex-wrap:wrap;justify-content:center}
.cat-grid>*{flex:0 1 calc(25% - 12px)}
@media (max-width:900px){ .cat-grid>*{flex:0 1 calc(33.333% - 11px)} }
@media (max-width:640px){ .cat-grid>*{flex:0 1 calc(50% - 8px)} }

/* ---------- Lisibilité sur téléphone ----------
   Le gabarit réduisait le corps du texte en même temps que la largeur.
   Or c est là qu on lit le plus mal : écran tenu à bout de bras, souvent
   en plein soleil. Les paragraphes qu on lit vraiment — réponses de FAQ,
   descriptions de rubriques, pied de page — reviennent à 15,5 px, la
   limite en dessous de laquelle un texte suivi devient pénible. */
@media (max-width:640px){
  .faq-a p,
  .need-body p,
  .why p,
  .f-brand p,
  .pro-lead p,
  .seo-text p,
  .sec-sub{ font-size: 16px; line-height:1.6; }

  /* Une pastille de 35 px se rate au doigt une fois sur trois. */
  .chip{ min-height:42px; display:inline-flex; align-items:center; }
}

/* La barre de recherche est le premier geste du visiteur : sous 16 px,
   iPhone zoome dès la première frappe et la page part de travers. */
@media (max-width:640px){
  .hero input, .hero select,
  input[type="search"], input[type="text"]{ font-size:16px; }
}

/* ---------- FAQ ----------
   L accordéon dépendait d un script qui ne s attachait pas : les questions
   ne s ouvraient plus du tout. <details> fait le même travail nativement,
   fonctionne sans JavaScript et reste accessible au clavier. */
.faq-item > summary{list-style:none;cursor:pointer}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item[open] > summary .plus{transform:rotate(45deg);color:var(--green-700)}
.faq-item[open] .faq-a{max-height:none;padding-bottom:16px}
.faq-item > summary:focus-visible{outline:2px solid var(--green-700);outline-offset:2px;border-radius:var(--r-sm)}

/* ---------- Hero centré ----------
   Le gabarit d origine posait le texte à gauche et l illustration à
   droite. En colonne unique centrée, le regard descend en ligne droite
   du titre à la barre de recherche — qui est le seul geste attendu ici.
   La mosquée passe derrière, en filigrane : elle habille sans disputer
   l attention au champ de saisie. */
.hero-in{grid-template-columns:1fr;min-height:auto;padding:64px 0 60px;justify-items:center;text-align:center}
.hero-copy{max-width:760px;display:flex;flex-direction:column;align-items:center}
.hero-sub{max-width:600px}
.hero .search-card{margin-left:auto;margin-right:auto;text-align:left;width:100%}
.popular{justify-content:center}

.hero-art{
  position:absolute;inset:0;min-height:0;height:100%;
  pointer-events:none;opacity:.34;z-index:0;
}
.hero-art svg{
  position:absolute;right:auto;left:50%;bottom:-6%;
  transform:translateX(-50%);
  width:min(880px,116%);
}
.hero-in > *{position:relative;z-index:1}

@media (max-width:900px){
  .hero-art{opacity:.26}
  .hero-art svg{width:min(620px,150%);bottom:-4%}
}
@media (max-width:640px){
  .hero-in{padding:44px 0 46px}
  .hero .search-card{grid-template-columns:1fr}
  .hero .search-field + .search-field{border-left:none;border-top:1px solid var(--line-2)}
  .hero .search-card .btn-primary{margin:8px 0 0;width:100%}
}

/* ---------- Photos de rubrique ----------
   Les tuiles portaient une pastille ronde et un aplat de couleur : sept
   pastilles vertes alignées ne distinguaient rien. Une photo dit de quoi
   parle la rubrique avant même qu on lise le titre. */
.cat-card{padding:0;text-align:left;align-items:stretch;overflow:hidden}
.cat-img{width:100%;height:132px;object-fit:cover;display:block;background:var(--cream-2)}
.cat-body{display:flex;flex-direction:column;flex:1;padding:15px 16px 16px;gap:5px}
.cat-titre{font-family:var(--sans);font-size: 16px;font-weight:700;color:var(--ink)}
.cat-desc{font-size: 16px;color:var(--muted);flex:1}
.cat-body .link-more{margin-top:6px}

/* Le voile chaud unifie des photos venues de sources différentes : sans
   lui, la grille ressemble à une planche de banque d images. */
.cat-card{position:relative}
.cat-img{transition:transform .4s ease}
.cat-card:hover .cat-img{transform:scale(1.04)}

.need-img{width:132px;flex:none;height:auto;object-fit:cover;display:block;align-self:stretch}

@media (max-width:640px){
  .cat-img{height:118px}
  .need-img{width:104px}
}

/* ---------- Bloc voyage ----------
   La silhouette de ville dessinée à la main est remplacée par une photo.
   La carte blanche flottait à 22 px du bord et sortait du cadre sur les
   écrans intermédiaires : elle est maintenant contenue, et passe sous la
   photo en dessous de 900 px plutôt que de la recouvrir. */
.travel-media{position:relative;border-radius:var(--r-lg);overflow:visible}
.travel-img{
  width:100%;height:340px;object-fit:cover;display:block;
  border-radius:var(--r-lg);background:var(--cream-2);
}
.travel-card{max-width:calc(100% - 44px)}

@media (max-width:900px){
  .travel-img{height:260px}
  .travel-card{position:static;width:auto;max-width:none;margin-top:-34px;margin-left:18px;margin-right:18px}
}
@media (max-width:640px){
  .travel-img{height:210px}
}

/* La puce « En ligne » se distingue des mots-clés : elle ne cherche pas
   un métier, elle ouvre une autre façon de trouver. */
.chip--ligne{display:inline-flex;align-items:center;gap:6px;border-color:var(--green-600);color:var(--green-800);font-weight:600}
.chip--ligne .icon-sm{width:13px;height:13px;color:var(--green-700)}

/* ---------- Barre de recherche ----------
   Le placeholder se coupait en plein mot (« Restaurant halal, avocat, b »)
   et le gris du texte saisi passait à peine le seuil de contraste. Barre
   élargie, corps augmenté, gris assombri : c est le champ le plus utilisé
   du site, il doit se lire sans effort. */
.hero .search-card{max-width:840px;padding:12px}
.hero .search-field{padding:8px 16px;gap:14px}
.hero .f-label{font-size: 16px}
.hero .f-body input{font-size: 16px;color:var(--ink)}
.hero .f-body input::placeholder{color:#6E7B75;opacity:1}
.hero .search-card .btn-primary{height:56px;font-size: 16px}
.hero .f-icon{width:21px;height:21px}

@media (max-width:640px){
  .hero .search-card{max-width:none}
  .hero .f-body input{font-size:16px}
}

/* ---------- Ajustements après le passage à 16 px ----------
   Le texte agrandi ne rentrait plus dans les cartes « besoin » : la photo
   leur prenait 132 px de large. Elle en cède vingt, et la carte respire. */
.need-img{width:112px}
.need-body{padding:14px 15px}
.need-body h3{font-size:16.5px;line-height:1.3}
.need-body p{font-size:16px;line-height:1.5}

/* Le pays sous le nom de ville se distingue maintenant par la couleur et
   la graisse, plus par une taille qui le rendait difficile à lire. */
.city-country{font-size:16px;color:var(--muted);font-weight:400}
.city-name{font-weight:700}

@media (max-width:900px){
  .needs-grid{grid-template-columns:1fr}
  .need-img{width:150px}
}

/* Sur téléphone, la photo à gauche ne laisse plus assez de place au texte
   agrandi : « Faire appel à un professionnel » débordait. La carte passe
   en colonne, la photo en bandeau. */
@media (max-width:640px){
  .need{flex-direction:column}
  .need-img{width:100%;height:150px;align-self:auto}
  .need-body{padding:15px 16px 17px}
}

/* Les six recherches populaires tiennent sur une ligne : écarts et
   rembourrage resserrés, et la rangée ne se coupe qu’en dessous de la
   largeur où elle ne rentrerait plus honnêtement. */
.popular{flex-wrap:nowrap;gap:7px;overflow-x:auto;scrollbar-width:none;justify-content:center}
.popular::-webkit-scrollbar{display:none}
.popular>span{flex:none}
.popular .chip{flex:none;padding:7px 13px;white-space:nowrap}

@media (max-width:760px){
  .popular{flex-wrap:wrap;justify-content:center}
}
/* La rangée était bornée à la largeur du bloc de texte (760 px) et la
   dernière puce sortait du cadre. Elle suit la barre de recherche. */
.hero .popular{max-width:880px;width:100%;margin-left:auto;margin-right:auto}
/* C'est .hero-copy qui bornait à 760 px. Le bloc s'élargit, le titre garde
   sa mesure de lecture. */
.hero .hero-copy{max-width:900px}
.hero h1{max-width:780px}

/* ---------- Pied de page ----------
   Les liens s'enchaînaient sur la même ligne : le CSS prévoyait des <li>,
   le gabarit pose des <a> directs. Et la grille annonçait six colonnes
   pour cinq blocs — d'où le vide sur la droite. */
.footer-grid{grid-template-columns:1.5fr repeat(4,1fr)}
.f-col a{display:block;margin-bottom:9px}
.f-col a:last-child{margin-bottom:0}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
}

/* ---------- D'où viennent les adresses ----------
   Trois cartes qui expliquent et filtrent en même temps : lire la
   différence puis cliquer pour ne voir que celles-là. */
.prov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prov-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);padding:20px 20px 18px;display:flex;flex-direction:column;gap:10px;transition:transform .18s,box-shadow .18s,border-color .18s}
.prov-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.prov-card p{color:var(--muted);flex:1;line-height:1.55}
.prov-badge{display:inline-flex;align-self:flex-start;padding:5px 12px;border-radius:999px;font-weight:700;font-size:16px}
.prov-card--recommande .prov-badge{background:var(--green-50);color:var(--green-800);border:1px solid var(--green-200)}
.prov-card--recommande:hover{border-color:var(--green-600)}
.prov-card--inscrit .prov-badge{background:transparent;color:var(--gold-700,#8A6A34);border:1px solid var(--gold-500,#C6A15B)}
.prov-card--repertorie .prov-badge{background:transparent;color:var(--muted);border:1px dashed var(--line)}
.prov-note{margin:20px auto 0;max-width:720px;text-align:center;color:var(--muted);line-height:1.6}

@media (max-width:900px){ .prov-grid{grid-template-columns:1fr} }