/* BOZONNET v3 — base des pages au nouveau gabarit (accueil, Profil & Parcours).
   Les compositions propres à chaque variante d'accueil sont dans /assets/v3/home.css. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bz-bg);color:var(--bz-ink);font:400 18px/1.6 var(--bz-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
@media (max-width:767px){body{font-size:16px}}
:root{accent-color:var(--bz-red)}
input,textarea{caret-color:var(--bz-red)}
::selection{background:color-mix(in srgb,var(--bz-red) 16%,#fff);color:var(--bz-ink)}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
h1,h2,h3{font-weight:600;line-height:1.2;text-wrap:balance}
p{text-wrap:pretty}
strong{font-weight:600}
a{color:var(--bz-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}
/* Survol/clic des liens texte du contenu : priorité minimale, l'en-tête, le pied et les liens à classe gardent leurs règles */
:where(main) a:where(:not([class])):hover,:where(main) a:where(:not([class])):active{color:var(--bz-red)}
:focus-visible{outline:2px solid var(--bz-red);outline-offset:3px}

.bz-wrap{max-width:var(--bz-wrap);margin:0 auto;padding:0 var(--bz-gutter)}

/* Lien d'action avec flèche dessinée (le texte du lien reste le libellé approuvé) */
.bz-links{display:flex;flex-wrap:wrap;gap:4px 32px}
.bz-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:17px;color:var(--bz-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.bz-more svg{width:16px;height:16px;flex:none;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.bz-more:hover,.bz-more:active{color:var(--bz-red)}
.bz-more:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.bz-more svg{transition:none}}

.bz-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:1px solid var(--bz-red);border-radius:2px;background:var(--bz-red);color:#fff;font:600 16px/1 var(--bz-font);text-decoration:none;cursor:pointer}
.bz-btn:hover{background:var(--bz-red-press);border-color:var(--bz-red-press)}
.bz-btn[disabled]{opacity:.6;cursor:progress}
.bz-btn--ink{background:var(--bz-ink);border-color:var(--bz-ink)}
.bz-btn--ink:hover{background:#000;border-color:#000}
.bz-btn--line{background:transparent;border-color:var(--bz-ink);color:var(--bz-ink)}
.bz-btn--line:hover{background:var(--bz-ink);border-color:var(--bz-ink);color:#fff}

/* ---------- Formulaire de contact ---------- */
.bz-form{display:grid;gap:20px}
.bz-field{display:grid;gap:6px;min-width:0}
.bz-field label{font-size:15px;font-weight:600;color:var(--bz-ink)}
.bz-field input,.bz-field select,.bz-field textarea{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--bz-ink-2);border-radius:2px;background:#fff;color:var(--bz-ink);font:400 16px/1.4 var(--bz-font)}
.bz-field textarea{min-height:168px;resize:vertical;line-height:1.55}
.bz-field select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231F2933' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.bz-field select:invalid{color:var(--bz-ink-2)}
.bz-field input:hover,.bz-field select:hover,.bz-field textarea:hover{border-color:var(--bz-ink)}
.bz-field input:focus-visible,.bz-field select:focus-visible,.bz-field textarea:focus-visible{outline:2px solid var(--bz-red);outline-offset:1px;border-color:var(--bz-ink)}
.bz-field [aria-invalid="true"]{border-color:var(--bz-red);box-shadow:inset 0 0 0 1px var(--bz-red)}
.bz-field__err{font-size:15px;font-weight:500;color:var(--bz-red)}
.bz-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.bz-form__note{font-size:15px;line-height:1.5;color:var(--bz-ink-2);max-width:46ch}
.bz-form__note a{color:var(--bz-ink-2)}
.bz-form__status{font-size:16px;font-weight:500}
.bz-form__status:empty{display:none}
/* Formulaire de contact unique (accueil, Profil & Parcours) : Nom | E-mail côte à côte,
   le reste sur toute la largeur du formulaire, limitée à 720 px ; une colonne sous 600 px */
.bz-contact__form{max-width:720px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
.bz-contact__form .bz-field--sujet,.bz-contact__form .bz-field--message,.bz-contact__form .bz-form__foot,.bz-contact__form .bz-form__status{grid-column:1 / -1}
@media (max-width:599px){
  .bz-contact__form{grid-template-columns:minmax(0,1fr)}
  .bz-contact__form .bz-field--nom,.bz-contact__form .bz-field--email{grid-column:1 / -1}
}
.bz-form__status.is-ok{color:var(--bz-ink);padding:14px 16px;border:1px solid var(--bz-ink)}
.bz-form__status.is-err{color:var(--bz-red);padding:14px 16px;border:1px solid var(--bz-red)}
.bz-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- Capture produit + agrandissement ---------- */
.bz-shot{position:relative}
.bz-shot img{width:100%;border:1px solid var(--bz-rule);background:var(--bz-rule)}
.bz-shot__cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;margin-top:8px;font-size:15px;color:var(--bz-ink-2)}
.bz-zoom{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:500;color:var(--bz-ink-2);text-decoration:underline;text-decoration-color:var(--bz-rule);text-underline-offset:4px}
.bz-zoom:hover{color:var(--bz-ink);text-decoration-color:currentColor}
.bz-zoom svg{width:16px;height:16px}
.bz-dialog{width:min(100vw - 24px,1600px);max-width:none;max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--bz-ink);border-radius:2px;background:#fff;color:var(--bz-ink)}
.bz-dialog::backdrop{background:rgba(31,41,51,.72)}
.bz-dialog__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 20px;border-bottom:1px solid var(--bz-rule);font:500 15px/1.3 var(--bz-font)}
.bz-dialog__close{min-height:44px;padding:0 16px;border:1px solid var(--bz-ink);border-radius:2px;background:#fff;color:var(--bz-ink);font:600 15px/1 var(--bz-font);cursor:pointer}
.bz-dialog__close:hover{background:var(--bz-ink);color:#fff}
.bz-dialog__scroll{overflow:auto;max-height:calc(100dvh - 24px - 62px);overscroll-behavior:contain}
.bz-dialog__scroll img{width:2400px;max-width:none;height:auto}
@media (min-width:1000px){.bz-dialog__scroll img{width:100%}}
.bz-dialog__scroll:focus-visible{outline-offset:-3px}

/* ---------- Composants partagés (accueil, Profil & Parcours, Vision) ----------
   Blanc pour lire, gris clair pour regrouper, anthracite pour appuyer, rouge pour l'identité et l'action. */

/* Titre de section à repère vertical rouge */
.bz-h2{position:relative;padding-left:18px;font-size:28px;line-height:1.2;color:var(--bz-ink)}
.bz-h2::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:4px;border-radius:2px;background:var(--bz-red)}
@media (max-width:767px){.bz-h2{font-size:24px;padding-left:16px}}

/* Surface anthracite (Contact) : textes, champs, focus et messages lisibles sur fond sombre */
.bz-ink{background:var(--bz-ink);color:#fff}
.bz-ink h2,.bz-ink h3,.bz-ink .bz-field label{color:#fff}
.bz-ink p,.bz-ink p.muted{color:var(--bz-rule)}
.bz-ink .bz-field input,.bz-ink .bz-field select,.bz-ink .bz-field textarea{border-color:#fff}
.bz-ink .bz-field__err{justify-self:start;padding:2px 8px;border-radius:2px;background:var(--bz-red);color:#fff}
.bz-ink .bz-form__status.is-ok{color:#fff;border-color:#fff}
.bz-ink .bz-form__status.is-err{color:#fff;background:var(--bz-red);border-color:var(--bz-red)}
/* le rouge ne contraste qu'à 2,4:1 sur anthracite : contour de focus blanc */
.bz-ink :focus-visible,.bz-ink .bz-field input:focus-visible,.bz-ink .bz-field select:focus-visible,.bz-ink .bz-field textarea:focus-visible{outline-color:#fff}
.bz-ink a,.bz-ink .bz-form__note a{color:#fff;text-decoration-color:currentColor}
.bz-ink a:hover{color:#fff;text-decoration-thickness:2px}