/* Styles globaux — tokens de theme.json (variables --wp--preset--*).
   Mesures relevées sur la maquette Figma VNE_CCI_Webdesign (frame 1440 px). */
:root {
  --vne-navy: var(--wp--preset--color--navy, #333C87);
  --vne-red: var(--wp--preset--color--red, #EA573D);
  --vne-yellow: var(--wp--preset--color--yellow, #F9B036);
  --vne-green: var(--wp--preset--color--green, #66C61D);
  --vne-ink: var(--wp--preset--color--ink, #0F1439);
  --vne-light: var(--wp--preset--color--light, #F5F5F5);
  --f-display: var(--wp--preset--font-family--display);
  --f-sans: var(--wp--preset--font-family--sans);
  --f-body: var(--wp--preset--font-family--body);
  --at-btn-h: 46px;          /* maquette : 45,7 px pour tous les boutons pilule */
  --at-gouttiere: 16px;
}
@media (min-width: 768px) { :root { --at-gouttiere: 24px; } }
@media (min-width: 1440px) { :root { --at-gouttiere: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--vne-ink); font-family: var(--f-body); font-weight: 300; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.at-scroll-bloque { overflow: hidden; }
/* Un élément masqué par l'attribut hidden le reste, même si sa classe pose un display. */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--vne-yellow); outline-offset: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.at-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; border-radius: 60px; background: var(--vne-navy); color: #fff; font-family: var(--f-sans); font-weight: 700; text-decoration: none; }
.at-skip:focus { top: 1rem; }

/* Icônes de la maquette (inc/icones.php) : couleur héritée. */
.at-ico { display: inline-block; flex-shrink: 0; }

/* Conteneurs : large = 1360 (en-tête, grande photo, avis, pied), contenu = 1164. */
.at-large, .at-contenu { width: 100%; margin-inline: auto; padding-inline: var(--at-gouttiere); }
.at-large { max-width: calc(1360px + 2 * var(--at-gouttiere)); }
.at-contenu { max-width: calc(1164px + 2 * var(--at-gouttiere)); }

/* Mise en avant dans un titre (*mot*). */
.at-accent { font-style: normal; color: var(--vne-red); }

/* Boutons pilule (maquette : 45,7 px, rayon 60, Nunito Bold 16). Classe propre au thème. */
.at-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--at-btn-h); padding: .5rem 28px; border: 0; border-radius: 60px; font-family: var(--f-sans); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s, color .2s, transform .2s; }
.at-cta:hover { transform: translateY(-1px); }
.at-cta > span { white-space: nowrap; }
.at-cta__icone { width: 24px; height: 24px; }
.at-cta__icone--apres { width: 17px; height: 17px; transition: transform .3s; }   /* flèche de la maquette (17 px) */
.at-cta:hover .at-cta__icone--apres { transform: translateX(3px); }
.at-cta--light .at-cta__icone, .at-cta--navy .at-cta__icone--apres { color: var(--vne-yellow); }
.at-cta--navy { background: var(--vne-navy); color: #fff; }
.at-cta--navy .at-cta__icone { color: var(--vne-yellow); }
.at-cta--navy:hover { background: var(--vne-ink); }
.at-cta--red { background: var(--vne-red); color: #fff; }
.at-cta--red .at-cta__icone { color: var(--vne-yellow); }
.at-cta--red:hover { background: #d4442b; }
.at-cta--yellow { background: var(--vne-yellow); color: #fff; }
.at-cta--yellow:hover { background: #e89c1c; }
.at-cta--light { background: var(--vne-light); color: var(--vne-navy); }
.at-cta--light:hover { background: #e6e6ec; }
.at-cta--white-red { background: #fff; color: var(--vne-red); }
.at-cta--white-navy { background: #fff; color: var(--vne-navy); }
.at-cta--white-red:hover, .at-cta--white-navy:hover { background: var(--vne-light); }

/* Étiquette inclinée (−3°) : fond plein, texte blanc Nunito ExtraBold. */
.at-etiquette { display: inline-block; transform: rotate(-3deg); color: #fff; font-family: var(--f-sans); font-weight: 800; font-size: var(--et-taille, 45px); letter-spacing: -.03em; line-height: var(--et-h, 55px); height: var(--et-h, 55px); padding-inline: var(--et-pad, 9px); white-space: nowrap; }
.at-etiquette--yellow { background: var(--vne-yellow); }
.at-etiquette--red { background: var(--vne-red); }
.at-etiquette--navy { background: var(--vne-navy); }
.at-etiquette > span { display: block; }

/* Titres de section : ligne Alexandria (l1) et ligne Nunito (l2), 40/45, bleu. */
.vne-titre { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.5rem); line-height: 1.125; color: var(--vne-navy); font-weight: 800; }
.vne-titre__l1 { display: block; font-family: var(--f-display); }
.vne-titre__l2 { display: block; font-family: var(--f-sans); }
.vne-titre__l2--rouge { color: var(--vne-red); }
.vne-point { display: inline-block; width: 20px; height: 20px; margin-left: 7px; border-radius: 50%; background: var(--vne-yellow); vertical-align: -.05em; }
.at-deco { position: absolute; pointer-events: none; max-width: none; }

/* ——— En-tête (maquette : 114 px, logo 154 × 61, menu Nunito Bold 16, gouttière 35) ——— */
.at-header { position: relative; z-index: 50; background: #fff; }
.at-header__inner { display: flex; align-items: center; gap: 20px; min-height: 114px; padding-block: 26px; }
.at-header__marque { flex: none; display: block; }
.at-header__logo { width: 154px; height: auto; }
.at-header__panneau { flex: 1; display: flex; justify-content: flex-start; padding-left: min(187px, 13vw); }   /* maquette : menu à 403 px, logo 42–196, gouttière 20 */
.at-header__panneau-barre, .at-header__panneau-pied { display: none; }
.at-nav__liste { display: flex; gap: 35px; }
.at-nav__liste a { font-family: var(--f-sans); font-weight: 700; font-size: 1rem; color: #000; text-decoration: none; white-space: nowrap; }
.at-nav__liste a:hover, .at-nav__liste .current-menu-item > a { color: var(--vne-red); }
.at-header__actions { flex: none; display: flex; align-items: center; gap: 20px; }
.at-header__cta { padding-inline: 18px 22px; gap: 10px; }

/* Sélecteur de langue : pilule grise, pastille bleue de 40,6 px sur la langue courante. */
.at-langues ul { display: flex; align-items: center; }
.at-langues li > * { display: grid; place-items: center; width: 40.6px; height: 40.6px; border-radius: 50%; font-family: var(--f-sans); font-weight: 700; font-size: 1rem; text-transform: uppercase; color: #000; text-decoration: none; }
.at-langues a:hover { color: var(--vne-red); }
.at-langues .is-actif { background: var(--vne-navy); color: #fff; }
.at-langues--entete ul, .at-langues--panneau ul { padding: 2.5px 3.5px; border-radius: 60px; background: var(--vne-light); }

.at-menu-toggle { display: none; position: relative; width: var(--at-btn-h); height: var(--at-btn-h); border: 0; border-radius: 50%; background: var(--vne-light); color: var(--vne-navy); cursor: pointer; }
.at-menu-toggle__barres, .at-menu-toggle__barres::before, .at-menu-toggle__barres::after { position: absolute; left: 50%; width: 20px; height: 2px; margin-left: -10px; border-radius: 2px; background: currentColor; content: ""; }
.at-menu-toggle__barres { top: 50%; margin-top: -1px; }
.at-menu-toggle__barres::before { top: -6px; }
.at-menu-toggle__barres::after { top: 6px; }

@media (max-width: 1023.98px) {
  .at-header__inner { min-height: 0; padding-block: 16px; justify-content: space-between; }
  .at-header__logo { width: 120px; }
  .at-header__actions .at-langues, .at-header__actions .at-header__cta { display: none; }
  .at-menu-toggle { display: block; }
  /* Panneau plein écran (hamburger) : menu, langues et bouton principal. */
  .at-header__panneau { position: fixed; inset: 0; z-index: 60; flex-direction: column; justify-content: flex-start; gap: 2rem; padding: 16px var(--at-gouttiere) 2rem; background: #fff; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility 0s .25s; }
  .at-header.is-ouvert .at-header__panneau { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s; }
  .at-header__panneau-barre { display: flex; align-items: center; justify-content: space-between; }
  .at-header__fermer { display: grid; place-items: center; width: var(--at-btn-h); height: var(--at-btn-h); border: 0; border-radius: 50%; background: var(--vne-light); color: var(--vne-navy); cursor: pointer; }
  .at-header__fermer .at-ico { width: 22px; height: 22px; }
  .at-nav__liste { flex-direction: column; gap: 0; }
  .at-nav__liste a { display: block; padding: 1rem 0; border-bottom: 1px solid #CDCDCD; font-size: 1.5rem; color: var(--vne-navy); }
  .at-header__panneau-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; }
}
@media (max-width: 767.98px) {
  .at-nav__liste a { text-align: center; }
  .at-header__panneau-pied { flex-direction: column; justify-content: center; }
  .at-header__panneau-pied .at-cta { width: 100%; }
}

/* ——— Vignette vidéo + fenêtre modale ——— */
.at-video { position: relative; margin: 0; overflow: hidden; border-radius: 20px; background: var(--vne-ink); }
.at-video__image { width: 100%; height: 100%; object-fit: cover; }
.at-video__bouton { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; border: 0; padding: 0; background: transparent; color: var(--vne-light); cursor: pointer; }
.at-video__play { display: grid; place-items: center; width: 63.7px; height: 63.7px; border-radius: 50%; background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); color: #fff; transition: transform .3s, background-color .3s; }
.at-video__play .at-ico { width: 15px; height: 15px; margin-left: 3px; }
.at-video__bouton:hover .at-video__play { transform: scale(1.08); background: rgba(255,255,255,.32); }
.at-video__libelle { display: flex; flex-direction: column; font-family: var(--f-sans); font-weight: 700; font-size: 1rem; line-height: 24px; text-align: center; }
.at-video__libelle small { font-family: var(--f-body); font-weight: 300; font-size: .875rem; line-height: 18px; }

.at-modale { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--at-gouttiere); }
.at-modale__fond { position: absolute; inset: 0; background: rgba(15,20,57,.85); }
.at-modale__boite { position: relative; width: min(1100px, 100%); }
.at-modale__media { aspect-ratio: 16 / 9; max-height: 80vh; overflow: hidden; border-radius: 20px; background: #000; }
.at-modale__media iframe, .at-modale__media video { display: block; width: 100%; height: 100%; border: 0; }
.at-modale__fermer { position: absolute; top: -56px; right: 0; display: grid; place-items: center; width: var(--at-btn-h); height: var(--at-btn-h); border: 0; border-radius: 50%; background: #fff; color: var(--vne-navy); cursor: pointer; }

/* ——— Pied de page (maquette : logo 297 × 118, colonnes 294 / 293 / 284, titres 20 px capitales) ——— */
.at-footer { margin-top: clamp(5rem, 1rem + 12vw, 183px); padding-bottom: 54px; color: #000; }
.at-footer__grille { display: grid; grid-template-columns: minmax(0, 1fr) 294px 293px 284px; }
.at-footer__logo { width: 297px; }
.at-footer__texte { max-width: 319px; margin-top: 44px; font-size: .875rem; line-height: 16px; }
.at-footer__titre { font-family: var(--f-sans); font-weight: 800; font-size: 1.25rem; line-height: 45px; text-transform: uppercase; }
.at-footer__liens { margin-top: 1px; }
.at-footer__liens a { font-size: 1rem; line-height: 30px; text-decoration: none; }
.at-footer__liens a:hover { color: var(--vne-red); }
.at-footer__texte--news { margin-top: 4px; font-size: 1rem; line-height: 18px; }
.at-newsletter { position: relative; display: flex; align-items: center; max-width: 282px; height: var(--at-btn-h); margin-top: 27px; border-radius: 60px; background: var(--vne-light); }
.at-newsletter input[type="email"] { flex: 1; min-width: 0; height: 100%; padding: 0 0 0 19px; border: 0; border-radius: 60px; background: transparent; font-family: var(--f-sans); font-weight: 700; font-size: 1rem; color: var(--vne-ink); }
.at-newsletter input::placeholder { color: rgba(0,0,0,.4); }
.at-newsletter input:focus { outline: none; }
.at-newsletter:focus-within { outline: 3px solid var(--vne-yellow); outline-offset: 2px; }
.at-newsletter button { flex: none; display: grid; place-items: center; width: 39.2px; height: 39.2px; margin-right: 4px; border: 0; border-radius: 50%; background: var(--vne-yellow); color: #fff; cursor: pointer; transition: background-color .2s; }
.at-newsletter button:hover { background: var(--vne-red); }
.at-newsletter__piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.at-newsletter__retour { margin-top: .75rem; font-size: .875rem; }
.at-newsletter__retour--ok { color: #3d7d0f; }
.at-newsletter__retour--invalide, .at-newsletter__retour--erreur { color: #b8341d; }

.at-footer__bas { display: grid; grid-template-columns: 1.5fr auto 1fr; align-items: center; gap: 1rem; margin-top: 70px; font-size: .875rem; line-height: 16px; color: rgba(0,0,0,.45); }
.at-footer__legal { display: flex; flex-wrap: wrap; gap: .25rem 12px; }
.at-footer__legal a { text-decoration: none; }
.at-footer__legal a:hover { color: var(--vne-navy); }
.at-langues--pied { justify-self: end; }
.at-langues--pied ul { gap: 10px; }
.at-langues--pied li > * { width: 30.9px; height: 30.9px; font-size: .75rem; color: rgba(0,0,0,.45); }
.at-langues--pied .is-actif { color: #fff; }

@media (max-width: 1279.98px) {
  .at-footer__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3rem; }
  .at-footer__marque { grid-column: 1 / -1; }
}
@media (max-width: 1023.98px) {
  .at-footer__bas { grid-template-columns: 1fr; justify-items: start; }
  .at-langues--pied { justify-self: start; }
}
@media (max-width: 767.98px) {
  .at-footer__grille { grid-template-columns: 1fr; text-align: center; }
  .at-footer__logo { width: 220px; margin-inline: auto; }
  .at-footer__texte { margin: 1.5rem auto 0; }
  .at-newsletter { margin-inline: auto; }
  .at-footer__bas { justify-items: center; text-align: center; }
  .at-footer__legal { justify-content: center; }
  .at-langues--pied { justify-self: center; }
}

/* ——— Pages simples ——— */
.at-page { padding-block: 3rem 0; }
.at-page .vne-titre { margin-bottom: 2rem; }
.at-page__image { width: 100%; max-height: 520px; object-fit: cover; margin-bottom: 2rem; border-radius: 20px; }
.at-article { max-width: 760px; font-size: 1.125rem; line-height: 1.6; }
.at-article > * + * { margin-top: 1em; }
.at-article h2, .at-article h3 { margin-top: 1.5em; font-family: var(--f-display); color: var(--vne-navy); }
.at-article a { color: var(--vne-red); }
.at-liste li + li { margin-top: .5rem; }
.vne-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2rem; }
.vne-boutons--centre { justify-content: center; }
@media (max-width: 767.98px) { .at-page { text-align: center; } .at-article { text-align: left; } .vne-boutons { justify-content: center; } }

/* Titres révélés au défilement (main.js) : une ligne par masque, qui monte de dessous.
   Marges négatives = le masque déborde un peu (accents, jambages, étiquettes inclinées) sans décaler la mise en page. */
.at-masque { display: block; overflow: hidden; padding: .1em .3em .14em; margin: -.1em -.3em -.14em; }
.at-masque__ligne { display: block; will-change: transform; }
.at-masque--bloc { display: block; width: fit-content; margin-inline: auto; padding: .35em .5em; margin-block: -.35em; }
.at-mot { display: inline; }
/* Titre de la grande photo invisible tant qu'il n'est pas découpé ; affiché d'office après 3 s si le script ne tourne pas. */
.at-anim .at-home .vne-hero__titre:not(.vne-hero__titre--slide) { visibility: hidden; animation: at-reveler 0s 3s forwards; }
@keyframes at-reveler { to { visibility: visible; } }