/*
 * Pôle Essentiels — palier grands écrans (> 1440 px).
 *
 * Chargé après site.css et gutenberg-bridge.css. Rien de ce fichier ne
 * s'applique à 1440 px ni en dessous : le rendu validé au pixel près contre
 * la maquette reste intact.
 *
 * Origine : la cliente, sur un écran de 1920 px, trouve plusieurs textes trop
 * petits — le menu, les liens des colonnes 2 et 3 du pied de page, le titre,
 * les libellés et les mentions du formulaire de contact, les intitulés verts
 * en capitales. Le contenu, plafonné à 1128 px, n'occupait par ailleurs que
 * 59 % de son écran.
 *
 * Principe : au-delà de 1440 px la page n'est pas redessinée, elle est mise à
 * l'échelle. Une seule variable, --pe-u, porte le facteur ; largeur de
 * contenu, tailles de texte, gouttières, pistes de grille figées, plafonds
 * max-width et rembourrages en dérivent. Texte et boîtes grandissant du même
 * facteur, chaque bloc casse ses lignes au même endroit qu'aujourd'hui.
 *
 *   1441 px  →  facteur 1      (rendu strictement identique à 1440 px)
 *   1920 px  →  facteur 1,142  (contenu 1288 px, textes 16 / 19,4 / 36,5 px)
 *   2400 px  →  facteur 1,284  (contenu 1448 px, textes 18 / 21,8 / 41,1 px)
 *   2560 px  →  facteur 1,331  (contenu 1502 px, textes 18,6 / 22,6 / 42,6 px)
 *   au-delà  →  figé           (un 4K n'a pas besoin d'un corps à 32 px)
 *
 * Le facteur est calé sur la demande de la cliente : le menu, les intitulés
 * verts, les liens du pied de page, le titre, les libellés et le consentement
 * du formulaire dépendent tous de --type-small, qui passe ainsi de 14 px à
 * 16 px — la taille par défaut des navigateurs.
 *
 * site.css n'est pas modifié : ses trois règles globales en !important sur
 * font-size sont écrites en var(), donc redéfinir les jetons sur :root les
 * traverse sans un seul sélecteur de rattrapage.
 *
 * Le rythme vertical n'est volontairement PAS mis à l'échelle : la page ne
 * s'allonge pas, elle respire.
 */

@media (min-width: 1441px) {

	/* --- 1. Le facteur d'échelle et les jetons ------------------------- */

	/*
	 * --pe-u = « un pixel de la maquette, remis à l'échelle » :
	 * calc(N * var(--pe-u)) vaut N px à 1441 px et N x 1,3313 à 2560 px.
	 * La borne basse du clamp vaut exactement 1px, donc il n'y a aucune
	 * marche au passage de 1440 à 1441 px, seulement une montée continue.
	 *
	 * La pente (0,000296033 par pixel) est calée sur le premier reproche de
	 * la cliente : le menu atteint 16 px — la taille par défaut des
	 * navigateurs — à 1920 px. Elle n'est jamais modifiée, sans quoi tout le
	 * rendu entre 1441 et 1920 px changerait.
	 *
	 * Seule la borne haute décide jusqu'où la montée se poursuit. Elle est
	 * fixée à 2560 px (écrans QHD), car un contenu figé à 1288 px laissait
	 * encore 556 px de marge de chaque côté sur un écran de 2400 px. Ces
	 * marges tombent à 476 px, et la largeur du contenu passe de 1288 à
	 * 1448 px sur un tel écran.
	 *
	 * Pour réajuster l'ampleur plus tard, il n'y a que ce nombre à toucher :
	 * borne = 1 + (largeur_de_saturation - 1441) x 0,000296033.
	 *
	 * Chaque valeur du bloc reprend littéralement le chiffre de site.css :
	 * aucun nombre n'est recalculé à la main, donc aucune dérive possible.
	 */
	:root {
		--pe-u: clamp(1px, calc(1px + (100vw - 1441px) * 0.000296033), 1.3313px);

		/* Valeurs à 1920 px, puis à 2560 px où la montée se fige. */
		--content-width: calc(1128 * var(--pe-u)); /* 1128 → 1288 → 1502 px */
		--type-small:    calc(14 * var(--pe-u));   /*   14 → 16   → 18,6 px */
		--type-body:     calc(17 * var(--pe-u));   /*   17 → 19,4 → 22,6 px */
		--type-title:    calc(32 * var(--pe-u));   /*   32 → 36,5 → 42,6 px */
	}

	/* --- 2. Les cinq largeurs codées en dur de site.css ----------------- */

	/*
	 * Seules déclarations du fichier qui ignorent --content-width (elles
	 * portent 1128 et 564 = 1128/2 en dur). Sans elles, les bandes vert
	 * d'eau, le bandeau navy des valeurs, les cartes de repères, le bloc CTA
	 * et le pied de page resteraient à 1128 px pendant que tout le reste
	 * s'élargit — un décrochement de 80 px de chaque côté, en alternance
	 * verticale d'une section à l'autre.
	 *
	 * Le centrage passe de « 50vw - 564px » à « (100% - largeur) / 2 » :
	 * les sections se centrent avec min(100% - …), qui se résout sur la
	 * boîte de contenu du body, alors que 50vw inclut la barre de
	 * défilement. Sur un navigateur à barre classique (Windows) les deux
	 * familles divergent aujourd'hui d'une demi-barre, ~7,5 px. En
	 * pourcentage elles partagent la même base et s'alignent exactement.
	 * Vérifié : ces trois blocs sont toujours enfants directs de <main> ou
	 * de <body>, tous deux pleine largeur et sans rembourrage.
	 *
	 * On écrit padding-inline et non le raccourci padding, pour préserver
	 * les 64px / 66px / 24px verticaux et .support-page .site-cta{padding-block:48px}.
	 */
	.site-section--soft,
	.site-cta,
	.site-footer {
		padding-inline: max(var(--page-gutter), calc((100% - var(--content-width)) / 2));
	}

	.values-band,
	.expertise-highlights {
		width: min(calc(100% - (2 * var(--page-gutter))), var(--content-width));
	}

	/* --- 3. Gouttières -------------------------------------------------- */

	/*
	 * Indispensables à la mise à l'échelle : une gouttière laissée à 72 px
	 * pendant que le conteneur gagne 160 px reverse tout le gain dans les
	 * colonnes de texte, qui se remettent alors à casser leurs lignes
	 * ailleurs.
	 */
	.site-section-heading--row,
	.home-intro,
	.trust-section,
	.subpage-hero,
	.expertise-story,
	.support-intro,
	.evidence-section,
	.formations-custom,
	.science-section,
	.tools-section                            { gap: calc(72 * var(--pe-u)); }
	.contact-layout                           { gap: calc(56 * var(--pe-u)); }
	.training-preview-grid                    { gap: calc(22 * var(--pe-u)); }
	.trust-credentials                        { gap: calc(16 * var(--pe-u)); }
	.contact-details article                  { gap: calc(18 * var(--pe-u)); }
	.contact-form                             { gap: calc(19 * var(--pe-u)); }
	.form-row                                 { gap: calc(16 * var(--pe-u)); }
	.contact-form label                       { gap: calc(8  * var(--pe-u)); }
	.contact-form .form-consent               { gap: calc(10 * var(--pe-u)); }
	.site-footer-grid > div:not(:first-child) { gap: calc(12 * var(--pe-u)); }
	.hero-principles                          { gap: calc(8  * var(--pe-u)); }
	.site-brand                               { gap: calc(12 * var(--pe-u)); }
	.site-actions                             { gap: calc(10 * var(--pe-u)); }
	.trust-link-label                         { gap: calc(8  * var(--pe-u)); }
	.actions                                  { gap: calc(4  * var(--pe-u)); }
	.actions button,
	.actions a                                { gap: calc(8  * var(--pe-u)); }
	.v8-body .objective-list                  { gap: calc(9  * var(--pe-u)); }
	.v8-price-list                            { gap: calc(5  * var(--pe-u)) calc(7 * var(--pe-u)); }
	.v8-body .text-link                       { gap: calc(6  * var(--pe-u)); }
	.training-list-page .training-detail-shell { gap: calc(48 * var(--pe-u)); }
	.formations-premium-page .v8-body,
	.formations-premium-page .v8-column       { gap: calc(18 * var(--pe-u)); }
	.formations-premium-page .v8-body .objective-list { gap: calc(11 * var(--pe-u)); }
	.formations-premium-page .training-list-page .training-detail-shell { gap: calc(58 * var(--pe-u)); }

	/* clamp(48px,6vw,84px) est déjà saturé à 84 px dès 1400 px de fenêtre :
	   la valeur de départ est donc bien 84 et la continuité est exacte. */
	.site-footer-grid                         { gap: calc(84 * var(--pe-u)); }

	/* --- 4. Pistes de grille figées en pixels --------------------------- */

	/*
	 * Colonnes et lignes qui ne suivraient pas l'échelle. La colonne de
	 * dates de 150 px est le point le plus tendu du fichier : « Septembre
	 * 2026 » y tient à 20 px près. La ligne de 32 px des numéros de parcours
	 * est saturée au pixel (32 px de piste pour un chiffre de 32 px en
	 * line-height:1) ; même situation pour la piste de 46 px qui porte
	 * l'icône de 46 px des cartes de repères.
	 */
	.conference-list article { grid-template-columns: calc(150 * var(--pe-u)) 1fr;
	                           gap: calc(26 * var(--pe-u)); }
	.regulatory-note         { grid-template-columns: calc(150 * var(--pe-u)) 1fr;
	                           gap: calc(30 * var(--pe-u));
	                           padding: calc(26 * var(--pe-u)) calc(30 * var(--pe-u)); }
	.contact-hero-statement  { grid-template-columns: calc(48 * var(--pe-u)) minmax(0, 1fr);
	                           gap: calc(20 * var(--pe-u)); }
	.contact-hero-statement:before { width: calc(48 * var(--pe-u));
	                                 height: calc(3 * var(--pe-u));
	                                 margin-top: calc(16 * var(--pe-u)); }
	.process-grid article          { grid-template-rows: calc(32 * var(--pe-u)) calc(52 * var(--pe-u)) auto; }
	.expertise-highlights article  { grid-template-rows: calc(46 * var(--pe-u)) calc(50 * var(--pe-u)) auto; }

	/* Colonne turquoise des chiffres clés, figée à 290 px : sinon elle
	   devient une bande étroite à côté d'une colonne de texte qui, elle,
	   passe de 836 à 955 px. */
	.v8-hero                          { grid-template-columns: 1fr calc(290 * var(--pe-u)); }
	.formations-premium-page .v8-hero { grid-template-columns: minmax(0, 1fr) calc(290 * var(--pe-u)); }

	/* --- 5. Plafonds max-width ------------------------------------------ */

	/*
	 * Le point le plus important du bloc. La maquette a été calée pour que
	 * ces plafonds tombent pile sur le bord de leur colonne à 1128 px
	 * (.home-hero-lead est à 1 px de son plafond). Laissés en place, ils
	 * n'élargissent pas le texte : ils ouvrent du vide à sa droite. Les
	 * trois lignes du héros d'accueil, qui se terminent aujourd'hui sur le
	 * même bord, se mettraient en escalier. Mis à l'échelle, chacun garde
	 * exactement sa part de colonne — mesuré à 1920 px : les trois lignes du
	 * héros se terminent de nouveau au même pixel (1047,9 / 1046,8 / 1047,9,
	 * même écart qu'à 1440).
	 */
	.home-hero h1                        { max-width: calc(700 * var(--pe-u)); }
	.home-hero-lead                      { max-width: calc(640 * var(--pe-u)); }
	.home-hero-belief                    { max-width: calc(650 * var(--pe-u)); }
	.site-section-heading h2             { max-width: calc(650 * var(--pe-u)); }
	.training-preview-card h3            { max-width: calc(500 * var(--pe-u)); }
	.training-preview-card p             { max-width: calc(520 * var(--pe-u)); }
	.trust-copy h2                       { max-width: calc(470 * var(--pe-u)); }
	.site-cta h2                         { max-width: calc(760 * var(--pe-u)); }
	.subpage-hero h1                     { max-width: calc(720 * var(--pe-u)); }
	.expertise-hero-intro                { max-width: calc(535 * var(--pe-u)); }
	.subpage-hero--contact h1            { max-width: calc(1000 * var(--pe-u)); }
	.contact-hero-statement              { max-width: calc(1000 * var(--pe-u)); }
	.contact-layout h2                   { max-width: calc(600 * var(--pe-u)); }
	.site-footer-grid > div:first-child > p { max-width: calc(390 * var(--pe-u)); }
	.v8-footer > div                     { max-width: calc(680 * var(--pe-u)); }
	.formation--standalone .v8-copy :is(h1, h2) { max-width: calc(700 * var(--pe-u)); }
	.formations-premium-page .formation--standalone .v8-copy :is(h1, h2) { max-width: calc(820 * var(--pe-u)); }
	.formations-premium-page .v8-footer > div { max-width: calc(760 * var(--pe-u)); }

	/* --- 6. Rembourrages intérieurs -------------------------------------- */

	/*
	 * À l'intérieur d'un panneau, c'est le rembourrage qui décide de la
	 * largeur réelle de la colonne de texte : le laisser figé décalerait les
	 * césures et ferait perdre la propriété de mise à l'échelle exacte.
	 * Effet recherché au passage : la respiration des cartes revient au
	 * niveau du texte agrandi, sans quoi le rendu paraîtrait étiré.
	 */
	.home-hero-copy          { padding: calc(24 * var(--pe-u)) calc(64 * var(--pe-u)) calc(24 * var(--pe-u)) 0; }
	.home-hero-panel         { padding: calc(38 * var(--pe-u)); }
	.home-hero-panel blockquote { margin: calc(54 * var(--pe-u)) 0; }
	.hero-principles span    { padding: calc(8 * var(--pe-u)) calc(10 * var(--pe-u)); }
	.values-band article     { padding: calc(38 * var(--pe-u)); }
	.training-preview-card   { padding: calc(38 * var(--pe-u)); }
	.custom-training-callout { gap: calc(30 * var(--pe-u));
	                           padding: calc(28 * var(--pe-u)) calc(32 * var(--pe-u)); }
	.trust-credential        { padding: calc(16 * var(--pe-u)) calc(18 * var(--pe-u)); }
	.trust-guidance          { padding: calc(17 * var(--pe-u)) calc(20 * var(--pe-u)); }
	.expertise-highlights article { padding: calc(34 * var(--pe-u)); }
	.process-grid article    { padding: calc(28 * var(--pe-u)); }
	.support-lead-card       { padding: calc(36 * var(--pe-u)); }
	.contact-note            { padding: calc(28 * var(--pe-u)); }
	.contact-form-panel      { padding: calc(36 * var(--pe-u)); }
	.v8-copy                 { padding: calc(30 * var(--pe-u)) calc(46 * var(--pe-u)); }
	.v8-facts div            { padding: 0 calc(28 * var(--pe-u)); }
	.v8-body section         { padding: calc(24 * var(--pe-u)) calc(32 * var(--pe-u)); }
	.v8-footer               { gap: calc(35 * var(--pe-u));
	                           padding: calc(24 * var(--pe-u)) calc(32 * var(--pe-u)); }
	.objective-list          { padding-left: calc(16 * var(--pe-u)); }
	.v8-objectives .objective-list li        { padding: 0 0 0 calc(17 * var(--pe-u)); }
	.v8-objectives .objective-list li:before { width: calc(6 * var(--pe-u)); height: calc(6 * var(--pe-u)); }
	.v8-price-row dd         { padding-left: calc(7 * var(--pe-u)); }
	.v8-body .accessibility-icon { flex: 0 0 calc(19 * var(--pe-u));
	                               width: calc(19 * var(--pe-u)); height: calc(19 * var(--pe-u)); }
	.formations-premium-page .v8-copy         { padding: calc(34 * var(--pe-u)) calc(42 * var(--pe-u)) calc(30 * var(--pe-u)); }
	.formations-premium-page .v8-facts div    { padding: 0 calc(28 * var(--pe-u)); }
	.formations-premium-page .v8-body         { padding: calc(18 * var(--pe-u)); }
	.formations-premium-page .v8-body section { padding: calc(28 * var(--pe-u)) calc(30 * var(--pe-u)); }
	.formations-premium-page .v8-footer       { padding: calc(23 * var(--pe-u)) calc(30 * var(--pe-u)); }
	.formations-premium-page .v8-body .text-link { padding: calc(9 * var(--pe-u)) calc(11 * var(--pe-u)); }
	.formations-premium-page .v8-objectives .objective-list li        { padding-left: calc(20 * var(--pe-u)); }
	.formations-premium-page .v8-objectives .objective-list li:before { width: calc(7 * var(--pe-u)); height: calc(7 * var(--pe-u)); }

	/* --- 7. Images, pictogrammes et boîtes à dimension intrinsèque ------- */

	/*
	 * Sans elles, le portrait, le logo du bandeau, les deux logos de
	 * certification et les pictogrammes resteraient à leur taille de 1440 px
	 * au milieu d'une page 14 % plus grande : le rendu paraîtrait étiré, pas
	 * agrandi.
	 */
	.expertise-portrait      { width: min(100%, calc(430 * var(--pe-u)));
	                           padding: 0 calc(16 * var(--pe-u)) calc(16 * var(--pe-u)) 0; }
	.expertise-portrait:after { width: calc(100% - 18 * var(--pe-u));
	                            height: calc(100% - 18 * var(--pe-u)); }
	.expertise-portrait figcaption { width: calc(100% - 28 * var(--pe-u));
	                                 margin: calc(-62 * var(--pe-u)) 0 0 calc(18 * var(--pe-u));
	                                 padding: calc(14 * var(--pe-u)) calc(18 * var(--pe-u));
	                                 gap: calc(3 * var(--pe-u)); }
	.site-brand-logo         { width: calc(330 * var(--pe-u)); }
	.site-brand-symbol       { flex: 0 0 calc(50 * var(--pe-u));
	                           width: calc(50 * var(--pe-u)); height: calc(50 * var(--pe-u)); }
	/* Le clip n'est pas carré (42 x 46) et il recadre une image
	   volontairement décalée : les trois valeurs doivent bouger ensemble ou
	   le logo sort de son disque. */
	.site-brand-symbol-clip  { width: calc(42 * var(--pe-u)); height: calc(46 * var(--pe-u)); }
	.site-brand-symbol img   { height: calc(46 * var(--pe-u)); left: calc(-11 * var(--pe-u)); }
	.trust-logo-frame        { min-height: calc(108 * var(--pe-u)); }
	.trust-logo-frame img    { max-height: calc(108 * var(--pe-u)); }
	.trust-credential--qualiopi img      { max-width: calc(250 * var(--pe-u)); }
	.trust-credential--accessibilite img { width: calc(104 * var(--pe-u)); }
	.trust-link-label svg    { flex: 0 0 calc(18 * var(--pe-u));
	                           width: calc(18 * var(--pe-u)); height: calc(18 * var(--pe-u)); }
	.values-band svg,
	.expertise-highlights svg { width: calc(46 * var(--pe-u)); height: calc(46 * var(--pe-u)); }
	.contact-details svg     { flex: 0 0 calc(31 * var(--pe-u));
	                           width: calc(31 * var(--pe-u)); height: calc(31 * var(--pe-u)); }

	/* --- 8. Menu, boutons, champs : les boîtes qui portent le texte ------ */

	/*
	 * Menu, colonnes 2 et 3 du pied de page, titre et mention du formulaire,
	 * intitulés verts en capitales : toutes ces zones sont pilotées par
	 * --type-small et passent de 14 à 16 px sans une seule surcharge de
	 * font-size. Les intitulés « Découvrir » / « Informations légales » et la
	 * ligne de copyright relèvent de --type-body et passent à 19,4 px. Ne
	 * restent ici que les boîtes qui doivent suivre ces textes.
	 */
	.site-menu-inner         { min-height: calc(58 * var(--pe-u)); }
	.site-nav                { gap: calc(4 * var(--pe-u)); }
	.site-nav a              { padding-inline: calc(14 * var(--pe-u)); }
	.site-brand-banner-inner { min-height: calc(128 * var(--pe-u)); gap: calc(40 * var(--pe-u)); }

	.site-button             { min-height: calc(46 * var(--pe-u));
	                           padding: calc(12 * var(--pe-u)) calc(18 * var(--pe-u)); }
	.actions button,
	.actions a               { min-height: calc(42 * var(--pe-u)); padding: 0 calc(17 * var(--pe-u)); }
	.v8-copy .actions button,
	.v8-copy .actions a      { min-height: calc(36 * var(--pe-u)); padding: 0 calc(13 * var(--pe-u)); }
	.formations-premium-page .v8-copy .actions :is(button, a) { min-height: calc(38 * var(--pe-u));
	                                                            padding-inline: calc(15 * var(--pe-u)); }
	.v8-footer > a           { min-height: calc(42 * var(--pe-u));
	                           padding: calc(13 * var(--pe-u)) calc(17 * var(--pe-u)); }
	.formations-premium-page .v8-footer > a { padding-inline: calc(18 * var(--pe-u)); }

	.contact-form input,
	.contact-form select,
	.contact-form textarea   { padding: calc(13 * var(--pe-u)) calc(14 * var(--pe-u)); }
	.contact-form .form-consent input,
	.contact-form .wpcf7-acceptance input { flex: 0 0 calc(18 * var(--pe-u));
	                                        width: calc(18 * var(--pe-u)); height: calc(18 * var(--pe-u)); }

	/* --- 9. Contact Form 7 ---------------------------------------------- */

	/*
	 * Seule taille encore figée en pixels dans ce pont, et c'est un <div> :
	 * il échappe aux trois règles globales de site.css et resterait à 14 px
	 * au milieu d'un formulaire passé à 16 / 19,4 px — sur la page dont se
	 * plaint la cliente. (Le .wpcf7-not-valid-tip voisin, lui, est un
	 * <span> : il est déjà capté par la règle --type-body et suit tout seul ;
	 * son font-size:13px est du code mort.)
	 */
	.contact-form .wpcf7-response-output { font-size: var(--type-small); }
	.contact-form .wpcf7-acceptance .wpcf7-list-item label { gap: calc(10 * var(--pe-u)); }
}