@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/archivo-variable-latin.woff2) format('woff2-variations');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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{ /* ══ RYTHME VERTICAL — trois crans, posés le 06/09/2026 ══════════════════ Avant : 35 formes de padding, dont QUATRE échelles concurrentes pour la même intention. Un site n'a pas un padding par section : il a UNE échelle et trois crans. Un besoin qui n'entre dans aucun cran veut dire qu'il MANQUE un cran — on en ajoute un, nommé par son intention ; on n'écrit jamais un 36e padding à la main. clamp() plutôt que des paliers : les crans grandissent avec l'écran comme les héros. C'est ce qui supprime la sensation de « pas proportionnel ». --sp-lg reprend EXACTEMENT la valeur qu'avait `section` : la page d'accueil ne bouge pas d'un pixel, le reste vient s'aligner dessus. */ --sp-lg:clamp(64px,10vw,120px); --sp:clamp(46px,7vw,88px); --sp-sm:clamp(32px,5vw,56px); /* ⭐ 17/09/2026 — LES DEUX CRANS QUI MANQUAIENT, A L'INTERIEUR d'une section. Les trois crans ci-dessus reglent l'espace ENTRE les sections. A l'interieur, rien n'etait regle : le chapo collait au premier bloc (0 px mesure sur l'accueil entre le chapo et les cartes Destinations, quand les etapes en avaient 40). Un titre qui touche son contenu fait dense, donc bon marche. Deux crans, nommes par ce qu'ils separent : --sp-texte : du titre a son chapo (ils se repondent, ils restent proches) --sp-bloc : du chapo au premier BLOC, et d'un bloc au suivant */ --sp-texte:clamp(16px,1.8vw,22px); --sp-bloc:clamp(30px,4vw,48px); /* Le header est en position:fixed, donc il RESTE à l'écran : il se soustrait de la hauteur des héros. Ce qui défile ne se soustrait pas. */ --header:76px; --nuit:#0E1A2B;--nuit-2:#16233A;--ivoire:#F6F8FA;--blanc:#FFF; --cuivre:#C08A4E;--cuivre-f:#8F6230;--gris:#5A6675;--gris-n:#C7CFD8; --bord:#E2E6EC;--bord-n:rgba(246,248,250,.16);--r:8px; --ombre:0 1px 2px rgba(14,26,43,.05),0 8px 28px -12px rgba(14,26,43,.14)} *{margin:0;padding:0;box-sizing:border-box} html{ /* ⛔ scroll-behavior:smooth A ETE RETIRE LE 06/09/2026, ne pas le remettre. « prefers-reduced-motion: reduce » ne l'ATTENUE pas, il l'ANNULE : avec ce reglage actif, un scroll doux laisse la page immobile plusieurs centaines de millisecondes, puis saute. Toutes les ancres du site meurent d'un coup, menu compris — et beaucoup de gens activent ce reglage pour la FLUIDITE de leur machine, sans vouloir perdre la navigation. C'est le cas du Mac de Gwen. Le doux se demande en JS, au clic : voir le script de la page d'accueil, qui REDUIT la duree sous reduced-motion au lieu de la supprimer. scroll-padding-top reste : ce n'est pas de la decoration, c'est ce qui empeche le header fixe de recouvrir la cible d'une ancre. */ -webkit-text-size-adjust:100%;scroll-padding-top:76px} body{background:var(--ivoire);color:var(--nuit);overflow-x:hidden; font:400 16px/1.62 'Archivo',system-ui,sans-serif} img{display:block;max-width:100%}a{color:inherit;text-decoration:none} h1,h2,h3{letter-spacing:-.018em;line-height:1.08;font-weight:900} :focus-visible{outline:2px solid var(--cuivre);outline-offset:3px;border-radius:4px} .in{max-width:1180px;margin:0 auto;padding:0 20px} @media(min-width:800px){.in{padding:0 40px}} section{padding:var(--sp-lg) 0} .eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--cuivre-f);margin-bottom:14px} h2{font-size:clamp(32px,5.4vw,46px)} .chapo{margin-top:16px;font-size:clamp(16px,2.4vw,18px);color:var(--gris);max-width:36em} /* ── boutons ──────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:16px 30px;border-radius:var(--r);font-weight:600;font-size:16px; border:1px solid transparent;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease,background .18s ease;white-space:nowrap;min-height:52px} .btn:hover{transform:translateY(-1px)} .btn-1{background:var(--cuivre);color:var(--nuit);box-shadow:var(--ombre)} .btn-1:hover{background:#CE9857;box-shadow:0 10px 30px -10px rgba(192,138,78,.6)} .btn-2{background:rgba(246,248,250,.06);color:var(--ivoire); border-color:rgba(246,248,250,.34)} .btn-2:hover{background:rgba(246,248,250,.08);border-color:rgba(246,248,250,.34)} .btn-wa{background:#25D366;color:#06301A} .btn-wa:hover{background:#31E074} .btn-nuit{background:var(--nuit);color:var(--ivoire)} .btn-nuit:hover{background:var(--nuit-2)} .btn svg{width:19px;height:19px;flex:none} /* ── en-tête ──────────────────────────────────────────────────────── */ header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s, box-shadow .3s,border-color .3s;border-bottom:1px solid transparent} header.pose{background:rgba(14,26,43,.92);backdrop-filter:blur(14px); border-bottom-color:var(--bord-n)} .nav{display:flex;align-items:center;gap:22px;height:76px} .nav .logo img{width:118px} .liens{display:none;gap:26px;margin-left:auto} .liens a{font-size:14.5px;font-weight:600;color:var(--gris-n);position:relative; display:flex;align-items:center;min-height:44px;transition:color .2s} /* le lien fait 44 px de haut (cible tactile) mais le soulignement reste collé au texte, centré dans cette hauteur */ .liens a::after{content:"";position:absolute;left:0;right:100%;bottom:8px;height:1.5px; background:var(--cuivre);transition:right .28s ease} .liens a:hover{color:var(--blanc)}.liens a:hover::after{right:0} .nav-cta{display:none;margin-left:8px} @media(min-width:980px){.liens{display:flex}.nav-cta{display:inline-flex}} .burger{margin-left:auto;width:46px;height:46px;display:grid;place-items:center; background:rgba(246,248,250,.08);border:1px solid var(--bord-n); border-radius:var(--r);cursor:pointer} .burger span{display:block;width:19px;height:1.5px;background:var(--ivoire); position:relative} .burger span::before,.burger span::after{content:"";position:absolute;left:0; width:19px;height:1.5px;background:var(--ivoire);transition:transform .25s} .burger span::before{top:-6px}.burger span::after{top:6px} @media(min-width:980px){.burger{display:none}} .tiroir{position:fixed;inset:76px 0 auto;background:var(--nuit);z-index:59; border-bottom:1px solid var(--bord-n);transform:translateY(-120%); transition:transform .32s cubic-bezier(.4,0,.2,1);padding:10px 20px 26px} .tiroir.on{transform:none} .tiroir a{display:block;padding:15px 0;font-size:17px;font-weight:600; color:var(--ivoire);border-bottom:1px solid var(--bord-n)} .tiroir .btn{width:100%;margin-top:18px} /* ── héro ─────────────────────────────────────────────────────────── */ /* Le bas du héro est réservé à la barre d'action fixe du mobile (74 px + encoche) : sans cette réserve, la dernière ligne du bandeau de preuves passe dessous et devient invisible en 390 (défaut mesuré le 13/08). */ .hero{position:relative; /* min-height JAMAIS height : sur un ecran court, un titre long doit pouvoir POUSSER le bloc au lieu d'etre coupe. Le defaut ne se voit pas sur l'ecran du developpeur. 100vh d'abord : c'est le REPLI des navigateurs qui ignorent svh, et l'ordre fait la cascade. 100svh ensuite : sur mobile, 100vh compte la barre d'URL comme si elle n'existait pas, et le bas du hero passe SOUS l'ecran. On soustrait le header, qui est fixe donc toujours visible. */ min-height:100vh; min-height:100svh; display:flex;align-items:flex-end; padding:calc(var(--header) + 34px) 0 calc(clamp(40px,9vw,80px) + 88px + env(safe-area-inset-bottom)); color:var(--ivoire);overflow:hidden} @media(min-width:980px){.hero{padding-bottom:clamp(96px,11vw,132px)}} /* très petits écrans (360×740) : le héro est resserré pour que le bandeau de preuves tienne au-dessus de la barre fixe sans scroller */ @media(max-width:480px){ .hero{padding-top:88px} .hero p.sous{margin-top:14px} .hero-btns{margin-top:26px} .hero-pied{margin-top:22px;padding-top:15px;gap:6px 20px} } @media(max-width:380px){.hero h1{font-size:33px}} /* écrans courts (iPhone SE 375×667, Android 360×740) : le héro passe en version compacte, sinon la 3ᵉ preuve se retrouve sous la barre fixe */ @media(max-width:480px) and (max-height:920px){ .hero{padding-top:82px} .hero h1{font-size:31px} .hero p.sous{font-size:15.5px;margin-top:12px} .hero-btns{margin-top:22px} .hero-pied{margin-top:18px;padding-top:13px;font-size:13px;gap:5px 18px} /* Le bouton d'appel du héro fait doublon avec la barre fixe, toujours à l'écran ; la 3ᵉ preuve est reprise telle quelle dans le bandeau juste en dessous. On les retire pour que le reste tienne au-dessus de la barre — aucune information n'est perdue. */ .hero-btns .btn-2{display:none} .hero-pied span:nth-child(3){display:none} } .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center 62%;transform:scale(1.06);animation:derive 24s ease-out forwards} @keyframes derive{to{transform:scale(1)}} @media(prefers-reduced-motion:reduce){.hero-img{animation:none;transform:none}} /* Voile d'ambiance : vertical uniquement, volontairement léger au centre pour que le véhicule reste éclairé quelle que soit la largeur d'écran. */ /* Le voile reste LÉGER au centre : sur un grand écran, le véhicule et la colonne de texte se superposent, donc tout dégradé assez fort pour rendre le texte lisible éteint la voiture (constaté sur 2456 px). Le contraste se règle donc texte par texte, ci-dessous, pas ici. */ .voile{position:absolute;inset:0;background:linear-gradient(180deg, /* ⚠️ RECALÉ LE 06/09/2026 sur la NOUVELLE photo de la place. L'ancienne image était sombre en bas ; celle-ci a un sol clair et un miroir d'eau qui remontent le fond juste sous le texte. Mesuré sur l'image réelle : l'ancien voile ne donnait plus que 4,75:1 — AA, plus AAA. Quatre profils calculés, le plus léger qui repasse AAA est retenu : actuel 4,75:1 → 47 % d'image visible ✗ AA seulement renforcé A 7,05:1 → 41 % ← retenu renforcé B 9,43:1 → 36 % renforcé C 11,87:1 → 32 % Toute nouvelle photo de héros impose de refaire ce calcul. */ rgba(14,26,43,.84) 0%,rgba(14,26,43,.22) 26%,rgba(14,26,43,.42) 52%, rgba(14,26,43,.88) 80%,rgba(14,26,43,.97) 100%)} @media(max-width:979px){.voile{background:linear-gradient(180deg, rgba(14,26,43,.62) 0%,rgba(14,26,43,.42) 12%,rgba(14,26,43,.62) 26%, rgba(14,26,43,.88) 62%,rgba(14,26,43,.96) 100%)}} .hero .in{position:relative;z-index:2} /* L'accroche porte son propre fond : c'est le seul moyen de garantir le 4,5:1 sur un petit texte posé sur une photo, sans assombrir la photo. En ivoire et non en cuivre — l'accent de marque ne tient pas ce seuil. */ .hero .eyebrow{color:var(--ivoire);display:inline-block;margin-bottom:16px; padding:7px 14px;border-radius:6px;background:rgba(14,26,43,.74); backdrop-filter:blur(8px);border:1px solid rgba(246,248,250,.14)} .hero h1{font-size:clamp(36px,7.4vw,74px);max-width:15ch; text-shadow:0 2px 24px rgba(14,26,43,.9),0 1px 3px rgba(14,26,43,.7)} .hero h1 em{font-style:normal;color:var(--cuivre)} /* ivoire et non gris clair : sur photo, le gris ne tient pas le 4,5:1 */ .hero p.sous{margin-top:20px;font-size:clamp(16.5px,2.5vw,20px);max-width:34em; color:var(--ivoire);text-shadow:0 1px 14px rgba(14,26,43,.92)} .hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .hero-pied{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:38px; padding-top:22px;border-top:1px solid var(--bord-n);font-size:13.5px; color:var(--ivoire);text-shadow:0 1px 12px rgba(14,26,43,.92)} .hero-pied b{color:var(--cuivre);font-weight:600} /* ── bandeau preuves ──────────────────────────────────────────────── */ .preuves{background:var(--nuit-2);color:var(--ivoire);padding:0} .preuves .in{display:grid;gap:1px;background:var(--bord-n); grid-template-columns:1fr 1fr;padding:0} @media(min-width:900px){.preuves .in{grid-template-columns:repeat(4,1fr)}} .pr{background:var(--nuit-2);padding:26px 22px} .pr b{display:block;font-weight:900;font-size:17px} .pr span{font-size:13.5px;color:var(--gris-n)} /* ── cartes ───────────────────────────────────────────────────────── */ .g{display:grid;gap:16px;margin-top:44px} @media(min-width:720px){.g2,.g4{grid-template-columns:1fr 1fr}} .carte{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r); overflow:hidden;display:flex;flex-direction:column; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease} .carte:hover{transform:translateY(-3px);box-shadow:var(--ombre); border-color:#CBD3DC} .carte .corps{padding:28px 26px} /* vignette de lieu — l'aplat nuit sert de repli si le fichier manque */ .ph{position:relative;aspect-ratio:16/9;overflow:hidden; background:linear-gradient(135deg,var(--nuit) 0%,var(--nuit-2) 100%); border-bottom:1px solid var(--bord)} .ph img{width:100%;height:100%;object-fit:cover;object-position:center 58%; transition:transform .5s cubic-bezier(.4,0,.2,1)} .carte:hover .ph img{transform:scale(1.04)} .ph::after{content:"";position:absolute;inset:auto 0 0;height:38%; background:linear-gradient(180deg,transparent,rgba(14,26,43,.42))} .carte .pj{width:46px;height:46px;border-radius:var(--r);background:var(--nuit); display:grid;place-items:center;margin-bottom:18px;color:var(--cuivre)} .carte .pj svg{width:23px;height:23px} .carte h3{font-size:19px;margin-bottom:9px} .carte p{color:var(--gris);font-size:15px} /* ── à propos ─────────────────────────────────────────────────────── */ .apropos{background:var(--nuit);color:var(--ivoire)} .apropos .eyebrow{color:var(--cuivre)} .apropos .duo{display:grid;gap:36px;align-items:center} @media(min-width:900px){.apropos .duo{grid-template-columns:1.15fr .85fr;gap:64px}} .apropos p{color:var(--gris-n);margin-top:16px;max-width:38em} .apropos .sig{margin-top:26px;padding-top:22px;border-top:1px solid var(--bord-n)} .apropos .sig b{display:block;font-weight:900;font-size:17px} .apropos .sig span{font-size:13.5px;color:var(--cuivre)} .embleme-deco{background:var(--nuit-2);border:1px solid var(--bord-n); border-radius:var(--r);display:grid;place-items:center;padding:52px 30px} .embleme-deco img{width:min(78%,320px)} /* ── tarifs ───────────────────────────────────────────────────────── */ .tab{margin-top:40px;background:var(--blanc);border:1px solid var(--bord); border-radius:var(--r);overflow:hidden} .tr{display:flex;align-items:center;gap:16px;padding:19px 24px; border-bottom:1px solid var(--bord);flex-wrap:wrap} .tr:last-child{border-bottom:0} .tr b{font-weight:600;font-size:16px} .tr span{font-size:13.5px;color:var(--gris)} .tr .prix{margin-left:auto;font-weight:900;color:var(--cuivre-f); font-size:15px;white-space:nowrap} .note{margin-top:18px;font-size:14px;color:var(--gris);max-width:44em} /* ── réservation ──────────────────────────────────────────────────── */ .resa{background:var(--nuit);color:var(--ivoire)} .resa .eyebrow{color:var(--cuivre)} .resa .chapo{color:var(--gris-n)} .form{margin-top:40px;background:var(--nuit-2);border:1px solid var(--bord-n); border-radius:var(--r);padding:clamp(24px,4vw,40px)} .champs{display:grid;gap:16px} @media(min-width:720px){.champs{grid-template-columns:1fr 1fr} .large{grid-column:1/-1}} label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--gris-n);margin-bottom:7px} input,select,textarea{width:100%;padding:14px 15px;border-radius:var(--r); background:rgba(14,26,43,.6);border:1px solid var(--bord-n);color:var(--ivoire); font:400 15.5px 'Archivo',sans-serif;transition:border-color .2s,box-shadow .2s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cuivre); box-shadow:0 0 0 3px rgba(192,138,78,.22)} input::placeholder,textarea::placeholder{color:#7C8798} textarea{resize:vertical;min-height:96px} select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C7CFD8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center;background-size:12px} .form-bas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:24px} .form-bas .mention{font-size:12.5px;color:var(--gris-n);max-width:30em} .ou{display:flex;align-items:center;gap:14px;margin:28px 0 22px; color:var(--gris-n);font-size:13px;letter-spacing:.1em;text-transform:uppercase} .ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--bord-n)} .directs{display:grid;gap:12px} @media(min-width:600px){.directs{grid-template-columns:1fr 1fr}} /* ── FAQ ──────────────────────────────────────────────────────────── */ details{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r); margin-top:12px;overflow:hidden} summary{padding:20px 24px;font-weight:600;cursor:pointer;list-style:none; display:flex;align-items:center;gap:16px;font-size:16.5px} summary::-webkit-details-marker{display:none} summary::after{content:"+";margin-left:auto;font-size:21px;font-weight:400; color:var(--cuivre-f);transition:transform .25s} details[open] summary::after{transform:rotate(45deg)} details p{padding:0 24px 22px;color:var(--gris);font-size:15px;max-width:46em} /* ── pied ─────────────────────────────────────────────────────────── */ footer{background:var(--nuit);color:var(--gris-n); border-top:1px solid var(--bord-n);padding:clamp(48px,7vw,72px) 0 130px} @media(min-width:980px){footer{padding-bottom:44px}} .f-haut{display:grid;gap:34px} @media(min-width:800px){.f-haut{grid-template-columns:1.3fr 1fr 1fr}} .f-haut img{width:150px;margin-bottom:18px} .f-haut h4{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--ivoire);margin-bottom:14px} .f-haut p{display:block;font-size:14.5px;padding:4px 0} /* cibles tactiles : 44 px de haut minimum (mesuré à 31 px le 13/08) */ .f-haut a{display:flex;align-items:center;min-height:44px;font-size:14.5px; padding:4px 0;transition:color .2s} .f-haut a:hover{color:var(--cuivre)} .f-bas{margin-top:44px;padding-top:22px;border-top:1px solid var(--bord-n); display:flex;flex-wrap:wrap;gap:10px 24px;font-size:12px;letter-spacing:.04em} /* ── barre mobile fixe + WhatsApp ─────────────────────────────────── */ .barre{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:10px; padding:11px 14px calc(11px + env(safe-area-inset-bottom)); background:rgba(14,26,43,.96);backdrop-filter:blur(12px); border-top:1px solid var(--bord-n)} .barre .btn{flex:1;padding:14px 12px;font-size:15px} @media(min-width:980px){.barre{display:none}} .wa-flot{position:fixed;right:22px;bottom:26px;z-index:70;width:58px;height:58px; border-radius:50%;background:#25D366;display:none;place-items:center; box-shadow:0 8px 26px -6px rgba(37,211,102,.6);transition:transform .2s} .wa-flot:hover{transform:scale(1.07)} .wa-flot svg{width:30px;height:30px} @media(min-width:980px){.wa-flot{display:grid}} /* ── révélation ───────────────────────────────────────────────────── */ /* 18/09/2026 (Gwen : « légèrement trop rapide ») — 0,7 s → 1 s, déplacement 18 → 22 px. Une seule source : toutes les pages lisent cette règle. */ /* 19/09/2026 — le masquage ne vaut QUE sous html.rv-js (posé par le constructeur du site public) : sans JavaScript, tout reste visible. Avant, l'accueil sans JS n'affichait même pas son titre. */ /* 19/09/2026 — 1 s → 0,6 s : le fondu d'1 s laissait jusqu'à 97 % du contenu invisible pendant un défilement (« le site est très lent », mesures dans construire-site-public.py, REVELATION_PARTOUT). */ .rv-js .rv{opacity:0;transform:translateY(22px); transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)} .rv-js .rv.on{opacity:1;transform:none} /* 18/09/2026 — « Réduire les animations » RÉDUIT, il ne supprime plus : un fondu doux (opacité seule, sans déplacement, 0,45 s) reste, parce que c'est le déplacement qui gêne, pas l'apparition. Avant, ce réglage (actif sur le Mac de Gwen) supprimait toute animation au défilement. */ @media(prefers-reduced-motion:reduce){.rv-js .rv{transform:none;transition:opacity .6s ease}} /* ══ AJOUTS v2 — structure du 30/08/2026 ══ */ /* ⭐ 17/09/2026 — UN LIEN DE FIN DE SECTION EST UNE ACTION, PAS UNE NOTE. Souligne d'un filet, il se lisait comme un renvoi de bas de page : c'est pourtant lui qui emmene vers la page suivante. Il prend donc la forme d'un bouton secondaire, et l'espace qui va avec. */ .lien-page{display:inline-flex;align-items:center;gap:10px; margin:var(--sp-bloc) 0 4px; padding:14px 24px;border-radius:999px; border:1px solid rgba(192,138,78,.42);background:rgba(192,138,78,.07); color:var(--cuivre-f);font-weight:600;font-size:15.5px;text-decoration:none; transition:background .2s ease,border-color .2s ease,color .2s ease, transform .2s ease,box-shadow .2s ease} .lien-page:hover{background:var(--cuivre);border-color:var(--cuivre); color:var(--nuit);gap:14px;transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(14,26,43,.55)} /* Sur fond nuit, le cuivre sombre ne tient pas le contraste : on prend le clair. */ .appli .lien-page,.nuit-fond .lien-page{color:var(--cuivre); border-color:rgba(192,138,78,.5);background:rgba(192,138,78,.12)} .appli .lien-page:hover,.nuit-fond .lien-page:hover{color:var(--nuit)} .lien-page::after{content:"→";transition:transform .15s ease} .lien-page:hover::after{transform:translateX(2px)} .destinations{display:grid;gap:18px;grid-template-columns:1fr} @media(min-width:760px){.destinations{grid-template-columns:repeat(3,1fr)}} .dest{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r); padding:26px;box-shadow:var(--ombre)} .dest h3{margin:0 0 6px;font-size:19px;letter-spacing:-.01em} .dest .lieu{font-size:13px;color:var(--cuivre);font-weight:600; letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px} .dest p{margin:0;color:var(--gris);font-size:15px} /* ── Véhicule ── */ .vehicule{display:grid;gap:32px;align-items:center;grid-template-columns:1fr} @media(min-width:860px){.vehicule{grid-template-columns:1.1fr .9fr}} .photo-attente{ aspect-ratio:4/3;border-radius:var(--r);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:12px;text-align:center;padding:32px; background:repeating-linear-gradient(45deg,#EEF1F5,#EEF1F5 12px,#E6EAF0 12px,#E6EAF0 24px); border:2px dashed var(--gris-n);color:var(--gris)} .photo-attente strong{display:block;color:var(--nuit);font-size:16px} .photo-attente span{font-size:14px;max-width:30ch} .capacites{list-style:none;margin:0;padding:0;display:grid;gap:14px} .capacites li{display:flex;gap:14px;align-items:flex-start; padding-bottom:14px;border-bottom:1px solid var(--bord)} .capacites li:last-child{border-bottom:0;padding-bottom:0} .capacites .val{font-size:26px;font-weight:800;color:var(--cuivre); line-height:1;min-width:52px;font-variant-numeric:tabular-nums} .capacites .lib{font-weight:700;display:block;margin-bottom:2px} .capacites .det{color:var(--gris);font-size:14px} /* ── Grille tarifaire ── */ .grille{width:100%;border-collapse:collapse;background:var(--blanc); border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre)} .grille th{text-align:left;font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--gris);font-weight:700;padding:14px 18px;background:#F2F5F8; border-bottom:1px solid var(--bord)} .grille td{padding:16px 18px;border-bottom:1px solid var(--bord);font-size:15px} .grille tr:last-child td{border-bottom:0} .grille .trajet{font-weight:700;color:var(--nuit)} .grille .duree{color:var(--gris);font-size:13px;display:block;margin-top:2px} .grille .prix{text-align:right;font-weight:700;color:var(--cuivre);white-space:nowrap} .enveloppe-table{overflow-x:auto;-webkit-overflow-scrolling:touch} .note-tarif{margin:18px 0 0;font-size:14px;color:var(--gris)} /* ══ Pages détaillées ══ */ .fil{font-size:13px;color:var(--gris);padding:110px 0 0} .fil a{color:var(--gris);text-decoration:none;border-bottom:1px solid var(--bord)} .fil a:hover{color:var(--cuivre);border-color:var(--cuivre)} .tete-page h1{font-size:clamp(30px,5.6vw,46px);letter-spacing:-.02em;margin:0 0 14px;line-height:1.14} .tete-page .intro{font-size:clamp(16px,2.3vw,18px);color:var(--gris);max-width:60ch;margin:0} .bloc{border-top:1px solid var(--bord)} .bloc h2{font-size:clamp(29px,3.6vw,38px);letter-spacing:-.015em;margin:0 0 12px} .bloc h3{font-size:18px;margin:26px 0 8px} .bloc p{color:var(--gris);max-width:68ch;margin:0 0 14px} .bloc ul{color:var(--gris);max-width:68ch;padding-left:20px;margin:0 0 14px} .bloc li{margin-bottom:8px} .bloc strong{color:var(--nuit)} .encart{background:var(--blanc);border:1px solid var(--bord);border-left:3px solid var(--cuivre); border-radius:var(--r);padding:22px 24px;margin:22px 0;box-shadow:var(--ombre)} .encart p:last-child{margin-bottom:0} .attente{background:#FFF8EE;border:1px dashed var(--cuivre);border-radius:var(--r); padding:20px 22px;margin:22px 0;color:var(--cuivre-f)} .attente strong{color:var(--cuivre-f)} .retour{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--cuivre); font-weight:600;text-decoration:none;font-size:15px} .retour::before{content:"←"} .retour:hover{color:var(--cuivre-f)} .cta-bas{background:var(--nuit);color:var(--ivoire);border-radius:var(--r); padding:clamp(28px,5vw,40px);text-align:center;margin-top:14px} .cta-bas h2{color:var(--ivoire);margin:0 0 10px} .cta-bas p{color:var(--gris-n);margin:0 auto 22px;max-width:46ch} .cta-bas .duo{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} /* .alt — fond alterné des sections (absent du CSS d'origine, ajouté le 30/08) */ section.alt{background:var(--ivoire)} /* ══════════════════════════════════════════════════════════════════════ RYTHME & ÉTATS DE NAVIGATION — 30/08/2026 -------------------------------------------------------------------- Trois corrections de design, toutes mesurées avant d'être écrites : 1. « .alt » ne produisait AUCUN contraste : il valait --ivoire, soit exactement le fond du body. L'alternance de sections n'a donc jamais été visible depuis la mise en ligne. .alt devient --blanc, et prend enfin le sens que son nom annonce. 2. Le menu n'avait pas d'état de PAGE COURANTE. L'attribut aria-current était posé dans le HTML sans aucune règle en face : la page active s'affichait comme les autres. Un attribut sans style est un attribut qui ment au lecteur. 3. Le survol partait vers --blanc, une couleur absente de la charte. Il passe au cuivre, la seule couleur d'accent de la marque, déjà utilisée par le soulignement animé juste en dessous. ══════════════════════════════════════════════════════════════════════ */ /* ── 1. Alternance réellement visible ─────────────────────────────── */ /* ⚠️ « section.alt » (0,0,1,1) existe plus haut dans cette feuille et bat « .alt » (0,0,1,0) : la SPÉCIFICITÉ l'emporte sur l'ordre. Mesuré au navigateur le 30/08/2026 — la règle simple était écrite, appliquée nulle part, et le fond restait ivoire. On reprend donc le même sélecteur. */ section.alt{background:var(--blanc)} /* Sur les pages détaillées, un bloc sur deux passe en blanc. Le fond doit déborder du conteneur .in (max-width 1180px) pour aller bord à bord : l'ombre portée peint à gauche et à droite, le clip-path l'empêche de déborder en haut et en bas sur les blocs voisins. */ .bloc{position:relative} .bloc:nth-of-type(even){background:var(--blanc); box-shadow:0 0 0 100vmax var(--blanc); clip-path:inset(0 -100vmax)} /* La bordure haute faisait office de séparateur quand tout était de la même couleur. L'alternance s'en charge désormais : on ne la garde que là où deux blocs de même teinte se suivent. */ .bloc:nth-of-type(even), .bloc:nth-of-type(even) + .bloc{border-top:0} /* ── 2. État de page courante ─────────────────────────────────────── */ .liens a[aria-current]{color:var(--ivoire)} .liens a[aria-current]::after{right:0} .tiroir a[aria-current]{color:var(--cuivre)} .tiroir a[aria-current]::before{content:"— ";color:var(--cuivre)} /* ── 3. Survol à la couleur de la marque ──────────────────────────── */ .liens a:hover, .liens a:focus-visible{color:var(--cuivre)} .tiroir a:hover, .tiroir a:focus-visible{color:var(--cuivre)} /* ── Cohérence : la tête des pages détaillées reprend le blanc ─────── */ .tete-page{background:var(--blanc); box-shadow:0 0 0 100vmax var(--blanc); clip-path:inset(0 -100vmax); padding:var(--sp-sm) 0} .fil{background:var(--blanc); box-shadow:0 0 0 100vmax var(--blanc); clip-path:inset(0 -100vmax)} /* ══════════════════════════════════════════════════════════════════════ ENTRÉE DE MARQUE DES PAGES INTÉRIEURES — 30/08/2026 -------------------------------------------------------------------- Constat de Gwen : « il n'y a pas de hero ou mini-hero dans chaque page, pas de passage significatif à chaque section ». Les pages détaillées commençaient sur un fil d'Ariane et un titre posé sur fond clair — aucune entrée de marque, aucune parenté visible avec l'accueil. Le mini-hero reprend EXACTEMENT le vocabulaire du hero d'accueil, sans photo : fond nuit, sur-titre cuivre, titre à accent cuivre (), chapô en gris clair, bandeau de trois preuves. La page intérieure devient la petite sœur de l'accueil, pas un document séparé. ══════════════════════════════════════════════════════════════════════ */ .hero-page{ /* ══ GABARIT DEMI-ECRAN — le gabarit COURANT des pages de contenu ══════ Le critere n'est pas esthetique, il est fonctionnel : que vient chercher la personne qui arrive ? Une promesse -> plein ecran. Un CONTENU -> demi-ecran. Une information administrative -> compact (.hero-page.compact). A 62 %, l'amorce de la section suivante reste visible en bas de fenetre : c'est elle qui donne envie de descendre, et c'est pour ca qu'un demi-ecran n'a PAS besoin de fleche, contrairement au plein ecran. */ background:var(--nuit); color:var(--ivoire); box-shadow:0 0 0 100vmax var(--nuit); clip-path:inset(0 -100vmax); min-height:62vh; min-height:max(380px,62svh); display:flex; flex-direction:column; justify-content:center; padding:calc(var(--header) + var(--sp-sm)) 0 var(--sp-sm); position:relative} /* Pages utilitaires (CGV, mentions) : un demi-ecran ferait perdre du temps a quelqu'un venu lire une adresse. */ .hero-page.compact{ min-height:0; padding:calc(var(--header) + var(--sp-sm)) 0 var(--sp-sm)} /* Le fil d'Ariane vit DANS le mini-hero : il perd son fond blanc et ses marges de page, sinon il peint une bande claire au milieu du bloc sombre. */ .hero-page .fil{background:none; box-shadow:none; clip-path:none; padding:0 0 20px; color:var(--gris-n)} .hero-page .fil a{color:var(--gris-n); border-bottom-color:var(--bord-n)} .hero-page .fil a:hover{color:var(--cuivre); border-color:var(--cuivre)} .hero-page .eyebrow{color:var(--cuivre); background:none; border:0; padding:0; backdrop-filter:none; display:block; margin-bottom:14px} .hero-page h1{color:var(--ivoire); margin:0 0 16px; font-size:clamp(30px,5.4vw,52px); line-height:1.12; letter-spacing:-.02em; max-width:18ch} .hero-page h1 em{font-style:normal; color:var(--cuivre)} .hero-page .intro{color:var(--gris-n); max-width:62ch; margin:0; font-size:clamp(16px,2.3vw,18px)} .hero-page .hero-pied{margin-top:30px; padding-top:20px; text-shadow:none} /* ── Passage d'une section à la suivante ────────────────────────────── Deux signaux qui se cumulent : l'alternance de fond (blanc / ivoire, plus haut dans cette feuille) et un filet cuivre au-dessus de chaque titre. Le filet marque le début d'un sujet même quand deux sections de même teinte se suivent — l'alternance seule ne suffit pas en bas de page. */ .bloc h2{position:relative; padding-top:26px; margin-top:0} .bloc h2::before{content:""; position:absolute; top:0; left:0; width:40px; height:2px; background:var(--cuivre); border-radius:2px} .bloc{padding:var(--sp) 0} /* ── Case d'acceptation des CGV ─────────────────────────────────────── Obligatoire avant l'envoi. Elle se voit : encadrée, sur fond ivoire, et la cible de clic couvre toute la ligne (44 px de haut, seuil tactile). */ .cgv-accord{display:flex; gap:12px; align-items:flex-start; background:var(--ivoire); border:1px solid var(--bord); border-radius:var(--r); padding:16px 18px; margin:0 0 20px; cursor:pointer; transition:border-color .18s, background .18s} .cgv-accord:hover{border-color:var(--cuivre); background:#FFF} .cgv-accord input{width:20px; height:20px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--cuivre); cursor:pointer} .cgv-accord span{font-size:14.5px; line-height:1.55; color:var(--gris)} .cgv-accord a{color:var(--cuivre); font-weight:600} .cgv-accord input:focus-visible{outline:2px solid var(--cuivre); outline-offset:2px} .resa .cgv-accord{background:rgba(246,248,250,.06); border-color:var(--bord-n)} .resa .cgv-accord span{color:var(--gris-n)} /* ══ FLECHE DU HERO PLEIN ECRAN ══════════════════════════════════════════ Elle n'est pas decorative : un hero plein ecran SANS fleche fait croire que la page s'arrete la. Un demi-ecran, lui, laisse l'amorce de la section suivante visible — c'est pour ca que .hero-page n'en porte pas. */ .scroll-cue{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:7px; color:var(--gris-n); text-decoration:none; font-size:11px; letter-spacing:.16em; text-transform:uppercase; z-index:3; padding:10px 14px; border-radius:999px; } .scroll-cue:hover,.scroll-cue:focus-visible{color:var(--cuivre)} .scroll-cue svg{width:20px;height:20px;animation:cue 2.6s ease-in-out infinite} @keyframes cue{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(6px);opacity:1}} /* Le flottement, LUI, est purement decoratif : il se coupe entierement. */ @media(prefers-reduced-motion:reduce){.scroll-cue svg{animation:none}} /* ══════════════════════════════════════════════════════════════════════════ HÉROS DE PAGE AVEC IMAGE — posé le 06/09/2026 -------------------------------------------------------------------------- Le héros de page reste un DEMI-ÉCRAN : l'image ne change pas sa hauteur, elle remplit l'aplat bleu nuit qui était là avant. Une page sans image garde exactement le rendu actuel — la classe .a-image est ce qui bascule. ⚠️ LE VOILE EST À DEUX COUCHES, ET CE N'EST PAS DE LA COQUETTERIE. · couche HORIZONTALE : le texte est calé à gauche, donc c'est la gauche qui doit rester sombre. Un voile uniforme assez fort pour protéger le texte noierait l'image entière ; un voile trop léger rend le titre illisible dès que l'image est claire à cet endroit. · couche VERTICALE : elle assoit le header en haut et fait la jointure avec la section suivante en bas, sans couture visible. ⚠️ Le contraste se MESURE sur l'image réelle, page par page — une photo claire au mauvais endroit casse la lisibilité sans rien casser d'autre. ══════════════════════════════════════════════════════════════════════════ */ .hero-page.a-image{ /* L'aplat reste EN DESSOUS : si l'image tarde ou échoue, le héros ne devient pas un rectangle transparent — il redevient ce qu'il était. */ background:var(--nuit); overflow:hidden; } .hero-page .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%; z-index:0; } .hero-page .voile{ position:absolute; inset:0; z-index:1; /* ⚠️ CES VALEURS SONT MESURÉES, PAS RÉGLÉES À L'ŒIL — 06/09/2026. Le premier voile posé donnait 12,3:1 de contraste au pire pixel : très au-dessus du seuil AAA (7:1), donc du contraste GASPILLÉ — l'image ne transparaissait qu'à 11 %. Quatre profils ont été calculés sur les cinq images réelles, en composant les deux couches et en cherchant le pire pixel de la zone où le texte se pose : profil actuel 12,34:1 → 11 % d'image visible allégé A 9,17:1 → 21 % allégé B 7,71:1 → 27 % ← retenu allégé C 6,49:1 → 34 % ✗ sous AAA On prend donc le voile le plus LÉGER qui reste au-dessus de 7:1. Toute modification de ces huit valeurs se re-mesure sur les images. */ background: linear-gradient(90deg, rgba(14,26,43,.80) 0%, rgba(14,26,43,.70) 40%, rgba(14,26,43,.38) 74%, rgba(14,26,43,.22) 100%), linear-gradient(180deg, rgba(14,26,43,.56) 0%, rgba(14,26,43,.16) 36%, rgba(14,26,43,.34) 76%, rgba(14,26,43,.84) 100%); } .hero-page .in{position:relative; z-index:2} /* Sous 760 px le texte occupe toute la largeur : le dégradé horizontal n'a plus de côté à protéger, il devient uniforme et assez sombre pour tout. */ @media(max-width:760px){ .hero-page .voile{ background:linear-gradient(180deg, rgba(14,26,43,.86) 0%, rgba(14,26,43,.68) 40%, rgba(14,26,43,.80) 78%, rgba(14,26,43,.94) 100%); } .hero-page .hero-img{object-position:center 50%} } /* ══════════════════════════════════════════════════════════════════════════ ICÔNES DE CONTENU — posées le 06/09/2026 -------------------------------------------------------------------------- ⚠️ DESSINÉES, PAS GÉNÉRÉES, et ce n'est pas un détail. Une icône générée en image pèse 50 à 500 ko contre ~400 octets, floute dès 22 px (c'est du pixel, pas du tracé), ne suit pas la couleur du CSS, et — le pire — chaque génération dessine avec une épaisseur de trait différente. Or c'est exactement l'épaisseur IDENTIQUE partout qui fait qu'un jeu d'icônes a l'air dessiné plutôt qu'assemblé. Spécification, reprise à l'identique des 9 icônes déjà en place : viewBox 0 0 24 24 · fill none · stroke currentColor stroke-width 2 · linecap round · linejoin round ⚠️ Elles héritent de `color`, donc elles se colorent en CSS. Ne jamais écrire une couleur en dur dans le SVG : le jour où la charte bouge, il faudrait rouvrir chaque page. ⚠️ Toutes portent aria-hidden : elles DOUBLENT un texte déjà lisible. Sans ça, un lecteur d'écran annoncerait deux fois la même information. ══════════════════════════════════════════════════════════════════════════ */ .h3-ico{display:flex; align-items:center; gap:11px} .h3-ico svg{width:21px; height:21px; flex:none; color:var(--cuivre)} /* Liste à icônes : la puce est remplacée par le pictogramme, donc on retire la puce ET le retrait qui allait avec — sinon le texte se décale deux fois. */ .liste-ico{list-style:none; padding-left:0; display:grid; gap:13px; margin:0 0 14px} .liste-ico li{display:flex; align-items:flex-start; gap:13px; margin:0} .liste-ico svg{width:19px; height:19px; flex:none; color:var(--cuivre); margin-top:4px} .liste-ico span{flex:1; min-width:0} @media(max-width:600px){ .h3-ico{gap:9px} .h3-ico svg{width:19px; height:19px} } /* ══════════════════════════════════════════════════════════════════════════ SECTION « RÉSERVER EN LIGNE » — posée le 06/09/2026, 2e section de l'accueil -------------------------------------------------------------------------- Elle vient JUSTE APRÈS le héros, et c'est délibéré : le héros promet « le prix avant de monter dans la voiture ». Le bloc suivant doit permettre d'agir sur cette promesse, pas parler d'autre chose. Destinations passe en troisième — le contenu n'est pas perdu, il est déplacé d'un cran. Fond nuit : la section tranche visuellement avec le blanc des suivantes. C'est le signal « ici, on fait quelque chose », pas « ici, on lit ». ══════════════════════════════════════════════════════════════════════════ */ .appli{background:var(--nuit); color:var(--ivoire)} .appli .eyebrow{color:var(--cuivre)} .appli h2{color:var(--ivoire)} .appli h2::before{background:var(--cuivre)} .appli .chapo{color:var(--gris-n)} .etapes{ display:grid; gap:14px; margin:clamp(28px,4vw,40px) 0 clamp(24px,3vw,32px); } @media(min-width:760px){ .etapes{grid-template-columns:repeat(3,1fr); gap:18px} } /* Une étape = une CARTE posée sur le fond nuit, pas une case de tableau. Le liseré cuivre qui relie les cartes porte la séquence : trois cartes sans lien se lisent comme trois options équivalentes. */ .etape{ position:relative; background:linear-gradient(180deg, rgba(246,248,250,.055), rgba(246,248,250,.022)); border:1px solid var(--bord-n); border-radius:12px; padding:26px 24px 24px; transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .etape:hover{ border-color:rgba(192,138,78,.45); transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.28); } @media(min-width:760px){ .etape + .etape::after{ content:''; position:absolute; left:-19px; top:44px; width:20px; height:1px; background:linear-gradient(90deg, rgba(192,138,78,0), var(--cuivre)); } } /* L'icône dans une pastille : elle tient le regard en haut de carte au lieu de flotter au-dessus du texte. */ .etape svg{ width:20px; height:20px; color:var(--cuivre); display:block; margin:0; box-sizing:content-box; padding:10px; border-radius:50%; background:rgba(192,138,78,.12); border:1px solid rgba(192,138,78,.28); } /* Le numéro d'étape porte l'ordre : sans lui, trois blocs côte à côte se lisent comme trois options équivalentes, pas comme une séquence. */ .etape .n{ position:absolute; top:26px; right:24px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cuivre); font-weight:700; line-height:1; padding:6px 10px; border:1px solid rgba(192,138,78,.32); border-radius:999px; } .etape h3{font-size:18px; margin:20px 0 10px; color:var(--ivoire); font-weight:700; letter-spacing:-.01em; max-width:none; padding-right:4px} .etape p{color:var(--gris-n); font-size:15px; margin:0; line-height:1.62} .appli-bas{margin-top:var(--sp-bloc); display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px} .appli-note{font-size:14px; color:var(--gris-n); margin:0} /* icones de contenu accueil 06-09 */ .dest .lieu{display:flex; align-items:center; gap:8px} .dest .lieu svg{width:16px; height:16px; flex:none; stroke-width:2.2} .capacites .lib{display:flex; align-items:center; gap:8px} .capacites .lib svg{width:17px; height:17px; flex:none; color:var(--cuivre)} .note-ico{display:flex; align-items:flex-start; gap:10px} .note-ico svg{width:18px; height:18px; flex:none; color:var(--cuivre); margin-top:2px} .note-ico span{flex:1; min-width:0} /* voile renforce - hero vehicule 06-09 */ .hero-page .voile.voile-fort{background: linear-gradient(90deg, rgba(14,26,43,.88) 0%, rgba(14,26,43,.82) 40%, rgba(14,26,43,.56) 74%, rgba(14,26,43,.30) 100%), linear-gradient(180deg, rgba(14,26,43,.56) 0%, rgba(14,26,43,.16) 36%, rgba(14,26,43,.34) 76%, rgba(14,26,43,.84) 100%)} /* voiture decoupee - accueil 06-09 */ .photo-vehicule{margin:0; display:flex; align-items:center; justify-content:center} .photo-vehicule img{width:100%; height:auto; display:block; filter:drop-shadow(0 26px 24px rgba(14,26,43,.24))} @media (max-width:900px){.photo-vehicule img{max-width:520px; margin:0 auto}} /* reorganisation accueil 07-09 */ .fond-blanc{background:var(--blanc)} .resa-liens{display:flex; flex-wrap:wrap; gap:14px; margin:var(--sp-bloc) 0 calc(var(--sp-bloc) * .75)} /* configurateur capacite - page vehicule 07-09 */ .config{border:1px solid var(--bord); border-radius:var(--r); padding:clamp(20px,3vw,30px); background:var(--blanc); margin:22px 0 26px} .config-choix{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px} .cfg-n{font:inherit; font-weight:700; font-size:17px; cursor:pointer; width:52px; height:52px; border-radius:14px; background:var(--blanc); border:1.5px solid var(--bord); color:var(--nuit); transition:background .18s ease, border-color .18s ease, color .18s ease} .cfg-n:hover{border-color:var(--cuivre)} .cfg-n.actif{background:var(--nuit); border-color:var(--nuit); color:var(--ivoire)} .cfg-n:focus-visible{outline:3px solid var(--cuivre); outline-offset:2px} .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .config-scene{display:grid; gap:26px; grid-template-columns:1fr} @media(min-width:720px){.config-scene{grid-template-columns:1fr 1fr}} .config-part{min-width:0} .config-titre{margin:0 0 12px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--cuivre); font-weight:600} .sieges,.coffre{display:flex; flex-wrap:wrap; gap:9px; margin:0 0 12px} .siege svg,.bag svg{width:30px; height:30px; display:block} .siege{color:var(--bord); transition:color .18s ease, transform .18s ease} .siege.pris{color:var(--nuit)} .bag{color:var(--nuit); transition:opacity .18s ease, color .18s ease} .bag.vide{color:var(--bord); opacity:.55} .bag.cabine svg{width:25px; height:25px; margin-top:3px} .bag.cabine{color:var(--gris)} .config-val{margin:0; font-weight:700; color:var(--nuit); font-size:16px} .config-note{margin:22px 0 0; padding-top:18px; border-top:1px solid var(--bord); color:var(--gris); font-size:15px} @media (prefers-reduced-motion:reduce){ .cfg-n,.siege,.bag{transition-duration:.01ms} } /* carrousel photos reelles - page vehicule 07-09 */ .carrousel{position:relative; margin:22px 0 6px} .car-piste{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0; padding:2px 2px 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none} .car-piste::-webkit-scrollbar{display:none} .car-piste:focus-visible{outline:3px solid var(--cuivre); outline-offset:4px; border-radius:var(--r)} .car-piste .ph{margin:0; flex:0 0 100%; scroll-snap-align:start; min-width:0} @media(min-width:760px){.car-piste .ph{flex:0 0 calc(50% - 8px)}} .car-piste img{width:100%; height:auto; display:block} .ph-photo img{border-radius:var(--r); border:1px solid var(--bord); background:var(--nuit)} .ph-decoupe img{filter:drop-shadow(0 22px 20px rgba(14,26,43,.22))} .car-piste figcaption{margin:9px 2px 0; font-size:14px; color:var(--gris)} .car-fl{position:absolute; top:38%; z-index:2; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--nuit); background:rgba(255,255,255,.94); border:1px solid var(--bord); box-shadow:0 8px 20px rgba(14,26,43,.18); transition:opacity .18s ease} .car-fl svg{width:21px; height:21px} .car-prec{left:-6px} .car-suiv{right:-6px} .car-fl:hover{border-color:var(--cuivre)} .car-fl:focus-visible{outline:3px solid var(--cuivre); outline-offset:2px} .car-fl[disabled]{opacity:.32; cursor:default; box-shadow:none} .car-compte{margin:12px 0 0; font-size:14px; color:var(--gris); text-align:center} @media (prefers-reduced-motion:reduce){.car-fl{transition-duration:.01ms}} /* icones de section (vectoriel Higgsfield) - 07-09 */ :root{--ico-creux:#FFFFFF} .appli,.resa,.cta-bas{--ico-creux:var(--nuit)} /* L icone tient une COLONNE A GAUCHE de tout le bloc — titre ET paragraphes. Elle est posee en absolu dans le conteneur, qui recoit en echange une marge interieure gauche de la meme largeur : rien ne se chevauche, et le texte garde son fil d alignement du haut jusqu en bas de la section. */ .bloc-ico,.in-ico{--ico:82px; --ico-gap:30px} .bloc-ico{position:relative; padding-left:calc(var(--ico) + var(--ico-gap))} .in-ico{position:relative} .bloc h2.h2-ico{padding-top:0; position:static} .bloc h2.h2-ico::before{content:none} .h2-ico > span{display:block} .h2-ico > .ico-g{display:block; width:var(--ico, 72px); height:var(--ico, 72px); color:var(--cuivre); margin:0 0 18px} .bloc-ico .h2-ico > .ico-g{position:absolute; left:0; top:var(--sp); margin:0} .in-ico .h2-ico > .ico-g{position:absolute; left:20px; top:0; margin:0} @media(min-width:800px){ .in-ico{padding-left:calc(40px + var(--ico) + var(--ico-gap))} .in-ico .h2-ico > .ico-g{left:40px} } @media(max-width:799px){ .in-ico{padding-left:calc(20px + var(--ico) + var(--ico-gap))} } @media(max-width:1000px){.bloc-ico,.in-ico{--ico:64px; --ico-gap:24px}} /* Sous 720 px il n y a plus de colonne a prendre : l icone repasse au-dessus du titre, dans le fil du texte. */ @media(max-width:720px){ .bloc-ico{padding-left:0} .in-ico{padding-left:20px} .bloc-ico .h2-ico > .ico-g, .in-ico .h2-ico > .ico-g{position:static; margin:0 0 14px} .bloc-ico,.in-ico{--ico:54px} } /* Les blocs d appel de fin de page restent centres. */ .cta-bas .h2-ico > .ico-g{margin-left:auto; margin-right:auto} /* selecteur de date maison - 07-09 */ .dp{position:absolute; z-index:40; top:calc(100% + 8px); left:0; width:min(340px,92vw); background:var(--blanc); color:var(--nuit); border:1px solid var(--bord); border-radius:var(--r); box-shadow:0 24px 60px rgba(6,12,24,.42); padding:16px} .dp-tete{display:flex; align-items:center; justify-content:space-between; margin:0 0 12px} .dp-mois{font-weight:800; font-size:16px; text-transform:capitalize; letter-spacing:-.01em} .dp-nav{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--blanc); border:1px solid var(--bord); color:var(--nuit); cursor:pointer} .dp-nav svg{width:18px; height:18px} .dp-nav:hover{border-color:var(--cuivre)} .dp-nav:focus-visible,.dp-j:focus-visible,.dp-auj:focus-visible{outline:3px solid var(--cuivre); outline-offset:2px} .dp-sem{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin:0 0 6px} .dp-sem span{text-align:center; font-size:12px; font-weight:700; color:var(--gris); letter-spacing:.06em} .dp-grille{display:grid; grid-template-columns:repeat(7,1fr); gap:2px} .dp-vide{display:block; height:40px} .dp-j{height:40px; border:0; background:transparent; border-radius:10px; cursor:pointer; font:inherit; font-size:15px; font-weight:600; color:var(--nuit)} .dp-j:hover:not([disabled]){background:var(--ivoire)} .dp-j[disabled]{color:var(--bord); cursor:default} .dp-j.auj:not(.sel){box-shadow:inset 0 0 0 1.5px var(--cuivre)} .dp-j.sel,.dp-j.sel:hover{background:var(--nuit); color:var(--ivoire)} .dp-bas{margin:12px 0 0; padding-top:12px; border-top:1px solid var(--bord); text-align:right} .dp-auj{border:0; background:transparent; color:var(--cuivre); font:inherit; font-weight:700; cursor:pointer; padding:4px 6px; border-radius:8px} .dp-auj:hover{background:var(--ivoire)} #date,#heure{cursor:pointer} /* selecteur d heure maison - 18-09 (reprend les cases .dp-j du calendrier) */ .tp{width:min(360px,92vw); scroll-margin:90px 0 110px} .tp-titre{font-size:12px; font-weight:700; color:var(--gris); letter-spacing:.06em; text-transform:uppercase; margin:0 0 6px} .tp-grille{display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin:0 0 12px} .tp-h{margin-bottom:14px} .tp-m{margin-bottom:12px} .tp-b{font-variant-numeric:tabular-nums} .tp-b:focus-visible{outline:3px solid var(--cuivre); outline-offset:2px} .tp-note{margin:0; padding-top:10px; border-top:1px solid var(--bord); font-size:13px; color:var(--gris)} @media (prefers-reduced-motion:reduce){.dp-nav,.dp-j{transition-duration:.01ms}} /* ecran COURT (fenetre pas tres haute) : sans ca le contenu du hero le pousse plus bas que l ecran et la fleche « Decouvrir » sort du cadre. On ne coupe rien, on RESSERRE — le titre reste lisible et la fleche revient a l ecran. */ @media(min-width:981px) and (max-height:900px){ .hero h1{font-size:clamp(34px,5.4vw,56px)} .hero p.sous{margin-top:14px; font-size:clamp(15.5px,1.9vw,17.5px)} .hero-btns{margin-top:22px} .hero-pied{margin-top:20px; padding-top:14px; font-size:12.5px} .hero .eyebrow{margin-bottom:11px; padding:6px 12px} .hero{padding-bottom:clamp(84px,9vh,104px)} } @media(min-width:981px) and (max-height:740px){ .hero h1{font-size:clamp(30px,4.4vw,44px)} .hero-pied{display:none} .hero{padding-bottom:82px} } /* plan du site - 08-09 */ .plan-liste{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:2px} .plan-liste li{margin:0} .plan-liste a{display:block; padding:9px 12px; border-radius:9px; text-decoration:none; color:var(--nuit); font-weight:600; border:1px solid transparent} .plan-liste a:hover{background:var(--blanc); border-color:var(--bord)} .plan-liste a:focus-visible{outline:3px solid var(--cuivre); outline-offset:2px} @media(min-width:620px){.plan-villes{grid-template-columns:1fr 1fr}} @media(min-width:920px){.plan-villes{grid-template-columns:1fr 1fr 1fr}} /* rappel d action en fin de section - 08-09 */ .rappel-cta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:22px 0 0; padding-top:18px; border-top:1px solid var(--bord)} .rappel-cta .btn{padding:11px 18px; font-size:15px} .rappel-note{font-size:13.5px; color:var(--gris); flex:1 1 auto; min-width:180px} @media(max-width:520px){ .rappel-cta{gap:9px} .rappel-cta .btn{flex:1 1 100%; text-align:center; justify-content:center} } .plan-min{float:right; font-weight:400; color:var(--gris); font-size:13.5px} /* ══ communes desservies — accueil + page destinations (09/09/2026) ═══════ Une pastille par commune de la première vague, générée par generer-pages-locales-v3.py entre deux marqueurs HTML. Réutilise .plan-min (le temps depuis Montauban), sans son flottement de liste. */ .communes-titre { font-size:19px; margin:34px 0 6px } .communes { list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:8px } .communes li { margin:0 } .communes a { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; border:1px solid var(--bord); background:var(--blanc); color:var(--nuit); font-weight:600; font-size:14.5px; text-decoration:none; transition:border-color .15s, box-shadow .15s } .communes a:hover { border-color:var(--cuivre); box-shadow:var(--ombre) } .communes a:focus-visible { outline:3px solid var(--cuivre); outline-offset:2px } .communes .plan-min { float:none; font-size:12.5px } /* ══ carrousel véhicule — le cadre 16/9 de .ph rognait les photos (09/09/2026) ═ Mesuré en ligne : .ph (la vignette des CARTES) impose aspect-ratio:16/9 + overflow:hidden. Dans le carrousel, une photo 3/2 ou 4/3 perdait son bas et les six légendes (figcaption) tombaient hors du cadre : invisibles depuis le 07/09. Dans la piste, la figure prend la hauteur de sa photo. */ .car-piste .ph{aspect-ratio:auto; overflow:visible; background:none; border-bottom:0} .car-piste .ph::after{content:none} /* ══════════════════════════════════════════════════════════════════════ RESPIRATION INTERNE — posee le 17/09/2026 ---------------------------------------------------------------------- Placee EN FIN DE FEUILLE a specificite egale : elle prime donc sur les marges ecrites au cas par cas plus haut (.etapes, .resa-liens...), qui restent lisibles sans etre contradictoires. Regle : un bloc ne touche jamais le texte qui l'introduit. ══════════════════════════════════════════════════════════════════════ */ .chapo{margin-top:var(--sp-texte)} .chapo + *{margin-top:var(--sp-bloc)} .tete-page .intro + *{margin-top:var(--sp-bloc)} /* Un sous-titre n'est pas un bloc : il respire, sans se detacher de son texte. */ .bloc h3{margin-top:calc(var(--sp-bloc) * .68)} .bloc h3:first-child{margin-top:0} /* ══ FENÊTRE « VÉRIFIEZ VOS COORDONNÉES » — formulaire de réservation (lot A, 18/09/2026) ══ Ouverte à l'envoi du formulaire : téléphone mis en forme, numéro fixe signalé, faute de frappe d'e-mail proposée à la correction. Règles dans /app/reservation/verif-coordonnees.js. Ici dans la feuille, pas en