/**
 * Charte 2026 : bleu marine #102B4E, betterave #7A1F3D, blanc · Abril Fatface (h1, h2) / Hanken Grotesk (tout le reste).
 * Chargée en dernier (après mise-en-page.css) : elle réaligne l'ancien CSS sur la nouvelle charte
 * sans réécrire les 170 Ko de sections.css. Les valeurs viennent de theme.json.
 * Référence : maquette Claude Design « Accessite Accueil v4 ».
 */

/* ==========================================================================
 * 0. Palette réduite (theme.json) : marine, betterave, blanc, blanc cassé, turquoise, noir.
 *    Les anciennes couleurs, retirées de la palette, restent définies ici pour que
 *    les blocs et le CSS existants qui les utilisent ne cassent pas.
 * ========================================================================== */
:root {
	--wp--preset--color--navy-deep:      var(--wp--preset--color--navy);
	--wp--preset--color--fond:           var(--wp--preset--color--white);
	--wp--preset--color--surface:        var(--wp--preset--color--beige);
	--wp--preset--color--beige-soft:     var(--wp--preset--color--beige);
	--wp--preset--color--pink:           var(--wp--preset--color--beige);
	--wp--preset--color--teal:           var(--wp--preset--color--betterave);
	--wp--preset--color--teal-light:     var(--wp--preset--color--betterave);
	--wp--preset--color--coral:          var(--wp--preset--color--betterave);
	--wp--preset--color--yellow:         var(--wp--preset--color--betterave);
	--wp--preset--color--teal-deep:      #5E1830; /* betterave foncé (survol) */
	--wp--preset--color--coral-deep:     #5E1830;
	--wp--preset--color--betterave-deep: #5E1830;
	--wp--preset--color--encre:          #2B3656; /* texte courant adouci (dérivé du marine) */
	--wp--preset--color--gray-700:       #59627F; /* texte secondaire (dérivé du marine) */
	--wp--preset--color--gray:           #D9D4D0; /* filets */
}
/* Classes des anciennes couleurs encore présentes dans les contenus */
.has-navy-deep-background-color { background-color: var(--wp--preset--color--navy); }
.has-teal-background-color,
.has-coral-background-color,
.has-yellow-background-color   { background-color: var(--wp--preset--color--betterave); }
.has-teal-color,
.has-coral-color,
.has-yellow-color              { color: var(--wp--preset--color--betterave); }

/* ==========================================================================
 * 1. Variables : les anciennes variables pointent sur la nouvelle charte
 * ========================================================================== */
:root {
	--accessite-navy:        var(--wp--preset--color--navy-deep, #102B4E);
	--accessite-navy-deep:   var(--wp--preset--color--navy-deep, #102B4E);
	--accessite-navy-border: color-mix(in srgb, #fff 18%, transparent);
	--accessite-betterave:      var(--wp--preset--color--betterave, #7A1F3D);
	--accessite-betterave-deep: var(--wp--preset--color--betterave-deep, #5E1830);
	--accessite-ink:         var(--wp--preset--color--encre, #2B3656);
	--accessite-muted:       var(--wp--preset--color--gray-700, #59627F);
	--accessite-line:        var(--wp--preset--color--gray, #D9D4D0);
	--accessite-surface:     var(--wp--preset--color--surface, #F6F4F2);

	--accessite-color-primary:         var(--accessite-betterave);
	--accessite-color-primary-hover:   var(--accessite-navy-deep);
	--accessite-color-secondary:       var(--accessite-betterave);
	--accessite-color-secondary-hover: var(--accessite-navy-deep);
	--accessite-color-text:            var(--accessite-navy-deep);
	--accessite-color-text-muted:      var(--accessite-muted);
	--accessite-color-border:          var(--accessite-line);
	--accessite-gray-500:              var(--accessite-muted);
	--accessite-yellow-soft:           var(--accessite-surface);

	/* Typographies */
	--accessite-font-family:   var(--wp--preset--font-family--accessite);
	--accessite-font-accroche: var(--wp--preset--font-family--accroche);
	--accessite-font-serif:    var(--wp--preset--font-family--accessite); /* plus de serif : Hanken Grotesk partout hors h1/h2 */

	--accessite-tracking-overtitle: 0.18em;
	--accessite-radius-arche: 220px;

	/* Mouvement */
	--accessite-ease:     var(--wp--custom--motion--ease, cubic-bezier(.2,.7,.2,1));
	--accessite-duration: var(--wp--custom--motion--duration, .9s);
	--accessite-distance: var(--wp--custom--motion--distance, 28px);
}

/* ==========================================================================
 * 2. Typographie
 * ========================================================================== */
body {
	font-family: var(--accessite-font-family);
	color: var(--accessite-navy-deep);
	-webkit-font-smoothing: antialiased;
	font-synthesis: none; /* Abril n'a qu'une graisse : pas de faux gras */
}

/* Accroches : Abril Fatface sur h1/h2. !important car l'ancien CSS fixe police et graisse
 * par classe de section. Désactivable sur un titre avec la classe « is-sans ». */
h1:not(.is-sans):not(#_),
h2:not(.is-sans):not(#_),
.is-accroche:not(#_){
	font-family: var(--accessite-font-accroche);
	font-weight: 400;
	letter-spacing: -0.015em;
}

/* h3 et suivants : Hanken Grotesk (police du texte) */
h3, h4, h5, h6 {
	font-family: var(--accessite-font-family);
}

/* Mot en betterave dans un titre : <span class="is-accent"> ou couleur de texte Betterave */
.is-accent { color: var(--accessite-betterave); }

/* Chapô (maquette : « La proximité du terrain… ») */
.is-chapo {
	font-family: var(--accessite-font-serif);
	font-size: var(--wp--preset--font-size--chapo);
	line-height: 1.25;
}

/* Texte courant plus léger */
.is-lead,
p.is-lead {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	line-height: 1.65;
	color: var(--accessite-ink);
}

/* Sur-titre : tiret betterave + capitales espacées */
.accessite-section-overtitle:not(#_),
.home-hero__surtitre:not(#_),
.ressources-hero__overtitle:not(#_),
.ressources-blog__surtitre:not(#_),
.besoins-logos__surtitre:not(#_),
.is-overtitle:not(#_){
	font-family: var(--accessite-font-family);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--accessite-tracking-overtitle);
	text-transform: uppercase;
	color: var(--accessite-navy-deep);
	background: none;
}
.is-overtitle::before {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin-bottom: 14px;
	background: var(--accessite-betterave);
}

/* Chiffres clés : betterave */
.is-chiffre {
	font-family: var(--accessite-font-serif);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--chiffre);
	line-height: 1;
	color: var(--accessite-betterave);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
 * 3. Boutons et liens
 * ========================================================================== */
/* Couleurs par défaut : un bouton dont les couleurs sont réglées dans l'éditeur
 * (classes .has-background / .has-text-color) garde celles de l'éditeur. */
.wp-block-button__link:not(.has-background):not(#_),
.btn:not(#_),
.btn--primary:not(#_),
.gform_button:not(#_),
.wp-block-search__button:not(#_) {
	background: var(--accessite-betterave);
	border-color: var(--accessite-betterave);
}
.wp-block-button__link:not(.has-text-color),
.btn,
.btn--primary,
.gform_button,
.wp-block-search__button { color: #fff; }
.wp-block-button__link:not(#_),
.btn:not(#_),
.btn--primary:not(#_),
.gform_button:not(#_),
.wp-block-search__button:not(#_) {
	border-radius: 999px;
	border-width: 1px;
	border-style: solid;
	font-family: var(--accessite-font-family);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color .3s, color .3s, border-color .3s;
}
.wp-block-button__link:hover:not(#_),
.wp-block-button__link:focus-visible:not(#_),
.btn:hover:not(#_),
.btn--primary:hover:not(#_),
.gform_button:hover:not(#_) {
	background: var(--accessite-navy-deep);
	border-color: var(--accessite-navy-deep);
	color: #fff;
}

/* Variante contour (style « Contour » du bloc bouton, ou .btn--outline) */
.is-style-outline > .wp-block-button__link,
.btn--outline {
	background: transparent;
	color: var(--accessite-betterave);
}
.is-style-outline > .wp-block-button__link:hover,
.btn--outline:hover {
	background: var(--accessite-betterave);
	color: #fff;
}

/* Sur fond sombre (marine ou betterave) : bouton blanc */
:is(.has-navy-background-color, .has-navy-deep-background-color, .has-betterave-background-color) .wp-block-button__link:not(.has-background):not(#_) {
	background: #fff;
	border-color: #fff;
	color: var(--accessite-betterave);
}
:is(.has-navy-background-color, .has-navy-deep-background-color, .has-betterave-background-color) .wp-block-button__link:hover:not(#_) {
	background: var(--accessite-navy-deep);
	border-color: var(--accessite-navy-deep);
	color: #fff;
}

/* Lien éditorial souligné : « Toutes nos références → » */
.is-lien-fleche,
.is-lien-fleche a {
	display: inline-block;
	font-weight: 500;
	color: var(--accessite-navy-deep);
	text-decoration: none;
	border-bottom: 1px solid var(--accessite-betterave);
	padding-bottom: 3px;
	transition: color .3s;
}
.is-lien-fleche:hover,
.is-lien-fleche a:hover { color: var(--accessite-betterave); }

/* ==========================================================================
 * 4. Composants de mise en page de la maquette
 * ========================================================================== */
/* Visuel « arche » : grand arrondi haut gauche (hero) */
.is-arche,
.is-arche img { border-top-left-radius: var(--accessite-radius-arche); overflow: hidden; }

/* Rangée de chiffres sans bloc de couleur, séparée par un filet */
.is-filet-haut { border-top: 1px solid var(--accessite-line); padding-top: 36px; }
.is-filet-gauche > * { border-left: 1px solid var(--accessite-line); padding-left: 24px; }

/* Citation éditoriale (mot du DG) : grand guillemet Abril */
.is-citation {
	position: relative;
	padding-left: clamp(0px, 9vw, 152px);
	font-family: var(--accessite-font-serif);
	font-size: clamp(30px, 4.4vw, 68px);
	line-height: 1.1;
	border: 0;
}
.is-citation::before {
	content: "\201C";
	font-family: var(--accessite-font-accroche);
	position: absolute;
	left: 0;
	top: 0;
	font-size: clamp(120px, 14vw, 220px);
	line-height: .7;
	color: var(--accessite-betterave);
}
@media (max-width: 781px) {
	.is-citation { padding-left: 0; padding-top: 72px; }
}

/* Liste typographique (valeurs, leviers en liste) : grandes lignes séparées par un filet */
.is-liste-serif > * {
	display: flex;
	align-items: baseline;
	gap: 24px;
	margin: 0;
	padding: 22px 0;
	border-top: 1px solid var(--accessite-navy-deep);
	font-family: var(--accessite-font-serif);
	font-size: clamp(32px, 3.4vw, 52px);
	line-height: 1;
}
.is-liste-serif > *:last-child { border-bottom: 1px solid var(--accessite-navy-deep); }

/* Images : rendu plus net des miniatures (évite l'aspect pixelisé quand l'image est agrandie) */
.wp-block-post-featured-image img,
.wp-block-image img { image-rendering: auto; }

/* Focus visible cohérent */
:focus-visible { outline: 2px solid var(--accessite-betterave); outline-offset: 3px; }

/* ==========================================================================
 * 5. Animations (pilotées par assets/js/animations.js)
 *    Ajouter la classe dans Bloc > Avancé > Classe(s) CSS additionnelle(s) :
 *    - anim-reveal          : apparition (fondu + montée) au scroll
 *    - anim-reveal-gauche   : apparition depuis la gauche
 *    - anim-ligne           : titre révélé ligne par ligne (masque)
 *    - anim-cascade         : les enfants directs apparaissent l'un après l'autre
 *    - anim-compteur        : chiffres animés de 0 à la valeur (sur l'élément ou ses enfants .is-chiffre)
 *    - anim-zoom            : image qui se dézoome doucement à l'apparition
 *    Rien n'est masqué sans JavaScript (classe .has-anim posée par le script).
 * ========================================================================== */
.has-anim .anim-reveal,
.has-anim .anim-reveal-gauche,
.has-anim .anim-cascade > * {
	opacity: 0;
	transform: translateY(var(--accessite-distance));
	transition:
		opacity var(--accessite-duration) var(--accessite-ease) var(--anim-delay, 0ms),
		transform var(--accessite-duration) var(--accessite-ease) var(--anim-delay, 0ms);
}
.has-anim .anim-reveal-gauche { transform: translate(-24px, var(--accessite-distance)); }
.has-anim .is-visible.anim-reveal,
.has-anim .is-visible.anim-reveal-gauche,
.has-anim .anim-cascade.is-visible > * {
	opacity: 1;
	transform: none;
}

/* Titre ligne par ligne : le script enveloppe chaque ligne (séparée par <br>) */
/* Masque par ligne : assez haut pour ne pas couper les lettres, sans déborder sur le paragraphe suivant.
 * L'espace ajouté sous chaque ligne est repris par la ligne suivante : l'interligne ne change pas. */
.anim-ligne .anim-ligne__masque { display: block; overflow: hidden; padding-bottom: .22em; }
.anim-ligne .anim-ligne__masque + .anim-ligne__masque { margin-top: -.22em; }
.anim-ligne .anim-ligne__texte { display: block; }
.has-anim .anim-ligne .anim-ligne__texte {
	transform: translateY(110%);
	transition: transform var(--accessite-duration) var(--accessite-ease) var(--anim-delay, 0ms);
}
.has-anim .anim-ligne.is-visible .anim-ligne__texte { transform: none; }

.has-anim .anim-zoom img {
	transform: scale(1.08);
	transition: transform 1.6s var(--accessite-ease);
}
.has-anim .anim-zoom.is-visible img { transform: none; }

/* Survol des cartes image : léger zoom */
.is-survol-zoom { overflow: hidden; }
.is-survol-zoom img { transition: transform .8s var(--accessite-ease); }
.is-survol-zoom:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.has-anim .anim-reveal:not(#_),
.has-anim .anim-reveal-gauche:not(#_),
.has-anim .anim-cascade > *:not(#_),
.has-anim .anim-ligne .anim-ligne__texte:not(#_),
.has-anim .anim-zoom img:not(#_),
.is-survol-zoom img:not(#_) {
		opacity: 1;
		transform: none;
		transition: none;
	}
	html { scroll-behavior: auto; }
}

/* Éditeur : tout reste visible */
.editor-styles-wrapper .anim-reveal:not(#_),
.editor-styles-wrapper .anim-reveal-gauche:not(#_),
.editor-styles-wrapper .anim-cascade > *:not(#_) { opacity: 1; transform: none; }

/* ==========================================================================
 * 6. Header blanc · Footer marine, tout le contenu en blanc (aucun betterave)
 * ========================================================================== */
.accessite-header,
.accessite-headerbar,
.accessite-mobile-nav { background: var(--wp--preset--color--white); }

.accessite-footer,
.accessite-footer-pre,
.accessite-footer-brand-zone,
.accessite-footer-bottom-zone {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}
/* Filet discret entre le pré-footer et le reste */
.accessite-footer-pre { border-bottom: 1px solid color-mix(in srgb, #fff 18%, transparent); }

.accessite-footer :is(p, h2, h3, h4, h5, h6, span, li, a, svg, .accessite-footer-address__pin, .accessite-footer-address__detail) {
	color: var(--wp--preset--color--white);
}
.accessite-footer a:hover,
.accessite-footer a:focus-visible { color: var(--wp--preset--color--white); text-decoration: underline; text-underline-offset: 4px; }

/* Soulignés de titres de colonnes : blanc */
.accessite-footer-col__title::after { background: var(--wp--preset--color--white); }

/* Bouton Promeo (et tout bouton du footer) : contour blanc, inversé au survol */
/* Le style va sur le lien seulement : le conteneur .accessite-footer-promeo est neutralisé (sinon double bordure) */
.accessite-footer .wp-block-button.accessite-footer-promeo:not(#_) {
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}
.accessite-footer .wp-block-button__link:not(#_) {
	background: transparent;
	border: 1px solid var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
.accessite-footer .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}
.accessite-footer .wp-block-button__link:hover * { color: var(--wp--preset--color--navy); }

/* Logo du footer en blanc uni (le fichier logo-accessite.png est en couleur) */
.accessite-footer-brand__logo img { filter: brightness(0) invert(1); }

.accessite-footer :focus-visible { outline-color: var(--wp--preset--color--white); }

/* ==========================================================================
 * 7. Titres : jamais en capitales (seuls les sur-titres le sont)
 * ========================================================================== */
h1:not(#_), h2:not(#_), h3:not(#_), h4:not(#_), h5:not(#_), h6:not(#_),
.accessite-section-title:not(#_),
.couverture-figma__title:not(#_),
[class*="__title"]:not([class*="surtitre"]):not([class*="overtitle"]):not(#_){
	text-transform: none;
}

/* Header : « Prendre contact » centré. Le conteneur du bouton est neutralisé,
 * seul le lien porte la pastille (sinon padding doublé et texte décentré). */
.accessite-headerbar__cta.wp-block-button:not(#_) {
	height: auto;
	padding: 0;
	background: transparent;
	border: 0;
}
.accessite-headerbar__cta .wp-block-button__link:not(#_) {
	/* mêmes marges que tous les boutons du site (section 8) */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 15px 20px;
	line-height: 1.2;
	text-align: center;
	border-radius: 999px;
}

/* ==========================================================================
 * 8. Boutons : règle unique pour tout le site
 *    15px haut/bas, 20px gauche/droite, texte centré, côtés totalement arrondis.
 *    Les conteneurs de bloc (.wp-block-button portant .btn, .ac-linkbtn…) sont
 *    neutralisés : seul le lien forme le bouton (évite les doubles pastilles).
 * ========================================================================== */
.wp-block-button:is(.btn, .btn--primary, .btn--outline, .ac-linkbtn, .accessite-headerbar__cta, .accessite-footer-promeo):not(#_) {
	height: auto;
	min-height: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	transform: none;
}
.wp-block-button__link:not(#_),
a.btn:not(#_),
button.btn:not(#_),
.gform_button:not(#_),
input[type="submit"]:not(#_),
.wp-block-search__button:not(#_),
.accessite-mobile-nav__cta a:not(#_) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	height: auto;
	padding: 15px 20px;
	line-height: 1.2;
	text-align: center;
	border-radius: 999px;
}
/* Bouton coloré dans l'éditeur : bordure de la couleur de fond choisie */
.wp-block-button__link.has-background:not(#_) { border-color: transparent; }

/* ==========================================================================
 * 9. Titres marine par défaut. Les mots colorés dans l'éditeur (Surlignage,
 *    classes has-*-color) et les couleurs de bloc réglées dans l'éditeur priment.
 * ========================================================================== */
:where(h1, h2, h3, h4, h5, h6):not(.has-text-color) { color: var(--wp--preset--color--navy); }
:is(h1, h2, h3, h4, h5, h6) mark.has-inline-color { background: none; }

/* ==========================================================================
 * 10. L'éditeur a toujours le dernier mot sur les couleurs (tout le site)
 *  - Aucune couleur de texte ou de fond du thème n'est en !important :
 *    une couleur choisie dans l'éditeur (palette ou personnalisée) passe devant.
 *  - Une couleur de texte réglée sur un bloc parent (groupe, couverture, colonne…)
 *    s'applique aussi aux textes qu'il contient, sauf s'ils ont leur propre couleur.
 * ========================================================================== */
.has-text-color :where(p, h1, h2, h3, h4, h5, h6, li, blockquote, cite, figcaption, .is-overtitle, .accessite-section-overtitle):not(.has-text-color),
.has-text-color :where(p, h1, h2, h3, h4, h5, h6, li, blockquote, cite, figcaption) :where(span:not(.has-inline-color), strong, em) {
	color: inherit;
}

/* ==========================================================================
 * 11. L'éditeur a aussi le dernier mot sur la typographie (tout le site)
 *  - Aucune règle typographique du thème n'est en !important. Celles qui devaient
 *    passer devant l'ancien CSS sont renforcées par :not(#_) : elles restent
 *    au-dessus des autres règles du thème, mais sous les réglages de l'éditeur
 *    (tailles, polices, graisse, interlignage, espacement, casse, en ligne ou presets).
 *  - Alignement du texte choisi dans l'éditeur : toujours appliqué.
 * ========================================================================== */
.has-text-align-left:not(#_) { text-align: left; }
.has-text-align-center:not(#_) { text-align: center; }
.has-text-align-right:not(#_) { text-align: right; }