/* =========================================================================================
   LA CARTE — dessinée à partir des données, sans tuiles (carte.js). Accueil, livraison, contact, Propriano.
   Les cadres (.livraison-carte, .pg-itin), leurs tailles, la légende et le repli restent dans style.css § 7 ter
   et pages.css § 20 ; cette feuille ne règle que le dessin. carte.js pose .cv-dessinee sur chaque cadre dessiné.
   1 · le cadre et le dessin commun  ·  2 · le zoom, le crédit, la garde au doigt  ·  3 · l'agence et les marques
   4 · la Corse (lignes d'eau, départements, villes)  ·  5 · le trajet (terre, bâti, rues)  ·  6 · tablette, téléphone
   Rien n'est lié au défilement.
   ========================================================================================= */

/* ---------- 1 · LE CADRE ET LE DESSIN COMMUN : la mer est le papier ---------- */
.livraison-carte,.pg-itin{background:#F6F4EE}
.cv-svg{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.cv-svg:active{cursor:grabbing}
.cv-svg path{vector-effect:non-scaling-stroke}
.cv-marques{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.cv-marque{position:absolute;left:0;top:0;width:0;height:0}
.cv-marque.carte-pin-icone{width:20px;height:20px;margin:-10px 0 0 -10px}

/* ---------- 2 · LE ZOOM, LE CRÉDIT, LA GARDE AU DOIGT ---------- */
.cv-zoom{position:absolute;z-index:460;left:10px;top:10px;display:flex;flex-direction:column;border-radius:4px;overflow:hidden;
  background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.cv-zoom button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;background:#fff;color:var(--encre);
  font:400 19px/1 var(--f-corps);cursor:pointer}
.cv-zoom button + button{border-top:1px solid #ccc}
.cv-zoom button:hover{background:#f4f4f4}
.cv-zoom button:disabled{color:#bbb;cursor:default;background:#fff}
.cv-zoom button:focus-visible{outline-offset:-3px}
.cv-credit{position:absolute;z-index:450;right:0;bottom:0;max-width:calc(100% - 20px);margin:0;padding:2px 6px;
  background:rgba(255,252,246,.86);font:400 10.5px/1.4 var(--f-corps);color:#555;text-align:right}
.cv-credit a{color:#444;text-decoration:underline;text-decoration-color:rgba(68,68,68,.35)}
.sans-carte .cv-zoom,.sans-carte .cv-credit{display:none}
/* au doigt, la carte ne prend la main qu'après un appui (app.js § 12 pose .carte-garde, puis .carte-active) */
@media (hover:none) and (pointer:coarse){
  .carte-garde:not(.carte-active) .cv-svg{pointer-events:none}
}

/* ---------- 3 · L'AGENCE ET LES MARQUES ---------- */
/* l'étiquette de l'agence, adoucie : la carte crème au lieu du noir, « L'agence » en rouge */
.cv-dessinee .carte-pin-nom{background:var(--fond);color:var(--encre);border-radius:3px;
  box-shadow:0 0 0 1px rgba(26,26,26,.09),0 10px 24px -10px rgba(26,26,26,.38);font-weight:600}
.cv-dessinee .carte-pin-nom b{color:var(--rouge)}
.cv-dessinee .carte-pin-nom::before{background:var(--fond)}
.cv-dessinee .carte-pin i{border-width:2.5px;box-shadow:0 2px 6px rgba(26,26,26,.28)}
/* sur la carte de la Corse-du-Sud, l'étiquette passe à gauche du point, sur la mer du golfe : elle ne couvre plus les terres */
@media (min-width:768px){
  .livraison-carte.cv-dessinee .carte-pin-nom{left:auto;right:30px}
  .livraison-carte.cv-dessinee .carte-pin-nom::before{left:auto;right:-5px}
}
/* la légende, plus légère ; la pastille de la zone reprend la teinte de la Corse-du-Sud */
.cv-dessinee .carte-legende{background:rgba(255,252,246,.94);box-shadow:0 0 0 1px rgba(26,26,26,.07),0 10px 26px -14px rgba(26,26,26,.35)}
.cv-dessinee .carte-leg-zone{background:#F0D2C1;border-width:1.5px}
/* la vue « chantier » (Propriano) : l'étiquette passe au-dessus du point ; dessous, elle couvrait le sud du département */
.pg-itin.cv-dessinee.vue-chantier .carte-pin-nom{top:auto;bottom:calc(100% + 14px)}
.pg-itin.cv-dessinee.vue-chantier .carte-pin-nom::before{top:auto;bottom:-5px}
/* le départ, la direction de Campomoro (dessin de pages.css § 20) ; le point qui parcourt le trajet */
.cv-marque .pg-itin-depart,.cv-marque .pg-itin-dir{position:absolute}
.cv-mobile{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:rgba(209,20,37,.2)}
.cv-mobile::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2.5px var(--rouge)}
.vue-chantier .cv-mobile{opacity:0}

/* ---------- 4 · LA CORSE : la mer est le papier, l'île du sable, la Corse-du-Sud une teinte chaude ---------- */
.cv-onde{fill:none;stroke-linejoin:round}
.cv-onde--1{stroke:#DCD3C2;stroke-width:31px;stroke-opacity:.35}
.cv-onde--1b{stroke:#F6F4EE;stroke-width:29.5px}
.cv-onde--2{stroke:#DCD3C2;stroke-width:19px;stroke-opacity:.55}
.cv-onde--2b{stroke:#F6F4EE;stroke-width:17.5px}
.cv-onde--3{stroke:#D6CCBA;stroke-width:9px;stroke-opacity:.8}
.cv-onde--3b{stroke:#F6F4EE;stroke-width:7.5px}
.cv-nord{fill:#E8E0D0;stroke:#D2C6B2;stroke-width:.8px;stroke-linejoin:round}
.cv-sud{fill:#F0D2C1;stroke:none}
.cv-sud-trait{fill:none;stroke:var(--rouge);stroke-width:1.4px;stroke-linejoin:round;stroke-opacity:.9}
/* les villes repères : le point d'encre, le nom à côté */
.cv-ville{position:absolute;left:0;top:0}
.cv-ville i{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--encre);box-shadow:0 0 0 2px #F6F4EE}
.cv-ville span{position:absolute;top:0;transform:translateY(-50%);white-space:nowrap;font:500 12.5px/1 var(--f-corps);color:#3A3A3A;letter-spacing:.01em;
  text-shadow:0 0 3px #F6F4EE,0 0 3px #F6F4EE,0 0 2px #F6F4EE}
.cv-ville--d span{left:9px}
.cv-ville--g span{right:9px}
.cv-ville--h span{left:50%;top:-9px;transform:translate(-50%,-100%)}
.cv-ville--b span{left:50%;top:9px;transform:translateX(-50%)}

/* ---------- 5 · LE TRAJET : la terre de sable, les rues blanches, le bâti à peine marqué ---------- */
.cv-mer{fill:#F6F4EE;stroke:none}
.cv-terre{fill:#ECE4D4;stroke:none}
.cv-eau{fill:#E9EEEC;stroke:none}
.cv-riviere{fill:none;stroke:#DCE4E2;stroke-width:calc(2.2px * var(--kz,1));stroke-linecap:round}
.cv-bati{fill:#DED3C0;stroke:none}
.cv-piste{fill:none;stroke:#CDBFA8;stroke-width:1px;stroke-dasharray:3 3}
.cv-locale-f{fill:none;stroke:#D7CCB9;stroke-width:calc(3.6px * var(--kz,1));stroke-linecap:round;stroke-linejoin:round}
.cv-locale{fill:none;stroke:#FFFDF8;stroke-width:calc(2.2px * var(--kz,1));stroke-linecap:round;stroke-linejoin:round}
.cv-majeure-f{fill:none;stroke:#CDBFA7;stroke-width:calc(6.4px * var(--kz,1));stroke-linecap:round;stroke-linejoin:round}
.cv-majeure{fill:none;stroke:#FFFDF8;stroke-width:calc(4.6px * var(--kz,1));stroke-linecap:round;stroke-linejoin:round}
.cv-svg .pg-itin-zone{stroke-width:1.5px}
.cv-svg .pg-itin-d121{stroke-width:3px;stroke-linecap:round}
.cv-svg .pg-itin-route-lise{stroke-width:9px;stroke-linecap:round;stroke-linejoin:round}
.cv-svg .pg-itin-route{stroke-width:4px;stroke-linecap:round;stroke-linejoin:round}
/* la vue « chantier » (Propriano) : les rues s'effacent, la Corse-du-Sud apparaît (pages.css § 20 : .pg-itin-dep) */
.cv-osm{transition:opacity .6s ease}
.vue-chantier .cv-osm{opacity:0}

/* ---------- 6 · TABLETTE ET TÉLÉPHONE ---------- */
@media (max-width:1023px){
  /* les boutons + et − : 44 px au doigt */
  .cv-zoom button{width:44px;height:44px;font-size:22px}
  /* les liens des crédits : 44 px au doigt. La zone monte au-dessus du texte (sous lui, le bord de la carte la
     couperait) ; un rembourrage d'élément en ligne : rien ne bouge à l'écran */
  .cv-credit a{padding-top:31px}
}
@media (max-width:767px){
  /* les cartes du trajet (contact, Propriano) : posée sur le dessin, la légende touchait l'étiquette de l'agence. Elle passe
     sous le dessin, dans le cadre ; le dessin garde la hauteur du cadre (pages.css, contact.css), le crédit reste dans son coin */
  .pg-itin.cv-dessinee{display:grid;grid-template-rows:auto auto}
  .pg-itin.cv-dessinee > .pg-itin-fond{position:relative;inset:auto;grid-area:1/1;min-height:inherit}
  .pg-itin.cv-dessinee > .cv-credit{position:relative;right:auto;bottom:auto;grid-area:1/1;align-self:end;justify-self:end}
  .pg-itin.cv-dessinee > .carte-legende{position:static;grid-area:2/1;padding:16px 18px 18px;border-radius:0;box-shadow:none;
    border-top:1px solid var(--bord);background:var(--fond)}
  .cv-ville span{font-size:12px}
  /* la carte de la Corse-du-Sud : l'étiquette de l'agence passe au-dessus du point, sur le golfe ;
     dessous, elle couvrait le sud du département (Sartène, Bonifacio) */
  .livraison-carte.cv-dessinee .carte-pin-nom{top:auto;bottom:calc(100% + 14px)}
  .livraison-carte.cv-dessinee .carte-pin-nom::before{top:auto;bottom:-5px}
  /* Ajaccio passe son nom au-dessus du point ; Propriano, sous l'étiquette de l'agence qui le nomme déjà, se retire */
  .cv-ville[data-ville="2A004"] span{left:50%;top:-9px;transform:translate(-50%,-100%)}
  .cv-ville[data-ville="2A249"]{display:none}
}
@media (max-width:359px){
  /* sous 360 px, le nom de Porto-Vecchio sortait du cadre par la droite : il passe sous son point, sur la mer */
  .cv-ville[data-ville="2A247"] span{left:50%;top:9px;transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .cv-osm{transition:none}
}