de ce paragraphe, et c'est une TROUVAILLE, pas
un oubli : le porte data-i18n="about.who_p1", et i18n.js remplace
textContent — le ASHA Solution ecrit dans le source est donc
DETRUIT au chargement du bundle. Verifie par querySelectorAll sur la page
rendue : zero occurrence. C'est le piege numero un du repo, encore en place
sur nosotros.html. Le corriger demande de sortir le strong du noeud traduit,
ce qui touche la chaine i18n : signale, pas fait ici. */
/* ── Cibles tactiles des commandes principales ─────────────────────────────
Mesure sur sept largeurs de 1920 a 320 px, sur les commandes du contenu
(les liens en ligne d'un paragraphe et ceux du pied de page relevent d'une
autre regle, WCAG 2.5.8 les exemptant). Trois etaient sous le seuil de 44 :
.final-cta__link 161 x 43 — a un pixel, et c'est moi qui l'ai amene
la en passant son padding a 14 px
.section-cta 256 x 26 — deux occurrences, prealable
.scene-hacked__replay 38 x 38 — prealable
Aucune n'est corrigee en changeant un corps de texte : seule la boite
grandit, la ligne de base et la composition ne bougent pas. */
.final-cta__link { padding: 15px 4px; }
.section-cta { min-height: 44px; }
.scene-hacked__replay { width: 44px; height: 44px; }
/* ── Finitions mesurees apres la pose des sols ─────────────────────────────*/
/* Les logos partenaires sont un filtre plat brightness(0) invert(0.85), donc un
gris ~#D9D9D9 pose a 75 % d'opacite. Ils avaient ete calibres sur sol-0 :
mesure, ils y valaient 7,45:1 contre leur plaque. En montant la bande sur
sol-1, la plaque s'eclaircit de #1A1A1A a #313131 et le meme reglage tombe a
5,89:1 — les logos palissent. L'opacite passe a 88 %, ce qui redonne 7,49:1,
soit exactement le rendu d'avant. Ce ne sont pas du texte, aucun seuil WCAG
ne s'applique ; c'est la LISIBILITE qu'on restitue, a la mesure. */
main > section[data-sol="1"] .alliance-card__logo { opacity: 0.88; }
/* Le second cas n'a qu'un chiffre : sa tuile occupait toute la colonne droite
et se lisait comme un bandeau, pas comme une tuile. Elle se dimensionne
desormais sur son contenu — le libelle est deja borne a 42ch — donc elle
garde le poids d'une tuile sans devenir une bande. */
main > section[data-sol="2"] .case-row__metrics--single {
grid-template-columns: minmax(0, max-content);
}
/* Le titre d'industrias tombait en quatre lignes dont une portant le seul mot
« en » : mesure a 1440 px, la colonne de titre ne faisait que 1fr contre
1,4fr pour la liste de secteurs, soit 458 px pour un display de 56 px. Les
proportions s'inversent — le titre est l'element de la paire qui a besoin de
largeur, la liste de secteurs est faite de pastilles qui se replient toutes
seules. */
@media (min-width: 900px) {
.industries__head { grid-template-columns: 1.35fr 1fr; }
}
/* ══════════════════════════════════════════════════════════════════════════
OPERACIÓN — la frise dans la colonne de l'argument, 2026-08-12
══════════════════════════════════════════════════════════════════════════
Le probleme mesure : sur la composition de la fiche 08, l'en-tete de gauche
fait 251 px de haut et le bloc de tuiles 443 px. Il restait donc 192 px de
vide sous l'argument, et la fiche comble ce vide par un SECOND titre de meme
corps que nous n'avons pas.
La frise « El recorrido completo » existait deja, pleine largeur sous les
deux colonnes. Elle entre ici dans la grille en colonne 1 rangee 2, et les
tuiles s'etendent sur les deux rangees. La frise passe alors en VERTICAL,
exactement comme elle le fait deja sous 900 px : c'est le meme dispositif de
trait continu que la ligne de vie du diagramme de #sistema, donc les deux
schemas de la page continuent de se lire pareil.
Pourquoi c'est mieux qu'un remplissage : la frise dit le parcours, les tuiles
disent les moyens de ce parcours. Les mettre face a face fait de la section
une seule phrase au lieu de deux blocs empiles. */
@media (min-width: 1024px) {
.operacion__split {
/* Rangee 1 a la hauteur de l'en-tete, rangee 2 prend le reste. Les tuiles
traversent les deux : c'est elles qui fixent la hauteur totale. */
grid-template-rows: auto 1fr;
row-gap: clamp(28px, 3vw, 44px);
}
.operacion__split > .operacion__head { grid-column: 1; grid-row: 1; }
.operacion__split > .caps {
grid-column: 2;
grid-row: 1 / span 2;
/* Mesure : la colonne de l'argument (en-tete + frise) fait 499 a 578 px de
haut selon la largeur, le bloc de tuiles 408 a 443 px. Sans etirement le
vide changeait simplement de cote, de 84 a 170 px sous les tuiles. On
etire donc les deux rangees de tuiles a parts egales : les deux colonnes
se ferment a la meme hauteur, et les 42 a 85 px gagnes par tuile
tombent en marge basse DANS l'aplat rouge, ce qui epaissit la masse au
lieu de creuser un trou. */
align-self: stretch;
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.operacion__split > .flow { grid-column: 1; grid-row: 2; align-self: end; }
/* Verticale : la colonne fait ~520 px, six etapes a l'horizontale y
tiendraient a 13 px de corps, sous le plancher de lisibilite. */
.operacion__split > .flow .flow__steps {
grid-template-columns: minmax(0, 1fr);
gap: clamp(12px, 1.2vw, 18px);
}
.operacion__split > .flow .flow__steps::before {
top: 6px;
bottom: 6px;
left: 5px;
right: auto;
width: 1px;
height: auto;
background: linear-gradient(180deg,
var(--color-primary),
rgba(255, 255, 255, 0.16) 30%,
rgba(255, 255, 255, 0.16) 70%,
var(--color-primary));
}
.operacion__split > .flow .flow__step {
flex-direction: row;
align-items: center;
gap: clamp(14px, 1.4vw, 20px);
text-align: left;
}
.operacion__split > .flow .flow__label { margin-bottom: clamp(14px, 1.4vw, 20px); }
}
/* ══════════════════════════════════════════════════════════════════════════
ROUGES RECALIBRÉS APRÈS LE PASSAGE AU NOIR — 2026-08-12, seconde passe
══════════════════════════════════════════════════════════════════════════
Deux causes distinctes, et la seconde est de mon fait :
1. Le sol descend au noir pur, ce qui AMÉLIORE le rouge (#DC2626 passe de
3,94 à 4,35:1 sur le sol de marque). Amélioré mais toujours sous 4,5 : il
manquait 0,15. Le rouge de base reste donc exclu du texte, partout.
2. --color-surface est passé de #0F172A à #2B2B2B, et c'est une HAUSSE de
clarté volontaire : la carte doit se détacher au-dessus des trois sols,
comme chez la référence dont les cartes (#161616) sont plus claires que
leur sol (#000000). Conséquence non voulue : les règles de la passe
précédente qui posaient --color-primary-lift sur cette plaque avaient été
mesurées à 4,74:1 contre #171717. Sur #2B2B2B elles tombent à 3,76:1.
Elles étaient justes quand elles ont été écrites ; c'est mon changement de
plaque qui les a cassées, pas une erreur de leur auteur.
D'où le troisième cran, --color-primary-soft #F87171, et la règle simple :
texte rouge PETIT (< 24 px) · sur sol-0 ou sol-1 → -lift (5,58 / 4,90)
· sur sol-2 ou plus clair → -soft (5,82 / 5,12)
texte rouge GRAND (≥ 24 px) · -lift partout (5,58 → 3,12)
rouge en APLAT · --color-primary, texte blanc dessus, 4,62:1
Sélecteurs relevés sur le DOM rendu des six pages, chacun avec le ratio
mesuré avant correction. */
/* Le lien de navigation actif. Rouge 14 px sur le verre du header composité
sur le noir, plus son propre voile rouge à 8 % : 3,83:1. Le verre reste
assez sombre pour que -lift suffise, 4,90:1. */
.main-nav__link:hover,
.main-nav__link.is-active { color: var(--color-primary-lift); }
/* Le CTA du pied de page, présent sur les SIX pages : rouge 14 px sur le noir,
4,35:1. Le !important est obligatoire, la déclaration d'origine en porte un. */
.site-footer__contact-cta { color: var(--color-primary-lift) !important; }
/* Les accents de titre en gros corps. Seuil 3 et non 4,5, mais l'affiche du CTA
final pose son titre sur un voile clair où le rouge de base ne vaut plus que
2,93:1. -lift y remonte à 3,76:1. */
.final-cta__accent,
.final-cta__title .accent,
.page-hero__title .accent { color: var(--color-primary-lift); }
/* ── Les quatre règles rendues fausses par la hausse de --color-surface ─────
Toutes portaient -lift, mesuré 4,74:1 sur l'ancienne plaque #171717, tombé à
3,76:1 sur #2B2B2B. Elles passent au cran suivant : 5,12:1. */
.form-section__head > span:not(.form-section__num) { color: var(--color-primary-soft); }
.form-checkbox__label a { color: var(--color-primary-soft) !important; }
.rfc-chip span { color: var(--color-primary-soft); }
.contact-info__countries .eyebrow { color: var(--color-primary-soft); }
/* ══════════════════════════════════════════════════════════════════════════
LA PLAQUE TEINTÉE — recette unique, 2026-08-12
══════════════════════════════════════════════════════════════════════════
Demande de Gabriel : « je voudrais que tous les boutons de couleurs soient
traités de la même manière que ces boutons », capture à l'appui — les quatre
promesas de ¿Cómo lo hacemos?. La référence est donc NOTRE PROPRE SITE, il
n'y a rien à transposer, seulement à généraliser.
ÉTAT DES LIEUX MESURÉ SUR LE DOM DES SIX PAGES. Trois familles cohabitaient :
A. la plaque teintée, déjà la bonne recette, mais avec SIX alphas de fond
différents (0,06 · 0,08 · 0,10 · 0,12 · 0,14 · 0,18) et HUIT alphas de
bordure (0,20 → 0,55). Personne n'aurait pu deviner laquelle est la
bonne : aucune ne l'était, il n'y avait pas de recette.
B. l'aplat plein : pastilles, chiffres, tags. Une partie venait de la passe
de contraste, où l'aplat servait à sauver du rouge illisible en texte.
C. les boutons d'ACTION, .btn et compagnie.
LA RECETTE, reprise à l'identique de .promises--scene .promise :
fond accent 14 % → 6 % en dégradé vertical, sur rgba(23,23,23,0.55)
bordure 1 px, accent 42 %
texte blanc à 96 %
ombres liseré interne blanc 6 %, halo externe accent 8 %, portée 35 %
icône accent éclairci, avec sa lueur
MESURE, blanc sur la plaque, les six accents × les trois sols :
rouge 17,0 / 15,7 / 14,8 · violet 16,3 / 15,0 / 14,0 · orange 15,7 / 14,3 /
13,4 · cyan 15,4 / 14,0 / 13,1 · vert 15,2 / 13,8 / 12,9 · argent 13,5 /
12,1 / 11,2. La plaque est donc PLUS SÛRE que l'aplat plein qu'elle
remplace, où le texte blanc plafonnait à 4,62:1 sur le rouge.
L'ARGENT EST LE SEUL CAS PARTICULIER, et c'est la mesure qui l'impose : un
accent clair au même alpha donne une plaque bien plus claire. À 14 % l'argent
produit #2B2B2C sur sol-0, c'est-à-dire --color-surface #2B2B2B au pixel
près : la plaque cesse de se lire comme une plaque et devient une carte
ordinaire. Ses alphas sont donc divisés par deux, 7 % et 24 %.
CE QUE LA RECETTE NE TOUCHE PAS, volontairement : ni le rayon, ni le
remplissage, ni la taille de texte, ni l'affichage. C'est un TRAITEMENT de
surface, pas une géométrie. Les pastilles rondes restent rondes, les pilules
restent des pilules.
TROIS FAMILLES EXCLUES, et pourquoi :
· .btn — le CTA primaire. Un aplat rouge plein est ce qui en fait le point
d'action de la page ; en plaque teintée il ne serait plus primaire, il
aurait le même poids qu'un label. À dire à Gabriel, pas à trancher seul.
· .need et .cap — les cartes pleine couleur de Soluciones et Operación,
demandées explicitement (« des cards full couleurs comme palo alto »).
Ce sont des cartes de contenu, pas des boutons.
· .skip-link, le widget de l'assistant, et le chrome de navigation
(.main-nav__link, .lang-switch__btn) : systèmes à part. */
.eyebrow,
main > section[data-sol="1"] > .container .eyebrow,
main > section[data-sol="2"] > .container .eyebrow,
main > section[data-sol="1"] > .container .industries__head .eyebrow,
main > section[data-sol="1"] .industries__head .eyebrow,
.hero__eyebrow, .page-hero__eyebrow, .final-cta__eyebrow,
.symptom__idx, .layer__idx, .pillar__num,
/* .method__index RETIRE de cette liste le 2026-08-14. Les grands numeraux 01
a 06 des bandes de metodologia ont DEJA leur propre remplissage, et il est
persona : `background: var(--persona)` avec `color: var(--persona-on)` a la
l.9457. La recette de plaque leur imposait par-dessus un --plq rouge, d'ou
un cadre rouge autour du 06 sur une bande verte — vu par Gabriel en
capture.
C'est la DEUXIEME fois aujourd'hui que cette liste capture un element qui
portait deja sa couleur : .practice__num ce matin, .method__index ce soir.
Avant d'y ajouter un selecteur, verifier qu'il n'a pas deja un fond. */
/* .practice__num RETIRE de cette liste le 2026-08-14. Les grands chiffres
01 a 06 des six cartes de heros n'ont JAMAIS eu de fond : ce sont des
numeraux colores par persona, poses en absolu dans le coin de la carte.
La recette leur mettait un degrade rouge et une bordure a 42 % : c'est le
« cuadro rojo encima de cada numero » signale par Gabriel.
Une contre-regle existait, mais scopee #liga — section supprimee le
2026-08-14 quand les cartes ont rejoint #sistema. Elle est donc morte,
et le cadre est revenu. On corrige la cause, pas le symptome. */
.form-section__num, .chip, .rfc-chip, .partner-level__tag,
.destacado__kicker, .destacado__arrow, .alliances__coverage-stat,
.about-card__icon-wrap, .feature-card__icon, .leader-card__avatar,
.case-flow__tag, .framework, .industries__sector, .country__since,
.front {
--plq: var(--color-primary);
--plq-fond-haut: 14%;
--plq-fond-bas: 6%;
--plq-bord: 42%;
border-style: solid;
border-width: 1px;
border-color: color-mix(in srgb, var(--plq) var(--plq-bord), transparent);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--plq) var(--plq-fond-haut), transparent),
color-mix(in srgb, var(--plq) var(--plq-fond-bas), transparent)),
rgba(23, 23, 23, 0.55);
color: rgba(248, 250, 252, 0.96);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 0 1px color-mix(in srgb, var(--plq) 8%, transparent),
0 12px 32px -16px color-mix(in srgb, var(--plq) 35%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* Les accents autres que le rouge. Chacun garde le sien, la recette ne change
pas — c'est tout l'intérêt d'avoir sorti l'accent en variable. */
.case-flow__tag { --plq: var(--color-grc); }
.industries__sector,
.country__since { --plq: var(--color-csirt); }
.front[data-persona="ctem"] { --plq: var(--color-ctem); }
.front[data-persona="csirt"] { --plq: var(--color-csirt); }
.front[data-persona="zerotrust"] { --plq: var(--color-zerotrust); }
.front[data-persona="grc"] { --plq: var(--color-grc); }
/* L'argent, alphas divisés par deux — voir la mesure ci-dessus. */
.framework,
.front[data-persona="ngsoc"] {
--plq: var(--color-ngsoc);
--plq-fond-haut: 7%;
--plq-fond-bas: 3%;
--plq-bord: 24%;
}
/* L'icône : l'accent éclairci, avec sa lueur. C'est le seul endroit où la
couleur reste de la COULEUR et non un aplat, et elle y est légitime : une
icône n'est pas du texte, son seuil est 3:1 et non 4,5. */
.eyebrow .icon,
.hero__eyebrow .icon, .page-hero__eyebrow .icon, .final-cta__eyebrow .icon,
.chip .icon, .rfc-chip .icon, .framework .icon, .industries__sector .icon,
.about-card__icon-wrap .icon, .feature-card__icon .icon,
.destacado__arrow .icon, .case-flow__tag .icon {
color: color-mix(in srgb, var(--plq) 62%, #FFFFFF);
filter: drop-shadow(0 0 8px color-mix(in srgb, var(--plq) 55%, transparent));
}
/* Le survol, pour celles qui sont cliquables. Même geste que la référence :
deux pixels de lévitation et la bordure qui se resserre. */
a.rfc-chip:hover, a.industries__sector:hover, a.destacado__arrow:hover,
a.front:hover, .front a:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--plq) 65%, transparent);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 0 0 1px color-mix(in srgb, var(--plq) 18%, transparent),
0 18px 40px -16px color-mix(in srgb, var(--plq) 55%, transparent);
}
/* La référence elle-même repasse par la recette, pour qu'il n'existe plus DEUX
sources de vérité. Les valeurs sont identiques à celles qu'elle portait en
dur : rien ne change à l'écran dans ¿Cómo lo hacemos?, seule la provenance
des nombres change. */
.promises--scene .promise {
--plq: var(--color-primary);
border-color: color-mix(in srgb, var(--plq) 42%, transparent);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--plq) 14%, transparent),
color-mix(in srgb, var(--plq) 6%, transparent)),
rgba(23, 23, 23, 0.55);
}
/* ── Les six qui perdaient la cascade ──────────────────────────────────────
Mesuré par getComputedStyle, pas supposé : sur 21 sélecteurs vérifiés, six
n'avaient reçu que la bordure de la recette, pas le fond. Chacun est battu
par une règle plus spécifique, et la plus forte atteint (0,3,2). Ma recette
est à (0,1,0). Quadrupler la classe donnerait (0,4,0) et gagnerait, mais
rendrait la liste illisible ; !important est le mur documenté de ce fichier,
et il est ici employé avec la règle battue nommée à chaque ligne.
.symptom__idx battu par main > section[data-sol="1"] .symptom__idx (0,2,2)
.layer__idx battu par main > section[data-sol="1"] .layer--command .layer__idx (0,3,2)
.front battu par la règle d'aplat de la passe précédente (0,2,2)
.framework battu par .diferenciador__proof .framework (0,2,0)
.country__since battu par .country--expanding .country__since (0,2,0)
.feature-card__icon battu par .section--dark .feature-card__icon (0,2,0)
.industries__sector bordure seule, battue par sa propre 2e déclaration */
.symptom__idx, .layer__idx, .front, .framework, .country__since,
.feature-card__icon, .industries__sector {
border-color: color-mix(in srgb, var(--plq) var(--plq-bord), transparent) !important;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--plq) var(--plq-fond-haut), transparent),
color-mix(in srgb, var(--plq) var(--plq-fond-bas), transparent)),
rgba(23, 23, 23, 0.55) !important;
color: rgba(248, 250, 252, 0.96) !important;
}
/* Les deux enfants de .front. Ils portaient --color-fg-light, l'encre sombre,
posee quand la tuile etait un aplat CLAIR : sur la plaque teintee, sombre,
ils tombent a 1,05:1, donc invisibles. Mesure a l'appui, pas une supposition.
Ils repassent au blanc (le nom) et au muted (le verbe), comme dans la
reference ou le texte de la plaque est blanc et l'accent est porte par la
bordure et l'icone. Battus par main > section[data-sol="1"] .front__name
a (0,2,2), d'ou le !important.
Mesure apres correction : blanc 15,7:1 sur la plaque rouge, 14,3:1 sur
l'orange ; muted #94A3B8 6,4 a 7,2:1 selon l'accent. */
main > section[data-sol="1"] .front__name,
.front__name { color: rgba(248, 250, 252, 0.96) !important; }
main > section[data-sol="1"] .front__verb,
.front__verb { color: var(--color-muted) !important; }
/* ══════════════════════════════════════════════════════════════════════════
« LO QUE NOS HACE ÚNICOS » — la plaque teintée y est ANNULÉE, 2026-08-12
══════════════════════════════════════════════════════════════════════════
Demande de Gabriel : la recette de plaque s'applique partout SAUF dans cette
section, où les cartes des six super-héros doivent retrouver l'état qu'elles
avaient juste avant.
Ce que la recette y avait changé, et c'est là qu'était l'erreur : les quatre
classes touchées dans #liga sont .eyebrow, .pillar__num, .practice__num et
.framework. Or .practice__num — les grands chiffres 01 à 06 des cartes de
héros — n'avait JAMAIS EU DE FOND. C'étaient des numéraux colorés par
persona, posés à même la carte. La recette leur a mis une boîte qu'ils n'ont
jamais portée, et c'est ce qui abîmait les cartes.
Les valeurs ci-dessous ne sont pas reconstituées de mémoire : elles sont
relevées dans les règles qui précédaient la recette dans ce même fichier,
avec leur numéro de ligne. */
/* La contre-regle « #liga .practice__num » qui vivait ici est supprimee le
2026-08-14 : #liga n'existe plus, et la cause est corrigee plus haut. */
/* Les pastilles d'ordre des trois piliers : aplat rouge plein, chiffre blanc.
Règle d'origine l.10265. */
#liga .pillar__num {
background: var(--color-primary) !important;
border: 0 !important;
border-radius: var(--radius-sm);
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
color: var(--color-fg) !important;
}
/* L'eyebrow « NUESTRO DIFERENCIADOR » : du texte rouge éclairci, pas une
pilule. #liga est au sol-0, où --color-primary-lift mesure 5,58:1. Règle
d'origine l.90. */
#liga > .container > .diferenciador__head .eyebrow,
#liga .eyebrow {
background: none !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
color: var(--color-primary-lift) !important;
}
/* Les quatre cartouches de frameworks en bas de section : argent très discret,
rayon en pilule, et l'icône en VERT de validation et non en accent argent.
Règle d'origine l.5844 et l.5857. */
#liga .framework {
background: rgba(148, 163, 184, 0.06) !important;
border: 1px solid rgba(148, 163, 184, 0.22) !important;
border-radius: var(--radius-full);
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
color: rgba(241, 245, 249, 0.92) !important;
}
#liga .framework .icon {
color: var(--color-success);
filter: none;
}
/* ══════════════════════════════════════════════════════════════════════════
INDUSTRIAS — la ligne des 95 % arrivee d'#alianzas, 2026-08-12
══════════════════════════════════════════════════════════════════════════
Memes valeurs que .alliances__coverage, qu'elle remplace : la phrase n'a pas
change, seule sa section a change. Elle n'est PAS centree ici, contrairement
a sa version d'origine : #industrias a un en-tete aligne a gauche
(.section-head--left), et une phrase centree sous un titre a gauche aurait
introduit un troisieme axe dans la section.
La pastille du chiffre passe par la recette de plaque teintee, comme toutes
les autres pastilles du site. */
.industries__coverage {
margin: var(--space-7) 0 0;
max-width: 760px;
font-size: 15px;
line-height: 1.5;
color: var(--color-muted);
}
.industries__coverage-stat {
display: inline-block;
padding: 3px 9px 2px;
border-radius: var(--radius-full);
font-size: 1em;
font: 800 1.15em/1 var(--font-mono);
margin-right: 4px;
/* la recette de plaque, avec l'accent de marque */
--plq: var(--color-primary);
border: 1px solid color-mix(in srgb, var(--plq) 42%, transparent);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--plq) 14%, transparent),
color-mix(in srgb, var(--plq) 6%, transparent)),
rgba(23, 23, 23, 0.55);
color: rgba(248, 250, 252, 0.96);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 0 1px color-mix(in srgb, var(--plq) 8%, transparent),
0 12px 32px -16px color-mix(in srgb, var(--plq) 35%, transparent);
}
/* La liste de secteurs passe de six a DIX entrees. Elle etait en flex libre, ce
qui tenait a six ; a dix elle doit pouvoir revenir a la ligne proprement et
ne jamais pousser l'en-tete. Le second rang (--secondary) reste visuellement
en retrait : ces trois secteurs ne sont pas couverts par le 95 %. */
.industries__sectors {
flex-wrap: wrap;
gap: 8px 10px;
}
@media (max-width: 900px) {
.industries__sectors { justify-content: flex-start; }
}
/* ══════════════════════════════════════════════════════════════════════════
SOLUCIONES — le héros à côté de chaque méthodologie, 2026-08-12
══════════════════════════════════════════════════════════════════════════
Principe posé par Gabriel : « on doit toujours montrer le héros à côté de
chaque méthodologie ». Les six visages deviennent le fil qui fait comprendre
qu'on parle du MÊME objet vu à trois profondeurs, au lieu de trois listes.
POURQUOI DES BUSTES ET PAS LES DÉCOUPES EXISTANTES. Les six découpes
heroes/*-cut.webp sont en pied, 800 × 1072. Mesuré : dans une boîte de la
taille d'une carte, une figure en pied donne une tête de 30 à 35 px, où l'on
voit « une personne » et non « ce héros-là ». Six bustes ont donc été
recadrés (440 × 440, tête = 48 % du cadre, 23 à 40 Ko), et le plancher de
lisibilité a été mesuré sur planche : lisible à 160, 130 et 96 px ; à 72 px
le visage est une tache ; à 52 px il ne reste qu'une silhouette.
PLANCHER RETENU : 96 px. Ici on est à 150, donc large.
TROIS GRAMMAIRES DISTINCTES, c'est la phase 3 du plan :
· #sistema buste carré à gauche d'une plaque → le CYCLE
· #soluciones figure émergeant du coin bas-droit → le BESOIN
· #liga portrait de 280 px en tête de carte → l'INCARNATION
Réutiliser ici la grammaire de #liga aurait rendu les deux sections
identiques, ce qui est exactement la redondance qu'on cherche à défaire.
POIDS : les six bustes sont des fichiers nouveaux (178 Ko au total), mais ils
ne remplacent rien — les découpes en pied restent utilisées par #liga. */
.needs__grid .need__link { position: relative; overflow: hidden; }
.need__hero {
position: absolute;
right: -14px;
bottom: -16px;
width: 150px;
height: 150px;
object-fit: contain;
object-position: bottom right;
pointer-events: none;
/* Le buste est une découpe sur transparent : sur un aplat persona clair
(argent, vert, orange) la figure est sombre et se détache seule ; sur les
deux aplats foncés (violet, et le rouge s'il revenait) elle a besoin d'un
souffle. L'ombre portée fait ce travail sans ajouter de forme. */
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
transition: transform var(--duration-slow) var(--ease-out);
}
.need__link:hover .need__hero { transform: translateY(-4px) scale(1.03); }
/* Le texte recule pour ne pas passer sous la figure. Mesuré : carte de 428 px
à 1440 avec 28 px de padding, le texte garde 252 px, soit environ 35 signes
par ligne — la mesure a été refaite à chaque largeur du harnais. */
.needs__grid .need__text { padding-right: 118px; }
.needs__grid .need__cta { position: relative; z-index: 1; }
@media (max-width: 560px) {
/* Une seule colonne : la carte tombe à 335 px et 150 px de figure prendraient
45 % de sa largeur. Le buste descend à 118 px, ce qui reste TRÈS au-dessus
du plancher de 96 px mesuré. */
.need__hero { width: 118px; height: 118px; right: -10px; bottom: -12px; }
.needs__grid .need__text { padding-right: 92px; }
}
/* ── La carte-passerelle ───────────────────────────────────────────────────
Elle n'est pas une méthodologie : pas de héros, pas d'aplat persona. Elle
passe par la plaque teintée, la grammaire du site pour un élément coloré qui
n'est pas un aplat, avec l'accent de marque. Mesuré sur sol-1 : plaque
#311818, blanc dessus 15,7:1 ; bordure #681C1C à 1,55:1 du sol.
Elle est volontairement plus discrète que les cinq aplats (dont la frontière
contre le sol va de 4,66 à 14,94:1) : c'est une passerelle, pas une offre. */
.need--bridge { --plq: var(--color-primary); }
#soluciones .need--bridge .need__link {
border: 1px solid color-mix(in srgb, var(--plq) 42%, transparent);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--plq) 14%, transparent),
color-mix(in srgb, var(--plq) 6%, transparent)),
rgba(23, 23, 23, 0.55);
color: rgba(248, 250, 252, 0.96);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 0 1px color-mix(in srgb, var(--plq) 8%, transparent),
0 12px 32px -16px color-mix(in srgb, var(--plq) 35%, transparent);
}
#soluciones .need--bridge .need__title,
#soluciones .need--bridge .need__cta { color: rgba(248, 250, 252, 0.96); }
#soluciones .need--bridge .need__method { color: var(--color-primary-soft); opacity: 1; }
#soluciones .need--bridge .need__text { color: var(--color-muted); opacity: 1; }
/* Pas de figure, donc pas de recul du texte. */
.needs__grid .need--bridge .need__text { padding-right: 0; }
#soluciones .need--bridge .need__link:hover {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--plq) 20%, transparent),
color-mix(in srgb, var(--plq) 10%, transparent)),
rgba(23, 23, 23, 0.55);
border-color: color-mix(in srgb, var(--plq) 65%, transparent);
}
/* ══════════════════════════════════════════════════════════════════════════
SISTEMA — les cinq frentes deviennent des portes, 2026-08-12
══════════════════════════════════════════════════════════════════════════
TROISIÈME GRAMMAIRE, et c'est le point de la phase 3. Les six visages sont
désormais présents dans trois sections ; s'ils y étaient présentés de la même
façon, la page se lirait comme trois fois la même liste. D'où :
· ici buste carré à gauche, verbe en grand, nom en petit → le CYCLE
· #soluciones figure émergeant du coin d'un aplat → le BESOIN
· #liga portrait de 280 px en tête de carte → l'INCARNATION
LE BUSTE EST À 96 px, ce qui n'est pas un choix esthétique mais le PLANCHER
mesuré sur planche de contrôle : lisible à 160, 130 et 96 px ; à 72 px le
visage devient une tache ; à 52 px il ne reste qu'une silhouette. Les plaques
faisaient 70 px de haut, elles ne pouvaient donc pas porter un héros
lisible — c'est la plaque qui s'adapte au plancher, pas l'inverse.
Le verbe passe devant le nom : ce diagramme dit ce que chaque frente FAIT
dans le cycle, #liga dit qui il EST. */
.fronts {
grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
gap: clamp(10px, 1vw, 16px);
}
.front { padding: 0; }
.front__link {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 14px 8px 8px;
text-decoration: none;
color: inherit;
min-height: 44px; /* cible tactile */
}
.front__bust {
width: 96px;
height: 96px;
flex: 0 0 96px;
object-fit: contain;
object-position: bottom center;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
transition: transform var(--duration-normal) var(--ease-out);
}
.front__link:hover .front__bust { transform: translateY(-3px) scale(1.04); }
.front__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Le verbe domine : il porte le cycle. Il reste sous les 18,66 px qui font le
texte large, donc son seuil est 4,5 — le blanc y vaut 15,7 à 17,6:1 selon
l'accent de la plaque, très au-dessus. */
.front__verb {
font-size: clamp(15px, 1.25vw, 19px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
}
.front__name {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Le nom recule dans la hiérarchie mais reste du texte : il passe au muted,
qui vaut 7,18:1 sur sol-1 et 6,28:1 sur sol-2. */
.front__name { color: var(--color-muted) !important; }
.front__verb { color: rgba(248, 250, 252, 0.96) !important; }
@media (max-width: 560px) {
.fronts { grid-template-columns: minmax(0, 1fr); }
}
/* ══════════════════════════════════════════════════════════════════════════
¿POR QUÉ NADIE MÁS LO RESUELVE? — la comparaison, 2026-08-14
══════════════════════════════════════════════════════════════════════════
Deux colonnes de même largeur et de même hauteur, mais PAS de même poids :
c'est tout le mécanisme. Celle de gauche est en retrait — bordure neutre,
tirets, texte muted. Celle de droite est une plaque teintée de marque, avec
des flèches et des mots en gras. Le lecteur voit lequel des deux modèles est
le nôtre avant d'avoir lu une ligne.
POURQUOI PAS DEUX APLATS PLEINS. La fiche 08 réserve l'aplat plein aux
moments où la couleur doit peser comme une masse. Ici les deux colonnes
doivent rester lisibles côte à côte et se comparer ligne à ligne : un aplat
rouge plein écraserait la colonne de gauche et transformerait une comparaison
en publicité. La plaque suffit, et son blanc mesure 15,7:1.
Mesures : la colonne de droite sur sol-1 donne une plaque #311818, blanc
dessus 15,7:1, bordure #681C1C. La colonne de gauche prend --color-surface
#2B2B2B, frontière 1,301 contre le sol, muted dessus 5,52:1. */
.versus__head { max-width: 50rem; margin-inline: auto; }
.versus__cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(16px, 1.8vw, 28px);
align-items: stretch;
}
.versus__col {
padding: clamp(24px, 2.4vw, 36px) clamp(20px, 2.2vw, 32px);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* En retrait : c'est le modèle qu'on n'est pas. */
.versus__col--them {
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
}
/* Le nôtre : la plaque de marque. */
.versus__col--us {
--plq: var(--color-primary);
border: 1px solid color-mix(in srgb, var(--plq) 42%, transparent);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--plq) 14%, transparent),
color-mix(in srgb, var(--plq) 6%, transparent)),
rgba(23, 23, 23, 0.55);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 0 1px color-mix(in srgb, var(--plq) 8%, transparent),
0 12px 32px -16px color-mix(in srgb, var(--plq) 35%, transparent);
}
.versus__tag {
align-self: flex-start;
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: var(--radius-full);
}
.versus__col--them .versus__tag {
border: 1px solid var(--color-border-strong);
color: var(--color-muted);
}
/* Le libellé de notre colonne est du rouge en PETIT corps sur une plaque :
-lift n'y suffirait pas (3,76:1 sur cette plaque), -soft donne 5,12:1. */
.versus__col--us .versus__tag {
border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
color: var(--color-primary-soft);
}
.versus__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(12px, 1.2vw, 18px);
}
.versus__list li {
display: flex;
gap: var(--space-3);
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.5;
color: var(--color-muted);
}
.versus__list strong { color: var(--color-fg); font-weight: 700; }
.versus__mk {
flex: 0 0 auto;
font-family: var(--font-mono);
line-height: 1.5;
}
/* Le texte est enrobe dans .versus__txt, et ce n'est pas cosmetique : le li est
un conteneur FLEX, donc son gap de 12 px s'appliquait aussi entre le
et le texte qui le suit — ils etaient deux items flex distincts. Resultat
visible : un espace anormal avant la virgule dans les quatre lignes de la
colonne de droite. Un seul enfant apres le marqueur, et le gap ne joue plus
qu'a l'endroit voulu. */
.versus__txt { min-width: 0; }
.versus__col--them .versus__mk { color: var(--color-muted); opacity: 0.6; }
.versus__col--us .versus__mk { color: var(--color-primary-soft); }
@media (max-width: 47.5rem) {
/* Une colonne : la comparaison se lit alors de haut en bas, le modèle
habituel puis le nôtre. L'ordre du DOM est déjà celui-là. */
.versus__cols { grid-template-columns: minmax(0, 1fr); }
}
/* ══════════════════════════════════════════════════════════════════════════
L'ORBITE — l'emblème nommé, 2026-08-14
══════════════════════════════════════════════════════════════════════════
La Capitana au centre, cinq frentes autour à 72°. Deux anneaux concentriques,
un plein et un pointillé, comme la référence. Aucun rayon tracé : les nœuds
posés sur l'anneau suffisent à dire l'appartenance, et cinq traits partant du
centre auraient fait un astérisque.
POSITIONNEMENT PAR left/top, PAS PAR TRANSFORM. C'est une contrainte, pas une
préférence : le reveal GSAP anime le transform des .front
(revealGroup('.fronts', '.front', { y: 18 })). Positionner par transform
aurait fait entrer les deux en conflit, et les nœuds auraient sauté à
l'origine à chaque apparition. Avec left/top, la position vient de la mise en
page et l'animation reste libre — elles se composent au lieu de se battre.
L'angle du nœud i vaut -90° + i × 72°, donc CTEM en haut puis dans le sens
des aiguilles. L'ordre est celui du CYCLE et non de l'alphabet : anticiper,
détecter, répondre, protéger, gouverner.
REPLI SOUS 760 px : l'orbite se défait et redevient la grille de plaques
d'avant. Mesuré : à 375 px le conteneur ne fait plus que 295 px, le rayon
tomberait à 100 px et des nœuds de 148 px se chevaucheraient. Et surtout le
buste passerait sous les 96 px du plancher de lisibilité. */
@media (min-width: 47.5rem) {
.orbit {
--orbit-size: min(560px, 100%);
/* Rayon 35 % : 196 px à 560, plus 74 de demi-nœud = 270 < 280, le nœud
reste dans le cercle. La hauteur de nœud descend à 132 et celle du noyau
à 140 pour dégager le libellé « La Capitana » : mesuré, les deux nœuds du
bas ont leur centre à y = +159 et leur bord haut à +93, contre +70 pour
le bas du noyau — 23 px de dégagement là où il n'y en avait que 4. */
--orbit-r: 35%;
--onode-w: 148px;
--onode-h: 132px;
position: relative;
width: var(--orbit-size);
aspect-ratio: 1;
margin: clamp(8px, 1vw, 20px) auto 0;
}
/* Les deux anneaux. Le plein porte la structure, le pointillé la respiration. */
.orbit::before,
.orbit::after {
content: '';
position: absolute;
border-radius: var(--radius-full);
pointer-events: none;
}
.orbit::before {
inset: 12%;
border: 1px solid var(--color-border-strong);
}
.orbit::after {
inset: 30%;
border: 1px dashed var(--color-border);
}
/* ── Le noyau : La Capitana ─────────────────────────────────────────────
Elle est nommée en HTML sous le buste, jamais dans l'image. Le halo rouge
dit que c'est le centre sans avoir besoin d'un aplat, qui aurait écrasé
les cinq nœuds autour. */
.orbit__core {
position: absolute;
left: 50%;
top: 50%;
width: 168px;
height: 140px;
margin-left: -84px;
margin-top: -70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
text-align: center;
}
.orbit__core::before {
content: '';
position: absolute;
inset: -6%;
border-radius: var(--radius-full);
background: radial-gradient(circle at 50% 42%,
color-mix(in srgb, var(--color-primary) 30%, transparent) 0%,
transparent 68%);
pointer-events: none;
}
.orbit__core-bust {
width: 120px;
height: 120px;
object-fit: contain;
object-position: bottom center;
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
}
.orbit__core-label { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.orbit__core-name {
font-family: var(--font-mono);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.14em;
/* Rouge en PETIT corps sur le sol-1 de la section : -lift donne 4,90:1,
le rouge de base seulement 3,81. */
color: var(--color-primary-lift);
}
.orbit__core-role {
font-size: var(--text-xs);
color: var(--color-muted);
letter-spacing: 0.02em;
}
/* ── Les cinq nœuds ────────────────────────────────────────────────────
La position vient d'un calc sur left/top, jamais d'un transform. Les
cosinus et sinus sont écrits en dur parce que CSS n'a pas trigonométrie
partout : l'angle du nœud i est -90° + i × 72°.
i=0 -90° cos 0.000 sin -1.000
i=1 -18° cos 0.951 sin -0.309
i=2 54° cos 0.588 sin 0.809
i=3 126° cos -0.588 sin 0.809
i=4 198° cos -0.951 sin -0.309 */
.orbit__ring {
display: block;
position: absolute;
inset: 0;
grid-template-columns: none;
gap: 0;
margin: 0;
padding: 0;
}
.orbit__ring .front {
position: absolute;
width: var(--onode-w);
min-height: var(--onode-h);
left: calc(50% + var(--cx) * var(--orbit-r) - var(--onode-w) / 2);
top: calc(50% + var(--cy) * var(--orbit-r) - var(--onode-h) / 2);
}
.orbit__ring .front[style*="--i: 0"] { --cx: 0.000; --cy: -1.000; }
.orbit__ring .front[style*="--i: 1"] { --cx: 0.951; --cy: -0.309; }
.orbit__ring .front[style*="--i: 2"] { --cx: 0.588; --cy: 0.809; }
.orbit__ring .front[style*="--i: 3"] { --cx: -0.588; --cy: 0.809; }
.orbit__ring .front[style*="--i: 4"] { --cx: -0.951; --cy: -0.309; }
/* Le nœud passe en colonne : buste au-dessus, verbe et nom dessous et
centrés. La grammaire horizontale de la liste ne tiendrait pas dans un
carré de 148 px. */
.orbit__ring .front__link {
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 8px 12px;
text-align: center;
min-height: var(--tap-min);
}
.orbit__ring .front__bust {
width: 96px; /* exactement le plancher mesuré */
height: 96px;
flex: 0 0 96px;
}
.orbit__ring .front__body { align-items: center; }
.orbit__ring .front__verb { font-size: clamp(14px, 1.15vw, 17px); }
/* Le label du rang passe au centre : il coiffe l'emblème au lieu de le
précéder en drapeau. */
.layer--fronts .layer__label { text-align: center; }
}
/* Sous 760 px, rien à défaire : .orbit et .orbit__ring redeviennent de simples
div et ul, et la grille de plaques déjà vérifiée reprend la main. Le noyau,
lui, se replie en une ligne au-dessus de la liste. */
@media (max-width: 47.5rem) {
.orbit__core {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.orbit__core-bust { width: 72px; height: 72px; object-fit: contain; object-position: bottom center; }
.orbit__core-label { display: flex; flex-direction: column; }
.orbit__core-name {
font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700;
letter-spacing: 0.14em; color: var(--color-primary-lift);
}
.orbit__core-role { font-size: var(--text-xs); color: var(--color-muted); }
}
/* Les deux points d'appui du hero — 2026-08-14.
Repris du hero React du DS 1.0. Le troisième (« Gobernado por la Value
Delivery PMO ») saute : le principe organisateur est La Capitana.
La puce est un disque de 6 px en rouge éclairci — c'est une forme, pas du
texte, donc le seuil est 3:1 et non 4,5 ; --color-primary-lift y donne 5,58
sur le sol de marque, largement au-dessus. */
.hero__points {
list-style: none;
margin: clamp(18px, 1.8vw, 26px) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(8px, 0.9vw, 12px);
max-width: 46ch;
}
.hero__points li {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.5;
color: var(--color-muted);
}
.hero__points li::before {
content: '';
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: var(--color-primary-lift);
}
/* ══════════════════════════════════════════════════════════════════════════
LES SIX CAPACITÉS EN DEUX RANGÉES DE TROIS — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Demande de Gabriel : à la place de la roue, les grandes cartes en deux
rangées de trois, TOUTES DE MÊME TAILLE.
Trois colonnes divisent six exactement — aucun orphelin, à aucune largeur.
C'est la seule division de six qui tienne aussi en 2 et en 1 sans reste.
« MISMA TALLA » impose de défaire le traitement de bannière de la carte de
commandement : elle était en deux colonnes, pleine largeur, avec un portrait
de 300 px et un titre de 30. Elle redevient une carte comme les cinq autres.
Ce qui la distingue passe entièrement au CONTENU : son libellé de rang
« Mando · orquestación », sa bordure rouge, et sa première position.
Tout ce bloc est en fin de fichier et surcharge donc les déclarations
d'origine à spécificité égale — vérifié par getComputedStyle, pas supposé. */
.practices__grid--six {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
margin-top: var(--space-5);
}
@media (min-width: 45rem) {
.practices__grid--six {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5);
/* « Misma talla » au sens strict : sans ceci, chaque RANGÉE prend la
hauteur de son contenu et les deux rangées diffèrent — mesuré, 529 px
contre 509 à 1440. Avec 1fr toutes les rangées prennent la hauteur de la
plus haute, donc les six cartes sont identiques.
Volontairement PAS appliqué sous 45rem : en colonne unique il n'y a plus
de comparaison possible entre cartes voisines, et forcer la hauteur de la
plus longue ajouterait jusqu'à 120 px de vide sous cinq d'entre elles. */
grid-auto-rows: 1fr;
}
}
@media (min-width: 62rem) {
.practices__grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}
/* Le bloc « Marcos de referencia y estándares » sur nosotros — 2026-08-14.
Il vient de la home, où il vivait dans .diferenciador__proof. Ce wrapper-là
portait des marges calibrées pour fermer une section de la home ; ici il
suit une bande de certifications dans la même section, donc il lui faut
surtout un séparateur et moins d'air au-dessus.
Les styles internes (.frameworks__label, .frameworks__logos, .framework-logo,
.frameworks__grid, .framework) sont déjà chargés : les deux pages partagent
redesign.css. Rien à dupliquer. */
/* Les deux règles de mise en forme du bloc (label en mono, sceaux en flex
centré) étaient scopées à .diferenciador__proof, l'enveloppe restée sur la
home. Sans elles le bloc retombait sur .frameworks__grid l.1168, une grille
à deux colonnes alignée à gauche : les trois sceaux partaient à ras du bord
pendant que le label et les logos restaient centrés. .about-frameworks est
donc ajouté aux DEUX sélecteurs plus haut, pour que le bloc garde exactement
la présentation qu'il avait sur la home. Il a été déplacé, pas redessiné. */
.about-frameworks {
/* Même grille à gouttière que .diferenciador__proof (l.5824) : sans elle le
label collait aux logos. Seules les marges extérieures changent, le bloc
ne ferme plus une section, il suit une bande dans la même section. */
display: grid;
gap: var(--space-6);
margin-top: clamp(32px, 3.4vw, 56px);
padding-top: clamp(28px, 3vw, 44px);
border-top: 1px solid var(--color-border);
text-align: center;
}
/* Les logos portent déjà leur propre marge basse dans la règle générale ; dans
une grille à gouttière elle s'ajouterait au gap. */
.about-frameworks .frameworks__logos { margin-bottom: 0; }
/* La sortie de #sistema sur la home, une fois le bloc de preuve parti : le CTA
reste seul et a besoin de son propre espace. */
.sistema__outro {
margin-top: clamp(40px, 4vw, 72px);
text-align: center;
}
/* ══════════════════════════════════════════════════════════════════════════
LES SIX CARTES DE HÉROS : ALIGNEMENT — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Défaut signalé par Gabriel, puis mesuré : la carte de La Capitana ne
s'alignait sur aucune des cinq autres. Relevé à 1440 px, en offsetTop
interne (jamais getBoundingClientRect, qui inclut les transformations des
reveals) :
carte titre desc chips « conocer » vide dessous
La Capitana 315 348 427 468 39
les cinq autres 300 337 435 481 26
Et l'écart empirait en descendant : 88 px contre 26 sous la Capitana à
900 px de large. Deux causes distinctes, l'une de structure et l'autre de
flux :
1. STRUCTURE. La Capitana enveloppait tout son contenu dans un
.practice__command-body, héritage de sa mise en page en bannière. Les
cinq autres posent leurs enfants à plat. Deux gouttières différentes
(0 contre 12 px) et une enveloppe qui ne s'étirait pas : les lignes ne
pouvaient pas tomber au même endroit. L'enveloppe est retirée du HTML,
les six cartes ont désormais exactement la même suite d'enfants.
2. FLUX. Aucune carte ne calait son lien en bas. Les descriptions ayant des
longueurs différentes, les six « Conocer al héroe » flottaient à six
hauteurs. margin-top: auto les pose tous sur la même ligne de base.
Le rang, lui, n'existait que sur la Capitana et lui coûtait 15 px de décalage
de titre. Les six le portent maintenant, avec les VERBES DÉJÀ PUBLIÉS sur
metodologia.html (.subnav__role : Orquestar, Anticipar, Detectar, Responder,
Proteger, Gobernar). Rien d'inventé, et la rangée dit enfin le cycle. */
.practices__grid--six .practice__rank {
color: var(--p, var(--color-primary-lift));
margin: 0;
}
/* La ligne de base commune des six liens. */
.practices__grid--six .practice__more { margin-top: auto; }
/* La Capitana garde un signal de rang, mais il ne passe plus par la taille :
« misma talla » était la demande. Une bordure teintée au rouge, reprise de
l'ancien .practice--command (rgba(220,38,38,0.35), relevée telle quelle), et
sa première position dans la grille. */
.practices__grid--six .practice[data-persona="asha"] {
border-color: rgba(220, 38, 38, 0.35);
}
.practices__grid--six .practice[data-persona="asha"]:hover {
border-color: var(--color-primary);
}
/* Le rang de la carte ASHA, et lui seul, échoue au contraste — mesuré 3,71:1
pour un seuil de 4,5 à 12 px. Ce n'est pas une surprise, c'est la faute déjà
nommée trois fois dans ce fichier : --color-primary (#DC2626) employé comme
TEXTE en petit corps sur fond sombre. Les cinq autres personas passent
largement (CTEM 6,40 · NGSOC 14,54 · CSIRT 7,38 · ZeroTrust 4,53 · GRC 7,87),
donc on n'éclaircit pas toute la rangée pour un seul cas : on corrige ce cas.
Le grand numéral 01 garde --p tel quel : à 56 px son seuil est de 3,0 et il
mesure 3,71. */
.practices__grid--six .practice[data-persona="asha"] .practice__rank {
color: var(--color-primary-soft);
}
/* La bande des anneaux, une fois « ¿Cómo lo hacemos? » réduite — 2026-08-14.
La section gardait le rembourrage d'une section pleine : 112 px en haut et en
bas à 1440 pour 267 px de contenu, soit 296 px de vide pour 267 px utiles.
Ça ne se lisait plus comme une bande mais comme un trou. On la resserre à
peu près de moitié : elle respire encore, mais elle a la hauteur de ce
qu'elle porte.
Le fond ne bouge pas : sol-0, la « banda negro » que Gabriel a nommée. Ses
deux frontières sont mesurées à 1,304:1 avec #soluciones et 1,140:1 avec
#sistema — cette seconde valeur EST le seuil de bande relevé sur la
référence, pas un échec. */
.scene-hacked--anillos {
padding-top: clamp(48px, 4.6vw, 68px);
padding-bottom: clamp(48px, 4.6vw, 68px);
}
/* .how-stats portait un filet et 120 px de séparation EN HAUT (l.8315 :
margin-top + padding-top + border-top). Ils séparaient les anneaux du corps
de la section. Ce corps n'existe plus : le filet flottait tout seul dans le
vide, avec 135 px de noir au-dessus de lui — vu en capture, pas déduit.
Il ne reste rien à séparer, donc les trois partent. */
.scene-hacked--anillos .how-stats {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* ══════════════════════════════════════════════════════════════════════════
PRESENCIA : GLOBE À GAUCHE, CARTES À DROITE — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Demande de Gabriel : « le globe plus grand, sur la gauche, le titre pas
centré mais sur la gauche, et les cards sur la droite ».
Ce qui bridait le globe n'était pas la place — le conteneur fait 1760 px à
1920 — mais un plafond de 660 px, écrit DEUX FOIS : max-width ici et
GLOBE_MAX dans le script inline d'index.html. Le script se dimensionne sur
Math.min(clientWidth, GLOBE_MAX), donc le plus petit gagne : ne relever
qu'un des deux ne change rien à l'écran. Les deux passent à 820.
La scène était un bloc unique où les quatre cartes étaient posées en ABSOLU
dans les coins du carré englobant le globe. Tout ce positionnement tombe. */
.presence__head {
text-align: left;
max-width: 68ch; /* la mesure de lecture, pas la moitié de la page */
margin-left: 0;
margin-right: 0;
}
/* En dessous de deux colonnes, la scène reste l'empilement déjà vérifié. */
/* SEUIL À 1200 PX, ET C'EST UNE MESURE, PAS UN CHIFFRE ROND. Le premier essai
basculait à 1080 px comme les étiquettes du globe : à cette largeur la colonne
ne donne que 572 px au globe, soit MOINS que les 660 d'avant. Le but était de
l'agrandir, pas de le rétrécir sur une plage. La colonne vaut (conteneur −
gouttière) × 0,595 ; il faut donc au moins 1157 px de conteneur pour rendre
660. Le seuil a donc été cherché à la mesure, pas au calcul : à 1200 px la
colonne rend 636 (encore en dessous), à 1280 elle rend 678. C'est 1280.
Entre 1080 et 1280 on reste en colonne unique, où le globe prend désormais
jusqu'à 820 px — donc plus grand qu'avant là aussi, et à aucune largeur il
n'est plus petit qu'il ne l'était. */
@media (min-width: 80rem) { /* 1280px — seuil mesuré, voir ci-dessus */
.presence__stage {
display: grid;
/* 1,25 / 0,85 : la colonne du globe prend 59,5 % du reste après gouttière.
À 1440 elle mesure 823 px et le globe prend son plafond de 820 ; à 1280,
733 px ; à 1080, 623. Sous 1080 on repasse en une colonne, et c'est aussi
là que les étiquettes du globe s'éteignent. */
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
gap: clamp(32px, 3vw, 64px);
align-items: center;
min-height: 0; /* le min-height: 660px de la version en absolu */
}
/* Les quatre cartes reviennent dans le flux. */
.presence__stage .presence__float,
.presence__stage .presence__fallback {
position: static;
width: auto;
margin: 0;
}
.presence__cards {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Le globe n'est plus centré dans une pleine largeur : il se cale à gauche
de sa colonne, sinon il flotte au milieu et le titre ne le rejoint pas. */
.presence__globe-wrap { align-items: flex-start; }
}
/* En une seule colonne, les cartes s'empilent simplement sous le globe. */
.presence__cards {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-6);
}
/* Le plafond du globe. Voir l'avertissement plus haut : GLOBE_MAX doit suivre. */
.presence__globe { max-width: 820px; }
/* ══════════════════════════════════════════════════════════════════════════
PRESENCIA : TROIS CARTES DE MÊME FAMILLE — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Demande de Gabriel : « otras dos cards del mismo estilo que la card en
desarrollo, con los países de operación activa y el centro de monitoreo ».
La colonne de droite portait trois formats différents pour trois choses de
même nature : une liste de pays, un highlight, un autre highlight. Elle en
porte maintenant UN seul, décliné par la couleur de la légende du globe :
rouge pour l'actif, cyan pour le développement, violet pour le hub. La même
pastille que sur le globe, ce qui rend la légende lisible des deux côtés. */
/* « Operación activa » cesse d'être un simple repli. Elle était masquée dès que
les étiquettes vivaient sur le globe (.has-globe-pins), pour ne pas dire deux
fois la même chose. Gabriel la veut visible : le globe tourne et ses
étiquettes passent, la carte, elle, se lit. Elle garde son rôle de repli
quand il n'y a ni WebGL ni JS — c'est le même bloc. */
/* display: BLOCK, pas flex. La regle d'origine masquait ce bloc (display: none)
quand les etiquettes vivent sur le globe ; en la neutralisant j'avais ecrit
flex, et le libelle « > OPERACION ACTIVA [ 5 ] » se retrouvait a COTE de la
liste au lieu d'etre au-dessus — les cinq pays s'empilaient alors dans une
colonne etroite. Les deux autres groupes sont en block : celui-ci doit l'etre
aussi, c'est la condition pour qu'ils soient « exactement du meme style ». */
.presence.has-globe-pins .presence__fallback { display: block; }
/* Le hub : violet, comme la pastille « Centro de monitoreo » de la légende. */
.country--hub {
background: rgba(23, 23, 23, 0.35);
border-color: color-mix(in srgb, var(--color-zerotrust) 25%, transparent);
}
.country--hub:hover {
border-color: color-mix(in srgb, var(--color-zerotrust) 55%, transparent);
background: color-mix(in srgb, var(--color-zerotrust) 4%, transparent);
}
.country--hub .country__flag {
background: var(--color-zerotrust);
box-shadow: 0 0 5px color-mix(in srgb, var(--color-zerotrust) 30%, transparent),
inset 0 0 2px rgba(255, 255, 255, 0.25);
}
.country--hub .country__since {
--plq: var(--color-zerotrust);
color: var(--color-zerotrust-soft, #D8B4FE);
}
/* La note des contrats MSSP, sous la liste du hub. */
.presence__note {
margin: var(--space-3) 0 0;
font-size: var(--text-sm);
line-height: 1.5;
color: var(--color-muted);
}
/* ══════════════════════════════════════════════════════════════════════════
TOUS LES EN-TÊTES DE SECTION PASSENT À GAUCHE — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Demande de Gabriel : « las secciones que tienen el titulo en medio, ponerlos
a la izquierda ». Il l'avait déjà demandé pour #presencia, c'est la même
règle étendue à tout le site.
.section-head est la base — 22 en-têtes sur cinq pages en dépendent. Quatre
sections ont en plus leur propre règle de centrage, écrite avant que la base
existe ; elles la répètent donc et il faut les prendre aussi, sinon on croit
avoir tout basculé alors que quatre sections restent centrées. Les rendues
mortes (.clients__head, .diferenciador__head, .liga__header,
.liga-section-head, .how__head) ne sont pas touchées : plus aucune page ne
les porte, les corriger donnerait l'illusion d'un travail fait.
Le modificateur .section-head--center est retiré du HTML (5 emplois) plutôt
que neutralisé ici : une classe qui dit « centre » et qui aligne à gauche
est un piège pour la prochaine passe. La règle CSS reste, elle redeviendra
vraie si quelqu'un la repose sciemment. */
.section-head,
.presence__head,
.alliances__head,
.cases__head,
.support__head,
.industries__head {
text-align: left;
margin-inline-start: 0;
margin-inline-end: 0;
}
/* Les lèdes de ces en-têtes étaient recentrés par margin-inline: auto. */
.section-head .section-lede,
.presence__head .section-lede,
.alliances__head .section-lede,
.cases__head .section-lede,
.support__head .section-lede,
.industries__head .section-lede {
margin-inline-start: 0;
margin-inline-end: 0;
}
/* La surcharge d'accent de #versus qui vivait ici est retirée le 2026-08-14 :
la section est repassée en sol-1 avec le déplacement demandé par Gabriel,
et le rouge lui revient par la règle générale l.9909. Une règle qui ne
matche plus rien est un piège pour la passe suivante, dans un fichier qui
déclare déjà certains sélecteurs quatre fois. */
/* La section « Nuestra esencia » de nosotros.html était centrée en entier, pas
seulement son titre : la marque « aša » est un flex centré et la citation
« Las cosas como deben ser. » porte son propre text-align: center. Aligner le
seul titre à gauche aurait laissé un bloc à moitié centré, ce qui est pire
que les deux états francs. Le bloc suit donc son titre. */
.essence-mark { align-items: flex-start; }
.essence-body .essence-pull { text-align: left; }
/* Les trois anneaux grandissent — 2026-08-14, demande de Gabriel.
Le cadran passe de clamp(104px, 7.4vw, 128px) à clamp(148px, 11vw, 196px),
soit +53 % au plafond. Trois choses doivent suivre, sinon on obtient un grand
anneau mal rempli :
· le chiffre au centre, sinon il flotte dans un disque devenu vide ;
· l'ÉPAISSEUR du trait — le masque radial creuse un trou à 8 px du bord,
valeur calibrée pour un cadran de 128 px ; gardée telle quelle sur un
cadran de 196 px, l'anneau paraîtrait deux fois plus fin ;
· la gouttière entre les trois, qui doit croître avec eux.
La bande ne porte plus qu'eux depuis qu'elle a été vidée : elle a la place. */
.scene-hacked--anillos .ring-stat__dial-wrap {
/* PAS de min(..., 100%) ici, et c'est une erreur que j'ai faite puis mesurée :
.how-stats est un FLEX dont les .ring-stat sont en flex: 0 1 auto, donc
leur largeur vient de leur libellé. « 100 % » y valait 100 % du mot
« investigación », et les trois cadrans prenaient trois tailles
différentes — 99, 129 et 96 px à 1920. Le cadran se dimensionne donc sur
le VIEWPORT, avec un plancher assez bas pour que trois cadrans et deux
gouttières tiennent dans 280 px de zone utile à 320 px de large. */
width: clamp(84px, 15vw, 196px);
}
.scene-hacked--anillos .ring-stat__dial {
-webkit-mask: radial-gradient(closest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
mask: radial-gradient(closest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
}
.scene-hacked--anillos .ring-stat__val { font-size: clamp(34px, 2.7vw, 46px); }
.scene-hacked--anillos .ring-stat__unit { font-size: clamp(14px, 1vw, 17px); }
.scene-hacked--anillos .ring-stat__sub { font-size: clamp(15px, 1.15vw, 19px); }
/* Ecarte le 2026-08-15 : 96 px au maximum, les trois cadrans se touchaient
presque sur grand ecran et se lisaient comme un seul objet a trois
parties, alors que ce sont trois temps distincts. */
/* DEUX VALEURS, ET C'EST TOUT LE POINT. En n'ecrivant qu'un seul gap
j'ecartais aussi les LIGNES : le libelle « Objetivo operativo del NGSOC »
occupe sa propre ligne au-dessus des trois cadrans, il se retrouvait donc a
180 px d'eux sur grand ecran. Le premier nombre est l'ecart vertical, entre
le libelle et les cadrans ; le second l'ecart horizontal, entre les cadrans. */
.scene-hacked--anillos .how-stats { gap: clamp(6px, 0.7vw, 14px) clamp(40px, 9vw, 180px); }
/* Sous 48rem le clamp est au plancher et le cadran tombe entre 84 et 115 px. Deux choses doivent suivre cette reduction, sinon le trait de
l'anneau et les chiffres restent calibres pour un cadran de 196 px :
l'epaisseur du masque et le corps du chiffre. */
@media (max-width: 48rem) {
.scene-hacked--anillos .how-stats { gap: clamp(10px, 3vw, 20px); }
.scene-hacked--anillos .ring-stat__dial {
-webkit-mask: radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
mask: radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
}
.scene-hacked--anillos .ring-stat__val { font-size: clamp(19px, 5.6vw, 26px); }
.scene-hacked--anillos .ring-stat__unit { font-size: 10px; }
.scene-hacked--anillos .ring-stat__sub { font-size: clamp(12px, 3.4vw, 14px); }
}
/* La surcharge d'accent de #versus est retiree le 2026-08-14 : la bande de
destacados est devenue le menu secondaire, #versus revient en sol-1, et le
rouge lui revient par la regle generale l.9909. C'est la deuxieme fois que
cette surcharge est ecrite puis retiree dans la journee — elle depend du
sol de la section, donc de son VOISINAGE. Verifier le sol avant de la
supposer utile. */
/* Le lien de conversion de la bande des anneaux. Il doit se lire comme une
suite de la promesse chiffrée, pas comme un bouton posé là : donc centré sous
les trois cadrans, et en secondaire — le primaire rouge sur sol-0 à cette
position ferait concurrence au CTA final. */
.anillos__cta {
margin-top: clamp(28px, 3vw, 44px);
text-align: center;
}
/* Les regles de .practice__num sont devenues MORTES le 2026-08-14 : les grands
ordinaux ont ete retires des six cartes de heros pour ne laisser qu'une
numerotation dans #sistema, et cette classe n'existait nulle part ailleurs
sur le site. Elles ne sont pas supprimees, elles decrivent un traitement qui
marche et qui redeviendra vrai si les numeros reviennent. Ne pas les modifier
en croyant agir sur la home : plus rien ne les porte. */
/* La marge droite qui reservait la place des bustes de #soluciones tombe avec
eux — 2026-08-14. Elle valait 118 px (92 en mobile) et n'existait que pour
ne pas passer sous l'image. Sans ce retrait, chaque description garderait
une colonne de vide a droite.
Les regles de .need__hero (l.11040, l.11056, l.11068) deviennent mortes :
plus aucune page ne porte cette classe. Elles ne sont pas supprimees, elles
decrivent un traitement qui marche, mais ne rien y changer en croyant agir
sur la home. */
.needs__grid .need__text { padding-right: 0; }
/* ══════════════════════════════════════════════════════════════════════════
ALIANZAS : LA BANDE BLANCHE DE LA HOME — 2026-08-14
══════════════════════════════════════════════════════════════════════════
La section complète est partie sur nosotros.html#alianzas. Il ne reste ici
que les deux pistes de logos et un bouton, sur fond clair.
LE FILTRE EST LE POINT CRITIQUE, et il a été mesuré avant d'être écrit. Les
17 fichiers de logos sont eux-mêmes CLAIRS : luminance moyenne des pixels
opaques relevée entre 138 et 195 sur 255, treize d'entre eux au-dessus de
150. Ils sont dessinés pour un fond sombre, et le site les force en plus à
l'argent par brightness(0) invert(0.85). Posés tels quels sur du blanc, ils
ne se voient tout simplement pas.
La parade ne demande AUCUN nouveau fichier : brightness(0) écrase déjà tout
en noir, il suffit de ne pas inverser. Le poids visuel est calé sur celui de
la bande de clients juste sous le hero, qui fait le même travail sur le même
fond (grayscale + opacité 0,72). */
.alliances--band {
padding-top: clamp(40px, 4vw, 64px);
padding-bottom: clamp(40px, 4vw, 64px);
}
.alliances--band .alliance-card__logo {
filter: brightness(0);
opacity: 0.62;
}
.alliances--band .alliance-card:hover .alliance-card__logo {
filter: brightness(0);
opacity: 1;
}
/* La carte perd sa plaque : sur fond clair, un cadre sombre autour de chaque
logo transformerait une bande calme en damier. */
.alliances--band .alliance-card {
background: none;
border: 0;
box-shadow: none;
}
.alliances--band .alliance-card::before { content: none; }
.alliances--band .alliance-card:hover {
background: none;
border: 0;
transform: none;
}
/* L'étiquette de piste, sur fond clair. */
.alliances--band .alliances__tier-label {
color: var(--color-muted-light);
}
.alliances--band .alliances__tier + .alliances__tier {
margin-top: clamp(14px, 1.6vw, 24px);
}
.alliances__band-cta {
margin-top: clamp(24px, 2.6vw, 40px);
text-align: center;
}
/* Le bouton secondaire est dessiné pour un fond sombre : bordure et encre
claires. Sur ce sol il lui faut l'encre de la page claire. */
/* Le bouton de #sistema partage cette regle depuis le 2026-08-17 : Gabriel le
veut identique a celui d'alianzas, or les memes classes ne suffisaient pas —
celui-la vivait hors de .alliances--band et gardait donc le .btn-secondary
dessine pour fond sombre. Un selecteur ajoute, pas une regle jumelle : deux
regles jumelles divergent des la premiere retouche de l'une. */
.alliances--band .btn-secondary,
.diferenciador__cta-wrap .btn-secondary {
color: var(--color-fg-light);
border-color: color-mix(in srgb, var(--color-fg-light) 28%, transparent);
background: transparent;
}
.alliances--band .btn-secondary:hover,
.diferenciador__cta-wrap .btn-secondary:hover {
color: var(--color-primary);
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
/* ══════════════════════════════════════════════════════════════════════════
MENU SECONDAIRE DE LA HOME — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Même composant que le sous-menu de metodologia.html (.subnav) : barre
collante sous le header, piste qui défile avec masques de bord, entrée
active soulignée. On n'en réécrit rien, on n'ajuste que ce qui diffère.
TROIS DIFFÉRENCES, et chacune a une raison :
1. Pas d'icône ni de rôle. Sur metodologia ces deux-là portent les personas ;
ici les entrées sont des sections, pas des personnages. Sans persona, le
soulignement actif retombe sur le rouge de marque.
2. Une pastille pleine en fin de piste, comme dans la référence Palo Alto.
Elle mène à une AUTRE PAGE : elle est donc exclue du scrollspy et n'est
jamais « active ».
3. Le fond suit l'échelle noire de la home, pas le #101010 de metodologia. */
.subnav--home {
background: color-mix(in srgb, var(--sol-1) 94%, transparent);
border-bottom: 1px solid var(--color-border);
}
/* Sans persona, l'entrée active se signale au rouge de marque. */
.subnav--home .subnav__link {
--persona: var(--color-primary);
--persona-lift: var(--color-primary-lift);
font-size: clamp(13px, 1.05vw, 15px);
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
}
/* Les masques de bord sont écrits en dur sur le fond de metodologia : ils
doivent suivre le nôtre, sinon on voit un rectangle plus clair aux extrémités. */
.subnav--home .subnav__inner::before {
background: linear-gradient(90deg, var(--sol-1) 0%, color-mix(in srgb, var(--sol-1) 0%, transparent) 100%);
}
.subnav--home .subnav__inner::after {
background: linear-gradient(270deg, var(--sol-1) 0%, color-mix(in srgb, var(--sol-1) 0%, transparent) 100%);
}
/* La pastille de contact. Elle ne prend pas le soulignement des autres :
deux signaux d'état sur le même objet se contredisent. */
/* La ligne source des 83 %, sous le lède de #problema. */
.problema__source {
margin-top: clamp(10px, 1.1vw, 16px);
/* LA TAILLE PROPRE EST RETIREE — 2026-08-22, releve par Gabriel : « la
deuxieme phrase a une taille de typo differente ». C'etait exact et
mesurable : elle portait clamp(14px, 1.05vw, 16px) quand la phrase juste
au-dessus, de meme classe .section-lede, se rend a var(--text-lg). Deux
phrases voisines dans le meme bloc, deux tailles, pour rien.
Elle garde son opacite legerement plus basse : c'est une source citee, elle
doit rester un cran en retrait, mais en INTENSITE et non en taille. */
opacity: 0.92;
}
/* En colonne unique la piste ne tient plus centrée : elle défile, et
margin-inline-start: auto sur la pastille pousserait tout le reste hors
champ. On la laisse suivre le flux. */
/* ══════════════════════════════════════════════════════════════════════════
#SOLUCIONES EN PANNEAU MAÎTRE-DÉTAIL — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Six onglets à gauche, un volet à droite. Motif de la référence Palo Alto,
transposé : chez eux la liste est posée sur une photo pleine largeur, ici
elle est sur le sol de la section. On ne reprend pas la photo — nous n'avons
pas d'image de fond à cet endroit, et en inventer une pour imiter la
référence serait décorer un vide.
SANS JAVASCRIPT, les six volets s'affichent à la suite : le HTML pose
hidden sur cinq d'entre eux, sol-panel.js le retire dès qu'il tourne et pose
.solpanel--vivant. La dégradation montre trop, jamais rien. */
.solpanel__grid {
display: grid;
gap: clamp(24px, 3vw, 56px);
}
@media (min-width: 62rem) {
.solpanel__grid {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: start;
}
}
/* ── La liste ─────────────────────────────────────────────────────────── */
.solpanel__list {
display: flex;
flex-direction: column;
gap: 2px;
}
.solpanel__tab {
--p: var(--color-primary);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
width: 100%;
/* 14px de haut × 2 + le contenu : le rang de 44 px de cible tactile est
tenu par la hauteur réelle, mesurée, pas par une min-height décorative. */
padding: 14px clamp(14px, 1.4vw, 20px);
border: 0;
border-left: 2px solid transparent;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
background: transparent;
color: var(--color-muted);
text-align: left;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.solpanel__tab-method {
font: 700 10px/1 var(--font-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-muted);
opacity: 0.7;
}
.solpanel__tab-title {
font-size: clamp(15px, 1.2vw, 18px);
font-weight: 600;
line-height: 1.25;
}
.solpanel__tab:hover {
background: rgba(248, 250, 252, 0.04);
color: var(--color-fg);
}
.solpanel__tab.is-active,
.solpanel__tab[aria-selected="true"] {
border-left-color: var(--p);
background: color-mix(in srgb, var(--p) 10%, transparent);
color: var(--color-fg);
}
.solpanel__tab.is-active .solpanel__tab-method,
.solpanel__tab[aria-selected="true"] .solpanel__tab-method {
color: var(--p);
opacity: 1;
}
.solpanel__tab:focus-visible {
outline: 2px solid var(--p);
outline-offset: -2px;
}
/* ── Le volet ─────────────────────────────────────────────────────────── */
.solpanel__pane {
--p: var(--color-primary);
padding: clamp(22px, 2.4vw, 36px);
border: 1px solid color-mix(in srgb, var(--p) 34%, transparent);
border-radius: var(--radius-lg);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--p) 12%, transparent),
color-mix(in srgb, var(--p) 4%, transparent)),
var(--color-surface);
}
.solpanel__pane-method {
display: block;
font: 700 11px/1 var(--font-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--p);
margin-bottom: var(--space-2);
}
.solpanel__pane-title {
margin: 0 0 var(--space-3);
font-size: clamp(22px, 2.1vw, 32px);
font-weight: 700;
line-height: 1.2;
color: var(--color-fg);
}
.solpanel__pane-text {
margin: 0;
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.6;
color: var(--color-fg);
opacity: 0.9;
}
.solpanel__pane-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: clamp(18px, 1.8vw, 26px);
min-height: 44px;
font-size: clamp(14px, 1.05vw, 16px);
font-weight: 700;
color: var(--color-fg);
}
.solpanel__pane-cta .icon {
width: 16px; height: 16px;
transition: transform var(--duration-fast) var(--ease-out);
}
.solpanel__pane-cta:hover .icon { transform: translateX(3px); }
/* Le persona colore l'onglet actif et son volet. Les mêmes six variables que
partout ailleurs — on ne réinvente pas la table.
RESTAUREE le 2026-08-14 : en retirant le fond d'image des volets, mon
expression reguliere a mange la moitie droite de chacune de ces lignes et
laisse une liste de selecteurs ouverte, qui avalait la regle suivante. Le
volet GRC sortait rouge. Toujours verifier ce qu'une suppression par motif
emporte AUTOUR de sa cible. */
.solpanel__tab[data-persona="ctem"], .solpanel__pane[data-persona="ctem"] { --p: var(--color-ctem); }
.solpanel__tab[data-persona="ngsoc"], .solpanel__pane[data-persona="ngsoc"] { --p: var(--color-ngsoc); }
.solpanel__tab[data-persona="csirt"], .solpanel__pane[data-persona="csirt"] { --p: var(--color-csirt); }
.solpanel__tab[data-persona="zerotrust"], .solpanel__pane[data-persona="zerotrust"] { --p: var(--color-zerotrust); }
.solpanel__tab[data-persona="grc"], .solpanel__pane[data-persona="grc"] { --p: var(--color-grc); }
/* Sous 62rem la liste passe au-dessus du volet, en bandeau qui défile.
Même DOM, aucun balisage dupliqué. */
@media (max-width: 61.99rem) {
.solpanel__list {
flex-direction: row;
overflow-x: auto;
scrollbar-width: none;
gap: 6px;
padding-bottom: 4px;
}
.solpanel__list::-webkit-scrollbar { display: none; }
.solpanel__tab {
flex: 0 0 auto;
border-left: 0;
border-bottom: 2px solid transparent;
border-radius: var(--radius-md);
}
.solpanel__tab.is-active,
.solpanel__tab[aria-selected="true"] { border-bottom-color: var(--p); }
.solpanel__tab-title { white-space: nowrap; }
}
/* La surcharge d'accent de #versus est retiree le 2026-08-14 : la regle
generale des titres sol-2 passe elle-meme en --color-primary-soft, elle
dit donc exactement la meme chose. Trois ecritures, trois retraits dans
la journee pour cette surcharge — cette fois c'est la cause qui a bouge. */
/* ══════════════════════════════════════════════════════════════════════════
#CASOS-EXITO : DEUX VOLETS, LES CHIFFRES EN DIAGRAMME — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Motif de la référence Palo Alto : un anneau quand le chiffre est une part,
un grand numéral quand c'est un compte, une phrase forte au-dessus.
L'ARC EST ANIMABLE PARCE QUE --fill EST DÉCLARÉ. Un conic-gradient ne se
transitionne pas : le navigateur interpole des images, pas des dégradés.
@property donne un TYPE à la variable, et une variable typée s'interpole —
c'est elle qui bouge, le dégradé n'en est que la conséquence. Sans le
support de @property (navigateurs anciens), --fill saute à sa valeur : pas
d'animation, pas de casse. */
@property --fill {
syntax: '';
/* inherits: TRUE, et ce n'est pas un detail. --fill est pose en style inline
sur le CONTENEUR (.case-ring, .ring-stat) tandis que le degrade conique vit
sur l'ENFANT (.case-ring__dial, .ring-stat__dial). Avec inherits: false
l'enfant ne voit plus la valeur du parent et retombe sur le fallback 0 :
tous les anneaux se vident. Et comme @property est GLOBAL au document,
cette erreur ne cassait pas seulement les nouveaux anneaux des casos, elle
cassait aussi les trois du 1-10-60, qui marchaient depuis des semaines. */
inherits: true;
initial-value: 0;
}
/* ── Les deux boutons ─────────────────────────────────────────────────── */
.cases__tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: clamp(26px, 2.8vw, 44px);
}
.cases__tab {
min-height: 44px;
padding: 10px clamp(14px, 1.6vw, 22px);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: transparent;
color: var(--color-muted);
font-family: var(--font-mono);
font-size: clamp(11px, 0.95vw, 13px);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
/* Le survol allume l'onglet comme toutes les autres pilules du site : filet
rouge et fond rouge tres dilue. Il etait le seul a s'eclaircir en gris, ce
qui ne se voyait pas sur ce sol.
8 % ET NON 14 : l'onglet SELECTIONNE est deja a 14 %, et deux etats a la
meme valeur auraient rendu impossible de distinguer celui qu'on survole de
celui qui est ouvert. */
.cases__tab:hover {
color: var(--color-fg);
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
/* LE SURVOL DE CES ONGLETS EST VERT, ET C'EST LA SECTION QUI LE DIT. Gabriel a
fait passer « casos de exito » au vert : l'etat selectionne y est deja vert
(regle #casos-exito plus bas). Un survol rouge y aurait introduit la seule
touche rouge d'une section qui n'en a plus.
8 % contre 14 % pour l'etat selectionne : les deux etats doivent rester
distinguables, sinon on ne sait plus lequel est ouvert et lequel est survole. */
#casos-exito .cases__tab:hover:not([aria-selected="true"]):not(.is-active) {
color: var(--color-fg);
border-color: var(--color-grc);
background: color-mix(in srgb, var(--color-grc) 8%, transparent);
}
.cases__tab.is-active,
.cases__tab[aria-selected="true"] {
color: var(--color-fg);
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.cases__tab:focus-visible { outline: 2px solid var(--color-primary-lift); outline-offset: 2px; }
/* ── Le volet, et son fondu ───────────────────────────────────────────── */
.cases__pane { }
.cases--vivant .cases__pane {
opacity: 0;
transform: translateY(10px);
transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.cases--vivant .cases__pane.is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.cases--vivant .cases__pane { transition: none; transform: none; }
}
.cases__pane-title {
margin: 0 0 clamp(24px, 2.6vw, 40px);
font-size: clamp(26px, 3.4vw, 46px);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--color-fg);
max-width: 20ch;
}
/* ── Les chiffres ─────────────────────────────────────────────────────── */
.cases__figures {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: clamp(22px, 2.6vw, 44px);
align-items: start;
margin-bottom: clamp(28px, 3vw, 48px);
}
.case-fig__num {
display: block;
font-size: clamp(38px, 5vw, 68px);
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
color: var(--color-primary-lift);
font-variant-numeric: tabular-nums;
}
.case-fig__unit {
font-size: 0.42em;
font-weight: 700;
margin-left: 0.15em;
letter-spacing: 0;
/* L'unite herite du grand numeral en --color-primary-lift. Or a 68 px le
numeral est en texte large (seuil 3:1, il mesure 4,90) tandis que l'unite
tombe a 16 px : seuil 4,5, et elle mesurait 4,28. Le meme rouge est donc
conforme sur l'un et pas sur l'autre — c'est la taille qui change de
regime, pas la couleur. La variante soft rend l'unite lisible sans
toucher au numeral. */
color: var(--color-primary-soft);
}
.case-fig__label {
margin: var(--space-2) 0 0;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1.5;
color: var(--color-muted);
}
.case-fig--lead .case-fig__num { font-size: clamp(46px, 6.4vw, 88px); }
/* L'anneau. Même grammaire que les trois du 1-10-60 : cadran d'une heure,
l'arc rouge est la fraction réelle. On ne la réécrit pas, on la reprend. */
.case-ring { text-align: left; }
.case-ring__dial-wrap {
position: relative;
display: block;
width: clamp(112px, 9vw, 150px);
aspect-ratio: 1;
margin-bottom: var(--space-2);
}
.case-ring__dial {
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(from 220deg,
var(--color-primary) calc(var(--fill, 0) * 1%),
rgba(248, 250, 252, 0.16) 0);
-webkit-mask: radial-gradient(closest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
mask: radial-gradient(closest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
}
/* La transition est sur le CONTENEUR : c'est lui qui porte --fill et donc lui
qui change. Posee sur l'enfant, elle n'aurait rien a interpoler. */
/* 1600 ms : la duree unique de tout ce qui chiffre sur ce site, calee sur les
compteurs de Trayectoria. Deux anneaux de meme facture ne doivent pas se
dessiner a deux vitesses. */
.case-ring { transition: --fill 1600ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
.case-ring { transition: none; }
}
.case-ring__num {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 1px;
}
.case-ring__val {
font-size: clamp(24px, 2.2vw, 34px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-fg);
font-variant-numeric: tabular-nums;
}
.case-ring__unit { font-size: 0.5em; font-weight: 700; color: var(--color-muted); }
.case-ring__label {
margin: 0;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1.5;
color: var(--color-muted);
}
/* ── Antes / Después ──────────────────────────────────────────────────── */
.cases__story {
display: grid;
gap: clamp(16px, 1.8vw, 28px);
}
@media (min-width: 48rem) {
.cases__story { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ══════════════════════════════════════════════════════════════════════════
PRESENCIA : LES TROIS GROUPES SUR UN SEUL MODÈLE — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Demande de Gabriel, capture à l'appui : « Operación activa » et « Centro de
monitoreo » doivent être EXACTEMENT du style de « En desarrollo », chacune
avec sa couleur.
Ce traitement n'existait que sur la carte « En desarrollo » et il était
écrit en dur en cyan, à six endroits (rgba(6,182,212,…)). Le généraliser
n'était donc pas une affaire de copier-coller : il fallait d'abord le
PARAMÉTRER. Une seule variable, --grp, porte la couleur du groupe ; toutes
les règles ci-dessous en dérivent. Trois déclarations suffisent ensuite pour
les trois groupes, au lieu de trois copies du même bloc.
Les couleurs sont celles de la légende du globe, pas des choix nouveaux :
rouge pour l'actif, cyan pour le développement, violet pour le hub. */
/* Le conteneur : encadré pointillé, comme le modèle. */
.presence__group {
--grp: var(--color-primary);
background: rgba(23, 23, 23, 0.35);
border: 1px dashed color-mix(in srgb, var(--grp) 30%, transparent);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-4) var(--space-5);
}
/* LES TROIS COULEURS SONT DECLAREES APRES LA BASE, et c'est obligatoire.
.presence__group--activa et .presence__group ont la MEME specificite (une
classe chacun) : a specificite egale, c'est la derniere declaration qui
gagne. Je les avais ecrites avant la base, et la base --grp: primary les
ecrasait toutes les trois — les trois groupes sortaient rouges. Mesure :
les trois bordures rendues a rgb(220,38,38) au lieu de rouge, cyan, violet.
C'est le piege n°2 du repo, et il vient de resservir. */
.presence__group--activa { --grp: var(--color-primary); }
.presence__group--desarrollo { --grp: var(--color-csirt); }
.presence__group--hub { --grp: var(--color-zerotrust); }
.presence__group .presence__sub-prompt { color: color-mix(in srgb, var(--grp) 88%, white); }
.presence__group .presence__sub-count { color: color-mix(in srgb, var(--grp) 70%, white); }
/* Les puces. Toutes identiques, la couleur vient du groupe qui les contient. */
.country--chip {
background: rgba(23, 23, 23, 0.35);
border-style: dashed;
border-color: color-mix(in srgb, var(--grp) 25%, transparent);
}
.country--chip:hover {
border-color: color-mix(in srgb, var(--grp) 55%, transparent);
background: color-mix(in srgb, var(--grp) 4%, transparent);
}
.country--chip .country__flag {
background: var(--grp);
box-shadow: 0 0 5px color-mix(in srgb, var(--grp) 30%, transparent),
inset 0 0 2px rgba(255, 255, 255, 0.25);
}
.country--chip .country__since {
--plq: var(--grp);
color: color-mix(in srgb, var(--grp) 55%, white);
background: color-mix(in srgb, var(--grp) 6%, transparent);
border-color: color-mix(in srgb, var(--grp) 20%, transparent);
}
/* La légende revient au centre DU GLOBE. Elle avait été poussée à gauche avec
lui quand la colonne est passée en align-items: flex-start ; or le globe est
un disque calé à gauche de sa colonne, pas la colonne entière. On recentre
donc la légende sur la LARGEUR DU GLOBE, pas sur celle de la colonne. */
.presence__globe-wrap .presence__legend {
width: 100%;
max-width: 820px; /* le plafond du globe : ils partagent leur axe */
justify-content: center;
}
/* La piste du menu est centree — 2026-08-14, en meme temps que le retrait de la
pastille « Hablar con un experto », demande de Gabriel.
La regle generale de .subnav centre deja la piste au-dessus de 62rem
(l.9315). En dessous elle DEFILE, et une piste qui defile ne se centre pas :
justify-content: center sur un contenu plus large que sa boite pousse le
debut hors champ a gauche, et la premiere entree devient inatteignable. On
ne centre donc que la ou ca tient. */
.subnav--home .subnav__track { justify-content: center; }
@media (max-width: 61.99rem) {
.subnav--home .subnav__track { justify-content: flex-start; }
}
/* ══════════════════════════════════════════════════════════════════════════
#CASOS-EXITO : LE TEXTE À GAUCHE, LES CHIFFRES EN GRAND À DROITE
══════════════════════════════════════════════════════════════════════════
2026-08-14, demande de Gabriel, et c'est la disposition de la référence :
la phrase forte tient une colonne, les diagrammes l'autre.
AU PASSAGE, LE DÉFAUT D'ALIGNEMENT QU'IL A VU. Mesuré à 1440 : les trois
grands numéraux faisaient 93 px de haut, l'anneau 154. Leurs libellés
partaient donc à 76 px pour les uns et 138 pour l'autre — quatre chiffres
sur une ligne, deux lignes de libellés. La cause n'est pas un réglage
oublié, c'est que le cercle et le texte n'ont aucune raison d'avoir la même
hauteur. On leur en donne une : une ZONE DE VALEUR commune, du diamètre de
l'anneau, dans laquelle les numéraux se calent en bas. Les libellés
repartent alors tous du même endroit. */
@media (min-width: 62rem) {
.cases__pane {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(32px, 4vw, 72px);
align-items: start;
}
}
.cases__figures {
/* La zone de valeur, partagée par les numéraux et l'anneau. */
/* LE PLAFOND DESCEND DE 148 A 128 PX. A 1920 la zone atteignait son maximum
pendant que la colonne de texte, elle, ne grandit pas : le bloc des reperes
depassait alors le bas de la carte de gauche de 23 px sur le volet mexicain.
20 px de moins par zone, sur deux lignes, rendent les 40 px qui manquaient.
128 reste tres au-dessus du corps des chiffres a cette largeur (76 px), donc
rien n'est comprime. */
--zone: clamp(104px, 8.4vw, 128px);
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
/* START ET NON END. Colles en bas de leur cellule, deux blocs d'une meme
ligne dont les libelles n'ont pas le meme nombre de lignes ne commencaient
pas a la meme hauteur : 16 px d'ecart mesures a 1440 entre « −30-40% »,
dont le libelle court sur deux lignes, et « Data Manager », qui tient sur
une. Le volet Ecuador le cachait, ses quatre libelles faisant une ligne
chacun.
Aligner par le haut ne coute pas l'alignement des valeurs : la zone porte
deja min-height: var(--zone) et y colle son contenu en bas, donc les bases
restent sur une meme ligne. Les deux alignements tiennent ensemble, ce que
« end » interdisait des que les libelles differaient. */
align-items: start;
margin-bottom: 0;
}
.case-fig__num {
min-height: var(--zone);
display: flex;
align-items: flex-end;
}
.case-ring__dial-wrap {
width: var(--zone);
margin-bottom: 0;
}
/* Les libellés repartent tous de la même ligne, quelle que soit la forme
au-dessus d'eux. */
.case-fig__label,
.case-ring__label { margin-top: var(--space-2); }
/* Les chiffres grandissent : ils tiennent une colonne à eux, ils ont la place. */
@media (min-width: 62rem) {
.case-fig__num { font-size: clamp(46px, 4.2vw, 76px); }
.case-fig--lead .case-fig__num { font-size: clamp(56px, 5.4vw, 96px); }
.cases__pane-title { max-width: none; }
}
/* ── Antes / Después, mis en avant ────────────────────────────────────────
C'était deux lignes de 14 px derrière une étiquette de 10. Le contraste
AVANT / APRÈS est l'argument même d'un cas client : il devient deux blocs
lisibles, chacun marqué par un filet de couleur — neutre pour l'avant,
vert pour l'après, les deux couleurs qui existaient déjà sur les étiquettes.
On ne choisit pas de nouvelles couleurs, on donne du volume aux siennes. */
.cases__story {
grid-template-columns: minmax(0, 1fr);
gap: clamp(12px, 1.2vw, 18px);
margin-top: clamp(26px, 2.8vw, 40px);
}
.cases__story .case-flow {
display: block;
padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 22px);
border-radius: var(--radius-md);
border-left: 3px solid var(--color-border-strong);
background: rgba(248, 250, 252, 0.03);
}
.cases__story .case-flow:has(.case-flow__tag--after) {
border-left-color: #22C55E;
background: rgba(34, 197, 94, 0.06);
}
.cases__story .case-flow__tag {
display: inline-block;
margin-bottom: var(--space-2);
font-size: 11px;
letter-spacing: 0.16em;
}
.cases__story .case-flow p {
font-size: clamp(14px, 1.1vw, 16px);
line-height: 1.6;
color: rgba(248, 250, 252, 0.88);
}
/* Les quatre chiffres en 2 x 2 dans leur colonne — 2026-08-14.
auto-fit donnait 3 + 1 a 1440 : trois chiffres sur une ligne et le quatrieme
seul dessous. Quatre elements se divisent par deux, pas par trois. */
@media (min-width: 62rem) {
.cases__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* La derniere section avant le pied de page respire davantage au-dessus de son
titre — 2026-08-14, demande de Gabriel. Le badge « > connect · ASHA CSIRT
7×24 » qui vient d'en partir occupait cet espace : sans lui le titre montait
se coller au bord haut de l'affiche. */
/* La marge haute du CTA final, sur LES TROIS pages qui en portent un. Elle
avait ete posee pour la home seule, ou le retrait du badge laissait le titre
monter contre le bord de l'affiche ; metodologia vient de perdre le sien pour
la meme raison, et nosotros n'en a jamais eu mais souffre du meme manque
d'air. Le selecteur passe donc de .final-cta--poster a .final-cta. */
.final-cta .final-cta__inner { padding-top: clamp(28px, 4vw, 72px); }
/* ══════════════════════════════════════════════════════════════════════════
HEADER ET PIED DE PAGE SUR FOND BLANC — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Demande de Gabriel. Les deux barres passent du noir au sol clair, la
navigation se centre, et le bouton « Contáctenos » quitte le header.
VÉRIFIÉ AVANT D'ÉCRIRE, parce que c'est exactement là que ce genre de
bascule casse : le logo `logo-asha.png` mesure 76/255 de luminance moyenne
sur ses pixels opaques. Il est SOMBRE, il tient donc sur du blanc — au
contraire des logos partenaires, mesurés entre 138 et 195, qui avaient
demandé une inversion de filtre pour la bande d'alianzas. On ne suppose pas,
on mesure, et la réponse n'est pas la même d'une image à l'autre.
Deux exceptions gardées en sombre, et c'est délibéré : le sous-menu déroulant
et le bloc « bootlog » du pied de page sont des surfaces de second plan qui
se lisent comme des panneaux posés dessus. */
.site-header {
background: color-mix(in srgb, var(--sol-clair) 92%, transparent);
border-bottom: 1px solid rgba(16, 16, 16, 0.10);
}
/* La lueur rouge du logo était faite pour un fond noir ; sur du blanc elle
devient un halo sale autour du lettrage. */
.site-header__logo,
.site-footer__logo { filter: none; }
/* La navigation est centrée sur la PAGE, pas entre ses deux voisins : une
grille 1fr / auto / 1fr la tient au milieu quelle que soit la largeur du
logo à gauche et des boutons à droite. space-between la décalait. */
@media (min-width: 62rem) {
.site-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.site-header__cta { justify-self: end; }
}
.site-header .main-nav__link { color: var(--color-fg-light); }
.site-header .main-nav__link:hover {
color: var(--color-primary-deep);
background: color-mix(in srgb, var(--color-primary) 7%, transparent);
}
.site-header .main-nav__link.is-active {
color: var(--color-primary-deep);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.site-header .lang-switch__btn { color: var(--color-muted-light); }
.site-header .lang-switch__btn.is-active {
color: var(--color-fg-light);
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.site-header .lang-switch__sep { color: rgba(16, 16, 16, 0.28); }
.site-header .btn-secondary {
color: var(--color-fg-light);
border-color: rgba(16, 16, 16, 0.22);
background: transparent;
}
.site-header .btn-secondary:hover {
color: var(--color-primary-deep);
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.site-header .mobile-menu-toggle { color: var(--color-fg-light); }
/* ── Le pied de page ──────────────────────────────────────────────────── */
.site-footer {
background: var(--sol-clair);
border-top: 1px solid rgba(16, 16, 16, 0.10);
color: var(--color-fg-light);
}
.site-footer__col h3 { color: var(--color-fg-light); }
.site-footer__brand-text,
.site-footer__coverage,
.site-footer__contact,
.site-footer__contact a { color: var(--color-muted-light); }
.site-footer__contact a:hover { color: var(--color-fg-light); }
.site-footer__list a { color: var(--color-fg-light); }
.site-footer__bottom { border-top-color: rgba(16, 16, 16, 0.10); }
.site-footer__bottom,
.site-footer__bottom a { color: var(--color-muted-light); }
/* Les deux sceaux ISO mesurent 215 et 216 de luminance : ils portent un fond
blanc cuit. Sur le sol clair ils se fondraient sans le liseré qui les
detoure. FIRST, lui, mesure 59 et n'en a pas besoin — on le donne quand meme
aux trois, pour que la rangee reste une rangee. */
.site-footer__badges img {
background: #FFFFFF;
border: 1px solid rgba(16, 16, 16, 0.12);
}
/* Le rouge des liens sur les deux barres claires. --color-primary y plafonne a
3,87:1 (header) et 4,62 (pied de page) pour un seuil de 4,5 a 14 px : le
premier echoue, le second passe sans marge. La variante deep rend 5,51 et
6,58. Mesure faite sur les PIXELS RENDUS, pas sur les valeurs declarees —
la pastille de l'entree active melange 10 % de rouge au fond, ce qu'aucun
calcul sur les tokens seuls n'aurait vu. */
.site-footer__contact-cta { color: var(--color-primary-deep) !important; }
.site-footer__list a:hover,
.site-footer__bottom a:hover,
.site-footer__contact a:hover { color: var(--color-primary-deep); }
.site-footer__col h3 { color: var(--color-fg-light); }
/* ══════════════════════════════════════════════════════════════════════════
METODOLOGIA : LES SOLS DE LA HOME — 2026-08-14
══════════════════════════════════════════════════════════════════════════
.method peint son fond avec --band-bg, pas avec background-color : la règle
générale des sols (l.9852) ne l'atteint donc pas, elle serait écrasée par
`background: var(--band-bg)`. C'est la variable qu'il faut viser, pas la
propriété. Trois lignes suffisent, et le reste de la bande — encre, filets,
halo — suit tout seul puisqu'il dérive lui aussi de ces variables. */
.method[data-sol="0"] { --band-bg: var(--sol-0); }
.method[data-sol="1"] { --band-bg: var(--sol-1); }
.method[data-sol="2"] { --band-bg: var(--sol-2); }
/* La barre collante des six méthodologies était en #101010 écrit en dur, une
valeur d'avant l'échelle noire. Elle se cale sur sol-1, comme le menu de la
home, et ses masques de bord avec — écrits eux aussi en dur au même endroit,
ils laissaient un rectangle plus clair aux extrémités dès que le fond
changeait. */
.subnav { background: color-mix(in srgb, var(--sol-1) 94%, transparent); }
.subnav__inner::before {
background: linear-gradient(90deg, var(--sol-1) 0%, color-mix(in srgb, var(--sol-1) 0%, transparent) 100%);
}
.subnav__inner::after {
background: linear-gradient(270deg, var(--sol-1) 0%, color-mix(in srgb, var(--sol-1) 0%, transparent) 100%);
}
/* ══════════════════════════════════════════════════════════════════════════
LE HEADER REVIENT AU SOMBRE — 2026-08-14, demande de Gabriel
══════════════════════════════════════════════════════════════════════════
Le pied de page RESTE clair : il n'a demandé que le header.
Ce qui reste de la passe blanche, parce que ce sont deux autres demandes :
la hauteur portée à 88 px et la navigation centrée par la grille. */
.site-header {
background: rgba(16, 16, 16, 0.85);
border-bottom: 1px solid var(--color-border);
}
.site-header .main-nav__link { color: var(--color-fg); }
.site-header .main-nav__link:hover {
color: var(--color-primary-lift);
background: rgba(220, 38, 38, 0.08);
}
.site-header .main-nav__link.is-active {
color: var(--color-primary-lift);
background: rgba(220, 38, 38, 0.08);
}
.site-header .lang-switch__btn { color: var(--color-muted); }
.site-header .lang-switch__btn.is-active {
color: var(--color-fg);
background: rgba(220, 38, 38, 0.18);
}
.site-header .lang-switch__sep { color: rgba(248, 250, 252, 0.32); }
.site-header .btn-secondary {
color: var(--color-fg);
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.03);
}
.site-header .btn-secondary:hover {
color: var(--color-fg);
border-color: var(--color-primary);
background: rgba(220, 38, 38, 0.12);
}
.site-header .mobile-menu-toggle { color: var(--color-fg); }
/* La lueur rouge du logo revient AVEC le fond sombre : elle était faite pour
lui. Le logo du pied de page, lui, reste sans filtre — il est sur du clair. */
.site-header__logo { filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.25)); }
/* .theme-steel peint un degrade #171717 -> #1A1A1A en !important, une valeur
d'avant l'echelle noire : elle se glisse ENTRE sol-1 et sol-2 et annule la
frontiere (1,081 mesure). C'est la faute nommee ailleurs dans ce fichier —
l'echelle monte, elle ne s'intercale pas.
Neutralise pour LA SEULE section d'acreditaciones : theme-steel sert encore
cinq fois sur nosotros.html, ou l'alternance est differente et ou personne
n'a demande d'alignement. */
#acreditaciones.theme-steel { background: var(--sol-0) !important; }
/* La ligne de rôle de ZeroTrust prend la variante claire du violet : c'est le
seul des six personas qui échouait une fois sa bande passée sur fond sombre.
Mesuré sur les six : ASHA 5,58 · ZeroTrust 4,07 · NGSOC 17,03 · CSIRT 6,63 ·
CTEM 7,49 · GRC 7,07. On corrige le cas, pas la règle. */
.method[data-persona="zerotrust"] .method__role { color: var(--color-zerotrust-soft); }
/* ══════════════════════════════════════════════════════════════════════════
LE PLATEAU « SERVICIOS TÉCNICOS » PREND LA COULEUR DE SA MÉTHODOLOGIE
══════════════════════════════════════════════════════════════════════════
2026-08-14, demande de Gabriel, captures a l'appui : le grand plateau blanc
doit adopter le style du volet de #soluciones sur la home, dans la couleur du
persona.
CE N'ETAIT PAS UN RESTE DES BANDES CLAIRES. .method--dark declarait
explicitement --plate-bg: var(--color-bg-light), avec une mesure a l'appui :
« sur un aplat un cran plus sombre, les six encres tombaient a 4,31-4,35:1,
sous le seuil AA ». Ce plateau clair etait donc un choix, pas un oubli, et le
remplacer oblige a REPRENDRE cette mesure — c'est fait plus bas.
LA BASCULE TIENT EN CINQ VARIABLES, parce que tout le bloc en derive : le
chiffre, le libelle, les puces, le filet, le detail depliant. On ne touche a
aucune regle de mise en page.
--plate-ink DOIT CHANGER DE FAMILLE, et c'est le piege. Il valait
--persona-ink, l'encre calibree pour un aplat CLAIR. Sur un aplat sombre il
faut --persona-lift. Garder l'ancienne aurait donne du sombre sur du sombre
sans qu'aucune regle ne paraisse fausse. */
.method--dark {
--plate-bg:
linear-gradient(180deg,
color-mix(in srgb, var(--persona) 14%, transparent),
color-mix(in srgb, var(--persona) 5%, transparent)),
var(--color-surface);
--plate-fg: var(--color-fg);
--plate-muted: var(--color-muted);
--plate-rule: color-mix(in srgb, var(--persona) 34%, transparent);
--plate-ink: var(--persona-lift);
}
/* L'ombre portee etait faite pour une carte claire posee sur du sombre. Une
carte sombre sur du sombre ne se detache pas par une ombre, elle se detache
par sa bordure teintee — celle-ci la porte deja. */
.method__proof { box-shadow: none; }
/* « Ver el detalle » : 11,5 px, donc seuil 4,5. Sur le plateau devenu sombre,
deux encres persona sur six passent en dessous — mesure des six : ASHA 3,76 ·
ZeroTrust 3,58 · NGSOC 11,49 · CSIRT 5,83 · CTEM 5,05 · GRC 6,21.
Ce sont les deux memes qui avaient deja besoin d'une variante claire ailleurs
sur cette page : le rouge de marque et le violet. On leur donne la leur, on
ne touche pas aux quatre autres. Le grand chiffre du plateau, lui, est a
44 px : son seuil est de 3 et il passe avec la couleur pleine. */
.method[data-persona="asha"] .method__disclose-toggle span { color: var(--color-primary-soft); }
.method[data-persona="zerotrust"] .method__disclose-toggle span { color: var(--color-zerotrust-soft); }
/* ══════════════════════════════════════════════════════════════════════════
LE VOLET MASQUÉ OCCUPAIT ENCORE SA PLACE — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Défaut signalé par Gabriel : « el caso de Ecuador esta muy bien presentado,
el de Mexico no ». Mesuré, la cause n'était pas dans le cas Mexico mais dans
les deux : le volet CACHÉ gardait 412 px de hauteur, à y=538 pour l'un et
y=950 pour l'autre. D'où un trou de 430 px au-dessus du contenu de Mexico.
L'attribut hidden n'est qu'un `display: none` de la feuille de l'agent
utilisateur : la moindre règle d'auteur qui pose un display le bat. Ma règle
`@media (min-width: 62rem) { .cases__pane { display: grid } }` le battait
donc à toutes les largeurs de bureau, et le JS avait beau poser hidden, rien
ne disparaissait — il ne restait que le fondu, sur deux volets superposés
dans le flux.
La même règle est posée sur le panneau de #soluciones, qui a exactement le
même montage et où le piège n'attendait qu'un display pour se déclencher. */
.cases__pane[hidden],
.solpanel__pane[hidden] { display: none !important; }
/* Le chiffre du cas Mexico est une FOURCHETTE, « −30-40 », et non un nombre :
à 77,76 px dans une colonne de 298 il se coupait en « −30- » puis « 40 »,
avec le signe % rejeté à droite. Mesure, pas impression.
Deux corrections : il ne se coupe plus, et le corps de la variante « lead »
descend pour que la fourchette tienne sur sa ligne. Le grand corps était
calibré sur un nombre de deux ou trois caractères, pas sur six. */
.case-fig__num { white-space: nowrap; }
.case-fig--lead .case-fig__num { font-size: clamp(38px, 3.6vw, 62px); }
@media (min-width: 62rem) {
.case-fig--lead .case-fig__num { font-size: clamp(42px, 4vw, 68px); }
}
/* Un seul chiffre en face d'un texte pleine hauteur : la colonne de droite
restait vide sur 250 px. Ce n'est pas un defaut de reglage, c'est la donnee —
Ecuador a quatre metriques, Mexico une. On ne fabrique pas de chiffres pour
remplir : on donne a celui qui existe la place qu'il merite, centre dans sa
colonne et en pleine hauteur, pour qu'il se lise comme LE resultat du cas et
non comme un item esseule en haut a droite. */
.cases__figures:has(> :only-child) {
align-content: center;
min-height: 100%;
}
@media (min-width: 62rem) {
.cases__figures:has(> :only-child) .case-fig__num { font-size: clamp(52px, 5vw, 84px); }
.cases__figures:has(> :only-child) .case-fig__label {
font-size: 12px;
max-width: 26ch;
}
}
/* ══════════════════════════════════════════════════════════════════════════
AUCUN TITRE AU-DELÀ DE DEUX LIGNES — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Demande de Gabriel : « el primer titulo deberia de ir en solo dos lineas
jamas en tres, lo mismo en todos los titulos de todas las secciones ».
CE QUI GOUVERNE LE NOMBRE DE LIGNES, C'EST LA MESURE, PAS LE CORPS. Un
solveur a cherché par dichotomie la taille à laquelle chaque titre tiendrait
en deux lignes : il descendait jusqu'à 10 px sans jamais y arriver. La raison
est que les max-width sont écrits en `ch`, une unité qui SUIT le corps.
Réduire la police rétrécit la mesure d'autant et le nombre de lignes ne bouge
pas. C'est la mesure qu'il faut ouvrir, pas le corps qu'il faut baisser.
Chaque valeur est le nombre de caractères du plus long titre de sa classe,
divisé par deux, plus une marge de césure :
.hero__title 35 car -> 20ch
.section-title 55 car -> 30ch
.final-cta__title 96 car -> 52ch (nosotros, le plus long)
.page-hero__title 125 car -> 66ch (bolsa-de-trabajo)
POUR LES DEUX PLUS LONGS la mesure seule ne suffit pas : 66ch à 60 px font
plus de 2 000 px, au-delà de toute page. Leur corps descend donc aussi, et
c'est un arbitrage assumé — un titre de 125 caractères ne tient pas en deux
lignes à la taille d'un titre de 35. */
.hero__title { max-width: 20ch; }
.section-title { max-width: 30ch; }
.section-head { max-width: min(100%, 1000px); }
.final-cta__title,
.final-cta--poster .final-cta__title { max-width: 52ch; }
.page-hero__title { max-width: 66ch; }
.page-hero__title { font-size: clamp(26px, 3.1vw, 44px); }
.final-cta__title { font-size: clamp(26px, 2.9vw, 42px); }
/* Suite : la mesure du TITRE ne sert a rien si son CONTENEUR est plus etroit.
Mesure : .hero__title annoncait max-width 1148px et se rendait a 680, les
.section-title a 724-805 pour un max de 1189. C'est le conteneur qui coupe,
et il fallait le voir avant d'accuser le titre.
On ouvre donc les conteneurs, et on remonte la specificite la ou une regle a
deux classes gagnait (.page-hero--league .page-hero__title, l.2678). */
.page-hero__inner { max-width: min(100%, 1240px); }
.page-hero--league .page-hero__title,
.page-hero .page-hero__title { font-size: clamp(26px, 3.1vw, 44px); max-width: 66ch; }
.section-head, .section-head--left { max-width: min(100%, 1060px); }
.hero .hero__title { max-width: 22ch; }
.hero__copy { max-width: min(100%, 1100px); }
.final-cta__inner .final-cta__title,
.final-cta--poster .final-cta__title { max-width: 52ch; font-size: clamp(26px, 2.9vw, 42px); }
/* Derniere passe : ce sont les CONTENEURS qui coupaient, chacun le sien.
Chaine des largeurs relevee element par element :
.hero__title 680px <- .hero__col-left max-width: 680px
#industrias h2 724px <- premiere colonne de la grille .industries__head
.final-cta__title 614px <- .final-cta__inner max-width: 760px
On les ouvre juste assez pour deux lignes, pas plus : un titre qui traverse
toute la page ne se lit pas mieux qu'un titre sur trois lignes. */
.hero__col-left { max-width: min(100%, 860px); }
.industries__head > div:first-child { max-width: min(100%, 900px); }
.final-cta__inner { max-width: min(100%, 1000px); }
/* text-wrap: balance repartit les lignes au lieu de laisser un mot orphelin.
Il ne change pas le NOMBRE de lignes quand la mesure est trop etroite, mais
il evite le cas frequent ou une troisieme ligne ne porte qu'un mot. */
.hero__title, .page-hero__title, .section-title, .final-cta__title {
text-wrap: balance;
}
/* Le dernier cran, et c'est un ARBITRAGE, pas un reglage. Quatre titres
resistaient encore : ce sont les quatre phrases les plus longues du site
(49 a 125 caracteres) dans des conteneurs deja ouverts au maximum
raisonnable. A mesure egale, deux lignes s'obtiennent alors en baissant le
corps, et rien d'autre.
Calcul pour le pire cas : « Vasta experiencia en sectores regulados y
criticos », 49 caracteres dans 724 px de colonne. Deux lignes demandent
25 caracteres par ligne, soit un corps d'au plus 55 px ; il etait a 56.
On descend le plafond des titres de section a 48, celui des heros de page a
40. Le texte reste grand — c'est le titre d'une section, pas un paragraphe —
mais il tient la promesse des deux lignes. */
.section-title { font-size: clamp(26px, 3.3vw, 48px); }
.page-hero--league .page-hero__title,
.page-hero .page-hero__title { font-size: clamp(24px, 2.8vw, 40px); }
.final-cta__inner .final-cta__title,
.final-cta--poster .final-cta__title { font-size: clamp(24px, 2.6vw, 38px); }
/* Le dernier titre de bureau qui resistait : celui du CTA de nosotros, 96
caracteres. Deux lignes demandent 48 caracteres par ligne ; dans les 854 px
que lui laisse son bloc, cela plafonne le corps a 32 px. */
.final-cta__inner .final-cta__title,
.final-cta--poster .final-cta__title { font-size: clamp(23px, 2.2vw, 32px); }
/* ── SOUS 600 PX, LA REGLE NE PEUT PAS TENIR, ET C'EST DE L'ARITHMETIQUE ──
A 320 px de large, un conteneur fait 280 px. Deux lignes y portent une
cinquantaine de caracteres a 26 px. Or les titres du site font de 44 a 125
caracteres : « Garantice la proteccion continua de su empresa con nuestra
estrategia unificada » en compte 125, il lui faudrait cinq lignes a 26 px,
ou un corps de 10 px pour en tenir deux. Aucun reglage ne rend cela lisible.
On ne triche donc pas avec un font-size minuscule sur mobile : les titres y
prennent le nombre de lignes que leur texte exige. La promesse des deux
lignes est tenue de 900 a 1280 px, ou elle se verifie a 0 titre. */
/* Le fondu du volet, sur le meme motif que celui des casos. */
.solpanel--vivant .solpanel__pane {
opacity: 0;
transform: translateY(8px);
transition: opacity 340ms var(--ease-out), transform 340ms var(--ease-out);
}
.solpanel--vivant .solpanel__pane.is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.solpanel--vivant .solpanel__pane { transition: none; transform: none; }
}
/* ══════════════════════════════════════════════════════════════════════════
LES DEUX THÈMES MAISON RENDENT LEUR SOL À L'ÉCHELLE — 2026-08-14
══════════════════════════════════════════════════════════════════════════
.theme-deep-slate et .theme-steel peignaient un dégradé en dur, en
!important : #0B0B0B->#101010 pour l'un, #171717->#1A1A1A pour l'autre. Ces
valeurs s'intercalent entre sol-0, sol-1 et sol-2 au lieu de s'y poser, et
c'est ce qui rendait quatre frontières sur huit invisibles sur nosotros.
ON NE SUPPRIME PAS LES THÈMES, on leur retire le SOL. Ce qu'ils apportent
d'autre — la lueur radiale au sommet, la grille en ::before, le traitement
des cartes — reste : c'est de la texture, elle se pose sur n'importe quel
barreau. Seul le dégradé de fond part, et data-sol reprend la main.
Le !important d'origine oblige à répondre par un !important : c'est la seule
fois de ce fichier où j'en écris un sans qu'il soit déjà là, et c'est pour
défaire celui d'en face, pas pour en gagner un. */
main > section.theme-deep-slate,
main > section.theme-steel {
background-image: radial-gradient(ellipse 100% 60% at 50% 0%,
color-mix(in srgb, var(--color-primary) 5%, transparent), transparent 55%) !important;
background-color: transparent !important;
}
main > section.theme-steel {
background-image: radial-gradient(ellipse 100% 50% at 50% 0%,
rgba(148, 163, 184, 0.06), transparent 55%) !important;
}
/* data-sol peut alors peindre : il pose une background-color, que les règles
ci-dessus laissent passer en la mettant a transparent sur le raccourci. */
main > section.theme-deep-slate[data-sol="0"],
main > section.theme-steel[data-sol="0"] { background-color: var(--sol-0) !important; }
main > section.theme-deep-slate[data-sol="1"],
main > section.theme-steel[data-sol="1"] { background-color: var(--sol-1) !important; }
main > section.theme-deep-slate[data-sol="2"],
main > section.theme-steel[data-sol="2"] { background-color: var(--sol-2) !important; }
/* Le quatrieme cas de la serie, manquant jusqu'au 2026-08-15. Les sols 0, 1 et
2 etaient couverts, pas « clair » : en passant trayectoria au clair sa
section n'a recu AUCUN fond et est restee transparente. L'encre foncee des
legendes se retrouvait alors sur le sol sombre du dessous, a 2,77:1.
Le degrade decoratif de theme-steel reste pose par-dessus. */
main > section.theme-steel[data-sol="clair"],
/* deep-slate a exactement le meme trou que steel : les sols 0, 1 et 2 sont
couverts, pas « clair ». Sans cette ligne, certificaciones se serait
retrouvee transparente comme trayectoria l'a ete avant elle. */
main > section.theme-deep-slate[data-sol="clair"] { background-color: var(--sol-clair) !important; }
/* ══════════════════════════════════════════════════════════════════════════
LES CARTES DE NOSOTROS SE DÉTACHENT DE LEUR SOL — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Mesuré après la pose des sols : sur sol-2, deux familles de cartes tombaient
sous le seuil de bande.
.about-card #2B2B2B sur #212121 = 1,137:1 (seuil 1,14)
.leader-card #272828 sur #212121 = 1,085:1
Ce n'est pas un réglage manquant, c'est le corollaire du passage à sol-2 :
--color-surface était calibré pour se détacher de sol-0 et de sol-1, pas du
barreau juste au-dessous de lui. Le système a déjà la réponse —
--color-surface-elev, un cran plus haut — et c'est exactement à ça qu'elle
sert : la carte monte quand son sol monte. L'échelle monte, elle ne
s'intercale pas.
Mesure de la parade : #383838 sur #212121 = 1,353:1. */
main > section[data-sol="2"] .about-card,
main > section[data-sol="2"] .leader-card {
background: var(--color-surface-elev);
}
/* ══════════════════════════════════════════════════════════════════════════
LA GRILLE DES HEROS DE PAGE SE VOIT ENFIN — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Gabriel : « ils ont pas de grille ». Elle existait pourtant en balisage
(.page-hero__bg-grid) et en CSS. Mesure de son amplitude reelle sur les
pixels rendus, sur une ligne au tiers haut :
home 227 niveaux (la grille se lit)
metodologia 0,6 niveau
nosotros 2,3 niveaux
bolsa-de-trabajo 2,3 niveaux
La cause : 0,04 d'alpha multiplie par une opacite de 0,4, soit 0,016
effectif, contre 0,07 x 0,55 = 0,0385 sur la home. Deux fois et demie plus
faible, donc sous le seuil de perception sur un fond noir.
On aligne sur la home. Le masque radial reste : c'est lui qui empeche la
grille de courir jusqu'aux bords. */
.page-hero__bg-grid {
background-image:
linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
opacity: 0.55;
/* LE MASQUE AUSSI, et c'est le vrai sujet. Il etait une ELLIPSE CENTREE :
la grille etait donc absente sur les bords, c'est-a-dire A GAUCHE, la ou
vit le texte et ou l'oeil se pose. On avait beau la renforcer, elle restait
invisible la ou on la cherche. La home masque en degrade HORIZONTAL, opaque
du cote du texte : on reprend le sien. */
-webkit-mask-image: linear-gradient(to right, black 0%, black 45%, transparent 82%);
mask-image: linear-gradient(to right, black 0%, black 45%, transparent 82%);
}
/* La bande blanche remonte un peu — 2026-08-14, demande de Gabriel : « un tout
petit peu, mais vraiment juste un tout petit peu ».
PAS PAR LE REMBOURRAGE. Premier essai en baissant padding-bottom : sans
effet, pour deux raisons mesurees. La premiere est que .hero l.8226 en pose
deja un en !important. La seconde, plus interessante : le hero a un
min-height, donc reduire son rembourrage ne le raccourcit pas — le contenu
se repositionne a l'interieur et la bande ne bouge pas d'un pixel.
C'est le min-height qu'il faut toucher, et il est ecrit en 100vh moins un
decalage d'en-tete de 93 px. On porte ce decalage a 117, soit 24 px de moins
pour le hero et autant de gagne pour la bande. */
.hero {
min-height: max(560px, calc(100vh - 117px)) !important;
min-height: max(560px, calc(100svh - 117px)) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
TOUTES LES CARTES REAGISSENT AU SURVOL — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Demande de Gabriel : prendre pour reference les cartes de « Marcos ·
Certificaciones · Partner levels ». Leur geste, releve tel quel a la l.2177 :
transform: translateY(-3px)
border-color: la teinte de la carte, a 55 %
box-shadow: 0 12px 32px rgba(0,0,0,0.35)
transition: all, duree normale, ease-out
INVENTAIRE AVANT D'AGIR. Un balayage des classes reellement presentes dans
les six pages, croise avec les regles :hover du CSS, a montre que la plupart
des cartes en avaient deja un — .about-card, .alliance-card, .cert-card,
.country, .feature-card, .framework, .highlight, .industry-card, .metric,
.partner-level, .practice. CINQ familles n'en avaient aucun, et ce sont
elles que la regle ci-dessous rattrape. Les dizaines d'autres classes sans
survol sont des ENFANTS de cartes (__title, __label, __icon) : leur donner un
etat propre ferait deux animations concurrentes sur le meme geste. */
.leader-card,
.cap,
.support-item,
.method__proof,
.layer {
transition: transform var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);
}
.leader-card:hover,
.cap:hover,
.support-item:hover,
.method__proof:hover,
.layer:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
/* Chacune prend la teinte qu'elle porte deja : le persona pour les bandes de
metodologia, le rouge de marque ailleurs. On n'introduit pas de couleur. */
.leader-card:hover,
.cap:hover,
.support-item:hover {
border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
}
.method__proof:hover {
border-color: color-mix(in srgb, var(--persona, var(--color-primary)) 62%, transparent);
}
.layer:hover {
border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
/* .layer ET .cap NE MONTENT PAS, et c'est voulu apres mesure : les reveals GSAP
leur posent un transform EN STYLE INLINE, qui bat toute regle de feuille.
Leur disputer la propriete ferait clignoter la carte a chaque survol pendant
que l'animation d'apparition tourne encore. Elles gardent donc la bordure et
l'ombre, qui suffisent a repondre au curseur. C'est le meme couplage que la
fiche de la skill signale : les reveals animent le transform, on ne le leur
reprend pas.
Le mouvement s'efface pour qui l'a demande. */
@media (prefers-reduced-motion: reduce) {
.leader-card, .cap, .support-item, .method__proof, .layer { transition: none; }
.leader-card:hover, .cap:hover, .support-item:hover,
.method__proof:hover, .layer:hover { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════════════
#SOLUCIONES : UNE IMAGE PAR OPTION, EN FOND DE SECTION, PLEINEMENT VISIBLE
══════════════════════════════════════════════════════════════════════════
2026-08-14. Gabriel : l'image en fond de toute la section, a pleine opacite,
et une image DIFFERENTE par option.
DEUX CALQUES QUI SE RELAIENT, et c'est ce qui permet le fondu. Une seule
couche ne peut pas fondre d'une image vers une autre : le navigateur
interpole des couleurs et des longueurs, pas des fichiers. On empile donc
les six images en six pseudo-plans — impossible avec deux pseudo-elements —
ou, plus simplement, on pose LES SIX en background-image du meme element et
on ne fait varier que leur OPACITE respective. C'est cette seconde voie :
six couches, une seule visible a la fois, chacune avec sa transition.
PLEINE OPACITE, DONC UN VOILE QUI TRAVAILLE. Une photo a 100 % sous du texte
blanc n'est pas lisible : la lisibilite est reportee sur le voile, qui est
un degrade et non un aplat, pour que l'image reste franche la ou il n'y a
rien d'ecrit. Contrastes verifies apres coup sur les six volets. */
#soluciones { position: relative; isolation: isolate; }
#soluciones .solpanel__fond {
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
}
#soluciones .solpanel__fond span {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 520ms var(--ease-out);
}
/* 1 -> 0,45 le 2026-08-14 : a pleine opacite l'image concurrencait le texte
et il fallait un voile tres dense pour la rattraper, ce qui revenait a la
masquer par l'autre bout. A 0,45 elle se voit franchement et le voile peut
s'allager d'autant. */
#soluciones .solpanel__fond span.is-on { opacity: 0.45; }
/* LES SIX FONDS PASSENT AU JEU v2 le 2026-08-17 : photographies produites pour
cette section, une par methode, dans une serie coherente (16:9, navy dominant,
un seul accent rouge par image, personnages de dos et aucun visage
identifiable, aucun caractere a l'ecran).
DEUX POINTS QUE CA REGLE. La question de licence qui restait ouverte sur les
fonds precedents n'a plus d'objet : ces images sont produites pour le site.
Et la regle du projet sur les images sans texte est tenue, verifiee au zoom
100 % sur les deux vues les plus exposees, le mur du SOC et l'ecran du conseil.
LE CHEMIN CHANGE (v2/) ET C'EST OBLIGATOIRE : /assets/* est servi en immutable
pour un an, un fichier de meme nom n'aurait jamais ete rafraichi.
#razones sur nosotros continue de pointer l'ancien jeu — sa demande portait
sur #soluciones. */
#soluciones .solpanel__fond span[data-bg="ctem"] { background-image: url('../assets/images/bg/soluciones/v2/ctem.webp'); }
#soluciones .solpanel__fond span[data-bg="ngsoc"] { background-image: url('../assets/images/bg/soluciones/v2/ngsoc.webp'); }
#soluciones .solpanel__fond span[data-bg="csirt"] { background-image: url('../assets/images/bg/soluciones/v2/csirt.webp'); }
#soluciones .solpanel__fond span[data-bg="zerotrust"] { background-image: url('../assets/images/bg/soluciones/v2/zerotrust.webp'); }
#soluciones .solpanel__fond span[data-bg="grc"] { background-image: url('../assets/images/bg/soluciones/v2/grc.webp'); }
#soluciones .solpanel__fond span[data-bg="bridge"] { background-image: url('../assets/images/bg/soluciones/v2/bridge.webp'); }
/* Le voile porte toute la lisibilite, puisque l'image est a pleine opacite.
Il est plus dense a gauche, sous la liste et le titre, et s'ouvre a droite
ou le volet a son propre fond. */
#soluciones::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg,
color-mix(in srgb, var(--sol-2) 82%, transparent) 0%,
color-mix(in srgb, var(--sol-2) 68%, transparent) 46%,
color-mix(in srgb, var(--sol-2) 34%, transparent) 100%),
linear-gradient(180deg,
color-mix(in srgb, var(--sol-2) 34%, transparent),
color-mix(in srgb, var(--sol-2) 10%, transparent) 40%,
color-mix(in srgb, var(--sol-2) 46%, transparent));
}
@media (prefers-reduced-motion: reduce) {
#soluciones .solpanel__fond span { transition: none; }
}
/* ══════════════════════════════════════════════════════════════════════════
« POR QUÉ PREFERIRNOS » SUR LE MOTIF DE LA RÉFÉRENCE — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Gabriel a fourni une capture de l'ancien site : grande illustration au trait
rouge en haut de carte, titre centré, texte centré, carte généreuse.
PORTÉE : la seule section « 04 · Por qué preferirnos ». La classe
.about-card sert AUSSI aux trois cartes de « 07 · Nuestro modelo » — mon
premier essai les emportait toutes les neuf. D'où le modificateur sur le
conteneur, qui borne exactement ce que Gabriel a nommé.
CE QUI EST REPRIS : la structure. L'icône passe d'une pastille de 24 px à une
illustration de ~96 px, tout se centre, la carte respire.
CE QUI NE L'EST PAS, ET POURQUOI : le fond blanc. La référence vient du site
à fond clair ; la page est passée à l'échelle noire ce matin, et six cartes
blanches y feraient six trous. C'est la structure qui fait la ressemblance,
pas la couleur du papier. Le blanc littéral, s'il est voulu, est une
déclaration de plus.
Les illustrations de la référence sont des dessins sur mesure que nous
n'avons pas. Nos six icônes de sprite SONT du trait : agrandies et passées au
rouge, elles tiennent le même rôle. */
.about-cards--illustre .about-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-4);
padding: clamp(28px, 3vw, 44px) clamp(22px, 2.4vw, 32px);
}
.about-cards--illustre .about-card__icon-wrap {
width: clamp(72px, 7vw, 96px);
height: clamp(72px, 7vw, 96px);
display: grid;
place-items: center;
padding: 0;
background: none;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.about-cards--illustre .about-card__icon-wrap svg {
width: 100%;
height: 100%;
color: var(--color-primary-lift);
stroke-width: 1.2;
}
.about-cards--illustre .about-card__title {
font-size: clamp(18px, 1.5vw, 22px);
font-weight: 700;
}
.about-cards--illustre .about-card__desc {
max-width: 34ch;
margin-inline: auto;
line-height: 1.65;
}
/* Le centrage des cartes illustrees, avec la specificite qu'il faut : une
regle a deux classes posait align-items: flex-start et gagnait sur la mienne.
Mesure du decalage avant correction : l'icone tombait a 134 px du centre de
sa carte, le titre a 105. */
.about-cards.about-cards--illustre .about-card {
align-items: center;
justify-items: center;
}
.about-cards.about-cards--illustre .about-card__icon-wrap { margin-inline: auto; }
/* align-items ne cede pas : une regle adverse le tient a flex-start et je ne
la battrai pas sans surenchere de specificite. On passe donc par l'enfant —
align-self: stretch fonctionne quel que soit l'align-items du parent, et
text-align: center fait le reste. Mesure avant : le titre tombait a 105 px
du centre de sa carte. */
.about-cards--illustre .about-card > * { align-self: stretch; }
.about-cards--illustre .about-card__icon-wrap { align-self: center; }
/* ══════════════════════════════════════════════════════════════════════════
LE CORRIDOR DE PARTICULES SUR LES SIX BANDES — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Le test sur GRC est valide, on l'etend. Ce qu'on a appris en chemin et qui
vaut pour les six :
1. EN FOND DE BANDE, pas de figure ni de pseudo-element. Un ::after a insets
negatifs se resolvait en une lamelle de 264 x 14 px ; un fond sur la
figure perdait l'essentiel de l'image, la figure etant un portrait de
456 x 509 et l'image une scene 16:9.
2. LE NOIR DISPARAIT PAR MELANGE. background-blend-mode: screen rend les
pixels noirs neutres : seules les particules eclairent, et le fond reste
exactement --band-bg partout ailleurs. Ni masque ni opacite.
3. LA TEINTE EST TOURNEE A LA SOURCE. Un filter CSS s'appliquerait a tout le
contenu de la section. Six fichiers de 67 a 75 Ko, 431 Ko au total, contre
5,2 Mo pour le PNG d'origine — soit moins que le seul visuel anime de la
bande NGSOC.
4. L'ORIENTATION SUIT LE PERSONNAGE. Trois bandes ont leur visuel a gauche
(asha, ctem, ngsoc) et trois a droite (csirt, zerotrust, grc). Le foyer du
corridor doit tomber DERRIERE le personnage : les trois premieres images
sont donc miroitees a la source, et leur voile est pose de l'autre cote.
5. NGSOC EST EN ARGENT. Une rotation de teinte ne fait pas du gris : ce
persona recoit en plus une desaturation a la source.
6. LE VOILE PORTE LA LISIBILITE. Sans lui la luminance du fond variait d'un
facteur 11,5 sous le lede. Il eteint le champ du cote du texte et le
laisse entier du cote du personnage. */
.method--dark[data-persona] {
background-size: cover;
background-repeat: no-repeat;
background-blend-mode: normal, screen;
background-color: var(--band-bg);
}
.method--dark.method--media-end[data-persona] {
background-position: center, 88% 46%;
background-image:
linear-gradient(90deg,
var(--band-bg) 0%,
var(--band-bg) 46%,
color-mix(in srgb, var(--band-bg) 52%, transparent) 60%,
transparent 76%),
var(--corridor);
}
.method--dark.method--media-start[data-persona] {
background-position: center, 12% 46%;
background-image:
linear-gradient(270deg,
var(--band-bg) 0%,
var(--band-bg) 46%,
color-mix(in srgb, var(--band-bg) 52%, transparent) 60%,
transparent 76%),
var(--corridor);
}
/* ── LE CORRIDOR SUIT LE COTE DU PERSONNAGE 2026-08-22 ─────────────
══════════════════════════════════════════════════════════════════════════
Gabriel, deux fois : « l'embleme a disparu dans ZeroTrust et CTEM ». Ma
premiere correction reglait le mauvais parametre, et le defaut est reste.
CE QU'IL FALLAIT COMPRENDRE. Chaque image de corridor porte une sphere
lumineuse d'un cote et un couloir de particules qui s'en echappe. Sur les
bandes d'origine, cette sphere se trouve DERRIERE LE PERSONNAGE : elle
l'aureole, et le couloir file vers le texte. Ce n'est donc pas la position
du cadrage qu'il faut rendre a l'image, c'est l'IMAGE qu'il faut mettre du
cote du personnage.
Mesure des six fichiers, en cherchant leur zone la plus lumineuse : asha,
ctem et ngsoc ont leur sphere a 12 % ; csirt, grc et zerotrust a 82 %. Ces
images ont ete fabriquees pour le cote que leur bande occupait alors.
L'echange de ctem et zerotrust, fait pour aligner l'ordre sur la home, a
donc mis chaque sphere du cote OPPOSE a son personnage.
Cadrer autrement ne pouvait pas suffire : la sphere est peinte dans le
fichier, aucun background-position ne la deplace vers l'autre bord. Les deux
images sont donc RETOURNEES horizontalement, ce qui remet la sphere derriere
son personnage et le couloir vers le texte, sans toucher aux couleurs. Le
miroir est fait a la generation et non en CSS : un fond ne se retourne pas
sans passer par un pseudo-element, qui aurait ajoute une couche a une bande
qui en porte deja deux. */
.method--dark[data-persona="asha"] { --corridor: url('../assets/images/bg/corridor/asha.webp'); }
/* ctem et zerotrust pointent leur corridor RETOURNE depuis le 2026-08-22 :
l'echange des deux bandes a mis leur sphere du cote oppose au personnage.
La declaration est modifiee ICI et non ajoutee plus haut : a specificite
egale c'est la derniere qui gagne, et deux lignes posees au-dessus de
celles-ci n'auraient rien fait — essaye, mesure, corrige. */
.method--dark[data-persona="ctem"] { --corridor: url('../assets/images/bg/corridor/ctem-mirror.webp'); }
.method--dark[data-persona="ngsoc"] { --corridor: url('../assets/images/bg/corridor/ngsoc.webp'); }
.method--dark[data-persona="csirt"] { --corridor: url('../assets/images/bg/corridor/csirt.webp'); }
.method--dark[data-persona="zerotrust"] { --corridor: url('../assets/images/bg/corridor/zerotrust-mirror.webp'); }
.method--dark[data-persona="grc"] { --corridor: url('../assets/images/bg/corridor/grc.webp'); }
@media (max-width: 61.99rem) {
.method--dark.method--media-end[data-persona],
.method--dark.method--media-start[data-persona] {
background-position: center, center 62%;
background-image:
linear-gradient(180deg, var(--band-bg) 0%, var(--band-bg) 38%, transparent 66%),
var(--corridor);
}
}
/* ══════════════════════════════════════════════════════════════════════════
LES TROIS CTA FINAUX A LA MEME DIMENSION — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Gabriel : celui de nosotros est le bon, les trois doivent lui ressembler, la
carte centrale comme la section autour.
MESURE AVANT, element par element :
nosotros section 700 carte 304 titre 67 · actions 56 · sceaux 17
index section 700 carte 330 + un lede d'une ligne (28)
metodologia section 788 carte 420 + un lede de TROIS lignes (84)
Les deux premieres tenaient deja a 700 grace a un min-height ; seule
metodologia le depassait, et son lede en portait les 116 px (84 + 32 de
marge) a lui seul. Il est retire — Gabriel a explicitement autorise a couper
du texte pour tenir la dimension.
LE min-height DE LA CARTE fige ce qui reste : les titres n'ont pas la meme
longueur d'une page a l'autre, et sans lui la carte respirerait differemment
sur chacune. 304 px, la valeur de nosotros. */
.final-cta--poster .final-cta__inner {
/* 304 est la valeur de nosotros a 1440. Mesure sur cinq largeurs : a 1920 les
titres de metodologia et nosotros passent a deux lignes quand celui de la
home tient sur une, et la carte y demande 310 ; sous 48rem, ou tous les
titres s'allongent, il en faut 372. On prend donc le maximum de chaque
regime plutot qu'une valeur unique qui laisserait un ecart quelque part. */
min-height: 310px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Sous 48rem les titres montent a trois ou quatre lignes et l'ecart entre les
trois cartes atteignait 29 px (340 a 369). Le plancher y suit. */
@media (max-width: 48rem) {
.final-cta--poster .final-cta__inner { min-height: 372px; }
}
/* ══════════════════════════════════════════════════════════════════════════
LES SIX CARTES S'ALIGNENT SUR LE RESTE DE LA PAGE — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Defaut signale par Gabriel. Mesure des bords, element par element, dans un
conteneur utile de 58 a 1382 :
titre 58 .. 1067 aligne
lede 58 .. 1118 aligne
grille des six 146 .. 1359 88 px a gauche, 23 a droite
Elles n'etaient donc pas mal alignees ENTRE ELLES — le controle sur onze
largeurs le confirmait — mais decalees par rapport a TOUT LE RESTE, et de
facon asymetrique par-dessus le marche.
La cause est la grille de .layer : une premiere colonne de 68 px porte le
numero sur son rail, plus 20 de gouttiere, ce qui pousse le corps de 88. Sur
les rangees de texte c'est le dessin voulu ; sur la rangee qui porte les six
cartes, ca desaligne un bloc large de toute la page.
Cette rangee-la passe donc en colonne unique : son numero rejoint le libelle,
et la grille repart du bord du conteneur. Les six autres rangees gardent leur
rail intact. */
.layer--fronts {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
}
.layer--fronts .layer__idx {
justify-self: start;
margin-bottom: var(--space-2);
}
.layer--fronts .layer__body { padding-inline: 0; }
/* Les 23 px qui restaient a droite ne venaient pas du corps mais de .layer
lui-meme, qui porte un padding-right pour eloigner son texte du bord. Sur la
rangee des cartes il n'y a pas de texte a eloigner, seulement une grille qui
doit tomber sur le bord du conteneur comme le titre. */
.layer--fronts { padding-right: 0; }
/* ══════════════════════════════════════════════════════════════════════════
L'ENCRE DU SOL CLAIR — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Gabriel passe « Nuestro modelo » et « Foco en industrias » en fond blanc. Le
site n'avait jusqu'ici AUCUNE section claire portant du texte : la bande de
clients et celle d'alianzas ne montrent que des logos. Toutes les encres
etaient donc calibrees pour du sombre, et la bascule a produit 26 echecs de
contraste mesures — jusqu'a 1,00:1, c'est-a-dire du blanc sur du blanc.
On ne corrige pas cas par cas : on declare l'encre du sol clair une fois, au
niveau de la section, et tout ce qui en herite suit. Les composants qui
portent leur propre couleur (cartes persona, aplats rouges) ne sont pas
touches — ils sont deja opaques et fournissent leur propre fond. */
main > section[data-sol="clair"] {
color: var(--color-fg-light);
--band-fg: var(--color-fg-light);
--band-muted: var(--color-muted-light);
--color-fg: var(--color-fg-light);
--color-muted: var(--color-muted-light);
--color-border: rgba(16, 16, 16, 0.12);
--color-border-strong: rgba(16, 16, 16, 0.22);
}
main > section[data-sol="clair"] .section-title,
main > section[data-sol="clair"] .section-title .split-word,
main > section[data-sol="clair"] .layer__name,
main > section[data-sol="clair"] h3 { color: var(--color-fg-light); }
main > section[data-sol="clair"] .section-lede,
main > section[data-sol="clair"] .layer__note,
main > section[data-sol="clair"] p { color: var(--color-muted-light); }
/* L'accent des titres : le rouge de marque ne vaut que 3,87:1 sur du clair,
la variante deep en rend 6,58. C'est le meme token que le header et le pied
de page ont recu quand ils sont passes au blanc. */
main > section[data-sol="clair"] .section-title .accent,
main > section[data-sol="clair"] .section-title .accent .split-word {
color: var(--color-primary-deep);
}
/* L'eyebrow sur sol clair : voir la regle plus bas, qui est celle qui gagne.
Celle-ci est neutralisee — elle imposait l'aplat rouge plein. */
main > section[data-sol="clair"] .industries__coverage-stat {
color: var(--color-primary-deep);
}
/* Les filets du diagramme et de la grille suivent le sol. */
main > section[data-sol="clair"] .layers::before,
main > section[data-sol="clair"] .layer,
main > section[data-sol="clair"] .layer__body {
border-color: rgba(16, 16, 16, 0.14);
}
/* L'ENCRE CLAIRE NE DOIT PAS ENTRER DANS LES COMPOSANTS QUI ONT LEUR PROPRE
FOND — 2026-08-14. En declarant --color-fg au niveau de la section, je l'ai
fait descendre PARTOUT, y compris dans les six cartes de heros, qui sont des
surfaces sombres opaques : leur encre y est passee au noir, d'ou 1,65:1 sur
les titres et 1,86 sur les puces. Ces composants reprennent donc l'encre du
sombre a leur niveau. C'est le meme principe que le plateau de metodologia :
l'encre suit LE FOND QUI EST DESSOUS, pas celui de la section. */
main > section[data-sol="clair"] .practice,
main > section[data-sol="clair"] .layer--command .layer__body,
main > section[data-sol="clair"] .industry-card {
--color-fg: #F8FAFC;
--color-muted: rgba(203, 213, 225, 0.92);
color: #F8FAFC;
}
main > section[data-sol="clair"] .practice__title,
main > section[data-sol="clair"] .industry-card__title { color: #F8FAFC; }
main > section[data-sol="clair"] .practice__desc { color: rgba(203, 213, 225, 0.92); }
main > section[data-sol="clair"] .practice__chip {
color: rgba(248, 250, 252, 0.94);
border-color: rgba(248, 250, 252, 0.22);
background: rgba(248, 250, 252, 0.06);
}
/* L'EYEBROW SUR SOL CLAIR REPREND LA FORME DES AUTRES — 2026-08-15.
Il etait le seul du site en aplat rouge plein, a angles vifs et sans
padding : sur la home, la pastille de « Nuestro modelo » ne ressemblait a
aucune des sept autres. Il redevient la meme pilule — meme rayon, meme
padding, meme filet rouge — et seule l'encre change, parce qu'elle le doit :
le blanc des sept autres serait illisible sur un fond clair.
Mesure : #475569 sur le voile rouge a 7 % pose sur #F8FAFC rend 6,50:1,
pour un seuil de 4,5 a 12 px gras. */
main > section[data-sol="clair"] > .container .eyebrow,
main > section[data-sol="clair"] .eyebrow {
color: var(--color-muted-light) !important;
background: rgba(220, 38, 38, 0.07) !important;
border: 1px solid rgba(220, 38, 38, 0.42) !important;
border-radius: 9999px !important;
padding: 5px 12px 4px !important;
}
/* Le chiffre de couverture des industries porte le rouge : sur clair il prend
la variante profonde. */
main > section[data-sol="clair"] .industries__coverage-stat {
color: var(--color-primary-deep) !important;
}
/* Les deux derniers echecs du sol clair, et leur cause commune : un fond
TRANSLUCIDE qui etait sombre tant que la section l'etait.
1. Les six cartes de heros ont un fond rgba(23,23,23,0.85). A 85 % sur du
noir il donne du noir ; sur du blanc il donne un gris moyen, et les rangs
persona y tombaient a 2,92-4,17:1. Sur ce sol elles deviennent opaques.
2. Le « 95 % » porte une plaque de la recette, elle aussi translucide et
calibree pour du sombre. Sur clair il prend l'aplat rouge plein, ou son
encre claire rend 4,62:1 — le meme geste que l'eyebrow. */
/* Trois classes plutot que deux : la declaration adverse est un raccourci
background posé plus loin dans le fichier, et a specificite egale c'est elle
qui gagnait. On monte d'un cran plutot que d'ecrire un !important. */
main > section[data-sol="clair"] .practices__grid--six .practice {
background-color: var(--color-surface);
background-image: none;
}
main > section[data-sol="clair"] .industries__coverage-stat {
color: #F8FAFC !important;
background: var(--color-primary) !important;
border-color: var(--color-primary) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
« NUESTRO MODELO » APRES LE RETRAIT DU DIAGRAMME — 2026-08-14
══════════════════════════════════════════════════════════════════════════
Les six rangees et le rail sont partis du HTML ; il reste le libelle et la
grille, qui remontent directement dans le conteneur.
ESPACEMENT EGAL SUR TOUS LES COTES, demande de Gabriel. La grille avait une
gouttiere unique posee par --space-5, mais les cartes heritaient d'un
padding-inline de la rangee qui les portait : l'ecart entre deux cartes
n'etait donc pas le meme que l'ecart au bord. Sans la rangee, un seul gap
suffit et il vaut pour les quatre cotes. */
.practices__label {
margin: 0 0 clamp(20px, 2.2vw, 32px);
font: 700 11px/1.4 var(--font-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-muted);
}
main > section[data-sol="clair"] .practices__label { color: var(--color-muted-light); }
.practices__grid--six {
gap: clamp(16px, 1.6vw, 24px);
padding: 0;
margin: 0;
}
/* LA CARTE REDEVIENT SOMBRE FRANCHE SUR LE SOL CLAIR. En passant a
--color-surface (#2B2B2B) pour cesser d'etre translucide, elle avait
ECLAIRCI le fond des rangs persona : mesure, ZeroTrust y tombait a 2,92:1
pour un seuil de 4,5, ASHA a 4,17, CTEM a 4,12. Sur --sol-1 (#141414) ils
retrouvent exactement les valeurs qu'ils avaient sur le sol sombre, ou les
six passaient. Une carte sombre sur un sol clair est l'inversion normale de
la regle : ce qui compte est l'ECART, pas le sens. */
main > section[data-sol="clair"] .practices__grid--six .practice {
/* !important obligatoire : .practice porte deja un
`background: rgba(23,23,23,0.85) !important`, et un !important bat
n'importe quelle specificite. On ne gagne pas ce genre de duel en montant
d'un cran, on y repond en nature. */
background-color: var(--sol-1) !important;
background-image: none !important;
}
/* ── LA COULEUR DU PERSONA HABILLE LA CARTE — 2026-08-15 ─────────────────
Meme recette que la carte du panneau de #soluciones que Gabriel a donnee en
reference : un degrade vertical de 12 % a 4 % du ton persona. La nuance qui
compte est qu'il se pose ICI sur --sol-1 (#141414) et non sur --color-surface
(#2B2B2B) : la regle juste au-dessus avait fait descendre la carte a ce
niveau parce que le fond plus clair faisait tomber les rangs persona
jusqu'a 2,92:1. En gardant cette base sombre sous le degrade, la carte prend
la couleur sans remonter en luminance — verifie apres coup sur les six.
La specificite est portee d'un cran (l'attribut [data-persona] en plus) pour
passer devant le « background-image: none » de la regle precedente, qui
reste juste pour les cartes sans persona. */
main > section[data-sol="clair"] .practices__grid--six .practice[data-persona] {
background-image: linear-gradient(
180deg,
color-mix(in srgb, var(--p, var(--color-primary)) 12%, transparent),
color-mix(in srgb, var(--p, var(--color-primary)) 4%, transparent)) !important;
}
main > section[data-sol="clair"] .practices__grid--six .practice[data-persona]:hover {
background-image: linear-gradient(
180deg,
color-mix(in srgb, var(--p, var(--color-primary)) 20%, transparent),
color-mix(in srgb, var(--p, var(--color-primary)) 7%, transparent)) !important;
}
/* La ligne de role d'ASHA prend la variante claire du rouge, sans condition de
sol. Elle passait a 5,58:1 tant que sa bande etait en sol-0 ; la suppression
de la section « Marcos » a decale l'alternance et l'a posee sur sol-2, ou le
meme rouge ne vaut plus que 4,28 pour un seuil de 4,5.
C'est la troisieme fois qu'une encre depend du VOISINAGE de sa section. On
la descope : --color-primary-soft passe sur les deux sols, la regle n'a donc
plus de raison d'etre conditionnelle. */
.method[data-persona="asha"] .method__role { color: var(--color-primary-soft); }
/* ══════════════════════════════════════════════════════════════════════════
NOSOTROS : LE RAIL DE SECTION — 2026-08-15
══════════════════════════════════════════════════════════════════════════
Refonte sur la reference Proofpoint : un menu secondaire cale a GAUCHE qui
descend avec la page et marque la section courante, tout le contenu passant
a droite.
POURQUOI IL PEUT ETRE FIXE, ET CLAIR, SANS SE RELIRE A CHAQUE BANDE.
Les huit sections de nosotros sont toutes en sol 0 ou sol 2 (#000000 et
#212121) : il n'y a pas une seule bande claire sur cette page. Un rail en
encre claire tient donc du haut en bas sans changer de couleur en route.
Si une bande claire arrivait un jour ici, ce rail deviendrait illisible sur
sa traversee : ce n'est pas une precaution theorique, c'est la condition qui
rend le procede valable.
IL N'EST PAS DANS LE FLUX, ET C'EST VOULU. Les sections sont des bandes
pleine largeur avec leurs sols alternes ; les enfermer dans une grille a
deux colonnes aurait casse ce rythme. Le rail flotte donc au-dessus, et
c'est le CONTENU qui se retire pour lui — un padding a gauche sur les huit
conteneurs, nommes un par un.
LE SEUIL EST 75rem. En dessous il n'y a plus de marge libre a gauche : le
rail disparait plutot que de recouvrir le texte. La page reste entierement
navigable, elle perd seulement son reperage. */
/* LE RAIL VERTICAL A ETE RETIRE le 2026-08-15 : nosotros a repris le header
secondaire des autres pages. Tout son CSS part avec lui — la boite fixee, la
liste, les pastilles, et surtout le padding-left qui retirait le contenu de
chaque section pour lui faire place. Sans ce retrait, les huit conteneurs
seraient restes decales de 300 px vers la droite sans rien a cet endroit.
La classe .container--lecture reste : c'est la colonne de lecture d'esencia,
qui n'a jamais eu de rapport avec le rail.
Ce qui SURVIT du chantier : la grammaire de section juste en dessous (filet
d'ouverture, grilles calees, alignement a gauche). Elle valait pour elle-meme
et pas seulement pour accompagner le rail. */
/* LA COLONNE DE LECTURE PART DU BORD GAUCHE, elle n'est plus centree.
Elle gardait une max-width de 920 px avec les marges automatiques du
.container : sa boite tombait donc au milieu de la page et son texte
commencait 420 px a droite du titre de la section voisine, mesure a 1920.
La formule reproduit l'origine EXACTE d'un conteneur pleine largeur — la
marge automatique qu'il prend quand la fenetre depasse --container-max —
de sorte que le premier caractere tombe sur la meme verticale que partout
ailleurs, a toutes les largeurs. */
.container--lecture {
max-width: calc(920px + max(0px, (100% - var(--container-max)) / 2));
margin-inline: max(0px, calc((100% - var(--container-max)) / 2)) auto;
}
/* ══════════════════════════════════════════════════════════════════════════
NOSOTROS : LA GRAMMAIRE DE SECTION — 2026-08-15
══════════════════════════════════════════════════════════════════════════
Ecrite pour accompagner le rail vertical, elle lui a survecu et c'est tant
mieux : chaque section s'ouvre par un filet, porte un titre, un lede borne a
une longueur de lecture, puis son contenu sur une colonne unique calee a
gauche. Rien la-dedans ne dependait du rail.
Le numero est ecrit dans data-sec et sorti en ::before. Il n'est pas dans le
HTML en tant que texte : c'est un repere de mise en page, pas du contenu —
un lecteur d'ecran qui l'annoncerait ferait dire "zero un" avant chaque
titre, huit fois, sans rien apporter. */
/* ── L'EN-TETE DE NOSOTROS SUIT CELUI DE LA HOME 2026-08-22 ──────────
══════════════════════════════════════════════════════════════════════════
Gabriel : « les marges des grandes sections de nosotros ont leurs propres
regles, comme la ligne qui est fondue, chose qu'on ne voit pas sur la home ;
aligne cette page sur les regles de la home ».
MESURE DES DEUX PAGES. Sur la home, le titre d'une section commence 96 px
apres son bord. Sur nosotros, 129 : les 94 px de la section PLUS 35 px de
padding propre a l'en-tete. Et six en-tetes sur huit portaient un filet en
degrade que la home n'a nulle part — « la ligne fondue ». La page etait
d'ailleurs incoherente avec elle-meme : « Trayectoria » n'avait ni le filet
ni le padding, donc son titre commençait 35 px plus haut que ses voisins.
Le padding propre disparait, le filet aussi, la marge basse rejoint les
48 px de la home. Ces regles avaient ete ecrites pour accompagner un rail
vertical qui n'existe plus : elles lui ont survecu sans qu'on remarque
qu'elles faisaient de cette page une exception. */
.page-nosotros .section-head--rail {
position: relative;
padding-top: 0;
margin-bottom: 48px;
}
/* Le filet d'ouverture. Il traverse toute la colonne de contenu et se degrade
vers la droite : le poids est a gauche, la ou le rail se tient. */
/* Le filet d'ouverture est retire le 2026-08-22 : la home n'en a aucun, et
c'est lui que Gabriel appelle « la ligne fondue ». Il ouvrait six sections
sur huit, ce qui creait une inegalite jusque dans la page elle-meme. */
.page-nosotros .section-head--rail::after { content: none; }
/* PAS DE TROISIEME NUMERO. J'avais pose le numero de section en ::before dans
la marge du titre. Il faisait doublon deux fois : le rail l'affiche deja a
gauche, et l'eyebrow le porte deja en tete ("02 · NUESTRA ESENCIA"). Trois
fois le meme chiffre sur la meme ligne d'oeil, ce n'est pas un reperage,
c'est du bruit. Le filet d'ouverture suffit a marquer le debut de section. */
/* LE LEDE SE BORNE. La colonne utile fait environ 1450 px a 1920 : une phrase
qui la traverse entierement demande un balayage de l'oeil que la reference
n'impose jamais. 68ch est la borne haute de confort en lecture continue.
Attention, ch suit la taille de police : reduire la police ne reduit PAS le
nombre de lignes, la mesure est proportionnelle. */
.page-nosotros #quienes .section-lede,
.page-nosotros #esencia .section-lede,
.page-nosotros #trayectoria .section-lede,
.page-nosotros #razones .section-lede,
.page-nosotros #certificaciones .section-lede,
.page-nosotros #alianzas .section-lede,
.page-nosotros #modelo .section-lede,
.page-nosotros #liderazgo .section-lede { max-width: 68ch; }
@media (min-width: 75rem) {
/* LES GRILLES SE RESSERRENT. Le rail a pris pres de 300 px a la colonne
utile ; les grilles reglees pour la pleine largeur s'y retrouvent trop
etroites, et celle des metriques tombait meme sur deux colonnes avec un
trou beant a droite. On les fixe au nombre de colonnes que leur nombre
d'items appelle, au lieu de les laisser se replier au hasard. */
/* trayectoria : trois metriques, trois colonnes. Elle en montrait deux, et
la troisieme se retrouvait seule sur une deuxieme rangee. */
.page-nosotros #trayectoria .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* razones : six raisons, trois colonnes de deux rangees. align-items:stretch
parce que les six textes n'ont pas la meme longueur : sans lui les cartes
d'une meme rangee finissaient a 323 et 349 px, et le decalage se voyait. */
.page-nosotros #razones .about-cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
}
.page-nosotros #razones .about-card { height: 100%; }
/* modelo : trois piliers, trois colonnes. */
.page-nosotros #modelo .about-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* liderazgo : deux responsables, deux colonnes et pas davantage — a trois
ou quatre pistes deux cartes se perdent au bord gauche.
margin-inline: 0 est indispensable : la regle de base porte margin:0 auto
avec une max-width, ce qui centrait la paire dans la colonne utile. Elle
demarrait 313 px a droite du titre a 1920 — le seul bloc de la page a ne
pas tenir le bord gauche, et ca se voyait immediatement. */
.page-nosotros #liderazgo .leadership {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-inline: 0;
max-width: min(100%, 860px);
}
/* certificaciones : cinq badges qui doivent rester sur une seule ligne. */
.page-nosotros #certificaciones .cert-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* alianzas : cinq niveaux de partenariat, meme regle. */
.page-nosotros #alianzas .partner-levels { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* LE RYTHME VERTICAL. La reference tient par des respirations egales : chaque
section pese la meme chose, et c'est cette regularite qui fait qu'on lit le
rail comme une progression plutot que comme un sommaire pose a cote. */
@media (min-width: 75rem) {
.page-nosotros #quienes, .page-nosotros #esencia, .page-nosotros #trayectoria, .page-nosotros #razones,
.page-nosotros #certificaciones, .page-nosotros #alianzas, .page-nosotros #modelo, .page-nosotros #liderazgo {
/* ALIGNE SUR LA HOME — 2026-08-22. Ce clamp donnait 93,6 px a 1440 quand la
home en tient 96 : deux pixels d'ecart invisibles seuls, mais ils
s'ajoutaient au reste pour faire de nosotros une page a part. La valeur
est desormais celle de .section, la meme partout. */
padding-block: var(--space-24);
}
}
/* ══════════════════════════════════════════════════════════════════════════
NOSOTROS : PLUS RIEN N'EST CENTRE — 2026-08-15
══════════════════════════════════════════════════════════════════════════
La grammaire de la reference tient sur un bord gauche unique : le rail, les
filets, les eyebrows, les titres et les ledes s'y alignent tous. Six ilots
resistaient encore en centre, herites de la mise en page precedente ou le
contenu occupait toute la largeur — et c'est justement ce qui se remarquait,
parce qu'un bloc centre au milieu d'une page calee a gauche se lit comme une
erreur de gabarit plutot que comme une intention.
CE QUI RESTE CENTRE, ET POURQUOI. Les logos dans les pistes defilantes
d'alianzas, et l'initiale dans la pastille ronde de liderazgo : dans les
deux cas le centrage est celui d'un objet dans sa propre boite, pas celui
d'un bloc dans la page. Les aligner a gauche les decalerait de leur cadre. */
/* razones : les six cartes */
.page-nosotros #razones .about-card {
text-align: left;
align-items: flex-start;
justify-content: flex-start;
}
/* align-self seulement : c'est la POSITION de la pastille dans la carte.
J'y avais aussi mis justify-content, qui gouverne l'icone DANS la
pastille de 48 px — la decaler la sortait de son propre cadre. */
.page-nosotros #razones .about-card__icon-wrap {
align-self: flex-start;
/* Et margin-inline a zero. align-self etait bien passe a flex-start, la
pastille restait pourtant au centre : le variant --illustre lui met une
marge automatique de chaque cote, qui centre l'element quel que soit
l'alignement demande. La marge bat l'alignement, il fallait la lever. */
margin-inline: 0;
}
.page-nosotros #razones .about-card__title,
.page-nosotros #razones .about-card__desc { text-align: left; }
/* modelo : les trois piliers */
.page-nosotros #modelo .about-card {
text-align: left;
align-items: flex-start;
}
/* align-self seulement : c'est la POSITION de la pastille dans la carte.
J'y avais aussi mis justify-content, qui gouverne l'icone DANS la
pastille de 48 px — la decaler la sortait de son propre cadre. */
.page-nosotros #modelo .about-card__icon-wrap { align-self: flex-start; }
.page-nosotros #modelo .about-card__title,
.page-nosotros #modelo .about-card__desc { text-align: left; }
/* certificaciones : le bloc des marcos de referencia, le plus visible des six */
.page-nosotros #certificaciones .about-frameworks { text-align: left; }
.page-nosotros #certificaciones .frameworks__label { text-align: left; }
.page-nosotros #certificaciones .frameworks__logos {
justify-content: flex-start;
text-align: left;
}
.page-nosotros #certificaciones .frameworks__grid { justify-content: flex-start; }
/* alianzas : les cinq niveaux de partenariat */
.page-nosotros #alianzas .partner-level {
align-items: flex-start;
text-align: left;
}
.page-nosotros #alianzas .partner-level__note { text-align: left; }
/* ══════════════════════════════════════════════════════════════════════════
INDEX : TROIS CORRECTIONS DEMANDEES LE 2026-08-15
══════════════════════════════════════════════════════════════════════════ */
/* ── 1. LES DEUX PISTES D'ALIANZAS TRAVERSENT LA PAGE ─────────────────────
Elles s'arretaient au bord du conteneur — 1386 px sur 1920 — alors que la
bande claire des clients, elle, va d'un bord a l'autre. Ce n'etait pas
l'animation qui s'arretait, c'etait la boite qui finissait la.
La sortie de gouttiere se fait en margin negative de 50% - 50vw, la formule
classique. Son defaut connu est que 100vw inclut la barre de defilement, ce
qui ajoute une quinzaine de pixels de debordement horizontal a toute la
page. overflow-x: clip sur la section l'absorbe — clip et non hidden, qui
creerait un conteneur de defilement et casserait le position:sticky des
elements au-dessus. */
#alianzas { overflow-x: clip; }
/* :not(.page-nosotros) : la meme section vit sur nosotros, ou un rail de
navigation occupe la gouttiere gauche. Une piste pleine largeur lui
passerait dessous — les logos traversaient le menu. Sur cette page la piste
reste donc dans la colonne de contenu, ou elle a toute la place voulue. */
body:not(.page-nosotros) #alianzas .alliances__tier .marquee {
width: 100vw;
margin-inline: calc(50% - 50vw);
}
/* Les libelles de niveau, eux, restent sur la marge : ce sont des titres, pas
la piste. Sans cette ligne ils suivraient la piste hors gouttiere. */
#alianzas .alliances__tier-label { width: auto; margin-inline: 0; }
/* ── 2. L'EYEBROW DE #sistema REPREND LA FORME DES SEPT AUTRES ────────────
Il etait le seul en aplat rouge plein, a angles vifs et sans padding, quand
les sept autres sont des pilules a fond sombre et filet rouge. La section
est sur sol clair : garder l'encre blanche des autres l'aurait rendue
illisible, l'encre passe donc au gris fonce. C'est la seule difference, et
elle est imposee par le fond. */
/* (la regle generique sol=clair s'en charge desormais pour toutes les
sections claires du site, pas seulement #sistema) */
/* ── 3. « EL RETO ES INTEGRARLO TODO » PASSE EN BANDE CLAIRE ──────────────
C'est la bascule du diagnostic vers la reponse : le fond change avec elle.
La phrase sort de la bande sombre en pleine largeur, comme les pistes
ci-dessus, pour se lire comme une respiration et non comme un paragraphe
de plus. Toute l'encre est redescendue avec le fond. */
.problema__turn {
width: 100vw;
margin-inline: calc(50% - 50vw);
margin-top: clamp(48px, 5vw, 88px);
margin-bottom: calc(-1 * clamp(56px, 6vw, 104px));
padding: clamp(44px, 4.6vw, 76px) 0;
/* Retour au clair le 2026-08-15, apres un passage par le rouge. Elle reste
la seule surface claire de cette moitie de page, ce qui suffit a en faire
une respiration entre le diagnostic et la reponse. */
background: var(--color-fg);
}
#problema { overflow-x: clip; }
/* Le contenu de la bande se recale sur la grille du site : la bande est
pleine largeur, son texte ne l'est pas. Et il part du bord gauche, comme
les vingt-deux autres titres du site — la bande etait pleine largeur mais
son texte restait centre, ce qui la faisait lire comme une citation posee
au milieu plutot que comme la bascule de l'argument. */
.problema__turn > * {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
/* CENTRE, et c'est la seule exception a l'alignement a gauche de la page.
La bande ne porte plus qu'une phrase, sans surtitre ni suite : centree
elle se lit comme un panneau, calee a gauche elle redevenait un
paragraphe parmi les autres. */
text-align: center;
}
/* La bande etant redevenue claire, l'accent ne peut plus etre blanc : il
disparaitrait. Il reprend le rouge de marque, qui rend 4,61:1 sur ce fond
pour un seuil de 3 a ces 64 px. La premiere moitie de la phrase garde le
noir, a 18,19:1. Le centrage et l'absence de surtitre sont conserves. */
.problema__turn-text {
color: var(--color-fg-light);
text-align: center;
}
.problema__turn-text .accent,
.problema__turn-text .accent .split-word { color: var(--color-primary); }
/* ── LES SIX CARTES HEROS PRENNENT LA COULEUR, COMME LE PANNEAU SOLUCIONES ──
Le panneau de #soluciones tient sa carte principale par trois gestes : un
filet a 34 % de la couleur du persona, un voile du meme ton sur le corps, et
la ligne de methode ecrite dans cette couleur. Les six cartes avaient deja
la variable --p, mais ne s'en servaient qu'au survol : au repos elles etaient
six cartes identiques. Elles reprennent donc le meme langage.
ADAPTE A LA SITUATION, ET c'est le point : la carte du panneau est posee sur
un sol sombre, celles-ci sur un sol clair avec un corps sombre a l'interieur.
Le voile reste donc faible — 8 % — et se pose sur le corps, pas sur la
section. Au-dela, les tons clairs (le violet de ZeroTrust, le vert de GRC)
remontaient assez le fond pour attaquer la lisibilite du texte blanc. */
/* !important des deux cotes : .practice porte « background » et
« border-color » en !important quelques milliers de lignes plus haut. A
specificite egale ou superieure, seule une declaration de meme poids passe —
on repond en nature, c'est la regle deja etablie pour ce selecteur. */
.practices__grid--six .practice[data-persona] {
border-color: color-mix(in srgb, var(--p, var(--color-primary)) 34%, transparent) !important;
/* EXACTEMENT LA RECETTE DU PANNEAU DE #soluciones : un degrade vertical de
12 % a 4 % du ton persona, pose sur le fond de surface. J'avais d'abord
mis un voile de 8 % qui s'eteignait a mi-hauteur — trop discret, la carte
restait grise. Ici la couleur habille toute la carte, comme sur la
reference. */
background-image: linear-gradient(
180deg,
color-mix(in srgb, var(--p, var(--color-primary)) 12%, transparent),
color-mix(in srgb, var(--p, var(--color-primary)) 4%, transparent)) !important;
}
/* LE FILET RESTE ANIME. Je l'avais fige a 100 % au repos en me disant qu'il
identifiait le persona — sauf que c'est desormais le FOND colore qui fait
ce travail, et que figer le filet supprimait l'animation de survol des six
cartes, qui existait depuis le debut. Il repart donc de zero et se deploie
au survol, comme avant. */
.practices__grid--six .practice[data-persona]:hover {
border-color: var(--p, var(--color-primary)) !important;
background-image: linear-gradient(
180deg,
color-mix(in srgb, var(--p, var(--color-primary)) 20%, transparent),
color-mix(in srgb, var(--p, var(--color-primary)) 7%, transparent)) !important;
}
/* La pastille de rang porte deja la couleur ; on la confirme, et le chiffre
d'ordre la reprend au lieu du gris. */
.practices__grid--six .practice[data-persona] .practice__rank { color: var(--p, var(--color-primary)); }
.practices__grid--six .practice[data-persona] .practice__num {
color: color-mix(in srgb, var(--p, var(--color-primary)) 78%, transparent);
}
/* ── L'IMAGE DE FOND DES page-hero — 2026-08-15, corrigee ────────────────
Premiere version, fausse et cassante : j'avais redeclare .page-hero__bg-img
(qui existait deja plus haut, le motif etait prevu) et surtout pose
position: relative sur les trois calques pour les faire passer devant.
C'ETAIT L'ERREUR. Ces trois calques sont en position: absolute; inset: 0.
Les repasser en relative les remet dans le flux : ils perdent leur inset,
se retrouvent hauts de zero, et la grille comme les halos disparaissent —
sur les trois pages a page-hero, pas seulement celle que je modifiais.
Un z-index suffisait : sur des elements deja absolus il ordonne la pile
sans toucher a la geometrie. C'est tout ce que la regle fait desormais. */
.page-hero__bg-img { z-index: 0; opacity: 0.5; }
.page-hero__bg-grad,
.page-hero__bg-grid,
.page-hero__bg-drift { z-index: 1; }
/* ── LA HERO DE METODOLOGIA REMPLIT L'ECRAN JUSQU'AU SOUS-MENU — 2026-08-15 ──
Elle mesurait 756 px sur un ecran de 1080 : le sous-menu apparaissait bien,
mais 175 px de vide trainaient sous lui. On la cale sur ce qui reste de
l'ecran une fois l'en-tete et la bande du sous-menu retires, de sorte que
cette bande grise ferme exactement le premier ecran.
100svh et non 100vh : sur mobile, vh se mesure sur la fenetre BARRE
D'ADRESSE RETRACTEE, ce qui pousse le sous-menu sous le pli tant que la
barre est visible — soit au chargement, exactement quand ca compte. */
:root { --subnav-h: 60px; }
@media (max-width: 700px) { :root { --subnav-h: 54px; } }
.page-hero--liga {
min-height: calc(100svh - var(--header-h) - var(--subnav-h));
display: flex;
align-items: center;
}
/* L'image des six heros est un groupe : on la cadre par le haut pour garder
les visages, et on la laisse un peu plus presente que la vague de nosotros —
elle porte ici le sujet de la page, elle n'est pas qu'un decor. */
/* (.page-hero__bg-img--liga retire : la hero de metodologia ne porte plus
une image plate mais la rangee .liga-row, six fichiers composes) */
/* Le rang d'ASHA : sa couleur persona EST le rouge de marque, qui ne rend que
3,81:1 sur le corps sombre de la carte, sous le seuil de 4,5 pour ces 12 px.
Les cinq autres personas sont des tons clairs et passent. Seule la capitane
prend donc la variante relevee — la couleur reste la sienne, elle est
seulement remontee jusqu'au seuil. */
.practices__grid--six .practice[data-persona="asha"] .practice__rank {
color: var(--color-primary-soft);
}
/* ══════════════════════════════════════════════════════════════════════════
METODOLOGIA : LA RANGEE DES SIX DANS LE HERO — 2026-08-15
══════════════════════════════════════════════════════════════════════════
Six personnages detoures, poses au fond du hero, chacun sur son halo de
couleur. Elle est DANS .page-hero__bg et vient apres les trois calques,
donc au-dessus de la grille : celle-ci reste visible entre les silhouettes,
ce qui etait tout l'interet de la garder.
Les figures sont alignees par le BAS et non centrees : les six fichiers ont
des proportions differentes une fois recadres sur leur sujet (de 473 a
1030 px de large pour une meme hauteur), et un centrage vertical les aurait
fait flotter a des hauteurs differentes. Au sol, ils forment un groupe. */
.liga-row {
position: absolute;
/* inset: 0 et non « auto 0 0 0 ». Avec auto en haut, la boite prend la
hauteur de son contenu — 1520 px, la hauteur native des fichiers — et le
« height: 78% » des figures se calculait sur cette hauteur-la au lieu de
celle du hero. La rangee debordait de 588 px vers le haut. */
inset: 0;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: center;
/* Chevauchement plus franc : a 720 px de haut les six figures totalisent
plus de 2000 px, et GRC sortait du cadre par la droite. Elles se serrent,
ce qui les fait aussi lire comme un groupe plutot que comme une frise. */
gap: clamp(-96px, -4.4vw, -40px);
pointer-events: none;
/* Le degrade du bas : les personnages entrent dans la bande sans ligne de
coupe. Sans lui, six paires de pieds tranchees net au bord du hero. */
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
}
.liga-row__fig {
position: relative;
display: block;
flex: 0 0 auto;
/* La hauteur suit celle du hero, bornee : au-dela de 78 % de la bande les
tetes passaient derriere le titre. */
/* Trois bornes, et la troisieme est la seule qui compte sous 1600 px.
La largeur totale de la rangee vaut environ 2,8 fois sa hauteur une fois
les chevauchements deduits : sans borne en vw, a 1440 px les figures
restaient hautes et CTEM comme GRC sortaient du cadre de 25 px. */
height: min(70%, 660px, 34vw);
}
.liga-row__fig img {
display: block;
height: 100%;
width: auto;
/* Les personnages sont un decor de fond : ils restent en retrait pour que
le titre garde son avance. La capitane, elle, remonte un peu. */
/* 0,72 : entre les deux demandes de Gabriel. Monte a 0,88 dans la journee
parce qu'on ne reconnaissait pas les personnages, redescendu ensuite vers
la transparence du CTA final — « pero tampoco tanto ». */
opacity: 0.72;
filter: saturate(0.95);
}
/* LE HALO DE COULEUR, un par persona — remis le 2026-08-15 apres un
aller-retour. Le probleme n'etait pas ces halos-la mais leur superposition
avec ceux du fond : ce sont les blobs du calque .page-hero__bg-drift qui
partent, plus bas. Chaque personnage garde donc SA lueur, et elle ne se
melange plus a quatre autres qui ne lui correspondaient pas.
En ::before, donc DERRIERE l'image, jamais par-dessus. */
.liga-row__fig::before {
content: '';
position: absolute;
left: 50%;
bottom: 4%;
width: 118%;
aspect-ratio: 1;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle,
color-mix(in srgb, var(--p, var(--color-primary)) 42%, transparent) 0%,
color-mix(in srgb, var(--p, var(--color-primary)) 14%, transparent) 42%,
transparent 70%);
filter: blur(26px);
opacity: 0.55;
z-index: -1;
}
.liga-row__fig--capitana::before { opacity: 0.7; }
.liga-row__fig[data-persona="ctem"] { --p: var(--color-ctem); }
.liga-row__fig[data-persona="ngsoc"] { --p: var(--color-ngsoc); }
.liga-row__fig[data-persona="csirt"] { --p: var(--color-csirt); }
.liga-row__fig[data-persona="zerotrust"] { --p: var(--color-zerotrust); }
.liga-row__fig[data-persona="grc"] { --p: var(--color-grc); }
.liga-row__fig[data-persona="asha"] { --p: var(--color-primary); }
/* NGSOC prend la meme taille que la capitane, a la demande de Gabriel — il
est le seul autre a la porter, et sa silhouette est plus etroite que les
autres, ce qui le faisait paraitre en retrait a hauteur egale. */
.liga-row__fig[data-persona="ngsoc"] {
height: min(80%, 740px, 38vw);
}
/* La capitane : au centre, plus grande, plus presente et devant les autres.
C'est la seule hierarchie de la rangee, et elle correspond a ce que le
reste du site dit d'elle — le principe organisateur, pas un frente parmi
six. */
.liga-row__fig--capitana {
height: min(80%, 740px, 38vw);
z-index: 1;
}
.liga-row__fig--capitana img { opacity: 0.86; filter: none; }
/* Sous 1100 px la rangee de six devient une haie de silhouettes de 60 px de
large : on garde la capitane seule, calee a droite, et le titre reprend
toute la place. */
@media (max-width: 1100px) {
.liga-row { justify-content: flex-end; padding-right: 2vw; }
.liga-row__fig:not(.liga-row__fig--capitana) { display: none; }
.liga-row__fig--capitana { height: min(74%, 560px); }
.liga-row__fig--capitana img { opacity: 0.5; }
}
@media (max-width: 700px) {
.liga-row { display: none; }
}
/* Le portrait des six cartes gagne 70 px : a 280 px les heros etaient cadres
sous les epaules et on perdait ce qui les distingue. 350 px les montre en
entier sans que la carte cesse de tenir a trois par rangee. */
.practices__grid--six .practice__hero { height: 350px; }
@media (max-width: 900px) {
.practices__grid--six .practice__hero { height: 300px; }
}
/* ── LES page-hero PRENNENT LA HAUTEUR DU HERO DE LA HOME — 2026-08-15 ────
Mesure avant : 963 px sur la home contre 756 sur nosotros et bolsa a
1920x1080, 783 contre 663 a 1440x900. L'ecart se voyait d'une page a
l'autre, les pages interieures paraissant tassees.
La home tient sa hauteur d'un min-height en svh moins l'en-tete ; on
reprend la meme regle plutot qu'un nombre de pixels, sinon l'alignement se
deferait a la premiere fenetre d'une autre taille. svh et non vh : sur
mobile, vh se mesure barre d'adresse retractee et le bas du hero passerait
sous le pli au chargement.
metodologia garde sa propre regle : elle, elle doit s'arreter juste au-dessus
du sous-menu, ce qui fait une hauteur differente et voulue. */
.page-hero:not(.page-hero--liga) {
min-height: calc(100svh - var(--header-h) - clamp(48px, 5vh, 88px));
display: flex;
align-items: center;
}
/* ── LA BANDE D'ALIANZAS REDEVIENT COMPACTE — 2026-08-15 ─────────────────
Une regle .alliances--band posait deja un padding de 40 a 64 px, mais elle
ne s'appliquait pas : .section porte le meme poids (une classe) et gagne en
etant declaree plus loin. Le padding reel valait donc 124 px en haut comme
en bas, soit 248 px de vide pour une bande dont le contenu ne fait que
414 px — c'est ce que Gabriel voyait sous le bouton.
Deux classes sur le meme element suffisent a passer devant, sans !important. */
.alliances.alliances--band {
padding-top: clamp(44px, 3.4vw, 64px);
padding-bottom: clamp(44px, 3.4vw, 64px);
}
/* ── TRAYECTORIA : LES TROIS METRIQUES SE CENTRENT — 2026-08-15 ──────────
Le titre de chaque metrique est retire ; il ne reste que le nombre et sa
legende, et ces deux-la se centrent l'un sous l'autre. A noter, puisque
c'est un vrai changement de sens : sans « Años de experiencia » sous le
12+, c'est desormais la legende seule qui doit dire de quoi on parle. */
.page-nosotros #trayectoria .metric {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(10px, 1vw, 16px);
}
.page-nosotros #trayectoria .metric__num,
.page-nosotros #trayectoria .metric__caption {
text-align: center;
margin-inline: auto;
}
.page-nosotros #trayectoria .metric__caption { max-width: 34ch; }
/* ══════════════════════════════════════════════════════════════════════════
FOCO EN INDUSTRIAS CLAVES : LA SECTION PASSE AU BLEU — 2026-08-15
══════════════════════════════════════════════════════════════════════════
Le bleu est celui qui anime deja les vignettes au survol : --color-csirt.
La section l'adopte pour ses trois reperes — la pastille de surtitre,
l'accent du titre et le chiffre de couverture — au lieu de garder le rouge
de marque a cote d'un survol bleu, qui se contredisaient. */
/* La pastille : fond et filet bleus, texte BLANC. Le chevron qui la precedait
saute — c'etait un ornement herite du motif « prompt » des autres sections,
et Gabriel le veut hors de celle-ci. */
.industries .eyebrow::before,
.industries__head .eyebrow::before { content: none !important; }
.industries .eyebrow,
main > section[data-sol="1"] .industries__head .eyebrow,
main > section[data-sol="2"] .industries__head .eyebrow {
background: color-mix(in srgb, var(--color-csirt) 14%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--color-csirt) 46%, transparent) !important;
border-radius: 9999px !important;
padding: 5px 12px 4px !important;
color: var(--color-fg) !important;
gap: 0 !important;
/* MEME HAUTEUR QUE LES AUTRES PASTILLES — 2026-08-22, releve par Gabriel.
Mesure des huit eyebrows de la home : sept a 30 px, celui-ci a 23. Deux
causes, toutes deux heritees de la regle d'origine plus haut (ligne ~5107).
D'abord le raccourci « font: 600 11px/1 » : la forme courte impose un
line-height de 1, quand les autres pastilles tiennent leur hauteur d'un 1,6
— sept pixels perdus, exactement l'ecart mesure. Ensuite inline-flex, qui
n'a plus de raison d'etre depuis que le chevron ::before a ete retire, et
qui calculait la hauteur autrement que l'inline-block des voisines.
On repose donc les deux valeurs, sans toucher au reste de la pastille. */
display: inline-block !important;
line-height: 1.6 !important;
}
/* « regulados y críticos » : l'accent du titre prend le meme bleu. La variante
soft et non le ton plein — sur le sol sombre elle rend nettement plus, et
c'est un titre, donc du grand texte qu'on ne veut pas voir vibrer. */
.industries .section-title .accent,
.industries .section-title .accent .split-word {
color: var(--color-csirt-soft) !important;
}
/* Le 95 % : meme bleu que les deux precedents. */
.industries__coverage-stat,
main > section[data-sol="1"] .industries__coverage-stat,
main > section[data-sol="clair"] .industries__coverage-stat {
color: var(--color-csirt-soft) !important;
background: color-mix(in srgb, var(--color-csirt) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--color-csirt) 40%, transparent);
border-radius: 9999px;
padding: 3px 12px 2px;
}
/* ── NGSOC UN PEU PLUS GRAND SUR SA BANDE — 2026-08-15 ───────────────────
460 px au lieu de 380. Il est le seul des six a etre agrandi, a la demande
de Gabriel, et c'est coherent avec la rangee du hero ou il prend deja la
taille de la capitane : sa silhouette est plus etroite que celle des autres,
il paraissait en retrait a largeur egale.
Les deux paliers mobiles ne sont pas touches — sous 920 px le personnage
passe au-dessus du texte et doit rester un signe d'identite. */
@media (min-width: 920px) {
#ngsoc .method__media img { max-width: 460px; }
}
/* ── LES BLOBS DE COULEUR DU FOND PARTENT DE LA HERO DE METODOLOGIA ──────
.page-hero__bg-drift pose quatre taches radiales — rouge, cyan, vert,
violet — qui derivent lentement. Elles ont un sens sur une hero sans
personnages : elles font sentir « six frentes » sans les montrer. Ici les
six sont la, chacun avec son propre halo : les quatre taches ajoutaient une
seconde couche de couleur qui ne correspondait a personne.
Scope a .page-hero--liga : nosotros et bolsa-de-trabajo les gardent, elles
n'ont pas de personnages pour prendre le relais. */
.page-hero--liga .page-hero__bg-drift { display: none; }
/* Les personnages redescendent encore : 0,58 au lieu de 0,72, la capitane
0,72 au lieu de 0,86. Troisieme reglage de la journee — le halo de chacun
etant revenu, la silhouette a moins besoin de porter seule. */
.liga-row__fig img { opacity: 0.58; }
.liga-row__fig--capitana img { opacity: 0.72; }
/* ── INDUSTRIAS : LE ROUGE DES CARTES PASSE AU BLEU — 2026-08-15 ─────────
Suite du basculement de la section. Il restait deux rouges sur les cartes
elles-memes : le cadre qui s'allume au survol, et l'equerre posee dans le
coin bas-gauche de chaque image. Ils juraient d'autant plus que le survol
de la vignette, lui, etait deja bleu. */
.industries .industry-card:hover {
border-color: color-mix(in srgb, var(--color-csirt) 62%, transparent) !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.40),
0 0 32px color-mix(in srgb, var(--color-csirt) 26%, transparent) !important;
}
.industries .industry-card::after {
border-bottom-color: var(--color-csirt) !important;
border-left-color: var(--color-csirt) !important;
}
/* ── LA GRILLE DE LA HERO DE METODOLOGIA REDEVIENT UNIFORME ──────────────
Elle portait un masque en degre vers la droite (opaque jusqu'a 45 %, nul a
82 %) : la grille s'effacait sous la moitie droite du hero. Sur les autres
pages ce fondu degage la zone du texte ; ici le texte est a gauche et les
personnages occupent toute la largeur, le fondu ne protegeait plus rien et
coupait la grille en deux. */
.page-hero--liga .page-hero__bg-grid {
-webkit-mask-image: none;
mask-image: none;
}
/* ── PRESENCIA : LES TROIS CARTES A LA MEME HAUTEUR — 2026-08-15 ─────────
Perú est passe de « En desarrollo » a « Operación activa ». La carte perdant
une entree, elle rapetissait — 141 px contre 191 pour sa voisine — et le
trio se desalignait par le bas. Les hauteurs sont donc egalisees : chaque
carte prend celle de la plus haute, quel que soit son nombre de pays.
Le contenu reste cale en haut, sinon les listes flotteraient au milieu. */
/* PAS align-items: stretch — c'etait ma premiere correction et elle ne pouvait
rien faire. .presence__cards est en flex-direction: column : les trois
cartes sont EMPILEES, et sur cet axe stretch gouverne la largeur, pas la
hauteur. Une min-height commune est ce qui les tient.
12rem, c'est la hauteur de la plus grande (six pays) arrondie au cran
au-dessus : « En desarrollo » ne rapetisse donc pas d'avoir cede Perú. */
.presence__cards > .presence__group,
.presence__cards > .presence__fallback,
.presence__cards > .presence__float--expanding {
min-height: 12rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* ── FOOTER : LA COUVERTURE DETAILLEE ET LE BOUTON EN PILULE — 2026-08-15 ──
La couverture ne listait que cinq pays a plat. Elle reprend maintenant les
trois groupes de la section « Presencia » — operation active, en
developpement, centres de monitoreo — pour que les deux endroits du site
qui parlent d'implantation disent la meme chose. */
.site-footer__coverage strong {
display: block;
margin-bottom: 2px;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-primary-deep);
}
.site-footer__coverage-sub {
display: inline-block;
margin-top: 6px;
opacity: 0.82;
}
/* Le bouton reprend la forme des surtitres de section : meme pilule, meme
filet rouge, meme rayon. Au survol il se remplit — c'est l'animation
demandee, et elle porte sur les trois proprietes qui bougent, jamais sur
« all », qui animerait aussi la mise en page. */
.site-footer__contact-cta {
display: inline-flex !important;
align-items: center;
gap: 6px;
margin-top: var(--space-4);
padding: 6px 14px 5px;
border-radius: 9999px;
border: 1px solid color-mix(in srgb, var(--color-primary) 46%, transparent);
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
transition: background var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out),
color var(--duration-normal) var(--ease-out);
}
.site-footer__contact-cta:hover,
.site-footer__contact-cta:focus-visible {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-fg) !important;
}
@media (prefers-reduced-motion: reduce) {
.site-footer__contact-cta { transition: none; }
}
/* ── LES TROIS CADRANS S'ALIGNENT SUR LE MENU SECONDAIRE — 2026-08-15 ────
Ils etaient centres avec un ecart fixe entre eux ; leurs bords exterieurs
ne tombaient donc nulle part en particulier. Ils se repartissent desormais
sur la largeur du conteneur, ce qui pose le bord gauche du premier et le
bord droit du troisieme exactement sur la marge du site — la meme que celle
ou commence et finit le menu secondaire.
space-between remplace l'ecart fixe : c'est la largeur disponible qui
commande, plus une valeur devinee. */
@media (min-width: 62rem) {
/* NI max-width NI padding-inline ici : .how-stats vit deja dans un
.container qui porte les deux. Les ajouter posait un second padding
par-dessus le premier et decalait les cadrans de 64 px vers l'interieur
— exactement la valeur de --container-px, ce qui a rendu la cause
evidente a la mesure. space-between suffit. */
.scene-hacked--anillos .how-stats {
justify-content: space-between;
column-gap: 0;
}
}
/* ── LA BANNIERE ANIMEE DE LA HOME — 2026-08-15 ──────────────────────────
Meme cadrage que l'image qu'elle recouvre : object-fit cover, meme inset,
meme z-index. Elle ne remplace pas l'image dans le DOM, elle se pose
dessus — c'est ce qui rend le repli gratuit. */
.hero__bg-video {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
pointer-events: none;
}
/* Moins de mouvement : la video disparait et l'image reprend sa place. Elle
n'est pas seulement mise en pause — une video figee sur sa premiere image
n'est pas la meme chose que le visuel compose qui sert de poster. */
@media (prefers-reduced-motion: reduce) {
.hero__bg-video { display: none; }
}
/* ── TRAYECTORIA SUR SOL CLAIR : L'ENCRE SUIT LE FOND — 2026-08-15 ───────
La bande est passee au clair a la demande de Gabriel. Les legendes des trois
metriques gardaient l'encre pale du sol sombre et tombaient a 2,77:1 pour un
seuil de 4,5 a 14 px. Elles prennent la variante foncee, mesuree a 7,5:1.
Le chiffre lui-meme et son « + » sont deja geres par les regles generiques
du sol clair ; seules les legendes manquaient. */
.page-nosotros #trayectoria .metric__caption { color: var(--color-muted-light); }
/* Le chiffre vit dans un a l'interieur de .metric__num :
colorer le conteneur ne suffisait pas, l'enfant gardait l'encre claire du
sol sombre et rendait 1,05:1 sur le fond clair. Le « + » qui suit prend la
tension rouge, comme sur les autres sols. */
.page-nosotros #trayectoria .metric__num,
.page-nosotros #trayectoria .metric__num span:not(.unit) {
color: var(--color-fg-light);
/* -webkit-text-fill-color EST INDISPENSABLE ICI. .metrics--editorial le pose
a blanc, et cette propriete l'emporte sur color pour le rendu du glyphe :
ma regle de couleur s'appliquait bien, les chiffres restaient blancs sur
le fond clair. C'est aussi ce qui trompait mon controle de contraste, qui
ne lisait que color et annoncait zero echec sur des chiffres invisibles. */
-webkit-text-fill-color: var(--color-fg-light);
}
.page-nosotros #trayectoria .metric__num .unit {
color: var(--color-primary-deep);
-webkit-text-fill-color: var(--color-primary-deep);
}
/* Le halo rouge du chiffre etait fait pour un fond sombre ; sur du clair il
salit le contour au lieu de le faire vibrer. */
.page-nosotros #trayectoria .metric__num span { text-shadow: none; }
/* ── CERTIFICACIONES SUR SOL CLAIR : LES LOGOS REDEVIENNENT NOIRS ────────
Les quatre logos de referentiels — NIST, ITIL, MITRE ATT&CK, MISP — sont
servis en noir sur transparent et blanchis par un filtre
« brightness(0) invert(1) » fait pour le fond sombre. La section etant
passee au clair, ce filtre les rendait invisibles : blanc sur blanc.
On garde brightness(0), qui normalise n'importe quelle couleur source en
noir, et on lache l'inversion. */
main > section[data-sol="clair"] .frameworks__logos .framework-logo img,
main > section[data-sol="clair"] .framework-logo img {
filter: brightness(0) !important;
opacity: 0.78;
}
main > section[data-sol="clair"] .framework-logo:hover img { opacity: 1; }
/* ══════════════════════════════════════════════════════════════════════════
NUESTRA ESENCIA : DEUX COLONNES — 2026-08-17
══════════════════════════════════════════════════════════════════════════
La section empilait quatre blocs dans une colonne de 872 px et laissait
900 px de vide a droite sur un ecran de 1920. Elle prend la meme grammaire
que « Quiénes somos » juste au-dessus : un objet a gauche, le texte a
droite. Ici l'objet est le mot « aša » lui-meme avec son etymologie — il
est le sujet de la section, pas une illustration.
Le titre reste PLEINE LARGEUR au-dessus des deux colonnes : c'est lui qui
ouvre la section, et le couper en deux le ferait lire comme une legende. */
@media (min-width: 62rem) {
/* PLUS DE grid-row EXPLICITE ICI. Il forcait .essence-mark et .essence-body
sur la premiere rangee ; quand un troisieme bloc (.essence-lead) est
arrive, le placement automatique l'a envoye ailleurs et les colonnes se
sont inversees a l'ecran. Laisser la grille placer les enfants dans
l'ordre du DOM est ce qui garde lecture visuelle et ordre de tabulation
alignes. */
.page-nosotros #esencia .essence-duo {
display: grid;
/* Cette declaration est BATTUE : .essence-duo est declare quatre fois dans
ce fichier et c'est la derniere qui s'applique. Le vrai reglage des
colonnes se fait plus bas, cherchez « LES DEUX COLONNES S'EQUILIBRENT ». */
grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
gap: clamp(40px, 5vw, 96px);
align-items: start;
}
/* Le mot est cale en haut de sa colonne et son filet le souligne sur toute
la largeur de celle-ci. */
.page-nosotros #esencia .essence-mark { margin: 0; }
/* Le texte garde une longueur de ligne lisible meme quand la colonne
s'elargit : au-dela de 68ch l'oeil perd la ligne suivante. */
.page-nosotros #esencia .essence-body > p,
.page-nosotros #esencia .essence-body > .essence-pull { max-width: 68ch; }
}
/* ── CERTIFICACIONES : TROIS CARTES, PLUS GRANDES — 2026-08-17 ───────────
MISP et MITRE sont sortis de la bande : leurs logos viennent d'entrer dans
la ligne des referentiels juste en dessous, ils y faisaient doublon. Restent
les trois vraies certifications — FIRST, ISO 9001, ISO/IEC 27001 — et elles
prennent la place laissee libre plutot que de rester calibrees pour cinq.
Le badge passe de 32 a 56 px : c'est un sceau, on doit pouvoir le lire. */
@media (min-width: 62rem) {
.page-nosotros #certificaciones .cert-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 2vw, 32px);
}
}
.page-nosotros #certificaciones .cert-card {
padding: clamp(20px, 2vw, 30px) clamp(22px, 2.2vw, 34px);
gap: clamp(16px, 1.6vw, 24px);
align-items: center;
}
.page-nosotros #certificaciones .cert-card__badge {
width: clamp(48px, 4.4vw, 72px);
height: auto;
max-height: none;
}
.page-nosotros #certificaciones .cert-card strong {
font-size: clamp(17px, 1.5vw, 23px);
line-height: 1.2;
}
.page-nosotros #certificaciones .cert-card span {
font-size: clamp(12px, 1vw, 14px);
}
/* Les numeros du panneau des raisons : sans data-persona, --p retombe sur le
rouge de marque, qui ne rend que 4,13:1 en onglet et 2,93:1 en volet sur le
sol sombre — sous le seuil de 4,5 a 10 et 11 px. La variante relevee les
remet au-dessus sans quitter la tension rouge, et l'opacite heritee est
levee : c'est elle qui faisait tomber le volet plus bas que l'onglet. */
.solpanel--razones .solpanel__tab-method,
.solpanel--razones .solpanel__pane-method {
color: var(--color-primary-soft);
opacity: 1;
}
.solpanel--razones .solpanel__tab[aria-selected="true"] .solpanel__tab-method {
color: var(--color-primary-soft);
}
/* ── ESENCIA : LA DEVISE, EN GRAND SOUS LE MOT — 2026-08-17 ──────────────
Elle remplace le lema espagnol qui vivait au milieu du texte. Mise ici, sous
« aša », elle se lit comme la traduction du mot — ce qu'elle est — au lieu
d'interrompre le paragraphe qui l'annonce.
Le corps suit celui du mot de deux crans en dessous : assez grand pour etre
une affirmation, assez petit pour que « aša » reste le sujet. */
main > section[data-sol="clair"]
@media (min-width: 62rem) {
/* Les colonnes s'inversent : le texte prend la plus large, a gauche ; le mot
et sa devise la plus etroite, a droite. C'est l'ordre du DOM qui commande,
aucune propriete order n'est necessaire — l'ordre de lecture au clavier et
celui a l'ecran restent donc les memes. */
/* Le mot et la devise a GAUCHE, le texte a droite — l'ordre du DOM a ete
inverse avec, de sorte que la lecture au clavier suive la lecture a
l'ecran. La colonne de gauche est la plus etroite : elle porte trois
lignes, celle de droite deux paragraphes. */
.page-nosotros #esencia .essence-duo {
grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
}
}
/* ══════════════════════════════════════════════════════════════════════════
NOSOTROS : LE CTA FINAL PASSE AU BLEU — 2026-08-17
══════════════════════════════════════════════════════════════════════════
Le meme bleu que « Foco en industrias claves » : --color-csirt. La classe
--azul est portee par cette section seule, donc les CTA de la home, de
metodologia et des autres pages gardent le rouge — c'est un accent de page,
pas un changement de design system.
L'accent du titre prend la variante SOFT et non le ton plein : sur le fond
sombre du poster, la variante claire rend nettement plus que le ton plein, et
il s'agit d'un grand titre qu'on ne veut pas voir vibrer.
── L'ENCRE DU BOUTON S'INVERSE AVEC LE PASSAGE A #3773c2 — 2026-09-04 ────
La regle ecrite ici disait « le bouton garde une encre SOMBRE : le bleu plein
est clair, du blanc dessus tomberait sous le seuil ». C'etait vrai du cyan
#06B6D4, qui est une couleur claire (encre sombre 7,84:1, blanc 2,32 ✗).
Ce n'est PLUS vrai du bleu, qui est une couleur moyenne. Remesure :
aplat #3773c2 · encre #101010 3,98:1 ECHEC
aplat #3773c2 · blanc #FFFFFF 4,78:1 OK
Le libelle passe donc au blanc, et c'est le seul etat conforme.
AU SURVOL, L'INVERSE : le fond devient la variante claire #60A5FA, sur
laquelle le blanc tombe a 2,54 ✗ et l'encre sombre rend 7,48 ✓. Le libelle
change donc de couleur entre repos et survol. Ce n'est pas une coquetterie :
c'est ce que les deux aplats imposent, l'un fonce et l'autre clair.
Comme le rouge de marque a 4,62, le blanc au repos est conforme SANS MARGE :
ne pas descendre ce libelle sous 16 px. */
.final-cta--azul .final-cta__title .accent,
.final-cta--azul .final-cta__title .final-cta__accent,
.final-cta--azul .final-cta__title .accent .split-word {
color: var(--color-csirt-soft) !important;
-webkit-text-fill-color: var(--color-csirt-soft) !important;
}
.final-cta--azul .btn-primary {
background: var(--color-csirt) !important;
border-color: var(--color-csirt) !important;
color: #FFFFFF !important;
}
/* ── LE SURVOL DU CTA : LE FOND NE BOUGE PLUS 2026-09-06 ──────────────
Gabriel : « retire l'effet d'eclaircissement des boutons, l'animation que
je veux est le changement de couleur des lettres de blanc a noir,
apparition d'un halo autour, et une petite animation ou le bouton bouge un
peu vers le haut ».
Ce bouton garde donc son aplat #3773C2 aux deux etats. Ce qui joue au
survol : l'encre bascule vers #101010, le halo bleu apparait (24 px a
45 %), et le bouton monte de 1 px — cette elevation lui vient d'ailleurs
dans la feuille, elle n'est pas redeclaree ici pour ne pas l'ecraser.
LE PRIX, MESURE : sans l'eclaircissement, l'encre sombre rend 3,98:1 sur ce
bleu, pour un seuil de 4,5. C'etait 7,48:1 tant que le fond s'eclaircissait.
Repasser le seuil a fond fixe demanderait d'eclaircir l'aplat AU REPOS
d'environ 18 %, donc de changer le bleu de la marque. Arbitrage de Gabriel,
signale et assume.
LA REGLE VAUT SUR LES SEPT PAGES, et c'est voulu : le CTA est un composant
unique repete, un geste different selon la page serait un defaut a lui
seul. NE PAS le « realigner » sur le hero, arbitrage deja tranche le
2026-09-06 apres un aller-retour. */
.final-cta--azul .btn-primary:hover,
.final-cta--azul .btn-primary:focus-visible {
background: var(--color-csirt) !important;
border-color: var(--color-csirt) !important;
color: var(--color-fg-light) !important;
-webkit-text-fill-color: var(--color-fg-light) !important;
}
/* Les quatre equerres de coin et la pastille de la ligne de meta suivent. */
.final-cta--azul .final-cta__corner {
border-color: color-mix(in srgb, var(--color-csirt) 62%, transparent) !important;
}
.final-cta--azul .final-cta__meta-dot {
background: var(--color-csirt) !important;
box-shadow: 0 0 8px var(--color-csirt) !important;
}
/* Les deux equerres de la carte, en ::before et ::after de .final-cta__inner.
Elles ne portent pas de classe a elles, il faut donc les viser par leur
pseudo-element — c'est ce qui les avait laissees rouges quand tout le reste
du CTA est passe au bleu. Et la pastille pulsee de l'eyebrow avec elles. */
.final-cta--azul .final-cta__inner::before,
.final-cta--azul .final-cta__inner::after {
border-color: var(--color-csirt) !important;
}
.final-cta--azul .final-cta__eyebrow .pulse {
background: var(--color-csirt) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
POR QUE PREFERIRNOS : COULEURS ET FONDS, COMME #soluciones — 2026-08-17
══════════════════════════════════════════════════════════════════════════
Les regles de fond de #soluciones sont scopees a cette section : elles ne
pouvaient pas servir ici. On les reprend pour #razones plutot que de
descoper les originales — un selecteur qui s'appliquerait partout finirait
par teinter une section qui ne l'a pas demande.
La section doit etre un repere de position, sinon les calques en absolu
remonteraient jusqu'a un ancetre plus haut et couvriraient la page. */
.page-nosotros #razones { position: relative; overflow: hidden; }
#razones .solpanel__fond {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
#razones .solpanel__fond span {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity var(--duration-slow, 420ms) var(--ease-out);
}
/* 0,20 et non 0,45 comme sur #soluciones : la, le panneau est pose sur un sol
sombre uni ; ici la section porte deja des cartes et un texte long, et
au-dela de 0,2 la mesure de contraste des libelles commencait a tomber. */
#razones .solpanel__fond span.is-on { opacity: 0.20; }
/* Les six photos de cette section, produites pour elle le 2026-08-17.
Elles ne sont plus celles de #soluciones : chaque raison a desormais son
image, et le persona de chaque onglet a ete realigne sur la dominante de
son image pour que le filet, le libelle actif et le fond s'accordent.
Le calque reste a opacity 0.20 : c'est lui qui porte la lisibilite du
texte par-dessus, et il vaut aussi pour ces photos plus lumineuses. */
#razones .solpanel__fond span[data-bg="zerotrust"] { background-image: url('../assets/images/bg/razones/zerotrust.webp'); }
#razones .solpanel__fond span[data-bg="ngsoc"] { background-image: url('../assets/images/bg/razones/ngsoc.webp'); }
#razones .solpanel__fond span[data-bg="grc"] { background-image: url('../assets/images/bg/razones/grc.webp'); }
#razones .solpanel__fond span[data-bg="csirt"] { background-image: url('../assets/images/bg/razones/csirt.webp'); }
#razones .solpanel__fond span[data-bg="ctem"] { background-image: url('../assets/images/bg/razones/ctem-nuit.webp'); }
#razones .solpanel__fond span[data-bg="bridge"] { background-image: url('../assets/images/bg/razones/bridge.webp'); }
@media (prefers-reduced-motion: reduce) {
#razones .solpanel__fond span { transition: none; }
}
/* Le contenu passe devant les calques. */
.page-nosotros #razones > .container { position: relative; z-index: 1; }
/* Les six couleurs. bridge n'a pas de token a lui : c'est le tronc commun
ASHA, il prend le rouge de marque. */
#razones .solpanel__tab[data-persona="ctem"], #razones .solpanel__pane[data-persona="ctem"] { --p: var(--color-ctem); }
#razones .solpanel__tab[data-persona="ngsoc"], #razones .solpanel__pane[data-persona="ngsoc"] { --p: var(--color-ngsoc); }
#razones .solpanel__tab[data-persona="csirt"], #razones .solpanel__pane[data-persona="csirt"] { --p: var(--color-csirt); }
#razones .solpanel__tab[data-persona="zerotrust"], #razones .solpanel__pane[data-persona="zerotrust"] { --p: var(--color-zerotrust); }
#razones .solpanel__tab[data-persona="grc"], #razones .solpanel__pane[data-persona="grc"] { --p: var(--color-grc); }
#razones .solpanel__tab[data-persona="bridge"], #razones .solpanel__pane[data-persona="bridge"] { --p: var(--color-primary); }
/* Le numero suit desormais la couleur de sa raison, et non plus le rouge
unique — la regle posee ce matin devient donc conditionnelle : elle ne vaut
plus que pour bridge, dont le ton EST le rouge et qui a besoin de la
variante relevee pour tenir le seuil. */
#razones .solpanel__tab-method,
#razones .solpanel__pane-method { color: var(--p); opacity: 1; }
#razones .solpanel__tab[data-persona="bridge"] .solpanel__tab-method,
#razones .solpanel__pane[data-persona="bridge"] .solpanel__pane-method { color: var(--color-primary-soft); }
/* ── ESENCIA : LE RAPPORT ENTRE LE MOT ET LA DEVISE S'INVERSE — 2026-08-17 ──
« aša » etait le plus gros element de la colonne, la devise deux crans en
dessous. C'est la devise qui porte le propos — le mot n'est que son origine
— et elle passe donc devant. Le mot reste lisible et reconnaissable, il
cesse simplement d'ecraser la phrase qu'il annonce. */
.essence-mark__word { font-size: clamp(56px, 5.4vw, 96px) !important; }
/* nosotros porte un sous-menu comme metodologia : sa hero prend la MEME
formule, celle qui reserve la place de ce sous-menu. Avec la formule
generique la barre tombait 10 px plus bas que sur metodologia — assez pour
se voir en passant d'une page a l'autre.
CETTE REGLE DOIT RESTER APRES « .page-hero:not(.page-hero--liga) » : les
deux valent une specificite de (0,2,0) — :not compte son argument — et a
egalite c'est la derniere ecrite qui gagne. Placee avant, elle etait sans
effet, ce que la mesure a montre tout de suite. */
.page-nosotros .page-hero {
min-height: calc(100svh - var(--header-h) - var(--subnav-h));
}
/* La pastille de date d'un pays sans date connue : Peru est entre en operation
active sans que sa date d'ouverture soit etablie, et une pilule vide se lit
comme une donnee manquante plutot que comme une donnee absente. On la
masque — l'inventer aurait ete pire. */
#presencia .country__since:empty { display: none; }
/* ══════════════════════════════════════════════════════════════════════════
QUATRE CORRECTIONS DU 2026-08-17
══════════════════════════════════════════════════════════════════════════ */
/* ── 1. LES SURTITRES DU SOL-0 PRENNENT LA PILULE DES AUTRES ─────────────
La serie couvrait sol-2 et sol-clair, jamais sol-0 : sur nosotros, les
surtitres de « Nuestra esencia », « Por qué preferirnos » et « Alianzas »
restaient des rectangles a angles vifs sans padding, a cote de pilules.
Meme recette que le sol-2, l'encre claire y rendant tout aussi bien. */
main > section[data-sol="0"] > .container .eyebrow,
main > section[data-sol="0"] .section-head .eyebrow {
display: inline-block;
background: rgba(23, 23, 23, 0.55);
border: 1px solid rgba(220, 38, 38, 0.42);
border-radius: 9999px;
padding: 5px 12px 4px;
color: rgba(248, 250, 252, 0.96);
}
/* ── 2. CASOS DE EXITO PASSE AU VERT ─────────────────────────────────────
--color-grc rend 7,07:1 sur le sol-2, mesure : il passe partout ou le rouge
passait, y compris sur les petits corps. La bordure de l'onglet actif et les
grands chiffres suivent, sinon la section garderait deux tensions. */
#casos-exito .section-title .accent,
#casos-exito .section-title .accent .split-word {
color: var(--color-grc) !important;
-webkit-text-fill-color: var(--color-grc) !important;
}
#casos-exito .cases__tab[aria-selected="true"],
#casos-exito .cases__tab.is-active {
border-color: var(--color-grc) !important;
color: var(--color-fg) !important;
}
#casos-exito .case-fig__num,
#casos-exito .case-fig__unit {
color: var(--color-grc) !important;
-webkit-text-fill-color: var(--color-grc) !important;
}
#casos-exito .ring-stat__dial,
#casos-exito .case-fig__ring { --p: var(--color-grc); }
/* ── 3. POR QUE PREFERIRNOS : LE TITRE ET SON SURTITRE EN BLEU ───────────
Le meme bleu que « Foco en industrias claves » et que le CTA final. Les six
couleurs de persona restent sur les onglets et les fonds : elles distinguent
les raisons entre elles, le bleu identifie la section. */
#razones .section-title .accent,
#razones .section-title .accent .split-word {
color: var(--color-csirt-soft) !important;
-webkit-text-fill-color: var(--color-csirt-soft) !important;
}
#razones .eyebrow {
background: color-mix(in srgb, var(--color-csirt) 14%, transparent) !important;
border-color: color-mix(in srgb, var(--color-csirt) 46%, transparent) !important;
color: var(--color-csirt-soft) !important;
}
/* ── 4. ESENCIA : LA DEVISE A GAUCHE, LE MOT A DROITE ET PLUS PETIT ──────
Trois blocs et non deux : la devise ouvre a gauche en grand, le texte la
suit dessous, et le mot avec son etymologie se retire a droite en petit —
c'est une note d'origine, pas le sujet. */
@media (min-width: 62rem) {
.page-nosotros #esencia .essence-duo {
grid-template-columns: minmax(0, 1.32fr) minmax(220px, 0.68fr);
}
}
.essence-mark__word { font-size: clamp(34px, 3vw, 52px) !important; }
.essence-mark__lang { font-size: clamp(10px, 0.78vw, 12px) !important; }
/* ── LA DEVISE : UNE SEULE REGLE, ET ASSEZ SPECIFIQUE POUR PASSER ────────
Trois declarations de .essence-motto s'etaient empilees au fil des reglages,
et aucune ne s'appliquait : « .essence-body p » vaut (0,1,1) et les battait
toutes a (0,1,0). La devise s'affichait a 18 px au lieu de 60.
Le selecteur porte donc la classe ET l'element, ce qui suffit a passer
devant sans recourir a !important. */
.essence-body p.essence-motto,
.essence-lead p.essence-motto {
margin: 0 0 clamp(20px, 2vw, 32px);
font-size: clamp(32px, 3.6vw, 60px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
/* La couleur ne se decide PAS ici : la devise porte un
et ses deux moities ont deux encres. Voir la declaration en fin de fichier,
qui est celle qui gagne — ce selecteur est declare quatre fois dans ce
fichier, et a specificite egale c'est la derniere qui s'applique. */
/* Le plafond de 24ch la bornait a 554 px a 1440, quand il lui en faut 640
pour tenir sa ligne : c'est lui qui la cassait en deux, avant meme la
colonne. C'est desormais la colonne qui fait la contrainte, et elle a ete
dimensionnee pour. */
max-width: none;
}
main > section[data-sol="clair"] .essence-body p.essence-motto,
main > section[data-sol="clair"] .essence-lead p.essence-motto { color: var(--color-primary-deep); }
/* ── ESENCIA : LA DEVISE SEULE A GAUCHE — 2026-08-17 ─────────────────────
La colonne de gauche ne porte plus qu'une phrase : elle peut donc etre
etroite, et la devise y respire sur trois ou quatre lignes plutot que de
traverser la page. La colonne de droite reprend le mot, son etymologie et
l'explication, qui se lisent ensemble.
La devise se cale en haut, sur la meme ligne que le mot d'en face. */
@media (min-width: 62rem) {
/* LA DEVISE TIENT SUR DEUX LIGNES, LA COLONNE REVIENT AU TEXTE — 2026-08-22.
Elle avait ete elargie le meme jour pour loger « How things should be
done. » sur une seule ligne ; Gabriel a tranche pour deux lignes, avec la
coupure apres « How things ». Sur deux lignes la devise ne reclame plus que
la moitie de la largeur, et les 1,06fr qu'on lui avait donnes seraient pris
au texte pour rien.
Le partage revient donc a 0,8 contre 1,2, sa valeur d'origine : le texte
retrouve ses 764 px a 1440, soit une longueur de lecture confortable.
C'est ICI qu'il faut regler : .essence-duo est declare quatre fois dans ce
fichier, et a specificite egale c'est la derniere qui gagne. */
.page-nosotros #esencia .essence-duo {
grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
align-items: start;
}
}
.essence-lead p.essence-motto {
margin: 0;
font-size: clamp(32px, 3.4vw, 58px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--color-primary-soft);
/* Le plafond de 16ch bornait la devise a 370 px quand il lui en faut 640
pour tenir sa ligne : c'est lui qui la cassait en deux, avant meme la
colonne. C'est desormais la colonne qui fait la contrainte, et elle a ete
dimensionnee pour. */
max-width: none;
}
main > section[data-sol="clair"] .essence-lead p.essence-motto { color: var(--color-primary-deep); }
/* Le mot ouvre la colonne de droite : marge basse pour le detacher du premier
paragraphe, aucune marge haute pour qu'il s'aligne sur la devise. */
.essence-body .essence-mark { margin: 0 0 clamp(20px, 2vw, 30px); }
/* ── CASOS DE EXITO : LES DERNIERS ROUGES PASSENT AU VERT — 2026-08-17 ────
Le surtitre, la bordure de l'onglet actif et l'anneau du chiffre etaient
restes rouges : le premier n'etait pas dans ma liste, le deuxieme se marque
par .is-active et non par aria-selected — le script pose les deux, mais la
regle ne visait que l'attribut — et le troisieme prend sa couleur d'une
variable --fill que je n'avais pas redefinie. */
#casos-exito .eyebrow {
background: color-mix(in srgb, var(--color-grc) 14%, transparent) !important;
border-color: color-mix(in srgb, var(--color-grc) 46%, transparent) !important;
color: var(--color-grc) !important;
}
#casos-exito .cases__tab.is-active,
#casos-exito .cases__tab[aria-selected="true"] {
border-color: var(--color-grc) !important;
background: color-mix(in srgb, var(--color-grc) 10%, transparent) !important;
}
#casos-exito .ring-stat,
#casos-exito .case-ring,
#casos-exito [class*="ring"] { --p: var(--color-grc); --ring: var(--color-grc); }
#casos-exito .ring-stat__dial,
#casos-exito .case-fig__dial {
background: conic-gradient(var(--color-grc) calc(var(--fill, 0) * 1%), rgba(248,250,252,0.10) 0) !important;
}
/* ── CERTIFICACIONES : LES SCEAUX SEULS, EN GRAND, ET LE TITRE CENTRE ─────
Les trois cartes portaient chacune un sceau et deux lignes de libelle qui
redisaient ce que le sceau montre deja. Il ne reste que l'image, nettement
plus grande — c'est ce qu'on regarde. Le titre de la section se centre, et
pour elle seule : c'est la seule page ou une exception a l'alignement a
gauche se justifie, trois objets identiques centres sous un titre centre. */
.page-nosotros #certificaciones .section-head { text-align: center; }
.page-nosotros #certificaciones .section-head .section-title,
.page-nosotros #certificaciones .section-head .section-lede { margin-inline: auto; text-align: center; }
.page-nosotros #certificaciones .section-head .eyebrow { margin-inline: auto; }
.page-nosotros #certificaciones .cert-card {
justify-content: center;
padding: clamp(26px, 2.6vw, 40px);
}
.page-nosotros #certificaciones .cert-card__badge {
width: clamp(92px, 9vw, 150px);
height: auto;
max-height: none;
}
/* Les marcos de referencia prennent toute la largeur de la section, avec les
logos repartis dessus plutot que serres a gauche. */
.page-nosotros #certificaciones .about-frameworks { width: 100%; }
.page-nosotros #certificaciones .frameworks__label { text-align: center; }
.page-nosotros #certificaciones .frameworks__logos {
display: flex;
flex-wrap: wrap;
/* center et non space-between : reparti sur toute la largeur, NIST se
collait au bord gauche et MISP au bord droit, les quatre logos se lisant
alors comme quatre elements separes plutot que comme une ligne. Centres
avec une gouttiere large, ils forment un groupe sous le titre — lui aussi
centre dans cette section. */
justify-content: center;
align-items: center;
/* PLUS D'AIR, DEMANDE DEUX FOIS — 2026-08-22. La premiere passe avait
augmente le gap de la regle generique (ligne ~8250) : sans effet, parce
que CETTE declaration, plus specifique et plus bas dans le fichier, la
bat. Mesure a l'appui, l'ecart etait reste a 64,8 px a 1440.
La valeur est calee sur la place reellement disponible : a 1440 les quatre
logos n'occupent que 504 px des 1 325 px du conteneur, il en restait 626
inutilises. A 8vw, l'ecart vaut 115 px et la rangee tient toujours sur une
seule ligne jusqu'a 768 px. */
/* Troisieme passe, demandee a nouveau : 11vw, soit 158 px a 1440. Les quatre
logos et leurs trois ecarts occupent alors 978 px des 1 325 px disponibles,
la rangee tient toujours sur une ligne jusqu'a 768 px, et il reste de quoi
respirer de chaque cote. */
gap: clamp(48px, 11vw, 200px);
width: 100%;
}
.page-nosotros #certificaciones .frameworks__grid {
justify-content: center;
width: 100%;
}
/* ── SOLUCIONES : LE TITRE ET SON SURTITRE EN BLEU — 2026-08-17 ──────────
Meme bleu que « Foco en industrias claves », « Por qué preferirnos » et les
CTA finaux. Les six couleurs de persona restent sur les onglets, les volets
et les fonds : elles distinguent les solutions entre elles, le bleu
identifie la section. */
/* ── TROIS EXCEPTIONS AU ROUGE DES TITRES 2026-08-22 ────────────────
Gabriel affine la consigne de la veille : CINQ sections gardent la couleur de
leur persona, et elles seules. Sur la home, « Soluciones » et « Foco en
industrias clave » en BLEU, « Casos de exito » en VERT. Sur nosotros,
« Por que preferirnos » en BLEU et « Certificaciones » en VERT — celle-ci
dans la variante encre, la seule qui tienne sur son sol clair.
La regle generale ne change pas et reste ecrite plus haut : un seul rouge de
titre, #B01E1E sur fond clair et #DC2626 sur fond sombre. Ces trois sections
sont des exceptions NOMMEES, pas un retour a l'etat d'avant — la ou l'on
comptait six couleurs de titre sans regle, on en compte maintenant deux plus
trois exceptions assumees.
Contrastes mesures sur leurs sols respectifs : le bleu clair rend 11,11:1 sur
le sol 2 et 12,71:1 sur le sol 1, le vert 7,07:1. Tous trois tres au-dessus
du seuil de 3:1 applicable a ces titres (48 px, poids 700). */
#soluciones .section-title .accent,
#soluciones .section-title .accent .split-word {
color: var(--color-csirt-soft) !important;
-webkit-text-fill-color: var(--color-csirt-soft) !important;
}
#soluciones > .container > .section-head .eyebrow,
#soluciones .section-head .eyebrow {
background: color-mix(in srgb, var(--color-csirt) 14%, transparent) !important;
border-color: color-mix(in srgb, var(--color-csirt) 46%, transparent) !important;
color: var(--color-csirt-soft) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
CINQ CORRECTIONS DU 2026-08-17 (suite)
══════════════════════════════════════════════════════════════════════════ */
/* ── 1. LE TITRE DE CERTIFICACIONES AU CENTRE DE LA PAGE ─────────────────
text-align: center centrait le texte DANS .section-head, un bloc de 1060 px
lui-meme cale a gauche : son centre tombait a 674 px quand celui de la page
est a 960. Il faut donc centrer LE BLOC, pas seulement son contenu. */
.page-nosotros #certificaciones .section-head {
margin-inline: auto;
max-width: min(100%, 1060px);
}
/* ── 2. LES QUATRE LOGOS DE REFERENTIELS, PLUS GRANDS ────────────────────
Ils faisaient 21 a 26 px de haut, soit la taille d'une ligne de texte.
La hauteur est desormais imposee et la largeur suit : les quatre logos
n'ont pas le meme rapport, seule une hauteur commune les met a la meme
echelle optique. */
.page-nosotros #certificaciones .frameworks__logos img {
height: clamp(30px, 3vw, 52px) !important;
width: auto !important;
max-height: none !important;
max-width: none !important;
}
/* ── 3. CERTIFICACIONES EN VERT ──────────────────────────────────────────
Le meme vert que « Casos de éxito » : la section parle de certifications
obtenues, un fait acquis, et le vert le dit mieux que la tension rouge.
Sur le sol clair, la variante ink : --color-grc n'y rend que 2,1:1, ce que
la mesure a confirme, alors que #17843F passe. */
.page-nosotros #certificaciones .section-title .accent,
.page-nosotros #certificaciones .section-title .accent .split-word {
color: var(--color-grc-ink) !important;
-webkit-text-fill-color: var(--color-grc-ink) !important;
}
.page-nosotros #certificaciones .section-head .eyebrow {
background: color-mix(in srgb, var(--color-grc) 12%, transparent) !important;
border-color: color-mix(in srgb, var(--color-grc) 46%, transparent) !important;
/* Un cran plus sombre que --color-grc-ink : celui-ci rend 4,13:1 sur la
pilule claire, juste sous le seuil de 4,5 exige par ces 12 px. Le melange
a 78 % avec du noir monte a 6,58:1. Le TITRE, lui, garde le ton ink :
a 47 px son seuil est 3, et il le passe largement. */
color: color-mix(in srgb, var(--color-grc-ink) 78%, black) !important;
}
/* ── 4. LE CERCLE DE CASOS DE EXITO EN VERT ──────────────────────────────
Il s'appelle .case-ring__dial et non .ring-stat__dial : mes regles
precedentes visaient les deux autres anneaux du site et laissaient
celui-la en rouge. L'angle de depart et le reste du degrade sont repris
tels quels, seule la couleur change. */
#casos-exito .case-ring__dial {
background-image: conic-gradient(from 220deg,
var(--color-grc) calc(var(--fill, 0) * 1%),
rgba(248, 250, 252, 0.16) 0deg) !important;
}
/* ── 5. LE BADGE « ANTES » EN GRIS ───────────────────────────────────────
« Antes » decrit l'etat de depart : le colorer lui donnait le meme poids
qu'« Después », qui est le resultat. En gris il devient ce qu'il est, un
repere de comparaison. */
#casos-exito .case-flow__tag--before {
background: rgba(248, 250, 252, 0.07) !important;
border-color: rgba(248, 250, 252, 0.22) !important;
color: var(--color-muted-lift) !important;
}
/* La devise se centre verticalement sur la colonne de texte. align-self et
non align-items sur la grille : celui-ci aurait aussi recentre la colonne
de droite, dont le premier mot doit rester au niveau du titre. */
@media (min-width: 62rem) {
.page-nosotros #esencia .essence-lead { align-self: center; }
}
/* ══════════════════════════════════════════════════════════════════════════
HERO DE METODOLOGIA : LES BOUTONS REVEILLENT LEUR PERSONNAGE — 2026-08-17
══════════════════════════════════════════════════════════════════════════
1. LE LIBELLE PREND SA COULEUR. Au survol, les six libelles passaient tous
au rouge : la regle de survol utilisait --color-primary alors que chaque
noeud porte deja son --persona-color. Il suffisait de s'en servir.
2. LE PERSONNAGE S'ALLUME. Survoler « ASHA » remet la capitane a pleine
opacite et rallume son halo, et ainsi des six.
POURQUOI :has(). Le bouton et le personnage sont deux branches separees du
hero — aucun selecteur de descendance ou de fratrie ne relie l'un a l'autre.
:has() sur leur ancetre commun le fait sans une ligne de JavaScript, et sur
un navigateur qui ne le connait pas la regle est simplement ignoree : on
perd l'effet, jamais la page. */
.liga-constellation__node:hover .liga-constellation__label,
.liga-constellation__node:focus-visible .liga-constellation__label {
color: var(--persona-color, var(--color-primary));
}
/* ASHA seule prend la variante relevee : sa couleur de persona EST le rouge de
marque, qui rend 4,35:1 sur le noir a ces 12 px — sous le seuil de 4,5.
Les cinq autres tons sont clairs et passent de 7,49 a 17,03:1, mesures.
C'est la quatrieme fois aujourd'hui que ce meme couple #DC2626 sur fond
sombre a petite taille demande la variante soft. */
.liga-constellation__node[data-persona="asha"]:hover .liga-constellation__label,
.liga-constellation__node[data-persona="asha"]:focus-visible .liga-constellation__label {
color: var(--color-primary-soft);
}
.liga-constellation__node:hover .liga-constellation__dot {
background: var(--persona-color, var(--color-primary));
box-shadow: 0 0 10px var(--persona-color, var(--color-primary));
}
/* La transition doit etre declaree sur l'etat de repos, sinon le retour se
fait d'un coup : c'est l'element qui porte la transition, pas le survol. */
.liga-row__fig img,
.liga-row__fig::before {
transition: opacity var(--duration-normal) var(--ease-out),
filter var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.page-hero--liga:has(.liga-constellation__node[data-persona="asha"]:hover) .liga-row__fig[data-persona="asha"] img,
.page-hero--liga:has(.liga-constellation__node[data-persona="asha"]:focus-visible) .liga-row__fig[data-persona="asha"] img {
opacity: 1;
filter: none;
}
.page-hero--liga:has(.liga-constellation__node[data-persona="asha"]:hover) .liga-row__fig[data-persona="asha"]::before,
.page-hero--liga:has(.liga-constellation__node[data-persona="asha"]:focus-visible) .liga-row__fig[data-persona="asha"]::before {
opacity: 1;
transform: translateX(-50%) scale(1.12);
}
.page-hero--liga:has(.liga-constellation__node[data-persona="zerotrust"]:hover) .liga-row__fig[data-persona="zerotrust"] img,
.page-hero--liga:has(.liga-constellation__node[data-persona="zerotrust"]:focus-visible) .liga-row__fig[data-persona="zerotrust"] img {
opacity: 1;
filter: none;
}
.page-hero--liga:has(.liga-constellation__node[data-persona="zerotrust"]:hover) .liga-row__fig[data-persona="zerotrust"]::before,
.page-hero--liga:has(.liga-constellation__node[data-persona="zerotrust"]:focus-visible) .liga-row__fig[data-persona="zerotrust"]::before {
opacity: 1;
transform: translateX(-50%) scale(1.12);
}
.page-hero--liga:has(.liga-constellation__node[data-persona="ngsoc"]:hover) .liga-row__fig[data-persona="ngsoc"] img,
.page-hero--liga:has(.liga-constellation__node[data-persona="ngsoc"]:focus-visible) .liga-row__fig[data-persona="ngsoc"] img {
opacity: 1;
filter: none;
}
.page-hero--liga:has(.liga-constellation__node[data-persona="ngsoc"]:hover) .liga-row__fig[data-persona="ngsoc"]::before,
.page-hero--liga:has(.liga-constellation__node[data-persona="ngsoc"]:focus-visible) .liga-row__fig[data-persona="ngsoc"]::before {
opacity: 1;
transform: translateX(-50%) scale(1.12);
}
.page-hero--liga:has(.liga-constellation__node[data-persona="csirt"]:hover) .liga-row__fig[data-persona="csirt"] img,
.page-hero--liga:has(.liga-constellation__node[data-persona="csirt"]:focus-visible) .liga-row__fig[data-persona="csirt"] img {
opacity: 1;
filter: none;
}
.page-hero--liga:has(.liga-constellation__node[data-persona="csirt"]:hover) .liga-row__fig[data-persona="csirt"]::before,
.page-hero--liga:has(.liga-constellation__node[data-persona="csirt"]:focus-visible) .liga-row__fig[data-persona="csirt"]::before {
opacity: 1;
transform: translateX(-50%) scale(1.12);
}
.page-hero--liga:has(.liga-constellation__node[data-persona="ctem"]:hover) .liga-row__fig[data-persona="ctem"] img,
.page-hero--liga:has(.liga-constellation__node[data-persona="ctem"]:focus-visible) .liga-row__fig[data-persona="ctem"] img {
opacity: 1;
filter: none;
}
.page-hero--liga:has(.liga-constellation__node[data-persona="ctem"]:hover) .liga-row__fig[data-persona="ctem"]::before,
.page-hero--liga:has(.liga-constellation__node[data-persona="ctem"]:focus-visible) .liga-row__fig[data-persona="ctem"]::before {
opacity: 1;
transform: translateX(-50%) scale(1.12);
}
.page-hero--liga:has(.liga-constellation__node[data-persona="grc"]:hover) .liga-row__fig[data-persona="grc"] img,
.page-hero--liga:has(.liga-constellation__node[data-persona="grc"]:focus-visible) .liga-row__fig[data-persona="grc"] img {
opacity: 1;
filter: none;
}
.page-hero--liga:has(.liga-constellation__node[data-persona="grc"]:hover) .liga-row__fig[data-persona="grc"]::before,
.page-hero--liga:has(.liga-constellation__node[data-persona="grc"]:focus-visible) .liga-row__fig[data-persona="grc"]::before {
opacity: 1;
transform: translateX(-50%) scale(1.12);
}
/* Le cadre de survol des trois sceaux passe au vert, comme le reste de la
section. Deux regles le posaient en rouge — .cert-card:hover et
.section--dark .cert-card:hover — et la seconde s'applique encore bien que
la section soit passee au clair : elle porte toujours la classe
section--light ET section--dark n'a jamais ete retiree du HTML. On vise donc
par l'id, qui passe devant les deux. */
.page-nosotros #certificaciones .cert-card:hover,
.page-nosotros #certificaciones .cert-card:focus-within {
border-color: var(--color-grc) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10),
0 0 0 1px color-mix(in srgb, var(--color-grc) 40%, transparent) !important;
}
/* La devise porte desormais un : sa premiere moitie
reste en encre claire, la seconde prend la tension rouge. La regle de
couleur devait donc quitter le paragraphe entier pour ne viser que ce qui
n'est pas accentue — sinon le rouge s'appliquait aux deux moities. */
.essence-lead p.essence-motto { color: var(--color-fg); }
/* L'ACCENT DE LA DEVISE : BLEU LE 22/08, ROUGE LE 08/09, ET C'EST LE MEME
DEMANDEUR. Gabriel avait dit « change le rouge de how things should be done
par le bleu qu'on utilise » ; il dit aujourd'hui « le "should be done." sur
la version ordi doit etre en rouge ». Le telephone l'a deja depuis ce matin,
le bureau le rejoint : c'est le SEUL des quatre points du soir qui ne
concerne pas le telephone, et Gabriel l'a precise de lui-meme.
C'est bien l'ACCENT qu'on change et non le paragraphe : la premiere moitie
garde son encre claire, c'est l'architecture posee ici et elle est juste.
--color-primary-lift ET NON --color-primary : c'est le token prevu pour du
rouge en TEXTE sur sol sombre. Mesure a ce corps (49 px, 700) sur le noir de
la section : 5,05:1 pour le lift contre un seuil de 3 pour du texte large.
Le rouge plein descendrait a 3,6:1 — il passerait aussi, mais on prend celui
qui est fait pour, et c'est celui que le telephone utilise deja depuis ce
matin. Les deux affichages disent donc exactement la meme couleur.
La regle est ecrite ICI et nulle part ailleurs : ce selecteur est declare
quatre fois dans ce fichier, et a specificite egale c'est la derniere qui
s'applique. Une couleur posee plus haut n'aurait rien fait — essaye le
22/08, mesure blanche, corrige. */
.essence-lead p.essence-motto .accent { color: var(--color-primary-lift); }
main > section[data-sol="clair"] .essence-lead p.essence-motto { color: var(--color-fg-light); }
/* Sur sol clair le rouge lift tomberait sous le seuil : c'est le rouge profond
qui y va, le token prevu pour du texte rouge sur fond clair. Regle dormante
aujourd'hui, la section etant sombre — elle existe pour que la bascule de sol
ne fasse pas disparaitre la devise. */
main > section[data-sol="clair"] .essence-lead p.essence-motto .accent { color: var(--color-primary-deep); }
/* ══════════════════════════════════════════════════════════════════════════
CASOS DE EXITO : LE VOLET EN TROIS TEMPS — 2026-08-17
══════════════════════════════════════════════════════════════════════════
Antecedentes, Solución, Resultado. Le motif Antes/Después a deux colonnes ne
pouvait pas porter trois temps : les trois blocs s'empilent, chacun ouvert
par son etiquette et suivi de ses points.
La coloration dit le sens de la lecture : le premier bloc en gris — c'est
l'etat de depart, pas un resultat — les deux suivants en vert, comme le
reste de la section. Le meme arbitrage que le badge « Antes ». */
.cases__story--steps {
display: grid;
gap: clamp(18px, 1.8vw, 28px);
}
.case-step {
padding: clamp(16px, 1.6vw, 24px) clamp(18px, 1.8vw, 26px);
border: 1px solid rgba(248, 250, 252, 0.10);
border-left-width: 3px;
border-radius: var(--radius-md);
background: rgba(248, 250, 252, 0.02);
}
.case-step__tag {
margin: 0 0 clamp(10px, 1vw, 14px);
font: 700 11px/1 var(--font-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.case-step__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 7px;
}
.case-step__list li {
position: relative;
padding-left: 16px;
font-size: var(--text-sm);
line-height: 1.55;
color: var(--color-muted-lift);
}
/* La puce est un tiret cadratin, pas un disque : ce sont des constats, pas une
liste de courses. */
.case-step__list li::before {
content: '—';
position: absolute;
left: 0;
opacity: 0.55;
}
/* L'etat de depart en gris, les deux temps suivants en vert. */
.case-step--antecedentes { border-left-color: rgba(248, 250, 252, 0.28); }
.case-step--antecedentes .case-step__tag { color: var(--color-muted-lift); }
.case-step--solucion,
.case-step--resultado { border-left-color: var(--color-grc); }
.case-step--solucion .case-step__tag,
.case-step--resultado .case-step__tag { color: var(--color-grc); }
/* Le resultat est ce qu'on retient : son fond est un peu plus present. */
.case-step--resultado { background: color-mix(in srgb, var(--color-grc) 6%, transparent); }
/* ── HERO : LE SOUS-TITRE ET LA LIGNE DE SCEAUX SE RECALENT — 2026-08-17 ──
.hero__subtitle portait une max-width de 640 px avec des marges
automatiques : il se centrait dans la colonne et son premier caractere
tombait a 362 px quand tout le reste du hero commence a 144. La ligne de
sceaux se decalait de la meme facon a 1440.
La borne de longueur reste — une ligne de 640 px se lit bien — seule la
marge automatique part, ce qui la cale a gauche comme ses voisines. */
.hero__subtitle {
margin-inline: 0 auto;
text-align: left;
}
/* PAS DE REGLE SUR .hero__trust-line : je l'avais crue desalignee parce que
son bord gauche tombe a 467 px. Elle vit en fait dans un flex
.hero__trust--inline, a DROITE des deux points d'appui — c'est le layout
voulu, pas un defaut. Seul le sous-titre au-dessus etait reellement centre
par une marge automatique. */
/* Le lede joint du hero : encre claire pleine, une seule voix. Les deux
paragraphes precedents n'avaient ni le meme corps ni la meme encre, ce qui
faisait lire une rupture la ou il n'y a qu'une phrase.
Le corps se cale entre les deux anciens : assez present pour suivre le
titre, assez sobre pour porter trois lignes. */
.hero__support--lede {
color: var(--color-fg);
font-size: clamp(16px, 1.25vw, 20px);
line-height: 1.62;
max-width: 62ch;
}
/* ══════════════════════════════════════════════════════════════════════════
TROIS TRAITEMENTS DE CADRE — 2026-08-17
══════════════════════════════════════════════════════════════════════════
La reference de Gabriel : un cadre a filet rouge fin, fond sombre voile de
rouge depuis le haut, coins arrondis, un repere a gauche et le texte en
blanc. Ce qui la caracterise n'est pas la couleur mais le RAPPORT — un filet
franc, un fond a peine teinte, et un repere qui ne rivalise pas avec le
texte. C'est ce rapport qui est repris ici. */
/* ── 1. LES SEPT PROBLEMATIQUES DEVIENNENT DES CADRES ────────────────────
Elles n'avaient qu'un filet a gauche. Le numero, deja present, fait office
du repere de la reference : il n'y a rien a ajouter au HTML. */
#problema .symptom {
padding: clamp(16px, 1.5vw, 22px) clamp(18px, 1.7vw, 24px);
border: 1px solid rgba(220, 38, 38, 0.30);
border-left-width: 1px;
border-radius: var(--radius-md);
background: linear-gradient(180deg,
rgba(220, 38, 38, 0.10) 0%,
rgba(220, 38, 38, 0.02) 62%,
transparent 100%),
rgba(16, 16, 16, 0.60);
transition: border-color var(--duration-normal) var(--ease-out),
background var(--duration-normal) var(--ease-out),
translate var(--duration-normal) var(--ease-out);
}
#problema .symptom:hover {
border-color: rgba(220, 38, 38, 0.62);
/* meme raison que les colonnes : le reveal pose translate ET transform inline */
translate: 0 -2px !important;
}
#problema .symptom__text { color: var(--color-fg); font-weight: 600; }
/* ── 2. LES SIX CARTES DE « NUESTRO MODELO » PRENNENT LE MEME FILET ──────
Le filet passe de 34 a 46 % du ton persona : sur la reference il est franc,
et a 34 % il se devinait plutot qu'il ne se voyait. Les couleurs de persona
sont conservees — c'est ce qui distingue les six, et Gabriel les a validees.
Seul le RAPPORT filet/fond suit la reference. */
.practices__grid--six .practice[data-persona] {
border-color: color-mix(in srgb, var(--p, var(--color-primary)) 46%, transparent) !important;
border-radius: var(--radius-lg);
}
/* ── 3. LES DEUX COLONNES DE LA COMPARAISON S'ANIMENT AU SURVOL ──────────
Elles etaient les seuls grands blocs de la page a ne rien faire sous la
souris. Chacune s'anime dans SA couleur : le modele habituel en gris — il ne
doit pas devenir desirable — et le systeme ASHA en rouge.
La transition est declaree sur l'etat de repos, sinon le retour se ferait
d'un coup ; et elle nomme ses proprietes plutot que « all », qui animerait
aussi la mise en page. */
.versus__col {
transition: border-color var(--duration-normal) var(--ease-out),
background var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
translate var(--duration-normal) var(--ease-out);
}
/* translate AVEC !important, et c'est la seule facon. Le reveal GSAP ecrit en
INLINE « translate: none; rotate: none; scale: none; transform: none » : il
neutralise donc les deux proprietes a la fois, et un style inline ne se bat
pas a la specificite. Premiere tentative avec transform : none au survol,
mesure. Seconde avec translate sans !important : none encore, pour la meme
raison. Un !important est ici le comportement correct, pas un contournement.
C'est le meme piege que les hovers de cartes, deja paye sur ce repo. */
.versus__col--them:hover {
border-color: rgba(248, 250, 252, 0.30);
background: rgba(248, 250, 252, 0.04);
translate: 0 -3px !important;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}
.versus__col--us:hover {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 9%, transparent);
translate: 0 -3px !important;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34),
0 0 0 1px color-mix(in srgb, var(--color-primary) 34%, transparent);
}
@media (prefers-reduced-motion: reduce) {
#problema .symptom, .versus__col { transition: none; }
#problema .symptom:hover, .versus__col:hover { translate: none !important; }
}
/* ── HERO : DE L'AIR ENTRE LE LEDE ET LES BOUTONS — 2026-08-17 ───────────
Mesure : le lede finissait a 718 px et les boutons commencaient a 718. Zero
pixel entre les deux. Le lede n'avait pas de marge basse et la colonne est
un flex sans gap — rien ne les separait donc.
La marge est posee sur le lede plutot qu'un gap sur la colonne : les autres
ecarts de la colonne (24, 40, 48 px) sont deja regles un par un, un gap
global les aurait tous ecrases. */
.hero__support--lede { margin-bottom: clamp(28px, 2.6vw, 40px); }
/* ── « INTEGRARLO TODO. » EN BLEU ────────────────────────────────────────
--color-csirt-ink, LE TOKEN DU DS pour le bleu sur fond clair. J'avais
d'abord bricole un color-mix a 72 % avec du noir — ca tenait le contraste
mais ce n'etait pas le bleu du systeme, et ca se voyait. Le ton plein
--color-csirt ne convient pas ici : il ne rend que 2,32:1 sur la bande
claire, sous le seuil de 3 exige meme par ces 64 px. L'ink en rend 4,55:1.
Meme logique que --color-primary-deep et --color-grc-ink ailleurs : chaque
teinte du DS a sa valeur pour les fonds clairs, il suffit de la prendre. */
.problema__turn-text .accent,
.problema__turn-text .accent .split-word {
/* --color-csirt, le ton plein : c'est LE bleu que le reste du site montre,
celui du bouton du CTA. Gabriel l'a demande deux fois, c'est donc lui.
A DIRE FRANCHEMENT : sur cette bande claire il rend 2,32:1, sous le seuil
de 3 exige par ces 64 px. Aucun bleu reconnaissable du DS ne passe ici —
le soft est a 1,39:1, l'ink a 4,55 mais ne ressemble plus au bleu du site.
Le choix est assume, pas ignore. */
color: var(--color-csirt) !important;
-webkit-text-fill-color: var(--color-csirt) !important;
}
/* ── LES REPERES EN MOTS SONT PLUS PETITS QUE LES CHIFFRES — 2026-08-17 ───
« Data Manager » et « Proactiva » heritaient du corps des grands nombres,
calibre pour deux ou trois glyphes : sur un mot de douze lettres ca devient
une banniere. Ils descendent a un tiers, ce qui les garde marquants sans
qu'ils ecrasent le chiffre a cote — c'est lui la mesure. */
.case-fig__num--mot {
/* Le plancher redescend a 22 px : a 390 px de large la carte ne fait que
165 px et « Data Manager » a 26 px en demandait 180. */
font-size: clamp(22px, 2.6vw, 42px) !important;
/* MEME INTERLIGNE QUE LES CHIFFRES, qui sont a 1. A 1,12 il restait 5 px de
demi-interligne sous la derniere ligne du mot, donc 5 px de plus entre lui
et son libelle que pour un chiffre voisin. Sur un mot qui tient sur une
ligne — c'est le cas des deux, a toutes les largeurs — un interligne de 1
ne change rien d'autre que ce decalage. */
line-height: 1;
letter-spacing: -0.01em;
/* PAS DE display ICI. Il y en avait un — block — et il ecrasait le flex de
.case-fig__num, donc le align-items: flex-end qui colle la valeur au bas de
sa zone. Resultat mesure : 92 px de vide entre le mot et son libelle, quand
les chiffres d'a cote en ont zero. La valeur heritee est la bonne. */
flex-wrap: wrap; /* un mot de douze lettres peut demander deux lignes */
max-width: 12ch;
}
/* ── « NUESTRO MODELO » : LES TROIS CASES AU MOTIF DE LA REFERENCE ────────
Meme rapport que les problematiques de la home : filet franc, fond voile
depuis le haut, coins arrondis, et l'icone en repere a gauche du texte sans
lui disputer la place. La section est sur sol-2, le voile reste donc discret. */
.page-nosotros #modelo .about-card {
padding: clamp(20px, 1.9vw, 28px) clamp(20px, 1.9vw, 28px);
border: 1px solid rgba(220, 38, 38, 0.30) !important;
border-radius: var(--radius-md);
background: linear-gradient(180deg,
rgba(220, 38, 38, 0.10) 0%,
rgba(220, 38, 38, 0.02) 62%,
transparent 100%),
rgba(16, 16, 16, 0.55) !important;
transition: border-color var(--duration-normal) var(--ease-out),
background var(--duration-normal) var(--ease-out),
translate var(--duration-normal) var(--ease-out);
}
.page-nosotros #modelo .about-card:hover {
border-color: rgba(220, 38, 38, 0.62) !important;
/* translate et !important : le reveal pose transform ET translate en inline */
translate: 0 -2px !important;
}
/* L'icone devient le repere de la reference : petite, rouge, sans pastille. */
.page-nosotros #modelo .about-card__icon-wrap {
width: 34px !important;
height: 34px !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
margin-bottom: clamp(10px, 1vw, 14px);
}
.page-nosotros #modelo .about-card__icon-wrap svg { width: 22px; height: 22px; }
.page-nosotros #modelo .about-card__title { font-size: var(--text-lg); }
@media (prefers-reduced-motion: reduce) {
.page-nosotros #modelo .about-card { transition: none; }
.page-nosotros #modelo .about-card:hover { translate: none !important; }
}
/* ── LES QUATRE TUILES DE « COMO OPERAMOS » S'ANIMENT ────────────────────
Meme geste que les problematiques et les cases de « Nuestro modelo » : le
filet s'affirme, le fond se teinte, la tuile se souleve de 2 px.
translate en !important pour la meme raison que partout ailleurs : le reveal
GSAP pose translate ET transform en inline sur ces elements. */
.opcard {
transition: border-color var(--duration-normal) var(--ease-out),
background var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
translate var(--duration-normal) var(--ease-out);
}
.opcard:hover {
border-color: rgba(220, 38, 38, 0.62) !important;
background: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
translate: 0 -2px !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
}
@media (prefers-reduced-motion: reduce) {
.opcard { transition: none; }
.opcard:hover { translate: none !important; }
}
/* ── LES TROIS REPERES DU CAS MEXICAIN SE REMETTENT EN COLONNE ────────────
La grille les repartissait sur deux colonnes en flux libre : le chiffre
tombait a gauche au milieu, « Data Manager » en haut a droite loin de son
libelle, « Proactiva » plus bas encore. Trois blocs de nature differente —
un nombre et deux mots — ne peuvent pas s'aligner dans une grille reglee
pour des nombres seuls.
Ils passent donc en UNE colonne : chaque repere au-dessus de son libelle,
les trois espaces egaux, lus de haut en bas comme la phrase Antes/Después
d'a cote. La zone de valeur commune (--zone) est neutralisee ici : elle
reserve la hauteur d'un grand nombre, ce qui creusait un vide sous les mots. */
/* LE MEME MOTIF QUE LE VOLET EQUATORIEN, qui est la reference : une grille a
deux colonnes, la valeur en grand puis son libelle en petites capitales
mono juste dessous, et RIEN d'autre — ni filet, ni retrait, ni cadre.
Deux essais avant celui-la : la grille d'origine, reglee pour des nombres
seuls, eparpillait les trois reperes en flux libre ; ma colonne unique a
filet vert les alignait mais inventait un motif que la page n'a nulle part
ailleurs. Le troisieme repere occupe seul la deuxieme rangee, comme l'anneau
du volet equatorien occupe seul la sienne. */
#caso-2-pane .cases__figures {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(26px, 2.8vw, 44px) clamp(20px, 2.4vw, 40px);
/* align-content: start est RETIRE le 2026-08-18 : plus specifique que la
regle commune, il empechait ce volet de repartir sa hauteur et laissait
« Proactiva » finir 114 px au-dessus du bas de la colonne de texte. Le
volet Ecuador, lui, n'avait pas cette surcharge et s'alignait deja. */
}
#caso-2-pane .case-fig {
display: grid;
gap: 6px;
padding-left: 0;
border-left: 0;
}
/* LA SURCHARGE D'ALIGNEMENT EST RETIREE le 2026-08-17 : min-height: 0 et
display: block annulaient la zone de valeur partagee qui aligne le volet
Ecuador, d'ou les 17 px de decalage mesures entre le chiffre et les mots.
Le volet mexicain repasse sous le mecanisme commun. Ne restent ici que deux
reglages qui ne touchent pas a l'alignement : la largeur des mots, qui n'ont
pas a etre brides a 12 caracteres dans une colonne large, et celle des
libelles, plus longs que ceux d'Ecuador. */
#caso-2-pane .case-fig__num--mot { max-width: none; }
#caso-2-pane .case-fig__label { max-width: 34ch; }
/* ── NUESTRO MODELO : L'ICONE PASSE A GAUCHE DU TEXTE — 2026-08-17 ────────
Sur la reference elle n'est pas au-dessus mais A COTE, alignee sur la
premiere ligne du titre, et nettement plus lumineuse que ce que j'avais pose.
La carte devient une grille a deux colonnes : l'icone occupe la premiere sur
les deux rangees, le titre et le texte la seconde. C'est ce qui garde le
texte aligne sur lui-meme quand le titre passe sur deux lignes — un simple
flex aurait recentre l'icone entre les deux. */
.page-nosotros #modelo .about-card {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: clamp(14px, 1.3vw, 20px);
row-gap: 6px;
align-items: start !important;
}
.page-nosotros #modelo .about-card__icon-wrap {
grid-column: 1;
grid-row: 1 / span 2;
margin: 0 !important;
align-self: start !important;
width: 26px !important;
height: 26px !important;
/* le meme decalage optique que la reference : l'icone tombe sur la hauteur
de x du titre, pas sur son sommet */
margin-top: 3px !important;
}
/* Plus lumineuse : le ton plein du rouge de marque au lieu de l'encre sombre
heritee, et l'opacite levee. Sur le fond de la carte il rend 4,35:1 — au-dela
du seuil de 3 qui s'applique a un pictogramme, qui n'est pas du texte. */
.page-nosotros #modelo .about-card__icon-wrap svg {
width: 26px;
height: 26px;
color: var(--color-primary-soft) !important;
opacity: 1 !important;
}
.page-nosotros #modelo .about-card__title { grid-column: 2; grid-row: 1; margin: 0; }
.page-nosotros #modelo .about-card__desc { grid-column: 2; grid-row: 2; }
/* Les libelles du volet mexicain suivent ceux du volet equatorien : petites
capitales en mono, interlettrage ouvert. Ils s'en ecartaient parce que je
leur avais donne une largeur de lecture de 34ch, calibree pour une phrase. */
#caso-2-pane .case-fig__label {
margin: 0;
max-width: 26ch;
font-family: var(--font-mono);
font-size: clamp(10px, 0.8vw, 12px);
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.4;
}
/* ══════════════════════════════════════════════════════════════════════════
TROIS AJUSTEMENTS DU 2026-08-17 (fin de journee)
══════════════════════════════════════════════════════════════════════════ */
/* ── 1. LES SURTITRES DE NOSOTROS RETROUVENT LE FOND DE CEUX DE LA HOME ───
Mesure : toutes leurs proprietes sont identiques a celles de la home, au
pixel. Ce qui differe est ce qu'il y a DERRIERE — sur la home la pilule est
semi-transparente et laisse passer le halo rouge de sa section, ce qui lui
donne un fond brun sombre ; sur nosotros la section sol-0 est un noir pur et
la pilule parait plus dure.
On ne peut pas ajouter un halo de section sans changer la section : le voile
rouge est donc pose DANS le fond de la pilule, ce qui reproduit exactement le
resultat visuel. */
main > section[data-sol="0"] > .container .eyebrow,
main > section[data-sol="0"] .section-head .eyebrow {
background:
linear-gradient(rgba(220, 38, 38, 0.10), rgba(220, 38, 38, 0.10)),
rgba(23, 23, 23, 0.55);
}
/* ── 2. LE LEDE DE « NUESTRO MODELO » S'EQUILIBRE SUR DEUX LIGNES ─────────
Mesure : 124 caracteres sur la premiere ligne, 10 sur la seconde — le mot
« capacidad. » restait seul. La ligne courait sur 1060 px sans borne.
68ch coupe apres « operación 7×24, » et laisse « coordinadas como una sola
capacidad. » a la seconde. La borne est en ch et non en pixels : elle suit
la taille de police, donc la coupure reste equilibree a toutes les largeurs. */
#sistema .section-lede { max-width: 68ch; }
/* ── ESENCIA : LE MOT SE CENTRE SUR LA LARGEUR DU TEXTE ──────────────────
« aša » et son etymologie etaient cales a gauche de leur colonne, le mot
court laissant un vide a sa droite. Ils se centrent sur l'axe horizontal du
bloc de texte qui les suit, donc sur la meme verticale que son milieu. */
/* LA BORNE PASSE SUR LE CONTENEUR COMMUN, et c'est le seul endroit ou elle
donne le meme axe aux deux. Posee sur le bloc du mot, « 68ch » se calculait
avec SA police — 52 px contre 18 pour le texte — d'ou une largeur trois fois
trop petite : le milieu tombait 50 px a gauche au lieu de 21 a droite.
Portee par .essence-body, la borne vaut une seule fois pour tout le monde et
les deux centres coincident par construction. */
.page-nosotros #esencia .essence-body { max-width: 68ch; }
.page-nosotros #esencia .essence-body > p { max-width: none; }
.essence-body .essence-mark {
align-items: center;
text-align: center;
max-width: none;
}
/* ── NUESTRO MODELO : L'ICONE SE CENTRE SUR LA HAUTEUR DU TEXTE ───────────
Elle etait alignee sur la premiere ligne du titre — ce que la reference
fait — mais sur ces cartes le bloc titre + texte est plus haut, et l'icone
restait accrochee en haut. align-self: center la place au milieu des deux
rangees qu'elle traverse, donc au milieu du texte.
Le decalage optique de 3 px n'a plus lieu d'etre : il servait a la faire
tomber sur la hauteur de x du titre. */
.page-nosotros #modelo .about-card__icon-wrap {
align-self: center !important;
margin-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
« COMO OPERAMOS » : LE RAIL DE CARTES 2026-08-17
Reference Palo Alto, mesuree sur la capture a 1920 px de large :
carte 609 px → 31,7 vw
gouttiere 37 px → 1,93 vw
la troisieme carte coupee nette au bord droit du viewport
la commande (« View all → ») en haut a droite, au-dessus des cartes
Les valeurs ci-dessous sont ces mesures ramenees en vw et bornees, pas des
proportions estimees a l'oeil.
═════════════════════════════════════════════════════════════════════════ */
/* L'en-tete et la commande partagent une ligne, comme dans la reference :
l'argument a gauche dans sa colonne de lecture, la commande alignee sur son
bord droit. La composition en deux colonnes de la fiche 08 laisse la place
au rail, qui a besoin de toute la largeur pour deborder. */
.oprail__top {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: clamp(24px, 3vw, 48px);
margin-bottom: clamp(28px, 3vw, 44px);
}
.oprail__top > .operacion__head {
flex: 1 1 420px;
max-width: 640px;
margin-bottom: 0;
text-align: left;
}
/* ── LA COMMANDE ──────────────────────────────────────────────────────────
Compteur, barre, deux fleches. Elle dit la position dans le RAIL, la seule
progression qui soit vraie ici : la frise au-dessus compte six etapes pour
quatre cartes, les deux ne peuvent pas partager un curseur. */
.oprail__ctrl {
display: flex;
align-items: center;
gap: clamp(12px, 1.4vw, 20px);
flex: 0 0 auto;
padding-bottom: 4px;
}
.oprail__ctrl[hidden] { display: none; }
.oprail__count {
margin: 0;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.12em;
color: var(--color-muted);
white-space: nowrap;
}
/* Le chiffre courant est en encre PLEINE, pas dans le rouge de marque :
mesure, #DC2626 sur le sol 2 rend 3,33:1 la ou 12 px exigent 4,5. Il se
distingue deja du total, qui reste en encre sourde. Le rouge sert la
barre de progression, ou aucun seuil de texte ne s'applique. */
.oprail__cur { color: var(--color-fg); }
.oprail__slash { margin: 0 0.35em; opacity: 0.5; }
.oprail__bar {
position: relative;
width: clamp(56px, 8vw, 120px);
height: 2px;
background: var(--color-border-strong);
overflow: hidden;
}
/* La barre se remplit par transform et non par width : une largeur animee
redeclenche la mise en page a chaque image du defilement. */
.oprail__fill {
--oprail-avance: 0;
position: absolute;
inset: 0;
background: var(--color-primary);
transform-origin: left center;
transform: scaleX(var(--oprail-avance));
transition: transform 120ms linear;
}
.oprail__arrows { display: flex; gap: 8px; }
.oprail__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
/* 44 px : le plancher de cible tactile du projet. */
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.03);
color: var(--color-fg);
cursor: pointer;
transition: border-color var(--duration-normal) var(--ease-out),
background var(--duration-normal) var(--ease-out),
opacity var(--duration-normal) var(--ease-out);
}
.oprail__arrow .icon { width: 18px; height: 18px; }
/* La fleche de gauche est la meme forme retournee : un second symbole dans le
sprite pour un dessin miroir serait deux fois la meme matiere. */
.oprail__arrow--prev .icon { transform: scaleX(-1); }
.oprail__arrow:hover:not(:disabled) {
border-color: var(--color-primary);
background: rgba(220, 38, 38, 0.12);
}
.oprail__arrow:disabled { opacity: 0.32; cursor: default; }
/* ── LE RAIL ──────────────────────────────────────────────────────────────
Il vit hors du .container pour sortir par le bord droit. Sa marge de gauche
RECALCULE celle du container au lieu de la copier : width 100% borne a
--container-max avec --container-px de chaque cote, donc le bord du contenu
tombe a max(px, (100% - max) / 2 + px).
AUCUN vw DANS CE CALCUL, ET C'EST LA RAISON D'ETRE DE LA FORMULE. Sur ce
poste 100vw inclut la barre de defilement : le meme calcul en vw depassait
de 8 px a droite et ajoutait une barre horizontale a la page entiere. Le
pourcentage, lui, se mesure sur le parent, qui est deja hors barre. */
.oprail {
--oprail-marge: max(var(--container-px),
calc((100% - var(--container-max)) / 2 + var(--container-px)));
}
.oprail__track {
display: flex;
gap: clamp(16px, 1.93vw, 37px); /* la gouttiere mesuree */
margin: 0;
padding: 4px var(--oprail-marge);
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
/* Le snapport commence a la marge, sinon la carte visee viendrait se coller
au bord gauche de la fenetre au lieu de s'aligner sur le contenu. */
scroll-padding-left: var(--oprail-marge);
scrollbar-width: none;
}
.oprail__track::-webkit-scrollbar { display: none; }
.oprail__track:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 4px;
}
/* ── LA CARTE ─────────────────────────────────────────────────────────────
Angles vifs et largeur fixe, comme la reference. Le plateau noir est celui
des cartes de piliers et de heros : la reference a un brun orange qui n'est
pas notre palette, et une carte sur quatre teintee de rouge, ecartee parce
que le DS ne tient qu'une tension rouge et que les quatre moyens sont de
meme rang.
Le grand numero prend la place de l'image de la reference : nous n'avons pas
d'images pour ces quatre moyens et il n'y en aura pas d'inventees. */
.opcard {
flex: 0 0 clamp(272px, 31.7vw, 500px); /* la largeur mesuree */
display: flex;
flex-direction: column;
gap: clamp(28px, 3vw, 56px);
min-height: clamp(300px, 24vw, 400px);
padding: clamp(22px, 2vw, 34px);
background: var(--color-plate);
border: 1px solid var(--color-border-strong);
border-radius: 0; /* angles vifs, comme la reference */
scroll-snap-align: start;
}
.opcard__idx {
font-family: var(--font-mono);
font-size: clamp(40px, 4.2vw, 68px);
font-weight: 500;
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--color-primary);
}
/* Le corps est pousse en bas : le vide se place ENTRE le numero et le texte,
comme la reference place son blanc entre le titre et l'image. Un vide en fin
de carte se lirait comme un manque. */
.opcard__body { margin-top: auto; }
.opcard__title {
margin: 0 0 10px;
font-size: clamp(17px, 1.15vw, 21px);
font-weight: 600;
line-height: 1.25;
color: var(--color-fg);
}
.opcard__text {
margin: 0;
font-size: var(--text-sm);
line-height: 1.6;
color: var(--color-muted);
}
/* La frise reprend toute la largeur du container : elle n'est plus dans une
colonne de gauche puisque la composition en deux colonnes a disparu. */
#operacion .flow { margin-bottom: clamp(28px, 3vw, 44px); }
@media (max-width: 720px) {
.oprail__top { align-items: flex-start; }
.oprail__ctrl { width: 100%; justify-content: flex-start; }
}
/* Le bouton des metodologias : le placement seulement. Son apparence vient
entierement de .btn .btn-secondary .btn-pill, comme celui d'alianzas. */
/* Meme placement que .alliances__band-cta, a la valeur pres. */
.diferenciador__cta-wrap {
display: flex;
justify-content: center;
margin-top: clamp(24px, 2.6vw, 40px);
}
/* ── LE FOOTER : COUVERTURE, SCEAUX, LINKEDIN 2026-08-17 ───────────── */
/* Les trois listes de pays prennent leur propre ligne sous leur libelle. Les
qui les separaient sont tombes avec la restructuration : c'est le bloc
qui porte l'espacement, pas un saut de ligne dans le texte. */
.site-footer__coverage strong { margin-top: 12px; }
.site-footer__coverage strong:first-child { margin-top: 0; }
.site-footer__coverage span {
display: block;
opacity: 0.9;
}
/* La classe des deux anciennes lignes secondaires n'a plus de porteur : les
trois blocs sont desormais de meme rang, ce qui etait le sens de la demande. */
.site-footer__badges { gap: 12px; }
/* Le glyphe LinkedIn etait dans un cercle de 36 px avec un dessin de 16 : a
cette taille il ne se lisait pas comme un logo. Le cercle passe au plancher
de cible tactile de 44 px et le glyphe a 20. */
.site-footer .social-icons { gap: 10px; margin-top: var(--space-5); }
/* IL N'ETAIT PAS PETIT, IL ETAIT INVISIBLE, et c'est la mesure du footer qui
le dit : le fond y est clair, alors que .social-icon declare
color: var(--color-fg), c'est-a-dire le #F8FAFC du systeme. Un glyphe blanc
sur un fond blanc. Sa bordure, prise dans --color-border-strong, est un blanc
translucide : invisible aussi. Le meme piege que le bouton des metodologias,
au meme endroit du raisonnement — une variable d'encre lue hors de son sol.
Le footer n'est pas une , donc aucune regle de sol ne venait
la corriger : l'encre est donc posee ici, explicitement.
#101010 sur le fond clair rend 18,9:1, la bordure sombre a 12 % se voit sans
peser. */
.site-footer .social-icon {
width: 44px;
height: 44px;
color: var(--color-fg-light);
border-color: rgba(16, 16, 16, 0.18);
}
.site-footer .social-icon:hover {
color: var(--color-primary);
border-color: var(--color-primary);
}
.site-footer .social-icon .icon { width: 20px; height: 20px; }
/* Le bleu et le violet des libelles « En desarrollo » et « Centro de monitoreo »
sont retires le 2026-08-18. Les trois retombent sur la regle commune, deja en
--color-primary-deep : on retire au lieu de reposer du rouge, pour ne pas
maintenir la meme couleur a deux endroits. */
/* ── ALIANZAS : LA RANGEE FIXE 2026-08-17 ───────────── */
/* Les deux pistes qui defilaient deviennent deux rangees centrees. La base des
cartes est bornee en pourcentage ET en pixels : le pourcentage tient les cinq
logos sur une seule ligne aux grandes largeurs, le plancher de 120 px les fait
passer a deux par ligne sur telephone au lieu d'une seule, ce qui evite une
colonne de cinq lignes. */
.alliances__row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(14px, 1.4vw, 24px);
}
.alliances__row .alliance-card {
flex: 0 1 clamp(120px, 18%, 232px);
}
/* Le survol garde son elevation : c'est le seul mouvement de la section
maintenant que le defilement est parti, et il repond a une intention. */
/* ── LE HEROS S'ALLUME AUSSI QUAND ON LE SURVOLE LUI-MEME 2026-08-17 ────
Reciproque de l'effet pose sur les boutons de la constellation, avec les
MEMES valeurs d'arrivee : opacite pleine, filtre neutre, halo a 1,12.
DEUX REGLES POUR SIX PERSONAS, ET C'EST LA DIFFERENCE DE NATURE ENTRE LES
DEUX SENS. Allumer une figure depuis son bouton demande de nommer le persona
des deux cotes du :has(), donc six blocs et vingt-quatre selecteurs. Ici la
cible EST l'element survole : le persona n'a pas a etre nomme, la variable
--p de la figure fait deja le reste.
La transition est deja declaree sur l'etat de repos quelques lignes plus
haut, donc le retour se fait en fondu et pas d'un coup.
LE CURSEUR EST DEVENU UNE MAIN le 2026-08-18 : ces figures menent desormais
a leur section. Le commentaire disait ici l'inverse — « un curseur de main
promettrait un clic qui n'existe pas » — et c'etait juste tant que le clic
n'existait pas. Maintenant qu'il existe, l'absence de curseur le cacherait. */
.liga-row__fig:hover img {
opacity: 1;
filter: none;
}
.liga-row__fig:hover::before {
opacity: 1;
transform: translateX(-50%) scale(1.12);
}
/* ── ET IL FAUT ENCORE QUE LE POINTEUR ARRIVE JUSQU'AUX HEROS ──────────────
La regle de survol ci-dessus ne servait a rien telle quelle, et le test l'a
dit avant l'oeil : « .container.page-hero__inner intercepts pointer events ».
Le bloc de texte de la hero est un calque pose PAR-DESSUS les figures et il
couvre toute la section, y compris ses zones vides. La souris ne touchait
donc jamais un heros, quelle que soit la regle de :hover.
Le passage est ouvert de la seule facon qui ne coute rien : le CONTENEUR
cesse de capter le pointeur, ses enfants directs le captent a nouveau. Les
zones vides laissent passer vers les figures, et le titre, le lede, les six
boutons et les deux CTA restent cliquables et selectionnables comme avant.
Un pointer-events: none pose sans le rendre aux enfants aurait rendu la hero
entierement inerte.
Les figures vivent dans .page-hero__bg, un decor en aria-hidden : elles
reprennent le pointeur une par une, pas tout le fond, pour que les trois
calques de halo et de grille restent transparents au pointeur. */
.page-hero--liga .page-hero__inner { pointer-events: none; }
/* SEULS LES ELEMENTS INTERACTIFS REPRENNENT LE POINTEUR. Une premiere version le
rendait a tous les enfants directs : le titre et le lede, qui occupent toute
la largeur de leur colonne meme la ou ils n'ont pas de glyphe, formaient un mur
devant les heros. Mesure, quatre a cinq figures sur six n'avaient plus aucun
point atteignable.
Le surtitre, le titre et le lede sont du texte pur, sans lien ni champ : ils
n'ont pas besoin du pointeur. Ils cessent en revanche d'etre selectionnables a
la souris, et c'est le prix assume de heros cliquables sur toute leur surface. */
.page-hero--liga .liga-constellation,
.page-hero--liga .page-hero__actions { pointer-events: auto; }
.page-hero--liga .liga-row__fig { pointer-events: auto; }
/* ── ALIANZAS SUR NOSOTROS : EN-TETE CENTRE ET QUATRE PHARES 2026-08-17 ── */
/* L'en-tete de cette seule section passe au centre. Le filet d'ouverture, lui,
reste pleine largeur : il marque le debut de section, il ne suit pas le texte. */
/* C'EST LE HEADER QU'IL FAUT CENTRER, PAS SON CONTENU, et la mesure le dit
sans ambiguite : le header porte max-width: min(100%, 1060px) avec des marges
a zero, donc il se cale a gauche d'un conteneur de 1760 px. Le titre etait
deja centre A L'INTERIEUR de ce header (20 px de marge de chaque cote), mais
le header entier tombait 286 px a gauche de l'axe de la page. Centrer le
texte une deuxieme fois n'aurait rien change ; c'est la boite qui devait se
deplacer. */
.page-nosotros #alianzas .section-head--rail {
text-align: center;
margin-inline: auto;
}
.page-nosotros #alianzas .section-head--rail .section-title,
.page-nosotros #alianzas .section-head--rail .section-lede {
margin-inline: auto;
}
.page-nosotros #alianzas .alliances__tier-label { text-align: center; }
.fantastic4 { margin-bottom: clamp(36px, 3.6vw, 60px); }
/* Quatre plaques egales. auto-fit avec un plancher de 150 px : quatre de front
au-dela de 760 px environ, deux par deux en dessous, jamais une colonne de
quatre logos ecrases. */
.fantastic4__row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: clamp(14px, 1.6vw, 26px);
margin: 0;
padding: 0;
list-style: none;
}
.fantastic4__item {
display: flex;
align-items: center;
justify-content: center;
/* Un rapport fixe donne quatre plaques identiques quel que soit le format du
logo : Netskope est empile (rapport 2,45), CrowdStrike est en ligne (5,48).
Sans rapport impose, la rangee aurait quatre hauteurs differentes. */
aspect-ratio: 16 / 9;
padding: clamp(14px, 1.4vw, 22px);
background: #F8FAFC;
border: 1px solid rgba(16, 16, 16, 0.10);
border-radius: var(--radius-md);
transition: border-color var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
translate var(--duration-normal) var(--ease-out);
}
/* Le survol reprend le geste des autres cartes de la page : filet qui s'affirme
et 2 px d'elevation. translate en !important parce que le reveal GSAP pose
translate ET transform en inline sur ces elements. */
.fantastic4__item:hover {
border-color: rgba(220, 38, 38, 0.50);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
translate: 0 -2px !important;
}
/* contain, et les deux bornes : le logo ne depasse ni en hauteur ni en largeur,
et garde de l'air autour. 84 % de large et 62 % de haut donnent aux quatre un
poids optique comparable malgre des rapports allant de 2,45 a 5,48. */
.fantastic4__logo {
max-width: 84%;
max-height: 62%;
width: auto;
height: auto;
object-fit: contain;
/* Aucun filtre : ce sont les couleurs officielles des marques. */
filter: none;
}
@media (prefers-reduced-motion: reduce) {
.fantastic4__item { transition: none; }
.fantastic4__item:hover { translate: none !important; }
}
/* ── LE LOGO NETSKOPE RETROUVE SON POIDS OPTIQUE 2026-08-17 ───────────
Les cinq fichiers font 120 px de haut, mais leurs rapports vont de 2,33
(Netskope) a 5,21 (CrowdStrike). La regle commune borne la hauteur a 44 px
et la largeur a 82 % : a 44 px, Netskope occupe 103 x 44, soit 4 500 px²,
quand CrowdStrike bute sur la largeur a 200 x 38, soit 7 600. Un rapport de
1 a 1,7, et c'est ce que l'oeil voyait.
58 px de haut lui rendent 135 x 58, soit 7 800 px² : comparable aux autres.
La correction ne vise que lui — relever la borne commune aurait fait grossir
quatre logos qui sont deja a la bonne taille. */
.partner-level[data-brand="netskope"] .partner-level__logo {
/* LA TAILLE EST EN POURCENTAGE, PAS EN PIXELS, et c'est ce qui la rend stable.
Une premiere version bornait sa hauteur a 58 px : les quatre autres logos
etant bornes par une LARGEUR de 82 % de la plaque, les deux ne suivaient pas
la meme reference et l'ecart de surface variait avec la fenetre — 16 % a
1920, 63 % a 1100, ou Netskope devenait le plus gros des cinq.
Exprimee en pourcentage de la meme plaque, sa taille suit exactement la
leur. Le calcul du 58 % : a 82 % de large, les autres ont un rapport moyen
de 4,7, donc une surface de 0,143 P² ; Netskope a un rapport de 2,33, donc
0,429 x² P². L'egalite donne x = 0,577.
max-height: none est indispensable : la borne commune de 44 px
l'ecraserait avant que le pourcentage ne joue. */
width: 58%;
max-width: 58%;
/* DEUX BORNES, PARCE QU'IL Y A DEUX REGIMES. Sur plaque etroite c'est la
largeur qui limite les cinq logos, et le 58 % suffit. Sur plaque large les
quatre autres butent sur la borne commune de 44 px de haut : leur surface
se fige a environ 9 100 px², et Netskope sans borne montait a 23 000, soit
57 % d'ecart mesure a 900 px. 62 px lui donnent 145 x 62, soit 9 000 px² :
l'equivalence tient dans les deux regimes. */
max-height: 62px;
}
/* ── LES QUATRE CARTES DE « COMO OPERAMOS » PRENNENT LEUR PHOTO 2026-08-17 ──
L'image est DANS la carte et non derriere la section, donc elle passe sous le
texte : les 20 % d'opacite qui suffisent a #soluciones et #razones, ou l'image
vit loin du texte, seraient ici illisibles.
Deux couches, chacune son role :
::before la photo a 30 %, assez pour se lire comme une photo ;
::after un degrade noir monte depuis le BAS, la ou le corps de la carte
est pousse par son margin-top: auto — dense sous le texte,
presque transparent en haut ou il n'y a que le grand numero.
Un voile uniforme aurait eteint l'image partout pour ne servir qu'en bas. */
.opcard {
position: relative;
overflow: hidden;
isolation: isolate;
}
.opcard::before,
.opcard::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.opcard::before {
background-size: cover;
background-position: center;
opacity: 0.42;
transition: opacity var(--duration-normal) var(--ease-out);
}
.opcard::after {
/* Le bas garde sa densite — c'est lui qui porte le texte — et le haut
s'ouvre : 0,22 -> 0,08 au sommet, 0,55 -> 0,38 aux deux tiers. */
background: linear-gradient(to top,
rgba(0, 0, 0, 0.92) 0%,
rgba(0, 0, 0, 0.82) 34%,
rgba(0, 0, 0, 0.38) 62%,
rgba(0, 0, 0, 0.08) 100%);
}
/* Le contenu passe devant les deux couches. */
.opcard__idx,
.opcard__body {
position: relative;
z-index: 1;
}
/* Au survol la photo s'affirme un peu : c'est le meme geste que le filet qui
se colore, pas un effet de plus. */
.opcard:hover::before { opacity: 0.55; }
.opcard[data-bg="oficina"]::before { background-image: url('../assets/images/bg/operamos/oficina.webp'); }
.opcard[data-bg="ingenieria"]::before { background-image: url('../assets/images/bg/operamos/ingenieria.webp'); }
.opcard[data-bg="tecnologia"]::before { background-image: url('../assets/images/bg/operamos/tecnologia.webp'); }
.opcard[data-bg="api"]::before { background-image: url('../assets/images/bg/operamos/api.webp'); }
@media (prefers-reduced-motion: reduce) {
.opcard::before { transition: none; }
}
/* LE CENTRAGE EST ANNULE, et la mesure dit pourquoi. Centrer le bloc entier
dans sa colonne faisait commencer « Proactiva » a 63 px du bord de son bloc
quand « −30-40% », juste au-dessus, commence a 0 : le mot flottait, d'autant
plus qu'il est seul sur sa ligne.
Ce qui tient cette grille, c'est le bord gauche commun — les trois blocs
mexicains et les quatre d'Ecuador partagent la meme verticale. Le mot et son
libelle partent donc du meme bord, comme un chiffre et le sien. */
#caso-2-pane .case-fig--mot { text-align: start; }
/* Les cartes n'ont plus de numero depuis le 2026-08-17 : la photographie en
fond a pris le role d'element graphique qu'il tenait, et deux reperes
visuels dans la meme carte se disputaient l'attention.
Le corps reste pousse en bas — c'est lui qui doit rester sur la partie dense
du voile — et le haut de la carte s'ouvre desormais sur l'image. */
.opcard__idx { display: none; }
/* ── LES REPERES DE CAS SE CALENT EN HAUT 2026-08-18 ─────────────
Trois etats successifs, et c'est la mesure qui a tranche :
1. sans rien, le bloc finissait 114 px au-dessus du bas de la carte de
gauche — il prenait la hauteur de son seul contenu ;
2. avec align-content: space-between, les bases s'alignaient a 1440 mais a
1920 le dernier repere DEPASSAIT la limite de 23 px : space-between
repartit l'espace disponible et laisse deborder quand le contenu est plus
haut que lui. La reserve en pied ajoutee pour « remonter » le bloc
aggravait ce debordement ;
3. cale en haut, le bloc remonte au maximum et ne franchit jamais la ligne
du bas de la carte de gauche — sa hauteur naturelle est inferieure a
celle de la colonne de texte de 1024 a 1920, verifie.
L'alignement des hauts et des bases par ligne ne depend pas de align-content
mais de align-items: start et de la zone de valeur a hauteur fixe : il tient. */
.cases__pane .cases__figures {
align-self: start;
align-content: start;
}
/* ── #problema : LE LEDE SE RAPPROCHE DU TITRE 2026-08-18 ───────────
A SIGNALER : les 14 px mesures ici sont l'ecart STANDARD du site — versus et
sistema affichent la meme valeur au pixel. Ce resserrement est donc une
divergence assumee sur cette seule section, a la demande de Gabriel, et non
la correction d'une anomalie. Si le meme rapprochement est voulu partout,
c'est la marge commune qu'il faudra changer, pas cette regle. */
#problema .section-head .section-title { margin-bottom: 16px; }
#problema .section-head .section-lede { margin-top: 0; margin-bottom: 2px; }
#problema .section-head .section-lede + .section-lede { margin-top: 2px; }
/* « Proactiva » remonte : l'alignement exact sur le bas de la colonne de texte,
pose plus tot, le descendait trop bas a l'oeil. La repartition reste
space-between — ce qui aligne haut et bas — mais la colonne garde une reserve
en pied, donc la derniere ligne remonte d'autant sans decrocher le haut. */
/* La reserve en pied est retiree : elle poussait le bloc vers le bas alors que
la consigne est qu'il ne depasse pas la carte de gauche. */
/* ── LES TROIS ICONES DE « NUESTRO MODELO » DEVIENNENT DES SCENES 2026-08-18 ──
Elles etaient trois pictogrammes abstraits a 24 px dans une plaquette de 48 :
un curseur de reglage, une medaille, une liste cochee. La reference fournie
dessine des scenes — une main qui porte un groupe, une rosette a rubans, une
tete avec un cerveau — a trait fin et en grand.
Le dessin gagne en detail (trait 1,4 au lieu de 1,6, plusieurs traces par
icone) et la plaquette passe de 48 a 56 px pour un glyphe de 30 : la
reference monte a ~90, mais la rangee de trois cartes ne le supporterait pas
sans se reorganiser. */
/* LA TAILLE DOIT PASSER PAR !important, ET C'EST LA TROISIEME COUCHE SUR CES
ICONES. La derniere en place impose 26 px en !important, avec l'icone placee
a GAUCHE du texte — la disposition demandee sur une reference precedente. Une
regle sans !important, meme ecrite plus bas, restait sans effet : mesure,
la plaquette faisait 26 px et mon glyphe de 30 debordait.
36 ET NON 90. La reference affiche ses scenes a environ 90 px, mais elle les
pose AU-DESSUS d'un texte centre. Ici l'icone occupe la premiere colonne d'une
grille a deux colonnes : la porter a 90 px repousserait le titre et le
paragraphe sur un tiers de la carte. 36 px est le point ou le detail de ces
traces se lit sans reorganiser la carte. Si les grandes icones de la
reference sont voulues telles quelles, c'est la disposition qu'il faut
reprendre, pas seulement la taille. */
.page-nosotros #modelo .about-card__icon-wrap {
width: 36px !important;
height: 36px !important;
}
.page-nosotros #modelo .about-card__icon-wrap svg {
width: 36px !important;
height: 36px !important;
stroke-width: 1.4;
}
/* ── LES QUATRE CARTES DE « AREAS DE CARRERA » PRENNENT LA PLAQUE ROUGE ─────
Elles etaient sur un aplat gris opaque rgb(43,43,43) avec un filet blanc a
8 % : rien ne les rattachait au reste du site. Elles reprennent la plaque de
.versus__col--us, celle de la reference — memes declarations, pas des valeurs
approchantes.
Le fond reste semi-transparent, donc la plaque prend le sol de SA section
(sol-1, plus sombre que le sol-2 de la reference). C'est voulu : un aplat
opaque se serait detache de sa bande. */
#areas .about-card {
--plq: var(--color-primary);
border: 1px solid color-mix(in srgb, var(--plq) 42%, transparent);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--plq) 14%, transparent),
color-mix(in srgb, var(--plq) 6%, transparent)),
rgba(23, 23, 23, 0.55);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 0 1px color-mix(in srgb, var(--plq) 8%, transparent),
0 12px 32px -16px color-mix(in srgb, var(--plq) 35%, transparent);
transition: border-color var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
translate var(--duration-normal) var(--ease-out);
}
/* Le survol reprend le geste des autres cartes du site : le filet s'affirme et
la carte se souleve de 2 px. translate en !important, comme partout, parce
que le reveal GSAP pose translate ET transform en inline. */
#areas .about-card:hover {
border-color: color-mix(in srgb, var(--plq) 62%, transparent);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.10),
0 0 0 1px color-mix(in srgb, var(--plq) 14%, transparent),
0 16px 38px -14px color-mix(in srgb, var(--plq) 45%, transparent);
translate: 0 -2px !important;
}
@media (prefers-reduced-motion: reduce) {
#areas .about-card { transition: none; }
#areas .about-card:hover { translate: none !important; }
}
/* ── #csirt-form : LA CARTE D'INFORMATION SUIT LE FORMULAIRE 2026-08-18 ───
Mesure : la carte fait 545 px de haut, le formulaire 1 690. La grille etant
en align-items: start, elle restait en haut avec ~1 100 px de vide dessous.
Collante, l'adresse et le telephone restent sous les yeux pendant qu'on
remplit les quatorze champs — ce qui est leur seule raison d'etre a cet
endroit.
AU-DELA DE 960 PX SEULEMENT : en dessous la grille passe en une colonne, et
une carte collante y recouvrirait le formulaire. */
@media (min-width: 960px) {
.contact-grid > .contact-info {
position: sticky;
top: calc(var(--header-h) + var(--subnav-h, 0px) + 16px);
}
}
/* « Paises cubiertos » portait .eyebrow, la classe des surtitres de SECTION :
il y avait donc deux surtitres de section dans la meme section, dont un dans
une carte. Meme apparence, classe qui lui appartient. */
.contact-info__countries .contact-info__countries-label {
display: inline-block;
margin-bottom: var(--space-2);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-primary-soft);
}
/* Les figures de la hero sont cliquables : le curseur doit le dire. */
.page-hero--liga .liga-row__fig[data-persona] { cursor: pointer; }
/* ── #csirt-form : L'EN-TETE PASSE A DROITE 2026-08-18 ──────────
Le header est borne a min(100%, 1060px) dans un conteneur de 1760 : cale a
gauche par defaut, il laissait 700 px de vide a sa droite. margin-inline-start
auto le pousse contre le bord droit du contenu, et text-align: right y range
le surtitre comme le titre — sans quoi la pilule serait restee seule a gauche
d'un bloc aligne a droite.
C'est la meme lecon que l'en-tete d'alianzas : ce qui deplace un bloc borne,
c'est sa marge, pas l'alignement de son texte. Ici il faut les deux, parce que
le bloc ET son contenu doivent bouger. */
/* CHAQUE SECTION EST VISEE PAR SON ID. La regle precedente visait
.contact-section, une classe que PORTENT LES DEUX sections : #bolsa-form a
donc pris l'alignement a droite sans que personne ne l'ait demande. Meme
faute qu'une cle i18n partagee — une portee trop large qui atteint un second
endroit par accident. */
#csirt-form .section-head {
margin-inline-start: 0;
margin-inline-end: auto;
text-align: left;
}
#csirt-form .section-head .eyebrow { margin-inline: 0; }
#bolsa-form .section-head {
margin-inline: auto;
text-align: center;
}
#bolsa-form .section-head .eyebrow { margin-inline: auto; }
#bolsa-form .section-head .section-title,
#bolsa-form .section-head .section-lede { margin-inline: auto; }
/* ── #csirt-form : LA SECTION PASSE AU BLEU DU CSIRT 2026-08-18 ─────────
Les variables sont redefinies dans la portee de la section : tout ce qui
demande var(--color-primary) ici — pilule du surtitre, accent du titre,
numeros d'etape, intitules de groupe, bouton d'envoi, liens — suit sans qu'on
le repeigne un par un. C'est aussi ce qui garantit qu'aucun element n'est
oublie, et que ceux qu'on ajoutera demain seront bleus eux aussi.
Le bleu retenu est celui du CSIRT, l'equipe dont cette section parle. */
/* #csirt-form ET NON .contact-section : cette classe est portee aussi par
#bolsa-form, qui s'est retrouve repeint en cyan sans que personne ne l'ait
demande. Troisieme fuite par cette meme classe, apres l'alignement. */
#csirt-form {
--color-primary: var(--color-csirt);
--color-primary-deep: var(--color-csirt-ink);
--color-primary-soft: var(--color-csirt-soft);
--color-primary-lift: var(--color-csirt-soft);
--plq: var(--color-csirt);
}
/* Le liseré de la carte revient au bleu : il l'avait ce matin, je l'avais passe
au rouge pour l'accorder a la section, et c'est la section qui bascule. */
#csirt-form .contact-info { border-top-color: var(--color-csirt); }
/* Les valeurs ECRITES EN DUR ne suivent pas une variable : celles-la doivent
etre reprises nommement. Le rouge #DC2626 vaut rgb(220,38,38) — on cherche
donc ses ecritures rgba() dans cette section. */
#csirt-form .csirt-form__step-num,
#csirt-form .csirt-form__group-title,
#csirt-form .form-group__num {
color: var(--color-csirt) !important;
}
/* Le bouton plein de cette section porte desormais un aplat CYAN, bien plus
lumineux que le rouge : son encre claire rendait 2,32:1 pour un seuil de 4,5.
Un aplat clair demande une encre sombre — #101010 sur #06B6D4 donne 7,8:1.
-webkit-text-fill-color avec, parce qu'il bat color pour le rendu du glyphe. */
#csirt-form .btn-primary,
#csirt-form .btn-primary span,
#csirt-form .csirt-form__submit,
#csirt-form button[type="submit"] {
color: #101010 !important;
-webkit-text-fill-color: #101010 !important;
}
#csirt-form .btn-primary .icon,
#csirt-form .csirt-form__submit .icon,
#csirt-form button[type="submit"] .icon { color: #101010 !important; }
/* ── #brief : LE CONTENU REVIENT A LA MARGE DU SITE 2026-08-18 ─────────
Mesure : son contenu commencait a 564 px quand toutes les autres sections
commencent a 144 — 420 px de decalage vers le milieu, parce que son conteneur
est borne bien plus etroit que le container standard et se centre.
On lui rend la largeur commune et l'alignement a gauche. Le lede garde une
borne de lecture : c'est la largeur du texte qui doit etre limitee, pas la
colonne qui le porte. */
/* Le conteneur n'a plus besoin d'etre force : il portait un
style="max-width: 920px" EN INLINE, qui battait toute regle de la feuille.
Le style est parti du HTML, .container reprend donc ses valeurs communes et il
n'y a rien a redeclarer ici. */
#brief .section-head,
#brief .section-head > * {
margin-inline-start: 0;
margin-inline-end: 0;
text-align: left;
}
#brief .section-lede { max-width: 68ch; }
/* Les deux boutons RFC 2350 se rangent a gauche, sous le lede, comme tout le
contenu de cette section desormais. */
#brief .rfc-row {
justify-content: flex-start;
margin-inline: 0;
}
/* ── #bolsa-form : L'EN-TETE A GAUCHE, LA PHOTO A DROITE 2026-08-18 ───────
Le centrage pose plus tot est annule : Gabriel le veut a gauche, comme le
reste du site. La photo prend la colonne de droite.
La colonne de texte passe en premier dans la grille ET dans le HTML : c'est ce
qui donne le meme ordre a l'oeil et a la lecture d'ecran, sans avoir a jouer
sur order. */
.bolsa-top {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(24px, 2.6vw, 40px) clamp(32px, 4.2vw, 80px);
/* STRETCH ET NON CENTER : la photo doit monter sur toute la hauteur de la
colonne de gauche — en-tete plus formulaire — et non se centrer sur elle. */
align-items: stretch;
/* LA GRILLE EST BORNEE, PAS LA PHOTO. Borner la photo aurait laisse 336 px de
vide a sa droite a 1920 ; borner la grille reduit la colonne de droite sans
creer de trou, puisque le bloc se termine ou la photo se termine. Effet de
bord bienvenu : la largeur de la photo devient stable — 424 px a 1920, 388 a
1360 — la ou elle variait du double. */
/* 1400 et non 1300 : apres les 820 px du formulaire et les 80 de gouttiere,
il reste 500 px pour la photo, soit 750 de haut en 2:3 — la hauteur du
formulaire a 8 px pres. */
max-width: 1400px;
margin-bottom: clamp(32px, 3.6vw, 60px);
}
/* Les trois enfants sont places nommement : c'est ce qui permet a la photo de
partager la ligne du formulaire et rien d'autre. */
.bolsa-top > .section-head { grid-column: 1; grid-row: 1; }
.bolsa-top > form { grid-column: 1; grid-row: 2; min-width: 0; }
.bolsa-top > .bolsa-photo { grid-column: 2; grid-row: 2; }
@media (min-width: 1360px) {
/* 820 px est la largeur que le formulaire avait avant que son style inline
ne soit retire, et Gabriel la juge bonne. C'est un MAXIMUM, pas une
largeur fixe : sous 1024 px la colonne se comprime au lieu d'ecraser la
photo, qui garde un plancher de 260 px. */
.bolsa-top { grid-template-columns: minmax(0, 820px) minmax(260px, 1fr); }
}
#bolsa-form .bolsa-top .section-head {
margin-inline: 0;
text-align: left;
max-width: 62ch;
}
#bolsa-form .bolsa-top .section-head .eyebrow,
#bolsa-form .bolsa-top .section-head .section-title,
#bolsa-form .bolsa-top .section-head .section-lede { margin-inline: 0; }
/* Le cadre est en 4:5 et l'image le remplit : le master est en 16:9, un contain
y aurait laisse deux bandes vides. */
.bolsa-photo {
margin: 0;
overflow: hidden;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-strong);
}
/* LE RAPPORT 4:5 VAUT A TOUTES LES LARGEURS DESORMAIS. Etiree sur la hauteur du
formulaire, la photo faisait 742 px pour 424 de large — un rapport de 0,57 la
ou l'image est cadree en 0,8 : cover coupait donc du haut et du bas, et c'est
ce qui la faisait paraitre trop haute.
A son rapport, elle tombe a 530 px pour 424 de large et retrouve les
proportions dans lesquelles elle a ete recadree. */
/* 2:3, le rapport du 35 mm : celui dans lequel un portrait se cadre par
defaut, et il laisse moins de vide sous la photo que le 4:5 — 106 px
contre 212 face a un formulaire de 742. */
.bolsa-photo { aspect-ratio: 2 / 3; }
@media (min-width: 1360px) {
/* CENTREE sur le formulaire : son milieu tombe sur celui du formulaire, ce que
align-self: start ne faisait pas — il la calait sur le bord haut. */
.bolsa-photo { align-self: center; }
}
.bolsa-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 32%; /* le visage est dans le tiers haut */
display: block;
}
/* Sous 900 px la photo passe sous le texte : en portrait plein cadre elle
prendrait tout l'ecran, on la borne et on la centre. */
/* Sous 1360 px la photo passe sous le texte : en portrait plein cadre elle
prendrait tout l'ecran, on la borne et on la centre. */
@media (max-width: 1359px) {
.bolsa-photo { max-width: 300px; margin-inline: auto; }
}
/* ── #bolsa-form PASSE AU BLEU AUSSI 2026-08-18 ──────────
Meme dispositif que #csirt-form : les variables sont redefinies dans la portee
de la section, donc surtitre, accent du titre, numeros d'etape, intitules de
groupe, bouton d'envoi et liens suivent sans etre repeints un par un.
ECRIT POUR CET ID ET NON POUR LA CLASSE PARTAGEE : .contact-section, que
portent les deux sections, a deja fait fuiter trois regles aujourd'hui. Deux
blocs qui se ressemblent valent mieux qu'un selecteur qui atteint une section
non demandee. */
#bolsa-form {
--color-primary: var(--color-csirt);
--color-primary-deep: var(--color-csirt-ink);
--color-primary-soft: var(--color-csirt-soft);
--color-primary-lift: var(--color-csirt-soft);
--plq: var(--color-csirt);
}
#bolsa-form .csirt-form__step-num,
#bolsa-form .csirt-form__group-title,
#bolsa-form .form-section__num,
#bolsa-form .form-group__num {
color: var(--color-csirt) !important;
}
/* Le bouton plein prend un aplat cyan, bien plus lumineux que le rouge : son
encre claire rendrait 2,32:1 pour un seuil de 4,5. Meme correction que sur
contacto — encre sombre, 7,8:1. */
#bolsa-form .btn-primary,
#bolsa-form .btn-primary span,
#bolsa-form .csirt-form__submit,
#bolsa-form button[type="submit"] {
color: #101010 !important;
-webkit-text-fill-color: #101010 !important;
}
#bolsa-form .btn-primary .icon,
#bolsa-form .csirt-form__submit .icon,
#bolsa-form button[type="submit"] .icon { color: #101010 !important; }
/* Sous 1360 px la grille n'a qu'une colonne : les placements nommes ci-dessus
y laisseraient la photo accrochee a la ligne du formulaire, donc a cote de
rien. On les libere et l'ordre du HTML reprend la main. */
@media (max-width: 1359px) {
.bolsa-top > .section-head,
.bolsa-top > form,
.bolsa-top > .bolsa-photo { grid-column: auto; grid-row: auto; }
}
/* ── LA PHOTO DE BOLSA PREND L'ANIMATION DES CARTES D'INDUSTRIES 2026-08-18 ──
Meme geste que .industry-card : l'image se rapproche de 4 % au survol et une
equerre marque son coin bas gauche.
L'equerre demande var(--color-primary), que cette section redefinit en cyan :
elle est donc bleue sans qu'on l'ecrive, et suivrait un autre changement de
couleur de section sans retouche. */
.bolsa-photo { position: relative; }
.bolsa-photo img {
transition: transform var(--duration-slow) var(--ease-out);
}
.bolsa-photo:hover img { transform: scale(1.04); }
.bolsa-photo::after {
content: '';
position: absolute;
bottom: 12px;
left: 12px;
width: 36px;
height: 36px;
border-bottom: 2px solid var(--color-primary);
border-left: 2px solid var(--color-primary);
z-index: 2;
opacity: 0.6;
transition: opacity var(--duration-normal) var(--ease-out);
pointer-events: none;
}
.bolsa-photo:hover::after { opacity: 1; }
/* LES DEUX GESTES QUI MANQUAIENT. .industry-card:hover ne fait pas que reveler son
equerre et rapprocher son image : son filet s'affirme et une ombre se creuse
sous elle. Sans eux, l'equerre apparaissait sur un cadre immobile.
Les valeurs sont celles de la carte, avec la couleur de la section — donc le
cyan ici, et non le rouge ecrit en dur dans la regle d'origine. */
.bolsa-photo {
transition: border-color var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);
}
.bolsa-photo:hover {
border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40),
0 0 32px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.bolsa-photo { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
.bolsa-photo img { transition: none; }
.bolsa-photo:hover img { transform: none; }
}
/* ── CASOS DE EXITO : LE CTA DEVIENT UN BOUTON PLEIN VERT 2026-08-18 ──────
Il n'etait qu'un texte suivi d'une fleche. Il prend la forme de
« Hablar con un experto » — pilule a aplat plein — avec le vert de la section.
L'ENCRE EST SOMBRE, ET C'EST MESURE : le vert #22C55E est bien plus lumineux
que le rouge, l'encre claire du systeme y rendrait environ 1,9:1 pour un seuil
de 4,5 a 16 px. #101010 donne environ 9:1. Meme piege que sur les aplats cyan
de contacto et de bolsa, pris d'emblee cette fois. */
#casos-exito .section-cta {
padding: 14px 28px;
border-radius: var(--radius-full);
background: var(--color-grc);
border: 1px solid var(--color-grc);
color: #101010 !important;
-webkit-text-fill-color: #101010 !important;
font-size: var(--text-base);
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
transition: background var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);
}
#casos-exito .section-cta .icon { color: #101010 !important; }
#casos-exito .section-cta:hover {
background: color-mix(in srgb, var(--color-grc) 84%, #000);
box-shadow: 0 0 24px color-mix(in srgb, var(--color-grc) 42%, transparent);
}
/* Le soulignement anime que portait le lien n'a plus de sens sur un aplat. */
#casos-exito .section-cta::after { display: none; }
/* ── LES REPERES DE CAS FORMENT ENFIN UNE GRILLE 2026-08-22 ──────────
══════════════════════════════════════════════════════════════════════════
Gabriel : « la partie a droite ou il y a les numeros flotte partout, rien
n'est aligne ». C'etait exact, et voici ce que la mesure a montre.
Ces reperes etaient colles au BORD DROIT de leur cellule (justify-items:
end). Leurs bords droits s'alignaient donc parfaitement — verifie, 1381 px
pour les deux items de la colonne 2. Mais leur largeur suit leur CONTENU :
142 px pour « 122 », 166 px pour « 365 días ». Alignes par la droite, des
blocs de largeurs differentes n'ont plus aucune verticale commune a gauche,
la ou l'oeil cherche justement le debut de chaque chiffre. D'ou l'impression
de flottement : ce n'etait pas un defaut d'alignement, c'etait un alignement
sur le mauvais bord.
Les reperes remplissent maintenant leur cellule et leur contenu part de la
gauche. Consequence : deux colonnes franches, quatre chiffres qui demarrent
sur deux verticales, et des libelles qui se lisent depuis leur bord gauche
comme partout ailleurs sur ce site.
Les DEUX volets sont concernes, pas seulement celui d'Equateur : ils
partagent la grille, et n'en aligner qu'un ferait sauter le bloc au
changement d'onglet. */
.cases__pane .cases__figures {
justify-items: stretch;
/* Deux colonnes explicites, et non un auto-fit : avec quatre reperes, le
auto-fit passait a quatre colonnes des que la place le permettait, ce qui
ecrasait les libelles sur deux ou trois lignes chacun. */
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.cases__pane .cases__figures .case-fig,
.cases__pane .cases__figures .case-ring { text-align: left; }
.cases__pane .cases__figures .case-fig__num { justify-content: flex-start; }
.cases__pane .cases__figures .case-fig__label,
.cases__pane .cases__figures .case-ring__label { margin-inline-start: 0; }
/* Le cadran garde sa taille propre mais part du meme bord que les chiffres :
sans cette ligne il restait centre dans sa cellule et cassait la verticale
de la premiere colonne. */
.cases__pane .cases__figures .case-ring__dial-wrap { margin-inline: 0; }
/* ==========================================================================
ADAPTATION TELEPHONE (iPhone / Android) — 2026-08-18
--------------------------------------------------------------------------
Tout ce bloc est enferme dans des media queries de petite largeur. Aucune
regle ne s'applique au-dessus de 919 px (a l'exception du rail d'onglets,
qui suit la media query du composant lui-meme, 61.99rem, parce que le
defaut corrige n'existe que lorsque le rail est deja passe a l'horizontale).
Le poste de travail ne voit donc rien changer.
Place en fin de fichier a dessein : plusieurs selecteurs de cette feuille
sont declares jusqu'a quatre fois, et a specificite egale c'est la derniere
declaration qui gagne.
========================================================================== */
@media (max-width: 919px) {
/* --- 1. Le selecteur de langue dans le menu -----------------------------
.lang-switch est masque sous 900 px pour le header ; il doit vivre ici. */
.mobile-menu__lang {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin: 0 0 var(--space-4);
padding: 12px 4px 0;
border-top: 1px solid var(--color-border);
}
.mobile-menu__lang-label {
font: 700 11px/1 var(--font-mono);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted);
}
.mobile-menu .lang-switch { display: inline-flex; margin-right: 0; }
/* 44 px de cible tactile sur chaque langue, contre 28 px auparavant. */
.mobile-menu .lang-switch__btn {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
/* --- 2. Saisie : plus jamais de zoom automatique ------------------------
Safari iOS agrandit la page des qu'un champ est sous 16 px, et ne revient
pas en arriere quand on en sort. Quatre zones de texte, le champ de
fichier et le champ de l'assistant etaient a 13,5 et 14 px. La graisse et
la fonte ne changent pas, seulement la taille, et seulement au telephone. */
.form-textarea,
.form-textarea--mono,
.form-file,
.form-input,
.form-select,
.aia-card__input {
font-size: 16px;
}
/* La case de consentement faisait 13 px : sous le doigt, c'est une cible
qu'on rate. Le libelle entier reste cliquable, comme avant. */
.form-checkbox input[type="checkbox"] {
width: 20px;
height: 20px;
flex: 0 0 20px;
}
.form-checkbox {
gap: 12px;
align-items: flex-start;
}
/* --- 3. Cibles tactiles ------------------------------------------------- */
/* Le bouton qui reduit l'assistant faisait 27 px. On elargit la zone sans
grossir le dessin : c'est la surface qui compte, pas l'icone. */
.aia-card__min {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Les liens de colonnes du pied de page etaient hauts de 18 px, colles les
uns aux autres : on rate systematiquement le voisin. */
.site-footer__col a,
.site-footer nav a {
display: inline-block;
padding-block: 9px;
}
/* --- 4. Textes d'interface sous le plancher de lisibilite ---------------
10 a 11 px se lisent a l'ecran d'un poste de travail, pas a bout de bras.
On remonte a 12 px les etiquettes qui portent une information, en laissant
leur graisse et leur interlettrage : le dessin ne change pas, la taille
seulement. */
.practice__chip,
.method__chip,
.solpanel__tab-method,
.solpanel__pane-method,
.liga-constellation__label,
.metric__label,
.practices__label,
.frameworks__label,
.how-stats__label,
.partner-level__tag,
.final-cta__meta-item,
.form-section__num,
.form-label,
.method__proof-label,
.contact-info__countries-label {
font-size: 12px;
}
.method__role { font-size: 12px; }
.ring-stat__unit { font-size: 11px; }
/* La mention legale de l'assistant et son lien : 10,5 px, et le lien n'avait
que 13 px de haut. */
.aia-card__fine { font-size: 12px; }
.aia-card__privacy { display: inline-block; padding-block: 6px; }
}
/* --- 5. Le rail d'onglets des solutions ---------------------------------
Sous 62rem la liste passe a l'horizontale (regle existante, section 2f).
Deux defauts mesures a 390 px : chaque onglet heritait de width:100%, donc
occupait 350 px et UN SEUL etait visible ; et rien n'indiquait que le rail
se balaie, si bien que cinq des six solutions n'existaient pas pour le
visiteur. On rend donc l'onglet a la largeur de son texte, et on fond le
bord droit pour dire qu'il y a une suite. */
@media (max-width: 61.99rem) {
.solpanel__tab { width: auto; max-width: 68vw; }
.solpanel__list {
scroll-snap-type: x mandatory;
scroll-padding-left: 4px;
/* Le fondu des deux bords est le signe qu'il y a autre chose a cote. Il
est purement decoratif et ne mange aucune zone cliquable. */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
}
.solpanel__tab { scroll-snap-align: start; }
/* Meme signal pour la sous-navigation de page, dont les entrees suivantes
etaient coupees net au bord. */
.subnav__track {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
}
}
/* --- 6. Le seul debordement horizontal du site -------------------------
nosotros a 320 px : le document mesurait 324 px de large. Cause trouvee a
la mesure, ce n'est pas une marge mal reglee. La bande des certifications
est une grille de deux colonnes en 1fr ; or 1fr vaut minmax(AUTO, 1fr), et
ce minimum automatique interdit a la colonne de descendre sous la largeur
de son contenu. Les colonnes restaient donc a 146 px chacune, soit
146 + 12 + 146 = 304 px dans un conteneur qui n'en offre que 280.
minmax(0, 1fr) retire ce plancher et rend la colonne compressible.
Cadre a 639 px : au-dessus, la bande passe a trois puis cinq colonnes et
ces regles-la n'ont pas le defaut. */
@media (max-width: 639px) {
.cert-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cert-card { min-width: 0; }
.cert-card strong, .cert-card span { min-width: 0; overflow-wrap: anywhere; }
}
/* --- 7. Etiquettes que la premiere passe n'avait pas atteintes ----------
Elles portaient toutes un selecteur plus specifique ailleurs dans cette
feuille (.metrics--editorial .metric__label, .partner-level--elite
.partner-level__tag, .contact-info__countries .contact-info__countries-label,
.about-frameworks .frameworks__label). La classe est donc redoublee ici :
meme element, specificite egale a celle qui gagnait, et la derniere
declaration l'emporte. Aucune ne s'applique au-dessus de 919 px. */
@media (max-width: 919px) {
.metric__label.metric__label,
.frameworks__label.frameworks__label,
.partner-level__tag.partner-level__tag,
.contact-info__countries-label.contact-info__countries-label,
.case-fig__label.case-fig__label,
.case-ring__label.case-ring__label,
.case-flow__tag.case-flow__tag,
.cases__tab.cases__tab,
.presence__sub-label.presence__sub-label,
.highlight__label.highlight__label,
.country__since.country__since,
.essence-mark__lang.essence-mark__lang {
font-size: 12px;
}
/* Mon propre ajout du menu suit la meme regle que ce qu'il cotoie. */
.mobile-menu__lang-label { font-size: 12px; }
/* Deux cas decouverts a l'audit, apres la premiere passe.
Le tag Elite/Platinum/Gold : sa taille de 11 px est posee plus haut avec
!important (ligne ~4954), qu'aucune specificite ne peut battre. Meme
importance ici, plus tard dans la feuille et sous media query : c'est le
seul !important de tout ce bloc, et il ne fait que repondre a l'autre.
Le libelle "Ver el detalle" du depliant des methodologies etait a 11,5 px
(sa cible tactile, elle, fait deja 44 px de haut). */
.partner-level__tag { font-size: 12px !important; }
.method__disclose-toggle span { font-size: 12px; }
}
/* --- 8. Le personnage qu'on met en mouvement ---------------------------
Sur telephone le heros est servi en pose fixe et son animation ne se
telecharge qu'au toucher (persona-motion.js). Deux etats a montrer, sinon
le geste n'a pas de reponse : un pouce pendant le telechargement des
quelques megaoctets, et rien de particulier une fois l'animation en place.
Aucune de ces regles n'existe au-dessus de 919 px. */
@media (max-width: 919px) {
.method__media { cursor: pointer; }
.method__media.is-loading-motion img { opacity: 0.55; transition: opacity 200ms ease; }
.method__media.is-loading-motion::after {
content: '';
position: absolute;
left: 50%; top: 50%;
width: 26px; height: 26px;
margin: -13px 0 0 -13px;
border-radius: 50%;
border: 2px solid rgba(248, 250, 252, 0.25);
border-top-color: var(--color-primary);
animation: persona-spin 720ms linear infinite;
z-index: 3;
}
@keyframes persona-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.method__media.is-loading-motion::after { animation: none; }
}
}
/* --- 9. Le menu compact sur ecran court ---------------------------------
A 320 x 568 (petits iPhone), les quatre liens ne tenaient pas entre le
bandeau du haut et le bloc langue + boutons : le quatrieme n'apparaissait
qu'a moitie. La zone est scrollable, donc rien n'etait perdu, mais un menu
de quatre entrees ne devrait pas demander un geste de plus. Sous 640 px de
HAUTEUR, les liens et les marges se resserrent : les liens restent a plus
de 50 px de cible tactile. Les ecrans normaux ne changent pas. */
@media (max-width: 919px) and (max-height: 640px) {
.mobile-menu__link { padding: 9px 4px; font-size: var(--text-xl); }
.mobile-menu__inner { padding-top: var(--space-4); padding-bottom: var(--space-2); }
.mobile-menu__lang { margin-bottom: var(--space-2); padding-top: 8px; }
.mobile-menu__cta { padding-top: var(--space-3); }
.mobile-menu__cta .btn { padding-top: 12px; padding-bottom: 12px; }
}
/* ══════════════════════════════════════════════════════════════════════════
DIRECTEUR DE SCENES — enveloppes de mots des titres 2026-08-21
══════════════════════════════════════════════════════════════════════════
Le mot glisse depuis la droite A L'INTERIEUR de son enveloppe, qui coupe ce
qui depasse. C'est ce qui permet une entree laterale sans jamais produire de
barre de defilement horizontale : rien ne sort de la mise en page.
AUCUNE REGLE ICI NE CACHE QUOI QUE CE SOIT. Les etats de depart sont poses
par scene-director.js, en JavaScript. Sans lui, les titres sont lisibles
exactement comme avant — c'est la regle du depot : un script absent ne doit
jamais rendre un contenu invisible.
Le padding et la marge negative valent la place des jambages. Sans eux, le
« overflow: hidden » de l'enveloppe coupe le bas des g, j, p, q et des
accents bas : mesure faite sur « investigación », dont le g etait rase. */
.sc-w {
display: inline-block;
overflow: hidden;
vertical-align: top;
/* La paire padding/marge s'annule dans le flux : la ligne garde sa hauteur,
l'enveloppe gagne de la place sous la ligne de base. */
padding-bottom: 0.16em;
margin-bottom: -0.16em;
}
.sc-w__in {
display: inline-block;
/* will-change seulement pendant la scene : le poser en permanence sur tous
les mots de la page reviendrait a demander une couche de composition par
mot, pour rien. La classe est retiree a la fin de la timeline. */
}
.sc-playing .sc-w__in { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
/* Le directeur ne tourne pas du tout sous cette preference, donc aucun mot
n'est jamais decoupe. La regle est la par securite, pour le cas ou un
decoupage subsisterait d'un changement de preference en cours de session. */
.sc-w { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
.sc-w__in { transform: none !important; opacity: 1 !important; }
}
/* ── QUIENES SOMOS : L'INTERTITRE DE LA POLITIQUE 2026-08-22 ─────────
Le second paragraphe de la section EST la politique de qualite et de securite
de l'information ; Gabriel a demande qu'elle soit nommee. Un h3 et non un
paragraphe en gras : la structure du document doit dire ce que la mise en
forme montre, et un lecteur d'ecran doit pouvoir naviguer jusque-la.
Le corps reste petit et l'interlettrage large : c'est une etiquette de
section, pas un titre concurrent du h2 juste au-dessus. */
/* LA TYPO S'ACCORDE A CELLE DU TEXTE — 2026-09-04, releve par Gabriel :
« ce texte est dans une typo pas comme les autres, accorde-la a la typo du
texte et laisse sa couleur rouge ».
Il avait raison, et l'ecart etait triple : la famille MONOSPACE quand les
deux paragraphes qui l'encadrent sont en Plus Jakarta Sans, un corps de 11 a
13 px quand ils sont a 18, et une CAPITALISATION forcee avec 0,14em
d'interlettrage. Un intertitre plus petit que son propre texte se lisait
comme une etiquette technique, pas comme le titre de la politique qualite.
Il prend donc la famille et le corps du texte (.how__text p, --text-lg).
CE QUI RESTE POUR LE DISTINGUER, et c'est suffisant : la graisse 700 et le
rouge. La graisse n'est pas touchee parce que la demande porte sur la typo et
que sans elle un h3 de meme famille, meme corps et meme casse que son
paragraphe ne se distinguerait plus que par la couleur — ce qui exclut du
sens quiconque ne la percoit pas.
CONTRASTE : la section #quienes porte data-sol="clair", donc c'est la seconde
regle qui s'applique, --color-primary-deep #B01E1E, mesure a 6,58:1 sur
#F8FAFC. Le rouge de base y rendrait 4,62, conforme aussi. Sur fond SOMBRE en
revanche aucun des deux ne passerait (4,35 / 3,81 / 3,33 selon le sol) : si
cette section basculait un jour en sombre, il faudrait --color-primary-soft
#F87171, qui rend 7,59 / 6,66 / 5,82. */
.who__policy-title {
margin: clamp(22px, 2.4vw, 34px) 0 clamp(8px, 0.9vw, 12px);
font-family: inherit;
font-size: var(--text-lg);
font-weight: 700;
letter-spacing: normal;
text-transform: none;
line-height: var(--leading-snug);
color: var(--color-primary);
}
main > section[data-sol="clair"] .who__policy-title { color: var(--color-primary-deep); }
/* ── LA PHRASE DES CERTIFICATIONS EST CENTREE 2026-08-22 ────────────
Elle ferme le bloc des quatre alliances majeures, sous une rangee de quatre
logos centres : alignee a gauche, elle partait du bord d'une rangee qui,
elle, est centree — et se lisait comme un debut de paragraphe orphelin.
Centree, elle se pose sous les logos et fait la transition vers les
alliances specialisees.
Sa longueur de ligne est bornee : centrer un texte long sans le borner
donne des lignes de largeurs tres inegales, ce qui est pire que l'aligner a
gauche. */
.fantastic4 .alliances__note {
margin-inline: auto;
max-width: 62ch;
text-align: center;
}
/* ── LES SIX FIGURES DU HERO N'ONT PLUS LA MEME TAILLE 2026-08-22 ───────
══════════════════════════════════════════════════════════════════════════
Gabriel : « les super-heros sont tous de meme taille, varie-les pour que ce
soit naturel, en gardant NGSOC comme le plus grand ».
Jusqu'ici cinq figures partageaient exactement min(70%, 660px, 34vw) et seule
la capitane montait a 80 % : six personnages debout, alignes par les pieds,
dont cinq ont la tete rigoureusement a la meme hauteur. L'oeil lit un
gabarit, pas un groupe.
L'echelle descend depuis le centre vers les bords, ce qui est la façon dont
un groupe se place naturellement pour une photo : NGSOC domine, la capitane
le suit de pres, et les silhouettes s'abaissent en s'eloignant. Les ecarts
sont assez larges pour se voir (4 points de pourcentage entre voisins) et
assez petits pour qu'aucune figure ne paraisse rapetissee.
LES TROIS BORNES SONT CONSERVEES sur chaque figure, et ce n'est pas
decoratif : la note d'origine explique que la largeur totale de la rangee
vaut environ 2,8 fois sa hauteur une fois les chevauchements deduits, et
qu'a 1440 px sans la borne en vw, CTEM et GRC sortaient du cadre. Les trois
valeurs de chaque ligne gardent donc le meme rapport entre elles. */
.page-hero--liga .liga-row__fig[data-persona="ngsoc"] { height: min(80%, 748px, 38.0vw); }
.page-hero--liga .liga-row__fig[data-persona="asha"],
.page-hero--liga .liga-row__fig--capitana { height: min(76%, 716px, 36.5vw); }
.page-hero--liga .liga-row__fig[data-persona="csirt"] { height: min(72%, 678px, 34.5vw); }
.page-hero--liga .liga-row__fig[data-persona="zerotrust"] { height: min(69%, 650px, 33.0vw); }
.page-hero--liga .liga-row__fig[data-persona="ctem"] { height: min(66%, 622px, 31.5vw); }
.page-hero--liga .liga-row__fig[data-persona="grc"] { height: min(64%, 604px, 30.5vw); }
/* ── LA BARRE DES CAS : ONGLETS ET BOUTON SUR UNE LIGNE 2026-08-22 ──────
Le bouton « Cuentenos su proyecto » vivait dans l'en-tete de section, face au
titre, dans un espacement automatique : il commençait a 1 117 px quand les
deux onglets commencent a 58, sans partager d'alignement avec quoi que ce
soit. Il descend dans leur rangee.
La barre enveloppe le tablist ET le bouton : le bouton reste hors du role
tablist, qui ne doit contenir que des onglets. Sous 47,5 rem la barre passe
en colonne, le bouton se rangeant sous les onglets plutot que de les
comprimer. */
.cases__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: clamp(16px, 2vw, 28px);
margin-bottom: clamp(26px, 2.8vw, 44px);
}
/* La marge du bas vivait sur .cases__tabs : elle appartient desormais a la
barre, sinon les deux se cumulaient. */
.cases__bar .cases__tabs { margin-bottom: 0; }
@media (max-width: 47.5rem) {
.cases__bar { flex-direction: column; align-items: flex-start; }
}
/* ── LES DEUX BLOCS DE TEXTE SONT JUSTIFIES 2026-08-22 ───────────────
══════════════════════════════════════════════════════════════════════════
Gabriel : « les blocs de texte d'esencia et de nosotros ne sont pas carres
du cote droit ». Ils etaient en drapeau, chaque ligne s'arretant ou le mot
suivant ne tenait plus. Justifies, leurs deux bords tombent sur une verticale
nette.
LA CESURE VIENT AVEC, ET CE N'EST PAS OPTIONNEL. Un texte justifie SANS
coupure de mots ne peut etaler que les espaces : sur une colonne etroite et
avec des mots longs — « ciberseguridad », « inmobiliario »,
« transformacion » — cela creuse des trous et fait apparaitre ces rivieres
blanches qui traversent le paragraphe. Le remede est la cesure, qui repartit
la contrainte sur les mots au lieu de la concentrer sur les blancs.
hyphens: auto s'appuie sur l'attribut lang du document, qui vaut « es » et
passe a « en » quand i18n change la langue : la cesure suit donc la langue
affichee sans qu'on ait rien a declarer de plus. Le prefixe -webkit- reste
necessaire pour Safari.
Seuls les PARAGRAPHES sont justifies. Les titres, la devise et les libelles
gardent leur drapeau : justifier un texte de deux ou trois lignes produit
exactement les trous qu'on cherche a eviter, la derniere ligne etant seule a
ne pas etre etiree. */
.how__text > p,
.essence-body > p {
text-align: justify;
-webkit-hyphens: auto;
hyphens: auto;
/* Garde-fou : sans limite, un mot peut etre coupe apres deux lettres, ce qui
se lit mal et laisse une syllabe orpheline en bout de ligne. */
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 3;
hyphenate-limit-chars: 6 3 3;
}
/* Sous 62 rem la colonne se retrecit fortement : en dessous d'une quarantaine
de caracteres par ligne, la justification ne trouve plus assez de mots par
ligne pour repartir les blancs, et le drapeau redevient le meilleur choix. */
@media (max-width: 47.5rem) {
.how__text > p,
.essence-body > p { text-align: left; }
}
/* ── LE SOUS-MENU DE LA HOME PORTE HUIT ENTREES 2026-08-22 ───────────
« Industrias Clave » a ete ajoutee a la demande de Gabriel. Mesure avant/
apres : a sept entrees la piste tenait exactement dans sa largeur a toutes
les tailles ; a huit elle debordait de 4 px a 1440, 18 a 1280 et 35 a 1200,
ce qui declenchait un defilement horizontal sur une barre qui, jusque-la,
montrait toutes ses sections d'un coup. Perdre cette vue d'ensemble pour
quatre pixels serait un mauvais echange.
La gouttiere de chaque lien se resserre donc d'un cran, sur la home
UNIQUEMENT : huit liens a deux gouttieres font seize marges, et deux pixels
repris de chaque cote rendent trente-deux pixels — davantage que ce qui
manque partout au-dessus de 1200 px. Le sous-menu de metodologias, qui n'a
que six entrees et de la place de reste, garde le sien.
Reglage arrete a la mesure, en deux passes : a 0,85vw il restait 3 px de
trop a 1280 px, ce qui suffisait a rallumer le defilement. A 0,72vw la barre
tient en entier de 1920 jusqu'a 1280 px. En dessous, le defilement reste le
comportement prevu, avec ses masques de bord — une barre de huit entrees ne
peut pas tenir sur une tablette sans ecraser ses libelles. */
.subnav--home .subnav__link { padding-inline: clamp(6px, 0.72vw, 14px); }
/* ── LES PUCES DE PAYS ONT TOUTES LA MEME HAUTEUR 2026-08-22 ─────────
══════════════════════════════════════════════════════════════════════════
Gabriel : « je voudrais que Mexico, Chile, Ecuador, Panama, CDMX et Tenerife
soient de la meme taille que Colombia ». Sa liste designait exactement les
puces qui mesuraient 44 px quand les cinq autres en faisaient 67.
LA CAUSE N'ETAIT PAS DANS LES PUCES. Mesure des enfants d'une puce haute et
d'une puce basse : rigoureusement identiques — pastille 8x8, nom 90x22,
badge 43x20. C'est donc la puce elle-meme qui etait ETIREE, pas son contenu.
.country-list est une grille, et une grille etire ses enfants par defaut :
des qu'une puce d'une rangee depasse — a certaines largeurs un nom long et
son badge ne tiennent plus sur une ligne — sa voisine s'etire avec elle. Le
resultat changeait d'une largeur a l'autre : a 1920 c'etaient Rep.
Dominicana, Colombia, Peru, Estados Unidos et Espana ; a 1280, Ecuador et
Rep. Dominicana. Un pays n'a pas a etre plus haut qu'un autre parce que son
voisin de rangee porte un nom plus long.
align-items: start rend a chaque puce sa hauteur naturelle. Elles tombent
toutes a 44 px, contenu identique oblige, et celles dont le texte passe
vraiment sur deux lignes grandissent seules sans entrainer leurs voisines. */
.country-list { align-items: start; }
/* LA TAILLE D'ORIGINE EST RENDUE — 2026-08-22. J'avais resserre la puce
(gouttiere 12 -> 8 px, marge 14 -> 11) et releve le seuil de la grille de 180
a 205 px pour faire tenir « Rep. Dominicana » et « Estados Unidos » sur une
ligne. Vu en place, Gabriel prefere les proportions d'avant : le seuil plus
haut elargissait nettement les puces sur grand ecran, 299 px a 1920 contre
197 auparavant.
CE QUI RESTE, ET C'EST L'ESSENTIEL : le align-items: start ci-dessus. C'etait
lui le vrai correctif — il empeche une puce d'etre etiree parce que sa voisine
de rangee porte un nom plus long. Sans lui, cinq puces sur onze prenaient une
hauteur qu'elles n'avaient pas demandee, et le groupe changeait d'une largeur
a l'autre.
Consequence assumee du retour en arriere : les deux noms les plus longs
repassent sur deux lignes a certaines largeurs. Ils sont alors seuls a le
faire, sans entrainer personne. */
/* ── LE RECAPITULATIF DE PRISE DE RENDEZ-VOUS 2026-08-22 ─────────────
L'assistant affiche ce qu'il a compris avant que le visiteur s'en aille : si
un champ a ete mal saisi, il le voit et peut relancer une demande corrigee,
au lieu d'attendre un rappel qui n'arrivera jamais. */
.aia-msg__recap {
margin-top: 10px;
padding: 10px 12px;
border-radius: 10px;
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.aia-msg__recap-title {
margin: 0 0 6px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-primary);
}
.aia-msg__recap-line { margin: 0 0 3px; font-size: 13px; line-height: 1.45; }
.aia-msg__recap-line:last-child { margin-bottom: 0; }
/* ── LA DEVISE SE COUPE APRES « HOW THINGS » 2026-08-22 ──────────────
Gabriel veut deux lignes, avec « should be done. » a la ligne. La coupure
est donc DECLAREE et non laissee au hasard de la largeur : l'accent passe en
bloc, ce qui la place toujours au meme endroit, quelle que soit la taille de
l'ecran ou la longueur de la traduction. Laisser le texte revenir a la ligne
tout seul aurait donne une coupure differente a chaque largeur — parfois
apres « should », parfois apres « be ».
La ligne de base reste celle de la devise : c'est une seule phrase en deux
lignes, pas deux paragraphes. */
.essence-motto .accent {
display: block;
}
/* ── Les onze puces de pays ont toutes la meme hauteur ──── 2026-08-24 ──
Demande de Gabriel, et c'est l'inverse du reglage precedent : plutot que de
faire rentrer « Rep. Dominicana » et « Estados Unidos » sur une ligne, on
donne a TOUTES les puces la hauteur de ces deux-la. Les huit pays et les
trois villes — CDMX, Tenerife et Panama, celles a pastille violette du
centre de supervision — sont desormais du meme gabarit.
D'OU VIENT LA VALEUR. Elle est mesuree, pas choisie : une puce a deux lignes
fait 66,78 px, et ce nombre se decompose exactement. Deux lignes de nom a
22,4 px (soit 1,6 em pour un corps de 14), plus 20 px de marge interne haut
et bas, plus 2 px de filet. D'ou calc(3.2em + 22px), qui redonne 66,8 px.
ELLE EST ECRITE EN EM ET NON EN PIXELS, volontairement. La part liee au
texte suit le corps de la puce : si --text-sm bouge un jour, ou si un
visiteur agrandit la police de son navigateur, la hauteur suit au lieu de
couper le nom. Seules les marges internes et le filet, qui eux sont fixes,
restent en pixels.
MIN-HEIGHT ET NON HEIGHT : un nom qui passerait un jour sur trois lignes
agrandit sa puce au lieu de deborder. Le grid interne porte deja
align-items: center, donc le contenu des puces a une seule ligne se centre
dans la hauteur rendue disponible, sans retomber en haut de la boite.
Rien ici ne touche a la largeur : le seuil de grille reste a 180 px, les
proportions horizontales sont bien celles que Gabriel a redemandees. */
.country { min-height: calc(3.2em + 22px); }
/* ══════════════════════════════════════════════════════════════════════════
LE BLEU EDITORIAL CESSE D'EMPRUNTER LA COULEUR DU CSIRT — 2026-09-04
══════════════════════════════════════════════════════════════════════════
Gabriel, ce jour : « il y avait une erreur concernant le bleu qu'on a
utilise, voila le bon bleu : #3773c2 », et, sur le perimetre : le bleu
editorial seulement, la persona CSIRT garde son cyan.
POURQUOI CE BLOC EST UN SCOPE DE TOKENS ET NON SOIXANTE REMPLACEMENTS.
--color-csirt est appele environ soixante fois dans ce fichier, et ces
appels sont de DEUX natures melangees : la persona CSIRT (sa carte, sa
figure de La Liga, sa constellation, son onglet de sous-nav, le liseré de
son formulaire) et le bleu editorial de cinq sections. Remplacer au texte
aurait demande de trancher soixante fois, avec une chance de se tromper a
chaque ligne, et la faute aurait ete invisible : un cyan et un bleu se
ressemblent sur une capture.
Ici, on redefinit les trois tokens du cyan DANS le sous-arbre des sections
editoriales. Aucune regle existante n'est touchee, l'heritage des custom
properties fait le travail, et la persona CSIRT est intacte par
construction. C'est aussi reversible en supprimant ce bloc.
POURQUOI IL EST EN FIN DE FICHIER : piege 2 du repo. A specificite egale
c'est la derniere declaration qui gagne. Aucune autre regle ne definit
--color-csirt sur ces conteneurs, mais la place en fin de fichier evite
d'avoir a le reverifier a chaque ajout futur.
LES CINQ SECTIONS, ET UN FORMULAIRE :
.industries « Foco en industrias claves » (home)
.final-cta--azul le CTA final de la home, de metodologia ET de nosotros
— la remarque « portee par cette section seule » du
bloc de 2026-08-17 est PERIMEE, mesure ce jour :
index.html:1493, metodologia.html:828, nosotros.html:605
#soluciones titre et pastille (home)
#razones « Por que preferirnos » (nosotros)
.essence-lead la devise d'esencia (nosotros)
.problema__turn-text « INTEGRARLO TODO. » (home)
#bolsa-form les numeros d'etape du formulaire d'emploi. Ce n'est
pas la persona CSIRT : c'est le meme emprunt
decoratif, il suit donc le bleu.
HORS SCOPE, VOLONTAIREMENT : #csirt-form, qui est le formulaire de
l'equipe CSIRT et dont le bleu EST sa couleur d'equipe ; et tout selecteur
portant [data-persona="csirt"]. */
.industries,
.final-cta--azul,
#soluciones,
#razones,
#presencia,
.essence-lead,
.problema__turn-text,
#bolsa-form {
--color-csirt: var(--color-azul);
--color-csirt-soft: var(--color-azul-soft);
--color-csirt-ink: var(--color-azul-ink);
}
/* ── LES TEXTES QUI ETAIENT AU TON PLEIN DOIVENT PASSER AU SOFT ───────────
Le cyan #06B6D4 est une couleur claire : en TEXTE sur les sols sombres il
rendait 8,65 / 7,59 / 6,63:1. Le bleu #3773c2 est une couleur moyenne et
rend 4,39 / 3,85 / 3,37 : il ECHOUE sur les trois, noir pur compris.
Les regles ci-dessous sont donc obligatoires, pas cosmetiques : sans elles
le passage au bleu rendrait ces libelles non conformes.
Mesure apres correctif : 8,26 / 7,25 / 6,33:1. */
#bolsa-form .csirt-form__step-num,
#bolsa-form .csirt-form__group-title,
#bolsa-form .form-section__num,
#bolsa-form .form-group__num {
color: var(--color-azul-soft) !important;
}
/* ── UN DEFAUT ASSUME EN AOUT SE TROUVE REPARE PAR CE CHANGEMENT ──────────
« INTEGRARLO TODO. » est pose sur la bande CLAIRE de la home. Le bloc du
2026-08-17 le disait franchement : le cyan plein n'y rendait que 2,32:1,
sous le seuil de 3 exige meme par ces 64 px, et aucune variante du cyan ne
convenait (le soft a 1,39, l'ink a 4,55 mais ne ressemblait plus au bleu du
site). Le choix etait assume faute de mieux.
Le bleu de Gabriel resout la situation sans exception a poser : #3773c2
rend 4,57:1 sur --sol-clair, donc il passe le seuil de 3 de ce titre ET
celui de 4,5 du texte courant. Rien a ajouter ici, c'est note pour que
personne ne rouvre le sujet en croyant le defaut encore la. */
/* ══════════════════════════════════════════════════════════════════════════
UN BOUTON DE CONTACT PAR METODOLOGIA — 2026-09-04
══════════════════════════════════════════════════════════════════════════
Demande de Gabriel : « un bouton de contactanos en dessous de chaque card de
servicios, de la meme couleur que la section, chaque metodologie aura le
sien, trouve un emplacement strategique ».
L'EMPLACEMENT RETENU : dans .method__proof, APRES le « Ver el
detalle ». Trois raisons.
D'abord, c'est le bas du seul bloc de la bande qui apporte une preuve (le
nombre de services, les referentiels, puis le detail) : le bouton arrive
quand le visiteur vient de lire ce que le frente sait faire.
Ensuite, le detail est FERME par defaut : le bouton est donc visible sans
qu'on ait rien a deplier, et il descend naturellement quand on ouvre.
Enfin, il reste DANS la carte de preuve et non sous la bande entiere : sur
les bandes ou le personnage est a droite, un bouton pose sous la bande se
serait retrouve seul au milieu d'une gouttiere.
LA COULEUR VIENT DE --persona ET DE --persona-on, qui existaient deja et que
ce bouton n'a fait que consommer. C'est ce qui garantit le contraste, et il
est mesure pour les six : aplat + encre du DS rend
asha 4,62 · ctem 6,79 · ngsoc 15,44 · csirt 7,84 · zerotrust 4,81 · grc 8,35
Le plus faible est ASHA a 4,62:1, seul aplat de la palette a porter du BLANC,
conforme SANS MARGE : ne pas descendre ce libelle sous 16 px.
LE SURVOL NE TOUCHE PAS LA COULEUR DE FOND, et c'est une mesure qui l'a
decide. Assombrir l'aplat de 12 % — le reflexe habituel — donne
asha 5,68 · ctem 5,33 · ngsoc 11,78 · csirt 6,12 · grc 6,49
mais ZEROTRUST TOMBE A 3,87:1, sous le seuil. Le violet est le faux ami que
la doctrine des deux regimes signale deja : il parait sombre et ne l'est pas
assez. Et l'eclaircir a la place ne marche pas non plus, puisque ASHA porte
du blanc et les cinq autres de l'encre sombre : la direction sure serait
inverse selon la persona.
Le survol passe donc par l'elevation et une lueur, exactement comme le fait
deja .persona:hover ailleurs sur le site. Aucun ratio ne bouge. */
.method__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-6);
padding: 12px 22px;
border-radius: var(--radius-full);
border: 1px solid var(--persona, var(--color-primary));
background: var(--persona, var(--color-primary));
color: var(--persona-on, var(--color-fg));
/* 16 px et non 14 : le ratio d'ASHA est a 4,62:1, conforme sans marge, et le
seuil de 4,5 ne vaut que pour du texte de cette taille au moins. */
font-size: var(--text-base);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);
}
.method__cta .icon {
width: 18px;
height: 18px;
transition: transform var(--duration-normal) var(--ease-out);
}
.method__cta:hover,
.method__cta:focus-visible {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35),
0 0 22px color-mix(in srgb, var(--persona, var(--color-primary)) 42%, transparent);
}
.method__cta:hover .icon,
.method__cta:focus-visible .icon { transform: translateX(3px); }
/* Le focus clavier garde un anneau visible EN PLUS de l'elevation : sur un
aplat colore, une ombre portee ne suffit pas a dire ou est le focus. */
.method__cta:focus-visible {
outline: 2px solid var(--color-fg);
outline-offset: 3px;
}
/* Sur la bande CLAIRE (CTEM et GRC, data-sol="clair"), l'aplat persona reste
l'aplat persona : les six ratios ci-dessus sont ceux de l'aplat contre son
encre, ils ne dependent pas du sol. Rien a redefinir ici, c'est note pour
qu'on ne cherche pas une regle manquante. */
/* ── LA ZONE DE REPONSE DU FORMULAIRE DE CONTACT ─────────────────────────
Nouvelle classe, pour la nouvelle page contacto.html. Elle est vide au
chargement et n'occupe alors aucune place : sans le :empty, une marge et une
hauteur de ligne creusaient un trou sous les boutons.
Les trois etats disent trois choses differentes et ne doivent pas se
ressembler — surtout « warn », qui signale que l'envoi automatique n'est pas
encore branche et que le visiteur doit ecrire a l'adresse. */
.form-estado {
margin-top: var(--space-5);
padding: 12px 16px;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-fg);
font-size: var(--text-sm);
line-height: var(--leading-body);
}
.form-estado:empty {
display: none;
}
/* --color-muted sur --color-surface nu : 5,52:1. */
.form-estado.is-pending {
color: var(--color-muted);
}
/* Vert du DS sur son propre fond a 12 %, soit rgb(42,61,49) : 5,06:1, au-dessus
du seuil de 4,5 pour ces 14 px. */
.form-estado.is-ok {
border-color: color-mix(in srgb, var(--color-success) 46%, transparent);
background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
color: var(--color-success);
}
/* L'etat « pas encore branche ». Il n'est ni un succes ni une erreur : c'est
l'orange de CTEM, seule couleur chaude du systeme qui ne soit pas le rouge
de l'echec.
MAIS PAS L'ORANGE PUR, et c'est une mesure qui l'a impose : --color-ctem
#F97316 sur son propre fond a 12 % (rgb 68,52,40) ne rend que 4,26:1, sous le
seuil. Trois issues testees — baisser le fond a 8 % rend 4,52, conforme sans
marge ; l'orange-400 rend 5,27 ; l'orange-300 rend 7,08 mais derive de 6
degres de teinte. Retenu : --color-ctem-soft, orange-400, 5,27:1 et 2,4
degres d'ecart. C'est le meme geste que --color-primary-soft (red-400),
--color-zerotrust-soft (purple-400) et --color-azul-soft (blue-400) : la
famille de variantes claires du DS gagne son quatrieme membre. */
.form-estado.is-warn {
border-color: color-mix(in srgb, var(--color-ctem) 46%, transparent);
background: color-mix(in srgb, var(--color-ctem) 12%, var(--color-surface));
color: var(--color-ctem-soft);
}
/* Le rouge d'ERREUR et non le rouge de MARQUE : --color-primary #DC2626 ne rend
que 2,61:1 sur ce fond, tres loin du seuil. --color-danger-soft #FCA5A5 rend
6,64:1 et se lit toujours comme un rouge. */
.form-estado.is-error {
border-color: color-mix(in srgb, var(--color-destructive) 46%, transparent);
background: color-mix(in srgb, var(--color-destructive) 12%, var(--color-surface));
color: var(--color-danger-soft);
}
/* ── LA MENTION « QUELLE VERSION FAIT FOI » DE L'AVIS DE CONFIDENTIALITE ──
Posee le 2026-09-04 avec la traduction de cette page en anglais et en
francais. Sa valeur espagnole est une chaine VIDE : en espagnol le
paragraphe reste donc sans contenu, et :empty le retire du flux. C'est ce
qui permet d'avoir une mention dans deux langues sur trois sans dupliquer
la page ni ajouter un test dans un script.
Le liseré rouge et l'italique la distinguent du corps juridique : c'est un
avertissement sur le document, pas une clause du document. */
.legal-aviso-traduccion {
margin: 0 0 var(--space-8);
padding: var(--space-4) var(--space-5);
border-left: 3px solid var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-size: var(--text-sm);
font-style: italic;
line-height: var(--leading-body);
/* --color-muted sur ce fond compose, rgb(57,43,43) : 5,29:1, au-dessus du
seuil de 4,5 pour ces 14 px. Le rouge de marque n'y passerait pas
(2,81:1) : c'est le liseré qui porte la couleur, pas le texte. */
color: var(--color-muted);
}
.legal-aviso-traduccion:empty { display: none; }
/* ══════════════════════════════════════════════════════════════════════════
L'EN-TETE S'EFFACE AU-DESSUS DU HERO DE LA HOME — 2026-09-05
══════════════════════════════════════════════════════════════════════════
Demande de Gabriel : voir l'animation du bouclier DERRIERE l'en-tete tant
qu'on est sur le hero, puis retrouver l'en-tete actuel des qu'on le quitte.
── CE QUI RENDAIT LA DEMANDE IMPOSSIBLE TELLE QUELLE ────────────────────
`.site-header` est en `position: sticky`, donc il OCCUPE SA PLACE DANS LE
FLUX. Mesure faite avant d'ecrire : le header va de y=0 a y=89, et le hero
commence a y=89, exactement dessous. Il n'y a RIEN derriere le header.
Le passer en `background: transparent` aurait donc laisse voir le fond noir
du body : la demande aurait paru executee, et l'animation ne serait jamais
apparue. C'est le genre de correctif qui se verifie a l'oeil et se croit
fait.
── LE HERO REMONTE SOUS L'EN-TETE, AVEC DEUX COMPENSATIONS ──────────────
1. `margin-top` negatif de la hauteur du header : le hero passe dessous.
2. Le CONTENU redescend d'autant, par un padding sur `.hero__inner`. On ne
touche PAS au padding de `.hero`, et c'est deliberé : il est declare deux
fois, dont une en `!important` dans une requete media pour les ecrans peu
hauts (l. ~8311, « padding-top: 44px !important »). Le modifier aurait
demande de rejouer ce cas particulier ; le compenser ailleurs le laisse
intact. `.hero__inner` n'a qu'une seule declaration, `width: 100%`.
3. La HAUTEUR gagne la meme valeur. Sans cela le bas du hero remonterait de
89 px et le liseré de la bande de logos apparaitrait trop tot — or ce
calibrage est explicite : `calc(100vh - 117px)`, un chiffre pose le
2026-08-12 pour laisser voir « un LISERE de la bande blanche, pas les
logos ». La position du bas du hero est donc identique au pixel pres
avant et apres ce changement.
`--hauteur-entete` vaut `--header-h` PLUS un pixel : le header mesure 89 px
et non 88, la bordure du bas s'ajoutant a la hauteur de `.site-header__inner`.
Elle suit toute seule le passage a 76 px sous 768 px.
── LA TRANSPARENCE N'EST PAS TOTALE, ET C'EST UNE MESURE QUI L'A DECIDE ──
Voir le bloc de mesure plus bas. */
:root { --hauteur-entete: calc(var(--header-h) + 1px); }
.hero {
margin-top: calc(-1 * var(--hauteur-entete));
/* Le bas du hero ne bouge pas : on rend a la hauteur ce que la marge lui a
pris. Les deux lignes reprennent la forme de la regle du 2026-08-12
(vh en repli, svh pour ignorer la barre d'URL mobile) et son !important,
sans quoi celle-la gagnerait. */
min-height: max(calc(560px + var(--hauteur-entete)), calc(100vh - 117px + var(--hauteur-entete))) !important;
min-height: max(calc(560px + var(--hauteur-entete)), calc(100svh - 117px + var(--hauteur-entete))) !important;
}
.hero__inner { padding-top: var(--hauteur-entete); }
/* L'etat transparent. La classe est posee par header-hero.js et par lui seul :
sans JavaScript, l'en-tete reste opaque et lisible. La transparence est un
enrichissement, jamais une condition de lisibilite. */
.site-header {
transition: background-color var(--duration-slow) var(--ease-out),
border-color var(--duration-slow) var(--ease-out),
backdrop-filter var(--duration-slow) var(--ease-out);
}
/* Le tout premier etat est pose sans transition, sinon l'en-tete s'allume du
noir vers le transparent a chaque chargement de la home. */
.site-header.sans-transition { transition: none !important; }
.site-header.is-sur-hero {
/* ── TRANSPARENCE TOTALE, ET C'EST LA MESURE QUI L'AUTORISE ────────────
Le reflexe aurait ete de poser un voile degrade « par securite ». Il
n'etait pas necessaire, et le verifier a pris cinq minutes.
Methode : en-tete masque, video calee sur six instants (0, 2, 4, 6, 8 et
9,9 s), bande de 1440x89 capturee a chaque fois, puis contraste du texte
blanc juge sur le 90e centile de luminance du fond — le pire cas realiste,
les pixels les plus clairs. Les quatre zones sont mesurees separement
parce que les elements de l'en-tete ne sont pas au meme endroit, et que
c'est a DROITE que le bouclier se forme et s'illumine :
zone t=0 t=2 t=4 t=6 t=8 t=9,9
logo (gauche) 18,36 18,36 18,36 18,36 18,36 18,36
navigation 18,40 18,41 18,42 18,46 18,49 18,51
selecteur langue 18,20 18,20 18,19 18,19 18,18 18,18
bouton ASHA CSIRT 6,78 6,78 6,78 6,78 6,78 6,78
Pire cas toutes zones et tous instants : 6,78:1, pour un seuil de 4,5.
La raison tient a la composition de l'animation : le bouclier occupe le
milieu-droit du cadre, jamais les 89 premiers pixels, et le haut de la
video reste sombre du debut a la fin. Les six captures different bien
entre elles (ecart croissant de 15 000 a 90 000 sur la somme des
differences), donc le calage a fonctionne : la constance des ratios est
un fait, pas une mesure ratee.
A REVERIFIER si l'animation du hero change : c'est SA composition qui
autorise cette transparence, pas une propriete du header. Une video dont
le haut serait clair demanderait un voile, et le script de mesure est
conserve dans le journal du chantier. */
background: transparent;
border-bottom-color: transparent;
/* Le flou de fond part : il est fait pour separer l'en-tete du contenu, et
ici on veut exactement l'inverse, voir l'animation nette derriere. */
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Ecrans peu hauts : la regle media de la l. ~8311 ecrase le padding du hero
en !important, mais elle ne touche pas .hero__inner, donc la compensation
tient. Rien a ajouter ici, c'est note pour qu'on ne cherche pas une regle
manquante. */
/* MOBILE. Sous 920 px la video ne se charge pas — le hero montre l'image de
fond, ce que le script du hero decide depuis le 2026-08-18 pour ne pas
telecharger 2,6 Mo sur un forfait. Le voile reste donc pose sur une image
fixe, mesuree elle aussi. */
/* ── L'EMBLEME DU HAUT-DROIT NE DOIT PLUS ETRE COUPE — 2026-09-06 ────────
Gabriel : « baisser un peu la video vers le bas pour qu'on puisse voir
l'embleme en haut a droite, en ce moment cette partie est coupee ».
CE QUE LA MESURE A DIT, ET LA CAUSE N'ETAIT PAS CELLE QU'ON CROYAIT.
L'embleme occupe x de 1613 a 1828 et y de 26 a 196 dans la video source,
soit a 2,4 % du haut et a 92 px du bord droit. La video est en 16:9 et le
hero est PLUS HAUT que 16:9 sur la plupart des ecrans : `cover` cale donc
sur la hauteur et rogne les COTES. C'est ce rognage lateral qui coupait
l'embleme, pas un debordement vers le haut — mesure a 11 px de coupe sur un
ecran 1512, 151 px sur un 1100.
Descendre la video seule n'aurait donc rien regle : elle serait toujours
coupee a droite.
LE REGLAGE RETENU : `object-position: right`, et lui seul.
Il envoie tout le rognage lateral a GAUCHE. Comme l'embleme est a 92 px du
bord droit de la source, il ne peut plus etre coupe : verifie sur neuf
largeurs de 1920 a 960, aucune coupe.
Effet de bord voulu : le bouclier se cale a droite, ce qui renforce la
composition du hero, titre a gauche et sujet a droite.
── LA DESCENTE DE 80 PX A ETE POSEE PUIS RETIREE LE MEME JOUR ───────────
Elle repondait a la demande litterale « baisser un peu la video ». Elle a
ete faite par `top: 80px; height: calc(100% - 80px)`, et le commentaire que
j'avais ecrit affirmait que « la jonction ne se voit pas ». JE NE L'AVAIS
PAS VERIFIE, et c'etait faux.
Gabriel l'a vu tout de suite : « c'est bizarre, maintenant le header n'est
plus transparent sur le hero ». Il l'etait pourtant — mesure,
`background-color: rgba(0, 0, 0, 0)` et la classe bien posee. Mais la video
commencait 80 px plus bas, donc DERRIERE l'en-tete transparent on ne voyait
plus l'animation : on voyait le fond du hero, une bande sombre et unie qui
se lit exactement comme un en-tete opaque.
Mesure de la rupture, cote droit, luminance moyenne par bande :
40-80 px (fond du hero) 0,03012
80-89 px (jonction) 0,00577
90-130 px (video) 0,02282
Une ligne franche a 80 px, precisement ce qu'on cherchait a supprimer en
rendant l'en-tete transparent.
LA LECON, et elle vaut au-dela de ce bloc : rendre un en-tete transparent
n'a de sens que si quelque chose de VIVANT passe dessous. Tout ce qui
deplace le contenu du hero vers le bas annule le benefice, meme si l'en-tete
reste techniquement transparent. Les deux reglages se contredisaient, et
c'est le second qui saute.
A REVERIFIER si l'animation change : la position de l'embleme dans CETTE
video est ce qui rend `right` suffisant. */
.hero__bg-video {
/* `top` ET NON `center`, 2026-09-06. Quand le hero est plus large que 16:9,
`cover` cale sur la largeur et rogne la HAUTEUR ; en `center` ce rognage
se partage, donc la partie SUPERIEURE de la video est coupee. Mesure du
haut perdu : 14 px a 1920x1080, 1600x900 et 2560x1440, 9 px a 1760x1000,
et l embleme tombait a 4 px du bord sur 1366x768.
En `top`, tout le rognage passe en BAS : la partie superieure est toujours
entiere, et le sujet gagne les 14 px qu il perdait. Le cout est de 28 px
au maximum perdus en bas, sur le champ de particules qui se poursuit. */
object-position: right top;
/* ── SIX PIXELS VERS LE HAUT — 2026-09-06 ─────────────────────────────
Gabriel : « l embleme doit etre vraiment a la meme hauteur que le bouton
ASHA CSIRT, il faut juste monter la video de quelques petits pixels ».
Mesure sur sa capture d ecran (1920x1032, Chrome) : le centre du texte du
bouton est a y=164, le noyau lumineux de l embleme a y=170, soit six pixels.
Porte a SEPT le 2026-09-06 a sa demande, apres controle a l ecran : la
mesure donnait 1,5 px d ecart residuel a six, elle en donne 0,5 a sept.
LA BOITE MONTE DE 6 PX ET GAGNE 6 PX DE HAUT, et les deux vont ensemble :
un `top: -6px` seul decouvrirait 6 px de fond du hero en BAS du hero. En
ajoutant la meme valeur a la hauteur, la boite couvre toujours exactement
de 0 a la fin du hero, et c est le CONTENU qui monte.
La valeur est une variable : elle s ajuste d un chiffre. */
--hero-video-montee: 7px;
top: calc(-1 * var(--hero-video-montee));
height: calc(100% + var(--hero-video-montee));
}
/* ══════════════════════════════════════════════════════════════════════════
LE BLEU GAGNE LES DEUX FORMULAIRES ET LE HALO DU CTA — 2026-09-06
══════════════════════════════════════════════════════════════════════════
Trois demandes de Gabriel : le bleu de la page ASHA CSIRT actualise, le
formulaire de la page contacto passe au bleu lui aussi, et le halo qui
s'allume au survol du bouton bleu du CTA final cesse d'etre ROUGE.
CE QUE CELA REVISE, ET IL FAUT LE DIRE. Le 2026-09-04, l'arbitrage etait
« bleu editorial seulement, la persona CSIRT garde son cyan », et
#csirt-form avait ete explicitement laisse HORS du scope avec ce
commentaire : « le bleu retenu est celui du CSIRT, l'equipe dont cette
section parle ». Gabriel revient dessus aujourd'hui pour le formulaire.
CONSEQUENCE A CONNAITRE : la persona CSIRT garde son cyan la ou elle est un
PERSONNAGE (sa carte de la home, sa figure de La Liga, sa constellation, son
onglet de sous-nav dans metodologia). Les deux formulaires, eux, sont
desormais bleus. Un visiteur qui passe de la bande CSIRT de metodologia au
formulaire de la page CSIRT verra donc deux bleus differents. C'est
coherent avec « le bleu est la couleur des surfaces editoriales et des
formulaires, le cyan celle du personnage », mais ce n'est vrai que si on le
sait : d'ou cette note. */
/* 1. LES DEUX FORMULAIRES. On vise les IDENTIFIANTS et non .contact-section,
qui est portee aussi par #bolsa-form — le commentaire du 2026-08-22
signale que cette classe a deja repeint le formulaire d'emploi en cyan
trois fois sans que personne l'ait demande. */
#csirt-form,
#form {
--color-csirt: var(--color-azul);
--color-csirt-soft: var(--color-azul-soft);
--color-csirt-ink: var(--color-azul-ink);
}
/* 2. LES LIBELLES PASSENT AU TON CLAIR, et ce n'est pas cosmetique.
Le cyan etait une couleur claire, le bleu est une couleur moyenne :
ton plein #3773c2 sur sol-1 3,85:1 ECHEC
ton plein #3773c2 sur sol-2 3,37:1 ECHEC
soft #60A5FA sur sol-1 7,25:1 OK
soft #60A5FA sur sol-2 6,33:1 OK
Sans ces trois lignes, le passage au bleu rendrait les numeros d'etape et
les intitules de groupe non conformes sur les deux pages. */
#csirt-form .csirt-form__step-num,
#csirt-form .csirt-form__group-title,
#csirt-form .form-section__num,
#csirt-form .form-group__num,
#form .csirt-form__step-num,
#form .csirt-form__group-title,
#form .form-section__num,
#form .form-group__num {
color: var(--color-azul-soft) !important;
}
/* 3. LE HALO DU CTA FINAL. `.btn-primary:hover` pose `box-shadow:
var(--glow-primary)`, un halo ROUGE de la regle generique (l. ~133), et
la regle du CTA bleu ne remplacait que le fond et la bordure : le bouton
devenait bleu et s'allumait en rouge au survol.
Le halo reprend la teinte du bouton, meme rayon et meme alpha que
--glow-primary pour que le geste reste identique. */
.final-cta--azul .btn-primary:hover,
.final-cta--azul .btn-primary:focus-visible {
box-shadow: 0 0 24px color-mix(in srgb, var(--color-azul) 45%, transparent) !important;
}
/* Le bouton d'envoi des deux formulaires suit la meme regle : il herite du
bleu par --color-primary, mais son halo restait rouge. */
#csirt-form .btn-primary:hover,
#csirt-form .btn-primary:focus-visible,
#form .btn-primary:hover,
#form .btn-primary:focus-visible {
box-shadow: 0 0 24px color-mix(in srgb, var(--color-azul) 45%, transparent) !important;
}
/* ── PLUS D'ESPACE VIDE A DROITE DU FORMULAIRE D'EMPLOI — 2026-09-06 ─────
Gabriel : « montrer plus de l'image a droite du formulaire pour qu'il n'y
ait pas d'espace vide a droite, soit elargir l'image ou le formulaire, soit
un peu des deux ».
MESURE DE L'ETAT ANTERIEUR, dans le conteneur de la section :
1920 px : conteneur 1760, bloc 1400 -> 296 px de vide a droite
1760 px : conteneur 1760, bloc 1400 -> 296 px
1600 px : conteneur 1600, bloc 1400 -> 136 px
1512 px et moins : 55 a 60 px, c'est-a-dire rien
La cause est le `max-width: 1400px` pose sur .bolsa-top le 2026-08-18. Son
commentaire dit qu'il evitait « un vide a sa droite a 1920 » : il l'a en
realite deplace, du bord de la photo au bord du bloc.
LA FORMULE RETENUE, « un peu des deux » :
· le bloc prend toute la largeur du conteneur, le vide disparait ;
· le formulaire passe de 820 a 960 px au maximum, +17 %. Il reste sous le
millier de pixels, au-dela duquel une ligne de formulaire devient
inconfortable a lire ;
· la photo prend TOUT le reste, soit environ 640 px a 1760 contre 500
avant, +28 %. C'est elle qui gagne le plus, comme demande.
POURQUOI LE RAPPORT FIXE DISPARAIT ICI. Le 2:3 pose le 18/08 servait a
accorder la hauteur de la photo a celle du formulaire pour UNE largeur de
colonne donnee (500 px -> 750 de haut). Des que la colonne s'elargit, ce
rapport la fait depasser le formulaire de 100 a 280 px selon l'ecran. En
`align-self: stretch` sans rapport impose, elle prend exactement la hauteur
du formulaire quelle que soit la largeur : les deux blocs s'alignent en haut
ET en bas, ce que ni le 2:3 ni le 4:5 ne pouvaient garantir aux deux bouts.
Le recadrage reste gouverne par `object-position: 50% 32%`, qui tient le
visage dans le tiers haut.
SOUS 1360 px, RIEN NE CHANGE : la photo passe deja sous le texte, bornee a
300 px et centree. Ces largeurs n'avaient pas de vide a corriger. */
@media (min-width: 1360px) {
.bolsa-top {
max-width: none;
grid-template-columns: minmax(0, 960px) minmax(320px, 1fr);
}
.bolsa-photo {
aspect-ratio: auto;
align-self: stretch;
}
}
/* CORRECTIF DU MEME JOUR, trouve a la mesure juste apres. Sans rapport impose
et en `stretch`, `.bolsa-photo` n'avait plus de hauteur propre : son ![]()
,
en `height: 100%` dans un parent sans hauteur resolue, retombait sur sa
hauteur INTRINSEQUE — 598 x 1650/1100 = 897 px. La photo poussait donc la
ligne, et le formulaire passait de 750 a 896 px de haut pour la suivre.
Mesure : 887 px a 1920, 896 a 1760, contre 742 partout ailleurs.
L'image sort du calcul de hauteur en passant en absolu dans son cadre, qui
est deja `position: relative`. La ligne reprend alors la hauteur du
formulaire, et la photo s'y etire exactement. */
@media (min-width: 1360px) {
.bolsa-photo { min-height: 0; }
.bolsa-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* ── LE TITRE DU HERO DE contacto PASSE SUR L'EMBLEME — 2026-09-06 ───────
Defaut trouve a la mesure juste apres avoir pose la nouvelle image, et c'est
le meme piege que celui deja paye sur le hero de la home en aout : du rouge
sur du rouge.
Le titre accentue est en --color-primary-lift #EF4444, et sa seconde moitie
(« le respondemos en menos de 24 horas. ») s'etend jusqu'a 85 % de la
largeur, donc PAR-DESSUS l'embleme en mosaique. Mesure sur les pixels
rendus, texte masque, 90e centile du fond :
1280 px 2,23:1 1440 px 2,69:1 1920 px 3,43:1
pour un seuil de 3,0 a ce corps. Deux largeurs sur trois echouaient.
Le voile est un DEGRADE HORIZONTAL et non un aplat : il est dense la ou le
texte se pose et s'efface a droite, pour que l'embleme garde son eclat au
bord. Valeur retenue apres calcul sur les trois captures — 30 % de noir a
85 % de la largeur, la ou le titre se termine, donne 3,21 / 3,66 / 4,30.
Le lede blanc, lui, passait deja largement (15,0 a 19,6:1). */
.page-hero--contact .page-hero__bg-grad {
background:
linear-gradient(90deg,
rgba(0, 0, 0, 0.60) 0%,
rgba(0, 0, 0, 0.45) 55%,
rgba(0, 0, 0, 0.30) 85%,
rgba(0, 0, 0, 0.05) 100%);
}
/* ── LA DESCENTE DE LA VIDEO : DEUX ESSAIS, DEUX ECHECS, ET POURQUOI ────
2026-09-06. Gabriel a demande deux fois de descendre la video du hero. Les
deux tentatives ont ete retirees, et la raison est structurelle : elle merite
d'etre ecrite pour que personne ne la retente sans le savoir.
ESSAI 1 — `top: 80px; height: calc(100% - 80px)`.
Derriere l'en-tete transparent, on voyait le FOND du hero au lieu de
l'animation : une bande unie qui se lit comme un en-tete opaque. Retire.
ESSAI 2 — le meme, plus un `box-shadow` noir pur au-dessus de la video pour
supprimer la jonction. La jonction a bien disparu (ecart ramene de 1,44:1 a
1,01:1, sous le seuil de 1,14), MAIS le resultat est pire : la bande derriere
l'en-tete devient un aplat NOIR, c'est-a-dire exactement l'apparence d'un
en-tete opaque. Corriger la jonction ne servait a rien, le probleme n'etait
pas la frontiere mais le fait qu'il n'y ait plus d'animation derriere.
CE QUI REND LES DEUX DEMANDES INCOMPATIBLES EN L'ETAT. L'embleme est a 2,4 %
du haut de l'image source (y de 26 a 196 sur 1080). Il n'y a presque rien
au-dessus de lui dans la video. Donc :
· pour voir l'animation DERRIERE l'en-tete, la video doit commencer a y=0 ;
· pour descendre son contenu, il faut montrer ce qui est au-dessus de
l'embleme — et il n'y a rien.
Aucun reglage CSS ne cree du contenu absent. Les seules vraies issues sont
de reduire la hauteur du hero, ou de regenerer une animation dont le sujet
n'est pas colle au bord haut.
L'ETAT CONSERVE est donc : video pleine (top 0, hauteur 100 %), cadrage colle
a droite pour que l'embleme ne soit jamais coupe. */
/* ══════════════════════════════════════════════════════════════════════════
LES BOUTONS DES FORMULAIRES BLEUS NE VIRENT PLUS AU ROUGE — 2026-09-06
══════════════════════════════════════════════════════════════════════════
Gabriel : « les boutons du formulaire ASHA CSIRT deviennent rouges au survol
alors qu'ils devraient rester bleus ».
LA CAUSE, et elle etait a deux tokens pres. Le passage au bleu redefinit
dans la portee des formulaires --color-primary, --color-primary-deep,
--color-primary-soft et --color-primary-lift. Il OUBLIAIT les deux que le
survol utilise :
.btn-primary:hover { background: var(--color-primary-hover); <- #B91C1C
box-shadow: var(--glow-primary); } <- rouge
Au repos le bouton etait donc bleu, et il redevenait rouge des qu'on le
survolait. Meme chose pour le bouton d'envoi de l'assistant et pour celui du
selecteur de fichier, qui lisent le meme token.
LE GESTE EST CELUI DU ROUGE, TRANSPOSE. Le rouge s'assombrit au survol,
#DC2626 -> #B91C1C, et gagne un halo de sa propre teinte. Le bleu fait
exactement pareil : #3773c2 -> #2E63A8, halo bleu.
Contraste du libelle blanc verifie aux deux etats : 4,78:1 au repos, 6,06:1
au survol. Pour comparaison le rouge donne 6,47 au survol : meme ordre. */
#csirt-form,
#form,
#bolsa-form {
--color-primary-hover: var(--color-azul-ink);
--glow-primary: 0 0 24px color-mix(in srgb, var(--color-azul) 45%, transparent);
}
/* SECOND DEFAUT, TROUVE PAR LA MEME MESURE : le bouton d'envoi de la page
contacto etait ROUGE AU REPOS, et l'est depuis sa creation le 2026-09-04.
#csirt-form et #bolsa-form redefinissent --color-primary chacun dans son
bloc (l. ~16736 et ~16889), mais #form, la section de la nouvelle page,
n'avait jamais recu l'equivalent : le passage au bleu du 06/09 n'avait
redefini que les tokens --color-csirt, dont .btn-primary ne se sert pas.
Mesure avant correctif : repos #DC2626 sur contacto, #3773C2 sur les deux
autres. */
#form {
--color-primary: var(--color-azul);
--color-primary-deep: var(--color-azul-ink);
--color-primary-soft: var(--color-azul-soft);
--color-primary-lift: var(--color-azul-soft);
--plq: var(--color-azul);
}
/* ── LE SELECTEUR DE FICHIER, EN TROIS LANGUES — 2026-09-06 ──────────────
Le libelle du bouton d'un est dessine par le NAVIGATEUR
et suit SA langue. Aucune regle CSS ni aucun attribut ne le renomme :
::file-selector-button pouvait le repeindre, pas le traduire. D'ou un
« Choose File » anglais au milieu d'un formulaire espagnol.
L'input reste dans le DOM — il porte la valeur, `accept` et `required`, donc
la validation du navigateur continue de fonctionner — et c'est un