/*
 * Compléments au thème repris du WordPress (theme.css) : icônes SVG à la place de Font Awesome, couverture en vraie image,
 * fenêtre de détail en <dialog> natif (sans jQuery ni JavaScript Bootstrap), formulaire accessible.
 */
.ico { width: 1em; height: 1em; vertical-align: -.125em; fill: currentColor; display: inline-block; }
header .navbar-toggler .ico { width: 40px; height: 40px; }
footer .facebook .ico, .card-contact .social .ico { width: 2rem; height: 2rem; color: var(--color-white); }
.card-contact .social .ico { color: var(--color-primary); }
.card .ico { color: var(--color-primary); }
.btn .ico { color: inherit; }

/* Couverture de l'accueil : image réelle (affichée au plus tôt) à la place du fond CSS du thème */
div.section-jumbotron:before { display: none; }
div.section-jumbotron { isolation: isolate; overflow: hidden; }
.section-jumbotron__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: bottom right; }
div.section-jumbotron::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--color-black-transparency); }
div.section-jumbotron { background: transparent; }

/* Menu mobile ouvert par le script (remplace le collapse de Bootstrap) */
header .navbar-collapse.show { display: block !important; }
@media (min-width: 992px) { header .navbar-collapse { display: flex !important; } }

/* Fenêtre de détail d'une réalisation */
dialog.modal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow-y: auto; }
dialog.modal[open] { display: block; }
dialog.modal::backdrop { background: rgba(0, 0, 0, .55); }
dialog.modal .modal-dialog { margin: 1.75rem auto; }
.modal.modal-achievement .preview { width: 100%; object-fit: cover; }
.thumbnail-button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.modal.modal-achievement .description { margin-top: 1rem; color: var(--color-grey-dark); }
/* Page d'une réalisation : même présentation que la fenêtre, dans la page */
.achievement-page.modal { position: static; display: block; height: auto; overflow: visible; z-index: auto; }

/* Formulaire de contact */
div.section-contact input[type=email], div.section-contact input[type=tel] { width: 100%; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .85rem; color: var(--color-grey-dark); margin: .5rem 0 1rem; }
.wpcf7-response-output.sent { border: 2px solid #46b450; padding: .75rem 1rem; margin: 0 0 1.5rem; }
.wpcf7-response-output.failed { border: 2px solid #dc3232; padding: .75rem 1rem; margin: 0 0 1.5rem; }
.wpcf7-response-output.failed ul { margin: 0; padding-left: 1rem; }
.wpcf7-form-control-wrap { display: block; }

/* Mentions légales */
main.legal { padding: 2rem 0 4rem; max-width: 900px; }
main.legal h2 { font-size: 1.4rem; margin-top: 2rem; }

/* Les images ont leurs dimensions déclarées (évite les décalages au chargement) : hauteur proportionnelle */
.card-thumbnail img, .card .card-body img { height: auto; }

/* Accessibilité (contraste WCAG AA ≥ 4,5:1) : l'orange de la marque reste en fond et sur fond sombre ;
   sur fond blanc, les textes orange prennent un orange plus foncé, et les boutons orange un texte foncé. */
:root { --color-grey-dark: #5f676d; --color-primary-text: #a85f00; }
footer { --color-grey-dark: #8a9298; } /* sur fond noir : gris plus clair */
header li.active a, header .other-links a.contact { color: var(--color-primary-text) !important; }
body.home header li.active a { color: var(--color-primary-text) !important; }
@media (min-width: 992px) { body.home header li.active a, body.home header .other-links a.contact { color: var(--color-primary) !important; } }
div.section-achievements .menu a.active, div.section-achievements .menu a:hover,
.card .card-title, .card em, div.section-contact .wpcf7-response-output,
.modal.modal-achievement .btn.btn-close:hover { color: var(--color-primary-text); }
.btn.btn-primary, .btn.btn-primary:focus, div.section-contact input[type=submit], .modal.modal-achievement .action a { color: var(--color-secondary); }
.btn.btn-primary:hover { color: var(--color-white); }
.modal.modal-achievement .action:hover a { color: var(--color-white); }