/**
 * CrecyPlage — Feuille de personnalisation du thème
 *
 * Le « CSS additionnel » du Personnalisateur reste en place tel quel :
 * il est GELE, on n y ajoute plus rien. Tout nouveau style vient ICI.
 *
 * Charge par inc/personnalisation-css.php (priorite 99).
 * Emplacement : assets/css/personnalisation.css (theme PARENT).
 */

/* =========================================================
   Barre de filtres commerçants sur UNE SEULE LIGNE
   Composant de recherche + bouton « Filtrer » + pastille active.
   Necessite template-parts/filters-commercant.php refondu
   (wrapper .cfilters--ligne, .cfilters__ligne, #cfilters-toggle).
   ========================================================= */

.cfilters--ligne .cfilters__ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* La recherche prend la place restante */
.cfilters--ligne .cfilters__searchbar {
    flex: 1 1 260px;
    min-width: 0;
    margin: 0;
    position: relative;
}

/* Bouton « Filtrer » : ouvre le panneau des facettes */
.cfilters__toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(30, 78, 122, .35);
    border-radius: 22px;
    background: none;
    color: #1E4E7A;
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.cfilters__toggle:hover {
    border-color: rgba(30, 78, 122, .6);
}

.cfilters__toggle-icone {
    flex: 0 0 auto;
}

.cfilters__badge {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 20px;
    background: #1E4E7A;
    color: #FEFCF6;
    font-size: 12px;
    text-align: center;
}

.cfilters__badge[hidden] {
    display: none;
}

/* Pastilles de filtres actifs : sur la meme ligne, sans le mot « Filtres : » */
.cfilters--ligne .cfilters__actifs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    margin: 0;
}

.cfilters--ligne .cfilters__actifs[hidden] {
    display: none;
}

.cfilters--ligne .cfilters__actifs-label {
    display: none;
}

.cfilters--ligne .cfilters__actifs-liste {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cfilters--ligne .cfilters__reset {
    font-size: 13px;
    opacity: .7;
}

/* Panneau des facettes, replie par defaut */
.cfilters__panneau {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(30, 78, 122, .04);
}

.cfilters__panneau[hidden] {
    display: none;
}

.cfilters--ligne .cfilters__facettes {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0;
}

.cfilters--ligne .cfacette {
    flex: 1 1 180px;
    min-width: 0;
}

/* Mobile : la recherche seule sur sa ligne */
@media (max-width: 640px) {
    .cfilters--ligne .cfilters__searchbar {
        flex: 1 1 100%;
    }
    .cfilters--ligne .cfilters__facettes {
        display: block;
    }
}

/* =========================================================
   Fil d'Ariane des archives
   Place SOUS le titre et le compteur : plus aucun croisement
   avec le logo debordant, et la hierarchie de lecture est
   respectee (le titre d'abord). Caracteres fins et discrets :
   c'est un repere de navigation, pas une information.
   ========================================================= */

.commercants-archive__fil {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: .02em;
    opacity: .6;
}

.commercants-archive__fil a {
    color: inherit;
    text-decoration: none;
}

.commercants-archive__fil a:hover {
    text-decoration: underline;
}

/* =========================================================
   Bandeau titre des archives commerçants — hauteur réduite
   ========================================================= */

.commercants-archive--compact .commercants-archive__header {
    padding: 3rem 0 1.0rem;
}

/* =========================================================
   Barre de filtres — bas reduit de moitie
   AUCUN padding-top declare : l'espace au-dessus de la zone de
   saisie reste exactement celui du theme, la zone ne bouge pas.
   Seul le bas passe de 1rem a 0.5rem.
   ========================================================= */

.commercants-archive--compact .commercants-archive__filters-bar {
    padding-bottom: 0.5rem;
}

/* =========================================================
   Menu — 3e niveau en popup laterale
   « Enfants » ouvre sa propre popup, decalee sur la DROITE de
   son entree, comme dans un menu classique. Rien n'est affiche
   en permanence, et la liste des commerces ne pousse plus les
   entrees voisines vers le bas.
   Le panneau herite du fond, de l'ombre, de l'arrondi et du
   masquage au survol deja definis pour les sous-menus : on ne
   redefinit ici que sa POSITION.
   ========================================================= */

/* BORNÉE elle aussi : en mobile, un sous-sous-menu poussé à « left: 100% »
   sortait de l'écran par la droite. Les niveaux s'y empilent dans le flux. */
@media (min-width: 769px) {
    .site-nav__list .sub-menu .sub-menu {
        top: 0;
        left: 100%;
        margin-left: 2px;
    }
}

/* Près du bord droit de l'écran, la popup part vers la gauche.

   LA RÈGLE NE COMPTE PLUS LES PICTOGRAMMES. Elle visait les deux derniers
   éléments du menu — ce qui était juste jusqu'à ce qu'on ajoute Facebook et
   Instagram en fin de liste. Depuis, elle protégeait deux entrées qui n'ont
   aucun sous-menu, pendant que les vraies rubriques de fin sortaient du cadre
   à droite.

   Deux garde-fous plutôt qu'un comptage fragile. D'abord on exclut
   explicitement les pictogrammes ; ensuite on élargit à quatre positions au
   lieu de deux, de sorte que la règle tienne même si tu ajoutes ou retires
   une entrée sociale. Une popup qui s'ouvre à gauche alors qu'elle aurait la
   place à droite ne gêne personne ; l'inverse sort de l'écran. */
/* BORNÉE AU-DESSUS DU SEUIL MOBILE. En dessous, les sous-menus s'ouvrent dans
   le flux, les uns sous les autres : ils n'ont aucun côté vers lequel partir,
   et cette règle les déplaçait pour rien. */
@media (min-width: 769px) {
    .site-nav__list > li:nth-last-child(-n+4):not(.menu-facebook):not(.menu-instagram) .sub-menu .sub-menu {
        left: auto;
        right: 100%;
        margin-left: 0;
        margin-right: 2px;
    }
}

/* Fleche laterale sur l'entree qui ouvre la popup */
.site-nav__list .sub-menu .menu-item-has-children > a::after {
    content: "\203A";
    float: right;
    margin-left: .6em;
}

/* =========================================================
   Espace commerçant — bannière de revendication (bas de fiche)
   ========================================================= */

.ec-revendication {
    margin: 32px 0 8px;
    padding-top: 20px;
    border-top: 1px solid rgba(30, 78, 122, .12);
    text-align: center;
}

.ec-revendication__amorce {
    background: none;
    border: 0;
    padding: 4px 8px;
    font: inherit;
    font-size: 14px;
    color: #3B6CB7;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ec-revendication__amorce:hover {
    color: #1A2E4A;
}

.ec-revendication__form {
    max-width: 460px;
    margin: 14px auto 0;
    padding: 18px 20px;
    text-align: left;
    background: #EEF4FB;
    border-radius: 12px;
}

.ec-revendication__form[hidden] {
    display: none;
}

.ec-revendication__intro {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #1A2E4A;
}

.ec-revendication__form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1A2E4A;
    margin-bottom: 4px;
}

.ec-revendication__form input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid rgba(30, 78, 122, .3);
    border-radius: 8px;
    font-size: 15px;
}

.ec-revendication__envoyer {
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-radius: 24px;
    background: #E76F51;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ec-revendication__envoyer:hover {
    background: #d65f43;
}

.ec-revendication__envoyer:disabled {
    opacity: .6;
    cursor: default;
}

.ec-revendication__retour {
    font-size: 13.5px;
    color: #1A2E4A;
    margin-bottom: 10px;
    min-height: 1em;
}

/* =========================================================
   Espace commerçant — pages /mon-commerce/
   ========================================================= */

.ec-espace {
    padding: 40px 0 64px;
}

.ec-espace__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;
}

.ec-espace__titre {
    color: #1A2E4A;
    margin: 0 0 18px;
}

.ec-espace__texte {
    color: #1A2E4A;
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0 0 12px;
}

.ec-espace__bouton {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 18px;
    border-radius: 24px;
    background: #3B6CB7;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.ec-espace__bouton:hover {
    background: #1A2E4A;
}

.ec-espace__lien {
    color: #3B6CB7;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =========================================================
   Espace commerçant — tableau de bord
   ========================================================= */

.ec-dash { padding: 32px 0 64px; }
.ec-dash__inner { max-width: 960px; margin: 0 auto; padding: 0 20px; }

.ec-dash__tete {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}
.ec-dash__kicker {
    margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: #3B6CB7;
}
.ec-dash__titre { margin: 2px 0 0; color: #1A2E4A; }
.ec-dash__deco {
    color: #3B6CB7; text-decoration: underline; text-underline-offset: 3px; font-size: 14px;
}

.ec-dash__grille {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
@media (max-width: 720px) { .ec-dash__grille { grid-template-columns: 1fr; } }

.ec-carte {
    background: #fff; border: 1px solid rgba(30,78,122,.12);
    border-radius: 14px; padding: 20px 22px;
}
.ec-carte--attente { background: #F7F9FC; }
.ec-carte__titre { margin: 0 0 6px; color: #1A2E4A; font-size: 18px; }
.ec-carte__intro { margin: 0 0 14px; color: #444; font-size: 14px; line-height: 1.5; }
.ec-carte__alerte { color: #8a1f11; font-size: 14px; }

.ec-push label {
    display: block; font-size: 13px; font-weight: 600; color: #1A2E4A; margin: 10px 0 4px;
}
.ec-push input, .ec-push textarea {
    width: 100%; box-sizing: border-box; padding: 9px 12px;
    border: 1px solid rgba(30,78,122,.3); border-radius: 8px; font-size: 15px;
}
/* Textarea du push : étirement VERTICAL seulement (pas en biais). */
.ec-push textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.ec-push__retour { margin: 10px 0 0; font-size: 14px; color: #1A2E4A; min-height: 1em; }
/* Plafond atteint : on informe, on ne réprimande pas. Ton neutre, pas d'alerte
   rouge — le commerçant n'a rien fait de mal. */
/* Compteur d'abonnés. Volontairement mis en avant : c'est le chiffre qui
   donne envie de poser l'affichette sur le comptoir. */
.ec-abonnes {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: #FCF7EC;
    border-left: 3px solid #E76F51;
    border-radius: 10px;
}
.ec-abonnes__nombre {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #E76F51;
}
.ec-abonnes__mot {
    font-size: 14.5px;
    color: #1A2E4A;
}
.ec-abonnes__mot--vide {
    font-weight: 600;
    color: #1A2E4A;
}
.ec-abonnes__aide {
    flex: 1 0 100%;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #5a626d;
}

.ec-push__attente {
    margin: 14px 0 0;
    padding: 12px 14px;
    background: #F4F6F9;
    border-left: 3px solid #6B9FCC;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #1A2E4A;
}
.ec-push__attente span {
    display: block;
    margin-top: 6px;
    color: #5a626d;
}

.ec-btn {
    display: inline-block; padding: 10px 16px; margin: 4px 6px 4px 0;
    border: 1px solid #3B6CB7; border-radius: 24px;
    background: #fff; color: #3B6CB7; font-weight: 600; font-size: 14px;
    text-decoration: none; cursor: pointer;
}
/* L'attribut hidden applique display:none depuis la feuille du navigateur,
   la moins prioritaire de toutes : la règle display:inline-block ci-dessus
   l'écrasait et le bouton restait visible malgré son hidden. */
.ec-btn[hidden] { display: none; }
.ec-btn:hover { background: #EEF4FB; }
.ec-btn--primaire {
    margin-top: 14px; border-color: #E76F51; background: #E76F51; color: #fff; width: 100%;
}
.ec-btn--primaire:hover { background: #d65f43; }
.ec-btn--primaire:disabled { opacity: .6; cursor: default; }

.ec-affichette-liens { display: flex; flex-wrap: wrap; }
.ec-dash__lienfiche { margin-top: 22px; }
.ec-dash__lienfiche a { color: #3B6CB7; text-decoration: underline; text-underline-offset: 3px; }

/* Espace commerçant — compteur de caractères + bloc conseil */
.ec-push__compte {
    margin: 4px 0 0;
    font-size: 12px;
    color: #7a8290;
    text-align: right;
}
.ec-conseil {
    margin-top: 18px;
    padding: 16px 18px;
    background: #EEF4FB;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #1A2E4A;
}
.ec-conseil p { margin: 0 0 10px; }
.ec-conseil p:last-child { margin-bottom: 0; }
.ec-conseil__titre { font-weight: 700; }
.ec-conseil__aide { color: #3B6CB7; font-weight: 600; }

/* Espace commerçant — encart « aperçu privé » sous le bouton d'envoi.
   Volontairement distinct du bloc conseil (bleu) : fond sable et liseré
   corail, pour qu'on ne confonde pas « je me teste » et « j'envoie ». */
.ec-apercu {
    margin-top: 18px;
    padding: 16px 18px;
    background: #FCF7EC;
    border: 1px solid rgba(231, 111, 81, .22);
    border-left: 3px solid #E76F51;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #1A2E4A;
}
.ec-apercu__titre {
    margin: 0 0 6px;
    font-weight: 700;
}
.ec-apercu__intro {
    margin: 0 0 12px;
    color: #4a5260;
}
.ec-apercu__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.ec-apercu .ec-btn {
    font-size: 13.5px;
    padding: 9px 14px;
}
/* Appareil déjà inscrit aux aperçus : bouton neutralisé, mais lisible. */
.ec-apercu .ec-btn.is-subscribed,
.ec-apercu .ec-btn:disabled {
    border-color: rgba(30, 78, 122, .25);
    background: #fff;
    color: #7a8290;
    cursor: default;
}
/* Bulle de notification reproduite dans la page. Volontairement dans les gris
   du système et non dans la charte : elle doit ressembler à une notification,
   pas à un élément du site. */
.ec-notif {
    margin: 0 0 14px;
}
.ec-notif__cadre {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: rgba(250, 250, 252, .96);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(6, 48, 71, .13);
    backdrop-filter: blur(6px);
}
.ec-notif__icone {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    object-fit: cover;
    background: #fff;
}
.ec-notif__icone--vide {
    display: block;
    background: #d8dde4;
}
.ec-notif__texte {
    min-width: 0;
    flex: 1 1 auto;
}
.ec-notif__source {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 2px;
    font-size: 11.5px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #8b929c;
}
.ec-notif__quand {
    flex: 0 0 auto;
    text-transform: none;
    letter-spacing: 0;
}
.ec-notif__titre {
    margin: 0 0 2px;
    font-size: 14.5px;
    font-weight: 700;
    color: #14161a;
    /* Une notification coupe sur une ligne : autant que ce soit visible ici. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ec-notif__corps {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    color: #3d434c;
    /* Deux lignes maximum, comme sur un téléphone. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ec-notif.is-vide .ec-notif__corps {
    color: #9aa1ab;
    font-style: italic;
}

/* Arrivée de la notification : glissement court, comme sur un téléphone. */
@keyframes ec-notif-entree {
    0%   { transform: translateY(-14px) scale(.98); opacity: 0; }
    60%  { transform: translateY(2px) scale(1); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.ec-notif.est-entree .ec-notif__cadre {
    animation: ec-notif-entree .42s cubic-bezier(.2, .8, .3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    .ec-notif.est-entree .ec-notif__cadre { animation: none; }
}

.ec-apercu__retour {
    margin: 10px 0 0;
    font-size: 13.5px;
    color: #1A2E4A;
    min-height: 1em;
}


/* Espace commerçant — carte d'édition sur toute la largeur */
.ec-carte--large { grid-column: 1 / -1; }


/* Espace commerçant — zones de texte agrandissables */
.ec-edit textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.ec-edit__grand { min-height: 130px; }
.ec-edit textarea[data-champ="_content"] { min-height: 220px; }
.ec-edit__aide-format { font-size: 12px; color: #7a8290; margin-top: 4px; }


/* Espace commerçant — liste d'historique */
.ec-histo { list-style: none; margin: 8px 0 0; padding: 0; }
.ec-histo li { font-size: 13.5px; color: #1A2E4A; padding: 6px 0; border-bottom: 1px solid rgba(30,78,122,.1); }
.ec-histo__date { font-weight: 600; }


/* Commerces invités dans les listes d'activités : badge « commerce » */
.crecy-card__badge-commerce {
  position: absolute; top: 10px; left: 10px;
  background: #2F6887; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.crecy-card--commerce .crecy-card__media { position: relative; }


/* =========================================================
   Bandeau pub de l'entête d'archive commerçant
   Slot « entete » — DISTINCT de « archive-haut », qui sert la
   pub du bas malgré son nom.

   PRINCIPE : on se pose dessus, on ne se loge pas dedans.
   header.php n'est pas touché, pubs.css n'est pas touché. Tout
   se joue ici, dans un contexte borné par .commercants-archive__entete-pub.

   HAUTEUR DE LA BANDE INCHANGÉE — c'est la contrainte principale.
   pubs.css impose min-height: 220px au bandeau (et 160px au
   placeholder), ce qui ferait grandir la bande de force. On
   neutralise ces minimums ICI et seulement ici : la colonne de
   droite s'étire alors sur la hauteur de la colonne de gauche,
   et ce sont toujours le titre et le fil d'Ariane qui fixent la
   hauteur, exactement comme avant.
   ========================================================= */

.commercants-archive__entete-grille {
    display: flex;
    align-items: center;
    gap: 24px;
}

.commercants-archive__entete-texte {
    flex: 1 1 auto;
    min-width: 0;
}

/* Dimensions relevees sur le croquis de Bruno : 655 x 155 px.
   Valeurs posees telles quelles, pas de pourcentage deduit.
   flex-shrink reste actif pour qu'un ecran etroit ne fasse pas
   deborder la bande ; en dessous de 782px la pub passe dessous. */
.commercants-archive__entete-pub {
    flex: 0 1 655px;
    width: 655px;
    max-width: 100%;
    display: flex;
}

/* Le bandeau remplit la colonne. Sans ces trois lignes il garde
   son margin: 2rem auto et son max-width: 1100px de pubs.css. */
.commercants-archive__entete-pub .crecy-pubauto {
    width: 100%;
    margin: 0;
    max-width: none;
}

/* Hauteur : 155px, valeur du croquis. Le min-height de pubs.css
   (220px pour le bandeau, 160px pour le placeholder) est neutralise
   ici et seulement ici, sinon la bande grandirait de force. */
.commercants-archive__entete-pub .crecy-pubauto--banner,
.commercants-archive__entete-pub .crecy-pubauto--placeholder.crecy-pubauto--banner {
    min-height: 0;
    height: 155px;
}
.commercants-archive__entete-pub .crecy-pubauto--banner .crecy-pubauto__link,
.commercants-archive__entete-pub .crecy-pubauto--placeholder.crecy-pubauto--banner .crecy-pubauto__link {
    min-height: 0;
}

.commercants-archive__entete-pub .crecy-pubauto__link {
    height: 100%;
}

/* Colonne étroite : le texte reprend toute la largeur disponible
   (60% de 42%, c'était illisible) et l'échelle typographique
   redescend d'un cran pour tenir dans la hauteur de la bande. */
.commercants-archive__entete-pub .crecy-pubauto--banner .crecy-pubauto__overlay {
    max-width: 100%;
    padding: 1.1rem 1.3rem;
}

.commercants-archive__entete-pub .crecy-pubauto__label {
    font-size: 0.62rem;
    margin-bottom: 0.5rem;
}

.commercants-archive__entete-pub .crecy-pubauto--banner .crecy-pubauto__title {
    font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem);
    margin-bottom: 0.4rem;
}

.commercants-archive__entete-pub .crecy-pubauto--banner .crecy-pubauto__tagline {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0.7rem;
}

.commercants-archive__entete-pub .crecy-pubauto__cta {
    padding: 0.45em 1.1em;
    font-size: 0.85rem;
}

/* Voile : NEUTRE et LEGER.
   Deux corrections par rapport a ma version precedente. D'abord la
   couleur : le rgba(7,59,76) de pubs.css est un bleu-vert, et pousse
   fort il TEINTE la photo au lieu de l'assombrir — toutes les images
   viraient au bleu. Un noir pur assombrit sans colorer, la devanture
   garde ses vraies couleurs. Ensuite l'intensite : elle retombe a zero
   avant le bord droit, donc la partie de la photo qui porte le sujet
   reste franche. La lisibilite du texte est assuree par les
   text-shadow deja poses dans pubs.css, pas par le voile. */
.commercants-archive__entete-pub .crecy-pubauto--banner .crecy-pubauto__image::after {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.30) 50%,
        rgba(0, 0, 0, 0.00) 82%);
}

.commercants-archive__entete-pub .crecy-pubauto--placeholder .crecy-pubauto__overlay {
    padding: 1.1rem 1.3rem;
}

/* Sous 782px : la pub passe SOUS le texte, pleine largeur, et
   reprend son gabarit normal de pubs.css — plus rien à contraindre,
   la bande n'est plus en jeu. */
@media (max-width: 782px) {
    .commercants-archive__entete-grille {
        display: block;
    }
    .commercants-archive__entete-pub {
        width: auto;
        max-width: none;
        margin-top: 16px;
    }
    .commercants-archive__entete-pub .crecy-pubauto--banner,
    .commercants-archive__entete-pub .crecy-pubauto--placeholder.crecy-pubauto--banner {
        height: auto;
        min-height: 220px;
    }
}


/* ---------------------------------------------------------
   Emplacement vendable, quand personne ne l'occupe
   Contour corail dashed, fond transparent, une ligne discrete.
   Rendu par le placeholder minimal de pubs.php (slot « entete »).
   Double classe .crecy-pubauto--placeholder.--placeholder-simple :
   il faut passer devant le fond degrade et le contour sable que
   pubs.css donne a tous les placeholders.
   --------------------------------------------------------- */

/* Corail PLEIN, pas transparent. En rgba(.5) sur la bande sable il se
   melangeait au fond et virait au beige : la legerete vient du trait
   fin et des pointilles, pas de l'opacite. */
.crecy-pubauto--placeholder.crecy-pubauto--placeholder-simple {
    background: transparent;
    border: 1.5px dashed #E76F51;
    box-shadow: none;
}

.crecy-pubauto--placeholder.crecy-pubauto--placeholder-simple:hover {
    border-color: #D35A3A;
    box-shadow: none;
    transform: none;
}

.crecy-pubauto--placeholder-simple .crecy-pubauto__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

.crecy-pubauto--placeholder-simple .crecy-pubauto__overlay {
    position: static;
    max-width: 100%;
    padding: 1rem 1.2rem;
    align-items: center;
}

.crecy-pubauto--placeholder-simple .crecy-pubauto__placeholder-text {
    margin: 0;
    color: #E76F51;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: .01em;
}

/* =========================================================================
   Réseaux sociaux — pied de page et menu principal

   Un réseau s'ajoute en renseignant son adresse dans footer.php : ce bloc
   couvre déjà Facebook et Instagram, aucune retouche n'est nécessaire.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Logo du pied de page

   Le logo est un rond crème : sur le bleu nuit du footer, il ressort de
   lui-même. On se contente donc de le décoller du fond — un anneau très
   pâle et une ombre douce — plutôt que d'ajouter un effet qui lutterait
   avec lui. Le halo se resserre au survol, ce qui suffit à signaler que
   c'est un lien.
   ------------------------------------------------------------------------- */
.site-footer__logo {
    display: inline-block;
    line-height: 0;
    border-radius: 50%;
    margin: 0 0 14px;
    box-shadow:
        0 0 0 6px rgba(254, 252, 246, .07),
        0 14px 34px rgba(0, 0, 0, .38);
    transition: box-shadow .22s ease, transform .22s ease;
}
.site-footer__logo:hover,
.site-footer__logo:focus-visible {
    box-shadow:
        0 0 0 6px rgba(254, 252, 246, .16),
        0 18px 40px rgba(0, 0, 0, .45);
    transform: translateY(-2px);
}
.site-footer__logo img {
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
}
@media (max-width: 782px) {
    .site-footer__logo img { width: 108px; height: 108px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-footer__logo { transition: none; }
    .site-footer__logo:hover { transform: none; }
}

/* Pied de page. Fond bleu nuit : icônes et libellés en crème, dans une
   pastille discrète qui les détache sans crier. */
.site-footer__social {
    margin: 18px 0 0;
}
.site-footer__social-titre {
    margin: 0 0 8px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .75;
}
.site-footer__social-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer__social-lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 12px;
    border: 1px solid rgba(254, 252, 246, .35);
    border-radius: 999px;
    color: #FEFCF6;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    transition: background-color .18s ease, border-color .18s ease;
}
.site-footer__social-lien:hover,
.site-footer__social-lien:focus-visible {
    background: rgba(254, 252, 246, .12);
    border-color: rgba(254, 252, 246, .7);
    color: #FEFCF6;
}
.site-footer__social-icone {
    flex: 0 0 auto;
    display: block;
}

/* Menu principal. header.php n'est pas touché : on ajoute un élément
   « Lien personnalisé » dans Apparence > Menus avec la classe menu-facebook
   ou menu-instagram, et ce bloc remplace son texte par l'icône. Le libellé
   saisi dans WordPress reste lu par les lecteurs d'écran. */
/* Le libellé n'est PAS réduit à font-size:0 : cela écraserait la hauteur de
   ligne du lien, qui deviendrait plus court que les autres éléments du menu —
   et le souligné animé remonterait jusqu'à toucher le picto. On garde donc la
   hauteur d'un élément texte normal et on pousse simplement le libellé hors
   du cadre, l'icône étant posée par-dessus. Le souligné retombe alors
   exactement où il tombe sous les autres entrées, sans qu'on ait à y toucher. */
.menu-facebook > a,
.menu-instagram > a {
    position: relative;
    display: inline-block;
    width: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 110%;
    color: transparent !important;
}

/* Les deux pictos forment un groupe : ils se lisent ensemble et n'ont pas à
   respirer autant qu'entre deux rubriques. On resserre uniquement l'écart
   entre eux — l'espacement du reste du menu n'est pas touché. Réservé au
   menu horizontal : en mobile, les entrées sont empilées et une marge
   négative n'aurait aucun sens.
   Pour ajuster : jouer sur la largeur ci-dessus (30px) et sur la marge
   négative ci-dessous. */
@media (min-width: 900px) {
    .site-nav__list > li.menu-instagram {
        margin-left: -22px;
    }
}
.menu-facebook > a::before,
.menu-instagram > a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-indent: 0;
    width: 20px;
    height: 20px;
    background-color: #3B6CB7;
    transition: background-color .18s ease;
}
.menu-facebook > a:hover::before,
.menu-facebook > a:focus-visible::before,
.menu-instagram > a:hover::before,
.menu-instagram > a:focus-visible::before {
    background-color: #E76F51;
}
.menu-facebook > a::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.33-.04-1.56-.14-2.86-.14C11.93 2 10 3.66 10 6.7v2.8H7v4h3V22h4v-8.5z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.33-.04-1.56-.14-2.86-.14C11.93 2 10 3.66 10 6.7v2.8H7v4h3V22h4v-8.5z'/></svg>") no-repeat center / contain;
}
.menu-instagram > a::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='2'/><circle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='2'/><circle cx='17.2' cy='6.8' r='1.3' fill='%23000'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='2'/><circle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='2'/><circle cx='17.2' cy='6.8' r='1.3' fill='%23000'/></svg>") no-repeat center / contain;
}

/* =========================================================================
   Sous-menus du menu principal — dégagement du souligné

   Le bloc de sous-menu se colle au bas de son parent et recouvre le souligné
   animé. On le descend légèrement, SANS toucher à sa règle de position dans
   le header : un simple décalage visuel.

   Le pont invisible est indispensable. Sans lui, le décalage crée un vide
   entre le titre et le bloc : la souris le traverse, le survol se perd et le
   sous-menu se referme avant d'être atteint. Le ::before couvre exactement
   cette bande et rattrape le survol, sans rien afficher.
   ========================================================================= */
@media (min-width: 900px) {
    /* Premier niveau UNIQUEMENT : les popups latérales du 3e niveau sont
       calées sur « top: 0 » par rapport à leur entrée et ne doivent pas
       bouger. D'où le « > li > » qui les exclut. */
    /* margin-top plutôt que transform : le transform est souvent utilisé pour
       animer l'ouverture du sous-menu et remis à zéro au survol par une règle
       plus spécifique, ce qui annulait le décalage au moment même où le bloc
       devenait visible. La marge, elle, s'ajoute à la position sans entrer en
       conflit avec l'animation. Le !important n'est là que pour passer devant
       une éventuelle marge définie dans le header. */
    .site-nav__list > li > .sub-menu {
        margin-top: 8px !important;
    }
    .site-nav__list > li > .sub-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -8px;
        height: 8px;
        background: transparent;
    }
}

/* =========================================================================
   Sous-menus — resserrage vertical

   Les sous-menus descendaient presque jusqu'en bas de page : avec sept ou
   huit entrées, l'espacement d'origine cumule vite. On resserre donc les
   entrées DE SOUS-MENU uniquement.

   Le souligné animé orange n'est pas concerné : il vit sur les entrées de
   PREMIER niveau, auxquelles on ne touche pas. C'est d'ailleurs la raison
   d'agir ici plutôt que sur la hauteur globale du menu — réduire le premier
   niveau aurait déplacé le trait.

   Valeurs volontairement modestes : dis-moi si tu veux plus serré, ce sont
   les deux nombres ci-dessous.
   ========================================================================= */
.site-nav__list .sub-menu > li > a {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 1.35 !important;
}
.site-nav__list .sub-menu {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.site-nav__list .sub-menu > li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =========================================================================
   Sous-menus — plafond de hauteur

   Resserrer les espacements ne fait que reculer l'échéance : avec quinze
   entrées, un sous-menu débordera toujours de l'écran. On lui donne donc une
   hauteur maximale, et il défile à l'intérieur au-delà.

   Le calcul réserve la place du header au-dessus et une marge de respiration
   en dessous. Le sous-menu s'arrête ainsi toujours AVANT le bas de la fenêtre,
   quelle que soit la hauteur de l'écran — un portable 13 pouces comme un grand
   moniteur.

   overscroll-behavior évite que la molette, arrivée en bas de la liste,
   continue sur la page derrière et fasse disparaître le menu sous le curseur.
   ========================================================================= */
@media (min-width: 900px) {
    /* ATTENTION — overflow et popup latérale sont INCOMPATIBLES.

       Un panneau qui défile rogne tout ce qui sort de sa boîte, y compris un
       enfant positionné à sa droite. Le 3e niveau (« Enfants » et consorts)
       s'ouvre en left:100%, donc EN DEHORS du panneau : avec overflow, il
       disparaissait et l'on ne voyait plus que son ombre portée.

       On réserve donc le défilement aux sous-menus qui n'abritent AUCUNE
       popup. Ceux qui en ont une gardent leur débordement visible et se
       contentent du resserrage des entrées — c'est le compromis, on ne peut
       pas avoir les deux sur le même panneau. */
    .site-nav__list .sub-menu:not(:has(.sub-menu)) {
        max-height: calc(100vh - 170px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Barre de défilement discrète, aux couleurs du site plutôt qu'au gris
       du système, qui jurerait dans un panneau crème. */
    .site-nav__list .sub-menu:not(:has(.sub-menu))::-webkit-scrollbar {
        width: 8px;
    }
    .site-nav__list .sub-menu:not(:has(.sub-menu))::-webkit-scrollbar-thumb {
        background: rgba(47, 104, 135, .35);
        border-radius: 8px;
    }
    .site-nav__list .sub-menu:not(:has(.sub-menu))::-webkit-scrollbar-track {
        background: transparent;
    }
    .site-nav__list .sub-menu:not(:has(.sub-menu)) {
        scrollbar-width: thin;
        scrollbar-color: rgba(47, 104, 135, .35) transparent;
    }
}

/* =========================================================================
   Descriptions de catégories d'activité — texte justifié

   Même traitement que les présentations de fiches commerçant : un paragraphe
   justifié tient mieux le bloc sous un titre de rubrique.
   ========================================================================= */
.archive-header__desc,
.archive-header__desc p {
    text-align: justify;
}

/* =========================================================================
   Carte — liseré corail au-dessus et en dessous

   Deux traits pleine largeur qui détachent la carte de ce qui l'entoure,
   plutôt qu'un <hr> dans le gabarit : le rendu est le même, et le liseré
   suit la carte partout où elle apparaît, accueil comme rubriques.

   Le padding évite que les traits ne collent au cadre de la carte : sans
   lui, ils ressembleraient à une bordure du bloc plutôt qu'à un encadrement.
   ========================================================================= */
/* Le liseré est posé sur la CARTE elle-même, pas sur son conteneur.

   Sur le conteneur, le remboursage et la légende s'intercalaient : il restait
   une bande blanche entre le trait et la carte, ce qui trahissait le procédé.
   Ici les traits touchent le bleu, sans un pixel d'écart. */
.crecy-map-wrap {
    margin-top: 1.6rem;
    margin-bottom: 1.2rem;
}

/* Cible l'ID : la carte porte déjà des règles dans map.css, et une simple
   classe ne passait pas devant — les traits ne s'affichaient plus du tout. */
#crecy-map,
.crecy-map-wrap .crecy-map {
    /* Haut plus épais que le bas : au contact d'une grande masse bleue, un
       trait fin paraît toujours plus mince qu'il n'est. */
    border-top: 6px solid #E76F51 !important;
    border-bottom: 3px solid #E76F51 !important;
}

/* =========================================================================
   HERO — repli « marée descendante »

   Se déclenche sur la classe posée par inc/header-scroll.php quand le header
   se contracte : aucun script supplémentaire, les deux mouvements sont donc
   parfaitement synchrones.

   L'IDÉE. Plutôt qu'un fondu quelconque, on rejoue ce que raconte la page :
   la marée se retire. Le texte est aspiré vers le haut, le soleil plonge
   derrière l'horizon, les vagues remontent et se referment en une crête fine
   — sous laquelle la carte apparaît aussitôt.

   LES DURÉES SONT VOLONTAIREMENT INÉGALES. Le texte part le premier, le
   décor se referme derrière lui. L'inverse donnerait une impression de rideau
   qui tombe sur quelqu'un.

   ET ELLES SONT LONGUES. Une première version tournait à quatre dixièmes de
   seconde : le mouvement se jouait pendant qu'on défilait encore, et l'œil
   n'en voyait que le résultat. Un effet déclenché par le défilement doit
   durer plus longtemps que le geste qui le déclenche, sans quoi il n'existe
   pas. D'où presque une seconde ici — c'est beaucoup sur le papier, c'est
   juste ce qu'il faut à l'écran.
   ========================================================================= */
.hero {
    overflow: hidden;
    transition: max-height .95s cubic-bezier(.33, 1, .68, 1),
                padding-top .95s cubic-bezier(.33, 1, .68, 1),
                padding-bottom .95s cubic-bezier(.33, 1, .68, 1);
}

.hero__inner,
.hero__sun,
.hero__waves {
    transition: transform .85s cubic-bezier(.33, 1, .68, 1),
                opacity .5s ease-out;
}

/* Le titre se retire ligne par ligne, le sous-titre puis les boutons
   suivent. Un dixième de seconde d'écart entre chaque : assez pour qu'on
   sente le mouvement d'eau qui emporte le texte, trop peu pour qu'on y voie
   une succession. C'est ce décalage qui fait tout l'effet. */
.hero__title-1,
.hero__title-2,
.hero__sub,
.hero__cta {
    transition: transform .85s cubic-bezier(.33, 1, .68, 1),
                opacity .5s ease-out;
}
.hero__title-1 { transition-delay: 0s; }
.hero__title-2 { transition-delay: .1s; }
.hero__sub     { transition-delay: .18s; }
.hero__cta     { transition-delay: .26s; }

/* ---- État replié ---- */

/* Le bandeau ne disparaît pas : il devient une bande d'eau pleine, qui fait
   bordure haute à la carte.

   Cinquante-deux pixels, et non cent quatre comme dans une première version :
   à cette hauteur-là on devinait encore l'ondulation, ce qui donnait un reste
   de décor plutôt qu'une bordure franche. Réduit de moitié et combiné à
   l'étirement ci-dessous, il ne subsiste que la masse bleue. */
body.entete-compacte .hero {
    max-height: 52px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Aspiré vers le haut, derrière le header. On coupe aussi les clics : les
   deux boutons deviennent invisibles, ils ne doivent plus être atteignables
   au clavier ni à la souris. */
body.entete-compacte .hero__inner {
    opacity: 0;
    transform: translateY(-38px);
    pointer-events: none;
}

/* Le soleil se couche : il descend derrière la ligne d'eau et pâlit. */
body.entete-compacte .hero__sun {
    transform: translateY(70%) scale(.72);
    opacity: .35;
}

/* Les vagues s'étirent DEPUIS LEUR BASE.

   Une première version les remontait de 18 % : elles découvraient alors le
   fond sable en dessous d'elles, laissant une bande jaune entre l'eau et le
   liseré orange. En les étirant depuis le bas, elles restent collées au bord
   du bandeau et gagnent en hauteur — l'eau paraît monter sans jamais
   décoller.

   L'étirement est fort — deux fois et demie — et c'est voulu : la partie
   ondulée du tracé sort ainsi par le haut du bandeau, et il ne reste à
   l'écran que le bas plein. On obtient une bande d'eau unie plutôt qu'une
   crête résiduelle. */
body.entete-compacte .hero__waves {
    transform: scaleY(2.4);
    transform-origin: bottom;
}

@media (prefers-reduced-motion: reduce) {
    .hero,
    .hero__inner,
    .hero__sun,
    .hero__waves {
        transition: none;
    }
}

/* =========================================================================
   FICHES ACTIVITÉ — alignement des colonnes et texte justifié

   LE DÉFAUT. L'en-tête de la fiche est une grille « 1.2fr 1fr » : la photo
   occupe la première colonne, le titre et les informations la seconde. Le
   corps, lui, est en « 1.6fr 1fr ». Les deux grilles ne tombent donc pas au
   même endroit — le texte déborde à droite de la photo, et la carte, plus
   étroite, ne s'aligne pas sur le bloc qui la surplombe.

   LA CORRECTION. On donne au corps les proportions de l'en-tête. Le texte
   prend alors exactement la largeur de la photo, et la carte celle du bloc
   d'informations. Une seule valeur suffit : c'est la grille qui commande, pas
   les éléments.

   L'écartement entre colonnes est déjà le même dans les deux grilles, il n'y
   a donc rien à ajuster de ce côté.
   ========================================================================= */
.single-activite__body {
    grid-template-columns: 1.2fr 1fr;
}

/* Texte justifié, comme sur les fiches commerçant. */
.single-activite__content,
.single-activite__content p {
    text-align: justify;
}

/* =========================================================================
   PAGE DE CONTACT

   Les trois formulaires sont repliés par défaut : la page s'ouvre sur les
   coordonnées, et l'on ne déroule que celui dont on a besoin. Trois
   formulaires dépliés d'un coup décourageraient avant même la lecture.
   ========================================================================= */
/* LE CORPS EST CENTRÉ, PAS ALIGNÉ SUR LE TITRE.

   Le titre de la page reste au bord gauche du conteneur, comme tous les
   titres du site. Le corps, lui, est centré dans ce conteneur : c'est une
   demande explicite, et elle se tient — un bloc de lecture centré se parcourt
   mieux qu'un bloc collé au titre avec un grand vide à droite.

   J'ai fait l'erreur inverse deux fois de suite en alignant le corps sur le
   titre : ce n'est PAS ce qui est voulu ici. */
.crecy-contact {
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
}

.crecy-contact__lead {
    font-size: 1.05rem;
    line-height: 1.6;
}

.crecy-contact__liste {
    list-style: none;
    margin: 1.4rem 0;
    padding: 0;
}
.crecy-contact__liste li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(30, 78, 122, .12);
}
.crecy-contact__label {
    flex: 0 0 110px;
    font-size: 12.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5a626d;
}
.crecy-contact__liste a {
    font-size: 1.1rem;
    color: #1E5A7B;
    text-decoration: none;
    font-weight: 600;
}
.crecy-contact__liste a:hover { text-decoration: underline; }

.crecy-contact__qui {
    padding: 14px 16px;
    background: #FCF7EC;
    border-left: 3px solid #E76F51;
    border-radius: 10px;
    font-size: 14.5px;
    line-height: 1.55;
}

/* ---- Blocs dépliables ---- */
.crecy-contact__bloc {
    margin: 14px 0;
    border: 1px solid rgba(30, 78, 122, .18);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.crecy-contact__titre {
    padding: 14px 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1E5A7B;
    cursor: pointer;
    list-style: none;
}
.crecy-contact__titre::-webkit-details-marker { display: none; }
.crecy-contact__titre::after {
    content: "+";
    float: right;
    font-family: system-ui, sans-serif;
    font-weight: 400;
    color: #E76F51;
}
.crecy-contact__bloc[open] .crecy-contact__titre::after { content: "−"; }
.crecy-contact__titre:hover { background: #F7FAFD; }

.crecy-contact__intro {
    margin: 0 18px 4px;
    font-size: 14.5px;
    line-height: 1.55;
    color: #4a5260;
}

.crecy-contact__form { padding: 0 18px 18px; }

.crecy-contact__champ {
    margin: 14px 0 0;
}
.crecy-contact__champ label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #1A2E4A;
}
.crecy-contact__requis { color: #E76F51; }

.crecy-contact__champ input,
.crecy-contact__champ textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(30, 78, 122, .28);
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.45;
    background: #FEFCF6;
}
.crecy-contact__champ input:focus,
.crecy-contact__champ textarea:focus {
    outline: none;
    border-color: #E76F51;
    box-shadow: 0 0 0 3px rgba(231, 111, 81, .15);
}

/* Piège à robots : hors écran plutôt que display:none, que certains
   programmes savent détecter. Retiré du parcours clavier par tabindex. */
.crecy-contact__piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.crecy-contact__envoi { margin: 18px 0 0; }
.crecy-contact__bouton {
    padding: 12px 26px;
    border: 0;
    border-radius: 999px;
    background: #E76F51;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s ease;
}
.crecy-contact__bouton:hover { background: #d35a3a; }

.crecy-contact__retour {
    margin: 18px 0;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.5;
}
.crecy-contact__retour--ok {
    background: #E8F5E0;
    border-left: 3px solid #2a7;
    color: #1A2E4A;
}
.crecy-contact__retour--ko {
    background: #FCE9E2;
    border-left: 3px solid #E76F51;
    color: #7a2e18;
}

.crecy-contact__mention {
    margin-top: 2rem;
    font-size: 13px;
    line-height: 1.55;
    color: #5a626d;
}

/* ---- Contact : champs ajoutés (choix, photo, aide) ---- */
.crecy-contact__champ--choix {
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(30, 78, 122, .22);
    border-radius: 10px;
    background: #FCF7EC;
}
.crecy-contact__champ--choix legend {
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1A2E4A;
}
.crecy-contact__radio {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 15px;
    cursor: pointer;
}
.crecy-contact__radio input { width: auto; }

.crecy-contact__champ input[type="file"] {
    padding: 8px;
    background: #FEFCF6;
    font-size: 14px;
}

.crecy-contact__aide {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #5a626d;
}

/* =========================================================================
   ARCHIVE DES ACTIVITÉS — alignement calé sur celui des Commerces

   L'ÉCART MESURÉ : 24 pixels.

   Chez les Commerces, le rembourrage latéral est À L'INTÉRIEUR du conteneur :
       .commercants-archive__inner { max-width: 1240px; margin: 0 auto;
                                     padding: 0 1.5rem; }
   Le contenu utile mesure donc 1240 moins 48, soit 1192 pixels.

   Chez les Activités, il est SUR LE PARENT :
       .section        { padding: var(--gap-xl) 1.5rem; }
       .section__inner { max-width: 1240px; margin: 0 auto; }
   Le contenu utile mesure les 1240 pixels entiers, et démarre donc 24 pixels
   plus à gauche sur un écran large.

   On reproduit ici le modèle des Commerces : rembourrage latéral retiré de la
   section, reporté sur le conteneur intérieur. Le rembourrage VERTICAL de la
   section est conservé, il ne joue aucun rôle dans l'alignement.

   CIBLAGE VOLONTAIREMENT ÉTROIT. La classe « section » sert partout — accueil,
   blocs de suggestions, page 404. La modifier globalement déplacerait tout le
   site. On ne touche donc qu'à l'archive des activités.

   La FICHE d'une activité, elle, n'a rien à corriger : son conteneur porte
   déjà son rembourrage à l'intérieur, comme les Commerces.
   ========================================================================= */
/* SPÉCIFICITÉ DOUBLÉE, volontairement.

   Une première version écrivait « .section--archive » seul. Or « .section »
   pèse exactement le même poids, et il déclare son rembourrage par une
   propriété raccourcie — « padding: var(--gap-xl) 1.5rem » — qui reprend
   l'avantage selon l'ordre de chargement des feuilles. La règle ne
   s'appliquait donc pas de façon fiable.

   « .section.section--archive » vise le même élément mais avec deux classes :
   elle l'emporte quel que soit l'ordre, sans recourir à !important. */
.section.section--archive {
    padding-left: 0;
    padding-right: 0;
}

.section.section--archive > .section__inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* =========================================================================
   ENCART PARTENAIRE DE LA COLONNE — variante « card »

   CE QUI MANQUAIT. La variante card de la régie produisait son balisage
   depuis le début, mais AUCUNE règle ne l'accompagnait : ni dans main.css, ni
   ici. L'image de fond n'avait donc pas de hauteur, et l'encart s'affichait
   comme un lien nu. Il apparaît pourtant sur toutes les fiches de commerçants
   non premium, en bas de la colonne de droite.

   LE FORMAT RETENU : une carte, pas un rail vertical. Image en haut dans les
   proportions d'une vitrine, nom et accroche dessous. C'est le gabarit que le
   visiteur reconnaît déjà partout sur le site, donc celui que son œil ne
   contourne pas — un bandeau étroit de type 160 sur 600 aurait l'effet
   inverse.
   ========================================================================= */
.crecy-pubauto--card {
    display: block;
    margin: 1.5rem 0 0;
}

.crecy-pubauto--card .crecy-pubauto__label {
    display: block;
    margin-bottom: 6px;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a7b62;
}

.crecy-pubauto--card .crecy-pubauto__link {
    display: block;
    overflow: hidden;
    background: #FEFCF6;
    border: 1px solid rgba(30, 78, 122, .16);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}
.crecy-pubauto--card .crecy-pubauto__link:hover {
    border-color: #E76F51;
    transform: translateY(-2px);
}

/* La hauteur est donnée par le rapport, pas par une valeur fixe : l'encart
   suit la largeur de la colonne, quelle qu'elle soit. */
.crecy-pubauto--card .crecy-pubauto__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: #F2E2B6;
    background-size: cover;
    background-repeat: no-repeat;
}

.crecy-pubauto--card .crecy-pubauto__body {
    display: block;
    padding: 12px 14px 14px;
}

.crecy-pubauto--card .crecy-pubauto__title {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1E5A7B;
}

.crecy-pubauto--card .crecy-pubauto__tagline {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #4a5260;
}

/* ---- Emplacement libre ---- */
.crecy-pubauto--card.crecy-pubauto--placeholder .crecy-pubauto__link {
    border-style: dashed;
    border-color: rgba(231, 111, 81, .55);
    background: #FCF7EC;
}
.crecy-pubauto--card.crecy-pubauto--placeholder .crecy-pubauto__body {
    padding: 18px 16px;
    text-align: center;
}
.crecy-pubauto--card .crecy-pubauto__placeholder-title {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .98rem;
    font-weight: 700;
    color: #1E5A7B;
}
.crecy-pubauto--card .crecy-pubauto__placeholder-text {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #8a5a45;
}

/* =========================================================================
   FICHE COMMERÇANT SUR MOBILE — le bloc d'abonnement remonte en tête

   LE PROBLÈME. La fiche est une grille à deux colonnes : le contenu à gauche,
   la colonne latérale à droite, où le bloc « Recevez ses offres » figure en
   première position. Sous 880 pixels, la grille passe sur une seule colonne :
   la colonne latérale bascule alors ENTIÈREMENT sous le contenu, et le bloc se
   retrouve après la présentation, les horaires et les services. C'est-à-dire
   au moment où le visiteur a fini de lire et s'apprête à partir.

   LA SOLUTION. On efface la colonne latérale de la mise en page — ses enfants
   deviennent alors des enfants directs de la grille — puis on donne un rang à
   chacun. Le bloc d'abonnement passe premier, le contenu principal ensuite, et
   le reste de la colonne suit.

   POURQUOI PAS SIMPLEMENT REMONTER LA COLONNE ENTIÈRE : on ferait passer les
   horaires, le contact et le plan avant la présentation du commerce. Seul le
   bloc d'abonnement mérite cette place.

   Rien n'est perdu au passage : la colonne latérale ne porte aucun style
   propre — vérifié, elle n'apparaît nulle part dans single-commercant.css.
   ========================================================================= */
@media (max-width: 880px) {
    .fiche-body__side {
        display: contents;
    }

    /* ORDRE REVU. Une première version renvoyait toute la colonne de droite
       APRÈS le contenu : les infos pratiques et le plan se retrouvaient tout
       en bas de la fiche, alors que ce sont précisément les renseignements
       qu'on cherche en premier sur un téléphone — est-ce ouvert, où est-ce.

       L'ordre qui tient : la promesse d'abonnement, puis le pratique, puis
       le texte de présentation. */
    .fiche-body__side > .info-card--push {
        order: 1;
    }

    .fiche-body__side > *:not(.info-card--push) {
        order: 2;
    }

    .fiche-body__main {
        order: 3;
    }
}

/* =========================================================================
   MENU MOBILE — hauteur et défilement

   LE PROBLÈME. Le menu déployé était plafonné à 400 pixels, avec ce qui
   dépasse simplement masqué. Neuf entrées et leurs sous-menus n'y tiennent
   pas : la liste se coupait au milieu du pictogramme Facebook, et le
   sous-menu Commerces après « Enfants ». Rien n'indiquait qu'il y avait une
   suite, et rien ne permettait d'y accéder.

   LA CORRECTION. La hauteur maximale se calcule sur celle de l'écran, moins
   la place du header — le menu s'arrête donc toujours avant le bas de la
   fenêtre, sur un grand téléphone comme sur un petit. Et au-delà, il DÉFILE
   au lieu de masquer.

   Le défilement par inertie est activé pour iOS, sans quoi le geste paraît
   accrocher. Et le débordement est contenu : arrivé en bas de la liste, le
   doigt ne fait pas défiler la page derrière, ce qui refermerait le menu sous
   lui.
   ========================================================================= */
@media (max-width: 768px) {
    .site-nav.is-open {
        /* Repli pour les navigateurs anciens. */
        max-height: calc(100vh - 120px);
        /* SAFARI iOS : 100vh vaut la hauteur BARRE D'ADRESSE MASQUÉE, donc
           plus que ce qu'on voit. Le panneau descendait sous le bord visible,
           son contenu tenait dans cette hauteur trop généreuse, et le
           défilement interne ne s'activait jamais : le doigt traversait et
           attrapait la page derrière.
           svh est la hauteur barre AFFICHÉE — la plus petite, donc celle qui
           tient toujours. dvh conviendrait aussi mais varie pendant le
           défilement, ce qui fait sauter le panneau. */
        max-height: calc(100svh - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* La page derrière ne défile plus tant que le menu est ouvert. Sans cela,
       le geste qui dépasse le bas de la liste emporte le fond, et le menu se
       referme sous le doigt. */
    body:has(.site-nav.is-open) {
        overflow: hidden;
    }

    /* De l'air en haut ET en bas de la liste.

       En haut : le logo déborde sous le header, et le menu s'ouvre juste
       dessous — la première entrée, le pictogramme de la maison, se retrouvait
       collée contre lui. On ne touche pas au pictogramme, on lui laisse de la
       place.

       En bas : le dernier élément ne doit pas coller au bord, sous le pouce.

       La valeur du haut est le seul réglage : l'augmenter éloigne davantage la
       maison du logo. */
    .site-nav.is-open .site-nav__list {
        padding-top: 2.6rem;
        padding-bottom: 1.5rem;
    }

    /* Les sous-menus s'ouvrent dans le flux, sans hauteur propre : ils sont
       portés par le défilement du menu lui-même. Une limite ici les
       tronquerait une seconde fois. */
    .site-nav.is-open .sub-menu {
        max-height: none;
        overflow: visible;
    }

    /* DÉCALAGE VERS LA DROITE — la hiérarchie se voit d'un coup d'œil.

       Sans décalage, tous les niveaux s'alignaient au même bord et l'on ne
       savait plus à quelle rubrique appartenait une entrée. Décalé de moitié,
       le sous-menu se lit comme une branche, et le pouce descend le long du
       bord gauche sans quitter la rubrique parente des yeux.

       Le troisième niveau se décale à son tour, mais d'un quart et non d'une
       seconde moitié : il est déjà à mi-largeur, une moitié de plus le
       pousserait hors de l'écran. Un quart le distingue nettement de son
       parent tout en lui laissant de quoi afficher ses libellés.

       Si les libellés se cassent en trop de lignes sur un petit téléphone,
       ce sont ces deux valeurs qu'il faut réduire — 40 % puis 20 % restent
       tout aussi parlants. */
    /* padding et non margin : le panneau garde sa LARGEUR ENTIÈRE, donc son
       fond blanc et sa délimitation. Seul son contenu est décalé. */
    .site-nav.is-open .site-nav__list > li > .sub-menu {
        padding-left: 50%;
    }

    /* SEULE la popup de troisième niveau est concernée. Le panneau de premier
       niveau garde sa largeur et son fond : c'est lui qui porte le menu. */
    .site-nav.is-open .site-nav__list .sub-menu .sub-menu {
        margin-left: 50%;
        padding-left: .8rem;
        border-left: 2px solid rgba(231, 111, 81, .35);
        width: 15ch;
    }
}

/* =========================================================================
   TITRES DE PAGE — dégagés du logo

   Le logo déborde sous le header, et le titre venait s'y coller. L'interligne
   généreux écarte le titre de ce qui le surplombe.
   ========================================================================= */
h1 {
    font-size: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 2.05;
}

/* =========================================================================
   LISTE DES ARTICLES — dégagée du logo

   C'est la LISTE qu'on descend, pas les titres qu'elle contient : espacer
   chaque titre écarterait aussi les articles les uns des autres, alors qu'il
   ne manque de la place qu'en haut, sous le logo débordant.
   ========================================================================= */
.post-list {
    margin-top: 30px;
}

/* =========================================================================
   ARTICLES — texte justifié

   Comme les fiches, les activités et les histoires. La césure accompagne la
   justification : sans elle, une colonne justifiée creuse de grands blancs
   dès qu'un mot long tombe en fin de ligne — et « Crécy-la-Chapelle » ou
   « audioprothésiste » ne pardonnent pas.

   Seuls les PARAGRAPHES sont visés : justifier un titre, une légende ou un
   élément de liste court les étirerait pour rien.
   ========================================================================= */
.single-post .page-content__body p,
.single-post .entry-content p,
.post-list .post-list__excerpt,
.post-list p {
    text-align: justify;
    hyphens: auto;
}

/* La date, l'auteur et les mentions de rubrique restent alignés à gauche :
   ce sont des repères, pas du texte suivi. */
.single-post .entry-meta,
.single-post .entry-meta p,
.post-list .post-list__meta,
.crecy-offre__commerce,
.crecy-offre__date {
    text-align: left;
}

/* =========================================================================
   ARTICLES — largeur de lecture

   Le texte prenait toute la largeur du conteneur, soit près de 1200 pixels :
   l'œil perd sa ligne en revenant à la ligne suivante.

   52 rem, comme les histoires — un peu plus de 800 pixels, ce qui donne des
   lignes d'une longueur confortable. Le titre et l'illustration, eux, gardent
   la pleine largeur : ce sont des repères, pas du texte à suivre.
   ========================================================================= */
.single-post .page-content__body,
.single-post .entry-content {
    max-width: 52rem;
    /* CENTRÉ dans la zone de contenu, et non collé à gauche : sinon toute la
       place perdue s'accumule d'un seul côté et la page paraît bancale. */
    margin-left: auto;
    margin-right: auto;

    /* LA BANDE DE LECTURE, comme dans les histoires : fond à peine plus clair
       que la page et liseré corail à gauche. Elle court sur toute la hauteur
       du texte et le tient, comme la page d'un livre.

       L'écart de teinte est volontairement minime — un cadre franc
       découperait le texte de la page. Le liseré, lui, se voit : c'est le
       marque-page. */
    background: #FFFDF8;
    border-left: 3px solid #E76F51;
    border-radius: 0 16px 16px 0;
    padding: 2.6rem 3rem 2.2rem;
    box-shadow: 0 2px 18px rgba(6, 48, 71, .06);
}

@media (max-width: 700px) {
    /* Sur téléphone, les larges marges mangeraient la moitié de la largeur. */
    .single-post .page-content__body,
    .single-post .entry-content {
        padding: 1.6rem 1.3rem 1.4rem;
    }
}

/* Les blocs d'offre suivent la même largeur, sans quoi ils déborderaient du
   texte qu'ils accompagnent. */
.single-post .crecy-offre {
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================================
   PRISE DE CONTRÔLE D'UNE FICHE — visible sur mobile

   La bannière « Vous êtes le commerçant ? » n'apparaissait pas sur téléphone.
   Or c'est là qu'un commerçant la verra le plus souvent : il découvre sa
   fiche en la montrant à quelqu'un, ou parce qu'un client la lui a envoyée.
   La masquer sur mobile revenait à la masquer au bon moment.

   La règle est écrite en force parce qu'on ne sait pas laquelle la cachait —
   et qu'une bannière d'enrôlement invisible coûte plus cher qu'un `!important`
   dans une feuille de style.
   ========================================================================= */
.ec-revendication {
    display: block !important;
}

@media (max-width: 880px) {
    .ec-revendication {
        display: block !important;
        /* Elle passe en pleine largeur et se détache du contenu : sur un
           écran étroit, une bannière discrète devient invisible. */
        margin: 2rem 0 0;
        padding: 16px 18px;
        background: #FCF7EC;
        border-left: 3px solid #E76F51;
        border-radius: 0 12px 12px 0;
    }

    .ec-revendication__amorce {
        display: block;
        width: 100%;
        text-align: left;
        font-size: 15px;
        font-weight: 600;
    }

    /* Les deux champs prennent toute la largeur : à moitié, on tape mal une
       adresse email au pouce. */
    .ec-revendication input[type="email"],
    .ec-revendication input[type="tel"],
    .ec-revendication input[type="text"] {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px; /* en dessous de 16 px, iOS zoome à la saisie */
    }
}

/* =========================================================================
   PIED DE PAGE — compléments

   Le gros du style vit dans main.css ; on n'ajoute ici que ce que le nouveau
   pied de page introduit.
   ========================================================================= */

/* Quatre colonnes qui se réduisent d'elles-mêmes : la première, celle de la
   marque, garde plus de place que les listes de liens. */
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 32px;
}


/* La phrase qui dit qui porte le site : détachée des colonnes, centrée, et
   d'un ton plus bas — c'est une information, pas un argument. */
.site-footer__porte {
    max-width: 46rem;
    margin: 2rem auto 0;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(254, 252, 246, .14);
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(254, 252, 246, .7);
}
.site-footer__porte strong { color: rgba(254, 252, 246, .92); }
.site-footer__porte a { color: #F4A261; }
.site-footer__porte a:hover { color: #FEFCF6; }

@media (max-width: 900px) {
    /* Deux colonnes plutôt que quatre : à quatre sur une tablette, chaque
       liste se réduit à une colonne de mots coupés. */
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
    .site-footer__col--brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .site-footer__grid { grid-template-columns: 1fr; }
}

@media print {
    .site-footer { display: none; }
}

/* =========================================================================
   PIED DE PAGE EN PLEINE LARGEUR

   Le conteneur intérieur était borné par main.css, comme le reste du site.
   On lève cette borne ICI seulement : le pied de page n'a pas la même
   fonction qu'un texte à lire — il présente des listes courtes, qui gagnent
   à s'étaler.

   Sélecteur allongé à dessein, pour passer devant la règle de main.css sans
   avoir à la modifier : ce fichier reste le seul endroit où l'on écrit.
   ========================================================================= */
/* ÉCRIT EN FORCE, à regret et à dessein.
   La borne de largeur vient d'une règle de main.css qu'on n'a pas identifiée,
   et qui gagne malgré un sélecteur plus précis — donc soit elle porte déjà un
   « important », soit elle s'applique à un conteneur au-dessus. Plutôt que
   d'ajouter un tour de recherche, on tranche ici. À nettoyer le jour où la
   règle coupable sera trouvée. */
.site-footer .site-footer__inner,
footer.site-footer .site-footer__inner {
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Une respiration qui suit l'écran : sans elle, le texte collerait au
       bord sur un grand moniteur comme sur un téléphone. */
    padding-left: clamp(20px, 4vw, 72px) !important;
    padding-right: clamp(20px, 4vw, 72px) !important;
}

/* LE FOND DU PIED DE PAGE, D'UN BORD À L'AUTRE.
 *
 * CE QUE LES MESURES ONT ÉTABLI. header.php n'ouvre AUCUN conteneur : le pied
 * de page est un enfant direct de body. C'est donc « body » lui-même qui est
 * borné à 1160 pixels, et rien posé sur le pied de page ne peut l'élargir.
 *
 * LA TENTATIVE PRÉCÉDENTE A ÉCHOUÉ PAR MA FAUTE. J'avais accompagné le
 * débordement d'un « overflow-x: hidden » sur body, censé éviter une barre de
 * défilement horizontale — mais qui CRÉE une zone de rognage. Les colonnes
 * sortaient du cadre et se faisaient couper net. Le garde-fou et le piège,
 * posés ensemble.
 *
 * LA MÉTHODE RETENUE NE DÉPLACE RIEN. Une ombre portée sans flou, étalée sur
 * la largeur de l'écran, PEINT le fond au-delà des bords sans qu'aucun élément
 * ne bouge. Le « clip-path » l'autorise à déborder à gauche et à droite, mais
 * pas en haut ni en bas, où elle recouvrirait le contenu voisin.
 *
 * ORDRE DES QUATRE VALEURS : haut, droite, bas, GAUCHE. Une première
 * version laissait la dernière à zéro — le fond ne s'étendait alors que
 * vers la droite.
 *
 * Aucun risque de rognage, aucune barre de défilement : la mise en page reste
 * exactement ce qu'elle est, seul le fond s'étend.
 *
 * LE CONTENU, LUI, RESTE À LA LARGEUR DU SITE — et c'est voulu. Des listes de
 * liens étalées sur 1900 pixels seraient plus difficiles à parcourir que
 * groupées, et le pied de page resterait aligné sur le reste de la page.
 */
.site-footer {
    box-shadow: 0 0 0 100vw #063047;
    clip-path: inset(0 -100vw 0 -100vw);
}

/* La décoration en vagues suit le même traitement, sinon elle s'arrêterait
   net à 1160 pixels au milieu d'un fond qui, lui, continue. */
.site-footer__deco {
    box-shadow: 0 0 0 100vw #063047;
    clip-path: inset(0 -100vw 0 -100vw);
}

/* Les colonnes s'écartent un peu plus, maintenant qu'elles ont la place. */
.site-footer .site-footer__grid {
    gap: 40px;
}

/* La phrase qui dit qui porte le site reste ÉTROITE et centrée : c'est du
   texte à lire, pas une liste de liens — l'étaler sur 1900 pixels la rendrait
   pénible. */
.site-footer .site-footer__porte {
    max-width: 46rem;
}

/* ============================================================
   RÉSEAUX SOCIAUX DE LA CARTE CONTACT (fiches activité)
   ============================================================
   Même rendu que les pastilles des fiches commerçant, mais avec des classes
   à elles. La feuille single-commercant.css n'est chargée QUE sur les fiches
   commerçant : reprendre .info-card__social ici donnerait des liens sans
   aucun style sur les activités. */

.contact-card__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--sable-doux, #F2E2B6);
}

.contact-card__social {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    text-decoration: none;
    background: var(--sable-clair, #FBF3DD);
    color: var(--nuit, #073B4C);
    padding: 0.35em 0.85em;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 500;
    transition: background 0.15s;
}

.contact-card__social:hover {
    background: var(--sable-doux, #F2E2B6);
}

/* L'icône dans sa pastille ronde. box-sizing: content-box est indispensable :
   sans lui le padding rogne le pictogramme au lieu de l'entourer. */
.contact-card__social .crecy-icon {
    width: 1.5em;
    height: 1.5em;
    flex: 0 0 1.5em;
    padding: 0.32em;
    border-radius: 50%;
    background: var(--eau-profonde, #1E5A7B);
    color: #fff;
    vertical-align: 0;
    box-sizing: content-box;
    margin: 0;
}

.contact-card__social[href*="instagram"] .crecy-icon {
    background: linear-gradient(45deg, #E76F51 0%, #F4A261 100%);
}


/* =========================================================================
   Pub PERSONNALISÉE — bandeau d'entête d'archive uniquement

   Mode alternatif du même bandeau : l'annonceur fournit sa création, texte
   compris, et la surcouche automatique n'est pas générée. Le mode automatique
   n'est pas touché, ces règles ne mordent que sur .crecy-pubauto--custom.

   PRINCIPE — on ne fixe plus une hauteur, on donne au bloc le RAPPORT du
   fichier. Le conteneur ayant alors le même rapport que l'image, le cadrage en
   « cover » ne rogne rien, ni sur ordinateur ni sur téléphone. C'est la
   condition pour qu'un visuel qui porte son texte reste lisible.

   Ces règles sont volontairement en fin de feuille : elles doivent passer après
   la section « Bandeau pub de l'entête », qui impose 155px de haut au-dessus de
   782px et 220px de min-height en dessous.
   ========================================================================= */

/* Pas de voile. Il sert à faire ressortir la surcouche, qui n'existe pas ici :
   il ne ferait qu'assombrir la création de l'annonceur. */
.crecy-pubauto--custom .crecy-pubauto__image::after { content: none; }

/* Au-dessus de 782px, le visuel large. La colonne d'entête fait déjà
   655 x 155, soit exactement le rapport du fichier 1310 x 310. */
.crecy-pubauto--custom .crecy-pubauto__image--mobile { display: none; }

/* Sous 782px, le visuel mobile prend le relais et le bloc reprend le rapport
   800 x 500. Sur un écran de 350px, cela fait 219px de haut — la hauteur que la
   règle de min-height produisait déjà, la bande ne change donc pas de taille. */
@media (max-width: 782px) {
    .crecy-pubauto--custom .crecy-pubauto__image--large { display: none; }
    .crecy-pubauto--custom .crecy-pubauto__image--mobile { display: block; }

    .commercants-archive__entete-pub .crecy-pubauto--custom {
        height: auto;
        min-height: 0;
        aspect-ratio: 8 / 5;
    }
    .commercants-archive__entete-pub .crecy-pubauto--custom .crecy-pubauto__link {
        height: 100%;
        min-height: 0;
    }
}


/* =========================================================================
   « J'aime » — histoires et fiches commerçant

   Le compteur est écrit côté serveur, l'état personnel est posé en JavaScript
   après l'arrivée de la page : la même page HTML est servie à tout le monde par
   le cache, elle ne peut pas porter le « vous avez déjà aimé » d'un visiteur.
   C'est la classe crecy-like--aime, ajoutée par le script, qui allume le cœur.
   ========================================================================= */

.crecy-like {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.crecy-like__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid #d8dee5;
    border-radius: 999px;
    background: #fff;
    color: #063047;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .12s ease;
}

.crecy-like__btn:hover { border-color: #E76F51; }
.crecy-like__btn:active { transform: scale(.96); }

.crecy-like__coeur {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #8496a6;
    stroke-width: 1.7;
    transition: fill .18s ease, stroke .18s ease;
}

/* Cœur plein dès que le visiteur a aimé. */
.crecy-like--aime .crecy-like__coeur { fill: #E76F51; stroke: #E76F51; }
.crecy-like--aime .crecy-like__btn { border-color: #E76F51; background: #fff5f2; }

.crecy-like__nombre { font-variant-numeric: tabular-nums; }

.crecy-like__mot {
    font-size: 13px;
    color: #5b6b7a;
}

/* Pendant l'aller-retour avec le serveur : le bouton ne doit pas paraître mort,
   mais rien ne doit sauter à l'écran non plus. */
.crecy-like--envoi .crecy-like__btn { opacity: .6; pointer-events: none; }

.crecy-like--pulse .crecy-like__coeur { animation: crecy-like-pulse .32s ease; }

@keyframes crecy-like-pulse {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.28); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .crecy-like--pulse .crecy-like__coeur { animation: none; }
    .crecy-like__btn { transition: none; }
}

/* Fin d'une histoire : le bouton posé par le filtre de contenu, détaché du
   texte sans rompre la colonne de lecture. */
.crecy-like-bloc {
    margin: 26px 0 8px;
    padding-top: 18px;
    border-top: 1px solid #e6ebf0;
}


/* =========================================================================
   Fiche commerçant — fil d'Ariane et retour à la liste

   Le bandeau ramène à l'accueil ; ces deux repères-là servent autre chose :
   savoir où l'on est quand on arrive par un lien partagé, et repartir vers les
   autres commerces plutôt que vers la page d'accueil.
   ========================================================================= */

.fiche-fil {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: #5b6b7a;
}

.fiche-fil a {
    color: inherit;
    text-decoration: none;
}

.fiche-fil a:hover { text-decoration: underline; }

.fiche-fil > span[aria-hidden] { margin: 0 6px; opacity: .55; }

.fiche-fil__ici { color: #1A2E4A; font-weight: 600; }

.fiche-retour {
    margin: 22px 0 0;
}

.fiche-retour__lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid #d8dee5;
    border-radius: 999px;
    background: #fff;
    color: #1E5A7B;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease;
}

.fiche-retour__lien:hover { border-color: #3B6CB7; color: #3B6CB7; }

@media (prefers-reduced-motion: reduce) {
    .fiche-retour__lien { transition: none; }
}


/* =========================================================================
   FICHE COMMERÇANT — ORDRE DES BLOCS SUR TÉLÉPHONE (ordre donné par Bruno)

   Sous 880 px, inc/fiche-mobile.php efface déjà les deux colonnes de la mise
   en page (display: contents) : leurs blocs deviennent des enfants directs du
   conteneur et acceptent donc un rang. On étend ce mécanisme à tous les blocs
   au lieu du seul bloc d'abonnement.

   On ne touche PAS au display du conteneur : il est déjà en colonne à cette
   largeur, et le redéclarer ferait sauter ses espacements.

   Les rangs vont de dix en dix pour laisser de la place aux blocs à insérer.
   Tout bloc non nommé ici prend le rang 200 : il se range donc APRÈS la liste
   et AVANT le retour à la liste, plutôt que de remonter en tête — ce que ferait
   un rang zéro.
   ========================================================================= */

@media (max-width: 880px) {

    .fiche-body__main,
    .fiche-body__side { display: contents; }

    /* Rang par défaut : tout ce qui n'est pas nommé ci-dessous. */
    .fiche-body__main > *,
    .fiche-body__side > * { order: 200; }

    /* 1. Fil d'Ariane. Le « j'aime » n'est plus ici : il est monte dans le
       bandeau, donc hors de fiche-body — il n'a plus de rang a recevoir. */
    .fiche-body__main > .fiche-fil { order: 10; }

    /* 2. Quartier */
    .fiche-body__main > .fiche-section--quartier { order: 30; }

    /* 3. Abonnement aux offres */
    .fiche-body__side > .info-card--push { order: 40; }

    /* 4. Menu du jour */
    .fiche-body__main > .fiche-section--menu { order: 50; }

    /* 5. Horaires, contact et bouton d'action.
       La carte qui n'est ni l'abonnement ni le plan : dans le gabarit, horaires,
       adresse, téléphone, réseaux et boutons vivent dans une SEULE carte. */
    .fiche-body__side > .info-card:not(.info-card--push):not(.info-card--map) { order: 60; }

    /* 6. Plan et itinéraire */
    .fiche-body__side > .info-card--map { order: 70; }

    /* 7. Présentation */
    .fiche-body__main > .fiche-section--presentation { order: 80; }

    /* 8. Blocs partenaire, puis artistes hébergés.
       Les blocs partenaire ne sortent que sur une fiche premium ; les deux
       sections se suivent dans l'ordre où le module les produit. */
    .fiche-body__main > .fiche-section--partenaire-services { order: 90; }
    .fiche-body__main > .fiche-section--catalogues { order: 91; }
    .fiche-body__main > .fiche-section--heberges { order: 95; }
    .fiche-body__main > .fiche-hebergeur { order: 96; }

    /* 9. À la Une — REMONTÉE AU-DESSUS DES DEUX SECTIONS DE SERVICES.
       Demande de Bruno. Elle passe donc devant les blocs partenaire du rang 8,
       et non plus juste après eux : sur une fiche premium, « Services du
       magasin » se serait sinon affiché au-dessus. */
    .fiche-body__main > .fiche-section--alaune { order: 88; }

    /* 10. En images — IMPOSSIBLE À RANGER SEUL, et ce n'est pas un oubli.
       inc/galerie-commercant.php ajoute la galerie PAR LE FILTRE the_content :
       elle est donc IMBRIQUÉE dans la section Présentation, pas voisine d'elle.
       Un rang ne classe que des blocs de même niveau — la galerie suit la
       Présentation, au rang 80, tant qu'elle n'en est pas sortie. */

    /* 11. Services.
       La section « Services du magasin » des partenaires porte AUSSI la classe
       fiche-section--services : on l'écarte explicitement, sinon elle
       retomberait ici au lieu de son rang 90. */
    .fiche-body__main > .fiche-section--services:not(.fiche-section--partenaire-services) { order: 120; }

    /* 12. Le commerçant, le portrait */
    .fiche-body__main > .fiche-section--humanisation { order: 130; }

    /* 13. Revendication du commerce.
       inc/fiche-mobile.php la déplace en JavaScript sous le bloc d'abonnement
       et lui pose order: 1 dans une balise style imprimée APRÈS cette feuille.
       On ne touche pas à ce module : on reprend simplement la main avec une
       règle plus spécifique, seule façon de passer devant sans le modifier. */
    .fiche-body__side > .ec-revendication.est-remontee { order: 140; }

    /* 14. Publicité de la colonne */
    .fiche-body__side > .crecy-pubauto { order: 150; }

    /* 15. Retour à la liste, toujours en dernier */
    .fiche-body__main > .fiche-retour { order: 300; }
    .fiche-body__side > .back-link { order: 310; }
}


/* Le « j'aime » posé sur la photo du bandeau : même habillage que les boutons
   « Retour à l'accueil » et « Modifier la fiche » — fond crème translucide et
   flou d'arrière-plan — pour qu'il appartienne visiblement au bandeau et non
   au contenu. Le mot « j'aime » est en clair sur la photo, avec une ombre
   portée pour la lisibilité : la photo garde ses couleurs, on ne l'assombrit
   pas pour un seul mot. */

.fiche-hero__like {
    margin-top: 14px;
}

.fiche-hero__like .crecy-like__btn {
    border-color: transparent;
    background: rgba(253, 251, 247, .88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #1E5A7B;
    box-shadow: 0 2px 10px rgba(20, 40, 60, .22);
}

.fiche-hero__like .crecy-like__btn:hover {
    background: #FDFBF7;
    border-color: transparent;
}

.fiche-hero__like .crecy-like__coeur { stroke: #1E5A7B; }

.fiche-hero__like .crecy-like--aime .crecy-like__coeur { fill: #E76F51; stroke: #E76F51; }

.fiche-hero__like .crecy-like__mot {
    color: #FDFBF7;
    text-shadow: 0 1px 3px rgba(20, 40, 60, .55);
}

.fiche-hero__like .crecy-like--aime .crecy-like__btn {
    background: rgba(255, 245, 242, .94);
    border-color: transparent;
}


/* Badge partenaire du bandeau : étiquette entière sur grand écran, raccourcie
   à « Partenaire » sur téléphone. Le bandeau y est étroit et l'étiquette
   complète poussait le titre sur deux lignes. Même seuil que le reste de la
   fiche en version mobile. */

.fiche-hero__badge-court { display: none; }

@media (max-width: 880px) {
    .fiche-hero__badge-long { display: none; }
    .fiche-hero__badge-court { display: inline; }
}