/* =========================================================
   Caniguide – cg-entete.css
   L'EN-TÊTE DE PAGE, un seul, pour toutes les archives et toutes les pages de
   destination.

   ══ POURQUOI IL EXISTE ══════════════════════════════════════════════════════
   Chaque gabarit décidait de son en-tête, et certains n'en avaient pas. Mesuré
   avant unification, sur onze pages : le titre sortait en 48px sur /races/ et les
   hubs pros, en 30px sur les cinq archives mission et /ou-aller/, en 52px sur les
   pages géo ; sa couleur valait --cg-primary ici et --cg-heading là ; la bande
   teintée existait sur trois pages et nulle part ailleurs. C'est la même maladie
   que les vingt-et-une enveloppes de fil d'Ariane : une décision de présentation
   prise vingt fois est une décision qui diverge vingt fois.

   ══ CE QUE LE COMPOSANT PORTE, DANS L'ORDRE ═════════════════════════════════
   fil d'Ariane · titre · intro · outils de la page.

   🔒 LE FIL D'ARIANE EST DANS LA BANDE, pas au-dessus sur du blanc. C'est
   exactement ce qui faisait « pauvre » : un fil qui flotte sur rien, puis une
   bande qui commence après lui.

   ══ LA TEINTE N'EST PAS UN CHOIX QUE JE FAIS ════════════════════════════════
   🔒 Le dégradé est REPRIS TEL QUEL de .races-hero, à l'octet. Choisir une teinte
   serait une décision de persona, elle ne m'appartient pas — et tout l'intérêt du
   composant est qu'elle se changera ICI, en un seul endroit, le jour où elle sera
   tranchée.

   🔒 PAS DE FOND SUR LA PAGE ENTIÈRE, pas de motif, pas de texture. Un aplat
   continu se bat avec les cartes, les cartes géographiques et les formulaires, qui
   sont eux-mêmes des surfaces claires : on obtiendrait des blocs blancs flottant
   sur un fond, plus incohérent que le blanc actuel. La bande s'arrête où l'en-tête
   s'arrête, et le dégradé la referme sur le blanc du contenu.
   ========================================================= */

.cg-entete {
    /* 🔴 UNE BANDE QUI SE LAISSE PLAFONNER N'EST PLUS UNE BANDE. Mesuré sur la fiche de
       guide : la classe locale de son en-tête portait un `max-width` de 720 px, et le fond
       pleine largeur sortait à 720 px à x=392. Le composant ne peut pas dépendre de ce que
       chaque page a écrit avant lui : il affirme sa propre largeur, une fois, pour tous
       ceux qui l'adoptent. La largeur de LECTURE, elle, reste portée par
       `.cg-entete__inner` — c'est la division du travail entre les deux. */
    max-width: none;
    /* Valeurs reprises de .races-hero, sans y toucher. */
    /* 🔴 UN JETON DE LARGEUR BORNAIT UN ESPACEMENT VERTICAL. Le creux haut du héros
       était plafonné par `--cg-rail-replie`, c'est-à-dire par LA LARGEUR DU RAIL
       REPLIÉ (64 px, définie dans cg-nav-rail.css et employée ailleurs comme
       `width`). Le héros n'a rien à voir avec le rail : élargir le rail aurait
       déplacé l'espace au-dessus du titre, et personne n'aurait fait le lien.
       🔒 `--cg-space-10` vaut le même 64 px. La correction est donc à VALEUR
       CONSTANTE — mesuré avant et après : 64 px au bureau, 34 px au pouce — et elle
       retire un couplage que rien ne déclarait.
       ⚠ TROIS AUTRES DÉCLARATIONS ont la même forme, hors de ce lot :
       cg-comptes.css lignes 37, 280 et 522. Nommées, pas corrigées ici.
       (Le `bottom` de .cg-consent dans global.css n'en est pas : il replie sur la
       hauteur de la barre du bas, ce qui est un usage cohérent.) */
    padding: clamp(38px, 6vw, var(--cg-space-10)) var(--cg-space-5) clamp(26px, 4vw, 30px);
    text-align: center;
    background: linear-gradient(180deg, #f7f5f1 0%, var(--cg-bg) 100%);
}

.cg-entete__inner {
    max-width: var(--cg-container-xl);
    margin: 0 auto;
}

/* Le fil d'Ariane vit dans la bande : il perd ses marges propres, qui étaient
   calculées pour flotter au-dessus du contenu, et se cale à gauche pendant que le
   reste de l'en-tête est centré. Un fil centré se lit mal — l'œil cherche son
   point de départ. */
.cg-entete .cg-breadcrumb-wrap {
    text-align: left;
}

.cg-entete .cg-breadcrumb {
    margin: 0 auto 18px;
    padding-inline: 0;
}

.cg-entete__titre {
    margin: 0 0 var(--cg-space-4);
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--cg-primary);
    text-wrap: balance;
}

.cg-entete__intro {
    max-width: var(--cg-container-sm);
    margin: 0 auto var(--cg-space-6);
    font-size: 1.04rem;
    line-height: 1.75;
    color: var(--cg-text-soft);
}

.cg-entete__intro:last-child {
    margin-bottom: 0;
}

/* Les outils de la page — recherche, chips, navigation par métier — viennent
   après l'intro et gardent leur propre mise en forme : le composant leur donne
   une place, pas une apparence. */
.cg-entete__outils {
    margin-top: var(--cg-space-1);
}

@media (max-width: 640px) {
    .cg-entete {
        padding: 34px var(--cg-space-4) var(--cg-space-5);
    }

    .cg-entete__intro {
        font-size: 0.97rem;
        line-height: 1.65;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LE FIL D'ARIANE EST À LA MÊME DISTANCE DU HEADER SUR TOUTES LES PAGES

   🔴 CE QUI ÉTAIT SERVI, mesuré à 1440 px sur neuf pages de cinq familles :
     14 px — fiche race · guides · contact · quiz · comparateur
     64 px — /races/ · /professionnels/
     88 px — /clubs-canins/ · /refuges/
   Trois valeurs pour un même repère de chrome. Et le fil n'y était pour rien :
   ses marges propres sont nulles PARTOUT. Ce qui variait, c'est le
   `padding-top` du conteneur qui l'englobe — 64 px de bande d'en-tête, plus
   24 px de conteneur sur la famille des lieux. Le fil ne bougeait pas ; le
   décor autour de lui poussait, et il poussait différemment selon la page.

   C'est le cas que le design avait lui-même refusé : un écart au chrome qui
   varie d'une page à l'autre.

   ══ LA RÈGLE, EN UN SEUL ENDROIT ═══════════════════════════════════════════
   Le fil porte sa propre distance — --cg-space-5 au-dessus, --cg-space-4 en
   dessous — et TOUT conteneur qui l'englobe cesse de pousser par le haut.
   Une seule déclaration, servie sur toutes les pages par cg-entete.css.

   🔒 `:has()` et non une liste de sélecteurs de conteneurs. Une liste ne
   contiendrait que les gabarits auxquels j'ai pensé, et le défaut porte
   justement sur celui auquel personne n'a pensé : la règle vise « le
   conteneur QUI CONTIENT le fil », ce qui reste vrai pour un gabarit qui
   n'existe pas encore. Là où `:has()` n'est pas connu, rien ne s'applique et
   on retombe sur l'état d'avant — jamais sur un état cassé.
   ══════════════════════════════════════════════════════════════════════════ */

.cg-breadcrumb-wrap {
    margin-top: var(--cg-space-5);
    margin-bottom: var(--cg-space-4);
}

/* La bande d'en-tête, la section héros, le conteneur d'archive : dès qu'ils
   portent le fil, leur rembourrage haut n'a plus lieu d'être — c'est le fil
   qui tient la distance, et lui seul.

   🔒 0.02px et non 0. Un conteneur à rembourrage NUL laisse la marge du fil
   traverser sa bordure et fusionner avec celle du bloc d'au-dessus : la
   distance servie cesse alors d'être celle qui est écrite ici. Un rembourrage
   infime rétablit la frontière sans se voir. C'est mesuré, pas supposé — à 0
   la distance retombait à celle du conteneur parent. */
.cg-entete:has(.cg-breadcrumb-wrap),
.races-hero:has(.cg-breadcrumb-wrap),
.cg-container-lg:has(.cg-breadcrumb-wrap),
.hero-inner:has(.cg-breadcrumb-wrap),
.cg-entete__inner:has(.cg-breadcrumb-wrap) {
    padding-top: 0.02px;
}