/* Guide du Chien V10 : raccords propres à WordPress (paquet 1, fondations, 05/10/2026).
   v10.css est la feuille de la charte, telle quelle. Ici, uniquement ce qu'il faut pour la poser dans WordPress :
   les panneaux du menu et de la recherche qui s'ouvrent par-dessus la page, le vrai champ de recherche,
   un seul HTML pour le pied de page, la tablette, les liens d'accessibilité.
   Aucune couleur, police ou forme nouvelle. Seuil ordinateur : 1200 px (même valeur que v10.css). */

/* ---------- Page ---------- */
html,body{margin:0;background:#ffffff}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.gd .gd-main{display:block}
.gd-skip{position:absolute;left:-9999px;top:8px;z-index:2147483647;padding:12px 16px;border-radius:16px;background:#1f2a5a;color:#ffffff;font:900 15px/1.2 Lato,'Segoe UI',system-ui,sans-serif;text-decoration:none}
.gd-skip:focus{left:8px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}

/* ---------- En-tête : la loupe de la pilule « Rechercher » sur ordinateur (19 px, trait 2,4 comme EnTeteOrdinateur) ---------- */
@media (min-width:1200px){.gd .g-btn-search svg{width:19px;height:19px;stroke-width:2.4}}

/* ---------- Menu et recherche du téléphone : plein écran, par-dessus la page (composants Menu et Recherche) ---------- */
html.gd-ouvert{overflow:hidden}
.gd .gd-panneau[hidden]{display:none!important}
.gd .g-ov.gd-panneau{position:fixed;inset:0;z-index:2147483647;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.gd .g-ov.gd-panneau>*{flex-shrink:0} /* hauteur fixe : les blocs ne se tassent pas */
.gd .g-ov>.g-search{text-align:left;width:auto;font-size:16px} /* un bouton : « .gd button » lui donnerait les 18 px de la page */
.gd .g-ov>.g-search span{text-align:left}
.gd .g-mfoot .g-foot-soc a,.gd .g-foot .g-foot-soc a{display:block;padding:0;color:inherit}

/* ---------- Le vrai champ de recherche, à l'allure du champ de la charte (16 px : sinon l'iPhone zoome) ---------- */
.gd .g-sin input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;font-family:var(--ft);font-size:16px;color:var(--ink);caret-color:#cf3b6e;text-overflow:ellipsis;-webkit-appearance:none;appearance:none}
.gd .g-sin input::placeholder{color:var(--meta);opacity:1}
.gd .g-sin input::-webkit-search-cancel-button,.gd .g-sin input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.gd .g-sin input:focus,.gd .g-sin input:focus-visible{outline:none}
.gd .g-sin{cursor:text}

/* ---------- Recherche sur ordinateur : panneau sous l'en-tête, sur le voile bleu nuit (composant RechercheOrdinateur) ---------- */
.gd .gd-voile{position:fixed;left:0;right:0;bottom:0;top:88px;z-index:2147483647;background:rgba(31,42,90,.34);padding:8px 16px 40px;overflow-y:auto;overscroll-behavior:contain}
.gd .gd-dscol{display:flex;flex-direction:column;gap:24px}

/* ---------- Pied de page : un seul HTML (celui de l'ordinateur), rendu comme PiedDePage sur téléphone ---------- */
@media (max-width:1199.98px){.gd .g-foot-in,.gd .g-foot-in>div:first-child{display:contents}}

/* ---------- Tablette (768 à 1199 px) : la mise en page du téléphone, dans une colonne de 760 px au centre ---------- */
@media (min-width:768px) and (max-width:1199.98px){
 .gd .g-head{padding-left:max(14px,calc(50% - 380px));padding-right:max(10px,calc(50% - 380px))}
 .gd .gd-main{max-width:760px;margin-left:auto;margin-right:auto}
 .gd .g-foot{padding-left:max(24px,calc(50% - 356px));padding-right:max(24px,calc(50% - 356px))}
 .gd .g-ov.gd-panneau{padding-left:max(0px,calc(50% - 380px));padding-right:max(0px,calc(50% - 380px))}
}

/* ---------- Gabarit provisoire du paquet 1 (remplacé par les vrais gabarits) ---------- */
.gd .gd-provisoire{max-width:700px;margin:0 auto}
.gd .gd-prov-tete{padding:24px 20px 0}
.gd .gd-prov-une{margin:20px 12px 0}
@media (min-width:1200px){.gd .gd-prov-tete{padding:44px 0 0}.gd .gd-prov-une{margin:24px 0 0}}

/* ==========================================================================
   Paquet 2 (05/10/2026) : pages d'article, fin d'article, lettre du dimanche, commentaires
   Raccords seulement : la charte (v10.css) donne l'allure ; ici, ce qu'il faut pour les vrais éléments de WordPress,
   de Kit et de Novashare (champs, boutons, liens), sans couleur, police ni forme nouvelle.
   ========================================================================== */

/* Colonne de droite (encart assurance, pub qui suit la lecture) : ordinateur seulement */
@media (max-width:1199.98px){.gd .g-side{display:none}}

/* Ligne de l'auteur : le nom mène à sa page, avec l'allure du gras de la charte */
.gd .g-byline a.gd-auteur{color:inherit;text-decoration:none}

/* Encart assurance : son bouton est un vrai lien (vers le comparateur) */
.gd .g-assur a.g-go{text-decoration:none}

/* Photos : le bouton « Enregistrer » de Pinterest (Novashare) se pose sur la photo, dans son format */
.gd .g-fig .ns-pinterest-image{display:block;width:fit-content;max-width:100%;margin:0 auto}
.gd .g-hero-media .ns-pinterest-image{display:block;width:100%}

/* Lettre du dimanche : le formulaire de Kit dans la section de la charte (champ dans son label, bouton « Je m'abonne ») */
.gd .g-nl .gd-nl-form{display:flex;flex-direction:column;gap:13px;margin:0}
.gd .g-nl label .g-in{display:block;margin:0;font-weight:400;color:var(--ink);-webkit-appearance:none;appearance:none;box-shadow:none}
.gd .g-nl .g-in:focus{outline:2px solid #cf3b6e;outline-offset:2px}
.gd .g-nl .g-go:focus-visible{outline:2px solid #1f2a5a;outline-offset:2px}
.gd .g-nl .g-legal a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.gd .g-nl .convertkit-form-builder-notice{margin:0}

/* Partage : les boutons de Novashare, à l'allure des boutons de la charte (48 px, gris-partage, icônes bleu nuit) */
.gd .g-share-b a{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:#f1f3fa;color:#1f2a5a;text-decoration:none}
.gd .g-share-b a:focus-visible{outline:2px solid #1f2a5a;outline-offset:2px}

/* Vidéo : la vidéo chargée au toucher prend la place de l'aperçu */
.gd .g-vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Commentaires : le formulaire de WordPress dans la section de la charte */
.gd .g-com .comment-respond,.gd .g-com .comment-form{display:flex;flex-direction:column;gap:10px;margin:0}
.gd .g-com textarea,.gd .g-com input{display:block;margin:0;color:var(--text);-webkit-appearance:none;appearance:none;box-shadow:none}
.gd .g-com textarea::placeholder,.gd .g-com input::placeholder{color:var(--meta);opacity:1}
.gd .g-com textarea:focus,.gd .g-com input:focus{outline:2px solid #1f2a5a;outline-offset:1px}
.gd .g-com button:focus-visible{outline:2px solid #cf3b6e;outline-offset:2px}
.gd .g-com .g-com-n a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.gd .g-com .gd-com-annuler{font-family:var(--ft);font-size:15px;font-weight:700}
.gd .g-com .gd-com-annuler a{color:#c2306a}
/* La liste des commentaires publiés : son allure est dans la charte (composant Commentaires, v10.css, classes g-com-…,
   depuis le paquet 3). Ici, seulement l'état replié derrière « Lire » (posé par v10.js) et le formulaire de réponse
   que WordPress glisse sous un commentaire. */
.gd .g-com-liste.gd-replie{display:none}
.gd .g-com-ol .comment-respond{margin:4px 0 16px}

/* ==========================================================================
   Paquet 4 (05/10/2026) : l'accueil (CouvertureAccueil, ALaUne, AccueilOrdinateur)
   ========================================================================== */

/* Le champ de la bande : un bouton qui ouvre la recherche (comme celui du menu), à l'allure exacte du champ de la charte
   (« .gd button » lui donnerait sinon la police de la page, 18 px, et un bouton n'est pas pleine largeur de lui-même) */
.gd .g-home-hero .g-search{width:100%;margin:0;border:0;text-align:left;font-size:16px}
@media (min-width:1200px){.gd .g-home-hero .g-search{font-size:17px}}

/* « À la une » : sur ordinateur, à droite de la bande, sans son titre (AccueilOrdinateur), centrée dans la hauteur de la bande */
@media (min-width:1200px){.gd .g-top>.g-unesec{padding:0;justify-content:center}}

/* ==========================================================================
   Paquet 5 (05/10/2026) : pages de rubrique et page Races
   ========================================================================== */

/* Ce qui est replié (« Voir les autres », « Lire la suite », résultats sous le champ) reste dans le HTML, caché par l'attribut
   hidden : les règles d'affichage de la charte (.g-items a{display:flex}…) passeraient sinon devant celle du navigateur. */
.gd .gd-rubrique [hidden],.gd .gd-races [hidden]{display:none!important}
/* 0.5.3 : sauf le texte du bas replié en hidden="until-found", là où le navigateur sait le déployer (classe gd-until-found
   posée par le script de la page) : il garde sa place (hauteur nulle) pour que la recherche du navigateur et les liens de
   Google vers un passage le trouvent ; hors du flux (position absolue), pour ne pas ajouter l'écart de la section. Ailleurs
   (navigateur qui ne connaît pas until-found), il reste en display:none. */
.gd-until-found .gd .gd-rubrique #guide-more[hidden="until-found"],.gd-until-found .gd .gd-races #guide-more[hidden="until-found"]{display:block!important;position:absolute}

/* Photos à taille fixe dans une ligne (vignettes d'À la une, des listes, d'« À lire ensuite », des résultats) : elles ne
   rétrécissent jamais. WordPress donne sizes="auto" aux images chargées au défilement, et Chrome pose alors sur l'image
   contain:size (règle du navigateur) : elle peut se tasser à côté d'un long titre (relevé le 05/10/2026 sur la petite photo
   d'À la une au téléphone : 75 px au lieu de 112, sur l'accueil comme sur les rubriques). */
.gd .g-une a.g-small img,.gd .g-items a img,.gd .g-rel a img,.gd .g-slist img{flex-shrink:0}
/* Une photo qui ne se charge pas (fichier supprimé, réseau coupé) garde la taille de sa case. Même règle du navigateur :
   l'image en sizes="auto" a une taille de secours de 3 000 x 1 500 px, et Chrome donnait 1 500 px de haut à la case vide
   (relevé le 06/10/2026 sur les cartes de la page Races ; même chose pour toute photo du site). */
.gd img[sizes^="auto"]{min-height:0}

/* La loupe du champ des rubriques et de la page Races valide la recherche, comme Entrée (0.5.1) : elle se clique. */
.gd .g-rsearch .g-sfield>i{cursor:pointer}

/* Page Races, barre de lettres au téléphone (BarreLettres) : seulement les lettres qui ont des fiches, et des tuiles calculées
   pour qu'il en tienne sept et demie (une tuile reste coupée au bord : on voit qu'on peut balayer). La maquette le calculait en
   JavaScript ((largeur - 12) / 7,5 - 4, 40 px au moins) ; ici en CSS, pour que rien ne bouge au chargement. */
@media (max-width:1199.98px){
 .gd .gd-races .g-az{--az:max(40px,calc((100% + 12px) / 7.5 - 4px))}
 .gd .gd-races .g-az span{display:none}
}

/* ==========================================================================
   Paquet 6 (06/10/2026) : résultats de recherche, 404, page auteur, à propos, contact, merci, assurance, pages légales
   ========================================================================== */

/* Ce qui est replié (« Voir les autres ») reste dans le HTML, caché par l'attribut hidden (comme sur les rubriques). */
.gd .gd-pages [hidden]{display:none!important}

/* Le champ de recherche de la bande (résultats) et de la 404 : un vrai formulaire ; la loupe est son bouton d'envoi,
   à l'allure de la loupe de la charte (RechercheParNom). */
.gd form.g-rsearch{margin-bottom:0}
.gd .g-sfield .gd-go{all:unset;cursor:pointer;display:flex}
.gd .g-sfield .gd-go:focus-visible{outline:2px solid #1f2a5a;outline-offset:2px;border-radius:50%}

/* Recherche sans résultat : le titre du message est un H2 (il suit le H1 de la page), à l'allure du H3 de VoirLesAutres. */
.gd .g-empty .gd-empty-t{font-size:20px;line-height:1.2}

/* Assurance : le cadre de Meilleurtaux, sur toute la largeur du cadre blanc ; sa hauteur reste celle que règle le script de
   Meilleurtaux (la hauteur de l'écran, avec sa barre de défilement : le mode « pleine hauteur » fait grandir le cadre sans fin).
   Sur un écran piloté à la souris, 800 px fixes (0.6.2, interrupteur data-dyn-resize : inc/compositions-pages.php). */
.gd .g-frame iframe{display:block;width:100%;border:0}

/* Contact (paquet 6) : le formulaire WS Form à l'allure du formulaire des commentaires (composant Commentaires, validé le
   04/10/2026). Les variables du Styler de WS Form (déclarées avec :where, sans poids) sont reprises ici, dans la page Contact
   seulement : champs blancs bordés de filet (2 px, coins de 16 px), 48 px de haut, texte en Lato, aide en gris-meta ; Prénom et
   Nom côte à côte (8 px), 10 px entre les lignes ; bouton bleu-nuit de 50 px. Les intitulés restent pour les lecteurs d'écran. */
.gd .gd-contact .wsf-form{--wsf-form-grid-gap:8px;--wsf-form-color-base:#34395a;--wsf-form-color-base-contrast:#ffffff;--wsf-form-color-primary:#1f2a5a;--wsf-form-color-accent:#1f2a5a;--wsf-form-color-danger:#a8304f;--wsf-form-font-family:var(--ft);--wsf-field-font-family:var(--ft);--wsf-field-font-size:15px;--wsf-field-line-height:1.4;--wsf-field-padding-vertical:11.5px;--wsf-field-padding-horizontal:14px;--wsf-field-border-width:2px;--wsf-field-border-style:solid;--wsf-field-border-radius:16px;--wsf-field-border-color:#eef0f6;--wsf-field-border-color-hover:#eef0f6;--wsf-field-border-color-focus:#eef0f6;--wsf-field-box-shadow-width-focus:0px;--wsf-field-color:#34395a;--wsf-field-color-placeholder:#5b6178;--wsf-field-color-background:#ffffff;--wsf-field-invalid-feedback-font-size:13.5px;--wsf-field-button-font-family:var(--ft);--wsf-field-button-font-size:16px;--wsf-field-button-font-weight:800;--wsf-field-button-border-width:0px;--wsf-field-button-border-radius:16px;--wsf-field-button-primary-color-background:#1f2a5a;--wsf-field-button-primary-color-background-hover:#1f2a5a;--wsf-field-button-primary-color-background-focus:#1f2a5a;--wsf-field-button-primary-color:#ffffff;--wsf-field-checkbox-gap-horizontal:10px;margin:0}
.gd .gd-contact .wsf-form .wsf-field-wrapper{margin-bottom:10px}
.gd .gd-contact .wsf-form .wsf-field-wrapper:not([data-type=checkbox])>label.wsf-label{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gd .gd-contact .wsf-form .wsf-required-wrapper{display:none}
.gd .gd-contact .wsf-form input.wsf-field:not([type=checkbox]){height:48px;margin:0}
.gd .gd-contact .wsf-form textarea.wsf-field{display:block;height:110px;padding:14px 16px;font-size:16px;line-height:1.5;resize:none}
.gd .gd-contact .wsf-form input.wsf-field:focus,.gd .gd-contact .wsf-form textarea.wsf-field:focus{outline:2px solid #1f2a5a;outline-offset:1px}
.gd .gd-contact .wsf-form [data-type=checkbox]{margin:2px 0 12px}
.gd .gd-contact .wsf-form [data-type=checkbox] label.wsf-label{font-size:14.5px;line-height:1.45;color:#5b6178}
.gd .gd-contact .wsf-form .wsf-bottom{margin-bottom:0}
.gd .gd-contact .wsf-form button.wsf-button{height:50px;padding:0 16px;line-height:1}
.gd .gd-contact .wsf-form button.wsf-button:focus-visible{outline:2px solid #cf3b6e;outline-offset:2px}
.gd .gd-contact .wsf-form [data-type=checkbox]{--wsf-field-checkbox-size:20px;--wsf-field-checkbox-border-radius:4px;--wsf-field-checkbox-gap-horizontal:10px}
.gd .gd-contact .wsf-form [data-row-checkbox]{margin-bottom:0}
.gd .gd-contact .wsf-form input[type=checkbox].wsf-field{border:2px solid #8a90a6;top:1px}
.gd .gd-contact .wsf-form input[type=checkbox].wsf-field:checked{border-color:#1f2a5a}
.gd .gd-contact .wsf-form input[type=checkbox].wsf-field:focus-visible{outline:2px solid #1f2a5a;outline-offset:2px}
.gd .gd-contact .wsf-form.wsf-validated input[type=checkbox].wsf-field:invalid{border-color:#a8304f}