/* =========================================================
   La portée de Valencia — styles spécifiques
   (complète ../assets/css/style.css : palette, polices, entête, pied)
   ========================================================= */

/* ---------- Lien d'évitement clavier ---------- */
.lien-evitement {
    position: absolute;
    top: -3rem;
    left: 1rem;
    z-index: 100;
    background: var(--accent);
    color: #fff;
    padding: 0.7rem 1.2rem;
    border-radius: var(--rayon);
    font-weight: 700;
    text-decoration: none;
    transition: top var(--transition);
}
.lien-evitement:focus-visible {
    top: 1rem;
}

/* ---------- Sommaire collant ---------- */
.sommaire {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem 0.4rem;
    padding: 0.55rem 0.75rem;
    background: rgba(23, 19, 15, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--couleur-bordure);
}
.sommaire a {
    color: var(--couleur-texte-doux);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    transition: color var(--transition), background var(--transition);
}
.sommaire a:hover,
.sommaire a:focus-visible,
.sommaire a.actif {
    color: var(--accent-texte);
    background: var(--accent-voile);
}
/* Bouton de contact permanent dans la barre : le visiteur peut écrire
   depuis n'importe quel endroit de la page, sans remonter ni descendre. */
/* --- Sélecteur de langue ---------------------------------------------------
   Dans l'angle haut-droit de l'en-tête, juste devant le bouton d'administration
   (34 px large, à 0,9 rem du bord : d'où le décalage de 3 rem). Il a d'abord été
   posé dans le sommaire collant, mais « margin-left: auto » y chassait toutes les
   ancres vers la gauche et cassait leur centrage.
   Le drapeau seul ne dirait pas quelle langue il ouvre : le nom l'accompagne,
   écrit dans sa propre langue. */
.langues {
    position: absolute;
    top: 0.9rem;
    right: 3rem;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.15rem;
}
.langues__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.langues__lien {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 34px;
    padding: 0 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--couleur-texte-doux);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    /* Le sélecteur se pose sur la photo du bandeau : sans fond, les noms s'y perdent. */
    background: rgba(23, 19, 15, 0.55);
    backdrop-filter: blur(8px);
    transition: background var(--transition), border-color var(--transition),
                color var(--transition);
}
.langues__lien:hover,
.langues__lien:focus-visible {
    background: var(--couleur-fond-carte);
    border-color: var(--couleur-bordure);
    color: var(--accent-texte);
}
.langues__lien--actif {
    background: var(--couleur-fond-carte);
    border-color: var(--couleur-bordure);
    color: var(--accent-texte);
    cursor: default;
}
.langues__drapeau {
    width: 1.35rem;
    height: 0.9rem;
    display: block;
    flex: none;
    border-radius: 1px;
}

/* Sous 40 rem l'angle est trop étroit pour deux noms de langue : ne restent que
   les drapeaux, un peu plus grands, avec leur aria-label pour dire la langue. */
@media (max-width: 40rem) {
    .langues { right: 2.7rem; gap: 0.1rem; }
    .langues__nom { display: none; }
    .langues__lien { padding: 0 0.45rem; }
    .langues__drapeau { width: 1.5rem; height: 1rem; }
}

.sommaire__cta {
    margin-left: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff !important;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition), transform var(--transition);
}
.sommaire__cta:hover,
.sommaire__cta:focus-visible {
    background: var(--accent-fort) !important;
    transform: translateY(-1px);
}
/* Sur téléphone : une seule ligne qui défile, au lieu de trois lignes fixes */
@media (max-width: 52rem) {
    .sommaire {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sommaire::-webkit-scrollbar { display: none; }
}

/* ---------- Structure des sections ---------- */
.portee {
    max-width: 62rem;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}
.section { margin: 3.5rem 0; scroll-margin-top: 4rem; }

/* Typographie de confort : retours à la ligne équilibrés partout où le
   navigateur le permet (sans effet ailleurs), et interligne généreux. */
.portee p { text-wrap: pretty; }
.portee h2, .portee h3 { text-wrap: balance; }

/* Révélation douce des sections au défilement (portee.js ajoute .section--visible ;
   sans JS la classe « js » est absente et tout reste visible) */
@media (prefers-reduced-motion: no-preference) {
    .js .portee .section {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.55s ease, transform 0.55s ease;
    }
    .js .portee .section--visible {
        opacity: 1;
        transform: none;
    }
}
:root {
    /* Moucheture d'hermine (même dessin que l'emblème de la marque, includes/elevage.php),
       seule puis en semé — la tuile porte deux hermines de 95 px en quinconce. Servies en masque :
       la couleur vient du fond de l'élément, donc des variables du thème. */
    --hermine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Ccircle cx='12' cy='3.4' r='2.9'/%3E%3Ccircle cx='6' cy='7.8' r='2.6'/%3E%3Ccircle cx='18' cy='7.8' r='2.6'/%3E%3Cpath d='M12 8.6c-.8 5-2.4 10.4-7.2 16.6l4.7-1.9L12 31.6l2.5-8.3 4.7 1.9C14.4 19 12.8 13.6 12 8.6z'/%3E%3C/svg%3E");
    --hermine-seme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 377 471'%3E%3Cg transform='translate%2858.4 37.7%29 scale%282.983%29'%3E%3Ccircle cx='12' cy='3.4' r='2.9'/%3E%3Ccircle cx='6' cy='7.8' r='2.6'/%3E%3Ccircle cx='18' cy='7.8' r='2.6'/%3E%3Cpath d='M12 8.6c-.8 5-2.4 10.4-7.2 16.6l4.7-1.9L12 31.6l2.5-8.3 4.7 1.9C14.4 19 12.8 13.6 12 8.6z'/%3E%3C/g%3E%3Cg transform='translate%28246.8 273.2%29 scale%282.983%29'%3E%3Ccircle cx='12' cy='3.4' r='2.9'/%3E%3Ccircle cx='6' cy='7.8' r='2.6'/%3E%3Ccircle cx='18' cy='7.8' r='2.6'/%3E%3Cpath d='M12 8.6c-.8 5-2.4 10.4-7.2 16.6l4.7-1.9L12 31.6l2.5-8.3 4.7 1.9C14.4 19 12.8 13.6 12 8.6z'/%3E%3C/g%3E%3C/svg%3E");
    /* L'or du flyer de la portée (#C9A35C), relevé sur ses hermines */
    --or-hermine: #c9a35c;
}

.section__titre {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 1.25rem;
    color: var(--couleur-texte);
}
/* Sous chaque titre de section : une hermine, puis le filet terracotta */
.section__titre::after {
    content: '';
    display: block;
    width: 5rem;
    height: 1.6rem;
    margin-top: 0.5rem;
    background: var(--or-hermine);
    -webkit-mask: var(--hermine) left center / 1.2rem 1.6rem no-repeat,
                  linear-gradient(#000 0 0) 1.7rem center / 3.3rem 3px no-repeat;
            mask: var(--hermine) left center / 1.2rem 1.6rem no-repeat,
                  linear-gradient(#000 0 0) 1.7rem center / 3.3rem 3px no-repeat;
}
.section__chapeau {
    color: var(--couleur-texte-doux);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    max-width: 44rem;
}

/* Évite les lignes finales d'un seul mot dans les blocs de texte suivi */
.section__chapeau,
.intro p,
.race > p,
.race__point p,
.faq__item p,
.chiots-attente p,
.section--contact p,
.formulaire__intro { text-wrap: pretty; }

/* ---------- Introduction ---------- */
.section--intro { margin-top: 2rem; }
.intro {
    display: grid;
    gap: 1.1rem;
    max-width: 46rem;
    margin: 0 auto;
    font-size: clamp(1.02rem, 2.3vw, 1.2rem);
    line-height: 1.75;
    color: var(--couleur-texte);
    border-left: 3px solid var(--accent);
    padding-left: clamp(1rem, 3vw, 1.5rem);
}
.intro strong { color: var(--accent-texte); }
.intro__accroche {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.35rem, 3.2vw, 1.75rem);
    font-style: italic;
    font-weight: 600;
    line-height: 1.3;
    color: var(--accent-texte);
}
.intro__final {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.15rem;
    font-style: italic;
    color: var(--accent-texte);
}

/* ---------- Repères (naissance / réservations / familles) et prix ---------- */
.reperes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.repere {
    text-align: center;
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 1.1rem 0.75rem;
}
.repere__label {
    font-size: 0.8rem;
    color: var(--couleur-texte-doux);
    margin-bottom: 0.3rem;
}
.repere__valeur {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-weight: 600;
    color: var(--accent-texte);
}
.prix-encart {
    text-align: center;
    max-width: 34rem;
    margin: 0 auto;
    background: var(--couleur-fond-carte);
    border: 1px solid var(--accent-fort);
    border-radius: var(--rayon);
    padding: 2rem 1.5rem;
}
.prix-encart__label {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--couleur-texte-doux);
    margin-bottom: 0.4rem;
}
.prix-encart__montant {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(2.2rem, 5vw, 3rem);
    font-weight: 600;
    color: var(--accent-texte);
    line-height: 1.1;
}
.prix-encart__detail {
    margin: 0.9rem 0 0;
    color: var(--couleur-texte-doux);
    line-height: 1.65;
}
.prix-encart__non-negociable {
    margin-top: 1.1rem;
    font-weight: 700;
    color: var(--couleur-texte);
}
.prix-encart__pourquoi {
    margin-top: 0.3rem;
    color: var(--couleur-texte-doux);
    font-style: italic;
}
@media (max-width: 640px) {
    .reperes { grid-template-columns: 1fr; }
}

/* ---------- Encarts d'avertissement et de réassurance ---------- */
.avertissement,
.rassurance {
    margin: 1.75rem auto 0;
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 1.5rem 1.75rem;
    max-width: 42rem;
}
.avertissement { border-left: 4px solid var(--accent-fort); }
.rassurance { border-left: 4px solid var(--sauge-aplat); }
.avertissement__titre,
.rassurance__titre {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.7rem;
}
.avertissement__titre { color: var(--accent-texte); }
.rassurance__titre { color: var(--sauge-fort); }
.avertissement p:not(.avertissement__titre),
.rassurance p:not(.rassurance__titre) {
    color: var(--couleur-texte-doux);
    line-height: 1.65;
    margin: 0.5rem 0 0;
}

/* ---------- Frise chronologique ---------- */
.frise {
    list-style: none;
    position: relative;
    padding-left: 1.75rem;
}
.frise::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 2px;
    background: linear-gradient(var(--accent), var(--accent-fort));
    opacity: 0.5;
}
.frise__etape { position: relative; padding: 0 0 1.75rem; }
.frise__etape:last-child { padding-bottom: 0; }
.frise__pastille {
    position: absolute;
    left: -1.75rem;
    top: 0.3rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--couleur-fond-carte);
    border: 2px solid var(--accent-fort);
    transition: var(--transition);
}
.frise__etape--faite .frise__pastille { background: var(--accent-fort); }
.frise__etape--active .frise__pastille {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent);
}
.frise__etape h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.frise__etape--active h3 { color: var(--accent-texte); }
.frise__etape p { color: var(--couleur-texte-doux); font-size: 0.95rem; line-height: 1.6; max-width: 38rem; }
.frise__compteur { color: var(--accent-texte); }

/* ---------- Cartes (parents et chiots) ---------- */
.parents,
.chiots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
}
.parents { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.carte {
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre-douce);
    transition: transform var(--transition), box-shadow var(--transition);
}
.carte:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-forte), 0 0 24px var(--accent-voile);
}
.carte__media {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--couleur-fond-2);
}
/* Portrait de Valencia : recentré sur elle dans le cadre 4/3 de la carte */
.carte__media--maman { object-position: 52% 25%; }
/* Dégradé de secours si aucune photo n'est fournie */
.carte__media--garuda {
    background:
        radial-gradient(ellipse at 30% 20%, var(--coucher-haut), transparent 60%),
        radial-gradient(ellipse at 70% 80%, var(--coucher-bas), transparent 60%),
        var(--couleur-fond-2);
}
.carte__media--mystere {
    display: grid;
    place-items: center;
    font-size: 3rem;
    color: var(--couleur-texte-doux);
    background:
        radial-gradient(ellipse at 50% 30%, rgba(95, 127, 91, 0.10), transparent 60%),
        var(--couleur-fond-2);
}
.carte__corps { padding: 1rem 1.25rem 1.25rem; }
.carte__titre {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 600;
}
.carte__titre .collier-pastille { margin-right: 0.35rem; }
.carte__sexe { color: var(--sauge); font-size: 1rem; }
.carte__sous-titre {
    color: var(--accent-texte);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
}
/* Garçon = bleu, fille = rose (couleur par défaut ci-dessus) */
.carte__sous-titre--male { color: var(--sauge); }
.carte__infos {
    list-style: none;
    color: var(--couleur-texte-doux);
    font-size: 0.95rem;
    display: grid;
    gap: 0.25rem;
}
.carte__infos li::before { content: '🐾 '; font-size: 0.8em; }
.carte__note { color: var(--couleur-texte-doux); font-style: italic; margin: 0.4rem 0; }
.carte__liens { margin-top: 0.75rem; font-size: 0.9rem; }
.carte__liens a { color: var(--sauge); text-decoration: none; }
.carte__liens a:hover { text-decoration: underline; }

/* ---------- Bande « Valencia en images » ---------- */
.bande__titre {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--accent-texte);
    margin: 2rem 0 0.9rem;
}
.bande {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 1rem;
}
.bande__item {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--rayon);
    overflow: hidden;
    border: 1px solid var(--couleur-bordure);
    box-shadow: var(--ombre-douce);
    transition: transform var(--transition), box-shadow var(--transition);
}
.bande__item:hover,
.bande__item:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--ombre-forte), 0 0 20px var(--accent-voile);
}
.bande__item picture { display: block; width: 100%; height: 100%; }
.bande__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.bande__item:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
    .bande__item img, .bande__item { transition: none; }
}
.bande__legende {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2rem 0.8rem 0.7rem;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--couleur-texte);
    background: linear-gradient(transparent, rgba(28, 22, 18, 0.85));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.bande__item--plus {
    display: grid;
    place-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--sauge);
    font-size: 0.9rem;
    line-height: 1.6;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(95, 127, 91, 0.10), transparent 60%),
        var(--couleur-fond-carte);
    border: 1px dashed var(--sauge);
}

/* ---------- Badges de statut des chiots ---------- */
.statut {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.statut--disponible { background: rgba(95, 127, 91, 0.15); color: var(--sauge); border: 1px solid rgba(95, 127, 91, 0.4); }
.statut--reserve    { background: rgba(192, 90, 62, 0.15); color: var(--accent-texte); border: 1px solid rgba(192, 90, 62, 0.4); }
.statut--adopte     { background: rgba(110, 100, 91, 0.15); color: var(--couleur-texte-doux); border: 1px solid rgba(110, 100, 91, 0.4); }

/* ---------- Encart « chiots à venir » ---------- */
.chiots-attente {
    text-align: center;
    background: var(--couleur-fond-carte);
    border: 1px dashed var(--accent-fort);
    border-radius: var(--rayon);
    padding: 2.5rem 1.5rem;
    display: grid;
    gap: 0.7rem;
    color: var(--couleur-texte-doux);
}
.chiots-attente p { max-width: 36rem; margin: 0 auto; line-height: 1.65; }

/* ---------- Colliers d'identification des chiots ---------- */
.colliers {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.1rem;
    max-width: 38rem;
    margin: 0.35rem auto 0.5rem;
    padding: 0;
}
.colliers li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    color: var(--couleur-texte);
}
.collier-pastille {
    display: inline-block;
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
    vertical-align: -0.15em;
}
/* Couleurs des colliers (clés de $COLLIERS dans donnees_portee.php) */
.collier--rouge       { background-color: #e02424; }
.collier--mauve       { background-color: #b57edc; }
.collier--violet      { background-color: #7c3aed; }
.collier--rose        { background-color: #f472b6; }
.collier--orange      { background-color: #f97316; }
.collier--jaune       { background-color: #facc15; }
.collier--bleu        { background-color: #2563eb; }
.collier--bleu-clair  { background-color: #7dd3fc; }
.collier--vert        { background-color: #16a34a; }
.collier--vert-pomme  { background-color: #84cc16; }
.collier--noir        { background-color: #15151d; border-color: rgba(255, 255, 255, 0.4); }
.collier--marron      { background-color: #8b5a2b; }
/* Colliers métallisés : reflet diagonal par-dessus la couleur de base */
.collier--rouge-metal,
.collier--bleu-metal,
.collier--argent {
    background-image: linear-gradient(135deg,
        rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.15) 35%,
        transparent 50%, rgba(0, 0, 0, 0.25) 100%);
}
.collier--rouge-metal { background-color: #c22a2a; }
.collier--bleu-metal  { background-color: #3b6bd6; }
.collier--argent      { background-color: #c7ccd6; }
/* Grande pastille (titre de la page d'un chiot) */
.collier-pastille--grande {
    width: 1.6rem;
    height: 1.6rem;
    border-width: 3px;
    vertical-align: -0.12em;
}

/* ---------- Galeries des chiots (chiots.php et chiot.php) ---------- */
/* Puces de la fratrie : un lien par chiot, pastille + titre */
.fratrie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.65rem;
    margin: 0.25rem auto 1.5rem;
    max-width: 52rem;
}
.fratrie__puce {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    color: var(--couleur-texte);
    font-size: 0.88rem;
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.fratrie__puce:hover,
.fratrie__puce:focus-visible {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 0 14px var(--accent-voile);
}
/* Petit mot sur le chiot, en exergue au-dessus de sa galerie */
.chiot-note {
    max-width: 34rem;
    margin: 0.25rem auto 1.4rem;
    text-align: center;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--accent-texte);
}
/* Pastille dans les légendes de la galerie générale */
.galerie__date .collier-pastille {
    width: 0.8rem;
    height: 0.8rem;
    border-width: 1px;
    margin-right: 0.15rem;
}
/* Bouton vers la galerie générale sous les fiches */
.chiots__galerie-lien { text-align: center; margin-top: 1.75rem; }
/* Vignettes uniformes (carrées) dans les galeries des chiots : les photos
   mélangent portrait et paysage, le recadrage CSS aligne la grille.
   La visionneuse affiche bien sûr chaque photo entière. */
.page-galerie-chiots .galerie__item img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.chiots-attente strong { color: var(--accent-texte); }
.chiots-attente a { color: var(--sauge); }
.chiots-attente__emoji {
    font-size: 1.6rem;
    letter-spacing: 0.5rem;
    animation: trottiner 2.4s ease-in-out infinite;
}
@keyframes trottiner {
    0%, 100% { transform: translateX(-6px); }
    50%      { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .chiots-attente__emoji { animation: none; }
}

/* ---------- Administration des fiches des chiots (admin.php) ---------- */
.admin-chiots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 1.25rem;
}
.admin-chiots__vide { text-align: center; color: var(--couleur-texte-doux); margin: 2rem 0; }
.fiche-admin {
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 1.25rem 1.4rem 1.4rem;
}
.fiche-admin--ajout { border-style: dashed; border-color: var(--sauge-aplat); }
.fiche-admin__titre {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--accent-texte);
}
.fiche-admin__photos {
    margin-left: auto;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--sauge);
    text-decoration: none;
}
.fiche-admin__photos:hover { text-decoration: underline; }
.fiche-admin__form { display: grid; gap: 0.75rem; }
.fiche-admin__form label {
    display: grid;
    gap: 0.25rem;
    font-size: 0.82rem;
    color: var(--couleur-texte-doux);
}
.fiche-admin__form input,
.fiche-admin__form select {
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--couleur-bordure);
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    font: inherit;
    font-size: 0.95rem;
}
.fiche-admin__form input:focus,
.fiche-admin__form select:focus {
    outline: none;
    border-color: var(--couleur-primaire);
    box-shadow: 0 0 0 2px var(--accent-voile);
}
.fiche-admin__form .bouton { justify-self: start; margin-top: 0.25rem; }
.fiche-admin__form label.fiche-admin__case {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: var(--couleur-texte);
}
.fiche-admin__form label.fiche-admin__case input[type="checkbox"] {
    width: auto;
    padding: 0;
}
.fiche-admin__suppression { margin-top: 0.9rem; text-align: right; }
.fiche-admin__suppression .bouton { font-size: 0.8rem; padding: 0.35rem 0.8rem; }
.fiche-admin__aide {
    margin-top: 0.9rem;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--couleur-texte-doux);
}
.fiche-admin__aide code { color: var(--sauge-fort); font-size: 0.78rem; }
/* Panneau « photo du papa » : aperçu à gauche, actions à droite */
.photo-pere {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.photo-pere picture { flex: 0 0 auto; }
.photo-pere__apercu {
    display: block;
    width: 150px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--couleur-bordure);
}
.photo-pere__actions { flex: 1 1 14rem; }
.photo-pere__actions .fiche-admin__aide { margin-top: 0; margin-bottom: 0.8rem; }

/* Adresses inscrites à la liste d'attente */
.liste-inscrits {
    list-style: none;
    display: grid;
    gap: 0.3rem;
    max-height: 18rem;
    overflow-y: auto;
    font-size: 0.9rem;
}
.liste-inscrits li {
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    background: var(--couleur-fond);
    border: 1px solid var(--couleur-bordure);
    word-break: break-all;
}
/* Pastilles-cases à cocher : quels chiots sont sur une photo */
.form-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
}
.form-tags--upload { margin: 0.9rem 0; gap: 0.4rem; }
.form-tags__libelle { font-size: 0.85rem; color: var(--couleur-texte-doux); margin-right: 0.3rem; }
.form-tags__aide { font-size: 0.75rem; color: var(--couleur-texte-doux); }
.tag-collier {
    position: relative;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    padding: 0.15rem;
}
.tag-collier input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.tag-collier .collier-pastille {
    opacity: 0.22;
    transition: opacity var(--transition), transform var(--transition);
}
.tag-collier input:checked + .collier-pastille { opacity: 1; transform: scale(1.15); }
.tag-collier input:focus-visible + .collier-pastille { outline: 2px solid var(--sauge); outline-offset: 2px; }
.form-tags .bouton--mini { margin-left: 0.25rem; }

/* Panneau calendrier : pleine largeur au-dessus des fiches, champs côte à côte */
.fiche-admin--calendrier { margin-bottom: 1.5rem; border-color: var(--accent-fort); }
.fiche-admin__form--calendrier {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    align-items: end;
}
.fiche-admin__form--calendrier .bouton { margin-top: 0; }

/* ---------- La race ---------- */
.race > p { max-width: 44rem; margin-bottom: 1rem; line-height: 1.7; color: var(--couleur-texte); }
.race > p:last-of-type { margin-bottom: 1.5rem; }
.race p strong { color: var(--accent-texte); }
.race__points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}
.race__point {
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 1.1rem 1.25rem;
}
.race__point h3 { font-size: 1rem; margin-bottom: 0.45rem; color: var(--accent-texte); }
/* Pas de hyphens: auto — il coupait les mots en plein milieu (« ja-mais »).
   Le mot entier passe à la ligne ; break-word ne sert que si un mot dépasse
   à lui seul la largeur de la carte */
.race__point p { font-size: 0.92rem; line-height: 1.6; color: var(--couleur-texte-doux); margin: 0; overflow-wrap: break-word; }
.race__point p + p { margin-top: 0.55rem; }

/* ---------- Adoption responsable ---------- */
.adoption {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.25rem;
}
.adoption__colonne {
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 1.5rem;
}
.adoption__colonne h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.15rem;
    margin-bottom: 1rem;
    color: var(--accent-texte);
}
.liste-coche { list-style: none; display: grid; gap: 0.6rem; }
.liste-coche li {
    padding-left: 1.6rem;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--couleur-texte);
    text-wrap: pretty;
}
.liste-coche li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: var(--sauge);
}
.liste-coche--coeur li::before { content: '♥'; color: var(--accent-texte); }
.liste-coche strong { color: var(--accent-texte); }

/* ---------- Questions fréquentes ---------- */
.faq { display: grid; gap: 0.75rem; max-width: 46rem; }
.faq__item {
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    overflow: hidden;
}
.faq__item summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 3rem 1rem 1.25rem;
    font-weight: 600;
    position: relative;
    transition: color var(--transition), background var(--transition);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: '+';
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--accent-texte);
    transition: transform var(--transition);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item summary:hover,
.faq__item summary:focus-visible {
    color: var(--accent-texte);
    background: rgba(192, 90, 62, 0.06);
}
.faq__item[open] summary { color: var(--accent-texte); }
/* Une phrase par paragraphe : espacement serré entre les lignes d'une même
   réponse, respiration normale seulement sous la dernière */
.faq__item p {
    padding: 0 1.25rem 0.55rem;
    color: var(--couleur-texte-doux);
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 42rem;
}
.faq__item p:last-of-type { padding-bottom: 1.15rem; }
/* Paragraphe qui amorce une liste : reste collé à elle */
.faq__item p.faq__amorce { padding-bottom: 0.4rem; }
.faq__liste {
    list-style: none;
    margin: 0 1.25rem 1.15rem;
    display: grid;
    gap: 0.3rem;
    max-width: 42rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--couleur-texte-doux);
}
.faq__liste li { position: relative; padding-left: 1.4rem; text-wrap: pretty; }
.faq__liste li::before {
    content: '';
    position: absolute;
    left: 0.1rem;
    top: 0.15em;
    width: 0.8rem;
    height: 1.05rem;
    background: var(--or-hermine);
    -webkit-mask: var(--hermine) center / contain no-repeat;
            mask: var(--hermine) center / contain no-repeat;
}

/* ---------- Contact ---------- */
.section--contact {
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 0%, var(--coucher-haut), transparent 70%),
        var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 2.5rem 1.5rem;
}
.section--contact p { max-width: 36rem; margin: 0 auto 1rem; line-height: 1.65; color: var(--couleur-texte-doux); }
/* Titre centré : l'ornement se centre aussi, symétrique comme sur le flyer —
   filet, hermine, filet */
.section--contact .section__titre::after {
    width: 8.5rem;
    margin-inline: auto;
    -webkit-mask: linear-gradient(#000 0 0) left center / 3.2rem 2px no-repeat,
                  var(--hermine) center / 1.2rem 1.6rem no-repeat,
                  linear-gradient(#000 0 0) right center / 3.2rem 2px no-repeat;
            mask: linear-gradient(#000 0 0) left center / 3.2rem 2px no-repeat,
                  var(--hermine) center / 1.2rem 1.6rem no-repeat,
                  linear-gradient(#000 0 0) right center / 3.2rem 2px no-repeat;
}
.contact__question {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.1rem, 2.6vw, 1.3rem);
    font-style: italic;
    color: var(--accent-texte);
}
.contact__promesse { font-weight: 600; color: var(--couleur-texte); margin-bottom: 1.6rem; }
.bouton-contact {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-fort));
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 18px var(--accent-voile);
    transition: transform var(--transition), box-shadow var(--transition);
}
.bouton-contact:hover,
.bouton-contact:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--accent-voile);
}

/* ---------- Formulaire de présentation (candidature à l'adoption) ---------- */
.formulaire__intro {
    max-width: 42rem;
    margin: 0 auto 0.6rem;
    line-height: 1.7;
    color: var(--couleur-texte-doux);
}
.formulaire__intro:last-of-type { margin-bottom: 1.75rem; }
.formulaire { display: grid; gap: 1.25rem; max-width: 46rem; margin: 0 auto; }
.formulaire fieldset {
    display: grid;
    gap: 0.95rem;
    padding: 1.1rem 1.4rem 1.4rem;
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
}
.formulaire legend {
    padding: 0 0.5rem;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-texte);
}
.formulaire label {
    display: grid;
    gap: 0.3rem;
    font-size: 0.88rem;
    color: var(--couleur-texte);
}
.formulaire__facultatif { font-weight: 400; color: var(--couleur-texte-doux); }
.formulaire input,
.formulaire select,
.formulaire textarea {
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--couleur-bordure);
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    font: inherit;
    font-size: 0.95rem;
}
.formulaire textarea { resize: vertical; }
.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
    outline: none;
    border-color: var(--couleur-primaire);
    box-shadow: 0 0 0 2px var(--accent-voile);
}
/* Deux champs courts côte à côte (prénom/nom, ville/département…) */
.formulaire__duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.95rem;
}
/* Questions à choix fermé : boutons radio alignés sur une ligne */
.formulaire__choix {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    padding: 0.5rem 0.9rem 0.7rem !important;
    border-radius: 8px !important;
}
.formulaire__choix legend {
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--couleur-texte);
    padding: 0;
}
.formulaire__choix label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}
.formulaire__choix input { accent-color: var(--accent); }
.formulaire__rgpd { font-size: 0.8rem; line-height: 1.6; color: var(--couleur-texte-doux); }
.formulaire__envoyer { justify-self: center; border: none; cursor: pointer; font: inherit; font-weight: 600; }
/* Pot de miel anti-robots, et libellés réservés aux lecteurs d'écran :
   sortis de l'écran, invisibles pour un humain mais toujours annoncés */
.libelle-invisible,
.champ-piege {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* Récapitulatif des champs manquants après validation */
.formulaire__erreurs {
    max-width: 46rem;
    margin: 0 auto 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--accent);
    border-radius: var(--rayon);
    background: rgba(192, 90, 62, 0.08);
    color: var(--couleur-texte);
    font-size: 0.92rem;
    line-height: 1.6;
}
.formulaire__erreurs ul { margin-top: 0.4rem; padding-left: 1.4rem; }
/* Confirmation d'envoi */
.formulaire__confirmation { text-align: center; padding: 2rem 1rem; }
.formulaire__confirmation-emoji { font-size: 2.4rem; margin-bottom: 0.75rem; }
.formulaire__confirmation h2 {
    font-family: 'Fraunces', Georgia, serif;
    color: var(--accent-texte);
    margin-bottom: 0.9rem;
}
.formulaire__confirmation p { max-width: 34rem; margin: 0 auto 1rem; line-height: 1.65; color: var(--couleur-texte-doux); }

/* ---------- Boutons du hero ---------- */
.bouton-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.9rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform var(--transition), box-shadow var(--transition),
                background var(--transition), color var(--transition);
}
.bouton-hero--primaire {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
.bouton-hero--primaire:hover,
.bouton-hero--primaire:focus-visible {
    background: var(--accent-fort);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.bouton-hero--fantome {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff;
    backdrop-filter: blur(6px);
}
.bouton-hero--fantome:hover,
.bouton-hero--fantome:focus-visible {
    background: #fff;
    color: var(--couleur-texte);
    transform: translateY(-2px);
}

/* Rangée de boutons centrée (page d'erreur) — la CSP interdit le style en ligne */
.hero__actions--centre { justify-content: center; }

/* ---------- Bandeau photo entre deux sections ----------
   Largeur limitée à la colonne principale : les photos disponibles font
   au plus 1280 px de large, les étirer sur 100vw les rendrait floues. */
.bandeau {
    position: relative;
    margin: 3.5rem 0;
    width: 100%;
    height: clamp(220px, 34vw, 380px);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre-douce);
}
.bandeau picture { display: block; width: 100%; height: 100%; }
.bandeau img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
}
.bandeau__citation {
    position: absolute;
    inset: auto 0 0 0;
    padding: 4rem clamp(1.25rem, 5vw, 3rem) clamp(1.25rem, 3vw, 2rem);
    background: linear-gradient(transparent, rgba(28, 22, 18, 0.82));
    color: #fff;
    text-align: center;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.1rem, 2.8vw, 1.6rem);
    font-style: italic;
    line-height: 1.4;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

/* ---------- Encart « prévenez-moi à la naissance » ---------- */
.alerte-naissance {
    margin: 3.5rem 0;
    scroll-margin-top: 4.5rem;
    padding: clamp(1.75rem, 4vw, 2.5rem);
    border-radius: var(--rayon);
    border: 1px solid var(--couleur-bordure);
    background:
        radial-gradient(120% 140% at 0% 0%, var(--coucher-haut), transparent 60%),
        var(--couleur-fond-carte);
    box-shadow: var(--ombre-douce);
    text-align: center;
}
.alerte-naissance__titre {
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    margin-bottom: 0.6rem;
    color: var(--couleur-texte);
}
.alerte-naissance__texte {
    max-width: 34rem;
    margin: 0 auto 0.5rem;
    color: var(--couleur-texte-doux);
    line-height: 1.65;
}
.alerte-naissance__texte:last-of-type { margin-bottom: 1.5rem; }
.alerte-naissance__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    max-width: 32rem;
    margin: 0 auto;
}
.alerte-naissance__form input[type="email"] {
    flex: 1 1 16rem;
    min-width: 0;
    padding: 0.85rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--couleur-bordure);
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    font: inherit;
}
.alerte-naissance__form input[type="email"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-voile);
}
.alerte-naissance__form button {
    padding: 0.85rem 1.7rem;
    border: none;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}
.alerte-naissance__form button:hover { background: var(--accent-fort); transform: translateY(-2px); }
.alerte-naissance__mention {
    margin-top: 0.9rem;
    font-size: 0.8rem;
    color: var(--couleur-texte-doux);
}
/* Retour après envoi */
.alerte-naissance__reponse {
    max-width: 34rem;
    margin: 0 auto;
    padding: 0.9rem 1.2rem;
    border-radius: 10px;
    font-weight: 500;
    line-height: 1.55;
}
.alerte-naissance__reponse--ok {
    background: #1d2a1a;
    color: #a6c29d;
    border: 1px solid #38512f;
}
.alerte-naissance__reponse--ko {
    background: #2e1a14;
    color: #e9a48f;
    border: 1px solid #5c2d1e;
}

/* ---------- Vidéo de la portée ---------- */
/* Première section de la page : marge du haut réduite, elle suit le sommaire */
.section--video { margin-top: 2rem; }

.video {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--rayon);
    border: 1px solid var(--couleur-bordure);
    box-shadow: var(--ombre-douce);
    background: #000;
}
/* Vaut pour l'iframe YouTube, la balise <video> et l'iframe injecté au clic */
.video__lecteur {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Affiche cliquable : tant qu'elle est là, aucun script tiers n'est chargé */
.video__facade {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.video__facade picture,
.video__affiche {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter var(--transition);
}
.video__facade:hover .video__affiche,
.video__facade:focus-visible .video__affiche {
    transform: scale(1.03);
    filter: brightness(0.85);
}

/* Pastille de lecture : triangle en bordures CSS, aucune image à charger */
.video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.5rem;
    height: 4.5rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(23, 19, 15, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(3px);
    transition: background var(--transition), transform var(--transition);
}
.video__play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 0.85rem 0 0.85rem 1.4rem;
    border-color: transparent transparent transparent #fff;
}
.video__facade:hover .video__play,
.video__facade:focus-visible .video__play {
    background: var(--accent);
    transform: translate(-50%, -50%) scale(1.08);
}
/* Libellé réservé aux lecteurs d'écran : le triangle suffit à l'œil */
.video__libelle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.video__legende {
    margin: 0.9rem 0 0;
    color: var(--couleur-texte-doux);
    font-size: 0.95rem;
    font-style: italic;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .video__affiche,
    .video__play { transition: none; }
    .video__facade:hover .video__affiche,
    .video__facade:focus-visible .video__affiche { transform: none; }
}

@media (max-width: 40rem) {
    .video__play { width: 3.5rem; height: 3.5rem; }
    .video__play::after { border-width: 0.65rem 0 0.65rem 1.05rem; }
}

/* ---------- Pied de page ---------- */
.pied a { color: var(--sauge-fort); text-decoration: none; }
.pied a:hover { text-decoration: underline; }

/* ---------- Marque de l'élevage ----------
   L'affixe DOG ARC'HANTINO EUS KEMPERLE est la marque du site (décision du 24/09/2026).
   Logotype repris du flyer de la portée : le nom en couleur d'accent, puis le lieu en
   clair, encadré de deux hermines et de deux filets. Décliné en quatre tailles par la
   seule taille de police, tout le reste étant en em. */
.marque {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    color: var(--accent-texte);
    text-decoration: none;
    line-height: 1;
}
.marque__nom {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.marque__lieu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    margin-top: 0.4em;
    font-family: 'Fraunces', Georgia, serif;
    font-size: max(0.42em, 0.62rem);
    font-weight: 600;
    letter-spacing: 0.28em;
    color: var(--couleur-texte);
    white-space: nowrap;
}
/* L'espacement suit aussi la dernière lettre : on le retire pour centrer le mot */
.marque__lieu > span { margin-right: -0.28em; }
.marque__lieu::before,
.marque__lieu::after {
    content: "";
    flex: 1;
    min-width: 1em;
    height: 1px;
    background: var(--or-hermine);
    opacity: 0.7;
}
.marque__hermine {
    flex: none;
    width: 1.05em;
    height: 1.4em;
    fill: var(--or-hermine);
}
a.marque:hover .marque__nom,
a.marque:focus-visible .marque__nom { color: var(--accent-clair); }

/* Premier écran de l'accueil : la marque avant le titre */
.marque--hero {
    align-self: flex-start;
    margin-bottom: 1.5rem;
    font-size: clamp(1.4rem, 3.2vw, 2.6rem);
}

/* Barre du sommaire : à gauche, hors du flux, pour que les ancres restent centrées
   (même raison que le sélecteur de langue, qu'on y avait mis puis retiré). Elle
   n'apparaît qu'une fois le premier écran passé, où la marque est déjà en grand ;
   sous 84 rem, la place manque à côté des ancres. */
.marque--barre {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.05rem;
    transition: opacity 0.25s ease;
}
.js .marque--barre { opacity: 0; pointer-events: none; }
.js .sommaire--marque .marque--barre { opacity: 1; pointer-events: auto; }
@media (max-width: 84rem) {
    .marque--barre { display: none; }
}

/* En-tête des pages intérieures : au-dessus du titre, ramène à l'accueil */
.marque--entete {
    margin-bottom: 1.2rem;
    font-size: clamp(1.1rem, 2.8vw, 1.45rem);
}

/* Pied de page : la marque en grand, puis ce que fait l'élevage et où. La mention
   d'attente s'efface derrière elle — elle disparaîtra le jour de la concession. */
.pied__elevage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.marque--pied { font-size: clamp(1.45rem, 4vw, 2.1rem); }
.pied__accroche {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--couleur-texte-doux);
}
.pied__attente { opacity: .65; font-size: .92em; }

/* ---------- Mobile ---------- */
@media (max-width: 40rem) {
    .section { margin: 2.25rem 0; }
    .intro { padding-left: 1rem; }
    /* La grande pastille du titre d'un chiot passe au-dessus du titre,
       centrée, au lieu de flotter en début de ligne */
    .collier-pastille--grande {
        display: block;
        margin: 0 auto 0.6rem;
    }
}

/* ---------- Très grands écrans : la colonne principale s'élargit un peu ---------- */
@media (min-width: 2560px) {
    .portee { max-width: 68rem; }
}

/* ---------- Pages des parents : palmarès, photos, diplômes et relevés ---------- */
.dossier-etalon,
.dossier-parent {
    max-width: 72rem;
    margin: 1.5rem auto 0;
    padding: 0 clamp(1rem, 4vw, 3rem);
}
.dossier-etalon .bande__titre,
.dossier-parent .bande__titre { margin-top: 2.5rem; }
.dossier-etalon .galerie { margin-top: 0.4rem; }
.palmares {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--couleur-bordure);
}
.palmares__ligne {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 0.4rem 1.2rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--couleur-bordure);
    line-height: 1.6;
}
.palmares__date {
    color: var(--sauge);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    padding-top: 0.1rem;
}
.palmares__texte { color: var(--couleur-texte-doux); text-wrap: pretty; }
.palmares__texte strong { display: block; color: var(--couleur-texte); }
@media (max-width: 40rem) {
    .palmares__ligne { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* Relevé des expositions : tableau repliable, empilé en fiches sur mobile.
   .releve — épreuves et tests officiels — reprend le même cadre et le même
   tableau, mais reste déplié : il n'y tient qu'une ou deux lignes. */
.expositions,
.releve {
    margin-top: 2rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    background: var(--couleur-fond-carte);
}
.releve { margin-top: 0.6rem; }
.expositions__resume {
    cursor: pointer;
    padding: 0.9rem 1.2rem;
    font-weight: 600;
    color: var(--accent-texte);
}
.expositions__nombre { color: var(--couleur-texte-doux); font-weight: 400; }
.expositions__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1.5;
}
.expositions__table th {
    text-align: left;
    padding: 0.6rem 1.2rem;
    color: var(--sauge);
    font-weight: 500;
    border-bottom: 1px solid var(--couleur-bordure);
}
.expositions__table td {
    padding: 0.6rem 1.2rem;
    vertical-align: top;
    color: var(--couleur-texte-doux);
    border-bottom: 1px solid var(--couleur-bordure);
}
.expositions__table td strong { color: var(--couleur-texte); font-weight: 600; }
.expositions__lieu { display: block; }
.expositions__table td:first-child { white-space: nowrap; }
.expositions__source {
    padding: 0.8rem 1.2rem 1rem;
    font-size: 0.85rem;
    color: var(--couleur-texte-doux);
}
.expositions__source a { color: var(--accent-texte); }
/* Lien vers la fiche du chien à la Centrale Canine, dans l'en-tête de la page */
.entete__lien-scc {
    color: var(--accent-texte);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
@media (max-width: 48rem) {
    .expositions__table thead { display: none; }
    .expositions__table tr {
        display: block;
        padding: 0.6rem 1rem;
        border-bottom: 1px solid var(--couleur-bordure);
    }
    .expositions__table td {
        display: grid;
        grid-template-columns: 6rem 1fr;
        gap: 0.8rem;
        padding: 0.15rem 0;
        border: 0;
    }
    .expositions__table td::before {
        content: attr(data-libelle);
        color: var(--sauge);
        font-size: 0.8rem;
    }
    .expositions__table td:first-child { white-space: normal; }
}

/* ---------- Semé d'hermines ----------
   Le motif héraldique breton, comme sur le flyer de la portée : sur tout le fond de la
   page, à peine visible, les photos et les cartes passant par-dessus. Calque fixe sous
   le contenu (le fond du body est reporté sur la racine, il reste dessous). Le panneau
   du hero et les en-têtes ont un fond opaque : ils portent leur propre semé, isolation
   créant un contexte d'empilement pour glisser le calque sous leur contenu. */
body::before,
.hero__contenu::before,
.entete::before {
    content: '';
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--or-hermine);
    opacity: 0.1;
    -webkit-mask: var(--hermine-seme) 0 0 / 377px 471px repeat;
            mask: var(--hermine-seme) 0 0 / 377px 471px repeat;
}
body::before { position: fixed; }
.hero__contenu::before,
.entete::before { position: absolute; }
.hero__contenu,
.entete {
    position: relative;
    isolation: isolate;
}