/* Carte des interlocuteurs : styles (chargés uniquement sur les pages qui utilisent le shortcode) */
  /* Isolation : les styles du thème / d'Elementor ne s'appliquent pas à l'intérieur de la carte.
     Chaque élément HTML repart des valeurs par défaut du navigateur (comme sur la page de test),
     puis les règles ci-dessous (toutes préfixées par #ci-carte) s'appliquent. Le SVG est exclu
     pour conserver ses attributs de présentation (fill, stroke). */
  #ci-carte, #ci-carte :where(:not(svg, svg *)) { all:revert; }
  #ci-carte :where(:not(svg, svg *))::before, #ci-carte :where(:not(svg, svg *))::after { all:revert; }
  #ci-carte input::placeholder { all:revert; }
  #ci-carte :where([hidden]) { display:none; }   /* l'attribut hidden est annulé par all:revert dans Chrome */
  #ci-carte { box-sizing:border-box; }
  #ci-carte svg { max-width:none; }
  #ci-carte .etoile-carte__repere svg { width:30px; height:38px; }

  #ci-carte { --navy:#052D63; --gray:#596678; --border:#737F99; --line:#E0E5EB; --bg:#EEF1F5; --soft:#F4F6F9; }
  #ci-carte * { box-sizing: border-box; }
  html { scrollbar-gutter: stable; }   /* l'apparition de la barre de défilement ne redimensionne plus la carte */
  #ci-carte { font:400 16px/normal Roboto, sans-serif; color:#1C212B; letter-spacing:normal; word-spacing:normal; text-transform:none; text-align:left; text-indent:0; text-shadow:none; white-space:normal; }
  #ci-carte .visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  #ci-carte { max-width:1216px; margin:40px auto; padding:0 16px; }
  /* les colonnes s'étirent (panneau pleine hauteur) ; la carte garde sa taille via aspect-ratio sur .vue, sinon le SVG grossit = faux zoom */
  #ci-carte .card { display:grid; grid-template-columns: minmax(0,1fr) 400px; gap:16px; background:var(--bg); border-radius:24px; padding:32px; }

  /* ---------- Carte ---------- */
  #ci-carte .etoile-carte { position:relative; min-width:0; }
  /* taille propre à la carte (ratio du viewBox), indépendante du panneau */
  #ci-carte .vue { position:relative; width:calc(100% - 76px); aspect-ratio:592 / 628; max-height:680px; overflow:hidden; border-radius:16px; touch-action:pan-y pinch-zoom; }
  #ci-carte .vue.is-zoom { cursor:grab; touch-action:none; }
  #ci-carte .vue.is-drag { cursor:grabbing; }
  #ci-carte .vue svg { width:100%; height:100%; display:block; }
  #ci-carte .indice { display:inline-flex; align-items:center; gap:8px; margin:0 0 16px; background:var(--navy); color:#fff; border-radius:999px; padding:10px 16px; font-size:14px; font-weight:500; }
  #ci-carte .indice .tactile { display:none; }
  @media (hover: none) { #ci-carte .indice .souris { display:none; } #ci-carte .indice .tactile { display:inline; } }
  #ci-carte .etoile-carte [id^="dep-"] { stroke-width:.6; stroke-linejoin:round; cursor:pointer; outline:none; transition:stroke-width .15s ease-out, fill .25s ease-out, stroke .25s ease-out; vector-effect:non-scaling-stroke; }
  /* un département sélectionné : lui seul (et celui survolé) garde sa couleur, les autres s'estompent.
     Teintes pâles opaques (couleur à 30 % sur le fond #EEF1F5) et non opacity : avec la transparence,
     les bords qui se chevauchent entre départements voisins apparaissaient en plus foncé (ex. le 61). */
  #ci-carte .etoile-carte svg.has-selection [id^="dep-"]:not(.is-selection):not(.is-survol)[fill="#052d63"] { fill:#A8B6C9; stroke:#F3F5F8; }
  #ci-carte .etoile-carte svg.has-selection [id^="dep-"]:not(.is-selection):not(.is-survol)[fill="#007264"] { fill:#A7CBCA; stroke:#F3F5F8; }
  #ci-carte .etoile-carte svg.has-selection [id^="dep-"]:not(.is-selection):not(.is-survol)[fill="#d5e4e4"] { fill:#E6EDF0; stroke:#B1B4C8; }
  #ci-carte .etoile-carte svg.has-selection [id^="dep-"]:not(.is-selection):not(.is-survol)[fill="#f3eada"] { fill:#F0EFED; stroke:#A8B6C9; }
  #ci-carte .etoile-carte svg.has-selection #numeros text:not(.is-actif) { fill:var(--navy); }   /* numéros lisibles sur fond pâle */
  #ci-carte .etoile-carte g#dep-69 path { vector-effect:non-scaling-stroke; }
  #ci-carte .etoile-carte [id^="dep-"].is-survol, #ci-carte .etoile-carte [id^="dep-"].is-selection, #ci-carte .etoile-carte [id^="dep-"]:focus-visible { stroke-width:2.5; }
  #ci-carte .etoile-carte g#dep-69.is-survol path, #ci-carte .etoile-carte g#dep-69.is-selection path, #ci-carte .etoile-carte g#dep-69:focus-visible path { stroke-width:2.5; }
  #ci-carte #numeros text { font:700 9px Roboto, sans-serif; text-anchor:middle; pointer-events:none; }
  #ci-carte .etoile-carte__repere { position:absolute; width:30px; height:38px; pointer-events:none; z-index:2; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
  #ci-carte .etoile-carte__etiquette { position:absolute; z-index:3; white-space:nowrap; pointer-events:none; padding:6px 12px; border-radius:999px; background:var(--navy); color:#fff; font:700 13px/1.2 Roboto, sans-serif; box-shadow:0 4px 12px rgba(0,0,0,.25); }
  #ci-carte .zoom { position:absolute; right:0; bottom:0; display:grid; background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(5,45,99,.12); overflow:hidden; z-index:4; }
  #ci-carte .zoom button { width:44px; height:44px; border:0; background:#fff; color:var(--navy); cursor:pointer; display:grid; place-items:center; }
  #ci-carte .zoom button + button { border-top:1px solid var(--line); }
  #ci-carte .zoom button:disabled { color:#A9B1BF; cursor:default; }
  #ci-carte .zoom button:focus-visible { outline:3px solid var(--navy); outline-offset:-3px; }
  @media (prefers-reduced-motion: reduce){ #ci-carte .etoile-carte [id^="dep-"], #ci-carte .chev { transition:none; } }

  /* ---------- Panneau ---------- */
  #ci-carte .panneau { display:flex; flex-direction:column; background:#fff; border-radius:24px; padding:24px; box-shadow:0 8px 24px rgba(5,45,99,.08); }
  #ci-carte .pdf { margin-top:auto; padding-top:24px; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; color:var(--navy); font-size:16px; font-weight:500; text-decoration:underline; text-underline-offset:3px; }
  #ci-carte .pdf .ic { width:20px; height:20px; }
  #ci-carte .pdf:hover { text-decoration-thickness:2px; }
  #ci-carte .pdf:focus-visible { outline:3px solid var(--navy); outline-offset:3px; border-radius:4px; }
  /* lien d'évitement : invisible jusqu'à la prise de focus clavier */
  #ci-carte .evitement { position:absolute; left:0; top:0; z-index:6; padding:10px 16px; background:#fff; color:var(--navy); font-weight:700; border-radius:999px; box-shadow:0 4px 12px rgba(5,45,99,.2); transform:translateY(-150%); opacity:0; }
  #ci-carte .evitement:focus { transform:none; opacity:1; outline:3px solid var(--navy); outline-offset:2px; }
  #ci-carte .panneau > h2 { font-size:22px; color:var(--navy); margin:0 0 4px; }
  #ci-carte .panneau > label { display:block; color:var(--gray); font-size:15px; margin-bottom:16px; }
  #ci-carte .recherche { display:flex; gap:8px; margin-bottom:20px; position:relative; }
  #ci-carte .champ-wrap { flex:1; position:relative; }
  #ci-carte .recherche input { width:100%; height:52px; border:1px solid var(--border); border-radius:12px; padding:0 16px; font:400 16px Roboto, sans-serif; color:#1C212B; }
  #ci-carte .recherche input::placeholder { color:var(--gray); }
  #ci-carte .recherche input:focus-visible { outline:none; border:2px solid var(--navy); }
  #ci-carte .suggestions { position:absolute; top:58px; left:0; right:0; z-index:5; list-style:none; margin:0; padding:6px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(5,45,99,.12); max-height:320px; overflow:auto; }
  #ci-carte .suggestions[hidden] { display:none; }
  #ci-carte .suggestions li { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; cursor:pointer; }
  #ci-carte .suggestions li[aria-selected="true"], #ci-carte .suggestions li:hover { background:var(--soft); }
  #ci-carte .suggestions li[aria-selected="true"] { box-shadow:inset 0 0 0 2px var(--navy); }
  #ci-carte .suggestions .pt { width:10px; height:10px; border-radius:50%; flex:none; }
  #ci-carte .suggestions strong { color:var(--navy); font-size:15px; }
  #ci-carte .suggestions small { margin-left:auto; color:var(--gray); font-size:12px; }
  #ci-carte .suggestions mark { background:none; color:inherit; text-decoration:underline; }
  /* survol « remplissage diagonal » : bande à −45° qui grandit depuis le centre ; même effet au focus clavier.
     --ci-bande = épaisseur de la bande ; propriété enregistrée pour pouvoir l'animer et la partager
     entre le fond (::before) et la couleur du libellé (.lib), qui restent ainsi parfaitement synchronisés. */
  @property --ci-bande { syntax:'<length>'; inherits:true; initial-value:0px; }
  #ci-carte .btn { --ci-bande:0px; position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; border-radius:12px; font:700 16px Roboto, sans-serif; cursor:pointer; text-decoration:none; transition:--ci-bande .6s cubic-bezier(.4,0,.2,1), border-color .6s cubic-bezier(.4,0,.2,1); }
  #ci-carte .btn:hover, #ci-carte .btn:focus-visible { --ci-bande:440px; }               /* 440px : couvre aussi les boutons pleine largeur */
  #ci-carte .btn::before { content:""; position:absolute; left:50%; top:50%; width:150%; height:var(--ci-bande); background:var(--remplissage); transform:translate(-50%,-50%) rotate(-45deg); z-index:-1; }
  #ci-carte .btn-primary { --remplissage:#1B4681; background:var(--navy); color:#fff; border:0; }
  #ci-carte .btn-secondary { --remplissage:#00796B; background:#fff; color:var(--navy); border:1px solid var(--navy); }
  #ci-carte .btn-secondary:hover, #ci-carte .btn-secondary:focus-visible { border-color:#00796B; }
  /* libellé : blanc exactement là où passe la bande, bleu ailleurs → lisible à chaque instant de l'animation */
  #ci-carte .btn-secondary .lib { color:transparent; -webkit-background-clip:text; background-clip:text;
    background-image:linear-gradient(135deg, var(--navy) calc(50% - var(--ci-bande) / 2), #fff calc(50% - var(--ci-bande) / 2), #fff calc(50% + var(--ci-bande) / 2), var(--navy) calc(50% + var(--ci-bande) / 2)); }
  @media (forced-colors: active) { #ci-carte .btn-secondary .lib { color:ButtonText; background:none; } }
  @media (prefers-reduced-motion: reduce){ #ci-carte .btn { transition:none; } }
  #ci-carte .btn:focus-visible, #ci-carte .item-btn:focus-visible, #ci-carte .entete-res button:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
  #ci-carte .recherche .btn { width:52px; height:52px; flex:none; }
  #ci-carte .surtitre { font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); margin:0 0 12px; }
  #ci-carte .liste { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
  #ci-carte .item { border:1px solid var(--line); border-radius:14px; }
  #ci-carte .item-btn { width:100%; display:flex; align-items:center; gap:14px; padding:14px; background:none; border:0; text-align:left; cursor:pointer; font-family:inherit; border-radius:14px; }
  #ci-carte .pastille { width:14px; height:36px; border-radius:4px; flex:none; }
  #ci-carte .item-btn strong { display:block; color:var(--navy); font-size:16px; }
  #ci-carte .item-btn span { color:var(--gray); font-size:14px; }
  #ci-carte .chev { margin-left:auto; transition:transform .2s; }
  #ci-carte .item-btn[aria-expanded="true"] .chev { transform:rotate(90deg); }
  #ci-carte .details { padding:0 14px 14px 42px; display:grid; gap:12px; }
  #ci-carte .details[hidden] { display:none; }
  #ci-carte .coord { display:grid; gap:6px; font-size:15px; }
  #ci-carte .coord a { color:#1C212B; text-decoration:none; display:flex; gap:10px; align-items:center; }
  #ci-carte .coord a:hover { text-decoration:underline; }
  #ci-carte .actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  #ci-carte .fiche { border:1px solid var(--line); border-radius:16px; padding:20px; display:grid; gap:14px; margin:0 0 14px; }
  #ci-carte .ident { display:flex; align-items:center; gap:14px; }
  #ci-carte .ident img { width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; }
  #ci-carte .ident strong { display:block; color:var(--navy); font-size:18px; }
  #ci-carte .ident span { color:var(--gray); }
  #ci-carte .entete-res { display:flex; gap:12px; align-items:center; margin-bottom:16px; }
  #ci-carte .entete-res button { width:32px; height:32px; border-radius:50%; border:0; background:var(--soft); color:var(--navy); cursor:pointer; font-size:18px; flex:none; }
  #ci-carte .entete-res h2 { margin:0; font-size:20px; color:var(--navy); }
  #ci-carte .entete-res p { margin:0; color:var(--gray); font-size:14px; }
  #ci-carte svg.ic { width:16px; height:16px; flex:none; }
  #ci-carte .coord a { overflow-wrap:anywhere; }

  /* ---------- Responsive ---------- */
  @media (max-width: 1100px) {
    #ci-carte .card { grid-template-columns: minmax(0,1fr) 360px; padding:24px; }
  }
  /* tablette : carte au-dessus, panneau en dessous */
  @media (max-width: 900px) {
    #ci-carte { margin:24px auto; }
    #ci-carte .card { grid-template-columns:1fr; padding:20px; gap:20px; }
    #ci-carte .vue { width:100%; max-height:620px; }
    /* zoom remonté à droite de l'indice : ne masque plus la Corse */
    #ci-carte .zoom { top:0; bottom:auto; grid-auto-flow:column; }
    #ci-carte .zoom button + button { border-top:0; border-left:1px solid var(--line); }
    #ci-carte .indice { margin-right:104px; }
  }
  /* mobile */
  @media (max-width: 600px) {
    #ci-carte { margin:0 auto; padding:0; }
    #ci-carte .card { border-radius:0; padding:16px 12px; gap:16px; }
    #ci-carte .indice { font-size:13px; padding:10px 14px; margin-bottom:12px; margin-right:92px; }
    #ci-carte .vue { border-radius:12px; max-height:none; }
    #ci-carte .zoom button { width:40px; height:40px; }
    #ci-carte .panneau { border-radius:16px; padding:16px; }
    #ci-carte .panneau > h2 { font-size:19px; }
    #ci-carte .panneau > label { font-size:14px; }
    #ci-carte .fiche { padding:16px; }
    #ci-carte .details { padding:0 14px 14px; }
    #ci-carte .item-btn { padding:12px; gap:12px; }
    #ci-carte .entete-res h2 { font-size:18px; }
    #ci-carte .suggestions small { display:none; }
  }
  @media (max-width: 360px) {
    #ci-carte .actions { grid-template-columns:1fr; }
  }
