/* =====================================================================
   MOVELY — Couche JULIE (composants mis en scène)
   Icônes dorées, flotte, social proof, avis par course, connexion.
   Cadrage nombre d'or (φ ≈ 1.618) · une émotion + une action par bloc.
   Chargée après nuit.css.
   ===================================================================== */

/* =========================================================
   QA — Web Interface Guidelines (Vercel)
   ========================================================= */
html{color-scheme:dark;-webkit-tap-highlight-color:transparent}
/* Les ancres ne passent plus sous la nav fixe */
[id]{scroll-margin-top:88px}
/* Pas de délai de double-tap sur le tactile */
a,button,input,select,textarea,label,summary,.mode,.veh,.tc,.pay,.chip{touch-action:manipulation}
/* Le défilement des panneaux ne « fuit » pas sur la page */
.sheet,.espace,.ac-list,.proof-rail,.veh-rail,.opts{overscroll-behavior:contain}
/* Titres sans veuve/orpheline */
h1,h2,.sec-head h2,.hero h1,.lp-hero h1{text-wrap:balance}

/* =========================================================
   AUDIT UI/UX — corrections (ui-ux-pro-max)
   ========================================================= */
/* Contraste : le gris le plus pâle passait sous 4.5:1 sur fond noir → relevé */
:root{ --txt-faible:rgba(244,241,234,.58); }

/* Icônes dans les listes secondaires (zone 30 km) + onglet heures */
.ze-list li span{display:inline-flex;align-items:center;justify-content:center}
.ze-list li span .ic{width:20px;height:20px}
.re-ico{display:flex;justify-content:center;color:var(--or)}
.sf-dot.dot-h{display:inline-flex;align-items:center;justify-content:center}

/* Confort tablette (checklist responsive 768–1024) */
@media(min-width:769px) and (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
/* Jamais de débordement horizontal sur mobile */
@media(max-width:560px){
  .proof-rail{margin-left:-4px;margin-right:-4px;padding-left:4px;padding-right:4px}
}

/* ---------- Icônes line dorées (remplacent les emojis) ---------- */
.ic{width:26px;height:26px;fill:none;stroke:var(--or);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.card .ico .ic,.svc .ico .ic{width:28px;height:28px}
.ico{display:inline-flex;align-items:center;justify-content:center}
.zcard h3 .zico .ic{width:20px;height:20px;stroke:var(--or)}
.zcard h3{display:flex;align-items:center;gap:10px}
.pay-rail span .ic{width:18px;height:18px;display:inline-block;vertical-align:-3px;margin-right:6px}

/* Traits des véhicules dessinés */
.carln{fill:none;stroke:#CBA24B;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.carfill{fill:#0b1016}
.carwin{fill:rgba(203,162,75,.12);stroke:#CBA24B;stroke-width:2;stroke-linejoin:round}
.cartire{fill:#05070b;stroke:#243044;stroke-width:4}
.carrim{fill:none;stroke:#CBA24B;stroke-width:2.4}
.cardot{fill:#E8C97E}

/* ---------- Pull-quote (bulle de citation) ---------- */
.pull{position:relative;margin:26px 0;padding:22px 26px 22px 30px;border-radius:16px;
  background:linear-gradient(135deg,rgba(203,162,75,.10),rgba(203,162,75,.02));
  border:1px solid rgba(203,162,75,.3);border-left:3px solid var(--or)}
.pull .pull-q{width:26px;height:26px;fill:var(--or);stroke:none;opacity:.8;margin-bottom:8px}
.pull p{font-family:"Fraunces",serif;font-size:1.3rem;line-height:1.4;color:var(--champagne);font-style:italic;margin:0}

/* ---------- PARCOURS « comment ça marche » (timeline visuelle) ---------- */
.parcours{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative;margin-top:50px}
.pc-line{position:absolute;top:36px;left:17%;right:17%;height:2px;
  background:linear-gradient(90deg,transparent,var(--or),transparent);opacity:.45}
.pc-step{text-align:center;position:relative}
.pc-ico{width:74px;height:74px;border-radius:50%;margin:0 auto 20px;background:var(--noir-3);
  border:1px solid var(--or);display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:0 0 0 8px rgba(203,162,75,.06)}
.pc-ico .ic{width:30px;height:30px}
.pc-num{position:absolute;top:-6px;right:50%;transform:translateX(28px);width:26px;height:26px;border-radius:50%;
  background:var(--or);color:#120d02;font-weight:700;font-size:.82rem;display:flex;align-items:center;justify-content:center;font-family:"Fraunces",serif}
.pc-step h3{font-family:"Fraunces",serif;font-weight:500;font-size:1.2rem;color:#fff;margin-bottom:8px}
.pc-step p{color:var(--txt-doux);font-size:.96rem;max-width:30ch;margin-inline:auto}
@media(max-width:768px){
  .parcours{grid-template-columns:1fr;gap:34px}
  .pc-line{display:none}
}

/* ---------- SECTION FLOTTE ----------
   Les cartes à silhouettes dessinées ont été remplacées par de vraies
   photos : les règles correspondantes vivent maintenant dans refonte.css. */
.flotte{background:var(--noir-2);border-top:1px solid rgba(255,255,255,.055)}

/* ---------- SOCIAL PROOF (carrousel) ---------- */
.proof{background:var(--noir);border-top:1px solid rgba(255,255,255,.055);overflow:hidden}
.proof-note{margin-top:10px;font-size:.82rem;color:var(--txt-faible)}
.proof-rail{display:flex;gap:20px;margin-top:40px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 2px 18px;scrollbar-width:none}
.proof-rail::-webkit-scrollbar{display:none}
.avis{
  scroll-snap-align:start;flex:0 0 clamp(280px,34%,380px);
  background:var(--verre);border:1px solid var(--verre-bord);border-radius:18px;padding:26px;
  display:flex;flex-direction:column;gap:14px;transition:border-color .3s,transform .3s}
.avis:hover{border-color:rgba(203,162,75,.4);transform:translateY(-4px)}
.avis-note{display:flex;gap:3px}
.avis-note .ic{width:18px;height:18px;stroke:var(--or);fill:var(--or)}
.avis-note .vide{fill:none;stroke:rgba(203,162,75,.4)}
.avis-txt{font-family:"Fraunces",serif;font-size:1.08rem;line-height:1.5;color:var(--champagne);font-style:italic}
.avis-qui{display:flex;align-items:center;gap:12px;margin-top:auto}
.avis-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#243a57,#16263B);
  display:flex;align-items:center;justify-content:center;color:var(--or-clair);font-weight:700;font-family:"Fraunces",serif}
.avis-qui b{color:#fff;font-size:.95rem;display:block}
.avis-qui span{color:var(--txt-faible);font-size:.82rem}
.proof-ctrl{display:flex;gap:10px;margin-top:18px}
.proof-ctrl button{width:44px;height:44px;border-radius:50%;background:var(--verre);
  border:1px solid var(--verre-bord);color:#fff;cursor:pointer;font-size:1.1rem;transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,opacity .2s ease,transform .2s var(--ease-out)}
.proof-ctrl button:hover{border-color:var(--or);color:var(--or-clair)}
.proof-src{display:flex;gap:18px;align-items:center;margin-top:26px;flex-wrap:wrap;color:var(--txt-doux);font-size:.88rem}
.proof-src b{color:var(--or-clair)}

/* ---------- CONNEXION SOCIALE (espace) ---------- */
.esp-social{display:flex;flex-direction:column;gap:10px;margin:4px 0 16px}
.sso{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:13px 16px;border-radius:12px;font-weight:600;font-size:.95rem;cursor:pointer;
  border:1px solid var(--verre-bord);background:#fff;color:#1a1a1a;transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,opacity .2s ease,transform .2s var(--ease-out);font-family:inherit}
.sso:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.sso .ic,.sso svg{width:20px;height:20px}
.sso-apple{background:#000;color:#fff;border-color:#000}
.sso-wa{background:#25D366;color:#073f1e;border-color:#25D366}
.sso-sep{display:flex;align-items:center;gap:12px;color:var(--txt-faible);font-size:.82rem;margin:6px 0}
.sso-sep::before,.sso-sep::after{content:"";flex:1;height:1px;background:var(--verre-bord)}
.sso-pending{font-size:.8rem;color:var(--or-clair);background:rgba(203,162,75,.1);
  border:1px solid rgba(203,162,75,.28);border-radius:10px;padding:9px 12px;margin-top:4px}

/* ---------- AVIS RATTACHÉ À UNE COURSE (espace) ---------- */
.esp-noter{background:none;border:1px solid var(--verre-bord);color:var(--or-clair);
  border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,opacity .2s ease,transform .2s var(--ease-out)}
.esp-noter:hover{border-color:var(--or);background:rgba(203,162,75,.08)}
.esp-avis-form{margin-top:10px;padding:14px;background:rgba(255,255,255,.03);border:1px solid var(--verre-bord);border-radius:12px}
.esp-stars{display:flex;gap:6px;margin-bottom:10px}
.esp-stars button{background:none;border:none;cursor:pointer;padding:0;line-height:0}
.esp-stars .ic{width:26px;height:26px;stroke:var(--or);fill:none}
.esp-stars button.on .ic{fill:var(--or)}
.esp-avis-rendu{margin-top:8px;padding:12px 14px;background:rgba(203,162,75,.07);
  border:1px solid rgba(203,162,75,.25);border-radius:12px}
.esp-avis-rendu .etoiles{color:var(--or);letter-spacing:2px;font-size:.9rem}
.esp-avis-rendu p{color:var(--txt);font-size:.9rem;margin:6px 0 0;font-style:italic}
/* La zone d'avis se déploie sous la course */
.esp-avis-zone{width:100%;margin-top:4px}
.esp-avis-txt{width:100%;resize:vertical;min-height:64px}

/* =========================================================
   FINITION — emil-design-eng + review-animations
   ========================================================= */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);      /* entrées / réponses UI */
  --ease-in-out:cubic-bezier(.77,0,.175,1);  /* déplacements à l'écran */
}
/* Pression : le bouton répond sous le doigt (160 ms, jamais scale(0)) */
.btn{transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease,box-shadow 200ms ease}
.btn:active{transform:scale(.97)}
.proof-ctrl button:active,.sso:active,.esp-noter:active,.esp-rep:active,.mode:active,
.veh:active,.pay:active,.tc:active,.chip:active,.swap-btn:active,.geo-btn:active{transform:scale(.97)}
/* Survols de cartes : courts (interaction fréquente) */
.voiture-fiche,.pcard,.avis,.zstat,.zcard,.card,.svc{transition:transform 220ms var(--ease-out),border-color 220ms ease,background-color 220ms ease}
/* Révélations au scroll : un peu plus vives, courbe forte */
.rv.in{transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
/* Filet or des règles : scaleX au lieu de width */
.regles li:after{width:46px;transform:scaleX(0);transform-origin:0 50%;transition:transform 720ms var(--ease-out)}
.regles li.vu:after{transform:scaleX(1)}
/* Barre fidélité : scaleX (compte.js) */
.ef-bar i{width:100%!important;transform-origin:0 50%;transition:transform 500ms var(--ease-out)}
/* Reflet doré : seulement avec une vraie souris */
@media (hover:none){
  .btn-or:hover:before{transform:translateX(-120%)}
  .card:hover,.svc:hover,.pcard:hover,.zstat:hover,.zcard:hover,.avis:hover,
  .btn:hover,.veh:hover,.sso:hover,.swap-btn:hover{transform:none}
}
/* Mouvement réduit : plus doux, pas zéro (on garde les fondus) */
@media (prefers-reduced-motion:reduce){
  .btn:active,.proof-ctrl button:active{transform:none}
  .rv{opacity:0!important;transition:opacity 300ms ease!important}
  .rv.in{opacity:1!important}
  .regles li:after,.ef-bar i{transition:none}
}

/* =========================================================
   ROBUSTESSE — break-ui (pires données réalistes)
   ========================================================= */
/* Espace client : noms et emails longs, écritures RTL */
.esp-tete{display:flex;align-items:flex-start;gap:12px;min-width:0}
.esp-tete .esp-av{flex-shrink:0}
.esp-tete > div{min-width:0}
.esp-tete b,.esp-tete span{display:block;overflow-wrap:anywhere}
.esp-tete b,.ec-trajet,.avis-qui b,.esp-avis-rendu p{unicode-bidi:plaintext}
.esp-avis-rendu p{overflow-wrap:anywhere}
/* Stats chiffrées alignées */
.es b,.zstat b,.estim .price{font-variant-numeric:tabular-nums}
/* Avis : avatar jamais écrasé, nom long qui passe à la ligne */
.avis-av{flex-shrink:0}
.avis-qui > span:last-child{min-width:0}
.avis-qui b{overflow-wrap:anywhere}
/* Carrousel : une carte tient dans 320 px */
.avis{flex-basis:clamp(250px,82vw,380px)}
/* Sélecteur de jeux de test (break-ui) — n'existe qu'en local, volontairement neutre */
.dev-jeux{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:10001;display:flex;gap:2px;
  padding:3px;border-radius:999px;background:#d9d9d9;font:500 12px/1 system-ui,sans-serif}
.dev-jeux a{padding:7px 12px;border-radius:999px;color:#333;text-decoration:none}
.dev-jeux a[aria-current]{background:#fff;color:#000;box-shadow:0 1px 2px rgba(0,0,0,.2)}

/* =========================================================
   JULIE — HIÉRARCHIE : loi de Hick sur le haut de site
   ========================================================= */
/* Le menu desktop portait 8 destinations + 2 boutons, dont « Mon espace »
   en double (le lien du tiroir mobile n'était jamais masqué au-dessus de
   900 px). On ne garde à l'œil que 4 destinations + 1 geste dominant ;
   le tiroir mobile, lui, garde la liste complète — il a la place. */
@media (min-width:901px){
  .nav-links .espace-lien-m{display:none}
  .nav-links .nav-2{display:none}
}

/* =========================================================
   JULIE — SIDQ : la carte de fidélité est un spécimen, pas un solde
   ========================================================= */
/* « Membre Gold / 1 250 pts » était un compteur inventé présenté comme réel.
   Même traitement que le carrousel d'avis : valeur entre crochets + mention
   explicite. On garde l'objet désirable, on retire le mensonge. */
.loy-card .tier-exemple{background:transparent;border:1px solid var(--or);color:var(--or-clair)}
.loy-card .pts{font-size:2rem;letter-spacing:-.01em}
.loy-card .pts-u{font-size:1rem;color:rgba(247,245,240,.7);font-family:'Inter',sans-serif}
.loy-specimen{margin-top:6px;font-size:.78rem;line-height:1.5;color:var(--txt-faible)}

/* =========================================================
   JULIE — UN SEUL SYSTÈME D'ICÔNES (fin des emojis système)
   ========================================================= */
/* Les emojis étaient rendus par la police système : couleur, graisse et
   alignement hors charte, et un rendu différent sur chaque OS. Tout ce qui
   est iconographie d'interface passe par le sprite #ic-*. Les emojis des
   messages WhatsApp sont conservés : là, ils sont idiomatiques. */
.bc-item .ico .ic{width:20px;height:20px;stroke:var(--or-clair)}
.btn .ic-btn{width:18px;height:18px;stroke:currentColor;flex:none}
.fab .ic{width:26px;height:26px;stroke:#073f1e;stroke-width:1.8}
.ac-ico .ic{width:18px;height:18px;stroke:var(--or);opacity:.85}
.trip-meta .ic{width:16px;height:16px;display:inline-block;vertical-align:-3px;stroke:var(--or)}
.pax-alerte .ic{width:16px;height:16px;display:inline-block;vertical-align:-3px;stroke:currentColor}
/* Raccourcis d'adresse : icône + libellé sur une seule ligne */
.shortcuts .chip{display:inline-flex;align-items:center;gap:7px}
.shortcuts .chip .ic{width:16px;height:16px;stroke:var(--or);flex:none}

/* =========================================================
   BREAK-UI (2e passe) — vérifié avec ?donnees=pire
   ========================================================= */
/* Constat à l'écran : une adresse d'aéroport à rallonge s'affichait sur
   94 px pour 870 px de texte — « 12 avenue d... », illisible. Deux causes,
   toutes deux des conflits de spécificité que la couche julie ne gagnait pas :

   La ligne de course a été refaite (pictogramme, nature, état) : elle
   n'est plus un rang de flex où tout se dispute la largeur. Ce qui reste
   utile tient en deux règles. */
.ec > .esp-avis-zone .esp-noter{width:100%;justify-content:center;text-align:center}
.ec-prix{font-variant-numeric:tabular-nums}

/* =========================================================
   BREAK-UI — débordement horizontal sous 360 px (vérifié à 320)
   ========================================================= */
/* Mesuré en iframe 320 px : la page entière défilait latéralement
   (scrollWidth 391 pour un viewport de 316). Cause : un élément de grille
   vaut `min-width:auto` par défaut, donc `.detail-col` prenait la largeur
   de contenu de son rail de véhicules (3 cartes de 172 px = 544 px) au
   lieu de laisser le rail défiler tout seul. `min-width:0` rend au rail
   son rôle de conteneur scrollable. */
.detail-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.detail-grid > .detail-col{min-width:0}
.veh-rail,.proof-rail,.shortcuts{min-width:0;max-width:100%}
@media(max-width:900px){
  .detail-grid{grid-template-columns:minmax(0,1fr)}
}

/* --- Même piège, partout où il y a une grille ---------------------------
   Un élément de grille vaut `min-width:auto` : il refuse de passer sous la
   largeur minimale de son contenu. Les champs <input type="date"> et
   <time> ont une largeur intrinsèque large (imposée par le navigateur) :
   à 320 px ils poussaient le formulaire de réservation à 391 px et c'est
   toute la page qui défilait de côté. `minmax(0,…)` + `min-width:0`
   rendent la main à la grille. */
.booking-wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.booking-wrap > *{min-width:0}
.row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.row2 > *{min-width:0}
input,select,textarea{min-width:0}
.hero-preuves{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3,.grid-4,.cmp-grid,.loyalty-wrap,.zones-grid,.zones-stats,
.metier-notes,.regles,.parcours,.confiance,.faq-grid,.foot-grid{grid-auto-columns:minmax(0,1fr)}
.grid-3 > *,.grid-4 > *,.cmp-grid > *,.loyalty-wrap > *,.zones-grid > *,.zones-stats > *,
.metier-notes > *,.regles > *,.parcours > *,.confiance > *,
.faq-grid > *,.foot-grid > *{min-width:0}
/* Liste de contacts : le libellé peut revenir à la ligne plutôt que pousser */
.bc-item{min-width:0;flex-wrap:wrap}
.bc-item > span:last-child{min-width:0;overflow-wrap:anywhere}
@media(max-width:900px){
  .booking-wrap{grid-template-columns:minmax(0,1fr)}
  .hero-preuves{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .row2{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================
   MARQUE — rendre son « M » au logo
   ========================================================= */
/* socle.css posait filter:brightness(0) invert(1) sur le logo d'en-tête :
   brightness(0) écrase TOUT en noir (le M doré compris), invert(1) repasse
   TOUT en blanc. Résultat : un carré blanc plein, le M invisible, sur
   toutes les pages et à toutes les largeurs. On sert directement la
   version sur fond sombre et on retire le filtre — les deux états de la
   nav sont noirs dans la direction Nuit & Or. */
header.nav .nav-logo img,
header.nav.pose .nav-logo img{filter:none}
.nav-logo{display:inline-flex;align-items:center}

/* =========================================================
   CONTRASTE — le gris de thème clair n'a rien à faire sur le noir
   ========================================================= */
/* styles.css pose --ardoise (#5A6573) sur les textes secondaires de
   l'espace client. Ce gris a été choisi pour un fond ivoire ; sur le
   panneau noir il tombe à 3,2:1, sous le seuil AA de 4,5:1 (mesuré au
   navigateur, fonds translucides recomposés). nuit.css n'en rattrapait
   que deux. On bascule tout le lot sur le gris du thème sombre. */
.esp-tete span,
.es span,
.esp-intro span,
.esp-vide span,
.esp-note,
.invite-espace span{color:var(--txt-doux)}

/* =========================================================
   TYPOGRAPHIE — les boutons rentrent dans la charte
   ========================================================= */
/* Mesuré au navigateur : 9 éléments s'affichaient en Arial, dont
   « Envoyer ma demande », « Réserver ce trajet », « Estimer » et
   « Créer mon espace ». Un <button> n'hérite pas de la police du body —
   il prend celle du système. styles.css avait donné `font-family:inherit`
   à input/select/textarea, jamais à button. Résultat : les <a class="btn">
   étaient en Inter et les <button class="btn"> en Arial, côte à côte,
   avec le même dessin. On aligne tout ce qui se clique. */
button,
.btn,
input[type="button"],
input[type="submit"]{font-family:inherit}

/* La compensation de la nav fixe sur legal.html vit dans le <style> de la
   page elle-même : ce bloc y est chargé APRÈS julie.css et gagnait la
   cascade. Voir legal.html, règle .legal-hero. */

/* =========================================================
   CHANTIER — ce qui n'est pas prêt ne se montre pas
   ========================================================= */
/* Masqué par défaut, en CSS : si chantier.js ne se charge pas, la zone
   reste cachée. On échoue du bon côté — un visiteur ne doit jamais
   tomber sur un emplacement en attente. */
[data-chantier]{display:none !important}
.chantier-on [data-chantier]{display:revert !important}
.chantier-on [data-chantier].proof{display:block !important}

/* En mode chantier, la zone s'annonce : aucune confusion possible
   avec du contenu fini. */
.chantier-tag{
  position:absolute;top:0;left:0;z-index:5;
  font:700 .66rem/1 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#120d02;background:var(--or);padding:6px 11px;border-radius:0 0 8px 0;
}
.chantier-barre{
  position:fixed;left:50%;bottom:62px;transform:translateX(-50%);z-index:10001;
  font:600 .72rem/1 'Inter',sans-serif;letter-spacing:.06em;
  color:#120d02;background:var(--or-clair);padding:8px 16px;border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.4);pointer-events:none;
}

/* Carte de fidélité : la promesse, jamais un faux solde */
.loy-card .pts-attente{
  font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.5rem;
  color:var(--txt-doux);letter-spacing:-.01em;
}

/* =========================================================
   PHOTOS RÉELLES — quand une vraie image remplace la scène dessinée
   ========================================================= */
/* Le voile avait été calibré sur un dessin très sombre. Sur une vraie
   photographie il écrasait tout : on l'allège en haut pour laisser voir
   l'image, et on le garde dense en bas où le texte se pose. */
.visuel.a-photo.voile::after{
  background:linear-gradient(180deg,
    rgba(6,8,12,.22) 0%,
    rgba(6,8,12,.52) 45%,
    rgba(6,8,12,.86) 78%,
    var(--noir) 100%);
}
.visuel.a-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Sur mobile le titre passe sur la partie basse : on assombrit un peu plus. */
@media(max-width:700px){
  .visuel.a-photo.voile::after{
    background:linear-gradient(180deg,
      rgba(6,8,12,.30) 0%,
      rgba(6,8,12,.66) 40%,
      rgba(6,8,12,.92) 75%,
      var(--noir) 100%);
  }
}

/* Voile latéral : le voile vertical ne suffit pas sur une photo réelle.
   Mesuré au navigateur : contraste moyen 11,4 sous le texte d'accroche,
   mais 1,09 dans le pire cas — les reflets de pare-brise et les lumières
   de la ville effacent la phrase par endroits. Un dégradé horizontal
   assombrit le côté où le texte se pose et laisse la voiture respirer. */
.hero-fond.a-photo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(6,8,12,.92) 0%,
    rgba(6,8,12,.80) 28%,
    rgba(6,8,12,.42) 52%,
    rgba(6,8,12,.08) 78%,
    transparent 100%);
}
@media(max-width:900px){
  /* En colonne, le texte occupe toute la largeur : le voile redevient vertical. */
  .hero-fond.a-photo::before{
    background:linear-gradient(180deg,
      rgba(6,8,12,.55) 0%,
      rgba(6,8,12,.72) 45%,
      rgba(6,8,12,.88) 100%);
  }
}

/* La photo attend invisible, sans peser sur la mise en page, que son chargement finisse (anim.js). */
.visuel > img.photo-attente{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}