/* ==========================================================================
   CCIVS — Répertoire des membres (Web 2.0 Directory v3)
   Dossier 101228 — v0.1.0

   Chargé par w2dc-v3.php. Version à incrémenter dans CCIVS_W2DC_VER
   à chaque modification de ce fichier.

   NOTE : le bloc « NOUVEAU RÉPERTOIRE » de style.css (lignes ~1711-2533,
   2745-2854, 2973-3243) visait le markup de la v2.9.10 et ne s'applique
   plus à rien depuis la migration. Il sera nettoyé séparément.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Logo affiché deux fois
   Les fiches migrées depuis la 2.9.10 portent le logo à la fois dans le champ
   image et en tête de la Description. En 2.9.10 seul un extrait s'affichait,
   et WordPress retire les images des extraits — le doublon était donc
   invisible. La v3 rend la Description complète, il ressort.
   Constaté sur 23 des 24 fiches de la première page.
   -------------------------------------------------------------------------- */

/* Index : la Description ne porte aucune image, le logo est déjà au-dessus. */
.w2dc-dir-cards .w2dc-listing-content__field--content img {
    display: none;
}

/* Fiche : on ne retire que le premier paragraphe, et seulement s'il ne
   contient rien d'autre que l'image. Une image insérée volontairement plus
   bas dans un texte est donc préservée. */
.w2dc-dir--listing .w2dc-dir-listing-content > p:first-child > img:only-child {
    display: none;
}

/* Retire le paragraphe devenu vide (évite l'espace résiduel).
   :has() n'est pas interprété par les très anciens navigateurs ; la règle
   ci-dessus suffit alors, au prix d'un léger blanc. */
.w2dc-dir--listing .w2dc-dir-listing-content > p:first-child:has(> img:only-child) {
    display: none;
}


/* --------------------------------------------------------------------------
   2. Hauteur des cartes
   La Description déverse le corps complet de la fiche : les cartes montaient
   à 830-938 px. On la ramène à 3 lignes, ce qui reproduit l'extrait tronqué
   de l'ancienne version. Ajuster le nombre de lignes ici au besoin.
   -------------------------------------------------------------------------- */

.w2dc-dir-cards .w2dc-listing-content__field--content .w2dc-listing-content__value {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Marges resserrées pour que la troncature tombe juste. */
.w2dc-dir-cards .w2dc-listing-content__field--content p {
    margin: 0 0 0.5em;
}

.w2dc-dir-cards .w2dc-listing-content__field--content p:last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   3. Curseur de distance invisible
   Le champ <input type="range"> a un fond quasi blanc (#fcfcfc) sur une carte
   blanche : seule la pastille bleue se voyait, la piste était invisible.
   On redessine piste et pastille explicitement. Note : dès qu'on stylise la
   piste, `accent-color` ne s'applique plus — WebKit n'ayant pas de sélecteur
   pour la portion remplie, la piste reste unie sur Chrome/Safari, alors que
   Firefox affiche le remplissage via ::-moz-range-progress.
   -------------------------------------------------------------------------- */

.w2dc-search-form__range input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 24px;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.w2dc-search-form__range input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: #d4dae1;
}

.w2dc-search-form__range input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: #d4dae1;
}

.w2dc-search-form__range input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: #2393ba;
}

.w2dc-search-form__range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2393ba;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.w2dc-search-form__range input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2393ba;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Repère visible au clavier (accessibilité). */
.w2dc-search-form__range input[type="range"]:focus-visible {
    outline: 2px solid #2393ba;
    outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   4. Fiches sans image
   Quand une fiche n'a pas d'image, le plugin n'émet aucun conteneur : le titre
   remonte et la carte se désaligne de ses voisines. On réserve la même zone,
   au même ratio 4:3 que le réglage « Card image ratio ».
   Si tu changes ce réglage, ajuste aussi l'aspect-ratio ci-dessous.
   -------------------------------------------------------------------------- */

.w2dc-dir-cards .w2dc-listing-content__body:not(:has(.w2dc-listing-content__images))::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    background: #f2f4f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23c3cad2' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center / 48px 48px no-repeat;
}


/* --------------------------------------------------------------------------
   5. Image recadrée sur la fiche individuelle
   La galerie de la fiche impose aspect-ratio 4/3 + object-fit: cover, ce que le
   réglage « Card image fit » du répertoire ne couvre pas. Un logo panoramique
   (celui de la Clinique Santé fait 4,78:1) s'y retrouvait amputé.
   On garde la boîte pour l'alignement, mais l'image s'y inscrit entière.
   -------------------------------------------------------------------------- */

.w2dc-dir--listing .sp-gallery__item img,
.w2dc-dir--listing .w2dc-listing-gallery__img {
    object-fit: contain;
}


/* --------------------------------------------------------------------------
   6. Panneau derrière l'image + marge autour du logo
   Reprend le principe de l'ancienne version : un fond derrière le logo et une
   image qui n'occupe que 85 % de la boîte, ce qui lui donne de l'air.
   Référence 2.9.10 : .w2dc-listing-logo-wrap { background-color: #EEE }
                      .w2dc-listing-logo-img  { background-size: 85% }
   L'original était un APLAT #EEE, pas un dégradé. Pour y revenir, remplacer la
   valeur de --ccivs-panneau par : #eeeeee
   -------------------------------------------------------------------------- */

.w2dc-dir-cards .w2dc-listing-content__body,
.w2dc-dir--listing .sp-gallery__item {
    --ccivs-panneau: linear-gradient(180deg, #f7f8f9 0%, #e4e6e9 100%);
}

/* Le conteneur devient le panneau, et centre son image. */
.w2dc-dir-cards .w2dc-listing-content__images {
    background: var(--ccivs-panneau);
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
}

/* 85 % de la boîte, comme avant : le logo respire au lieu de toucher les bords. */
.w2dc-dir-cards .w2dc-listing-content__images img {
    width: auto;
    height: auto;
    max-width: 85%;
    max-height: 85%;
}

/* Même traitement sur la fiche, pour que le logo détouré ne flotte pas sur du
   blanc. Retirer ce bloc si tu préfères la galerie sans fond. */
.w2dc-dir--listing .sp-gallery__item {
    background: var(--ccivs-panneau);
    border-radius: 4px;
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
}

.w2dc-dir--listing .sp-gallery__item img,
.w2dc-dir--listing .w2dc-listing-gallery__img {
    max-width: 85%;
    max-height: 85%;
    margin: auto;
}

/* Le substitut des fiches sans image reprend le même panneau. */
.w2dc-dir-cards .w2dc-listing-content__body:not(:has(.w2dc-listing-content__images))::before {
    background-color: transparent;
    background-image: var(--ccivs-panneau),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23b9c0c8' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
    background-size: cover, 48px 48px;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}


/* --------------------------------------------------------------------------
   7. Vue liste
   Par défaut la v3 empile l'image au-dessus du texte et la laisse occuper
   toute la largeur : 681 x 746 px d'image, 953 px de haut par fiche.
   Cible : conteneur de logo CARRÉ à gauche, à ras des bords de la carte,
   logo ajusté dedans avec sa marge, texte à droite, hauteur de la fiche
   dictée par le carré.

   Trois pièges rencontrés, mesurés sur le site :

   1. Grille à deux colonnes : l'image couvrant toutes les rangées gonflait la
      première à 360 px et dispersait les champs.
   2. Flottant : les champs sont en `display: grid`, donc ils établissent un
      contexte de formatage de bloc et se placent SOUS le flottant au lieu
      de le côtoyer.
   3. Le plugin applique `margin: -12px -16px 0` au conteneur d'image pour le
      faire déborder par-dessus le padding de MuiCardContent. En position
      absolue cette marge décalait le carré de 12 px vers le haut, d'où un
      blanc de 24 px sous l'image ; en mobile, un `width: 100%` l'empêchait
      de s'étendre à droite, d'où 32 px de blanc.

   Solution : au-dessus de 600 px on annule le padding de MuiCardContent et la
   marge négative, puis on sort le carré du flux — le corps porte lui-même son
   padding et son `min-height`. En dessous, on laisse la marge négative du
   plugin faire son travail et on se contente d'imposer le ratio.
   -------------------------------------------------------------------------- */

@media (min-width: 601px) {

    /* Le padding vertical de la carte passe sur le corps, pour que le carré
       puisse toucher les bords haut et bas. */
    .w2dc-dir-cards--list .MuiCardContent-root,
    .w2dc-dir-cards--list .MuiCardContent-root:last-child {
        padding: 0;
    }

    .w2dc-dir-cards--list .w2dc-listing-content__body {
        --ccivs-carre: 340px;
        display: block;
        position: relative;
        box-sizing: border-box;
        min-height: var(--ccivs-carre);
        padding: 14px 18px 14px calc(var(--ccivs-carre) + 22px);
    }

    /* Le carré, hors flux : il ne peut donc plus influencer la hauteur des
       rangées ni être fui par les champs. `margin: 0` annule la marge
       négative du plugin, devenue inutile ici. */
    /* Sélecteur aligné sur celui de w2dc-react.css (0,4,0) pour reprendre la
       main sur sa marge négative — une spécificité plus faible perdrait. */
    .w2dc-dir-cards--list .w2dc-card-fields > .w2dc-listing-content__body > .w2dc-listing-content__images:first-child,
    .w2dc-dir-cards--list .w2dc-listing-content__body:not(:has(.w2dc-listing-content__images))::before {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        width: var(--ccivs-carre);
        height: var(--ccivs-carre);
        aspect-ratio: auto;
        border-radius: 4px 0 0 4px;
    }

    /* Le logo s'inscrit entier dans le carré, centré, le padding de 15 px
       faisant la marge. Pas de recadrage, comme partout ailleurs. */
    .w2dc-dir-cards--list .w2dc-listing-content__images img {
        max-width: 100%;
        max-height: 100%;
        margin: auto;
    }
}

@media (min-width: 601px) and (max-width: 1023px) {
    .w2dc-dir-cards--list .w2dc-listing-content__body {
        --ccivs-carre: 240px;
    }
}

@media (min-width: 601px) and (max-width: 767px) {
    .w2dc-dir-cards--list .w2dc-listing-content__body {
        --ccivs-carre: 190px;
    }
}

/* Sous 600 px, une colonne latérale n'a plus de sens : on laisse le plugin
   empiler et déborder comme il le fait en vue grille (ses marges négatives
   assurent le bord à bord), on impose seulement le ratio. */
@media (max-width: 600px) {
    .w2dc-dir-cards--list .w2dc-listing-content__images {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    /* Le substitut des fiches sans image n'a pas la marge négative du plugin :
       on la lui donne pour qu'il affleure les bords comme les autres. */
    .w2dc-dir-cards--list .w2dc-listing-content__body:not(:has(.w2dc-listing-content__images))::before {
        width: auto;
        margin: -12px -16px 0;
    }
}