:root { --nuit:#081528; --marine:#0d2141; --bleu:#1232b6; --rouge:#e8392f; --or:#d6b25e; --sable:#efe6d3; --texte:#eef2f8; --doux:#a9b6cb; --ligne:rgba(255,255,255,.16); }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { background:var(--nuit); color:var(--texte); font:400 17px/1.6 Barlow,system-ui,sans-serif; }
body.zh { font-family:Barlow,"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif; }
img, video { display:block; width:100%; height:100%; object-fit:cover; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--or); outline-offset:3px; }
h1,h2,h3 { font-family:"Barlow Condensed",system-ui,sans-serif; font-weight:700; text-transform:uppercase; line-height:.95; letter-spacing:.005em; }
.zh h1, .zh h2, .zh h3 { line-height:1.15; letter-spacing:.04em; }
.cadre { width:min(1360px,100% - 48px); margin-inline:auto; }
.sur-titre { margin-bottom:18px; font:600 15px/1.3 "Barlow Condensed",sans-serif; letter-spacing:.24em; text-transform:uppercase; color:var(--or); }

/* En-tête */
header { position:absolute; inset:0 0 auto; z-index:20; }
.barre { display:flex; align-items:center; justify-content:space-between; gap:24px; height:92px; border-bottom:1px solid var(--ligne); }
.marque { display:flex; align-items:center; gap:12px; font:700 22px/1 "Barlow Condensed",sans-serif; letter-spacing:.08em; }
.marque img { width:52px; height:52px; }
nav { display:flex; align-items:center; gap:30px; font:600 16px/1 "Barlow Condensed",sans-serif; letter-spacing:.14em; text-transform:uppercase; }
nav a { color:var(--doux); transition:color .2s; }
nav a:hover, nav a[aria-current="page"] { color:#fff; }
.langues { display:flex; gap:10px; font:600 14px/1 "Barlow Condensed",sans-serif; letter-spacing:.1em; }
.langues a { color:var(--doux); }
.langues a[aria-current="true"] { color:var(--or); }
.droite { display:flex; align-items:center; gap:22px; }
.menu-btn { display:none; width:46px; height:46px; border:1px solid var(--ligne); background:none; color:#fff; cursor:pointer; }
.menu-btn svg { width:22px; height:22px; margin:auto; stroke:currentColor; stroke-width:2; fill:none; }

/* Boutons */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px; border:0; font:700 17px/1 "Barlow Condensed",sans-serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.btn-or { background:var(--or); color:var(--nuit); }
.btn-or:hover { background:#e6c674; }
.btn-ligne { border:1px solid rgba(255,255,255,.55); color:#fff; background:none; }
.btn-ligne:hover { background:#fff; color:var(--nuit); }
.btn-nuit { background:var(--nuit); color:#fff; }
.btn-nuit:hover { background:var(--marine); }
.btn-contour { border:1px solid var(--nuit); color:var(--nuit); background:none; }
.btn-contour:hover { background:var(--nuit); color:#fff; }

/* Ouverture */
.hero { position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.hero-page { min-height:74vh; }
.fond { position:absolute; inset:0; z-index:-2; background:var(--marine); }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(8,21,40,.75) 0%,rgba(8,21,40,.3) 38%,rgba(8,21,40,.92) 88%,var(--nuit) 100%); }
.hero-contenu { padding:150px 0 56px; }
.titre-mots { display:grid; grid-template-columns:repeat(2,max-content); gap:0 .32em; font-size:clamp(60px,9.4vw,160px); }
.titre-mots span { color:rgba(255,255,255,.45); transition:color .6s; }
.titre-mots span.actif, .sans-animation .titre-mots span { color:#fff; }
.hero-page h1 { font-size:clamp(52px,7.6vw,124px); }
.bas { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px; margin-top:34px; padding-top:28px; border-top:1px solid var(--ligne); }
.chapo { max-width:38em; font-size:19px; color:#d8e0ec; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }

/* Sections */
.section { padding:104px 0; }
.section + .section { padding-top:0; }
.tete { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 40px; margin-bottom:44px; }
.tete h2 { font-size:clamp(40px,5vw,76px); }
.tete p { max-width:34em; color:var(--doux); }

/* Volets des pôles */
.volets { display:flex; gap:6px; height:640px; }
.volet { position:relative; flex:1 1 0; min-width:0; overflow:hidden; background:var(--marine); transition:flex-grow .6s cubic-bezier(.2,.7,.2,1); }
.volet:hover, .volet:focus-visible { flex-grow:2.1; }
.volet img { position:absolute; inset:0; filter:saturate(.85) brightness(.82); transition:filter .5s,transform 1s; }
.volet:hover img { filter:none; transform:scale(1.03); }
.volet::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,21,40,.2) 30%,rgba(8,21,40,.94) 100%); }
.volet-texte { position:absolute; z-index:1; inset:auto 0 0; padding:28px; }
.volet small { font:600 15px/1 "Barlow Condensed",sans-serif; letter-spacing:.2em; color:var(--or); }
.volet h3 { margin:12px 0 0; font-size:clamp(32px,3vw,46px); }
.volet p { max-width:24em; margin-top:12px; color:#dbe2ee; }
.volet .lien { display:inline-block; margin-top:14px; font:600 15px/1 "Barlow Condensed",sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--or); }

/* Bandeau vidéo + texte */
.duo { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:56px; align-items:center; }
.duo.inverse { grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); }
.duo.inverse .media { order:2; }
.media { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--marine); }
.duo h2 { font-size:clamp(36px,4vw,60px); }
.duo p { margin-top:18px; color:#d0d9e6; }
.liste-pts { display:grid; gap:12px; margin-top:22px; padding:0; list-style:none; }
.liste-pts li { position:relative; padding-left:26px; }
.liste-pts li::before { content:""; position:absolute; left:0; top:.62em; width:12px; height:2px; background:var(--or); }

/* Prestations */
.cartes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.carte { padding:34px 30px 36px; background:var(--marine); border-top:2px solid transparent; transition:border-color .3s,background .3s; }
.carte:hover { border-color:var(--or); background:#10284f; }
.carte small { font:600 14px/1 "Barlow Condensed",sans-serif; letter-spacing:.2em; color:var(--or); }
.carte h3 { margin-top:14px; font-size:30px; }
.carte p { margin-top:12px; color:#cbd5e3; }

/* Galerie */
.galerie { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:280px 280px; gap:6px; }
.galerie figure { overflow:hidden; background:var(--marine); }
.galerie figure:first-child { grid-row:span 2; }
.galerie img { transition:transform 1s; }
.galerie figure:hover img { transform:scale(1.04); }

/* Étapes */
.etapes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; counter-reset:etape; }
.etape { padding:30px 28px 34px; border:1px solid var(--ligne); }
.etape::before { counter-increment:etape; content:"0" counter(etape); display:block; font:700 46px/1 "Barlow Condensed",sans-serif; color:var(--or); }
.etape h3 { margin-top:18px; font-size:26px; }
.etape p { margin-top:10px; color:#cbd5e3; font-size:16px; }

/* Destinations */
.destinations { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.destination { padding:26px 22px; background:var(--marine); }
.destination span { display:block; font:600 14px/1 "Barlow Condensed",sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--doux); }
.destination strong { display:block; margin-top:10px; font:700 30px/1 "Barlow Condensed",sans-serif; text-transform:uppercase; }
.note { margin-top:18px; color:var(--doux); font-size:15px; }

/* FAQ */
.faq { display:grid; gap:6px; max-width:900px; }
.faq details { background:var(--marine); }
.faq summary { display:flex; justify-content:space-between; gap:20px; padding:22px 26px; font:600 21px/1.25 "Barlow Condensed",sans-serif; letter-spacing:.02em; cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--or); font-size:26px; line-height:1; }
.faq details[open] summary::after { content:"−"; }
.faq details p { padding:0 26px 24px; color:#cbd5e3; }

/* Carte contact */
.appel { padding-bottom:80px; }
.appel-carte { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); width:min(920px,100%); margin-inline:auto; background:var(--sable); color:var(--nuit); }
.appel-texte { padding:34px 40px 38px; }
.appel-texte .sur-titre { margin-bottom:10px; font-size:13px; color:#7d5f1c; }
.appel-texte h2 { font-size:clamp(34px,3vw,42px); }
.appel-texte > p:not(.sur-titre) { margin-top:10px; font-size:16px; color:#3d4a5f; }
.appel-texte .actions { gap:10px; margin-top:20px; }
.appel-texte .btn { flex:1 1 auto; min-height:46px; padding:0 14px; font-size:14px; letter-spacing:.08em; white-space:nowrap; }
.appel-photo { min-height:250px; background:var(--marine); }
.appel-photo img { object-position:50% 30%; }

/* Formulaire */
.contact-grille { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:48px; align-items:start; }
form { display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; padding:38px; background:var(--sable); color:var(--nuit); }
form .plein { grid-column:1 / -1; }
label { display:grid; gap:7px; font:600 15px/1.2 "Barlow Condensed",sans-serif; letter-spacing:.1em; text-transform:uppercase; }
label span { font-family:Barlow,sans-serif; font-weight:400; letter-spacing:0; text-transform:none; color:#5b6678; }
input, select, textarea { width:100%; min-height:48px; padding:12px 14px; border:1px solid #c9bfa8; background:#fff; color:var(--nuit); font:400 16px/1.4 Barlow,system-ui,sans-serif; }
textarea { min-height:130px; resize:vertical; }
form .actions { gap:10px; }
.form-msg { grid-column:1 / -1; min-height:1.4em; font-size:15px; color:#9b2c22; }
.infos { display:grid; gap:6px; }
.info { padding:26px 28px; background:var(--marine); }
.info h3 { font-size:22px; letter-spacing:.1em; color:var(--or); }
.info p, .info a { display:block; margin-top:8px; color:#dbe2ee; }
.info a:hover { color:#fff; }

/* Texte courant (mentions légales) */
.texte { max-width:820px; }
.texte h2 { margin:44px 0 14px; font-size:34px; }
.texte p { color:#cbd5e3; }
.a-completer { color:var(--or); }

/* Pied de page */
footer { background:var(--marine); border-top:2px solid var(--or); font-size:15px; line-height:1.55; color:var(--doux); }
footer a { transition:color .2s; }
footer a:hover { color:#fff; }
.pied { display:grid; grid-template-columns:1.2fr .95fr 1.15fr 1.05fr; gap:44px 40px; padding:60px 0 50px; }
.pied h3 { margin-bottom:16px; font-size:17px; line-height:1.1; letter-spacing:.16em; color:var(--or); }
.pied ul { display:grid; gap:12px; padding:0; list-style:none; }
.pied strong { display:block; font-weight:600; color:#fff; }
.pied p + p { margin-top:10px; }
.pied-marque { display:flex; align-items:center; gap:14px; margin-bottom:16px; font:700 24px/1 "Barlow Condensed",sans-serif; letter-spacing:.08em; color:#fff; }
.pied-marque img { flex:none; width:72px; height:72px; }
.devise { font-weight:600; color:#fff; }
.coordonnees li { display:grid; grid-template-columns:20px minmax(0,1fr); gap:11px; }
.coordonnees svg { width:18px; height:18px; margin-top:3px; fill:none; stroke:var(--or); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.coordonnees a { overflow-wrap:anywhere; }
.pied .pastilles { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.pastilles li { padding:4px 10px; border:1px solid rgba(255,255,255,.28); font-size:14px; color:#fff; }
.pied-bas { border-top:1px solid var(--ligne); }
.pied-bas .cadre { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 28px; padding:18px 0; font-size:14px; }

/* Apparition au défilement */
.js .revele { opacity:0; transform:translateY(24px); transition:opacity .8s,transform .8s; }
.js .revele.vu { opacity:1; transform:none; }

/* Urgence */
.urgence-flottant { position:fixed; right:22px; bottom:22px; z-index:30; display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:0 20px; background:var(--nuit); border:1px solid rgba(232,57,47,.65); box-shadow:0 12px 30px rgba(0,0,0,.4); font:700 15px/1 "Barlow Condensed",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#fff; transition:background .2s; }
.urgence-flottant:hover { background:var(--marine); }
.urgence-flottant i, .point-urgence { display:inline-block; flex:none; width:10px; height:10px; border-radius:50%; background:var(--rouge); animation:pouls 2s infinite; }
.point-urgence { margin-right:10px; vertical-align:1px; }
@keyframes pouls { 0% { box-shadow:0 0 0 0 rgba(232,57,47,.6); } 70% { box-shadow:0 0 0 10px rgba(232,57,47,0); } 100% { box-shadow:0 0 0 0 rgba(232,57,47,0); } }
.urgence-lignes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.urgence-ligne { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding:32px 30px; background:var(--marine); border-top:2px solid var(--rouge); }
.urgence-ligne strong { font:700 clamp(32px,3.4vw,46px)/1 "Barlow Condensed",sans-serif; letter-spacing:.02em; }
.etapes.etapes-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.urgence-facturation { max-width:900px; padding:36px 34px; border:1px solid var(--ligne); }
.urgence-facturation h2 { font-size:clamp(32px,3.6vw,52px); }
.urgence-facturation p { margin-top:14px; color:#cbd5e3; }
.urgence-facturation p + p { color:var(--or); font-size:16px; }

/* Numéros avec drapeaux et choix du numéro WhatsApp */
.drapeau { flex:none; width:22px; height:15px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.22); }
.numero { display:flex; align-items:center; gap:10px; }
.coordonnees .numero { margin-top:5px; }
.info .numero { display:flex; margin-top:12px; }
.info .numero a { display:inline; margin:0; }
.info .numero .appeler { margin-left:auto; font:700 14px/1 "Barlow Condensed",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--or); }
.urgence-ligne .numero { gap:16px; }
.urgence-ligne .drapeau { width:42px; height:28px; border-radius:3px; }
.wa-choix { position:relative; }
.wa-choix summary { list-style:none; }
.wa-choix summary::-webkit-details-marker { display:none; }
.wa-choix summary::after { content:""; width:7px; height:7px; margin:-4px 0 0 12px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s; }
.wa-choix[open] summary::after { margin-top:4px; transform:rotate(-135deg); }
.wa-menu { position:absolute; left:0; bottom:calc(100% + 8px); z-index:30; display:grid; min-width:100%; width:max-content; background:#fff; color:var(--nuit); box-shadow:0 18px 44px rgba(8,21,40,.4); }
.wa-menu a { display:flex; align-items:center; gap:14px; padding:14px 20px; font-size:18px; font-weight:600; line-height:1.3; transition:background .2s; }
.wa-menu a + a { border-top:1px solid #e3e7ee; }
.wa-menu a:hover, .wa-menu a:focus-visible { background:var(--sable); }
.wa-menu strong { display:block; font:700 13px/1.2 "Barlow Condensed",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#7d5f1c; }
.wa-menu .drapeau, .destinataire .drapeau { width:30px; height:20px; box-shadow:0 0 0 1px rgba(8,21,40,.18); }
.appel-texte .wa-choix { flex:1 1 auto; }
.appel-texte .wa-choix summary { width:100%; }
.destinataire { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; padding:0; border:0; }
.destinataire legend { grid-column:1 / -1; margin-bottom:7px; font:600 15px/1.2 "Barlow Condensed",sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.destinataire label { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #c9bfa8; background:#fff; cursor:pointer; letter-spacing:0; text-transform:none; }
.destinataire label:has(input:checked) { border-color:var(--nuit); box-shadow:inset 0 0 0 1px var(--nuit); }
.destinataire input { flex:none; width:18px; min-height:0; height:18px; margin:0; padding:0; accent-color:var(--nuit); }
.destinataire span { color:var(--nuit); font:600 16px/1.3 Barlow,sans-serif; }
.destinataire strong { display:block; font:700 13px/1.2 "Barlow Condensed",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#7d5f1c; }

@media (max-width:1100px) {
  .cartes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .etapes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .destinations { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:960px) {
  .barre { height:78px; }
  .menu-btn { display:grid; }
  nav { position:absolute; top:78px; left:0; right:0; display:none; flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 20px; background:var(--nuit); border-bottom:1px solid var(--ligne); }
  nav.ouvert { display:flex; }
  nav a { width:100%; padding:16px 0; border-bottom:1px solid var(--ligne); }
  .langues { padding-top:16px; }
  .droite .btn { display:none; }
  .volets { flex-direction:column; height:auto; }
  .volet { flex:none; height:340px; }
  .volet:hover, .volet:focus-visible { flex-grow:0; }
  .section { padding:72px 0; }
  .duo, .duo.inverse { grid-template-columns:1fr; gap:28px; }
  .duo.inverse .media { order:0; }
  .galerie { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .galerie figure { aspect-ratio:4/3; }
  .galerie figure:first-child { grid-column:1 / -1; grid-row:auto; aspect-ratio:16/9; }
  .appel-carte { grid-template-columns:1fr; width:min(560px,100%); }
  .appel-photo { min-height:0; aspect-ratio:16/9; }
  .urgence-lignes, .etapes.etapes-3 { grid-template-columns:1fr; }
  .contact-grille { grid-template-columns:1fr; }
  .pied { grid-template-columns:repeat(2,minmax(0,1fr)); padding:48px 0 40px; }
}
@media (max-width:560px) {
  .cadre { width:calc(100% - 32px); }
  .marque span { display:none; }
  .titre-mots { grid-template-columns:1fr; font-size:clamp(58px,18vw,84px); }
  .hero-page h1 { font-size:clamp(46px,14vw,70px); }
  .actions .btn { width:100%; }
  .chapo { font-size:18px; }
  .cartes, .etapes { grid-template-columns:1fr; }
  .destinations { grid-template-columns:1fr 1fr; }
  form { grid-template-columns:1fr; padding:26px 20px; }
  .appel-texte { padding:28px 22px 30px; }
  .pied { grid-template-columns:1fr; gap:34px; }
  .urgence-flottant { right:16px; bottom:16px; width:52px; min-height:52px; padding:0; justify-content:center; border-radius:50%; }
  .urgence-flottant span { display:none; }
  .urgence-flottant i { width:14px; height:14px; }
  .urgence-ligne .actions { width:100%; }
  .actions .wa-choix, .wa-menu { width:100%; }
  .destinataire { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .titre-mots span { color:#fff; transition:none; }
  .urgence-flottant i, .point-urgence { animation:none; }
  .volet, .volet img, .galerie img { transition:none; }
  .js .revele { opacity:1; transform:none; transition:none; }
}