/* SNY Espace Projet — habillage de l'onglet « Mes projets ».
   Palette imposée pour le site : blanc, encre, terre. Les titres portent
   !important parce que le thème force h2/h3 en noir avec une spécificité
   supérieure : sans cela, ils repassent en noir de corps. */

.sny-projet,
.sny-espace,
.sny-liste-projets,
.sny-cartes {
    --blanc: #ffffff;
    --encre: #2e2622;
    --terre: #c0703f;
    --gris: #7b716b;
    --trait: #e6e0da;
    --fond: #faf8f6;

    /* L'univers du projet écrase ces quatre-là dans l'attribut `style` du
       conteneur (voir sny_univers_style). Les valeurs ci-dessous sont donc
       un repli : elles servent sur la page de liste avant qu'un projet ne
       soit ouvert, et le jour où un univers serait retiré du tableau PHP
       sans que la page soit régénérée. */
    --accent: #c0703f;
    --accent-sombre: #90542f;
    --accent-tendre: #f7ece5;
    --accent-voile: #fdf8f5;

    font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--encre);
}

/* --- La liste ---------------------------------------------------- */

.sny-liste-projets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.sny-liste-projets a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
    align-items: baseline;
    padding: 18px 20px;
    border: 1px solid var(--trait);
    border-radius: 4px;
    background: var(--blanc);
    text-decoration: none;
    color: var(--encre);
    transition: border-color .2s ease;
}

.sny-liste-projets a:hover,
.sny-liste-projets a:focus-visible {
    border-color: var(--terre);
}

.sny-liste-projets .sny-titre {
    font-size: 1.05rem;
    font-weight: 500;
}

.sny-liste-projets .sny-etat {
    grid-row: 1;
    grid-column: 2;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--terre);
    white-space: nowrap;
}

.sny-liste-projets .sny-date {
    grid-column: 1 / -1;
    font-size: .85rem;
    color: var(--gris);
}

/* --- Un projet ---------------------------------------------------- */

.sny-retour a {
    font-size: .85rem;
    color: var(--gris);
    text-decoration: none;
}

.sny-retour a:hover {
    color: var(--terre);
}

.sny-projet__titre {
    color: var(--encre) !important;
    font-size: 1.5rem;
    margin: 8px 0 2px;
}

.sny-projet__objet {
    color: var(--gris);
    font-size: .9rem;
    margin: 0 0 28px;
}

.sny-sous-titre {
    color: var(--encre) !important;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 36px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--trait);
}

.sny-vide {
    color: var(--gris);
    font-size: .92rem;
}

/* --- La frise d'avancement ---------------------------------------- */

.sny-frise {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    /* minmax(0,1fr) et non 1fr : sinon les colonnes se calent sur le
       contenu et débordent du parent. */
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0;
}

.sny-frise__pas {
    position: relative;
    padding: 0 6px;
    text-align: center;
    min-width: 0;
}

/* Le trait de liaison. Il s'arrête au dernier pas. */
.sny-frise__pas::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--trait);
}

.sny-frise__pas:last-child::before {
    display: none;
}

.sny-frise__pas.faite::before {
    background: var(--terre);
}

.sny-frise__pastille {
    position: relative;
    z-index: 1;
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--blanc);
    border: 2px solid var(--trait);
}

.sny-frise__pas.faite .sny-frise__pastille {
    background: var(--terre);
    border-color: var(--terre);
}

.sny-frise__pas.en-cours .sny-frise__pastille {
    border-color: var(--terre);
    box-shadow: 0 0 0 4px rgba(192, 112, 63, .16);
}

.sny-frise__nom {
    display: block;
    font-size: .74rem;
    line-height: 1.3;
    color: var(--gris);
    overflow-wrap: anywhere;
}

.sny-frise__pas.en-cours .sny-frise__nom {
    color: var(--encre);
    font-weight: 600;
}

.sny-projet__ou-en-est {
    background: var(--fond);
    border-left: 3px solid var(--terre);
    padding: 14px 18px;
    margin: 0;
    font-size: .95rem;
}

/* --- Les documents ------------------------------------------------- */

.sny-fichiers {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sny-fichiers li {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--trait);
}

.sny-fichiers a {
    color: var(--terre);
    font-weight: 500;
}

.sny-poids {
    font-size: .8rem;
    color: var(--gris);
}

/* --- Le fil -------------------------------------------------------- */

.sny-fil {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.sny-fil li {
    padding: 14px 18px;
    border-radius: 4px;
    max-width: 46em;
}

.sny-fil__qui {
    display: block;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: 6px;
}

.sny-fil__texte p {
    margin: 0 0 .6em;
    font-size: .95rem;
    line-height: 1.6;
}

.sny-fil__texte p:last-child {
    margin-bottom: 0;
}

.sny-fil__quand {
    display: block;
    margin-top: 8px;
    font-size: .76rem;
    color: var(--gris);
}

.sny-fil__etape {
    background: var(--fond);
    border-left: 3px solid var(--terre);
}

.sny-fil__message {
    border: 1px solid var(--trait);
    background: var(--blanc);
}

.sny-fil__client {
    margin-left: auto;
    background: var(--fond);
}

/* --- Écrire -------------------------------------------------------- */

.sny-ecrire {
    margin-top: 24px;
}

.sny-ecrire label {
    display: block;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: 8px;
}

.sny-ecrire textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--trait);
    border-radius: 4px;
    font: inherit;
    font-size: .95rem;
    line-height: 1.6;
    resize: vertical;
}

.sny-ecrire textarea:focus {
    outline: 2px solid var(--terre);
    outline-offset: 1px;
    border-color: var(--terre);
}

.sny-ecrire button {
    margin-top: 12px;
    background: var(--encre);
    color: var(--blanc);
    border: 0;
    border-radius: 4px;
    padding: 13px 30px;
    font: inherit;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

.sny-ecrire button:hover,
.sny-ecrire button:focus-visible {
    background: var(--terre);
}

.sny-delai {
    margin: 10px 0 0;
    font-size: .8rem;
    color: var(--gris);
}

/* --- La case de renonciation, sur la fiche produit ------------------ */

.sny-renonciation {
    margin: 0 0 22px;
    padding: 16px 18px;
    background: #faf8f6;
    border-left: 3px solid #c0703f;
    border-radius: 4px;
}

.sny-renonciation label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    font-size: .88rem;
    line-height: 1.55;
    color: #2e2622;
    cursor: pointer;
}

.sny-renonciation input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: #c0703f;
}

/* --- Le choix de la ville, sur la fiche « table » ------------------- */

.sny-ville {
    margin: 0 0 22px;
    padding: 18px 20px;
    background: #faf8f6;
    border-left: 3px solid #c0703f;
    border-radius: 4px;
    color: #2e2622;
}

.sny-ville > label,
.sny-ville__date label {
    display: block;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7b716b;
    margin-bottom: 8px;
}

.sny-ville__date label span {
    text-transform: none;
    letter-spacing: 0;
}

.sny-ville select,
.sny-ville input[type="date"] {
    width: 100%;
    max-width: 22em;
    padding: 12px 14px;
    border: 1px solid #e6e0da;
    border-radius: 4px;
    background: #fff;
    font: inherit;
    font-size: .95rem;
    color: #2e2622;
}

.sny-ville select:focus,
.sny-ville input[type="date"]:focus {
    outline: 2px solid #c0703f;
    outline-offset: 1px;
    border-color: #c0703f;
}

.sny-ville__demande {
    margin: 12px 0 0;
    font-size: .84rem;
    line-height: 1.55;
    color: #7b716b;
}

.sny-ville__demande a {
    color: #c0703f;
    font-weight: 500;
}

.sny-ville__date,
.sny-ville__lieu {
    margin: 18px 0 0;
}

.sny-ville__lieu input[type="text"] {
    width: 100%;
    max-width: 30em;
    padding: 12px 14px;
    border: 1px solid #e6e0da;
    border-radius: 4px;
    background: #fff;
    font: inherit;
    font-size: .95rem;
    color: #2e2622;
}

.sny-ville__lieu input[type="text"]:focus {
    outline: 2px solid #c0703f;
    outline-offset: 1px;
    border-color: #c0703f;
}

.sny-ville__aide {
    display: block;
    margin-top: 8px;
    max-width: 40em;
    font-size: .82rem;
    line-height: 1.55;
    color: #7b716b;
}

/* --- Le visuel de la fiche remplit son cadre ------------------------
   Le gabarit réserve un cadre carré, taillé pour l'image d'origine qui
   l'était aussi. Les affiches, elles, sont en paysage : posées telles
   quelles, elles laissaient un grand vide sombre sous l'image.

   `cover` recadre au centre plutôt que de déformer. On accepte de perdre
   les bords gauche et droit d'une affiche : mieux vaut un cadrage serré
   qu'un trou dans la page.
   ------------------------------------------------------------------ */

body.sny-produit-etude img[data-sny-carrousel] {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- Le visuel affiché deux fois -----------------------------------
   ⚠ CETTE RÈGLE A ÉTÉ RETIRÉE — elle causait le vide qu'elle prétendait
   éviter.

   Le raisonnement d'origine : « le gabarit sort l'image du produit à deux
   endroits, le doublon ne raconte rien, et le second widget est seul dans
   son conteneur — le masquer ne laisse pas de bloc orphelin. »

   Le second widget n'était pas seul dans son conteneur : c'est la COLONNE
   IMAGE de la bande « story », en face du texte. Le masquer laissait une
   moitié de bande bleu nuit parfaitement vide, sur toute la largeur de
   l'écran. L'utilisateur l'a signalé deux fois.

   La leçon : « seul dans son conteneur » se vérifie sur le conteneur
   RENDU, pas sur l'identifiant Elementor. Deux widgets frères dans une
   bande à deux colonnes ont chacun leur propre conteneur — et masquer
   l'un laisse l'autre occuper la moitié de la place.

   L'image reste donc affichée : la bande est faite pour un visuel en
   regard du texte, et le carrousel lui donne l'affiche du jour.
   ------------------------------------------------------------------ */

/* --- La signature de mode, sur une prestation ----------------------
   Le gabarit de fiche produit est écrit pour une boutique de vêtements :
   il affiche « L'art du style, sans compromis. » sous le titre de CHAQUE
   produit. Sur une étude de projet ou une table de soirée, la phrase est
   simplement fausse. On la masque pour nos seuls produits de service — le
   reste de la boutique la garde.

   Deux sélecteurs volontairement : la classe `.hero-sub` survivra à une
   régénération du gabarit, l'identifiant Elementor survivra à un
   renommage de la classe. Si les deux changent, la phrase revient — c'est
   visible, donc réparable.
   ------------------------------------------------------------------ */

body.sny-produit-a-choix .hero-sub,
body.sny-produit-a-choix .elementor-element-17df250 {
    display: none !important;
}

/* --- La barre d'achat collante, sur mobile -------------------------
   Le gabarit produit masque le bloc d'achat principal sous 768 px et ne
   laisse qu'une barre en bas d'écran, faite pour un bouton seul. Nos
   fiches y posent un menu, une date, un texte libre et parfois une case
   obligatoire : sans ceci, tout est comprimé dans 211 px sur 375.
   On ne touche qu'aux fiches portant la classe posée par l'extension.
   ------------------------------------------------------------------ */

@media (max-width: 767px) {

    body.sny-produit-a-choix .sticky-buy {
        flex-wrap: wrap;
        row-gap: 4px;
        /* La barre devient un panneau : on la borne et on la fait défiler,
           sinon elle recouvrirait tout l'écran sur les petits téléphones. */
        max-height: 76vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Chaque bloc prend toute la largeur. minmax/flex-basis 100 % plutôt
       qu'une largeur fixe : la barre garde ses propres paddings. */
    body.sny-produit-a-choix .sticky-buy form.cart,
    body.sny-produit-a-choix .sticky-buy .sny-ville,
    body.sny-produit-a-choix .sticky-buy .sny-renonciation {
        flex: 1 0 100%;
        min-width: 0;
        width: 100%;
    }

    body.sny-produit-a-choix .sticky-buy .sny-ville select,
    body.sny-produit-a-choix .sticky-buy .sny-ville input[type="date"],
    body.sny-produit-a-choix .sticky-buy .sny-ville input[type="text"] {
        max-width: none;
    }

    /* Le bouton d'ajout reste pleine largeur, sous les champs. */
    body.sny-produit-a-choix .sticky-buy .single_add_to_cart_button {
        width: 100%;
    }
}

/* --- Téléphones ---------------------------------------------------- */

@media (max-width: 640px) {
    .sny-frise {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    /* En colonne, le trait passe à la verticale, à gauche des pastilles. */
    .sny-frise__pas {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
        text-align: left;
        padding: 0 0 16px;
    }

    .sny-frise__pas::before {
        top: 16px;
        left: 7px;
        width: 2px;
        height: 100%;
    }

    .sny-frise__pastille {
        margin: 0;
    }

    .sny-frise__nom {
        font-size: .85rem;
    }

    .sny-fil li {
        max-width: none;
    }

    .sny-fil__client {
        margin-left: 0;
    }
}

/* La mention « HT » accolee au prix, sur les seuls produits taxables. */

.sny-ht {
    font-size: .58em;
    letter-spacing: .1em;
    text-transform: uppercase;
    vertical-align: .35em;
    color: #7b716b;
    font-weight: 500;
}

/* =====================================================================
   FICHES DE SERVICE — le décor de boutique de mode
   Le gabarit produit est écrit pour des vêtements ; nos quatre prestations
   l'empruntent. `fiche-service.php` en réécrit les textes ; ces deux règles
   font disparaître ce qui n'a pas de texte à réécrire.

   Masqué ici en CSS et non par le script : la règle s'applique avant le
   premier rendu, donc sans que les pastilles de boutique clignotent sur la
   page avant de disparaître.
   ===================================================================== */
body.sny-produit-a-choix .reel-wrap.category-reel,
body.sny-produit-a-choix .reel-wrap:not(.category-reel) {
  display: none !important;
}

/* Posée par le script sur les conteneurs devenus vides. */
.sny-hors-service {
  display: none !important;
}

/* =====================================================================
   LE VIDE SOUS LA GRANDE CARTE DE LA BOUTIQUE

   La première carte de la grille (`.p-card.cover`) réserve un cadre carré
   de 520 px. Une image plus large que haute — nos affiches en paysage — s'y
   affichait en 521 × 290, laissant 230 px de bleu nuit dessous.

   ⚠ `object-fit: cover` était DÉJÀ posé et ne servait à rien : il ne fait
   rien tant que l'image n'a pas de hauteur. Et `height: 100%` ne marche pas
   davantage ici — la hauteur du cadre vient de son `min-height`, pas de son
   `height`, et un pourcentage ne se résout pas contre une hauteur `auto`.
   Mesuré : 290 px avant, 290 px après.

   ✅ Ce qui marche : positionner l'image en absolu dans le cadre, qui est
   déjà `position: relative`. `inset: 0` se résout contre la hauteur UTILISÉE
   du cadre, min-height comprise. Et le cadre ne peut pas s'effondrer en
   perdant son contenu, puisque c'est lui qui porte le min-height — c'est
   précisément ce qui rendait la même astuce dangereuse sur la fiche produit.

   Les autres cartes ont un `aspect-ratio: 4/5` et remplissaient déjà : la
   règle ne les touche pas.
   ===================================================================== */
.shop-grid .p-card.cover .p-media {
  overflow: hidden;
}

.shop-grid .p-card.cover .p-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================================================
   LE BLOC D'ACHAT DE NOS FICHES

   `form.cart` est une rangée flex en `nowrap`, dessinée pour ce qu'elle
   contient d'habitude : un sélecteur de quantité et un bouton. Nous y
   ajoutons un troisième enfant — la case de renonciation, ou le choix de
   la ville — bien plus large que les deux autres.

   Résultat mesuré avant correction, sur un écran de bureau : la case
   écrasée à 165 px pour six lignes de texte, le sélecteur de quantité
   réduit à 20 px de large et étiré sur 222 px de haut, le bouton haut de
   222 px. Trois éléments qui se disputent une seule ligne.

   La case passe donc seule sur sa ligne, et la quantité et le bouton se
   partagent la suivante.

   ⚠ `!important` est nécessaire : la règle du thème est plus spécifique,
   et sans lui `flex-wrap` restait à `nowrap` — vérifié en mesurant, pas en
   supposant.

   ⚠ Et il y a DEUX `form.cart` sur la page : celle du bureau et celle de
   la barre collante mobile. La règle vise les deux ; c'est voulu.
   ===================================================================== */
body.sny-produit-a-choix form.cart {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px 16px !important;
}

body.sny-produit-a-choix form.cart > .sny-renonciation,
body.sny-produit-a-choix form.cart > .sny-ville {
  flex: 1 0 100% !important;
  margin: 0 !important;
}

body.sny-produit-a-choix form.cart > .quantity {
  flex: 0 0 auto !important;
  align-self: center !important;
  height: auto !important;
  min-width: 112px;
}

body.sny-produit-a-choix form.cart > .single_add_to_cart_button {
  flex: 1 1 220px !important;
  align-self: center !important;
  height: auto !important;
  min-height: 54px;
}

/* --- Ce qui répond sous la main ------------------------------------
   Rien de spectaculaire : de quoi sentir que la case est cliquable sur
   toute sa surface — elle l'est déjà, le `<label>` enveloppe tout — et
   voir qu'elle est cochée sans avoir à viser la petite case.

   `:has()` n'existe pas dans les très vieux navigateurs. La dégradation
   est purement décorative : la case reste cliquable et le formulaire
   reste bloqué tant qu'elle n'est pas cochée, par l'attribut `required`
   et par la validation serveur. */
.sny-renonciation,
.sny-ville {
  transition: background-color .18s ease, border-left-color .18s ease,
              box-shadow .18s ease;
}

.sny-renonciation:hover {
  background: #f4efe9;
}

.sny-renonciation:has(input:checked) {
  background: #f2f7f2;
  border-left-color: #3f7d4e;
}

.sny-renonciation:has(input:focus-visible),
.sny-ville:focus-within {
  box-shadow: 0 0 0 3px rgba(192, 112, 63, .22);
}

body.sny-produit-a-choix form.cart > .single_add_to_cart_button {
  transition: transform .16s ease, box-shadow .16s ease;
}

body.sny-produit-a-choix form.cart > .single_add_to_cart_button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

body.sny-produit-a-choix form.cart > .single_add_to_cart_button:active {
  transform: none;
  box-shadow: none;
}

/* Sur un écran étroit, le bouton prend toute la largeur : viser un bouton
   de 220 px à côté d'un sélecteur de quantité, au pouce, ne marche pas. */
@media (max-width: 520px) {
  body.sny-produit-a-choix form.cart > .single_add_to_cart_button {
    flex: 1 0 100% !important;
  }
}

/* Les personnes qui demandent moins d'animation n'en reçoivent aucune. */
@media (prefers-reduced-motion: reduce) {
  .sny-renonciation,
  .sny-ville,
  body.sny-produit-a-choix form.cart > .single_add_to_cart_button {
    transition: none;
  }
  body.sny-produit-a-choix form.cart > .single_add_to_cart_button:hover {
    transform: none;
  }
}

/* ⚠ Le masquage du titre de thème sur /nos-services/ N'EST PAS ici, mais
   dans `modeles/services.html`. Cette feuille n'est enqueuée que sur les
   fiches produit et l'espace client : posée ici, la règle ne partait
   jamais. Une règle qui voyage avec le modèle qu'elle sert ne peut pas
   se retrouver orpheline. */

/* =====================================================================
   L'ESPACE PROJET — la version vivante
   Tout ce qui suit est peint avec --accent, la couleur de l'univers du
   projet, posée en variable sur le conteneur. Aucune règle ne nomme une
   couleur d'univers : en ajouter un ne touche donc pas cette feuille.
   ===================================================================== */

/* Pas de pastille pour le menu de compte : WooCommerce échappe le libellé
   de chaque onglet, donc le compte des nouveautés y est écrit en toutes
   lettres — « Mes projets (2) ». Voir sny_proj_libelle_onglet(). */

/* --- La liste, en cartes -------------------------------------------- */

.sny-cartes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.sny-carte__lien {
    display: block;
    overflow: hidden;
    border: 1px solid var(--trait);
    border-radius: 6px;
    background: var(--blanc);
    text-decoration: none;
    color: var(--encre);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.sny-carte__lien:hover,
.sny-carte__lien:focus-visible {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -18px rgba(46, 38, 34, .55);
}

.sny-carte__image {
    display: block;
    height: 128px;
    background: var(--accent-tendre) center/cover no-repeat;
}

.sny-carte__corps {
    display: block;
    padding: 16px 18px 18px;
}

/* ⚠ Règle de couleur, valable pour tout ce qui suit : --accent sert aux
   APLATS et aux traits, --accent-sombre au TEXTE posé sur blanc. Les neuf
   accents ne se valent pas au contraste : le terracotta maison (#c0703f)
   ne fait que 3,7:1 sur blanc, sous le seuil de 4,5:1. Sa version sombre
   passe à 6:1, et les huit autres y gagnent aussi. */
.sny-carte__univers {
    display: block;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-sombre);
}

.sny-carte__titre {
    display: block;
    margin: 4px 0 2px;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.35;
}

.sny-carte__etat {
    display: block;
    font-size: .85rem;
    color: var(--gris);
}

.sny-carte__jauge {
    display: block;
    height: 3px;
    margin: 12px 0 8px;
    border-radius: 2px;
    background: var(--trait);
}

.sny-carte__jauge > span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--accent);
}

.sny-carte__date {
    display: block;
    font-size: .78rem;
    color: var(--gris);
}

.sny-carte__neuf {
    display: inline-block;
    margin-top: 10px;
    padding: 2px 9px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: .72rem;
}

/* --- La couverture --------------------------------------------------- */

.sny-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 220px;
    margin: 10px 0 22px;
    padding: 26px 28px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--accent-sombre);
    isolation: isolate;
}

.sny-hero__image,
.sny-hero__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: center/cover no-repeat;
}

/* Le voile : sans lui, un titre blanc posé sur une photo claire devient
   illisible — et on ne choisit pas les photos que le client dépose. */
.sny-hero__voile {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(20, 15, 12, .12) 0%, rgba(20, 15, 12, .78) 100%),
        linear-gradient(90deg, var(--accent-sombre) 0%, rgba(0, 0, 0, 0) 65%);
    opacity: .94;
}

.sny-hero__texte {
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

.sny-hero__univers {
    margin: 0 0 6px;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .92;
}

.sny-hero__titre {
    margin: 0;
    color: #fff !important;
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1.2;
}

.sny-hero__objet {
    margin: 6px 0 0;
    font-size: .88rem;
    opacity: .88;
}

/* --- La jauge d'avancement ------------------------------------------- */

.sny-jauge {
    height: 4px;
    margin: 0 0 22px;
    border-radius: 2px;
    background: var(--trait);
    overflow: hidden;
}

.sny-jauge > span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--accent);
    transition: width .6s ease;
}

/* --- La frise reprend la couleur de l'univers ------------------------ */

.sny-espace .sny-frise__pas.faite::before,
.sny-espace .sny-frise__pas.faite .sny-frise__pastille {
    background: var(--accent);
    border-color: var(--accent);
}

.sny-espace .sny-frise__pas.en-cours .sny-frise__pastille {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-tendre);
}

.sny-espace .sny-frise__pas.en-cours .sny-frise__nom {
    color: var(--accent-sombre);
}

/* Collée sous la phrase d'état, mais SANS marge négative : celle-ci la
   faisait passer par-dessus le fond de la phrase, qui est un encadré. */
.sny-mouvement {
    margin: 10px 0 26px;
    font-size: .8rem;
    color: var(--gris);
}

/* --- La zone d'action ------------------------------------------------ */

.sny-agir {
    margin: 0 0 34px;
    padding: 24px 26px;
    border: 1px solid var(--accent-tendre);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    background: var(--accent-voile);
}

.sny-agir--calme {
    border-left-color: var(--trait);
    background: var(--fond);
}

.sny-agir--devis {
    border-left-width: 4px;
}

.sny-agir__titre {
    margin: 0 0 6px;
    color: var(--encre) !important;
    font-size: 1.12rem;
    font-weight: 500;
}

.sny-agir__intro {
    margin: 0 0 18px;
    font-size: .92rem;
    color: var(--gris);
}

.sny-agir__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 4px 0 0;
}

/* --- Les champs ------------------------------------------------------ */

.sny-champ {
    margin: 0 0 16px;
}

.sny-champ label {
    display: block;
    margin-bottom: 4px;
    font-size: .88rem;
    font-weight: 500;
}

.sny-aide {
    display: block;
    margin-bottom: 6px;
    font-size: .8rem;
    color: var(--gris);
}

/* `box-sizing` est posé ici et non hérité du thème : à 100 % de large avec
   12 px de rembourrage, une zone de texte en `content-box` dépasse de sa
   colonne et fait glisser toute la page de six pixels sur téléphone. Le
   thème du site le corrige aujourd'hui — mais l'espace ne doit pas
   dépendre d'une règle qu'un autre fichier peut retirer. */
.sny-champ input[type="text"],
.sny-champ textarea,
.sny-devis textarea,
.sny-ecrire textarea {
    box-sizing: border-box;
}

.sny-champ input[type="text"],
.sny-champ textarea,
.sny-devis textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--trait);
    border-radius: 4px;
    background: var(--blanc);
    font: inherit;
    color: var(--encre);
}

.sny-champ input[type="text"]:focus,
.sny-champ textarea:focus,
.sny-devis textarea:focus,
.sny-ecrire textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tendre);
}

/* --- Les boutons ----------------------------------------------------- */

.sny-bouton {
    display: inline-block;
    padding: 11px 22px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: transparent;
    color: var(--accent-sombre);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.sny-bouton:hover,
.sny-bouton:focus-visible {
    background: var(--accent);
    color: #fff;
}

.sny-bouton--fort {
    padding: 14px 30px;
    background: var(--accent);
    color: #fff;
    font-size: 1rem;
}

.sny-bouton--fort:hover,
.sny-bouton--fort:focus-visible {
    background: var(--accent-sombre);
    border-color: var(--accent-sombre);
}

.sny-bouton[disabled] {
    opacity: .5;
    cursor: progress;
}

/* Le retour du serveur, à côté du bouton. Discret par défaut : il ne
   hausse le ton qu'en cas d'échec, le seul cas où il faut agir. */
.sny-retour-serveur {
    font-size: .85rem;
    color: var(--gris);
}

.sny-retour-serveur.est-bien {
    color: #2f6f4f;
}

.sny-retour-serveur.est-erreur {
    color: #a8322a;
}

/* --- Le devis -------------------------------------------------------- */

.sny-devis__mention {
    max-width: 62ch;
    margin: 12px 0 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--gris);
}

.sny-devis__reprise {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--trait);
}

/* 12 px de rembourrage vertical portent la cible à ~44 px de haut. Sans
   eux, « Demander une reprise » ne mesurait que 20 px — or c'est la seule
   alternative à l'acceptation d'un devis, et sur téléphone on la visait au
   pouce. Mesuré à 375 px avant de l'écrire. */
.sny-devis__reprise summary {
    padding: 12px 0;
    cursor: pointer;
    font-size: .88rem;
    color: var(--gris);
}

.sny-devis__reprise summary:hover {
    color: var(--accent-sombre);
}

.sny-devis__reprise form {
    display: grid;
    gap: 10px;
    justify-items: start;
    margin-top: 12px;
}

.sny-devis__reprise label {
    font-size: .85rem;
    font-weight: 500;
}

.sny-lien-fort {
    color: var(--accent-sombre);
    font-weight: 500;
}

/* --- Les blocs ------------------------------------------------------- */

.sny-bloc {
    margin: 0 0 38px;
}

.sny-bloc--discret {
    padding-top: 22px;
    border-top: 1px solid var(--trait);
    opacity: .92;
}

.sny-espace .sny-sous-titre {
    color: var(--encre) !important;
}

/* --- Les fichiers ---------------------------------------------------- */

.sny-fichiers__ligne {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--trait);
}

.sny-fichiers__type {
    display: inline-block;
    min-width: 42px;
    padding: 3px 7px;
    border-radius: 3px;
    background: var(--accent-tendre);
    color: var(--accent-sombre);
    font-size: .66rem;
    letter-spacing: .06em;
    text-align: center;
}

.sny-fichiers__mien .sny-fichiers__type {
    background: var(--fond);
    color: var(--gris);
}

.sny-fichiers__quand {
    font-size: .78rem;
    color: var(--gris);
    white-space: nowrap;
}

/* --- Envoyer une pièce ----------------------------------------------- */

.sny-envoi {
    margin-top: 18px;
}

.sny-envoi input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.sny-envoi__zone {
    display: block;
    padding: 22px;
    border: 1px dashed var(--trait);
    border-radius: 6px;
    background: var(--fond);
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.sny-envoi__zone:hover,
.sny-envoi__zone.est-survolee,
.sny-envoi input[type="file"]:focus-visible + .sny-envoi__zone {
    border-color: var(--accent);
    background: var(--accent-voile);
}

.sny-envoi__zone strong {
    display: block;
    font-size: .95rem;
    font-weight: 500;
}

.sny-envoi__zone span {
    display: block;
    margin-top: 4px;
    font-size: .8rem;
    color: var(--gris);
}

.sny-envoi .sny-retour-serveur {
    display: block;
    margin-top: 10px;
    text-align: center;
}

/* --- Les planches ---------------------------------------------------- */

.sny-planches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.sny-planche {
    display: block;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 5px;
    background: none;
    cursor: zoom-in;
}

.sny-planche > span {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--accent-tendre) center/cover no-repeat;
    transition: transform .35s ease;
}

.sny-planche:hover > span,
.sny-planche:focus-visible > span {
    transform: scale(1.05);
}

.sny-loupe {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
    background: rgba(20, 15, 12, .9);
    cursor: zoom-out;
}

.sny-loupe img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
}

/* --- Le choix de l'univers ------------------------------------------- */

.sny-univers-choix {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.sny-puce {
    padding: 7px 14px;
    border: 1px solid var(--trait);
    border-radius: 16px;
    background: var(--blanc);
    color: var(--gris);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.sny-puce::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--puce, var(--gris));
}

.sny-puce:hover {
    border-color: var(--puce);
    color: var(--encre);
}

.sny-puce--active {
    border-color: var(--puce);
    color: var(--encre);
    font-weight: 500;
    cursor: default;
}

/* --- Les raccords avec les règles d'origine ---------------------------
   Les règles écrites avant l'univers peignent en --terre, la couleur fixe
   de la maison. À l'intérieur d'un espace, c'est l'univers qui décide.
   On les reprend ici plutôt que de modifier les règles d'origine : elles
   servent encore la page de liste ancienne (.sny-projet) et les fiches
   produit, qui n'ont pas d'univers.
   --------------------------------------------------------------------- */

.sny-espace .sny-projet__ou-en-est {
    border-left-color: var(--accent);
}

.sny-espace .sny-fichiers a {
    color: var(--accent-sombre);
}

.sny-espace .sny-ecrire textarea:focus {
    outline-color: var(--accent);
    border-color: var(--accent);
}

/* Le bouton d'envoi du fil reste encre pleine — c'est le bouton principal
   du site, et le voir changer de forme d'un univers à l'autre le rendrait
   moins reconnaissable. Seul son survol prend la couleur. */
.sny-espace .sny-ecrire button:hover,
.sny-espace .sny-ecrire button:focus-visible {
    background: var(--accent);
}

/* --- Le fil ---------------------------------------------------------- */

.sny-espace .sny-fil__client {
    background: var(--accent-tendre);
}

.sny-espace .sny-fil__etape {
    border-left: 2px solid var(--accent);
}

.sny-fil__brief .sny-fil__qui,
.sny-fil__devis .sny-fil__qui,
.sny-fil__piece .sny-fil__qui {
    color: var(--accent-sombre);
}

/* Une entrée qui arrive pendant qu'on regarde s'annonce, puis se tait. */
.sny-fil--neuf {
    animation: sny-apparait .45s ease both;
}

@keyframes sny-apparait {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.sny-ecrire__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.sny-ecrire textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--trait);
    border-radius: 4px;
    font: inherit;
    resize: vertical;
}

/* --- Téléphones ------------------------------------------------------ */

@media (max-width: 640px) {
    .sny-hero {
        min-height: 170px;
        padding: 20px;
    }

    .sny-hero__titre {
        font-size: 1.25rem;
    }

    .sny-agir {
        padding: 18px 16px;
    }

    .sny-fichiers__ligne {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 4px;
    }

    .sny-fichiers__ligne .sny-poids,
    .sny-fichiers__quand {
        grid-column: 2;
        font-size: .74rem;
    }

    .sny-planches {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Neuf univers empilés prenaient 160 px de haut, tout en bas de page,
       pour un réglage qu'on touche une fois. On resserre plutôt que de les
       cacher derrière un menu : un menu déroulant masquerait le fait même
       que le choix existe. */
    .sny-univers-choix {
        gap: 8px;
    }

    /* 9 px de rembourrage vertical : la puce passe de 32 à ~40 px de haut,
       assez pour le pouce sans étirer la liste des neuf univers sur un
       demi-écran. C'est le compromis assumé — 44 px les auraient rendues
       plus hautes que le bloc qui les explique. */
    .sny-puce {
        padding: 9px 12px;
        font-size: .78rem;
    }

    /* Le lien de retour et les documents deviennent des cibles franches
       plutôt que des lignes de texte de 20 px. */
    .sny-retour a {
        display: inline-block;
        padding: 10px 0;
    }

    .sny-fichiers a {
        display: inline-block;
        padding: 6px 0;
    }

    .sny-puce::before {
        width: 7px;
        height: 7px;
        margin-right: 5px;
    }

    /* Le bouton d'acceptation du devis prend toute la largeur : c'est LE
       geste de la page, et une cible de 44 px de haut se vise au pouce. */
    .sny-bouton--fort {
        display: block;
        width: 100%;
        padding: 15px 20px;
        text-align: center;
    }

    .sny-devis__reprise form {
        justify-items: stretch;
    }

    .sny-ecrire__pied,
    .sny-agir__pied {
        gap: 10px;
    }
}

/* Moins d'animation pour qui en demande moins. La vidéo de couverture
   part avec : une image de fond qui bouge en permanence est exactement
   ce que ce réglage veut faire cesser. */
@media (prefers-reduced-motion: reduce) {
    .sny-carte__lien,
    .sny-planche > span,
    .sny-jauge > span {
        transition: none;
    }

    .sny-carte__lien:hover {
        transform: none;
    }

    .sny-planche:hover > span {
        transform: none;
    }

    .sny-fil--neuf {
        animation: none;
    }

    .sny-hero__video {
        display: none;
    }
}